以下是一个使用Antd组件库的树形表的示例代码,其中按列值分组:
import React from "react";
import { Table } from "antd";
const data = [
{
key: "1",
name: "John Brown",
age: 32,
address: "New York No. 1 Lake Park",
group: "Group A"
},
{
key: "2",
name: "Jim Green",
age: 42,
address: "London No. 1 Lake Park",
group: "Group B"
},
{
key: "3",
name: "Joe Black",
age: 32,
address: "Sidney No. 1 Lake Park",
group: "Group A"
},
{
key: "4",
name: "Jim Red",
age: 32,
address: "London No. 2 Lake Park",
group: "Group B"
},
{
key: "5",
name: "Mike Green",
age: 32,
address: "London No. 3 Lake Park",
group: "Group A"
}
];
const columns = [
{
title: "Name",
dataIndex: "name",
key: "name"
},
{
title: "Age",
dataIndex: "age",
key: "age"
},
{
title: "Address",
dataIndex: "address",
key: "address"
}
];
const expandedRowRender = record => {
const nestedColumns = [
{
title: "Name",
dataIndex: "name",
key: "name"
},
{
title: "Age",
dataIndex: "age",
key: "age"
},
{
title: "Address",
dataIndex: "address",
key: "address"
}
];
const nestedData = data.filter(item => item.group === record.group);
return (
);
};
const GroupedTreeTable = () => {
return (
);
};
export default GroupedTreeTable;
这个示例中,data
是表格的数据源,columns
是表格的列配置。expandedRowRender
是一个回调函数,根据record
参数来返回嵌套的表格内容。在这个示例中,我们根据group
字段的值来分组展示嵌套的表格。
最后,将GroupedTreeTable
组件导出并在需要使用的地方进行引用即可。
下一篇:按列值分组绘制多线的图表