JSFiddle - React, Tailwind, and code Playground

HTML

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css">
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.min.js"></script>
<script src="https://cdn.datatables.net/2.0.7/js/dataTables.min.js"></script>
<script src="https://cdn.datatables.net/2.0.7/js/dataTables.bootstrap5.min.js"></script>
<link rel="stylesheet" href="https://cdn.datatables.net/2.0.7/css/dataTables.bootstrap5.min.css">
<link rel="stylesheet" href="https://cdn.datatables.net/buttons/3.0.2/css/buttons.bootstrap5.min.css">
<script src="https://cdn.datatables.net/buttons/3.0.2/js/dataTables.buttons.min.js"></script>
<script src="https://cdn.datatables.net/buttons/3.0.2/js/buttons.bootstrap5.min.js"></script>
<script src="https://cdn.datatables.net/buttons/3.0.2/js/buttons.colVis.min.js"></script>
<link rel="stylesheet" href="https://cdn.datatables.net/rowgroup/1.5.0/css/rowGroup.bootstrap5.min.css">
<script src="https://cdn.datatables.net/rowgroup/1.5.0/js/dataTables.rowGroup.min.js"></script>
<script src="https://cdn.datatables.net/rowgroup/1.5.0/js/rowGroup.bootstrap5.min.js"></script>
<link rel="stylesheet" href="https://cdn.datatables.net/select/2.0.1/css/select.bootstrap5.min.css">
<script src="https://cdn.datatables.net/select/2.0.1/js/dataTables.select.min.js"></script>
<script src="https://cdn.datatables.net/select/2.0.1/js/select.bootstrap5.min.js"></script>
<table class="table" id="dataTable" style="width:100%">
<thead class="table-light text-muted text-wrap align-middle">
  <tr>
    <th scope="col" data-nocolvis></th>
    <th scope="col" data-nocolvis>First</th>
    <th scope="col">Second</th>
    <th scope="col">Third</th>
  </tr>
</thead>
<tbody>
  <tr>
    <td></td>
    <td>1</td>
    <td>2</td>
    <td>3</td>
  </tr>
  <tr>
    <td></td>
    <td>2</td>
    <td>3</td>
    <td>4</td>
  </tr>
</tbody>
</table>

JavaScript

document.addEventListener("DOMContentLoaded", function(event) {
  const config = {
    autoWidth: false,
    buttons: false,    
    layout: {
        topStart: 'buttons'
    }
  };

  config.rowGroup = {
    emptyDataGroup: null, 
    enable: true,
    dataSrc: function (rowData, level) { // row, level?
      return rowData[1];
      //return 'Test';
    }
  };
  config.buttons = [
  	{extend: 'colvis', className: 'btn-sm', columns: ':not([data-nocolvis])'}
  ];
  
  config.order = [1, 'asc'];
  

  const dataTable = new DataTable('#dataTable', config);

});