datatables returning node from render doesnt work in responsive

according to the doc: https://datatables.net/reference/option/columns.render

There are four special values that columns.render can resolve to:

(...)

node (2.0) - when requesting the display data type, you may return a DOM node to be displayed in the cell for the table. It is important to note that all other data types should return a string or numeric value so DataTables can operate on them (e.g. search, order and type detection need data other than a DOM node!).

So i made a custom column renderer that returns a node:

  render: function( data, type, row, meta ) {
    if (type === 'display') {
        console.log(data)
      //return `k1: <strong>${data.k1}</strong>, k2: <strong>${data.k2}</strong>`
      return $('<span>').append(
        'k1: ',
        $('<strong>').text(data.k1).css('color', 'red'),
        ", k2:",
        $('<strong>').text(data.k2).css('color', 'green')
      ).get(0)
    }
    return data
  }

https://jsfiddle.net/g0ph5qv8/3/

And it works just fine. The problems appear when the column gets hidden with responsive (eg. by adding a none class, or simply resizing the window):

https://jsfiddle.net/g0ph5qv8/4/

it fails to render the object - just shows its text representation:

Is there any way to fix it other than returning the actual html from the renderer? so $(obj).html() instead of $(obj).get(0) ?

turns out that it has been fixed in responsive 3.0, but requires to use nonstandard renderer for responsive.details:

https://datatables.net/forums/discussion/comment/229630/#Comment_229630

so this:

- responsive: true,
+ responsive: {
+     details: {
+       renderer: DataTable.Responsive.renderer.listHiddenNodes()
+     }
+ },

does the trick for me.

other available renderers are described here:

https://datatables.net/reference/option/responsive.details.renderer

(i thought this listHiddenNodes is simply the default one, but turns out it is not!)