opinion
DataGrid
Sortable, selectable, editable rows.
Project gridSort, select, tabular numbers
Projects
| Status | |||||
|---|---|---|---|---|---|
| Harbour rebrand | Maya Chen | On track | 84% | £48,200 | |
| Tideline mobile | Jonas Weber | Review | 61% | £72,900 | |
| Crew interviews | Priya Nair | Late | 33% | £9,400 | |
| Rota export | Leo Santos | Done | 100% | £6,150 | |
| Depot signage | Maya Chen | Review | 48% | £21,800 |
| Budget |
|---|
Nothing matches “Quay”. Clear the filter to see all 5.Couldn’t load
Projects are unavailable.
In context
Projects pageFilter, columns, add; selection and pages
Projects
5| Status | |||||
|---|---|---|---|---|---|
| Harbour rebrand | Maya Chen | On track | 84% | £48,200 | |
| Tideline mobile | Jonas Weber | Review | 61% | £72,900 | |
| Crew interviews | Priya Nair | Late | 33% | £9,400 | |
| Rota export | Leo Santos | Done | 100% | £6,150 |
Props
| Prop | Type | Required | Default |
|---|---|---|---|
editable | boolean | undefined | No | false |
onCellChange | ((rowKey: string | number, columnKey: string, newValue: string) => void) | undefined | No | — |
groupBy | string | undefined | No | — |
columns | TableColumn<T>[] | Yes | — |
data | T[] | Yes | — |
rowKey | string | ((row: T) => string) | Yes | — |
sort | TableSort | null | undefined | No | — |
onSortChange | ((sort: TableSort | null) => void) | undefined | No | — |
selectedRowKeys | string[] | undefined | No | — |
onSelectedRowKeysChange | ((keys: string[]) => void) | undefined | No | — |
pageSize | number | undefined | No | — |
page | number | undefined | No | — |
onPageChange | ((page: number) => void) | undefined | No | — |
loading | boolean | undefined | No | false |
loadingDelayMs | number | undefined | No | — |
loadingMinDurationMs | number | undefined | No | — |
emptyMessage | ReactNode | No | — |
maxHeight | number | undefined | No | — |
caption | ReactNode | No | — |
aria-label | string | undefined | No | — |
className | string | undefined | No | — |
bionic | boolean | undefined | No | — |
bionicOptions | BionicOptions | undefined | No | — |
Accessibility
A real <table> with a visible caption, <th> headers and sort buttons that announce their direction; selection is a column of real checkboxes with a header checkbox (indeterminate when only some rows are selected). Editable cells are Editable buttons: Enter to edit, Enter or blur to commit, Escape to cancel.
data-rebar-* attributes
data-rebar-component="data-grid" on the root; every Table, Editable and Accordion attribute underneath is the real thing, not duplicated.
Migrating to Ant Design
AntD's Table supports inline editing via a custom render per column and row grouping via a nested dataSource; a migration folds editable and groupBy into that pattern rather than a 1:1 prop mapping.