JSFiddle - React, Tailwind, and code Playground
HTML
<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">
<script src="https://dl.dropbox.com/sh/g3mwk8l5zxf23ps/HjMEpNqISw/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="https://dl.dropbox.com/sh/g3mwk8l5zxf23ps/fOib3plRD-/css/bootstrap.min.css">
<link rel="stylesheet" href="https://dl.dropbox.com/sh/g3mwk8l5zxf23ps/ldPn1HSDwI/css/bootstrap-responsive.min.css">
<script src="http://cdn.kendostatic.com/2013.1.319/js/kendo.all.min.js"></script>
<div class="content">
<div class="table"></div>
</div>
CSS
.k-state-selected a {
color: #FFF;
}
.k-sparkline .k-tooltip table {
table-layout: auto;
width: auto;
}
.k-sparkline .k-tooltip table td {
border-left-width: medium;
text-overflow: clip;
}
.k-sparkline .k-tooltip table td, .k-sparkline .k-tooltip table th {
border-width: 0;
}
.k-grid td {
overflow: visible !important;
}
#sparkline .k-grid-content {
overflow: visible !important;
}
JavaScript
$(document).ready(function () {
var dataSource = new kendo.data.DataSource({
transport: {
read: {
url: 'https://dl.dropbox.com/s/2wysahubqxfovsa/document',
dataType: 'json',
type: 'get',
cache: false
},
},
batch: false,
pageSize: 10,
schema: {
model: {
fields: {
Id: {
editable: false,
nullable: true
},
SSID: {
type: "string",
validation: {
required: true
}
},
MAC: {
type: "string",
validation: {
required: true,
min: 1
}
},
IP: {
type: "string"
},
UserName: {
type: "string",
validation: {
min: 0,
required: true
}
},
Password: {
type: "string",
validation: {
min: 0,
required: true
}
},
Brand: {
type: "string",
validation: {
...