[英]Make a separate single column row in a multi column table in antd
所以我在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>
但我想在每20个条目之后在表中的一行中做一个广告。 有没有一种方法可以使用antd
表来实现这一点,还是应该恢复为data.map
?
您需要使用Column
colSpan
属性 。
在所需的索引上(在示例中为3
),将所有列的span设置为0
,并将特定条目设置为表长度5
obj.props.colSpan = 0;
props: { colSpan: 5 }
我只是调整了官方的例子 。
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.