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>Date</th>
                <th>Name</th>
                <th>Position</th>
                <th>Office</th>
                <th>Clocked in</th>
                <th>Clocked Out</th>
                <th>N. Attendance</th>
                <th>Day off</th>
                <th>Sick</th>
                <th>Holiday</th>
                <th>Time Off</th>
                <th>Time Off Hrs</th>
                <th>Age</th>
                <th>Start date</th>
                <th>Salary</th>
                <th>Comment</th>

            </tr>
        </thead>
        <tbody>
            <tr>
                <td> 20/03/2019</td>
                <td>Tiger Nixon</td>
                <td>System Architect</td>
                <td>Edinburgh</td>
                <td> 00:00</td>
                <td> 00:00</td>
                <td> 1</td>
                <td> 1</td>
                <td> 1</td>
                <td> 1</td>
                <td> 1</td>
                <td> 1</td>
                <td>61</td>
                <td>2011/04/25</td>
                <td>$320,800</td>
                <td>sdkjfhsdh s dofhsdfh sdiufuisfi iufhi s uifi s iuf sdif</td>
            </tr>
            <tr>
                <td> 20/03/2019</td>
                <td>Garrett Winters</td>
                <td>Accountant</td>
                <td>Tokyo</td>
                <td> 00:00</td>
                <td> 00:00</td>
                <td> 1</td>
    ...

JavaScript

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

                }
                },
                "columnDefs": [
            {
                "targets": [ 3 ],
                "visible": false 
            },
            {
                "targets": [ 2 ],
                "visible": false
            },
            {"className": "dt-center", "targets": "_all"
            }
        ] ,
        scrollY: "500px",
                scrollX: true,
                paging: false  
                
            }); 
        });