JSFiddle - React, Tailwind, and code Playground

HTML

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8"/>
    <title>Kendo UI Snippet</title>

    <link rel="stylesheet" href="https://kendo.cdn.telerik.com/2017.3.913/styles/kendo.common.min.css"/>
    <link rel="stylesheet" href="https://kendo.cdn.telerik.com/2017.3.913/styles/kendo.rtl.min.css"/>
    <link rel="stylesheet" href="https://kendo.cdn.telerik.com/2017.3.913/styles/kendo.silver.min.css"/>
    <link rel="stylesheet" href="https://kendo.cdn.telerik.com/2017.3.913/styles/kendo.mobile.all.min.css"/>

    <script src="https://code.jquery.com/jquery-1.12.4.min.js"></script>
    <script src="https://kendo.cdn.telerik.com/2017.3.913/js/kendo.all.min.js"></script>
</head>
<body>
  
<div id="grid"></div>
<script>
$("#grid").kendoGrid({
  columns: [
    {
      field: "name",
     	template: "#=name.firstName#",
			sortable: {
                compare: nameComparator
      }
    },
     {
      field: "address",
     	template: "#=address.city#",
			sortable: {
                compare: addressComparator
      }
    },
    { field: "age" }
  ],
  dataSource: [
    { name: { firstName:"Jane", secoundName: "Ivanov"}, age: 30, address: { country:"Bulgaria", city: "Varna"} },
    { name: { firstName:"Stoqn", secoundName: "Petrov"}, age: 33, address: { country:"Bulgaria", city: "Sofia"} },
    { name: { firstName:"Ivan", secoundName: "Petrov"}, age: 33, address: { country:"Bulgaria", city: "Pernik"} },
    { name: { firstName:"Ivan", secoundName: "Petrov"}, age: 33, address: { country:"Bulgaria", city: "Silistra"} }
  ],
  sortable: {
    mode: "multiple"
  }
});
  
function nameComparator(a, b) {
    return a.name.firstName > b.name.firstName ? 1 : -1;
}

function addressComparator(a, b) {
    return a.address.city > b.address.city ? 1 : -1;
}
</script>
</body>
</html>