JSFiddle - React, Tailwind, and code Playground

by psot98

HTML

<script src="&lt;script src=&quot;https://dl.dropbox.com/s/r2vask8otuu8h72/jquery.js&quot;&gt;&lt;/script&gt;"></script>
<script src="  &lt;script src=&quot;https://dl.dropboxusercontent.com/s/7tsdmsoyohiy7qe/kendo.window.min.js&quot;&gt;&lt;/script&gt;"></script>
<script src="&lt;script src=&quot;https://dl.dropbox.com/s/td863b2klpzl73s/kendo.web.min.js&quot;&gt;&lt;/script&gt;"></script>
 <script%20src="https://dl.dropbox.com/s/r2vask8otuu8h72/jquery.js"></script>
<script%20src="https://dl.dropboxusercontent.com/s/7tsdmsoyohiy7qe/kendo.window.min.js"></script>
<script%20src="https://dl.dropbox.com/s/td863b2klpzl73s/kendo.web.min.js"></script>
<script id="client-row-template" type="text/x-kendo-template">

      <tr role="row" class="k-alt" data-uid="#= uid #">

                 <td role="gridcell">#= Mac #</td>
                 <td role="gridcell" >#=   RadioName #</td>

                 <td role="gridcell" >  <a href="http://#= ApIp #" target="_blank">#=ApName#</a>   </td>
                 <td role="gridcell" >  <a href="http://#= RemoteIp #" target="_blank">#=RemoteIp#</a>   </td>

                 <td role="gridcell" > <a href="#= AccountingId #" target="_blank" > #= AccountingName # </a> </td>
                 <td role="gridcell" >#=  TX #</td>
                 <td role="gridcell" >#=  RX #</td>
                  <td role="gridcell" >#= Signal #</td>
                  <td role="gridcell" >#= Uptime #</td>
                  <td role="gridcell">
                         <span class="spark" data-inrate="#= InRateHistory #"  >   </span>
                     </td>

                  <td >  <a class="k-button k-button-icontext k-grid-edit" href="\#"><span class="k-icon k-edit"></span>Edit</a></td>
        </tr>
    </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>
     ...

CSS

<link%20href="https://dl.dropbox.com/s/picncks1k0ck9o8/styles.css"%20rel="stylesheet">
<link%20href="https://dl.dropbox.com/s/p94doltbpn9khdu/themes.css"%20rel="stylesheet">
<link%20href="https://dl.dropboxusercontent.com/s/j9t4fyx1azprgyq/kendo.default.min.css"%20rel="stylesheet"%20/>
<link%20href="https://dl.dropbox.com/s/p0992yacp2whikj/kendo.common.min.css"%20rel="stylesheet"%20/>
<link%20href="https://dl.dropbox.com/s/fyxdfbd2fllso6t/base.css"%20rel="stylesheet"%20/>

JavaScript

<script>

        $(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,...