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.1407/js/kendo.all.min.js"></script>
<div id="grid">
</div>

JavaScript

var data = [{
    "Description": "1511",
    "Partner": "Partner no 1.",
    "Payable": 1795.80},
{
    "Description": "1384 ",
    "Partner": "Partner no 1.",
    "Payable": 16143.75},
{
    "Description": "1396a ",
    "Partner": "Partner no 1.",
    "Payable": 1714563.27},
{
    "Description": "1432 ",
    "Partner": "Partner no 1.",
    "Payable": 18450.00},
{
    "Description": "1496 A ",
    "Partner": "Partner no 2.",
    "Payable": 23628.12},
{
    "Description": "1508 ",
    "Partner": "Partner no 2.",
    "Payable": 4090.37},
{
    "Description": "1509 ",
    "Partner": "Partner no 1.",
    "Payable": 6396.00},
{
    "Description": "1513 ",
    "Partner": "Partner no 2.",
    "Payable": 10847.95},
{
    "Description": "1514 ",
    "Partner": "Partner no 1.",
    "Payable": 5535.00},
{
    "Description": "1506 ",
    "Partner": "Partner no 1.",
    "Payable": 62722.79},
{
    "Description": "1507 ",
    "Partner": "Partner no 1.",
    "Payable": 66973.50},
{
    "Description": "1511 ",
    "Partner": "Partner no 1.",
    "Payable": 366.85},
{
    "Description": "1512 ",
    "Partner": "Partner no 1.",
    "Payable": 246.00},
{
    "Description": "1505 ",
    "Partner": "Partner no 1.",
    "Payable": 18942.00},
{
    "Description": "1510 ",
    "Partner": "Partner no 1.",
    "Payable": 3645.41},
{
    "Description": "1520 ",
    "Partner": "Partner no 1.",
    "Payable": 17405.91},
{
    "Description": "1521 ",
    "Partner": "Partner no 1.",
    "Payable": 41815.19},
{
    "Description": "1504",
    "Partner": "Partner no 1.",
    "Payable": 90138.33}];


$("#grid").kendoGrid({
    dataSource: {
        data: data,
        group: [{
            field: "Partner"}],
        sort: {
            field: "Payable",
            dir: "desc"
        },
        pageSize: 10
    },
    groupable: true,
    sortable: true,
    pageable: true,
    columns: [
        "Description",
    {
        field: "Payable",
        format: "{0:N2}"}
    ]
});