JSFiddle - React, Tailwind, and code Playground

HTML

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

JavaScript

var data = [];


jQuery("#accordion").accordion({
    collapsible: true,
    heightStyle: "content",
    active: 0
});

for (var i = 0; i < 500; i++) {
    data.push({
        id: i,
        forename: "Max" + i,
        surname: "Mustermann" + i,
        age: 38,
        test1: "Lorem ipsum dolor sit amet " + i,
        test2: "Lorem ipsum dolor sit amet " + i,
        test3: "Lorem ipsum dolor sit amet " + i,
        test4: "Lorem ipsum dolor sit amet " + i,
        test5: "Lorem ipsum dolor sit amet " + i
    });
}

jQuery('table').jqGrid({
    data: data,
    datatype: "local",
    localReader: {
        repeatitems: false,
        id: 'Sid'
    },
    gridview: true,
    height: 'auto',
    hoverrows: true,
    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 },
        { label: 'Age', name: 'age', width: 200, sortable: true },
        { label: 'Test1', name: 'test1', width: 200, sortable: true },
        { label: 'Test2', name: 'test2', width: 200, sortable: true },
        { label: 'Test3', name: 'test3', width: 200, sortable: true },
        { label: 'Test4', name: 'test4', width: 200, sortable: true },
        { label: 'Test5', name: 'test5', width: 200, sortable: true }
    ],
    shrinkToFit: true,
    rowNum: 1000,
    deselectAfterSort: false
});