JSFiddle - React, Tailwind, and code Playground

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>

CSS

.k-sparkline .k-tooltip table {
    table-layout: auto;
    width: auto;
}

.k-sparkline .k-tooltip table td {
    border-left-width: auto;
    text-overflow: clip;
}

.k-sparkline .k-tooltip table td,
.k-sparkline .k-tooltip table th {
    border-width: 0;
}

.k-grid td {
    overflow: visible !important;
}

.k-grid-content {
    overflow: visible !important;
}

JavaScript

$(document).ready(function () {

    $('.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,3,5,2,5,2,35,136,35,136,35,136,164,51,164,51,164,51,4"
            }
        	]
        },
        sortable: true,
        groupable: true,
        selectable: true,
        navigatable: true,
        height: 500,
        scrollable: true,
        pageable: true,

        columns: [{
            field: "Mac",
            title: "Mac",
            width: 170
        }, {
            field: "RadioName",
            title: "Radio",
            width: 150
        }, {
            field: "ApName",
            title: "Ap",
            width: 80,
            template: '<a href="http://#= ApIp #" target="_blank">#=ApName#</a>'
        }, {
            field: "RemoteIp",
            title: "Remote IP",
            width: 160,
            template: '<a href="http://#= RemoteIp #" target="_blank">#=RemoteIp#</a>'
        }, {
            field: "AccountingName",
            title: "Name",
            width: 130,
            template: '<a href="#= AccountingId #" target="_blank"> #= AccountingName # </a>'
        }, {
            field: "TX",
            title: "TX",
            width: 44
        }, {
            field: "RX",
            title:...