JSFiddle - React, Tailwind, and code Playground

by gurkavcu

HTML

<script src="http://www.datatables.net/download/build/jquery.dataTables.js"></script>
<script src="https://github.com/jquery/jquery-tmpl/raw/master/jquery.tmpl.js"></script>
<button>Draw</button>
<div id="Tags"></div>
<script id="TagsTemplate" type="text/html">
    <table id="Table">
        <thead>
            <tr>
                <th>Nombre</th>
                <th>Valor</th>
                <th>Estado</th>
            </tr>
        </thead>
        <tbody>
            {{each rows}}
            <tr id="TagRow_${Name}">
                <td>${Name}</td>
                <td>${Value}</td>
                <td>${State}</td>
            </tr>
            {{/each}}
        </tbody>
    </table>
</script>

JavaScript

var dataTable;

    var data = [{
        Name: "A",
        Value: "B",
        State: "C"},
    {
        Name: "A1",
        Value: "B",
        State: "C"},
    {
        Name: "A2",
        Value: "B",
        State: "C"},
    {
        Name: "A3",
        Value: "B",
        State: "C"},
    {
        Name: "A1",
        Value: "B",
        State: "C"},
    {
        Name: "A2",
        Value: "B",
        State: "C"},
    {
        Name: "A3",
        Value: "B",
        State: "C"},
    {
        Name: "A1",
        Value: "B",
        State: "C"},
    {
        Name: "A2",
        Value: "B",
        State: "C"},
    {
        Name: "A3",
        Value: "B",
        State: "C"},
    {
        Name: "A1",
        Value: "B",
        State: "C"},
    {
        Name: "A2",
        Value: "B",
        State: "C"},
    {
        Name: "A3",
        Value: "B",
        State: "C"},
    {
        Name: "A1",
        Value: "B",
        State: "C"},
    {
        Name: "A2",
        Value: "B",
        State: "C"},
    {
        Name: "A3",
        Value: "B",
        State: "C"},
    {
        Name: "A1",
        Value: "B",
        State: "C"},
    {
        Name: "A2",
        Value: "B",
        State: "C"},
    {
        Name: "A3",
        Value: "B",
        State: "C"},
    {
        Name: "A1",
        Value: "B",
        State: "C"},
    {
        Name: "A2",
        Value: "B",
        State: "C"},
    {
        Name: "A3",
        Value: "B",
        State: "C"},
    {
        Name: "A4",
        Value: "B",
        State: "C"},
    {
        Name: "A5",
        Value: "B",
        State: "C"}];

    $('#Tags').html($('#TagsTemplate').tmpl({
        rows: data
    }));


    $.fn.dataTableExt.afnFiltering.push(

    function(oSettings, aData, iDataIndex) {

        if (dataTable != null && aData[0] == 'A1') {
            var tr = dataTable.fnGetNodes(iDataIndex);
            $(tr).css('background-color', '#F00');
        }

        return true;

   ...