Row expansion and nested table: nested row instead of nested tables

[camdarley]

Is your feature request related to a problem? Please describe.
When using the nested table feature, if the nested table data has the same type than the parent table, there is an issue with columns width not maching parent columns width, it's also not compatible with column resizing.

Of course we can use fixed columns width some issues, but it then adapt poorly to dynamic content.

Describe the solution you'd like
Instead of adding an extra row with colspan and a new table inside, we could have an option to set new rows.
We can't use collapse with table tr, but in this example we can see a way to animate toggling rows : https://stackoverflow.com/a/37376274
We could have an extra property to add new content "as rows":

return (
  <DataTable
    withTableBorder
    withColumnBorders
    columns={[{ accessor: 'name' }, { accessor: 'city' }, { accessor: 'state' }]}
    records={records}
    rowExpansion={{
      rows: [], // 👈 set this to add new "nested" rows
      // ...
    }}
  />
);

This could exists along with the content property to both add rows and nested content (and not breaking curent implementations)

[mikkurogue]

In a certain sense this is already "possible" through the content cb. At my work we have a similar use-case (just not styled very well because its for internal tooling).

We basically create a new Datatable as the return value of content and omit the header rendering to only render the rows. This is very dirty and hard to maintain, as it still requires the columns to be defined properly.

However I would also ask, how would you define a "nested" row? Is it an array of objects that stem from the main row itself or is it a separate object that populates by reference?

So would it be like

const items = [
    {
        name: "Hello",
        description: "Project Description",
        subProjects: [
            {
                name: "World",
                description: "Sub project description"
            }
        ]
    }
]

Or would it be split into 2 different objects and have a shared identifier to map the correct nested rows?

[jasiene]

I'm running into the same issue. Fundamentally I think it is because we're nesting a table inside a td. A potential solution would be to section it with multiple tbody's and keep the one table.

[RamlahAziz]

We basically create a new Datatable as the return value of content and omit the header rendering to only render the rows. This is very dirty and hard to maintain, as it still requires the columns to be defined properly.

We are using exactly this - to show nested tables to the user.

We have fixed the widths to match the parent columns width. But now we are facing an issue as column resizing is not possible with nested tables and the data is truncated.