JSFiddle - React, Tailwind, and code Playground

HTML

<script src="http://code.jquery.com/jquery-1.8.0.js"></script>
<script src="https://cdn.datatables.net/1.10.0/js/jquery.dataTables.js"></script>
<script src="http://cdn.datatables.net/fixedheader/2.1.0/js/dataTables.fixedHeader.js"></script>
<link rel="stylesheet" href="https://cdn.datatables.net/1.10.0/css/jquery.dataTables.css">
<link rel="stylesheet" href="http://cdn.datatables.net/fixedheader/2.1.0/css/dataTables.fixedHeader.css">
<body>    
    <h1>test</h1>
    <div id='filters' class='clear'>
        <div id='divLabel' class='floatLeft filterName'>
            <strong>Filter 1:</strong>
        </div>
        <div id='divF1'></div>
                
        <br />
        <div class='filterName floatLeft'>
            <strong>Filter 2:</strong>
        </div>
        <div id='divF2'></div>
        <div class='filterName floatLeft'>
            <strong>Filter 3:</strong>
        </div>
        <div id='divF3'></div>
    </div>            
    <div id='TableDiv' class='divAnimate clear'>                
        <table id='tableDt' class="display">  
            <tfoot id="tblFooter">
                <tr>
                    <th id="thTotals" colspan="3" style="text-align:right">Totals:</th>
                    <th></th>
                    <th></th>
                    <th></th>                                                      
                </tr>
            </tfoot>                  
        </table>
    </div>
</body>

CSS

.clear
        {
            clear: both;
        }    
        #filterOptions
        {
            float: left;            
        }
        #filters
        {
            padding-left: 50px;
        }  
        .floatLeft
        {
            float:left;
            padding-right: 20px;
            width: 150px;
        }

JavaScript

var dtBuilt = false;
var data;
var dt;
var chartsBuilt = false;

$(document).ready(function () {
    refresh();
});

function rebuildData() {
    //build some random data
    data = new Array();
    max = 10;
    
    for (i = 0; i < 5; i++) {
        filter1 = "f1-" + i;
        for (j = 0; j < 5; j++) {
            filter2 = "f2-" + j;
            for (k = 0; k < 5; k++) {
                filter3 = "f3-" + k;
                for (l = 0; l < 30; l++) {
                    data.push({
                        'f1': filter1, 
                        'f2': filter2, 
                        'f3': filter3, 
                        'v1': Math.random() * max, 
                        'v2': Math.random() * max,
                        'v3': Math.random() * max
                    });
                }
            }
        }
    }
}

function refresh() {
    rebuildData()
    initF1();
    
}

function refreshTable() {
    var f1 = $('input[name=F1]:checked').val();
    var f2 = new Array();
    $('#divF2 input:checked').each(function () {
        f2.push(this.name);
    });
    var f3 = new Array();
    $('#divF3 input:checked').each(function () {
        f3.push(this.name);
    });
    
    var display = getRcds(f1, f2, f3);
    
    var tableData = new Array()
    
    for (m in display) {
        r = display[m]
        tableData.push([r.f1, r.f2, r.f3, r.v1, r.v2, r.v3]);
    }
    
    if (!dtBuilt) {
        dt = $('#tableDt').dataTable({
            'data': tableData,
            'columns': [
                { "title": "Filter1" },
                { "title": "Filter2" },
                { "title": "Filter3" },
                { "title": "Value1" },
                { "title": "Value2" },
                { "title": "Value3" }
            ],
            "bPaginate": false,
            //"bAutoWidth": false,
            //"info": false,
            //"aaSorting": [],
            //"searching": false,
            "footerCallback": function (row, data, start, end,...