Reactjs 按列值分组的Antd树表

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

{
  "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表实现这个功能，但无法按照我的意愿实现。我也需要过滤器功能

---

有人能提出一个解决方案吗？

您需要重构

数据源

witch

children prop

：

函数嵌套表（）{
返回(
);
}

当您的

源代码
为：


常量源=[
{
键：“1”，
代码：“SP”，
儿童：[
{
键：“11”，
代码：“5001”，
DisplayName:'奥迪'，
名称：“r8”，
类型：“2012”
},
{
键：“12”，
代码：'313'，
DisplayName:'奥迪'，
名称：“rs5”，
类型：“2013”
}
]
},
{
键：“2”，
代码：“代码”，
儿童：[
{
键：“21”，
代码：“243”，
DisplayName:'福特'，
名称：“野马”，
类型：“2012”
},
{
键：“22”，
代码：“503431”，
DisplayName:'福特'，
名称：'融合'，
类型：“2015”
}
]
},
{
键：“3”，
代码：'消息'，
儿童：[
{
键：“31”，
代码：“4311”，
DisplayName:'起亚'，
名称：“optima”，
类型：“2012”
}
]
}
];

和定义的列筛选器：

const列=[
{
标题：“代码”，
dataIndex:'代码'，
键：'代码'，
过滤器：[
{文本：'SP'，值：'SP'}，
{文本：'Code'，值：'Code'}，
{text:'Message'，value:'Message'}
],
onFilter：（值，记录）=>record.Code.indexOf（值）==0
},
{
标题：“显示名称”，
dataIndex:'DisplayName'，
键：“DisplayName”，
过滤器：[
{文本：'audi'，值：'audi'}，
{文本：'ford'，值：'ford'}，
{文本：'kia'，值：'kia'}
],
onFilter：（值，记录）=>
record.children.filter（child=>child.DisplayName==value）。长度>0
},
{title:'Name'，dataIndex:'Name'，key:'Name'}，
{title:'Type'，dataIndex:'Type'，key:'Type'}
];


演示：

您需要使用
expandedRowRender
，我可以提供帮助，但我明天才有空，若无法回答，我将签入。根据我给定的屏幕，我需要在所有标题上加上表格标题。筛选功能必须能够在所有嵌套数据的标题上使用。@JanithWidarshana答案已更新，请使用此示例添加您自己的属性（如按类型筛选等）