[英]React ant design table cell collapse issue
Im using my react type script project for ant design table i want to know how to do that following image like as table, im search any tutorial but not seen anything, any one know how to do that correctly.我将我的反应类型脚本项目用于ant 设计表我想知道如何像表格一样执行下图,我搜索任何教程但没有看到任何内容,任何人都知道如何正确地做到这一点。
Thanks谢谢
image here图片在这里
code here代码在这里
class App extends React.Component {
columns: any = [
{
title: "Name",
dataIndex: "name",
key: "name"
},
{
title: "Age",
dataIndex: "age",
key: "age"
},
{
title: "Address",
dataIndex: "address",
key: "address"
},
{
title: "Tags",
key: "tags",
dataIndex: "tags"
},
{
title: "Action",
key: "action"
}
];
data: any = [
{
key: "1",
name: "John Brown",
age: 32,
address: "New York No. 1 Lake Park",
tags: ["nice", "developer"]
},
{
key: "2",
name: "Jim Green",
age: 42,
address: "London No. 1 Lake Park",
tags: ["loser"]
},
{
key: "3",
name: "Joe Black",
age: 32,
address: "Sidney No. 1 Lake Park",
tags: ["cool", "teacher"]
}
];
render() {
return <Table columns={this.columns} dataSource={this.data} />;
}
}
You want to create 2 sub rows in each row, but only for some columns.您想在每行中创建 2 个子行,但仅针对某些列。 you can use
rowspan
for this.您可以为此使用
rowspan
。
you can duplicate your rows ( row1-row1-row2-row2-row3-row3-...
), and put the subrow values in them ( row1_subrow1-row1_subrow2-row2_subrow1-row2_subrow2-...
), then use rowspan
for the columns you want to expand (like Section and Name in your image), and expand the odd rows and collapse the even rows for this columns.您可以复制行(
row1-row1-row2-row2-row3-row3-...
),并将子行值放入其中( row1_subrow1-row1_subrow2-row2_subrow1-row2_subrow2-...
),然后对列使用rowspan
您想要展开(如图像中的部分和名称),展开奇数行并折叠此列的偶数行。
the full code: ( Codesandbox Demo )完整代码:( Codesandbox Demo )
import React from "react";
import ReactDOM from "react-dom";
import "antd/dist/antd.css";
import "./index.css";
import { Table } from "antd";
let multiRowRender = (value, row, index) => {
const obj = {
children: value,
props: {}
};
if (index % 2 === 0) {
obj.props.rowSpan = 2;
}
if (index % 2 === 1) {
obj.props.rowSpan = 0;
}
return obj;
};
const columns = [
{
title: "Number",
dataIndex: "number"
},
{
title: "Issue",
dataIndex: "issue"
},
{
title: "Name",
dataIndex: "name",
render: multiRowRender
},
{
title: "Section",
dataIndex: "section",
render: multiRowRender
}
];
let data = [
{
key: "1",
name: "John Brown",
issues: [32, 100],
numbers: [18889898989, 545054],
section: "sec 1"
},
{
key: "2",
name: "Jim Green",
issues: [42, 50],
numbers: [18889898888, 1420054],
section: "sec 2"
}
];
let data2 = [];
data.forEach(d => {
data2.push({ ...d, issue: d.issues[0], number: d.numbers[0] });
data2.push({
...d,
issue: d.issues[1],
number: d.numbers[1],
key: d.key + "-row2"
});
});
data = data2;
ReactDOM.render(
<Table columns={columns} dataSource={data} bordered />,
document.getElementById("container")
);
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.