JSFiddle - React, Tailwind, and code Playground

HTML

<script src="http://trirand.com/blog/jqgrid/js/jquery.jqGrid.min.js"></script>
<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>
<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",
            localReader: {
                repeatitems: false,
                id: 'Sid'
            },
            gridview: true,
            height: 'auto',
            hoverrows: true,
            scrollTimeout: 0,
            sortable: true,
            grouping: true,
            altRows: true,
            loadonce: false,
            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'], {
            groupOrder: ['desc', 'asc']
        });
    });
});