JSFiddle - React, Tailwind, and code Playground

HTML

<link rel="stylesheet" href="http://jqwidgets.com/public/jqwidgets/styles/jqx.base.css">
<link rel="stylesheet" href="http://jqwidgets.com/public/jqwidgets/styles/jqx.energyblue.css">
<script src="http://jqwidgets.com/public/jqwidgets/jqx-all.js"></script>
<div id="table"></div>
<div id="eventSelected">eventSelected Result</div>
<div><input type="button" value="Test getSelection method" id='jqxButton'/></div>
<div id="methodSelected">Button Click Result</div>

JavaScript

// prepare the data
var data = new Array();
var group = [ "Laptop", "Desktop", "Monitor" ];
var label = [ "Fujitsu", "Dell", "HP", "Acer", "Lenovo" ];
var value = [ "Fujitsu the brand", "Dell the brand", "HP the brand", "Acer the brand", "Lenovo the brand" ];

for (var i = 0; i < 200; i++) {
    var row = {};
    var groupindex = Math.floor(Math.random() * group.length);
    var labelvalueindex = Math.floor(Math.random() * label.length);
    row["group"] = group[groupindex];
    var randomnumber = Math.round(Math.random() * 1000);
    row["label"] = label[labelvalueindex] +'_'+ randomnumber;
    row["value"] = value[labelvalueindex] +'_'+ randomnumber;
    data[i] = row;
}

var source =
    {
        localData: data,
        dataType: "array",
        dataFields:
        [
            { name: 'label', type: 'string' },
            { name: 'value', type: 'string' },
            { name: 'group', type: 'string' },
        ]
    };
var dataAdapter = new $.jqx.dataAdapter(source);
       
$("#table").jqxDataTable(
    {
        selectionMode: 'singleRow',
        filterable: true,
        filterMode: 'default',
        groups: ['group'],
        groupsRenderer: function (value, rowData, level)
			{
				return "Type: " + value;
			},
        width: 850,
        pageable: true,
        pagerMode: 'advanced',
        pagerButtonsCount: 10,
        source: dataAdapter,
        columnsResize: true,
        columns: [
            { text: 'Group', hidden: true, dataField: 'group', },
            { text: 'Value', dataField: 'value', },
            { text: 'Label', dataField: 'label', },
        ]
    });

$("#table").on('rowSelect', function (event)
    {
        var args = event.args;
        if (args) {
            // event args.
            var args = event.args;
            // row data.
            var row = args.row;
            // row index.
            var index = args.index;
            // row's data bound index.
            var boundIndex = args.boundIndex;
         ...