JSFiddle - React, Tailwind, and code Playground

by inikolova

HTML

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

JavaScript

var uids = [];

var products = [{
    "ProductID": 1,
    "ProductName": "Chai",
    "Category": "Beverages",
    "UnitPrice": "18.00"},
{
    "ProductID": 2,
    "ProductName": "Chang",
    "Category": "Beverages",
    "UnitPrice": "19.00"},
{
    "ProductID": 3,
    "ProductName": "Aniseed Syrup",
    "Category": "Condiments",
    "UnitPrice": "10.00"},
{
    "ProductID": 4,
    "ProductName": "Chef Anton's Cajun Seasoning",
    "Category": "Condiments",
    "UnitPrice": "22.00"},
{
    "ProductID": 5,
    "ProductName": "Chef Anton's Gumbo Mix",
    "Category": "Condiments",
    "UnitPrice": "21.35"},
{
    "ProductID": 6,
    "ProductName": "Grandma's Boysenberry Spread",
    "Category": "Condiments",
    "UnitPrice": "25.00"}];

$(document).ready(function() {

    var dataSource = new kendo.data.DataSource({
        pageSize: 30,
        data: products,
        autoSync: true,
        schema: {
            model: {
                id: "ProductID",
                fields: {
                    ProductID: {
                        editable: false,
                        nullable: true
                    },
                    ProductName: {
                        type: "string"
                    },
                    Category: {
                        type: "string",
                        validation: {
                            required: true
                        }
                    },
                    UnitPrice: {
                        type: "number",
                        validation: {
                            min: 0,
                            required: true
                        }
                    }
                }
            }
        }
    });

    $("#grid").kendoGrid({
        dataSource: dataSource,
        pageable: true,
        height: 460,
        toolbar: ["create"],
        columns: [
            {
            field: "ProductName",
            title: "Product Name"},
        {
            field: "Category",
   ...