A table is a component that organizes and displays large sets of structured data in a grid of rows and columns. It's designed to make complex information easy to scan, compare, sort, and analyze.
When to use
When to avoid
Specifications
Table properties
Header
The header contains the table title, a search bar, and primary action buttons, all of which are optional.
Pagination
Use for navigating large data sets or to minimize a long scrolling data set. Pagination is optional.
Border
The border around the table is also optional. For UIs that utilize borders to separate sections or layers on a page.
Column header properties
Sort
Controls the sorting state and corresponding icon for a column (Not sortable, Is sortable, Ascending, Descending).
Alignment
Sets the horizontal alignment of the header text (Left, Center, Right).
Cell properties
Row properties
Zebra stripe
Applies alternating background colors to rows to improve readability.
Default, hover, selected, focus
Anatomy
1
Table header (Optional)
The top-level section above the table, containing the title, a search field, and primary action buttons.
2
Column headers
The row at the top of the table that labels each data column and often includes sorting controls.
3
Cell
The individual container for a piece of data at the intersection of a row and column.
4
Pagination (Optional)
The section at the bottom of the table that allows users to navigate through pages of data.
5
Border (Optional)
The outer border that frames the entire table. Fo UIs that utilize borders for sections or layers on pages.
6
Caption (Optional)
A brief title or description of the table's content, positioned below the table.