JSFiddle - React, Tailwind, and code Playground

by Ignacio Fuentes

HTML

<link rel="stylesheet" href="https://kendo.cdn.telerik.com/2017.2.504/styles/kendo.common-bootstrap.min.css" />
<link rel="stylesheet" href="https://kendo.cdn.telerik.com/2017.2.504/styles/kendo.bootstrap.min.css" />
<link rel="stylesheet" href="https://kendo.cdn.telerik.com/2017.2.504/styles/kendo.bootstrap.mobile.min.css" />

<script src="https://kendo.cdn.telerik.com/2017.2.504/js/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.1/angular.min.js"></script>
<script src="https://kendo.cdn.telerik.com/2017.2.504/js/kendo.all.min.js"></script>

  <div id="example" ng-app="KendoDemos">
    <div ng-controller="MyCtrl">
      <kendo-grid options="mainGridOptions">
      </kendo-grid>
    </div>
  </div>

CSS

html {
    font-size: 14px;
    font-family: Arial, Helvetica, sans-serif;
  }

JavaScript

angular.module("KendoDemos", ["kendo.directives"])
      .controller("MyCtrl", function($scope) {

        var someFetchDataFunction = function(options) {
          var arbitraryJsonObject = {
            somePropertyTheGridMightNotNeed: "TEST",
            someOtherPropertyThatCameBackFromTheServer: "FOO",
            totalItems: 4,
            arbitraryDataProperty: [{
              FirstName: "John",
              LastName: "Doe"
            }, {
              FirstName: "Jane",
              LastName: "Doe"
            }, {
              FirstName: "Jameson",
              LastName: "Doe"
            }, {
              FirstName: "Johnson",
              LastName: "Doe"
            }, ]
          }
          $.ajax('/echo/json/', {
            method: "POST",
            data: {
              json: JSON.stringify(arbitraryJsonObject)
            }
          }).done(options.success)
        }

        $scope.mainGridOptions = {
          pageable: true,
          dataSource: {
            pageSize: 2,
            schema: {
              data: "arbitraryDataProperty", //THIS IS IMPORTANT!
              total: "totalItems" //THIS IS IMPORTTANT!
            },
            transport: {
              read: someFetchDataFunction
            },
          },
          columns: [{
            field: "FirstName",
            title: "First Name",
            width: "120px"
          }, {
            field: "LastName",
            title: "Last Name",
            width: "120px"
          }]
        };
      })