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

Question

How can I tell react-table to show a sub-component/react-table for a selected Rows nested Child Object?

For example,

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

In the json above I will be creating react-table for objectA which will display its fields. Once the user selects objectA row, I want to show a nested table for the selected rows nested data.

In the examples given in react-table docs here or here doesnt contain much complex situations. The main concern here is to tell react-table that I have selected a row and for this selected rows data we have to create a separate table right underneath it. How can I achieve this? Thank you.

Answer 1

I figured it out myself. But still if anyone else has a more elegant solution please feel free to share.

Added a few lines to the example code in the links shared above. data and the row from subComponent have some significance in this.

In short I am calling a map function in data to check if id in row.original from subcomponent matches the id in data item.

In short,

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 is the actual data used as the source of the Nested React-Table. row.original is the data of the original item which can be used to check if the data matches.

Example,

<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>