DataTable

Table plus behaviour: per-column sorting (sortable, with optional sortValue), row selection with checkboxes (selectable + onSelectionChange), and client-side pagination (pageSize).


Ada Lovelace	Engineering	36
Alan Turing	Research	41
Grace Hopper	Engineering	45


import { DataTable } from '@gg-software/ui';
 
<DataTable
    data={people}
    rowKey={(row) => row.id}
    selectable
    onSelectionChange={(keys, rows) => setSelected(rows)}
    pageSize={20}
    striped
    columns={[
        { key: 'name', header: 'Name', sortable: true },
        { key: 'role', header: 'Role', sortable: true },
        { key: 'age', header: 'Age', align: 'right', sortable: true, sortValue: (row) => row.age },
    ]}
    onRowClick={(row) => openDetail(row)}
/>;

Props

Prop	Type	Default
`columns`*	`DataTableColumn<T>[]`	—
`data`*	`T[]`	—
`rowKey`*	`(row: T, index: number) => string \| number`	—
`selectable`	`boolean`	`false`
`onSelectionChange`	`((keys: (string \| number)[], rows: T[]) => void)`	—
`pageSize`	`number`	—
`size`	`"small" \| "middle"`	`middle`
`bordered`	`boolean`	`false`
`striped`	`boolean`	`false`
`hoverable`	`boolean`	`true`
`empty`	`ReactNode`	`No data`
`onRowClick`	`((row: T, index: number) => void)`	—
`className`	`string`	—

* required · generated from packages/ui/src/data/DataTable/DataTable.tsx

Types


type DataTableColumn<T> = {
    key: string;
    header: ReactNode;
    render?: (row: T, index: number) => ReactNode;
    align?: 'left' | 'center' | 'right';
    width?: number | string;
    sortable?: boolean;
    /** value used for sorting (defaults to row[key]) */
    sortValue?: (row: T) => string | number;
};