A few notes about `useExpanded`

I think there are some use cases the useExpanded could really help with, but there are a few things missing from it that I’d like to talk about:

1. A way to invert the logic: to show all the subrows by default, and use expanded: false option to hide what is not needed (basically, a default for the undefined expanded). The state.expanded thought then could probably have either a collapsed counterpart or renamed in a way it could be used for both cases? Right now implementing this manually based on what we have can be quite hard.

2. It would be nice to have an option to count only the non-expanded rows for the pagination, I think right now the pagination takes the subrows into consideration, which sometimes can be not a good thing.

3. A use-case that I’d really like to see: a way to use not the subRows for an expanded state, but a subComponent or something like that, basically, a single cell with a colSpan equal to the length of the currently visible columns. This is a thing we have used in v6 and I think useExpanded could potentially help use with this.

Actually, a possible interesting implementation of the 3 could be separating existing columns into two arrays: one that is displayed before expand, another — after. This would allow not only to add “multiple columns in always visible part, one big cell after”, but also an inverted “one big cell — header/summary before expanding, multiple columns after”, or even just different various columns, with positioning handled by colSpan, or even with a rowSpan, for columns that would span both initial row and the expanded one!

[tannerlinsley]

1. Interestingly enough, this is similar to our other discussion about initial state. If expanded: true to have all rows expanded, does the user expect all of the rowIDs to show up in the expanded state immediately?

2. This already exists. I believe it’s called paginateExpandedRows. Is that what you’re referring to?

3. This already exists too. You can use the expanded state on rows that are neither grouped or have subRows to do this: https://codesandbox.io/s/github/tannerlinsley/react-table/tree/master/examples/sub-components. Is that what you’re referring to?

[ngoue]

Oh hallelujah! I’ve been trying to figure out how I might expand to a custom component for a while now.

https://getyarn.io/yarn-clip/96cb92b6-8ee9-4b64-97e5-e7113a4e2eb4