JSFiddle - React, Tailwind, and code Playground

HTML

<script src="http://cdn.wijmo.com/jquery.wijmo-open.all.2.3.9.min.js"></script>
<script src="http://cdn.wijmo.com/jquery.wijmo-complete.all.2.3.9.min.js"></script>
<link rel="stylesheet" href="http://cdn.wijmo.com/jquery.wijmo-complete.all.2.3.9.min.css">
<link rel="stylesheet" href="http://cdn.wijmo.com/themes/rocket/jquery-wijmo.css">
<div class="container">
        <div class="header">
            <h2>WijGrid - Editing Modes</h2>
        </div>
        <div class="main demo">
            This sample demonstrates the various Edting modes available in WijGrid
            <!-- Begin demo markup -->
            <table id="demo">
            </table>
            <!-- End demo markup -->
            <div class="demo-options">
                <br />
                Select Edit Mode:
                <select id="editMode">
                    <option value="Single Click">Single Click</option>
                    <option value="Double Click">Double Click</option>
                    <option value="Selected Columns">Selected Columns</option>
                </select>
                <br />
                <br />

                <div id="Columns">Editable Columns:</div>
            </div>
        </div>
        <div class="footer demo-description">
            <p>
                
            </p>
        </div>
    </div>

JavaScript

$(document).ready(function () {

            var selectedEditMode = 'Single Click';

            //initiate the combobox for displaying editing modes
            $("#editMode").wijcombobox(
                {
                    selectedValue: 'Single Click',
                    showingAnimation: { effect: "blind" },
                    hidingAnimation: { effect: "blind" },
                    selectedIndexChanged: function (e, data) {
                        selectedEditMode = data.selectedItem.value;
                        if (selectedEditMode == "Selected Columns") {
                            $("#Columns").show();
                            alert("Select Columns which you want to make ReadOnly");
                        }
                        else {
                            var gridCols = $("#demo").wijgrid('columns');
                            $.each(gridCols, function (index, col) {
                                gridCols[index].option('readOnly', false);
                            });
                            $("#Columns :input").wijcheckbox('option', 'checked', true);
                            $("#demo").wijgrid('ensureControl');
                            $("#Columns").hide();

                        }

                    }
                }
              );

            //create the grid
            $("#demo").wijgrid({
                allowSorting: true,
                allowPaging: true,
                allowEditing: true,
                pageSize: 10,
                data: [
                    [27, 'Canada', 'Adams, Craig', 'RW', 'R', 32, 2009, 'Seria, Brunei'],
                    [43, 'Canada', 'Boucher, Philippe', 'D', 'R', 36, 2008, 'Saint-Apollinaire, Quebec'],
                    [24, 'Canada', 'Cooke, Matt', 'LW', 'L', 30, 2008, 'Belleville, Ontario'],
                    [87, 'Canada', 'Crosby, Sidney (C)', 'C', 'L', 21, 2005, 'Cole Harbour, Nova Scotia'],
                    [1, 'United States', 'Curry, John', 'G', 'L',...