[英]Make a separate single column row in a multi column table in antd
So I have a regular table in antd
including 3 columns as such 所以我在
antd
有一个常规表,包括3列
<Table dataSource={data}>
<Column title="Age" dataIndex="age" key="age" />
<Column title="Address" dataIndex="address" key="address" />
<Column title="Tags" dataIndex="tags" key="tags" />
</Table>
but I would like to have an advert after every 20 entry as a single row inside the table. 但我想在每20个条目之后在表中的一行中做一个广告。 Is there a way to achieve this with
antd
tables or should I revert back to data.map
? 有没有一种方法可以使用
antd
表来实现这一点,还是应该恢复为data.map
?
You need to use colSpan
property of Column
. 您需要使用
Column
colSpan
属性 。
On the desired index (in the example it's 3
), set all columns span to 0
and the specific entry to the table length 5
在所需的索引上(在示例中为
3
),将所有列的span设置为0
,并将特定条目设置为表长度5
obj.props.colSpan = 0;
props: { colSpan: 5 }
I just adjusted the official example . 我只是调整了官方的例子 。
const renderContent = (value, row, index) => {
const obj = {
children: value,
props: {}
};
if (index === 3) {
// On target every other column is not showing
obj.props.colSpan = 0;
}
return obj;
};
const columns = [
{
title: 'Name',
dataIndex: 'name',
render: (text, row, index) => {
if (index !== 3) {
return <a href="javascript:;">{text}</a>;
}
return {
children: <a href="javascript:;">{text}</a>,
// The target takes all column span
props: {
colSpan: 5
}
};
}
},
{
title: 'Age',
dataIndex: 'age',
render: renderContent
},
...
];
const data = [..]
<Table columns={columns} dataSource={data} bordered />
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.