反应表子组件聚集数据

时间:2019-04-18 23:01:50

标签: reactjs react-table

我目前正在为我的项目使用react-table库,并使用子组件函数来创建带有表的表。我的数据具有以下结构

[{GroupTitle: "Group Title 1",
  ArrayItem: 
          [{SubTitle: "Sub1", ID: 1},
           {SubTitle: "Sub2", ID: 1}]
  },
  {GroupTitle: "Group Title 2",
  ArrayItem: 
          [{SubTitle: "Sub3", ID: 3},
           {SubTitle: "Sub4", ID: 4}]
  }

]

虽然我使用以下代码

  <ReactTable
       columns={[
         {
          accessor: "GroupTitle",
          minWidth: 240,
          },
{
          header: "Subtitle",
          minWidth: 240,
          },
{
          header: "ID",
          minWidth: 240,
          }
       ]}
    SubComponent={row => {
       return (
        <ReactTable
            data={row.original.ArrayItem}
            columns={[
            { Header: "ID", accessor: "ID", id: "ID" },
             {

              accessor: "Title",
               minWidth: 240
             }
              ]}

                  />
                );
              }}>

它工作得很好,我能够以一种分组的方式显示数据,但是我的问题是标题。我想要的是子组件的标题应该在顶部。并且顶部react-table(GroupTitle)不应具有标题。我可以通过使用accesso在父级中创建一个假标头来实现,但接下来的问题是如何对它们进行过滤?

0 个答案:

没有答案