"Complex Header" not responsive in current DataTables.net build?

Question

DataTables allows you to create "complex headers" (which entails spanning multiple columns or rows). The Responsive plugin is compatible with this if you add some extra CSS as per the documentation.

Here is a working fiddle: https://jsfiddle.net/hmr9qtx3/1/

As you can see, resizing the rendered output frame correctly removes the <th> tags from the row. This is with versions 1.10.1 of DataTables and 1.0.0 of Responsive.

The most current DataTables build is 1.10.12, and the version of Responsive it comes packaged with is 2.1.0. Here is an identical fiddle with those versions swapped out: https://jsfiddle.net/hmr9qtx3/

Between the working and non-working version numbers, usage of datatables and the responsive plugin is identical.

You will notice that the responsive plugin functions correctly for the non-spanning table headers and the body of the table. However, the spanning headers are not removed from the DOM when the page is resized enough that they would add a scrollbar/overflow.

How can I fix or patch my code so the spanning headers are responsive like in the working fiddle? I'd prefer to not use older versions of the plugins.

Answer 1

Complex headers are not supported with Responsive plug-in 2.0, see this thread or this issue #59.

As a workaround you can continue using Responsive plugin 1.0 with the most recent version of jQuery DataTables.

Per author's post:

Unfortunately yes, this is a limitation in Responsive 2.0. (...) The plan is to resolve it for 2.1. (...) The only option at the moment is to roll back to Responsive 1.x I'm afraid.

Although you're using v2.1.0, maybe it wasn't yet added because issue #59 on GitHub remains open.