JSFiddle - React, Tailwind, and code Playground

by locrian1288

HTML

<script src="https://code.jquery.com/jquery-3.5.1.js"></script>
<script src="https://cdn.datatables.net/1.12.1/js/jquery.dataTables.min.js"></script>
<script src="https://cdn.datatables.net/rowgroup/1.2.0/js/dataTables.rowGroup.min.js"></script>
<link rel="stylesheet" href="https://cdn.datatables.net/1.12.1/css/jquery.dataTables.min.css">
<link rel="stylesheet" href="https://cdn.datatables.net/rowgroup/1.2.0/css/rowGroup.dataTables.min.css">
<ul>
        <li>
            <a class="group-by" data-column="1">Group by Position</a>
        </li>
        <li>
            <a class="group-by" data-column="2">Group by Office</a>
        </li>
        <li>
            <a class="group-by" data-column="3">Group by Age</a>
        </li>
    </ul>
    <table id="example" class="display" style="width:100%">
        <thead>
        </thead>
        <tbody>
        </tbody>
    </table>

CSS

.groupContainer{border:1px solid red;
text-align:right}
.top{border:1px solid blue}

JavaScript

var table;
var currGroup;
myDataSrc = [['Tiger Nixon', 'System Architect', 'Edinburgh', '5421', '2011/04/25', '$320,800'],
    ['Garrett Winters', 'Accountant', 'Tokyo', '8422', '2011/07/25', '$170,750'],
    ['Ashton Cox', 'Junior Technical Author', 'San Francisco', '1562', '2009/01/12', '$86,000'],
    ['Cedric Kelly', 'Senior Javascript Developer', 'Edinburgh', '6224', '2012/03/29', '$433,060'],
    ['Airi Satou', 'Accountant', 'Tokyo', '5407', '2008/11/28', '$162,700'],
    ['Brielle Williamson', 'Integration Specialist', 'New York', '4804', '2012/12/02', '$372,000']];
$(document).ready(function() {
    table = $('#example').DataTable( {
    		data: myDataSrc,
        dom:'<"top"lif> <"top groupContainer">rt<"bottom"p>',
        columns: [
            { title: 'Name' },
            { title: 'Position' },
            { title: 'Office',
            	render: function(data, type, row, meta){
              	return '<a href="#">' + data +'</a>';
              }},
            { title: 'Extn.' },
            { title: 'Start date' },
            { title: 'Salary' },
        ],
        orderFixed: [[2, 'asc']],
        rowGroup: {
        	  enable: false,
            dataSrc: 2,
            startRender: function ( rows, group ) {
              if ( table.rowGroup().dataSrc() === 2 ) {
              	return '<a href="#">' + table.row( rows[0] ).data()[2] +'</a>';
              } 
            	return group;
        		}
        }
    } );
 $("div.groupContainer").html("TEST")
    // Change the fixed ordering when the data source is updated
    table.on( 'rowgroup-datasrc', function ( e, dt, val ) {
    //console.log(e);
   // console.log(dt);
   // console.log(val);
   			table.column(val).visible(false);
        currGroup = val;
        table.order.fixed( {pre: [[ val, 'asc' ]]} ).draw();
    } );
 
    $('a.group-by').on( 'click', function (e) {
        e.preventDefault();
   			table.column(currGroup).visible(true);
 				column = $(this).data('column')
        
      ...