Expandable rows rendering incorrectly and column resizing lines overlap row data

[fluxquantum]

When attempting to create a mui-datatable with a nested mui-datatable I noticed that the component renders but is misaligned with the parent row data. In addition, when the expandable row is displayed, it gets overlapped by vertical lines used for the column resizing.

Expected Behavior

The expandable row component should render below the parent row. And the column resize lines should not overlap with the expanded row view.

Current Behavior

Column resize lines overlap the expanded row display in addition, the lines slide over to other columns. The underlying rendering within the expandable row ui component is not aligned under the datatable row, they get pushed out horizontally.

Steps to Reproduce (for bugs)

For the expandable row display offset, I created a mui-datatable and in the renderExpandableRow option defined:

const options = { filter: true, filterType: "dropdown", resizableColumns: true, responsive: "standard", download: true, print: false, draggableColumns: {enabled: true, transitionTime: 1}, selectableRows: false, rowsPerPageOptions: [5,10,25], expandableRows: true, renderExpandableRow: (rowData, rowMeta) => { console.log(rowData, rowMeta) const colSpan = rowData.length + 1; return ( <MUIDataTable data={myItems2} columns={myColumns2} options={options} title="My Results 2" /> ) }, expandableRowsHeader: false };

<MUIDataTable data={myitems} columns={myColumns} options={options} title="My Results" /> If you click the vertical column resizing bars and drag them, they easily overshoot across to other columns and overlap the other rows in the table.

If you click a dropdown arrow, there underlying table gets shifted from the parent table row.

Sandbox emulating the issues above: https://codesandbox.io/s/mui-datatables-expandable-rows-forked-kmn68?file=/src/ExpandableRowTable.js

Your Environment

Tech	Version
Material-UI	4.11.3
MUI-datatables	3.7.6
React	16.14.0
browser	chrome
etc

[wdh2100]

Fit the parent columns (rowData.length).

sample : https://github.com/gregnb/mui-datatables/blob/master/examples/expandable-rows/index.js

    renderExpandableRow: (rowData, rowMeta) => {
      const colSpan = rowData.length + 1;
      return (
        <TableRow>
          <TableCell colSpan={colSpan}>
            <MUIDataTable
              title={"ACME Employee list"}
              data={data}
              columns={columns}
              options={options}
            />
          </TableCell>
        </TableRow>
      );
    }

[fluxquantum]

@wdh2100 Thank you so much for following up. I see that I needed a another component to wrap the child table and set the style length based on the parent row.

As a follow up question, is there a suggested strategy for passing data to the expandable row? I see that parent row data is baked in but I am uncertain of my options on how I should leverage the table load subsequent child data.

For instance, would embedding an api call which is triggered by the row expand action be an appropriate strategy or is that better handled by a rowClick action used with a custom render?

[aymeneliyas]

Could you give us example, my child row is not aligning with the parent row currently