可以在列定义中(ColumnDef)中自定义单元格的显示格式. 如:
const columns: ColumnDef<Person>[] = [
// ...others column def
{
// ...others def
header: (cx) => <span className="text-secondary">整数</span>,
cell: (cx) => formatNumber(cx.getValue(), "integer"),
footer: (cx) => <span className="text-secondary">整数</span>,
},
];
注意: 一旦自定义了单元格组件, 列定义中的
meta.align将不再起作用. 你需要在你的单元格组件中自己设置对齐方式.
下面的例子中, 年龄大于30岁的显示红色; 存款列自定义表头样式, 数据单元格采用千分位格式, 同时在表脚显示汇总统计.
个人信息 | ||||
|---|---|---|---|---|
ID | 姓名 | 性别 | 年龄 | 存款 |
| 无数据 | ||||
总人数:0 | 男女比例:NaN | 平均年龄: NaN | 总计:0.00 | |