JSFiddle - React, Tailwind, and code Playground

by Dominic Myers

HTML

<script src="http://ajax.aspnetcdn.com/ajax/jquery.dataTables/1.9.4/jquery.dataTables.min.js"></script>
<link rel="stylesheet" href="http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css">
<script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>
<link rel="stylesheet" href="http://ajax.aspnetcdn.com/ajax/jquery.dataTables/1.9.4/css/jquery.dataTables_themeroller.css">
<link rel="stylesheet" href="http://ajax.aspnetcdn.com/ajax/jquery.dataTables/1.9.4/css/jquery.dataTables.css">
<script src="//cdn.datatables.net/plug-ins/1.10.11/sorting/currency.js"></script>
<div id="table_container">
    <table id="products"></table>
</div>

CSS

tr.row_selected td{background-color:red !important;}

JavaScript

var oTable = $("#products").dataTable({
        "aaData": [
            [1, "car1", "$40.50"],
            [2, "car2", "$20.91"],
            [3, "car3", "$10.00"]
        ],
        "aaSorting":[[2, 'asc']],
        "aoColumns": [{
            "sWidth": "70%",
            "sClass": "center",
            "bSortable": false,
            "sTitle":"id"
        }, {
            "sWidth": "20%",
            "sClass": "center",
            "bSortable": false,
            "sTitle":"name"
        }, {
            "sWidth": "10%",
            "sClass": "center",
            "bSortable": true,
            "sType": "currency",
            "sTitle":"price"
        }]
    
    });