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.

@AndersonSilva strange enough if you put {data} as your first argument in the expandable component you get the row data so yes it worked for me. — Ali
– Ali, Commented Jan 25, 2021 at 17:10

Денис Ярощук · Accepted Answer · 2020-11-01 08:46:53Z

2

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.

answered Nov 1, 2020 at 8:46

Денис Ярощук

707 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Ali · Accepted Answer · 2021-01-25 17:11:52Z

1

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

answered Jan 25, 2021 at 17:11

Ali

4581 gold badge8 silver badges19 bronze badges

Collectives™ on Stack Overflow

react-data-table-component with nested tables

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related