JSFiddle - React, Tailwind, and code Playground

HTML

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

JavaScript

var data = '<Root><Rows><Category Name="Professional Staff" ID="Professional Staff">Professional Staff</Category><Col1 Name="Cost" ID="Cost">53599982</Col1><Col2 Name="Ratio" ID="Ratio">23.39</Col2><Col3 Name="Headcount" ID="Headcount">808</Col3></Rows><Rows><Category Name="Management" ID="Management">Management</Category><Col1 Name="Cost" ID="Cost">189812516</Col1><Col2 Name="Ratio" ID="Ratio">29.73</Col2><Col3 Name="Headcount" ID="Headcount">1296</Col3></Rows></Root>';

var dataSource = new kendo.data.DataSource({
    data: data,
    schema: {
        type: "xml",
        data: "/Root/Rows",
        model: {
            fields: {
                Category: "Category/@Name",
                Cost: "Col1/text()"
            }
        }
    }
});

$("#grid").kendoGrid({
    dataSource: dataSource
});