Table

Display tabular data in format.

General

Display formatted data in rows and columns.

width

Specifies the width of all or part of the columns.

actions

Custom elements can be displayed in the table, and any changes will be immediately rendered.

update row

You can use custom elements to update a specific row.

Set pagination with a pageSize and the table slices data and shows a Pagination below it. The footer only appears when there is more than one page. onRow and onCell receive the index inside the current page.

server pagination

With total, data is already the current page: the table only shows the Pagination. Control page and load the rows in onPageChange.

TypeScript Example

Get a better experience in TS by specifying a generic type.

type User = {
  name: string
  role: string
  records: Array<{ date: string }>
}
const renderHandler: TableColumnRender<User> = (value, rowData, index) => {
  return <div>{rowData.date}</div>
}
const data: Array<User> = [
  { name: 'witt', role: 'admin', records: [{ date: '2021-05-01' }] }
]

const MyComponent = () => (
  <Table<User> data={data}>
    <Table.Column<User> prop="name" label="username" />
    <Table.Column<User> prop="role" label="role" />
    <Table.Column<User> prop="records" label="records" render={renderHandler} />
  </Table>
)

orders

Use render to show a value as a status with a Dot, so the state reads before the word.

sorting

Add sortable to a column and its header becomes a button. A click sorts ascending, the next descending, and the third goes back to the order of the data. Numbers are compared by value.

selection

selectable adds a checkbox to each row and one in the header for the rows in view. Give each row a stable rowKey, and control selectedKeys to clear the selection after an action.

data table

Sorting, selection and pagination together. The rows are sorted before they are split in pages, and the selection is kept when you change the page.

APIs

Table.Props

Attribute	Description	Type	Accepted values	Default
data	data source	`Array<T>`	-	-
initialData	inital datas	`Array<T>`	-	`[]`
emptyText	displayed text when table's content is empty	`string`	-	-
hover	table's hover effect	`boolean`	-	`true`
onRow	callback row's content by click	TableOnRowClick	-	-
onCell	callback cell's content by click	TableOnCellClick	-	-
onChange	data change event	`(data: T) => void`	-	-
pagination	split the rows in pages	TablePagination	-	-
rowClassName	set className to each row	TableRowClassNameHandler	-	-
sort	the column the rows are sorted by, to control it	TableSort / `null`	-	-
initialSort	sort on the first render	TableSort / `null`	-	`null`
onSortChange	called with the new sort, or `null` when it is cleared	`(sort: TableSort \| null) => void`	-	-
selectable	a checkbox on each row, and one in the header	`boolean`	-	`false`
rowKey	what identifies a row: a prop, or a function. The position in `data` when missing	`keyof T` / `(row: T) => string \| number`	-	-
selectedKeys	keys of the selected rows, to control them	`Array<string \| number>`	-	-
initialSelectedKeys	keys of the rows selected on the first render	`Array<string \| number>`	-	`[]`
onSelectionChange	called with the keys and the rows selected	`(keys, rows: T[]) => void`	-	-
selectRowLabel	name of the checkbox of a row, for screen readers	`string`	-	`Select row`
selectAllLabel	name of the checkbox in the header	`string`	-	`Select all rows`
...	native props	`TableHTMLAttributes`	`'id', 'name' ...`	-

Table.Column.Props

Attribute	Description	Type	Accepted values	Default
prop(required)	table-column's prop	`string`	-	-
label	table-column's label	`string`	-	-
width	width number (px)	`number`	-	-
className	set className to each column	`string`	-	-
sortable	the header becomes a button that sorts the rows	`boolean`	-	`false`
sorter	how two rows compare, when the default order does not fit	`(a: T, b: T) => number`	-	-
render	render returns elements in all columns	TableColumnRender	-	-

TableSort

type TableSort = { prop: string; direction: 'asc' | 'desc' }

Sorting and selection

• Order: numbers are compared by value, and any other value as text, where item 2 comes before item 10. Use sorter on a column for anything else. The header has aria-sort, and the sorted column shows an arrow.
• Server rows: with pagination.total, the rows are the ones of the server, so the table does not sort them. It only calls onSortChange, and you send the new order with the data.
• Selection keys: the selection is kept by key, so it survives a sort and a change of page. onSelectionChange receives the rows that are in data, which are only the current page when the rows are on the server.
• Select all: the checkbox in the header selects the rows in view, the current page. It is checked when all of them are selected, and in between when only some are.

TablePagination

Attribute	Description	Type	Accepted values	Default
pageSize	rows in each page	`number`	-	-
page	current page, to control it	`number`	-	`1`
onPageChange	called with the page the user picked	`(page: number) => void`	-	-
total	all the rows on the server, `data` is the page	`number`	-	-

TableOnRowClick

type TableOnRowClick<T> = (rowData: T, rowIndex: number) => void

TableOnCellClick

type TableOnCellClick<T> = (
  value: T[keyof T],
  rowIndex: number,
  colunmIndex: number
) => void

TableRowClassNameHandler

type TableRowClassNameHandler<T> = (rowData: T, rowIndex: number) => string

TableColumnRender

type TableColumnRender<T extends Record> = (
  value: T[keyof T],
  rowData: T,
  rowIndex: number
) => JSX.Element | void

Edit this page on GitHub