Table

Display tabular data in format.

General

Display formatted data in rows and columns.

Preview

See code

property	description	type	default
type	Content type	secondary \| warning	-
Component	DOM element to use	string	-
bold	Bold style	boolean	true

compose

Show other components in the table.

Preview

See code

property	description	type	default
type	Content type	secondary \| warning	-
Component	DOM element to use	`string`	-
bold	Bold style	`boolean`	`true`

width

Specifies the width of all or part of the columns.

Preview

See code

property	description	type	default
type	Content type	secondary \| warning	-
Component	DOM element to use	`string`	-
bold	Bold style	`boolean`	`true`

actions

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

Preview

See code

property	description	operation
type	Content type
Component	DOM element to use
bold	Bold style

update row

You can use custom elements to update a specific row.

Preview

See code

property	description	operation
type	Content type
Component	DOM element to use
bold	Bold style

custom head

Preview

See code

property	description	`type`	default
type	Content type	secondary \| warning	-
Component	DOM element to use	`string`	-
bold	Bold style	`boolean`	`true`

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