问题描述
限时送ChatGPT账号..我正在尝试构建一个 Antd 表,其中有两个主要列 District, Exam Details
.在 Exam Details
列中我想要三列
I am trying to build an Antd table, where I have two main columns District, Exam Details
. Inside Exam Details
column I want to have three columns
如下图
我试过这个代码:codesandbox
推荐答案
我已将列更改为有子项.它非常接近您想要实现的目标.
I have changed the columns to have children. It's pretty close to what you like to achieve.
const columns = [
{
title: "District",
dataIndex: "state_name",
key: "state_name",
render: (value, row, index) => {
const obj = {
children: value,
props: {}
};
console.log(obj.children, index);
if (index % 3 === 0) {
obj.props.rowSpan = 3;
}
// These two are merged into above cell
if (index % 3 === 1) {
obj.props.rowSpan = 0;
}
if (index % 3 === 2) {
obj.props.rowSpan = 0;
}
return obj;
}
},
{
title: "Exam Details",
children: [
{
title: "Gender Details",
dataIndex: "gender",
key: 1
},
{
title: "Total number of candidates",
dataIndex: "total",
key: 2
},
{
title: "Total Number of candidates passed",
dataIndex: "passed_total",
key: 3
}
]
}
];
const data = [
{
state_name: "Karnataka",
gender: "Boys",
total: Math.floor(Math.random() * 90 + 10),
passed_total: Math.floor(Math.random() * 90 + 10)
},
{
state_name: "Karnataka",
gender: "Girls",
total: Math.floor(Math.random() * 90 + 10),
passed_total: Math.floor(Math.random() * 90 + 10)
},
{
state_name: "Karnataka",
gender: "Transgender",
total: Math.floor(Math.random() * 90 + 10),
passed_total: Math.floor(Math.random() * 90 + 10)
},
{
state_name: "Kerala",
gender: "Boys",
total: Math.floor(Math.random() * 90 + 10),
passed_total: Math.floor(Math.random() * 90 + 10)
},
{
state_name: "Kerala",
gender: "Girls",
total: Math.floor(Math.random() * 90 + 10),
passed_total: Math.floor(Math.random() * 90 + 10)
},
{
state_name: "Kerala",
gender: "Transgender",
total: Math.floor(Math.random() * 90 + 10),
passed_total: Math.floor(Math.random() * 90 + 10)
},
{
state_name: "Tamilnadu",
gender: "Boys",
total: Math.floor(Math.random() * 90 + 10),
passed_total: Math.floor(Math.random() * 90 + 10)
},
{
state_name: "Tamilnadu",
gender: "Girls",
total: Math.floor(Math.random() * 90 + 10),
passed_total: Math.floor(Math.random() * 90 + 10)
},
{
state_name: "Tamilnadu",
gender: "Transgender",
total: Math.floor(Math.random() * 90 + 10),
passed_total: Math.floor(Math.random() * 90 + 10)
},
{
state_name: "Goa",
gender: "Boys",
total: Math.floor(Math.random() * 90 + 10),
passed_total: Math.floor(Math.random() * 90 + 10)
},
{
state_name: "Goa",
gender: "Girls",
total: Math.floor(Math.random() * 90 + 10),
passed_total: Math.floor(Math.random() * 90 + 10)
},
{
state_name: "Goa",
gender: "Transgender",
total: Math.floor(Math.random() * 90 + 10),
passed_total: Math.floor(Math.random() * 90 + 10)
},
{
state_name: "Andhra Pradesh",
gender: "Boys",
total: Math.floor(Math.random() * 90 + 10),
passed_total: Math.floor(Math.random() * 90 + 10)
},
{
state_name: "Andhra Pradesh",
gender: "Girls",
total: Math.floor(Math.random() * 90 + 10),
passed_total: Math.floor(Math.random() * 90 + 10)
},
{
state_name: "Andhra Pradesh",
gender: "Transgender",
total: Math.floor(Math.random() * 90 + 10),
passed_total: Math.floor(Math.random() * 90 + 10)
}
];
沙盒网址
@更新
找出问题,基本上在外面有一个变量,当 sameKey 重复时不设置计数,使 rowSpan 为 0,因此它将被隐藏.
Figured out the issue, basically having a variable outside, when the sameKey repeats not setting the count making rowSpan as 0 so it will be hidden.
逻辑
let sameKey;
const columns = [
{
title: "District",
dataIndex: "state_name",
key: "state_name",
render: (value, row, index) => {
const obj = {
children: value,
props: {}
};
if (!(sameKey !== value)) {
obj.props.rowSpan = 0;
return obj;
}
const count = data.filter(item => item.state_name === value).length;
sameKey = value;
obj.props.rowSpan = count;
return obj;
}
},
使用动态数量的性别行来codesandbox工作
Working codesandbox with dyanmic number of gender rows
这篇关于来自动态数据的 Antd 表分组数据的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!
更多推荐
[db:关键词]
发布评论