Test Fiddle 1

by cemlimited

HTML

<html>
<head>

<link href="https://cdn.datatables.net/fixedcolumns/4.0.1/css/fixedColumns.dataTables.min.css" rel="stylesheet">
    <script src="https://cdn.datatables.net/fixedcolumns/4.0.1/js/dataTables.fixedColumns.min.js"></script>
</head>

  <div class="table-responsive">
  <table class="stripe row-border order-column" id="example11" name="example11" style="width:100%">
    <thead>
      <th style="width:60px"></th>
      <th>Staff</th><th>Work Type</th>
      <th>05-01-2022</th><th>06-01-2022</th>
      <th>07-01-2022</th><th>10-01-2022</th>
      <th>11-01-2022</th><th>12-01-2022</th>
      <th>13-01-2022</th><th>14-01-2022</th>
      <th>17-01-2022</th><th>18-01-2022</th>
      <th>19-01-2022</th><th>20-01-2022</th>
      <th>21-01-2022</th><th>24-01-2022</th>
      <th>25-01-2022</th><th>26-01-2022</th>
      <th>27-01-2022</th><th>28-01-2022</th>
      <th>31-01-2022</th><th>01-02-2022</th>
      <th>02-02-2022</th><th>03-02-2022</th>
      <th>04-02-2022</th><th>07-02-2022</th>
      <th>08-02-2022</th><th>09-02-2022</th>
      <th>10-02-2022</th><th>11-02-2022</th>
      <th>14-02-2022</th><th>15-02-2022</th>
      <th>16-02-2022</th><th>17-02-2022</th>
      <th>18-02-2022</th><th>21-02-2022</th>
      <th>22-02-2022</th><th>23-02-2022</th>
      <th>24-02-2022</th><th>25-02-2022</th>
      <th>28-02-2022</th><th>01-03-2022</th>
      <th>02-03-2022</th><th>03-03-2022</th>
      <th>04-03-2022</th><th>07-03-2022</th>
      <th>08-03-2022</th><th>09-03-2022</th>
      <th>10-03-2022</th><th>11-03-2022</th>
      <th>14-03-2022</th><th>15-03-2022</th>
      <th>16-03-2022</th><th>17-03-2022</th>
      <th>18-03-2022</th><th>21-03-2022</th>
      <th>22-03-2022</th><th>23-03-2022</th>
      <th>24-03-2022</th></thead>
   <tbody>
       <tr data-child-value-1="<td></td><td>David Ellis</td><td>Live...

CSS

@import url('//cdn.datatables.net/1.10.2/css/jquery.dataTables.css');
        td.details-control {
            background: url('http://www.datatables.net/examples/resources/details_open.png') no-repeat center center;
            cursor: pointer;
        }
        tr.shown td.details-control {
            background: url('http://www.datatables.net/examples/resources/details_close.png') no-repeat center center;
        }

JavaScript

function format(value) {
        return  '<tr>' + value[0].replace('|', '"') + '</tr>' + '<tr>' + value[1].replace('|', '"') + '</tr>' ;
    }
  
 

    
  
   
 
$(document).ready(function(){table11.on('click', 'td.details-control', function () {

								var table11 = $('#example11').DataTable();

                   var tr = $(this).closest('tr');
                   var row = table11.row(tr);
                   var teststring = {children: [tr.data('child-value-1'),tr.data('child-value-2')]};
 
                   var childNodes = $();
                   for (var c of teststring.children){
                       childNodes = childNodes.add(c);
                   }
                    
                   if (row.child.isShown()) {
                       // This row is already open - close it
                       row.child.hide();
                       tr.removeClass('shown');
                   } else {
                       // Open this row
                       row.child(format(childNodes)).show();
                       tr.addClass('shown');
                   }
               }
               );
});