react-data-table-component with nested tables

144
January 09, 2020, at 2:00 PM

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.

READ ALSO
JWT authenticaton authorization not working

JWT authenticaton authorization not working

I'm trying to implement a jwt token to secure my APIsI'm using Angular in frontend while using node and express in the backend with mongodb as database

185
error: &#39;Error occured while trying to process the information&#39;

error: 'Error occured while trying to process the information'

I am trying to get a user's IP information using express-ip module but after running the following code I got this errorEarlier it used to work fine but suddenly it is throwing this error

119
VCard though redirecting from a webpage

VCard though redirecting from a webpage

I would not like to pay a service to host a dynamic vcard and so I though I go have a webpage that redirect to avcf and this would allow me to update it

111
How do I output a javascript array where each array item is a new line using JSON.stringify

How do I output a javascript array where each array item is a new line using JSON.stringify

My goal is to take a javascript array object and output it to a string formatted in a way I can store it in a fileI want to use JSON

116