JSFiddle - React, Tailwind, and code Playground

HTML

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

JavaScript

var dataItem = {};
var columns = [];
    
for (var i = 0; i < 20; i++) {
  dataItem['col' + i] = i;
  columns.push( {
    field: 'col' + i,
    width: 80,
      filterable: true,
      type: 'number'
      
  } );
}



$("#grid").kendoGrid(
  {
    scrollable:true,
    columns: columns,
      filterable: true,
    dataSource: [dataItem]
  })