JSFiddle - React, Tailwind, and code Playground

by saes

HTML

<head>
	<base href="https://demos.telerik.com/kendo-ui/grid/local-data-binding">
	<style>html { font-size: 14px; font-family: Arial, Helvetica, sans-serif; }</style>
	<title></title>
	<link rel="stylesheet" href="https://kendo.cdn.telerik.com/2018.3.1017/styles/kendo.common-material.min.css" />
	<link rel="stylesheet" href="https://kendo.cdn.telerik.com/2018.3.1017/styles/kendo.material.min.css" />
	<link rel="stylesheet" href="https://kendo.cdn.telerik.com/2018.3.1017/styles/kendo.material.mobile.min.css" />
	<script src="https://kendo.cdn.telerik.com/2018.3.1017/js/jquery.min.js"></script>
	<script src="https://kendo.cdn.telerik.com/2018.3.1017/js/kendo.all.min.js"></script>
</head>
<body>
	<div id="example">
		<div id="grid"></div>
	</div>
</body>

JavaScript

var products = [{
	"Path's Server SFC" : "My product",
	UnitsInStock : 39,
	"&te": 10,
}];
$(document).ready(function() {
	$("#grid").kendoGrid({
		dataSource: {
			data: products,
			schema: {
				model: {
					fields: {
						'["Path\'s Server SFC"]': { type: "string" },
						UnitsInStock: { type: "number" }
					}
				}
			},
			pageSize: 20
		},
		height: 550,
		scrollable: true,
		sortable: true,
		filterable: true,
		pageable: {
			input: true,
			numeric: false
		},
		columns: [
			{field: '["Path\'s Server SFC"]', title: "Product Name"},
			{ field: "UnitsInStock", title: "Units In Stock" }
		]
	});
});