Datatable with Row Grouping & Scrolling with Freezing Group Header

danapple

In an old question from 2019, there was a discussion about having the rowGroup header for the top-most displayed item shown:
https://datatables.net/forums/discussion/55182/datatable-with-row-grouping-scrolling-with-freezing-group-header

The example that Colin gave doesn't seem to be working anymore. Is there is newer technique for achieving the same result?

The result I'm looking for would be there would be a row group for "Location" and "Edinburgh" would be shown at the top of the list whenever the top data row is a row for the location "Edinburgh", even if the data row is not the first one in that group.

Dan .

kthorngren

The example has this error:

Uncaught Error: RowGroup requires DataTables 2 or newer

Here is the updated example using the Download Builder to get the latest Datatables code:
https://live.datatables.net/wawodonu/35/edit

As noted in the thread you linked to this example doesn't freeze the current group below the header.
https://live.datatables.net/wawodonu/35/edit

Note that I added scrollY to the example to replicate the jQuery iOSList plugin example linked to in the other thread.

RowGroup doesn't support this feature. Based on my limited understanding of how RowGroup works it doesn't pay attention to scrolling events. The RowGroup display is updated only when the Datatable is redrawn which doesn't happen because of scrolling.

I think to implement this one would need to create a scroll event that determines what is displayed in the scrolling window and insert, if needed, the grouped row. Instead of using the RowGroup maybe take a look at this Row Grouping example as a place to start. If using scrollY then all the rows in the table will be selected with the selector-modifier of { page: 'current' }instead of just the rows shown in the scroller window.

Doesn't sound like an easy thing to develop, maybe @allan has some ideas.

Kevin

kthorngren

This sounded like a good Sunday morning challenge I created this example:
https://live.datatables.net/sovepore/1/edit

Feel free to make any desired changes.

Kevin

kthorngren

I tested my example with the RowGroup extension and it works too.
https://live.datatables.net/wawodonu/36/edit

There are two changes:

1. The current RowGroup extension uses the class dtrg-group instead of group used in the Row grouping example.
2. Changed from using td to th to match what the extension uses for the inserted grouping rows. This is to match the styling used.

Kevin