JSFiddle - React, Tailwind, and code Playground

by Pratik Galoria

HTML

<div id="example">
        <div class="row">
            <div style="display: inline">
                <table id="grid-left">
                    <colgroup>
                        <col style="width: 50px" />
                        <col style="width:100px" />
                        <col style="width:100px" />
                        <col style="width:50px" />
                        <col style="width:50px" />
                        <col style="width:50px" />
                    </colgroup>
                    <thead>
                        <tr>
                            <th data-field="select">Select</th>
                            <th data-field="code">Car Make</th>
                            <th data-field="model">Car Model</th>
                            <th data-field="year">Year</th>
                            <th data-field="category">Category</th>
                            <th data-field="airconditioner">Air Conditioner</th>
                        </tr>
                    </thead>
                    <tbody>
                        <tr>
                            <td></td>
                            <td>FAC0001</td>
                            <td>S60</td>
                            <td>2010</td>
                            <td>Saloon</td>
                            <td>Yes</td>
                        </tr>
                        <tr>
                            <td></td>
                            <td>FAC0002</td>
                            <td>A4</td>
                            <td>2002</td>
                            <td>Saloon</td>
                            <td>Yes</td>
                        </tr>
                        <tr>
                            <td></td>
                            <td>FAC0003</td>
                            <td>535d</td>
                            <td>2006</td>
                            <td>Saloon</td>
                            <td>Yes</td>
                        </tr>
                      ...

CSS

.k-grid tbody tr.disabled td {
            color: #bbb;
        }

JavaScript

$(document).ready(function () {
            
            var gridLeft = $("#grid-left").kendoGrid({
                width: "500px",
                sortable: true,
                scrollable: false,
                pageable: {
                    pageSize: 5
                },
                columns: [
                    { field: "select", template: "<input type='checkbox' value='#:code#' />" },
                    { field: "code" },
                    { field: "model" },
                    { field: "year" },
                    { field: "category" },
                    { field: "airconditioner" }
                ],
                dataBound: onDataBound
            }).data("kendoGrid");

            var gridRight = $("#grid-right").kendoGrid({
                sortable: true,
                scrollable: false,
                pageable: {
                    pageSize: 5
                },
                columns: [
                    { field: "select", template: "<input type='checkbox' value='#:code#' />" },
                    { field: "code" },
                    { field: "model" },
                    { field: "year" },
                    { field: "category" }
                ]
            }).data("kendoGrid");
            
            gridLeft.table.on("click", "input:checkbox", selectLeft);
            gridRight.table.on("click", "input:checkbox", selectRight);

            $("#btnAdd").on("click", function (e) {
                $.each(selectedLeftRows, function (i) {
                    gridRight.dataSource.add(this);

                    addedLeftCodes[this.code] = true;
                    selectedLeftCodes[this.code] = false;
                    addedLeftRows.push(this);
                });
                gridLeft.refresh();
                selectedLeftRows = [];
            });

            $("#btnRemove").on("click", function (e) {
                $.each(selectedRightRows, function (i) {
                    gridRight.dataSource.remove(this);

 ...