JSFiddle - React, Tailwind, and code Playground

HTML

<script src="http://demos.kendoui.com/content/shared/js/people.js"></script>
<script src="http://cdn.kendostatic.com/2012.2.710/js/kendo.all.min.js"></script>
<link rel="stylesheet" href="http://cdn.kendostatic.com/2012.2.710/styles/kendo.common.min.css">
<link rel="stylesheet" href="http://cdn.kendostatic.com/2012.2.710/styles/kendo.default.min.css">
<h1>Incell editing mode</h1>
<div id="grid"></div>
<h1>Inline editing mode</h1>
<div id="grid-inline-edit"></div>
<h1>Popup editing mode</h1>
<div id="grid-popup-edit"></div>

JavaScript

$(document).ready(function() {
		$("#grid").kendoGrid({
			dataSource: {
				data: createRandomData(80),
				schema: {
					model: {
						fields: {
							Id: { type: "number" },
							FirstName: { type: "string" },
							LastName: { type: "string" },
							City: { type: "string" },
							Title: { type: "string" },
							IsCustomer: { type: "boolean" },
							BirthDate: { type: "date" },
							Age: { type: "number" }
						}
					}
				},
				pageSize: 10
			},
			height: 400,
			scrollable: true,
			sortable: true,
			pageable: true,
			groupable: {
				messages: {
					empty: "Custom message text"
				}
			},
			editable: {
				mode: "incell",
				update: true,
				destroy: true,
				confirmation: "Are you sure you want to remove this item?" //text for the confirmation message
			},
			columns: [
				{
					field: "Id",
					title: "ID",
					width: "60px"
				},
				{
					field: "FirstName",
					title: "First Name"
				},
				{
					field: "LastName",
					title: "Last Name"
				},
				{
					field: "City"
				},
				{
					field: "Title"
				},
				{
					field: "IsCustomer",
					title: "Customer",
					width: "100px"
				},
				{
					field: "BirthDate",
					title: "Birth Date",
					template: '#= kendo.toString(BirthDate,"MM/dd/yyyy") #'
				},
				{
					field: "Age",
					width: "60px"
				},
				// adding command in the columns, name - the command name, text - text to be set on the button
				{
					command: { name: "destroy", text: "Custom Delete" },
					title: "&nbsp;",
					width: "160px"
				}
			],
			toolbar: [
				//name - name of the available commands, text - text to be set on the button
				{ name: "create", text: "Custom Create" },
				{ name: "save", text: "Custom Save" },
				{ name: "cancel", text: "Custom Cancel" }
			],
			// filter menu settings
			filterable: {
				name: "FilterMenu",
				extra: true, // turns on/off the second filter option
				messages: {
					info: "Custom header text:", // sets the text on top of the...