JSFiddle - React, Tailwind, and code Playground

HTML

<table id="tblAttendance" class="table table-bordered table-striped" style="width:100%;font-size:90%">
                                <thead class="thead-light">
                                    <tr>
                                        <th>
                                            Date
                                        </th>
                                        <th>
                                            Depot Name
                                        </th>
                                        <th>
                                            Employee Name
                                        </th>
                                        <th>
                                            Clocked In
                                        </th>
                                        <th>
                                            Clocked Out
                                        </th>
                                        <th>
                                            N. Attendance
                                        </th>
                                        <th>
                                            Day Off
                                        </th>

                                        <th>
                                            Sick
                                        </th>
                                        <th>
                                            Holiday
                                        </th>
                                        <th>
                                            Maternity
                                        </th>
                                        <th>
                                            Time Off
                                        </th>
                                        <th>
                                            Time Off Hrs
                                        </th>
                                        <th>
       ...

JavaScript

<script>
    $(document).ready(function () {
        
        var report = {};
        report.FromDate = "@Model.FromDate"
        report.ToDate = "@Model.ToDate"
        report.EmployeeIds = "@Model.EmployeeIds"
         

        $('#tblAttendance').DataTable({
            order: [
                [1, 'asc'],
                [2, 'asc'],
                [16, 'asc'],
            ],
            
            "ajax": {
                "url": "/Report/AttendanceReportData",
                "data": report,
                "dataSrc": function (json) {
                    return JSON.parse(json);
                }
            },
            
            "columns": [
                { "data": "FromDate" },
                { "data": "DepotName" },
                { "data": "EmployeeName" },
                { "data": "ClockedIn" },
                { "data": "ClockedOut" },
                { "data": "IsNormalAttendance" },
                { "data": "IsDayOffMarked" },
                { "data": "IsSickMarked" },
                { "data": "IsHolidayMarked" },
                { "data": "IsMaternity" },
                { "data": "IsTimeOff" },
                { "data": "TimeOffHrs" },
                { "data": "IsDeducted" },
                { "data": "DueHrs" },
                { "data": "ExtraTimeHrs" },
                { "data": "Description" },
                { "data": "SortDate" }
                
            ],

           
            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
            //    },
            //    {
           ...