Table
Display tabular data in row format, built with React Table. Some examples use the following variables for brevity:
1const columns = [2 {3 Header: 'First Name',4 accessor: 'first'5 },6 {7 Header: 'Last Name',8 accessor: 'last'9 },10 {11 Header: 'Email',12 accessor: 'email'13 }14]15
16const data = [17 {18 first: 'John',19 last: 'Doe',20 email: 'john@doe.com'21 },22 {23 first: 'Dorothy',24 last: 'Boe',25 email: 'dorothy@boe.com'26 },27 {28 first: 'Baby',29 last: 'Moe',30 email: 'baby@moe.com'31 }32]
Always provide a caption. Columns and data must be memoized.
Use the same number of placeholder rows used while loading to avoid layout shift.
Set the align property to change text alignment. Left by default.
Pass a number to change the minimum width of the table. Disable with a falsy value.
Passing columnClassName applies the class to all headers and cells of the column.
Ensures column widths are stable, regardless of cell contents.
Manually set a column width.
Long cell values will wrap within the cell.
Columns are still required, fixed widths are respected.
Enabled per column, long cell values are automatically truncated. Requires fixed layout.
Specify a number to change the offset from 0.
Hold shift to sort by multiple columns. Columns can disable sorting.
Sort function must be memoized. Sorts alphanumerically by default.
Hold shift to toggle many rows.
Disable items in rowActions for disabled rows as needed.
Filter rows that already displayed. This is not used for server-side search. Common filter function like useTextFilter are provided.
Only specify the first property to render full width content.
Filters should be memoized, and are applied sequentially.