Table

GitHub

zeroheight

Storybook

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, any>[] | readonly GroupedColumn<string, any, any>[]		Yes
data	readonly Row<C>[]		Yes
groupBy	string		No
noResultsTitle	string		No
noResultsDescription	string		No
noResultsFeedbackSize	"medium" | "large"	large	No
initialSorting	SortingRule<C>[]		No
stickyHeaders	boolean		No
stickyFooters	boolean		No
height	{ custom: string | number; }		No
onRowPress	(row: Row<Row<C>>) => void		No
virtualizeRows	boolean | { estimateRowHeight: (index: number) => number; }		No
columnDividers	boolean		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