Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Why do collapsed rows remain in the DOM? #714

Open
mellis481 opened this issue Dec 13, 2021 · 3 comments · May be fixed by #979
Open

Why do collapsed rows remain in the DOM? #714

mellis481 opened this issue Dec 13, 2021 · 3 comments · May be fixed by #979

Comments

@mellis481
Copy link
Contributor

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;
}
This was referenced Dec 13, 2021
Closed
Open
@JordanDC2
Copy link
Contributor

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

@yoyo837 yoyo837 linked a pull request Apr 18, 2023 that will close this issue
Open
@iaincollins
Copy link

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
Copy link

ekim49 commented Sep 27, 2023 •
edited

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

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
None yet
Projects
None yet
Milestone
No milestone
Development

Successfully merging a pull request may close this issue.

fix: do not render collapsed row JordanDC2/table
4 participants
@iaincollins @JordanDC2 @mellis481 @ekim49