JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/themes/start/jquery-ui.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/free-jqgrid/4.13.6/js/jquery.jqgrid.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/free-jqgrid/4.13.6/css/ui.jqgrid.min.css">

<div style="float:left; border:1px solid red;">
    <div id="divGrid" style="width: 680px; min-height: 50px; float: left; border: 1px solid silver;">
        <table id="list2"></table>
        <div id="pager2"></div>
    </div>
</div>

JavaScript

function getCurrentPractice ()
        {
            return "Test";
        }

        function getGridCaption() {
            return "<div style='font-size:15px; font-weight:bold; display:inline; padding-left:10px;'><span class='glyphicon glyphicon-check' style='margin-right:3px;font-size:14px;'></span>" + getCurrentPractice() + " " + "</div>" +
            "<div style='float:right; padding-right:20px; padding-bottom:10px; display:inline;>" +
           "<div style='float:right;width:550px;  padding-bottom:20px;'>" +
                "<input type='text' class='form-control' id='filter' placeholder='Search'  style='width:250px; height:30px; float:right; ' />" +
            " </div>" +
            "</div>";
        }

        $(function () {

            ////Grid
            var myData = [
                               { "Practice": "Test1", "ProviderID": 1, "IsPartner": true, "IsActive": true },
                               { "Practice": "Test2", "ProviderID": 2, "IsPartner": true, "IsActive": true }
            ]

            var currentPractice = "P";
            var grid = $("#list2");
            grid.jqGrid({
                datatype: 'local',
                data: myData,
                additionalProperties: ["IsActive", "IsPartner"],
                //additionalProperties is needed since the name is different
                postData:
                {
                    practiceName: function () { return currentPractice }
                },

                colNames: [
                            'Practice',
                            'ProviderID',
                            'Partner?',
                            'Status'
                ],
                colModel: [
                    { name: 'Practice', hidden: false },
                    { name: 'ProviderID', hidden: false },
                    {
                        name: 'PartnerStatusText',
                        width: 70,
                        formatter: function (cellvalue,...