Таблица дерева Antd, сгруппированная по значению столбца

Question

Мне нужно реализовать таблицу дерева в моем приложении реакции. который сгруппирован по значению свойства объекта. Объект выглядит следующим образом

{
  "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"
    }
  ]
}

А моя таблица должна быть такой, как показано ниже

Я использовал antd в своем проекте и попытался реализовать эту функцию с помощью таблицы antd, но не смог реализовать ее так, как хочу. Мне тоже нужна функциональность фильтра.

Может кто-нибудь предложить решение

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' }
];

Демо: