A set of composable components to represent tabular data.
The Table component is made up of the parts described below. View source
Groups Content, Detail, and Footer parts, and provides a background panel. This component is based on the div element and supports common margin props m, mx, my, ml, mr, mt, mb.
Groups Header and Body parts. Controls row selection if you pass value or defaultValue.
This component is based on the table element and supports common margin props m, mx, my, ml, mr, mt, mb.
Displays a row of table cells.
May be selected if you pass value. This component is based on the tr element.
Displays a basic table cell.
This component is based on the td element, but uses justify instead of align to control how horizontal space is distributed within the table cell.
Displays the header of a table column. This component is based on the th element and uses the same props as the Table Cell part.
Displays the header of a table row. This component is based on the th element and uses the same props as the Table Cell part.
When included, this part enables users to click on the row and navigate to the link provided as its child. Does not display the actual link visually, but adds hover and pressed styles to the entire row.
This component is based on the td element and uses the same props as the Table Cell part.
Displays a table cell with an interactive element that is triggered when the whole row is clicked. Excludes the interactive element from the tab index since Row Action makes the whole row clickable.
This component is based on the td element and uses the same props as the Table Cell part.
Displays an area for the information related to the selected table row. This component is based on the div element.
Displays an area for additional controls and secondary information related to the table. This component is based on the div element.
This part is not related to the standard tfoot element.
Use the Row Link part when you need to enable navigation on row click. Row Link works with router links and takes care of interactions like middle click, Control/Command-click, and keyboard navigation with roving focus.
Under the hood, Row Link renders an arrow icon and hides the child link. Screen readers are able to access the text contents of this cell, so don’t forget to label your links. Also, you will need to add a corresponding column header with an aria-label in the Table Header row.
You may nest interactive elements within interactive rows. Clicking a nested interactive element won’t click the row itself.
Interactive table rows with nested interactive elements maintain roving focus. Users can tab only into the contents of the currently focused row, which enables them to skip to the rest of the document without traversing all interactive elements of the table.
Use the Row Action part when you need to activate another interactive element on row click.
Use the value and onValueChange props to create a controlled table with selectable rows. You can use the Detail part to display the data related to the currently selected row.
Add the Footer part to display a toolbar with secondary information and controls related to the table, like pagination.
Fill the table with empty rows when you need a consistent height on the table regardless of how much data it currently has. The empty rows are automatically excluded from the accessibility tree.