JSFiddle - React, Tailwind, and code Playground

HTML

<link rel="stylesheet" href="http://cdn.kendostatic.com/2013.3.1119/styles/kendo.common.min.css">
<link rel="stylesheet" href="http://cdn.kendostatic.com/2013.3.1119/styles/kendo.bootstrap.min.css">
<script src="http://cdn.kendostatic.com/2013.3.1119/js/kendo.all.min.js"></script>
<h3>Grid A</h3>
<div id="grid" data-role="grid" data-bind="source: pagedItems" data-columns="[{field: 'id'}, {field: 'name'}, {field:'index()'}, {field: 'quantity'}]" data-pageable="true"></div>


<h3>Grid B</h3>
<div id="grid-two" data-role="grid" data-bind="source: allItems" data-columns="[{field: 'id'}, {field: 'name'}, {field:'index()'}, {field: 'quantity'}]"></div>

<h3>Grid C</h3>
<div id="grid-three" data-role="grid" data-bind="source: quantityItems" data-columns="[{field: 'id'}, {field: 'name'}, {field:'index()'}, {field: 'quantity'}]"></div>

JavaScript

var items = new kendo.data.ObservableArray([
    { id: 100, name: "Leonardo", quantity: 1350.75 },
    { id: 130, name: "Rafael", quantity: 0 },
    { id: 146, name: "Donatello", quantity: 3567.18 },
    { id: 151, name: "Miguel Angel", quantity: 0 }
]);

var commonSchema = {
    model: {
        id: 'id',
        fields: {
            id: { type: 'number' },
            name: { type: 'string' },
            quantity: { type: 'number' }
        },
        index: function () { 
            return items.indexOf(this) + 1; 
        }
    }
};


var viewModel = kendo.observable({
    pagedItems: new kendo.data.DataSource({
        data: items,
        schema: commonSchema,
        page: 1,
        pageSize: 2
    }),
    allItems: new kendo.data.DataSource({
        data: items,
        schema: commonSchema
    }),
    quantityItems: new kendo.data.DataSource({
        data: items,
        schema: commonSchema,
        filter: { field: 'quantity', operator: 'gt', value: 0 }
    })
});

kendo.bind($('body'), viewModel);