来自动态数据的 Antd 表分组数据 [英] Antd table grouping data from dynamic data

问题描述

我正在尝试构建一个 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屋！