JSFiddle - React, Tailwind, and code Playground

HTML

<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.default.min.css">
<link rel="stylesheet" href="http://cdn.kendostatic.com/2012.2.710/styles/kendo.common.min.css">
 <table id="grid">
    <thead>
        <tr>
            <th data-field="ShortName">Short Name</th>
            <th data-field="Site">Site</th>
        </tr>
    </thead>
    <tbody>
         <tr>
            <td>Smith</td> 
            <td>Live.com</td> 
         </tr>
         <tr>
            <td>Mery</td>
            <td>Live.com</td>
         </tr>
          <tr>
            <td>Albert</td>
            <td>Yahoo.com</td>
         </tr>
          <tr>
            <td>John</td>
            <td>Google.com</td> 
         </tr>
        <tr>
            <td>Peter</td>
            <td>Google.com</td>
         </tr>
    </tbody>
 </table>

JavaScript

$("#grid").kendoGrid({
    dataSource: { group: { field: "Site" } },
    groupable: true,
    scrollable: true,
    sortable: true,
    filterable: true
});