JSFiddle - React, Tailwind, and code Playground

by psot98

HTML

<link rel="stylesheet" href="https://dl.dropbox.com/s/picncks1k0ck9o8/styles.css">
<link rel="stylesheet" href="https://dl.dropbox.com/s/p94doltbpn9khdu/themes.css">
<link rel="stylesheet" href="https://dl.dropboxusercontent.com/s/j9t4fyx1azprgyq/kendo.default.min.css">
<link rel="stylesheet" href="https://dl.dropbox.com/s/p0992yacp2whikj/kendo.common.min.css">
<link rel="stylesheet" href="https://dl.dropbox.com/s/fyxdfbd2fllso6t/base.css">
<script src="https://dl.dropboxusercontent.com/s/7tsdmsoyohiy7qe/kendo.window.min.js"></script>
<script src="https://dl.dropbox.com/s/td863b2klpzl73s/kendo.web.min.js"></script>
<script src="https://dl.dropbox.com/s/viaszgvjy1ne04i/kendo.dataviz.sparkline.js"></script>
<link rel="stylesheet" href="https://dl.dropbox.com/s/smtz7dd2r6kd0wv/kendo.dataviz.css">
<script src="https://dl.dropbox.com/s/n7lx37fymscbcow/kendo.dataviz.js"></script>
<div class="span6 box gradient main_stting">
    <div class="dataTables_filter" id="txtSearch">
        <label>Search:
            <input type="text" aria-controls="DataTables_Table_0">
        </label>
    </div>
    <div class="title">
        <button class="btn ref" type="submit">Refresh</button>
         <h3></h3>

    </div>
    <div class="content">
        <div class="table"></div>
    </div>
</div>

JavaScript

$(document).ready(function () {

    //var ds = new kendo.data.DataSource({

    //    transport: {

    //        read: {

    //            url: '/api/clientssnapshot',
    //            dataType: 'json',
    //            type: 'get',
    //            cache: false

    //        },

    //    },
    //    batch: true,
    //    pageSize: 10,
    //    schema: {
    //        model: {
    //            fields: {
    //                Mac: { editable: false, nullable: true },
    //                RadioName: { type: "string", validation: { required: true } },
    //                ApName: { type: "string", validation: { required: true, min: 1 } },
    //                RemoteIp: { type: "boolean" },
    //                TX: { type: "number", validation: { min: 0, required: true } },
    //                RX: { type: "number", validation: { min: 0, required: true } },
    //                Signal: { type: "number", validation: { min: 0, required: true } },
    //                Uptime: { type: "number", validation: { min: 0, required: true } },
    //            }
    //        }
    //    }

    //});

    $('.table').kendoGrid({

        dataSource: {
            data: [{
                "Mac": "D4:CA:6D:28:D1:05",
                    "RadioName": "D4CA6D28D105",
                    "ApName": "Om11",
                    "ApIp": "10.20.0.100",
                    "TX": 48,
                    "RX": 54,
                    "Signal": -64,
                    "Uptime": 797452,
                    "InRate": 0,
                    "OutRate": 0,
                    "AccountingId": 759,
                    "AccountingName": "فرشاد صفایی زاده",
                    "RemoteIp": "188.121.123.56",
                    "IsValidInScan": true,
                    "Comments": null,
                    "ApScanId": 26173,
                    "InRateHistory": "0, 0, 0, 0, 2, 0, 2, 16, 96, 16, 96, 16, 96, 113, 31, 113, 31, 113, 31, 0",
                    "OutRateHistory": "0, 5,...