JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
    <link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/themes/smoothness/jquery-ui.css">
    <link rel="stylesheet" href="https://code.jquery.com/ui/1.10.2/themes/smoothness/jquery-ui.css" />
    <script src="https://code.jquery.com/jquery-1.9.1.js"></script>
    <script src="https://code.jquery.com/ui/1.10.2/jquery-ui.js"></script>

    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.2/css/bootstrap.css">
    <link rel="stylesheet" href="https://cdn.datatables.net/1.10.16/css/jquery.dataTables.css">
    <link rel="stylesheet" href="https://davidstutz.github.io/bootstrap-multiselect/dist/css/bootstrap-multiselect.css">

    <script src="https://cdn.datatables.net/1.10.16/js/jquery.dataTables.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.2/js/bootstrap.js"></script>
    <script src="https://davidstutz.github.io/bootstrap-multiselect/dist/js/bootstrap-multiselect.js"></script>

<div id="wrap" align="center" > 

   
	<!-- content-wrap starts here -->	
	<div id="content-wrap">  
	  			
                <div id="filters">
                    <div id="daterange_div">
                        <tr>
                            <td>Start Date:</td>
                            <td><input name="min" id="min" type="text"></td>
                        </tr>
                        <tr>
                            <td>End Date:</td>
                            <td><input name="max" id="max" type="text"></td>
                        </tr>
                        <tr>
                            <td class="slider">
                                <label>  Age Filter: </label>
                                <input type="text" id="live_range_val" readonly style="border:0; color:#f6931f; font-weight:bold; width:80px">
                            </td>
                      ...

JavaScript

var dataSet = [];
    var col =[];

    //Call data and setup table
    var jsonData = $.ajax({
        url: "https://dl.dropboxusercontent.com/s/177w2xpqw6rd4fw/table_json.txt?dl=1",
        dataType:"json",
        async: false,
        success: function(msg){
            msg.rows.map((x)=>{
                dataSet.push([x.c[0].v, x.c[1].v, x.c[2].v, x.c[3].v, x.c[4].v, x.c[5].v, x.c[6].v, x.c[7].v, x.c[8].v, x.c[9].v, x.c[10].v])
            });
            msg.cols.map((c)=>{
                col.push({title: c.label})
            });

        //Setup datatable with base options
        $('#table').DataTable({
          data: dataSet,
          columns: col,
          order: [0,'desc'], //Order by date column in descending fashion
          //scrollX: false,
          //scrollY: "500px",
          "bJQueryUI": false,
          //responsive: true,
          paginate: true,
          autoWidth: false,
          info: true,
          columnDefs: [
            { "width": "6%", "targets": 0 },
            { "width": "40%", "targets": 10 }
            ]
        });
      }
    });
    
    
    var val_range; //Declare age range slider
    
    $.fn.dataTable.ext.search.push(
        //Setup age slider with basic properties
        function( settings, data, dataIndex ) {
            var min = parseFloat(val_range.slider( "values", 0 ));
            var max = parseFloat(val_range.slider( "values", 1 ));
            var col = parseFloat( data[2] ); // data[number] = column number
            if (( isNaN( min ) && isNaN( max ) ) ||
                ( isNaN( min ) && col <= max ) ||
                ( min <= col   && isNaN( max ) ) ||
                ( min <= col   && col <= max ) )
           {
                return true;
            }
            return false;
        },
        
        //Setup date range with basic properties
        function (settings, data, dataIndex) {
            var min = $('#min').datepicker("getDate");
            var max =...