JSFiddle - React, Tailwind, and code Playground

by Francisco Samir Pinheiro

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="http://condeso.com.br/data_teste.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;
};
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, data.subItems);
    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 GRID------------------------------------------------------------
$("#jqxgrid").jqxGrid({
    width: '100%',
    theme: 'energyblue',
    source: dataAdapter,
    groupable: true,
    groupsrenderer: groupsrenderer,
    selectionmode: 'singlecell',
    columns: [{
        text: 'CLIENTE',
        groupable: true,
        datafield: 'firstname',
        width: 90
    }, {
        text: 'UNIDADE',
        groupable: true,
        datafield: 'lastname',
        width: 90
    }, {
        text: 'FORNECEDOR',
        groupable: true,
       ...