React-table: cell-level rowspan / colspan

[liberza]

Opening an issue for tracking, per this: https://github.com/tannerlinsley/react-table/issues/1342#issuecomment-561017437. I had noticed one was never opened.

[liberza]

I will likely work on this plugin or at least something similar. I'm interested in a specific use-case, so want to bring that up in case someone has feedback on a more general way to do things regarding #1964.

Basically, if two or more adjacent row cells are the same, I need to merge them. The groupBy plugin, and this stackoverflow answer both seem relevant: https://stackoverflow.com/a/56588036

Perhaps a more general plugin should accept a function to compare cells somehow and determine when to merge? I also almost feel it would make sense to have separate plugins for rowspan vs colspan.

[tannerlinsley]

I agree that separate plugins feel right.

[tannerlinsley]

I'm fairly confident that if and when these plugins exist they will be non-breaking additions to the API and even if they are, I'll be much more apt to have them be smaller and more incremental major version changes.

Feel free to open a PR discussing use-cases, edge cases and potential public APIs for these plugins.

[liberza]

Alrighty - I don't have this in a fork yet, but have a proof-of-concept rowspan in a codesandbox.
https://codesandbox.io/s/dreamy-neumann-3ej9z

(Just sort by the first column and you should see it work.)

I think this can be cleaned up quite a bit, but this does seem to at least work.

[liberza]

One cleanup I'd like to do is extract the first rows loop into a pre-processing function similar to "prepareRow", perhaps named "spanRows".

Also with multisort, perhaps it would make sense to check that cells to the right do not cross the rowspan boundary of cells to the left. That way a hierarchy can be correctly displayed.

[deadcoder0904]

Hey @liberza did you manage to make the plugin? I looked at the Codesandbox & it looks like the Stackoverflow one where there are repeated rows.

Unfortunately, I have a different datamodel, i.e, array of objects inside the top-level array. Can you take a look at https://github.com/tannerlinsley/react-table/discussions/2233?

I can't seem to wrap my head around how to do make it span multiple rows :(

[liberza]

Yes, I did get it to work. I improved upon the version in that codesandbox
a bit, I'll try and get a PR written.

On Sun, Apr 26, 2020, 10:23 AM Akshay Kadam (A2K) [e-mail]
wrote:

Hey @liberza https://github.com/liberza did you manage to make the
plugin? I looked at the Codesandbox & it looks like the Stackoverflow one.

I have a different datamodel, i.e, array of objects inside the top-level
array. Can you take a look at #2233
https://github.com/tannerlinsley/react-table/discussions/2233?

I can't seem to wrap my head around how to do make it span multiple rows :(

—
You are receiving this because you were mentioned.
Reply to this email directly, view it on GitHub
https://github.com/tannerlinsley/react-table/issues/1933#issuecomment-619559403,
or unsubscribe
https://github.com/notifications/unsubscribe-auth/ABCCD6E4NZL7ZFX466JA5DLROQ7XTANCNFSM4KY3UMSA
.

[deadcoder0904]

If you have time, can you take a look at #2233?

Edit: Found a working solution. Find the answer at #2233