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