Tables
Data tables display information in a way that's easy to scan.
Structure
A data table contains a header row at the top that lists column names, followed by rows for data.
Checkboxes should accompany each row if the user needs to select or manipulate data.
For accessibility, the first column is set to be a <th> element, with a scope of "row." This enables screen readers to identify a cell's value by its row and column name.
Simple Table
Dense Table
Reduce padding and increase density by applying size="small".
Borderless Table
Further condense tables by setting borders={false} in addition to size="small". Note that this should only be used for tables fewer than 5 non-header rows.
This prop is applied per <TableCell> so as to be selective, such as if you wish to retain a border on cells within <TableHead>.