JSFiddle - React, Tailwind, and code Playground

HTML

<html>

<head>
    <link rel="stylesheet" href="https://cdn.datatables.net/1.10.19/css/jquery.dataTables.min.css" type="text/css">
    <link rel="stylesheet" href="https://cdn.datatables.net/rowgroup/1.1.0/css/rowGroup.dataTables.min.css" type="text/css">
    <style>
        tr.odd td:first-child,
        tr.even td:first-child {
            padding-left: 4em;
        }
        th.dt-center, td.dt-center { text-align: center; }
    </style>
</head>

<body>
    <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>
                <th>Comment</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>Tiger Nixon</td>
                <td>System Architect</td>
                <td>Edinburgh</td>
                <td>61</td>
                <td>20/01/2018</td>
                <td>$320,800</td>
                <td>sdkjfhsdh s dofhsdfh sdiufuisfi iufhi s uifi s iuf sdif</td>
            </tr>
            <tr>
                <td>Garrett Winters</td>
                <td>Accountant</td>
                <td>Tokyo</td>
                <td>63</td>
                <td>15/01/2018</td>
                <td>$170,750</td>
                <td>idyiadssad asudi idyui yuasd as iudfyasui sdsshadasidhi asiudhisadh asiudh</td>
            </tr>
            <tr>
                <td>Ashton Cox</td>
                <td>Junior Technical Author</td>
                <td>San Francisco</td>
                <td>66</td>
                <td>10/01/2018</td>
                <td>$86,000</td>
                <td>asjkdskahhafhd sdiyfuidsfudsy sdfi ufsdyuifysiduy fuify usdify dsifu ydsiufyisd ndu fysdyfdi </td>
            </tr>

        </tbody>

    </table>
    <script src="https://code.jquery.com/jquery-3.3.1.js"></script>
    <script...

JavaScript

$(document).ready(function() {
            $('#example').DataTable({
                order: [
                    [2, 'asc'],
                    [1, 'asc'],
                    [4, 'asc']
                    
                ],
                rowGroup: {
                    dataSrc: [2, 1],
                    startRender: function (rows, group) {
                    return $('<tr/>')
                        .append('<td class="td-left" >' + group + '</td>');

                }
                },
                "columnDefs": [
            {
                "targets": [ 1 ],
                "visible": false 
            },
            {
                "targets": [ 2 ],
                "visible": false
            }
        ],

                "columnDefs": [
        {"className": "dt-center", "targets": "_all"}
      ]
                
            });
        });