Why do collapsed rows remain in the DOM?

[mellis481]

Collapsed rows (in nested tables) remain in the DOM, but with style={display:none;}. This creates a nasty issue if someone is trying to stripe their table with even-odd CSS rules (which is very common).

Eg. https://table-react-component.vercel.app/demo/expanded-row-render

It seems like the fix would be to add the following to ExpandedRow:

if (!expanded) {
  return null;
}

[JordanDC2]

I am running into the same problem that this issue addresses, and that the associated pull request fixes, would love to see this addressed

[iaincollins]

I ran into this problem while trying to apply striping too and was caught out because the :nth-child() selector did not work with :not() selector the way I had expected it too.

It turns out for anyone looking to add striping to tables created with rc-table you can use CSS Selectors Level 4 in modern browsers (including Chrome, Edge, Firefox, Safari).

.rc-table-content > table > tbody > tr:nth-child(odd of .rc-table-row) > td {
  background: yellow;
}

This will ignore the expended rows (which have .rc-table-expanded-row class on them instead of .rc-table-row) so the striping should be applied as you'd expect even with expanded rows still being in the DOM.

[ekim49]

I'm having the same problem when collapsing a row with multiple children. The collapsed rows are still rendered.