Reactjs Antd表从动态数据分组数据

我正在尝试构建一个Antd表，其中有两个主列

District，test Details

。在

考试详情
列中我想有三列


性别细节
候选人总数
通过考试的候选人总数

如下图所示


我尝试了以下代码：
我已将列更改为有子列。这非常接近你想要达到的目标

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，因此它将被隐藏

逻辑

使用动态的性别行数
如果我稍微调整一下数据数组，可以吗？尝试一个解决方案，如果有一个解决方案，那就太好了。现在调整数组以获得输出还可以。你的问题是什么？但有一个疑问，如果我删除任何州的女孩、男孩或变性人数据，它将以错误的顺序显示。因为我们正在硬编码逻辑，所以有三组性别是很重要的。但我们也可以尝试使其动态化。这是我想要的，因为一些州不会有三种性别，正如你在屏幕截图中看到的那样，安得拉邦有一种性别，果阿有两种性别。我认为我们需要对物品进行计数，并使用计数let count=data.filter（d=>d.state_name==value）；不是吗？是的，我想是的。
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;
      }
    },