JSFiddle - React, Tailwind, and code Playground

by Ignacio Fuentes

HTML

<style>html { font-size: 14px; font-family: Arial, Helvetica, sans-serif; }</style>
<title></title>
<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>

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

    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:...