Table

A component that renders a Table, with sorting capabilities

Columns can be built using the tableColumn helper, which provides a type-safe API as well as default implementations for commonly used columns.

Also, when building the data to pass to the table, it's recommended to define columns as a const, as opposed to inline, in order to get better type inference, e.g.:

// Best
const columns = [tableColumn(...), tableColumn(...)] as const

<Table columns={columns} data={data} />

// Ok, but worse type inference
<Table columns={[tableColumn(...), tableColumn(...)]} data={data} />

Example

Props

Name	Type	Default Value	Required	Description
`columns`	`readonly Column<string, {}, any>[] \| readonly GroupedColumn<string, {}, any>[]`		Yes
`data`	`readonly Row<C>[]`		Yes
`groupBy`	`string`		No
`noResultsTitle`	`string`		No
`noResultsDescription`	`string`		No
`noResultsFeedbackSize`	`"large" \| "medium"`	`large`	No
`initialSorting`	`SortingRule<C>[]`		No
`stickyHeaders`	`boolean`		No
`height`	`{ custom: string \| number; }`		No
`onRowPress`	`(row: Row<Row<C>>) => void`		No
`customSorting`	`(rows: Row<Row<C>>[], sortFns: SortFn<C>[]) => Row<Row<C>>[]`		No	`customSorting` can be used to customize the sorting logic of the table. It supports cross-columns comparison. The sorting is still performed by the table, in an uncontrolled fashion. This function must be memoized to avoid infinite re-renderings
`onSort`	`(sortBy: SortingRule<C>[]) => void`		No	`onSort` can be used to implement sorting in a controlled fashion. It's typical use case is when sorting and/or filtering is performed externally, for example by a backend service. If `onSort` is provided the table won't perform any sorting on the rows given in input via the `data` property, as the caller is now in charge of performing the sorting. This function must be memoized to avoid infinite re-renderings

Example​

Props

Example