Mui datatable expanded view taking column width

[MayankPoundrik]

Mui datatable in expanded view(nested table) is taking width of its parent row column.

Expected Behavior

On row expansion, expanded view should take full width of parent row.

Your Environment

Tech	Version
Material-UI	4.3
MUI-datatables	2.14
React	16.8
browser	Chrome

[wdh2100]

https://github.com/gregnb/mui-datatables/issues/1220

[PatilSneha]

@MayankPoundrik Even I am facing same issue..was this fixed? how did u resolve this issue

[Taimoor0217]

@gabrielliwerant can you please provide some insights into this?

[Zaggermeister]

For anyone looking to solve this.

Wrap you component in a <TableRow/> element and a <TableCell colSpan={whatever value}> here. You can pass child elements to the TableCell.

My use case was a table within a row:

    const options = {
        filter: true,
        pagination: false,
        filterType: 'dropdown',
        responsive: 'standard',
        expandableRows: true,
        selectableRows: 'none',
        expandableRowsHeader: false,
        expandableRowsOnClick: true,
        renderExpandableRow: (rowData, rowMeta) => {
            const colSpan = rowData.length + 1;

            return (
                <TableRow>
                    <TableCell colSpan={colSpan}>
                        <MUIDataTable
                            data={businessData.data[rowMeta.dataIndex].analyses}
                            columns={subTableColumns}
                            options={{
                                filter: false,
                                search: false,
                                print: false,
                                download: false,
                                viewColumns: false,
                                customToolbar: null,
                                responsive: 'vertical',
                                selectableRows: 'none',
                                enableNestedDataAccess: '.',
                                pagination: false,
                                selectToolbarPlacement: 'none',

                            }}
                        />
                    </TableCell>
                </TableRow>
            );
        },
    };