React-Table汇总行

时间:2019-04-16 08:05:49

标签: reactjs

我目前正在使用ReactTable,目前正在研究如何整合行。

这是我要制作表的数据

[{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={[
     {
      Header: "Parent",
      accessor: "GroupTitle",
      minWidth: 240,
      }
   ]}
SubComponent={row => {
   return (
    <ReactTable
        data={row.original.ArrayItem}
        columns={[
        { Header: "ID", accessor: "ID", id: "ID" },
         {
         Header: "Title",
          accessor: "Title",
           minWidth: 240
         }
          ]}

              />
            );
          }}>

我不确定是否要使用“ GroupTitle”整合数据来使用子组件,因为当前有关子组件的文档并不那么有用。当我部署此组件时,它可以工作,但又如何在子组件上获得了额外的空白行,我不确定为什么。

如果您可以指出任何使用子组件的好例子,或者让我知道如何正确使用它

1 个答案:

答案 0 :(得分:0)

糟糕,我想我现在知道为什么我得到空行了,我忘记添加minRows = {0}属性