JSFiddle - React, Tailwind, and code Playground

by John Scott

HTML

<script src="http://dev.grubstub.co.uk/js/datatables/jquery.dataTables.min.js"></script>
<script src="http://dev.grubstub.co.uk/js/datatables/extras/TableTools.min.js"></script>
<script src="http://dev.grubstub.co.uk/js/FixedColumns.js"></script>
<script src="http://dev.grubstub.co.uk/js/responsive-tables/responsive-tables.js"></script>
<script src="http://dev.grubstub.co.uk/js/datatables/DT_bootstrap.js"></script>
<script src="http://dev.grubstub.co.uk/js/bootstrap.js"></script>
<link rel="stylesheet" href="http://dev.grubstub.co.uk/css/responsive-tables.css">
<link rel="stylesheet" href="http://dev.grubstub.co.uk/css/DT_bootstrap.css">
<link rel="stylesheet" href="http://dev.grubstub.co.uk/css/stilearn.css">
<link rel="stylesheet" href="http://dev.grubstub.co.uk/css/bootstrap-responsive.css">
<link rel="stylesheet" href="http://dev.grubstub.co.uk/css/stilearn-helper.css">
<link rel="stylesheet" href="http://dev.grubstub.co.uk/css/bootstrap.css">
<link rel="stylesheet" href="http://dev.grubstub.co.uk/css/GSstyles.css">
<table id="teams" class="table table-bordered table-striped responsive">
    <thead>
        <tr>
            <th rowspan="2">#</th>
            <th rowspan="2" class="tn">Team</th>
            <th rowspan="2">Quota</th>
            <th rowspan="2">Total</th>
            <th colspan="3" scope="col">Mon 19</th>
            <th colspan="3" scope="col">Tue 20</th>
            <th colspan="3" scope="col">Wed 21</th>
            <th colspan="3" scope="col">Thu 22</th>
        </tr>
        <tr>
            <th class="mealCol" id="_meal1317"><a title="Breakfast">Br</a>
            </th>
            <th class="mealCol" id="_meal1338"><a title="Lunch">Lu</a>
            </th>
            <th class="mealCol" id="_meal1353"><a title="Dinner">Di</a>
            </th>
            <th class="mealCol" id="_meal1319"><a title="Breakfast">Br</a>
            </th>
            <th class="mealCol" id="_meal1339"><a title="Lunch">Lu</a>
            </th>
           ...

JavaScript

var t_teams = $('#teams').dataTable({
        "sDom": 'T<"clear">lfrtip',
            "oTableTools": {
            "sSwfPath": "/js/datatables/swf/copy_csv_xls_pdf.swf",
                "aButtons": ["copy", "csv", "print"]
        },
            "aoColumnDefs": [{
            "mRender": function (data, type, row) {
                return '<a title="View" style="cursor:pointer;" onclick="doCasc(' + row[0] + ')" >' + data + '</a>';
            },
            "aTargets": ["tn"]
        }],
            "sPaginationType": "bootstrap",
            "sLengthMenu": "_MENU_ records per page",
            "sScrollX": "100%",
            "sScrollXInner": "170%",
            "bScrollCollapse": true
    });


    new FixedColumns(t_teams, {
        "iLeftColumns": 4,
            "iLeftWidth": 350
    });