开发指南
Table 负责将数据呈现为高度可定制和具备可访问性的 HTML 表格,其核心功能为将结构化的数据使用表格的方式展现,然后可以使用各种参数来向表格中加入一些特性,比如排序,过滤,滚动,锁列等。
基本使用
基本的 Table 包含行和列,使用 Table.Column 来定义列的信息,使用传入的 dataSource 属性数据来创建行。
下面的代码将会创建一行两列的数据表:
import { Table } from '@txdfe/at';
const dataSource = [{ id: 1, time: '2016' }];
ReactDOM.render(
<Table dataSource={dataSource}>
<Table.Column title="Id" dataIndex="id" />
<Table.Column title="Time" dataIndex="time" />
</Table>,
mountNode,
);
常见问题
Q: 通过
rowSelection
开启了选择模式,为什么选择任意一个都是全选?
A: 给定的数据源中的属性需要有一个唯一标示该条数据的主键,默认值为 id,可通过primaryKey
更改 e.g.<Table primaryKey='myId'></Table>
Q: 还是
rowSelection
选择模式,如何设置默认选中/禁用呢?
A: 通过受控模式,设置rowSelection.selectedRowKeys
可以默认选中选中;通过rowSelection.getProps
可以自定义每一行 checkbox 的 props,具体可搜索 demo选择可控
Q: 又是
rowSelection
选择模式,如何屏蔽全选按钮/自定义全选按钮呢
A: 通过rowSelection.titleProps
可以自定义选择列的表头的 props,可通过style: {display: 'none'}
屏蔽全选按钮;此外还有rowSelection.titleAddons
rowSelection.columnProps
等属性,具体用法可搜索 demo可选择
Q: 能用什么样的方式支持行的双击事件/设置每一行的样式?处理整行点击呢?
A: 通过rowProps
属性,重写行支持的原生属性,比如className style onDoubleClick
等;通过onRowClick
处理整行点击
列配置
Table.Column 提供了非常多的配置属性用于自定义列,最常见的就是使用cell
自定义单元格的渲染逻辑. 其他的配置选项可以参考下面的 Table.Column 的 API。
下面的代码会让cell
根据值渲染不同的视图:
import { Table } from '@txdfe/at';
const dataSource = [{ id: 1, time: '2016' }];
const renderTime = value => {
if (value === '2016') {
return '今年';
}
return value;
};
ReactDOM.render(
<Table dataSource={dataSource}>
<Table.Column title="Id" dataIndex="id" />
<Table.Column title="Time" dataIndex="time" cell={renderTime} />
</Table>,
mountNode,
);
多表头
使用 Table.ColumnGroup 包裹 Table.Column 来创建有多个表头的表格。
import { Table } from '@txdfe/at';
const dataSource = [{ id: 1, time: '2016' }];
ReactDOM.render(
<Table dataSource={dataSource}>
<Table.ColumnGroup>
<Table.Column title="Id" dataIndex="id" />
<Table.Column title="Time" dataIndex="time" />
</Table.ColumnGroup>
<Table.ColumnGroup>
<Table.Column title="Id" dataIndex="id" />
</Table.ColumnGroup>
</Table>,
mountNode,
);