JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://cdn.datatables.net/v/dt/dt-2.0.0/b-3.0.0/b-colvis-3.0.0/cr-2.0.0/r-3.0.0/datatables.min.js"></script>
<link rel="stylesheet" href="https://cdn.datatables.net/v/dt/dt-2.0.0/b-3.0.0/b-colvis-3.0.0/cr-2.0.0/r-3.0.0/datatables.min.css">
<table id="dt" style="width:100%">
<thead>
  <tr>
    <th title="title for foo">foo</th>
    <th title="title for bar">bar</th>
    <th class="none"><div title="title for baz">baz</div></th>
  </tr>
  </thead>
</table>

JavaScript

data=[
  [
    'aa',
    11,
    {k1: 'v1', k2: 'v2'}
  ],
  [
    'bb',
    22,
    {k1: 'v3', k2: 'v4'}
  ],
]

$('#dt').DataTable({
	data: data,
  responsive: {
  	details: {
      renderer: DataTable.Responsive.renderer.listHiddenNodes()
    }
  },
  columnDefs: [
  	{
    	targets: 2,
      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
      }
    },
    {
    	targets: '_all',
      createdCell: function (td, cellData, rowData, row, col) {
      	$(td).wrapInner($('<span>').attr({title: `sample title for ${cellData}`}))
      }
    }
  ]
})