Geist UI

Table

Display tabular data in format.

General

Display formatted data in rows and columns.

compose

Show other components in the table.

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.

custom head

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>
)

APIs

`Table.Props`

Attribute	Description	Type	Accepted values	Default
data	data source	`Array<T>`	-	-
initialData	initial data	`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`	-	-
rowClassName	set className to each row	TableRowClassNameHandler	-	-
...	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`	-	-
render	render returns elements in all columns	TableColumnRender	-	-

`TableOnRowClick`

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

`TableOnCellClick`

type TableOnCellClick<T> = (
  value: T[keyof T],
  rowIndex: number,
  columnIndex: 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

Contributors