JSFiddle - React, Tailwind, and code Playground

HTML

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

JavaScript

var data = [
 { type: "names", name: "john", age: 12},
 { type: "names", name: "andy", age: 10},
 { type: "names", name: "sally", age: 11},
 { type: "toys", item: "bike", price: 69.99, color: "red"},
 { type: "toys", item: "yo-yo", price: 5.99, color: "blue"},
 { type: "toys", item: "football", price: 19.99, color: "brown"}
 ]; // - this data might be retrieved from server via $.ajax
 
$("#grid1").kendoGrid({
    dataSource: {
        data: data,
        filter: { field: "type", operator: "eq", value: "names" },
        pageSize: 2
    },    
    scrollable: false,
    sortable: true,
    pageable: true,
    columns: ["name", "age"]
})
.data("kendoGrid");  


$("#grid2").kendoGrid({
    dataSource: {
        data: data,
        filter: { field: "type", operator: "eq", value: "toys" }
    },    
    scrollable: false,
    sortable: true,
    columns: ["item", "price", "color"]
})
.data("kendoGrid");