A tree is visualization of a structure hierarchy. A branch can be expanded or collapsed.

Choose a row Select All	Sort by: Account Name	Sort by: Employees	Sort by: Phone Number	Sort by: Account Owner	Sort by: Billing City
Select item 0	Rewis Inc	3,100	837-555-1212	Jane Doe	Phoenix, AZ
Select item 1	Acme Corporation	10,000	837-555-1212	John Doe	San Francisco, CA
Select item 2	Rohde Enterprises	6,000	837-555-1212	John Doe	New York, NY
Select item 3	Cheese Corp	1,234	837-555-1212	Jane Doe	Paris, France

About Tree Grid#

A tree grid is additional semantics that are laid on top of a grid based component via ARIA attributes, to enable hierarchically structured tabular data.

The tree grid comes with a very specific keyboard interaction model which must be implemented for the component to be screen reader accessible.

Accessibility#

Markup#

role="treegrid" should be applied to the table element
aria-readonly="true" should be applied to the table element
aria-level="n" where n represents the nesting level of a particular grid row, should be applied to the tr element
aria-setsize="n" where n is the number of items for that specific aria-level should be applied to the tr element
aria-posinset="n" where n represents the position in the aria-level set the row is placed at, should be applied to the tr element
aria-expanded="false" should be placed on rows that are collapsed and have child rows
aria-expanded="true" should be placed on rows that are expanded and have child rows
tabindex="0" should be placed on the first tr in the grid on load, to make the row focusable
Every actionable element in the grid should have tabindex="-1" applied to make them not focusable in the grids navigation mode

Multi select tree grid:

aria-multiselectable="true" should be placed on the table element
aria-selected="false" should be set by default on all tr elements that aren't selected
aria-selected="true" should be set only on the tr elements that are selected

Single Select tree grid:

aria-selected="true" should be applied to the tr that is selected in the tree grid

Keyboard Interactions#

Overall keyboard interaction should follow the same keyboard modal as the Advanced and Inline Edit Data Table with some additions
- Navigation mode is the default mode. The grid only has a single focusable element at any time and it is either the tr or the td
- Actionable mode is enabled when the user presses the Enter key, where actionable elements become focusable in the cell
- Actionable mode is exited when the user presses the Escape key, and the user is placed back into Navigation Mode on the last cell they were in
User focus is initially placed on the first row in the tree grid
Down arrow key moves the user down one row and moves tabindex="0" with it
Up arrow key moves the user up one row and moves tabindex="0" with it
Space key when focused on a row should select that row by setting aria-selected="true on the tr element
Right arrow key on a collapsed row, will expand it and update aria-expanded
Right arrow key on an expanded or end row will move the user to the first cell in the row and move tabindex="0" with it
Right arrow key on a cell will move the user to the next cell in the row and move tabindex="0" with it
Left arrow key on a collapsed or end row will move the user to it's parent row and collapse it, if it has one
Left arrow key on an expanded row will collapse it and update aria-expanded
Left arrow key on a cell will move the user to the previous cell in the row and moves tabindex="0" with it
Left arrow key on the first cell of a row will move the user back to the row and moves tabindex="0" with it

Base#

Choose a row Select All	Sort by: Account Name	Sort by: Employees	Sort by: Phone Number	Sort by: Account Owner	Sort by: Billing City
Select item 4	Rewis Inc	3,100	837-555-1212	Jane Doe	Phoenix, AZ
Select item 5	Acme Corporation	10,000	837-555-1212	John Doe	San Francisco, CA
Select item 6	Rohde Enterprises	6,000	837-555-1212	John Doe	New York, NY
Select item 7	Cheese Corp	1,234	837-555-1212	Jane Doe	Paris, France

<table aria-multiselectable="true" class="slds-table slds-table_bordered slds-table_edit slds-table_fixed-layout slds-table_resizable-cols slds-tree slds-table_tree" role="treegrid" aria-label="Example default tree grid">
  <thead>
    <tr class="slds-line-height_reset">
      <th class="slds-text-align_right" scope="col" style="width:3.25rem">

States#

Expanded#

Choose a row Select All	Sort by: Account Name	Sort by: Employees	Sort by: Phone Number	Sort by: Account Owner	Sort by: Billing City
Select item 16	Rewis Inc	3,100	837-555-1212	Jane Doe	Phoenix, AZ
Select item 17	Acme Corporation	10,000	837-555-1212	John Doe	San Francisco, CA
Select item 18	Acme Corporation (Oakland)	745	837-555-1212	John Doe	New York, NY
Select item 19	Rohde Enterprises	6,000	837-555-1212	John Doe	New York, NY
Select item 20	Cheese Corp	1,234	837-555-1212	Jane Doe	Paris, France

<table aria-multiselectable="true" class="slds-table slds-table_bordered slds-table_edit slds-table_fixed-layout slds-table_resizable-cols slds-tree slds-table_tree" role="treegrid" aria-label="Example expanded tree grid">
  <thead>
    <tr class="slds-line-height_reset">
      <th class="slds-text-align_right" scope="col" style="width:3.25rem">

Selected row#

Choose a row Select All	Sort by: Account Name	Sort by: Employees	Sort by: Phone Number	Sort by: Account Owner	Sort by: Billing City
Select item 31	Rewis Inc	3,100	837-555-1212	Jane Doe	Phoenix, AZ
Select item 32	Acme Corporation	10,000	837-555-1212	John Doe	San Francisco, CA
Select item 33	Acme Corporation (Oakland)	745	837-555-1212	John Doe	New York, NY
Select item 34	Rohde Enterprises	6,000	837-555-1212	John Doe	New York, NY
Select item 35	Cheese Corp	1,234	837-555-1212	Jane Doe	Paris, France

<table aria-multiselectable="true" class="slds-table slds-table_bordered slds-table_edit slds-table_fixed-layout slds-table_resizable-cols slds-tree slds-table_tree" role="treegrid" aria-label="Example tree grid with selected row">
  <thead>
    <tr class="slds-line-height_reset">
      <th class="slds-text-align_right" scope="col" style="width:3.25rem">

Deeply nested branches#

Choose a row Select All	Sort by: Account Name	Sort by: Employees	Sort by: Phone Number	Sort by: Account Owner	Sort by: Billing City
Select item 46	Rewis Inc	3,100	837-555-1212	Jane Doe	Phoenix, AZ
Select item 47	Acme Corporation	10,000	837-555-1212	John Doe	San Francisco, CA
Select item 48	Acme Corporation (Bay Area)	3,000	837-555-1212	John Doe	New York, NY
Select item 49	Acme Corporation (Oakland)	745	837-555-1212	John Doe	New York, NY
Select item 50	Acme Corporation (San Francisco)	578	837-555-1212	Jane Doe	Los Angeles, CA
Select item 51	Acme Corporation (East)	430	837-555-1212	John Doe	San Francisco, CA
Select item 52	Acme Corporation (NY)	1,210	837-555-1212	Jane Doe	New York, NY
Select item 53	Acme Corporation (VA)	410	837-555-1212	John Doe	New York, NY
Select item 54	Allied Technologies	390	837-555-1212	Jane Doe	Los Angeles, CA
Select item 55	Allied Technologies (UV)	270	837-555-1212	John Doe	San Francisco, CA
Select item 56	Rohde Enterprises	6,000	837-555-1212	John Doe	New York, NY
Select item 57	Rohde Enterprises (UCA)	2,540	837-555-1212	John Doe	New York, NY
Select item 58	Tech Labs	1,856	837-555-1212	John Doe	New York, NY
Select item 59	Opportunity Resources Inc	1,934	837-555-1212	John Doe	Los Angeles, CA

<table aria-multiselectable="true" class="slds-table slds-table_bordered slds-table_edit slds-table_fixed-layout slds-table_resizable-cols slds-tree slds-table_tree" role="treegrid" aria-label="Example tree grid with deep nesting">
  <thead>
    <tr class="slds-line-height_reset">
      <th class="slds-text-align_right" scope="col" style="width:3.25rem">

Examples#

Headless#

Choose a row to select	Account Name	Actions
Select item 88	Rewis Inc
Select item 89	Acme Corporation
Select item 90	Rohde Enterprises
Select item 91	Cheese Corp

<table aria-multiselectable="true" class="slds-table slds-table_header-hidden slds-table_bordered slds-table_edit slds-tree slds-table_tree" role="treegrid" aria-label="Example headless tree grid">
  <thead class="slds-assistive-text">
    <tr class="slds-line-height_reset">
      <th class="slds-text-align_right" scope="col" style="width:3.25rem">

Headless with selected row#

Choose a row to select	Account Name	Actions
Select item 100	Rewis Inc
Select item 101	Acme Corporation
Select item 102	Rohde Enterprises
Select item 103	Cheese Corp

<table aria-multiselectable="true" class="slds-table slds-table_header-hidden slds-table_bordered slds-table_edit slds-tree slds-table_tree" role="treegrid" aria-label="Example headless tree grid with selected row">
  <thead class="slds-assistive-text">
    <tr class="slds-line-height_reset">
      <th class="slds-text-align_right" scope="col" style="width:3.25rem">

Headless with no borders#

Choose a row to select	Account Name	Actions
Select item 112	Rewis Inc
Select item 113	Acme Corporation
Select item 114	Rohde Enterprises
Select item 115	Cheese Corp

<table aria-multiselectable="true" class="slds-table slds-table_header-hidden slds-table_edit slds-tree slds-table_tree" role="treegrid" aria-label="Example headless border-less tree grid">
  <thead class="slds-assistive-text">
    <tr class="slds-line-height_reset">
      <th class="slds-text-align_right" scope="col" style="width:3.25rem">

Headless with no borders and a selected row#

Choose a row to select	Account Name	Actions
Select item 124	Rewis Inc
Select item 125	Acme Corporation
Select item 126	Rohde Enterprises
Select item 127	Cheese Corp

<table aria-multiselectable="true" class="slds-table slds-table_header-hidden slds-table_edit slds-tree slds-table_tree" role="treegrid" aria-label="Example headless border-less tree grid with selected row">
  <thead class="slds-assistive-text">
    <tr class="slds-line-height_reset">
      <th class="slds-text-align_right" scope="col" style="width:3.25rem">

Single select#

Sort by: Account Name	Sort by: Employees	Sort by: Phone Number	Sort by: Account Owner	Sort by: Billing City
Rewis Inc	3,100	837-555-1212	Jane Doe	Phoenix, AZ
Acme Corporation	10,000	837-555-1212	John Doe	San Francisco, CA
Rohde Enterprises	6,000	837-555-1212	John Doe	New York, NY
Cheese Corp	1,234	837-555-1212	Jane Doe	Paris, France

<table class="slds-table slds-table_bordered slds-table_edit slds-table_fixed-layout slds-table_resizable-cols slds-tree slds-table_tree" role="treegrid" aria-label="Example single select tree grid">
  <thead>
    <tr class="slds-line-height_reset">
      <th aria-label="Account Name" aria-sort="none" class="slds-has-button-menu slds-is-resizable slds-is-sortable" scope="col">

Single select with a selected row#

Sort by: Account Name	Sort by: Employees	Sort by: Phone Number	Sort by: Account Owner	Sort by: Billing City
Rewis Inc	3,100	837-555-1212	Jane Doe	Phoenix, AZ
Acme Corporation	10,000	837-555-1212	John Doe	San Francisco, CA
Rohde Enterprises	6,000	837-555-1212	John Doe	New York, NY
Cheese Corp	1,234	837-555-1212	Jane Doe	Paris, France

<table class="slds-table slds-table_bordered slds-table_edit slds-table_fixed-layout slds-table_resizable-cols slds-tree slds-table_tree" role="treegrid" aria-label="Example single select tree grid with selected row">
  <thead>
    <tr class="slds-line-height_reset">
      <th aria-label="Account Name" aria-sort="none" class="slds-has-button-menu slds-is-resizable slds-is-sortable" scope="col">

Single select headless#

Account Name	Actions
Rewis Inc
Acme Corporation
Rohde Enterprises
Cheese Corp

<table class="slds-table slds-table_header-hidden slds-table_bordered slds-table_edit slds-tree slds-table_tree" role="treegrid" aria-label="Example headless single select tree grid">
  <thead class="slds-assistive-text">
    <tr class="slds-line-height_reset">
      <th aria-label="Account Name" class="" scope="col">

Single select headless with selected row#

Account Name	Actions
Rewis Inc
Acme Corporation
Rohde Enterprises
Cheese Corp

<table class="slds-table slds-table_header-hidden slds-table_bordered slds-table_edit slds-tree slds-table_tree" role="treegrid" aria-label="Example single select tree grid with selected row">
  <thead class="slds-assistive-text">
    <tr class="slds-line-height_reset">
      <th aria-label="Account Name" class="" scope="col">

Single select headless with no borders#

Account Name	Actions
Rewis Inc
Acme Corporation
Rohde Enterprises
Cheese Corp

<table class="slds-table slds-table_header-hidden slds-table_edit slds-tree slds-table_tree" role="treegrid" aria-label="Example headless border-less single select tree grid">
  <thead class="slds-assistive-text">
    <tr class="slds-line-height_reset">
      <th aria-label="Account Name" class="" scope="col">

Single select headless with no borders and a selected row#

Account Name	Actions
Rewis Inc
Acme Corporation
Rohde Enterprises
Cheese Corp

<table class="slds-table slds-table_header-hidden slds-table_edit slds-tree slds-table_tree" role="treegrid" aria-label="Example headless border-less single select tree grid with selected row">
  <thead class="slds-assistive-text">
    <tr class="slds-line-height_reset">
      <th aria-label="Account Name" class="" scope="col">

Modifiers#

Interaction#

Item Disabled#

When a branch doesn't have children, apply slds-is-disabled to the corresponding slds-button_icon element.

Choose a row Select All	Sort by: Account Name	Sort by: Employees	Sort by: Phone Number	Sort by: Account Owner	Sort by: Billing City
Select item 136	Rewis Inc	3,100	837-555-1212	Jane Doe	Phoenix, AZ
Select item 137	Acme Corporation	10,000	837-555-1212	John Doe	San Francisco, CA
Select item 138	Rohde Enterprises	6,000	837-555-1212	John Doe	New York, NY
Select item 139	Cheese Corp	1,234	837-555-1212	Jane Doe	Paris, France

<table aria-multiselectable="true" class="slds-table slds-table_bordered slds-table_edit slds-table_fixed-layout slds-table_resizable-cols slds-tree slds-table_tree" role="treegrid" aria-label="Example tree grid with disabled item">
  <thead>
    <tr class="slds-line-height_reset">
      <th class="slds-text-align_right" scope="col" style="width:3.25rem">

Item Hovered#

When a tree item is hovered, apply slds-is-hovered to slds-tree__item element`.

Choose a row Select All	Sort by: Account Name	Sort by: Employees	Sort by: Phone Number	Sort by: Account Owner	Sort by: Billing City
Select item 148	Rewis Inc	3,100	837-555-1212	Jane Doe	Phoenix, AZ
Select item 149	Acme Corporation	10,000	837-555-1212	John Doe	San Francisco, CA
Select item 150	Rohde Enterprises	6,000	837-555-1212	John Doe	New York, NY

<table aria-multiselectable="true" class="slds-table slds-table_bordered slds-table_edit slds-table_fixed-layout slds-table_resizable-cols slds-tree slds-table_tree" role="treegrid" aria-label="Example tree grid with hovered item">
  <thead>
    <tr class="slds-line-height_reset">
      <th class="slds-text-align_right" scope="col" style="width:3.25rem">

Overview of CSS Classes#

Selector: The CSS class being referred to.
Summary: A description of what the class does.
Support: Whether the class name is dev-ready (meaning it's fully vetted and tested and safe to use) or prototype (which means it's not fully vetted yet).
Restrict: The selector that the class name is allowed to be used on.
Variant: The base level pattern for a component. A variant can be extended to create another variant of that component, for example, a stateful button is a derivative of the base button.
Modifier: A single class that can be added to an HTML element of a component to modify its output. Typically these will be colors, sizing and positioning.

Selector	`.slds-table_tree`
Summary
Support	dev-ready
Restrict	`table`
Variant	True

Selector	`.slds-tree__item`
Summary	Initializes a slds tree item
Restrict	`.slds-table_tree th`

Selector	`.slds-is-disabled`Deprecated
Summary	When a branch doesn't have children, apply slds-is-disabled to the button icon
Restrict	`.slds-tree__item button`
Modifier	True

Selector	`.slds-is-selected`Deprecated
Summary	Selected state for a tree item
Restrict	`.slds-tree__item`

Selector	`.slds-is-focused`Deprecated
Summary	Focus state for a tree item
Restrict	`.slds-tree__item`

Selector	`.slds-is-hovered`
Summary	Hover state for a tree item
Restrict	`.slds-tree__item`
Modifier	True

Selector	`.slds-tree__item-label`
Summary	The label text of a tree item or tree branch
Restrict	`.slds-tree__item span`

Selector	`.slds-tree__item-meta`
Summary	The meta text or secondary text of a tree item
Restrict	`.slds-tree__item span`

Tree Grid Release Notes

2.7.0

Added

Checkboxes in the left most column were added to multi select tree grids
Multi select tree grids now require aria-multiselectable="true" applied to the table element.
Multi select tree grids now require aria-selected to be set to false on every row that is not selected
Single select tree grids were added as examples
Headless tree grids were added
Borderless tree grids were added

Changed

Tree grid now aligns better with the lightning component, which is an extension of Advanced Data Table.

Sections