JSFiddle - React, Tailwind, and code Playground

HTML

<link rel="stylesheet" href="https://cdn.datatables.net/1.10.20/css/jquery.dataTables.min.css">
<link rel="stylesheet" href="https://cdn.datatables.net/rowgroup/1.1.1/css/rowGroup.bootstrap.min.css">
<script src="https://code.jquery.com/jquery-3.3.1.js"></script>
<script src="https://cdn.datatables.net/1.10.20/js/jquery.dataTables.min.js"></script>
<script src="https://cdn.datatables.net/rowgroup/1.1.1/js/dataTables.rowGroup.min.js"></script>
<table id="example" class="display" style="width:100%">
        <thead>
            <tr>
                <th>Name</th>
                <th>Position</th>
                <th>Office</th>
                <th>Age</th>
                <th>Start date</th>
                <th>Salary</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>Tiger Nixon</td>
                <td>System Architect</td>
                <td>Edinburgh</td>
                <td>61</td>
                <td>2011/04/25</td>
                <td>$320,800</td>
            </tr>
            <tr>
                <td>Garrett Winters</td>
                <td>Accountant</td>
                <td>Tokyo</td>
                <td>63</td>
                <td>2011/07/25</td>
                <td>$170,750</td>
            </tr>
            <tr>
                <td>Ashton Cox</td>
                <td>Junior Technical Author</td>
                <td>San Francisco</td>
                <td>66</td>
                <td>2009/01/12</td>
                <td>$86,000</td>
            </tr>
            <tr>
                <td>Cedric Kelly</td>
                <td>Senior Javascript Developer</td>
                <td>Edinburgh</td>
                <td>22</td>
                <td>2012/03/29</td>
                <td>$433,060</td>
            </tr>
            <tr>
                <td>Airi Satou</td>
                <td>Accountant</td>
                <td>Tokyo</td>
                <td>33</td>
                <td>2008/11/28</td>
               ...

JavaScript

var dt = null
	,rowGroups = []
  ,colNames = ['Name', 'Position', 'Office', 'Age', 'Start date', 'Salary'];
$(document).ready(function() {
    dt = $('#example').DataTable({
    	rowGroup: {
        startRender:  function (rows, group, level) {
          return rowGroupStartRender(rows, group, level);
        },
        enable: false
      }
    });
    $('th').on('contextmenu', function(e) {
    	e.preventDefault();
    	groupByColumn(this)
    })
});

function groupByColumn(elm) {
	var $elm = $(elm),
  	tableId = $elm.closest('table').attr('id'),
		visibleColIdx = $elm.index(),
		realColIdx = dt.column.index('fromVisible', visibleColIdx);

	rowGroups.push(realColIdx);
	dt.rowGroup().dataSrc(rowGroups);
	dt.rowGroup().enable().draw()
}

function rowGroupStartRender(rows, group, level) {
	return colNames[rowGroups[level]] + ': ' + group;
}