How can I make a Responsive footer row with detail row(s)?

roedema

I'm using the Responsive and FixedHeader extensions to provide a nice layout across viewport sizes. I'm trying to include a totals row. It doesn't need to be in the tfoot per se, but I would like it to remain ordered last (or first) no matter the sorting. I would also like it to stand out from the rest of the table, and to be excluded from the count of entries. Finally, I would like it to collapse for small viewports.

I've taken a few stabs at this, trying a tfoot as well as a separate tbody, and each of those with th and td tags. You can see all four in the jsFiddle: https://jsfiddle.net/gam3hp4s/

For rows in the tfoot, the Responsive extension does remove the rightmost column(s) and may be collapsing the columns into detail rows, but it does not insert an expansion (+) icon to make them accessible. Rows in an extra tbody get an expansion (+) icon, but the right most column(s) are not removed or collapsed into detail rows.

Does anyone have any ideas? Thanks!

roedema

After reading some more of the documentation, I came up with a simple solution that satisfies all criteria except exclusion from the count of entries, but I decided I don't need or even want that count to be displayed. So, I set info to false and defined drawCallback to append the total row on every redraw. See the updated fiddle: https://jsfiddle.net/roedema/gam3hp4s/8/

Still, it would be nice to see an option in Responsive to create details for tfoot rows. And while multiple tbody tags are not supported by DataTables, the respective behavior of Responsive seems a little inconsistent.

roedema

Actually, that isn't quite a solution because the totals row is pulled out from its natural sort order and hence may have the wrong striping. I suppose the solution for now will be to custom sort.

roedema

I see now that this problem had first been solved more than four years ago. Well, here's a modern API version, using a column sorted with orderFixed (regardless of any user sorting) and hidden with a className of "never" (for Responsive): http://jsfiddle.net/roedema/gam3hp4s/9/