JSFiddle - React, Tailwind, and code Playground

by vzsoft

HTML

<script src="https://kendo.cdn.telerik.com/2017.3.1026/js/kendo.all.min.js"></script>
<link rel="stylesheet" href="https://kendo.cdn.telerik.com/2018.1.221/styles/kendo.common.min.css">
<link rel="stylesheet" href="https://kendo.cdn.telerik.com/2018.1.221/styles/kendo.default.min.css">
<div id="grid"></div>

JavaScript

var data =  new kendo.data.DataSource({
  serverPaging: false,
  pageSize: 5, 
  data: [
  	{Col1: 'خصوصیات', Col2: 'test1', Col3: 'test1', Col4: 'test1'}, 
  	{Col1: 'بانک', Col2: 'test1', Col3: 'test1', Col4: 'test1'}, 
  	{Col1: 'سس', Col2: 'test1', Col3: 'test1', Col4: 'test1'}, 
  	{Col1: 'کمک', Col2: 'test1', Col3: 'test1', Col4: 'test1'}, 
  	{Col1: 'سیب', Col2: 'test1', Col3: 'test1', Col4: 'test1'}, 
  	{Col1: 'علی', Col2: 'test1', Col3: 'test1', Col4: 'test1'}, 
  	{Col1: 'test7', Col2: 'test1', Col3: 'test1', Col4: 'test1'}, 
  	{Col1: 'test8', Col2: 'test1', Col3: 'test1', Col4: 'test1'}, 
  ]
});

$('#grid').kendoGrid({
	dataSource: data, 
  toolbar: ["pdf"],
  columns: [
    {
      field: "Col1",
      title: "Col1",
      width: "120px"
    }, {
      field: "Col2",
      title: "Col2",
      width: "120px"
    }, {
      field: "Col3",
      title: "Col3",
      width: "120px"
    }, {
      field: "Col4",
      title: "Col4",
      width: "120px"
    }
  ],
  pageable: true,
  dataBound: function () {
    this.expandRow(this.tbody.find("tr.k-master-row").first());
  }
});