Expand Rows

[leducsang97]

I would like to add a feature of expanding more than just one child row. Currently I used a trick to create a table inside a Tablerow but it will shift the parent row content to the right. I would like to ask if there is any official way of supporting this feature. Thank you very much.

Tech	Version
Material-UI	^3.9.2
MUI-datatables	^2.0.0-beta.59
React	^16.8.1
browser	chrome

[tsuz]

Try this @leducsang97

import TableCell from '@material-ui/core/TableCell';
import TableRow from '@material-ui/core/TableRow';

...
options={{
  renderExpandableRow: () => (
            <TableRow>
              <TableCell>A</TableCell>
              <TableCell>b</TableCell>
              <TableCell>c</TableCell>
            </TableRow>)
}}

[tsuz]

Something like this should do

<TableCell colSpan={3}>A</TableCell>

[leducsang97]

Try this @leducsang97

import TableCell from '@material-ui/core/TableCell';
import TableRow from '@material-ui/core/TableRow';

...
options={{
  renderExpandableRow: () => (
            <TableRow>
              <TableCell>A</TableCell>
              <TableCell>b</TableCell>
              <TableCell>c</TableCell>
            </TableRow>)
}}

This is exactly what I did. But the issue is it only works with 1 row. I dont know how to do it with more than 1

[tsuz]

Have you tried

<>
  <TableRow>
    <TableCell>A</TableCell>
    <TableCell>b</TableCell>
    <TableCell>c</TableCell>
  </TableRow>
  <TableRow>
    <TableCell>A</TableCell>
    <TableCell>b</TableCell>
    <TableCell>c</TableCell>
  </TableRow>
</>

or build your own table within specific cell like this:

  <TableRow>
    <TableCell />
    <TableCell colSpan={2}>
      <YourDataTable />
    </TableCell>
  </TableRow>

[leducsang97]

Have you tried

<>
  <TableRow>
    <TableCell>A</TableCell>
    <TableCell>b</TableCell>
    <TableCell>c</TableCell>
  </TableRow>
  <TableRow>
    <TableCell>A</TableCell>
    <TableCell>b</TableCell>
    <TableCell>c</TableCell>
  </TableRow>
</>

or build your own table within specific cell like this:

  <TableRow>
    <TableCell />
    <TableCell colSpan={2}>
      <YourDataTable />
    </TableCell>
  </TableRow>

This works like a charm. Thank you very much. Do you know how to default open the expandable rows?

[tsuz]

Not that I know of... It doesn't seem like you can do.. according to this

You could simulate a click but not sure if that'll be a good solution..

[gabrielliwerant]

Correct, default open expandable rows is not yet an option. Feel free to work on that PR if you want, although the UX person in me thinks it's not a good idea to default to having all the information available at once, and this somewhat defeats the purpose of being able to hide it.

In fact, if you get really clever, you can already implement this yourself by adding a column that has its own button to show/hide additional information, which you could then default to open if you wanted.

[MayankJariwala]

This worked for me, and it also justifies the reason: It will span till the length of the row length.

renderExpandableRow: (rowData, rowMeta) => {
return (
    <TableRow>
        <TableCell colSpan={rowData.length + 1}>
          <YourDataTable />
        </TableCell>
    </TableRow>
    );
},

Cheers :)