Datatable with Row Grouping & Scrolling with Freezing Group Header
Datatable with Row Grouping & Scrolling with Freezing Group Header
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 .
Answers
The example has this error:
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
scrollYto 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
scrollYthen all the rows in the table will be selected with theselector-modifierof{ 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
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
I tested my example with the RowGroup extension and it works too.
https://live.datatables.net/wawodonu/36/edit
There are two changes:
dtrg-groupinstead ofgroupused in the Row grouping example.tdtothto match what the extension uses for the inserted grouping rows. This is to match the styling used.Kevin