tree-grid

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">
  <thead>
    <tr class="slds-line-height_reset">

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">
  <thead>
    <tr class="slds-line-height_reset">

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">
  <thead>
    <tr class="slds-line-height_reset">

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">
  <thead>
    <tr class="slds-line-height_reset">

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">
  <thead class="slds-assistive-text">
    <tr class="slds-line-height_reset">

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">
  <thead class="slds-assistive-text">
    <tr class="slds-line-height_reset">

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">
  <thead class="slds-assistive-text">
    <tr class="slds-line-height_reset">

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">
  <thead class="slds-assistive-text">
    <tr class="slds-line-height_reset">

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">
  <thead>
    <tr class="slds-line-height_reset">

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">
  <thead>
    <tr class="slds-line-height_reset">

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">
  <thead class="slds-assistive-text">
    <tr class="slds-line-height_reset">

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">
  <thead class="slds-assistive-text">
    <tr class="slds-line-height_reset">

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">
  <thead class="slds-assistive-text">
    <tr class="slds-line-height_reset">

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">
  <thead class="slds-assistive-text">
    <tr class="slds-line-height_reset">

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">
  <thead>
    <tr class="slds-line-height_reset">

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">
  <thead>
    <tr class="slds-line-height_reset">