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>
<div id="grid"></div>
JavaScript
$(document).ready(function() {
$("#grid").kendoGrid({
dataSource: {
type: "odata",
transport: {
read: "http://demos.telerik.com/kendo-ui/service/Northwind.svc/Products"
},
schema:{
model: {
fields: {
UnitsInStock: { type: "number" },
ProductName: { type: "string" },
UnitPrice: { type: "number" },
UnitsOnOrder: { type: "number" },
UnitsInStock: { type: "number" }
}
}
},
pageSize: 7,
group: {
field: "UnitsInStock", aggregates: [
{ field: "ProductName", aggregate: "count" },
{ field: "UnitPrice", aggregate: "sum"},
{ field: "UnitsOnOrder", aggregate: "average" },
{ field: "UnitsInStock", aggregate: "count" }
]
},
aggregate: [ { field: "ProductName", aggregate: "count" },
{ field: "UnitPrice", aggregate: "sum" },
{ field: "UnitsOnOrder", aggregate: "average" },
{ field: "UnitsInStock", aggregate: "min" },
{ field: "UnitsInStock", aggregate: "max" }]
},
sortable:...