Responsive + Row Details

ServiceSoftware

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?

allan

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.

Responsive would ideally have row-level enable / disable via API, or at least ability to cancel render in responsive.details.renderer

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

kthorngren

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 using columns().responsiveHidden() and toArray() to turn it into a JS array for forEach(). For demo purposes it uses column().header() and column().dataSrc() to get the particulars about each hidden column. These are added to the child row display if hidden.

It uses the responsive-resize and draw events to keep the child rows displayed on the page updated using the updateChildren() function via rows().every() with a selector-modifier of {page: "current"}. It uses row().child.isShown() to check the child row status and if shown updates the displayed HTML.

Kevin