In this case, Table is a pattern, not a component. Build a table by sorting the table component items into rows. Each row should have an alternating color.
Column 1
Column 2
Column 3
Cost
Data 1 has some data in it
Data
Other Data
$2.00
Row 2 short
Data
Other Data
$2.00
Row 2 long
Data
Other Data
$2.00
10
Data
Other Data
$2.00
2000
Data
Other Data
$2.00
Row 3 very long, lots of overflow here, wow is this still going? I hope it all fits!
Data
Other Data
$2.00
Row 3 long
Data
Other Data
$2.00
1
Data
Other Data
$2.00
2
Data
Other Data
$2.00
Usage Guidelines
Do
Display structured data in a scannable way.
Allow users to compare information in rows and columns.
Keep scannability in mind whenever designing new components for this pattern.
Don't
Don’t use this if there will never be enough data to populate more than two rows.
Display content that can’t be reasonably sorted and compared.
Accessibility
Use a label to announce the content of the table.
Don’t include the word 'table' in that label, as it’s redundant.
The tab key should place focus on interactive elements, including sortable headers.
Props
Name
Type
Required
Description
children
Required
Must be instances of TableHeader, TableRow, and/or TableFooter components.
columns
Required
The size of the table title.
Can be one of "sm", "md", "lg", or "xl".
alternateRowBackground
boolean
If true, alternate rows will have a light gray background. Defaults to true.
borderStyle
Specify a border width for Table: "sm" is 1px.
extraControls
ReactElement
Extra controls to render below the table next to pagination
maxHeight
DimensionValue
Use numbers for pixels:
more
boolean
If true, the table will render a next page button. Defaults to true.
page
number
Set the page outside of the Table
setPage
Set the page outside of the Table
sort
ColumnSortInterface
Control sort outside of the Table
stickyHeader
boolean
If true, the header will stick to the top of the table when scrolling. Defaults to true.
totalPages
number
Set the total number of pages of the Table
Status
Documentation:
Figma:
Web:
iOS:
Android:
Additional Documentation
NN/g article
Related
Table badge, Table boolean, Table date, Table icon button, Table number, Table text field
Examples
Standard
Column 1
Column 2
Column 3
Cost
Data 1 has some data in it
Data
Other Data
$2.00
Row 2 short
Data
Other Data
$2.00
Row 2 long
Data
Other Data
$2.00
10
Data
Other Data
$2.00
2000
Data
Other Data
$2.00
Row 3 very long, lots of overflow here, wow is this still going? I hope it all fits!
Data
Other Data
$2.00
Row 3 long
Data
Other Data
$2.00
1
Data
Other Data
$2.00
2
Data
Other Data
$2.00
SortableExpandable
Column 1
Column 2
Column 3
Cost
Badge
Boolean
Data 1 has some data in it
Data 2 has some longer data in it
5
$1000.40
Some Status
Row 2 short
Row 2 long
10
$2000.00
Some Status
Row 3 very long, lots of overflow here, wow is this still going? I hope it all fits!