Columns grouping and hide/expand based on header rowspan and colspan? Possible?
Columns grouping and hide/expand based on header rowspan and colspan? Possible?
edwardc
Posts: 30Questions: 11Answers: 0
For a table with a large number of columns, I'm searching for a way to group them.
This guys made a great idea: https://js.devexpress.com/Demos/WidgetsGallery/Demo/Pivot_Grid/VirtualScrolling/jQuery/Light/
(I don't advertise a competitor, I want to use datatable as the devexpress does not get along well with boostrap and on mobile things gets super slow and buggy)
I was thinking about the following approuch, but before I start coding I want to ask for the opinion of other people who are more experienced then me.
- Col grouping: on rendering, check for columns that I want to group if the existing one has the same value. If yes, apply a css class that will visually group the 2 (or more) column. Possible? It is just an idea. I tried something in Firebug, almost succeeded but it depends on the number of columns. Worth trying?
- Header grouping? Need some inputs on this. I never tried them so any feedback will be appreciated. Some combination of col-hide triggered by the header?
What do you think? Achievable?
This question has an accepted answers - jump to answer
This discussion has been closed.
Answers
In DataTables colspan and rowspan are not supported in the
tbody. To be honest, I hadn't actually considered using CSS styling to fake that before - that is a valid option and quickly thinking about it I think it would work. Interesting...DataTables does support colspan / rowspan in the
thead(example) although you do need to make sure you have at least one unique cell per column (i.e. no colspan).Allan
One other thought - the collapse of the row and column groups in the example you linked to I don't believe would be possible in DataTables at the moment. I've been working on a row group extension recently (to be published soon) and because DataTables core doesn't have any concept of grouping, its not easy to do. It won't be in the first version of the new extension.
Allan
Hi Allan,
Just a question/suggestion: have you thought about CSS-ing it?
If headers col just have a button that add a "display: none" class to the cols bellow, it should work, no? One does not need to not render them as the user will click and expand the sections. It's just about grouping.
All this updates are visual only so CSS could do it without a problem. Sure, it's easy if you make them in the core plugins as you have access to width and height of all cells.
I haven't really - I've focused on using Javascript for the interaction and CSS only for styling.
It might be possible to do as you say, although it would be a fairly big shift for DataTables core. I'd also be worried how it would interface through the API and extensions if behaviour was offered via CSS. I'd rather get grouping support into DataTables core (which isn't planned for the next major release).
Allan
Sure, is always better with core support. But until then, a workaround is also good.
I'll give it a try and let you know. If it works I will post the code so anybody can use it if they need it.
Some months ago I asked if it is possible to have a transpose dt with only one column for data. Your answer was also that it is not possible and yet I did it with css and it works great. Save us a lot of time as we did not build a form to do what dt is doing and adding or removing info took seconds instead of ten's of minutes.