react-data-table-component with nested tables

Question

I am using react-data-table-component in a node/react page. I have 2 data sets, List and ListNested.

list is a collections of document data (xlsm to be specific) that has the most recent version of the document on each row.

listNested is a similar data set, but contains all previous versions of each record in list (if they exist).

I have my parent table defined as:

return(    
  <DataTable
    title="Documents"
    columns={columns}
    data={list}
    pagination={true}
    fixedHeader={true}
    keyField="document_id"
    striped={true}
    highlightOnHover={true}
    noDataComponent=<div className="loader">
      <Loader
        type="Oval"
        color="#005ea2"
        height={100}
        width={100} />
    </div>
    persistTableHead={true}
    defaultSortField="updated_at"
    defaultSortAsc={false}
    overflowY={true}

    expandableRows
    expandableRowDisabled={row => row.disabled}
    expandableRowsComponent={<ExpanableComponent />}

  />
);

and my ExpandableComponent defined as:

const ExpanableComponent = ({listNested}) =>
  <DataTable
    columns={columnsNested}
    data={listNested}
    pagination={true}
    fixedHeader={true}
    keyField="doc_name"
    striped={true}
    highlightOnHover={true}
    noDataComponent=<div>No previous versions of this document were found.</div>
    persistTableHead={true}
    defaultSortField="updated_at"
    defaultSortAsc={false}
    overflowY={true}
  />;

the documentation [Here] does not clearly define this type of nesting. I tried using the doc_name attribute as the keyField, but it doesn't work properly. The nested data shows up in the parent table instead of nested table, but the nested table headings DO show up in the nested row.

In the picture below, rows 2 and 3 are coming from the listNested data set in the ExpandableComponent and should be nested under row 1. however, row 1 shows an empty data set (circled).

I verified the lists both have the data I want them to, I am just stuck on how to stick the second list into the nested section.

Answer 1

To make this work you have to call your prop exactly data, not listNested, like this:

const ExpanableComponent = ({data, ...props}) =>
  <DataTable data={data} {...props}/>

By the way, it even works with calling itself as an expandableRowsComponent.

export default function MyDataTable({data, ...props}) {
    return <Datatable 
        expandableRows
        expandableRowsComponent={<MyDataTable className="ml-3"/>}
        noTableHead={!!data}
        noHeader={!!data}
        {...props}
    />
}

To use this component you don't have to use prop data. Two latter props indicate that if data is undefined (since [] is still truthy), then the table doesn't show anything.

Answer 2

I added {data} argument as the first argument in the props of expandable component and it worked for me.