JSFiddle - React, Tailwind, and code Playground

HTML

<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.14/themes/base/jquery-ui.css">
<link rel="stylesheet" href="http://trirand.com/blog/jqgrid/themes/ui.jqgrid.css">
<script src="http://trirand.com/blog/jqgrid/js/i18n/grid.locale-en.js"></script>
<script src="http://trirand.com/blog/jqgrid/js/jquery.jqGrid.src.js"></script>
<div id="content"></div>
<table id="table"></table>
<div id="pager"></div>

<a href="#" id="sort-button">Click me to group</a>

JavaScript

jQuery(function () {
    data = [
        { id: "s1", forename: "Homer", surname: "Simpson" },
        { id: "s2", forename: "Carl", surname: "Carlson" },
        { id: "s3", forename: "Peter", surname: "Murphy" },
        { id: "s4", forename: "Jack", surname: "Black" }
    ];
    
    $('table').jqGrid({
        data: data,
        datatype: "local",
        gridview: true,
        height: 'auto',
        sortable: true,
        grouping: true,
        altRows: true,
        multiselect: true,
        colModel: [
            { label: 'id', name: 'id', width: 200, sortable: true, key: true },
            { label: 'Forename', name: 'forename', width: 200, sortable: true },
            { label: 'Surname', name: 'surname', width: 200, sortable: true }
        ],
        shrinkToFit: false,
        rowNum: 60,
        deselectAfterSort: false
    });
    
    $('#sort-button').click(function() {
        $('#table').jqGrid('groupingGroupBy', ['id', 'forename', 'surname'], {
            groupOrder: ['desc', 'asc', 'asc'],
            formatDisplayField: [formatDisplay, formatDisplay, formatDisplay]
        });
        return false;
    });
    
    function formatDisplay(currentValue, sourceValue, option, groupIndex, groupObject) {        
        if(option === undefined) {
            return "option of value \"" + currentValue + "\" is undefined!";
        } else {
            return currentValue += "*";
        }
    }
});