Skip to main content

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

NameTypeDefault ValueRequiredDescription
columnsreadonly Column<string, {}, any>[]Yes
datareadonly Row<C>[]Yes
groupBystringNo
noResultsTitlestringNo
noResultsDescriptionstringNo
noResultsFeedbackSize"large" | "medium"largeNo
initialSortingSortingRule<C>[]No
stickyHeadersbooleanNo
height{ custom: string | number; }No
onRowPress(row: Row<Row<C>>) => voidNo
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>[]) => voidNo

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