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="table table-bordered table-striped" style="width:100%; table-layout: fixed;word-wrap: break-word" >
        <thead>
            <tr>
                <th>Date</th>
                <th>Name</th>
                <th>Office</th>
                <th>Ho Entitled</th>
                <th>Holiday Hrs</th>
                <th>Rem Holiday</th>
                <th>Comment</th>

            </tr>
        </thead>
        <tbody>
            <tr>
                <td> 20/03/2019</td>
                <td>Tiger Nixon</td>
                <td>Edinburgh</td>
                <td>210.00</td>
                <td>2.00</td>
                <td>208.00</td>
                <td>hasdghdgsgd asdasgd asgdh</td>
                
                 
            </tr>
            <tr>
                <td> 20/04/2019</td>
                <td>Tiger Nixon</td>
                <td>Edinburgh</td>
                <td>210.00</td>
                <td>2.00</td>
                <td>206.00</td>
                <td>hasdghdgsgd asdasgd asgdh</td>
            </tr>
            <tr>
                <td> 10/05/2019</td>
                <td>Tiger Nixon</td>
                <td>Edinburgh</td>
                <td>210.00</td>
                <td>2.00</td>
                <td>204.00</td>
                <td>dwqewqe qwewq qwe</td>
            </tr>
            <tr>
                <td> 20/03/2019</td>
                <td>Ashton Cox</td>
                <td>Edinburgh</td>
                <td>210.00</td>
                <td>2.00</td>
  ...

JavaScript

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

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