Antd tree table grouped by column value

I need to implement tree table in my react application. that has grouped by an object property value. The object is as follows

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

And my table should be as the following image

I have used antd in my project and I tried to implement this functionality with antd table and could not implement as I want. I need the filter functionality too.

Can anyone suggest a solution

You need to restructure your dataSource witch children prop:

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

When your source is:

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

And defined columns filters:

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

Demo: