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 id="edit-button" href="#">Click here to edit</a>

JavaScript

jQuery(function () {
            jQuery(function () {

                data = [
            { id: "s1", forename: "Homer", surname: "Simpson", age: 25 },
            { id: "s2", forename: "Carl", surname: "Carlson", age: 25 },
            { id: "s3", forename: "Peter", surname: "Murphy", age: 35 },
            { id: "s4", forename: "Jack", surname: "Black", age: 35 },
            { id: "s5", forename: "John", surname: "Doe", age: null }
        ];

                jQuery('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', formatter: customFormatter, name: 'forename', width: 200, sortable: true, editable: true, edittype: 'custom', editoptions: { custom_element: myelem, custom_value: myvalue} },
                { label: 'Surname', name: 'surname', width: 200, sortable: true },
                { label: 'Age', name: 'age', width: 200, sortable: true }
            ],
                    shrinkToFit: false,
                    rowNum: 60,
                    deselectAfterSort: false
                });

                function customFormatter(cellvalue, options, rowObject) {

                    var div = jQuery('<div style="font-weight: 800;"></div>');
                    div.text(cellvalue);

                    return '<div style="color: red;">' + cellvalue + '</div>';
                }

                function...