按列值分組的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' }
];

演示：