JSFiddle - React, Tailwind, and code Playground

by Kiran Parab

HTML

<script src="http://mleibman.github.io/SlickGrid/lib/jquery.event.drag-2.2.js"></script>
<script src="http://mleibman.github.io/SlickGrid/slick.core.js"></script>
<script src="http://mleibman.github.io/SlickGrid/plugins/slick.cellrangedecorator.js"></script>
<script src="http://mleibman.github.io/SlickGrid/plugins/slick.cellrangeselector.js"></script>
<script src="http://mleibman.github.io/SlickGrid/plugins/slick.cellselectionmodel.js"></script>
<script src="http://mleibman.github.io/SlickGrid/slick.formatters.js"></script>
<script src="http://mleibman.github.io/SlickGrid/slick.editors.js"></script>
<link rel="stylesheet" href="http://mleibman.github.io/SlickGrid/slick.grid.css">
<script src="http://mleibman.github.io/SlickGrid/plugins/slick.checkboxselectcolumn.js"></script>
<script src="http://mleibman.github.io/SlickGrid/slick.dataview.js"></script>
<script src="http://mleibman.github.io/SlickGrid/plugins/slick.rowselectionmodel.js"></script>
<script src="http://jlynch7.github.io/SlickGrid/slick.grid.js"></script>
<div id="grid" style="width:100%;height:500px;"></div>

JavaScript

var _renderOptions = {
        "lastRendering": 0,
        "isNextMerged": 0,
        "changedCells": {}
    };

function VerCellMergedFormatter(row, cell, value, columnDef, dataContext) {
    
    var options = window._renderOptions;
    debugger;
    if (options.lastRendering != 1) {
        return;
    }

    var items = window.getRenderDataItmes();
    var fieldName = columnDef.field;
    var rowsLength = items.length;
    var currentItem = items[row];

    var nextRowIndex = row + 1;
    if (nextRowIndex < rowsLength){
        var nextValue = items[nextRowIndex][fieldName];
        if (value == nextValue) {
            if (!options.changedCells[row]) {
                options.changedCells[row] = {};
            }
            options.changedCells[row][fieldName] = "noneline-bottom";
            options.isNextMerged = 1;
            return value;
        }
        else {
            if (options.isNextMerged == 1) {
                options.isNextMerged = 0;
                return;
            }
        }
    }
    return value;
}

var data = [
    {id: 1, ModuleName:"ABC", SubModuleName:"SubModule 1"},
    {id: 2, ModuleName:"ABC", SubModuleName:"SubModule 2"},
    {id: 3, ModuleName:"ABC", SubModuleName:"SubModule 3"},
    {id: 4, ModuleName:"ABC", SubModuleName:"SubModule 4"},
    {id: 5, ModuleName:"ABC", SubModuleName:"SubModule 5"}]

var moduleSelector = new Slick.CheckboxSelectColumn({
        columnId: "SelectModule",
        cssClass: "slick-cell-checkboxsel"
    });

    var subModuleSelector = new Slick.CheckboxSelectColumn({
        columnId: "SelectSubModule",
        cssClass: "slick-cell-checkboxsel"
    });

    var grid;
    var dataView;
    var gridColumns = [
        moduleSelector.getColumnDefinition(),
        { name: "ModuleName", id: "SAP Modules", field: "ModuleName", width: 120, formatter: VerCellMergedFormatter },
        subModuleSelector.getColumnDefinition(),
        { name: "SubModuleName", id: "SAP Sub-Modules", field:...