React-Table: Show Nested Table for a selected rows nested data

Question

如何让 react-table 为选定的行嵌套子对象显示 sub-component/react-table？

例如，

[
   {
      "objectA":{
         "field1":"field1Data",
         "nestedObjectA":{
            "nestedfield1":"nestedfield1Data",
            "nestedNestedObjectA":{
               "nestedNestedObjectA":"nestedNestedObjectA",
               "nestedNestedObjectB":"nestedNestedObjectB"
            }
         }
      }
   }
]

在上面的 json 中，我将为将显示其字段的 objectA 创建 react-table。用户选择 objectA 行后，我想为所选行显示嵌套 table 嵌套数据 。

在react-table docs here or here中给出的例子中并没有包含太多复杂的情况。这里主要关心的是告诉 react-table 我已经选择了一行，对于这个选定的行数据，我们必须在它下面创建一个单独的 table。我怎样才能做到这一点？谢谢。

Answer 1

我自己想出来了。 但是如果其他人有更优雅的解决方案，请随时分享。

在上面共享的链接中的示例代码中添加了几行。 data 和 subComponent 中的行在这方面有一定意义。

简而言之，我在 data 中调用一个映射函数来检查子组件的 row.original 中的 id 是否与 data 项中的 id 匹配。

简而言之，

data={rowData => rowData.map(item => { 
  if (item.id === row.original.id) {
    return item.nestedChild;
    } else {
      // Since an empty array is expected otherwise React-Table will //result in error.
      return []; 
    }
}

rowData 是用作嵌套 React-Table 源的实际数据。 row.original是原始item的数据，可以用来判断数据是否匹配。

示例，

<ReactTable
          data={data}
          columns={columns}
          defaultPageSize={10}
          className="-striped -highlight"
          SubComponent={row => {
            return (
              <div style={{ padding: "20px" }}>
                <em>
                  You can put any component you want here, even another React
                  Table!
                </em>
                <br />
                <br />
                <ReactTable
                    data={rowData =>
                    rowData.map(item => {
                      if (item.id === row.original.id) {
                        return item;
                      } else {
                        return [];
                      }
                    })
                  }
                  columns={columns}
                  defaultPageSize={3}
                  showPagination={false}
                  SubComponent={row => {
                    return (
                      <div style={{ padding: "20px" }}>
                        Another Sub Component!
                      </div>
                    );
                  }}
                />
              </div>

React-Table: Show Nested Table for a selected rows nested data

React-Table: Show Nested Table for a selected rows nested data

javascript

datagrid

nested

reactjs

react-table