JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://jqwidgets.com/public/jqwidgets/jqx-all.js"></script>
<link rel="stylesheet" href="https://jqwidgets.com/public/jqwidgets/styles/jqx.base.css">
<link rel="stylesheet" href="https://jqwidgets.com/public/jqwidgets/styles/jqx.energyblue.css">
<script src="https://www.jqwidgets.com/jquery-widgets-demo/demos/jqxgrid/generatedata.js"></script>
<div id="jqxgrid"></div>

JavaScript

var data = generatedata(50);
//SOURCE-------------------------------------------------------------
var source = {
    localdata: data,
    datafields: [{
        name: 'firstname',
        type: 'string'
    }, {
        name: 'lastname',
        type: 'string'
    }, {
        name: 'productname',
        type: 'string'
    }, {
        name: 'date',
        type: 'date'
    }, {
        name: 'quantity',
        type: 'number'
    }, {
        name: 'price',
        type: 'number'
    }],
    datatype: "array",
    updaterow: function (rowid, rowdata) {
        // synchronize with the server - send update command   
    }
};
//ADAPTER--------------------------------------------------------------
var dataAdapter = new $.jqx.dataAdapter(source);
//RENDER---------------------------------------------------------------
var toThemeProperty = function (className) {
    return className;
};

function getSubItems(data) {
    var subItems = [];
    if (data.subItems.length > 0) {
        subItems = data.subItems;
    } else if (data.subGroups.length > 0) {
        for (var i = 0; i < data.subGroups.length; i++) {
            if (data.subGroups[i].subItems.length > 0) {
                subItems = subItems.concat(data.subGroups[i].subItems);
            } else {
                subItems = subItems.concat(getSubItems(data.subGroups[i]));
            }
        }
    }
    return subItems;
}

var groupsrenderer = function (text, group, expanded, data) {
    var number = dataAdapter.formatNumber(group, data.groupcolumn.cellsformat);
    var text = data.groupcolumn.text + ': ' + number;

    var aggregate = this.getcolumnaggregateddata('price', ['sum'], true, getSubItems(data));
    return '<div class="' + toThemeProperty('jqx-grid-groups-row') + '" style="position: absolute;"><span>' + text + ', </span>' + '<span class="' + toThemeProperty('jqx-grid-groups-row-details') + '">' + "Total" + ' (' + aggregate.sum + ')' + '</span></div>';
};
// INI...