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	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`	-	-
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,
  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

Spinner

Tabs

MADE & DESIGNED WITHBY BRUNO ANDRADE