Compare lightning-datatable
and lightning-tree-grid
for Data Display
These components are similar, but lightning-tree-grid
has a chevron button that expands and collapses rows that have child records.
lightning-datatable
uses the Data Tables blueprint from Salesforce Lightning Design System (SLDS) and provides an easy way to display your record data on desktop.
lightning-tree-grid
uses the Tree Grid blueprint from SLDS and enables you to display hierarchical data, grouping records into parent-child relationships.
The Lightning Design System docs have examples of each component in different states.
Here’s a list of features supported by lightning-datatable
and lightning-tree-grid
.
Feature | lightning-datatable | lightning-tree-grid |
---|---|---|
Format columns by data type | ![]() | ![]() |
Header Actions | ![]() | ![]() |
Row Actions | ![]() | ![]() |
Resize Columns | ![]() | ![]() |
Select Rows | ![]() | ![]() |
Wrap or Clip Column Content | ![]() | ![]() |
Row Numbers | ![]() | ![]() |
Column Sorting | ![]() | - |
Inline Editing | ![]() | - |
Infinite Scrolling | ![]() | - |
Expandable Rows | - | ![]() |
lightning-datatable
and lightning-tree-grid
aren’t supported on mobile devices.
See Also
- Salesforce Lightning Design System: Displaying Data
- Component Reference:
lightning-datatable
- Component Reference:
lightning-tree-grid