JSFiddle - React, Tailwind, and code Playground

HTML

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

JavaScript

var products = [{
    ProductId : 1,
    ProductActive : 1
}, {
    ProductId : 2,
    ProductActive : 0
}];

$(document).ready(function () {
    
    var dataSource = new kendo.data.DataSource({
        pageSize: 20,
        data: products,
        autoSync: true,
        schema: {
            model: {
                id: "ProductId",
                fields: {
                    ProductID: {
                        editable: false,
                        nullable: true
                    },
                    ProductActive: {
                        type: "boolean",
                        editable: true,
                        validation: { required: false },
                        parse: function(value) {
                            return !!value;
                        }
                    }
                }
         }
     }
    });

    $("#grid").kendoGrid({
       dataSource: dataSource,
       pageable: true,
       height: 430,
       columns: [
           {field:"ProductId",title:"Id" },
           { field: "ProductActive", title: "ProductActive", template: "#= !!ProductActive #" }
       ],
       editable: true
    });
});