Responsive + Row Details
Responsive + Row Details
Reference: Child rows (show extra / detailed information) from https://datatables.net/examples/api/row_details.html
Mobile-first design demands using Responsive nearly everywhere.
Use of Child Rows per above example to display Row Details is limited. Responsive uses Child Rows, and modal display of Row Details is unacceptable.
What is the best workaround to use both options simultaneously (Responsive and display Row Details)?
I've been working for days on an example ( https://live.datatables.net/fowitaqu/3/ ) that attempts using responsive.details.renderer in combination with the above referenced example. It isn't easy, and I did not expect it to be easy :-)
It doesn't help that responsive.details.renderer executes with screen resize and not only when the number of columns hidden is changed.
Responsive would ideally have row-level enable / disable via API, or at least ability to cancel render in responsive.details.renderer (i.e. if cancel then don't touch the child row details). But this doesn't seem possible.
Has anybody else worked on such a workaround or have a suggested approach?
Answers
I've never tried to combine a Responsive child row renderer and a custom renderer as well - it should be possible, but I can well imagine that it wouldn't be easy.
I never thought of adding that since you can just replace the renderer with what you want.
The sounds like there is need for a renderer that would interface the two. I do like that idea, but I'll be honest, I don't know when I'll get time to try implementing that.
Allan
One option might be to disable the Responsive chid rows, like this example then use the Child Details solution to display the standard details plus the columns hidden via Responsive. I built this example to demo:
https://live.datatables.net/qucicico/1/edit
It uses the
td.dt-control
event from the Child Details. The format function is updated to get the responsive hidden columns usingcolumns().responsiveHidden()
andtoArray()
to turn it into a JS array forforEach()
. For demo purposes it usescolumn().header()
andcolumn().dataSrc()
to get the particulars about each hidden column. These are added to the child row display if hidden.It uses the
responsive-resize
anddraw
events to keep the child rows displayed on the page updated using theupdateChildren()
function viarows().every()
with aselector-modifier
of{page: "current"}
. It usesrow().child.isShown()
to check the child row status and if shown updates the displayed HTML.Kevin