JSFiddle - React, Tailwind, and code Playground
HTML
<script src="http://cdn.kendostatic.com/2013.2.716/js/kendo.web.min.js"></script>
<link rel="stylesheet" href="http://cdn.kendostatic.com/2013.2.716/styles/kendo.common.min.css">
<link rel="stylesheet" href="http://cdn.kendostatic.com/2013.2.716/styles/kendo.default.min.css">
<div id="grid1"></div>
JavaScript
var grid = $('#grid1').kendoGrid({
selectable: true,
editable: true,
sortable: true,
pageable: true,
dataSource: {
pageSize: 10,
schema: {
model: {
id: "Id",
fields: {
ItemNumber: {
editable: false,
type: "string"
},
Color: {
editable: false,
type: "string"
},
BatchNumber: {
editable: false,
type: "string"
},
Quantity: {
editable: false,
type: "number"
},
Width: {
editable: false,
type: "number"
},
UOM: {
editable: false,
type: "number"
},
Allocated: {
editable: false,
type: "number"
}
}
}
},
data: [{
Id: 1,
ItemNumber: "1",
ItemDescription: "Item Description 1",
Color: "Black",
BatchNumber: "Batch Number 1",
Quantity: 200,
Width: 50,
UOM: "YRD",
Allocated: 100
}, {
Id: 2,
ItemNumber: "2",
ItemDescription: "Item Description 2",
Color: "Black",
BatchNumber: "Batch Number 2",
Quantity: 200,
Width: 50,
UOM: "YRD",
Allocated: 110
}, {
Id: 3,
ItemNumber: "3",
ItemDescription: "Item Description 3",
Color: "Black",
BatchNumber: "Batch Number 3",
...