[v8] Manual grouping on server

[ajkl2533]

Hi @tannerlinsley, thanks for the awesome libraries from Tanstack.
I have a question and I haven't been able to find a solution or example.
The table supports manual grouping on server, but how the data I pass into the table should look like?

Thanks

[tkfmed]

Yeah, this topic is pretty tricky for me as well. The documentation comes with one clue, nearby manualGrouping and Enables manual grouping. If this option is set to true, the table will not automatically group rows using getGroupedRowModel() and instead will expect you to manually group the rows before passing them to the table. This is useful if you are doing server-side grouping and aggregation.

Ok. I'm expected to manually group the rows. But what does it mean in the table environment? What steps should I take? To group the rows for given api?
@tannerlinsley

[charl0tee]

Anything new with this ? There is no documentation or example of how the data should be passed for manualGrouping which we really need on our current project..

[ajkl2533]

Unfortunatly nothing I even tried to ping Tanner directly on Twitter but without any response. I don't know, maybe @KevinVandy could know a bit more

[waltershewmake]

Any update on this? Crazy that there is no info available

[TonyVeigel]

Looking at the code it doesn't seem like manualGrouping really does anything. Couldn't you accomplish the same thing by using subRows though? Grouping just uses subRows anyways.

[ajkl2533]

It might but I haven't been able to create a working example using subRows.

[Cruppelt]

I am struggling with this too... Seems to mess up the entire table api.

[deshiknaves]

I've been digging into this in the last couple of days and I think the documentation is a bit misleading. It says that if manualGrouping is turned on then the you are responsible for grouping the rows. That's what we want, but from what I can see from the data prop, there is no way to pass something that is pre grouped in the shape that the table internals expect. If we look at Row Models description, there is an order that these things go though to create the table.getRowModel(). So I don't think this direction will really work and maybe the documentation should be updated by removing that statement, or an example provided.

However, this can be achieved by using functionality of subRows and passing in a custom getGroupedRowModel into useTable. To do this you'll need to:

1. Nest the data that goes in with subRows for all the sub items on any level (i.e. children to the top level row)
2. Add a getSubRows function which should return the subRows if they exist or undefined. This will then get picked up by getCoreRowModel and the sub rows will be in the internal model.
3. Do not set manualGrouping to true, because you still want it to use the custom function you passed in.
4. Pass in a custom getGroupedRowModel where you iterate over the rows and create sub rows for each of them. Have a look at https://github.com/TanStack/table/blob/main/packages/table-core/src/utils/getGroupedRowModel.ts for the default implementation and adapt it to not doing aggregations and using the subRows rather than grouping them here.

With this you can achieve server side grouping. This will apply to all the other row model functionality.

[deshiknaves]

Though I'm noticing that this breaks search because that comes before the getGroupedRowModel, so time to dig into that.

[KevinVandy]

@deshiknaves Nice. This is an area of TanStack Table that I have not really explored much at all. Manual grouping needs someone to pioneer and document the way. Interested in helping document your approach?

[deshiknaves]

100% what do you think is the best approach? In an example?

[sp88011]

Very interested in an example here @deshiknaves. Happy to help extract documentation from it afterwards. Server-side grouping does seem like a green field as far as I can tell, with most solutions so far using the client to do the actual work in grouping the data

[KeithHubert]

@deshiknaves I've been checking this thread daily for any updates 😂

We desperately need some docs and examples regarding manual grouping and server-side subRows. I'll be sure to update if I make any progress.

[deshiknaves]

I am 90% done with the example. There are quite a few bits. You will all have a repo sometime next week

…

________________________________ From: Keith Hubert ***@***.***> Sent: Friday, April 19, 2024 9:21:41 AM To: TanStack/table ***@***.***> Cc: Deshi Rahim ***@***.***>; Mention ***@***.***> Subject: Re: [TanStack/table] [v8] Manual grouping on server (Discussion #4990) @deshiknaves<https://github.com/deshiknaves> I've been checking this thread daily for any updates 😂 We desperately need some docs and examples regarding manual grouping and server-side subRows. I'll be sure to update if I make any progress. — Reply to this email directly, view it on GitHub<#4990 (reply in thread)>, or unsubscribe<https://github.com/notifications/unsubscribe-auth/AAGSU4V7BAUGXCLMVNH4VWDY6FABLAVCNFSM6AAAAAA2WZNFCWVHI2DSMVQWIX3LMV43SRDJONRXK43TNFXW4Q3PNVWWK3TUHM4TCNRYGY4DS>. You are receiving this because you were mentioned.Message ID: ***@***.***>

[deshiknaves]

Here is the example on how to sort/group on the server. Let me know the right format to document this in. Also if there are other examples you'd like to see. It's very much possible to do computation on the server and present it on the client side using this library.

https://github.com/deshiknaves/react-table-examples

[pf1gura]

This was also bugging me for a while now, and I spent part of my day digging into it. Here are my findings. Hopefully some of you will find it useful.

Client side grouping

If you don't need server side grouping, and you just want to change how default grouping works, copy getGroupedRowModel from React Table as people mentioned before me, and modify it according to your needs.

Server side grouping

With server side grouping, either I am still missing something or this case wasn't truly considered.

The context

The core of grouping inside React Table are two properties that each grouped row should have. These are groupingColumnId and groupingValue. Even if your backend returns data inside subRows, this alone is not enough. In client side grouping, both groupingColumnId and groupingValue are generated by getGroupedRowModel function. The problem is that when manualGruping is enabled, this function never runs.

The solution

I think the best way to add these two missing properties is via getCoreRowModel. I copied the original function from React Table repo and added two lines inside it that configure both missing props. In my case, these props are already generated by the backend and are present in the response. Using getCoreRowModel I pass them to the row model inside React Table.

groupingColumnId is used to determine which column is used for grouping on this level. groupingValue is a value of that column. If you want to group by column with ID of "state", the value of groupingColumnId should be "state". Besides this, the response object should include state property with actual value that this group represents, and subRows with actual rows that will be visible after grouped row is expanded.

This might be easier to understand with actual code examples, so I prepared a reproduction project.

Example repo

Here is a commit made to my example Material React Table project, that adds all necessary bits to enable manual grouping on the server: pf1gura/react-table-manual-grouping-example@4397ef1.

In this example, grouping works only for the first selected column, but that is only due to the fact that I wanted to keep it simple. The same approach will work on as many subRows levels as needed.

[KeithHubert]

Thank you all for the contributions to this thread. Despite the helpful suggestions, I'm still facing challenges with server-side grouping and aggregation. Here's the issue:

I'm also trying to incorporate server-calculated aggregate values for certain columns within these groups. This is where I run into trouble. I've tried following @deshiknaves' approach with a custom getGroupedRowModel and @pf1gura's method with a custom getCoreRowModel. In both scenarios:

1. Setting manualGrouping=true either displays the aggregate or the grouped rows, but not both together.
2. Setting manualGrouping=false shows whichever was not rendering in the above scenario (i.e., if aggregates were showing, now grouped rows show, and vice versa).

It seems to depend on the getIsGrouped status, which I cannot manually set to true effectively.

To complicate matters further, I'm using material-react-table instead of the base tanstack-table, and the documentation and examples for this scenario are limited.

Any guidance or insights would be greatly appreciated!