Antd树table按列值分组

Question

我需要在我的 React 应用程序中实现树 table。已按对象属性值分组。对象如下

{
  "SP": [
    {
      "DisplayName": "audi",
      "Name": "r8",
      "Type": "2012"
    },
    {
      "DisplayName": "audi",
      "Name": "rs5",
      "Type": "2013"
    }
  ],
  "Code": [
    {
      "DisplayName": "ford",
      "Name": "mustang",
      "Type": "2012"
    },
    {
      "DisplayName": "ford",
      "Name": "fusion",
      "Type": "2015"
    }
  ],
  "Message": [
    {
      "DisplayName": "kia",
      "Name": "optima",
      "Type": "2012"
    }
  ]
}

而我的table应该如下图

我在我的项目中使用了antd，我尝试用antd实现这个功能table但无法实现我想要的。我也需要过滤功能。

任何人都可以提出解决方案

Answer 1

您需要重组您的 dataSource children prop:

function NestedTables() {
  return (
    <Flexbox>
      <Table
        size="small"
        indentSize={0}
        columns={columns}
        dataSource={source}
      />
    </Flexbox>
  );
}

当您的 source 是：


const source = [
  {
    key: '1',
    Code: 'SP',
    children: [
      {
        key: '11',
        Code: '5001',
        DisplayName: 'audi',
        Name: 'r8',
        Type: '2012'
      },
      {
        key: '12',
        Code: '313',
        DisplayName: 'audi',
        Name: 'rs5',
        Type: '2013'
      }
    ]
  },
  {
    key: '2',
    Code: 'Code',
    children: [
      {
        key: '21',
        Code: '243',
        DisplayName: 'ford',
        Name: 'mustang',
        Type: '2012'
      },
      {
        key: '22',
        Code: '503431',
        DisplayName: 'ford',
        Name: 'fusion',
        Type: '2015'
      }
    ]
  },
  {
    key: '3',
    Code: 'Message',
    children: [
      {
        key: '31',
        Code: '4311',
        DisplayName: 'kia',
        Name: 'optima',
        Type: '2012'
      }
    ]
  }
];

并定义列过滤器：

const columns = [
  {
    title: 'Code',
    dataIndex: 'Code',
    key: 'Code',
    filters: [
      { text: 'SP', value: 'SP' },
      { text: 'Code', value: 'Code' },
      { text: 'Message', value: 'Message' }
    ],
    onFilter: (value, record) => record.Code.indexOf(value) === 0
  },
  {
    title: 'Display Name',
    dataIndex: 'DisplayName',
    key: 'DisplayName',
    filters: [
      { text: 'audi', value: 'audi' },
      { text: 'ford', value: 'ford' },
      { text: 'kia', value: 'kia' }
    ],
    onFilter: (value, record) =>
      record.children.filter(child => child.DisplayName === value).length > 0
  },
  { title: 'Name', dataIndex: 'Name', key: 'Name' },
  { title: 'Type', dataIndex: 'Type', key: 'Type' }
];

演示：

Antd树table按列值分组

Antd tree table grouped by column value

treetable

reactjs

antd