Table

Presentational table. Columns are typed against your row type; render customizes a cell (default is row[key]). For sorting, selection and pagination use DataTable.

Order	Customer	Total	Status
A-1001	Ada Lovelace	1290 Kč	paid
A-1002	Alan Turing	540 Kč	pending
A-1003	Grace Hopper	2380 Kč	paid


import { Table, Badge } from '@gg-software/ui';
 
type Order = { id: string; customer: string; total: number; status: 'paid' | 'pending' };
 
<Table<Order>
    data={orders}
    rowKey={(row) => row.id}
    bordered
    columns={[
        { key: 'id', header: 'Order' },
        { key: 'customer', header: 'Customer' },
        { key: 'total', header: 'Total', align: 'right', render: (row) => `${row.total} Kč` },
        {
            key: 'status',
            header: 'Status',
            render: (row) => (
                <Badge label={row.status} variant={row.status === 'paid' ? 'success' : 'warning'} />
            ),
        },
    ]}
/>;

Props

Prop	Type	Default
`columns`*	`TableColumn<T>[]`	—
`data`*	`T[]`	—
`rowKey`	`((row: T, index: number) => string \| 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/Table/Table.tsx

Types


type TableColumn<T> = {
    key: string;
    header: ReactNode;
    render?: (row: T, index: number) => ReactNode;
    align?: 'left' | 'center' | 'right';
    width?: number | string;
};