Table / 表格

以规则的表格显示数据集。

基础的

显示规则化的行和列。

组合

在表格中显示其他组件。

宽度

为任意列指定宽度，剩下列会自动适应。

操作

显示自定义的按钮并操作数据，任何更改会立刻呈现。

更新行

你可以更新指定的行数据。

定制头

TypeScript 示例

在 TS 中通过指定泛型获得更好的体验。

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="用户名" />
    <Table.Column<User> prop="role" label="角色" />
    <Table.Column<User> prop="records" label="记录" render={renderHandler} />
  </Table>
)

APIs / 接口文档

Table.Props

属性描述类型推荐值默认
data数据源Array<T>--
initialData初始数据Array<T>-[]
emptyText当数据为空时显示的文本string--
hover是否显示 hover 效果boolean-true
onRow行的点击事件TableOnRowClick--
onCell单元格的点击事件TableOnCellClick--
onChange数据变化的事件(data: T) => void--
rowClassName为每一行设置类名TableRowClassNameHandler--
...原生属性TableHTMLAttributes'id', 'name', ...-

Table.Column.Props

属性描述类型推荐值默认
prop(必须的)列对应的数据属性string--
label每一列的标签文本string--
width指定宽度number--
className指定当前列的类名string--
render为所有列渲染函数返回的数据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
Add