opinion
Table
Plain rows with a total.
InvoicesStatic rows, header, total
October invoices
| Invoice | Supplier | Date | Status | Amount |
|---|---|---|---|---|
| INV-1041 | Quay Marine Supplies | 22 Oct | Paid | £1,240.00 |
| INV-1042 | Northern Print Co. | 23 Oct | Due | £3,860.50 |
| INV-1043 | Brightwater Studio | 24 Oct | Overdue | £980.00 |
| INV-1044 | Harbour Cafe Catering | 24 Oct | Draft | £415.25 |
Total
£6,495.75
| Invoice | |
|---|---|
| INV-1041 | |
| INV-1042 |
| Invoice | Amount |
|---|---|
| Invoice | Status |
|---|
No invoices this month| Supplier |
|---|
| Northern Depot Quay 3 resurfacing, signage and lighting works, phase two |
In context
InvoicesDesktop and phone
October invoices
| Invoice | Supplier | Date | Status | Amount |
|---|---|---|---|---|
| INV-1041 | Quay Marine Supplies | 22 Oct | Paid | £1,240.00 |
| INV-1042 | Northern Print Co. | 23 Oct | Due | £3,860.50 |
| INV-1043 | Brightwater Studio | 24 Oct | Overdue | £980.00 |
Total
£6,495.75
Invoices
INV-1041Quay Marine Supplies · 22 Oct
Paid£1,240.00
INV-1042Northern Print Co. · 23 Oct
Due£3,860.50
INV-1043Brightwater Studio · 24 Oct
Overdue£980.00
Props
| Prop | Type | Required | Default |
|---|---|---|---|
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 | No data. |
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, for sortable columns, buttons that announce their direction. Row selection is a column of real checkboxes with a header checkbox; loading rows are Skeletons marked aria-hidden, and the empty state is a real Empty.
data-rebar-* attributes
data-rebar-component="table" on the wrapper; data-rebar-part="caption" | "scroll", and each row carries aria-selected when selection is on.
Migrating to Ant Design
@rebar-ui/migrate-antd maps columns to AntD's columns (header to title, key to dataIndex, render kept) and data/rowKey to dataSource/rowKey. Selection becomes rowSelection, pagination pagination={{ pageSize }}.