{ "_copyright": "Copyright (c) 2026, Salesforce, Inc., All rights reserved. For full license text, see the LICENSE.txt file", "$schema": "https://slds.lightningdesignsystem.com/schemas/uif-system.v1.json", "apiVersion": "1.0.0", "name": "TreeGrid", "description": "A tree grid displays hierarchical tabular data with expandable rows.", "structure": { "name": "root", "restrict": [ "table" ], "description": "Tree grid table", "attributes": { "static": { "role": "treegrid", "class": "slds-table slds-table_edit slds-tree slds-table_tree" } }, "children": [ { "name": "thead", "restrict": [ "thead" ], "description": "Table header", "slot": { "name": "header" }, "children": [ { "name": "headerRow", "restrict": [ "tr" ], "description": "Header row", "children": [ { "name": "headerCell", "restrict": [ "th" ], "description": "Header cell (column header)", "children": [ { "name": "headerCellAssistiveLabel", "restrict": [ "span", "div" ], "description": "Visually hidden label identifying the column or selection group", "attributes": { "static": { "class": "slds-assistive-text" } } }, { "name": "headerCellAction", "restrict": [ "div", "a" ], "description": "Header action wrapper (sort link or select-all form)", "children": [ { "name": "headerCellActionAssistiveText", "restrict": [ "span" ], "description": "Assistive prefix text for the action (e.g. 'Sort by:')", "attributes": { "static": { "class": "slds-assistive-text" } } }, { "name": "headerCellActionLabelWrapper", "restrict": [ "div" ], "description": "Wrapper aligning the action label with its trailing icon", "attributes": { "static": { "class": "slds-grid slds-grid_vertical-align-center slds-has-flexi-truncate" } } }, { "name": "headerCellActionLabel", "restrict": [ "span" ], "description": "Visible column header label", "attributes": { "static": { "class": "slds-truncate" } } }, { "name": "headerCellSortIconContainer", "restrict": [ "span" ], "description": "Container for the sort indicator icon", "attributes": { "static": { "class": "slds-icon_container slds-icon-utility-arrowdown" } } }, { "name": "headerCellSortIcon", "restrict": [ "svg" ], "description": "Sort indicator SVG", "attributes": { "static": { "class": "slds-icon slds-icon-text-default slds-is-sortable__icon", "aria-hidden": "true" } }, "children": [ { "name": "headerCellSortIconUse" } ] }, { "name": "headerCellSortIconUse", "restrict": [ "use" ], "description": "Sort indicator SVG sprite reference" }, { "name": "headerSelectAllCheckbox", "restrict": [ "div" ], "description": "Select-all checkbox wrapper inside the header action", "attributes": { "static": { "class": "slds-checkbox" } }, "children": [ { "name": "headerSelectAllInput" }, { "name": "headerSelectAllLabel", "attributes": { "static": { "class": "slds-checkbox__label" } }, "children": [ { "name": "headerSelectAllFaux", "attributes": { "static": { "class": "slds-checkbox_faux" } } }, { "name": "headerSelectAllLabelText", "attributes": { "static": { "class": "slds-form-element__label slds-assistive-text" } } } ] } ] }, { "name": "headerSelectAllInput", "restrict": [ "input" ], "description": "Select-all checkbox input" }, { "name": "headerSelectAllLabel", "restrict": [ "label" ], "description": "Select-all checkbox label" }, { "name": "headerSelectAllFaux", "restrict": [ "span" ], "description": "Visual checkbox surface for the select-all control" }, { "name": "headerSelectAllLabelText", "restrict": [ "span" ], "description": "Visually hidden text describing the select-all action" } ], "attributes": { "static": { "class": "slds-th__action" } }, "modifiers": [ { "name": "form", "attribute": "class", "value": "slds-th__action_form", "description": "Used when the header action hosts the select-all checkbox form" }, { "name": "textLinkReset", "attribute": "class", "value": "slds-text-link_reset", "description": "Removes link styling from a sortable header action anchor" } ] }, { "name": "headerCellActionsMenuButton", "restrict": [ "button" ], "description": "Trailing button that opens the column actions menu", "attributes": { "static": { "class": "slds-button slds-button_icon slds-th__action-button slds-button_icon-x-small", "aria-haspopup": "true" } }, "children": [ { "name": "headerCellActionsMenuIcon", "attributes": { "static": { "class": "slds-button__icon slds-button__icon_hint slds-button__icon_small", "aria-hidden": "true" } }, "children": [ { "name": "headerCellActionsMenuIconUse" } ] }, { "name": "headerCellActionsMenuAssistiveText", "attributes": { "static": { "class": "slds-assistive-text" } } } ] }, { "name": "headerCellActionsMenuIcon", "restrict": [ "svg" ], "description": "Icon inside the column actions menu button" }, { "name": "headerCellActionsMenuIconUse", "restrict": [ "use" ], "description": "Sprite reference for the column actions menu icon" }, { "name": "headerCellActionsMenuAssistiveText", "restrict": [ "span" ], "description": "Visually hidden description of the column actions menu button" }, { "name": "headerCellResizer", "restrict": [ "div" ], "description": "Column resizer wrapper", "attributes": { "static": { "class": "slds-resizable" } }, "children": [ { "name": "headerCellResizerInput", "attributes": { "static": { "class": "slds-resizable__input slds-assistive-text" } } }, { "name": "headerCellResizerHandle", "attributes": { "static": { "class": "slds-resizable__handle" } }, "children": [ { "name": "headerCellResizerDivider", "attributes": { "static": { "class": "slds-resizable__divider" } } } ] } ] }, { "name": "headerCellResizerInput", "restrict": [ "input" ], "description": "Resize handle input (range) controlling column width" }, { "name": "headerCellResizerHandle", "restrict": [ "span" ], "description": "Visible drag handle for the column resizer" }, { "name": "headerCellResizerDivider", "restrict": [ "span" ], "description": "Divider line rendered inside the resize handle" }, { "name": "headerCellLabel", "restrict": [ "div" ], "description": "Plain (non-actionable) header label, used in headless variants and actions column", "attributes": { "static": { "class": "slds-truncate slds-assistive-text" } } } ], "modifiers": [ { "name": "textAlignRight", "attribute": "class", "value": "slds-text-align_right", "description": "Right-aligns the header cell content (used by the selection column)" }, { "name": "hasButtonMenu", "attribute": "class", "value": "slds-has-button-menu", "description": "Indicates the header cell hosts a trailing column actions menu button" }, { "name": "isResizable", "attribute": "class", "value": "slds-is-resizable", "description": "Marks the column as resizable" }, { "name": "isSortable", "attribute": "class", "value": "slds-is-sortable", "description": "Marks the column as sortable" } ] } ], "attributes": { "static": { "class": "slds-line-height_reset" } } } ], "modifiers": [ { "name": "assistiveText", "attribute": "class", "value": "slds-assistive-text", "description": "Visually hides the entire header (paired with the headless table modifier)" } ] }, { "name": "tbody", "restrict": [ "tbody" ], "description": "Table body with tree rows", "slot": { "name": "default" }, "children": [ { "name": "row", "restrict": [ "tr" ], "description": "Data row in the tree grid", "children": [ { "name": "selectCell", "restrict": [ "td" ], "description": "Leading cell containing the per-row selection checkbox", "attributes": { "static": { "class": "slds-text-align_right", "role": "gridcell" } } }, { "name": "selectCheckbox", "restrict": [ "div" ], "description": "Per-row selection checkbox wrapper", "attributes": { "static": { "class": "slds-checkbox" } } }, { "name": "selectCheckboxInput", "restrict": [ "input" ], "description": "Per-row selection checkbox input" }, { "name": "selectCheckboxLabel", "restrict": [ "label" ], "description": "Per-row selection checkbox label", "attributes": { "static": { "class": "slds-checkbox__label" } } }, { "name": "selectCheckboxFaux", "restrict": [ "span" ], "description": "Visual checkbox surface for the per-row selection control", "attributes": { "static": { "class": "slds-checkbox_faux" } } }, { "name": "selectCheckboxLabelText", "restrict": [ "span" ], "description": "Visually hidden text for the per-row selection label", "attributes": { "static": { "class": "slds-form-element__label slds-assistive-text" } } }, { "name": "treeItemCell", "restrict": [ "th" ], "description": "Initializes a slds tree item", "attributes": { "static": { "class": "slds-tree__item" } } }, { "name": "treeItemToggle", "restrict": [ "button" ], "description": "Button that expands or collapses the row's children", "attributes": { "static": { "class": "slds-button slds-button_icon slds-button_icon-x-small slds-m-right_x-small", "aria-hidden": "true" } }, "modifiers": [ { "name": "disabled", "attribute": "class", "value": "slds-is-disabled", "description": "Disables the expand/collapse button when the row has no children" } ], "children": [ { "name": "treeItemToggleIcon", "attributes": { "static": { "class": "slds-button__icon slds-button__icon_small", "aria-hidden": "true" } }, "children": [ { "name": "treeItemToggleIconUse" } ] }, { "name": "treeItemToggleAssistiveText", "attributes": { "static": { "class": "slds-assistive-text" } } } ] }, { "name": "treeItemToggleIcon", "restrict": [ "svg" ], "description": "Chevron icon for the expand/collapse button" }, { "name": "treeItemToggleIconUse", "restrict": [ "use" ], "description": "Sprite reference for the expand/collapse icon" }, { "name": "treeItemToggleAssistiveText", "restrict": [ "span" ], "description": "Visually hidden description of the expand/collapse button" }, { "name": "treeItemLabel", "restrict": [ "div" ], "description": "Wrapper around the primary cell label (truncates overflow)", "attributes": { "static": { "class": "slds-truncate" } }, "children": [ { "name": "treeItemLabelLink" } ] }, { "name": "treeItemLabelLink", "restrict": [ "a" ], "description": "Optional link rendered inside the primary cell label" }, { "name": "cell", "restrict": [ "td" ], "description": "Standard data cell", "attributes": { "static": { "role": "gridcell" } }, "children": [ { "name": "cellInner", "attributes": { "static": { "class": "slds-truncate" } }, "children": [ { "name": "cellLink" } ] } ] }, { "name": "cellInner", "restrict": [ "div" ], "description": "Wrapper around cell content (truncates overflow)" }, { "name": "cellLink", "restrict": [ "a" ], "description": "Optional link rendered inside a data cell" }, { "name": "rowActionsCell", "restrict": [ "td" ], "description": "Trailing cell hosting the per-row actions menu", "attributes": { "static": { "role": "gridcell" } }, "children": [ { "name": "rowActionsButton", "attributes": { "static": { "class": "slds-button slds-button_icon slds-button_icon-border-filled slds-button_icon-x-small", "aria-haspopup": "true" } }, "children": [ { "name": "rowActionsIcon", "attributes": { "static": { "class": "slds-button__icon slds-button__icon_hint slds-button__icon_small", "aria-hidden": "true" } }, "children": [ { "name": "rowActionsIconUse" } ] }, { "name": "rowActionsAssistiveText", "attributes": { "static": { "class": "slds-assistive-text" } } } ] } ] }, { "name": "rowActionsButton", "restrict": [ "button" ], "description": "Button that opens the per-row actions menu" }, { "name": "rowActionsIcon", "restrict": [ "svg" ], "description": "Icon inside the per-row actions button" }, { "name": "rowActionsIconUse", "restrict": [ "use" ], "description": "Sprite reference for the per-row actions icon" }, { "name": "rowActionsAssistiveText", "restrict": [ "span" ], "description": "Visually hidden description of the per-row actions button" } ], "attributes": { "static": { "class": "slds-hint-parent" } } } ] } ], "modifiers": [ { "name": "bordered", "attribute": "class", "value": "slds-table_bordered", "description": "Adds cell borders to the table" }, { "name": "fixedLayout", "attribute": "class", "value": "slds-table_fixed-layout", "description": "Fixed column width layout" }, { "name": "resizableCols", "attribute": "class", "value": "slds-table_resizable-cols", "description": "Resizable columns" }, { "name": "headerHidden", "attribute": "class", "value": "slds-table_header-hidden", "description": "Visually hides the header row (headless variant)" } ] }, "states": [ { "name": "expandedRow", "type": "boolean", "aria": "aria-expanded", "description": "Whether the row is expanded" }, { "name": "rowSelected", "type": "boolean", "aria": "aria-selected", "description": "Whether the row is selected" }, { "name": "rowLevel", "type": "enum", "aria": "aria-level", "description": "Depth of the row in the tree hierarchy (1-based)", "options": [] }, { "name": "rowPosition", "type": "enum", "aria": "aria-posinset", "description": "Position of the row within its sibling set", "options": [] }, { "name": "rowSetSize", "type": "enum", "aria": "aria-setsize", "description": "Total number of siblings in the row's set", "options": [] }, { "name": "multiSelectable", "type": "boolean", "aria": "aria-multiselectable", "description": "Whether the grid permits multiple row selection" }, { "name": "columnSort", "type": "enum", "aria": "aria-sort", "description": "Sort direction for a sortable column header ('none', 'ascending', 'descending', 'other')", "options": [] }, { "name": "hasPopup", "type": "enum", "aria": "aria-haspopup", "description": "Indicates the button opens a popup (e.g. menu)", "options": [] }, { "name": "decorative", "type": "boolean", "aria": "aria-hidden", "description": "Hides decorative SVGs from assistive technologies" }, { "name": "labelledBy", "type": "enum", "aria": "aria-labelledby", "description": "References the id(s) of the element(s) that label the input", "options": [] }, { "name": "label", "type": "enum", "aria": "aria-label", "description": "Accessible label for the grid or for an unlabelled control", "options": [] }, { "name": "cellLabel", "type": "enum", "description": "Column label echoed on a cell, used as a fallback header in responsive layouts", "options": [] }, { "name": "rowHovered", "type": "boolean", "description": "Whether the component is in the rowHovered state" } ], "accessibility": { "requirements": [ { "id": "treegrid-role", "description": "Table must have role='treegrid'" }, { "id": "grid-label", "description": "Table must have an accessible name via aria-label or aria-labelledby" }, { "id": "aria-level", "description": "Rows must have aria-level indicating depth in the hierarchy" }, { "id": "aria-posinset-setsize", "description": "Rows must declare their aria-posinset and aria-setsize relative to their sibling set" }, { "id": "aria-expanded", "description": "Expandable rows must have aria-expanded; leaf rows omit the attribute" }, { "id": "aria-selected", "description": "Selectable rows must reflect their selection state via aria-selected" }, { "id": "aria-multiselectable", "description": "When multi-select is enabled, the table must declare aria-multiselectable='true'" }, { "id": "gridcell-role", "description": "Data cells must declare role='gridcell'" }, { "id": "sort-state", "description": "Sortable column headers must reflect their current state via aria-sort" }, { "id": "popup-button", "description": "Buttons that open menus must declare aria-haspopup='true'" }, { "id": "decorative-icons", "description": "Decorative SVG icons must declare aria-hidden='true'" }, { "id": "control-labels", "description": "Per-row checkboxes must reference an accessible label via aria-labelledby" } ] }, "extensions": { "com.salesforce-ux": { "dateAdded": "2018-03-01", "genReady": false, "lbc": "lightning-tree-grid" } }, "cssSource": "./treeGrid.css", "styleApi": { "status": "stable", "ready": true }, "stateClasses": [ { "state": "expandedRow", "class": "slds-is-expanded" }, { "state": "rowSelected", "class": "slds-is-selected" }, { "state": "rowHovered", "class": "slds-is-hovered" } ] }