Tree Grid generator

lightning-tree-grid was intentionally deferred from the original component set — it earns its own generator because it isn’t just a tree with more text, it’s a hierarchy where every row carries real column data. Style the header, row borders and the amount/value column so an org chart with headcount or a bill-of-materials with quantity and cost reads cleanly at every depth.

Your changes autosave in this browser, and the link above reproduces this exact configuration for anyone you send it to.

Live preview

Generated code

<template>
    <lightning-tree-grid
        columns={columns}
        data={gridData}
        key-field="name"
        class="studio-tree-grid"
        onrowaction={handleRowAction}
    ></lightning-tree-grid>
</template>

Design tips for tree grids

Reserve tree-grid for hierarchies where the columns genuinely differ by row depth in meaning (parent totals vs. child line items) — for a flat table, use the table generator instead.
Right-align numeric columns like the amount column so totals scan quickly down the page.
Keep the header background distinct enough from row backgrounds that users can tell column labels from data even while scrolling.

Related components

Components developers commonly compare against or pair with Tree Grid.

Tree Data Table Map Button