JSFiddle - React, Tailwind, and code Playground

by Cody Lindley

HTML

<link rel="stylesheet" href="http://cdn.kendostatic.com/2014.2.903/styles/kendo.common.min.css">
<script src="http://cdn.kendostatic.com/2014.2.903/js/kendo.all.min.js"></script>
<link rel="stylesheet" href="http://cdn.kendostatic.com/2014.2.903/styles/kendo.uniform.min.css">
<div id="grid"></div>

CSS

.k-grid table {
   table-layout: fixed;
}

.k-grid tbody tr{
    height: 50px;
}
 
.k-grid td{
    white-space: nowrap;
    text-overflow: ellipsis;
}

JavaScript

$(document).ready(function () {
     $("#grid").kendoGrid({
         dataSource: {
             type: "odata",
             transport: {
                 read: "http://demos.telerik.com/kendo-ui/service/Northwind.svc/Customers"
             },
             pageSize: 20
         },
         height: 550,
         groupable: true,
         sortable: true,
         pageable: {
             refresh: true,
             pageSizes: true,
             buttonCount: 5
         },
         columns: [{
             field: "ContactName",
             title: "Contact Name",
             width: 200
         }, {
             field: "ContactTitle",
             title: "Contact Title"
         }, {
             field: "CompanyName",
             title: "Company Name"
         }, {
             field: "Country",
             width: 150
         }]
     });
 });