JSFiddle - React, Tailwind, and code Playground

by damyanpetev

HTML

<script src="https://igniteui.com/js/modernizr.min.js"></script>
<script src="https://code.jquery.com/jquery-1.9.1.min.js"></script>
<script src="https://code.jquery.com/ui/1.10.3/jquery-ui.min.js"></script>
<script src="https://cdn-na.infragistics.com/igniteui/latest/js/infragistics.core.js"></script>
<script src="https://cdn-na.infragistics.com/igniteui/latest/js/infragistics.lob.js"></script>
<script src="https://igniteui.com/js-data/nw-employees"></script>
<link href="https://cdn-na.infragistics.com/igniteui/latest/css/themes/infragistics/infragistics.theme.css" rel="stylesheet"></link>
<link href="https://cdn-na.infragistics.com/igniteui/latest/css/structure/infragistics.css" rel="stylesheet"></link>

<table id="grid"></table>

JavaScript

$(function() {
  var grid = $("#grid");


  northwindEmployees.forEach(x => x.Title = [x.Title]);
  northwindEmployees[7].Title.push("Sales Manager");

  var comboOptions = [
    "Sales Representative",
    "Vice President, Sales",
    "Sales Manager",
    "Inside Sales Coordinator"
  ];

  //grid definition and functionality
  $("#grid").igGrid({
    width: "100%",
    autoGenerateColumns: false,
    dataSource: northwindEmployees,
    responseDataKey: "results",
    dataSourceType: "json",
    primaryKey: "ID",
    columns: [{
        headerText: "Employee ID",
        key: "ID",
        dataType: "number",
        width: "120px",
        hidden: true
      },
      {
        headerText: "Name",
        key: "Name",
        dataType: "string"
      },
      {
        headerText: "Title",
        key: "Title",
        formatter: function(val, record) {
          return val.toString();
        }
      },
      {
        headerText: "Phone",
        key: "Phone",
        dataType: "string"
      },
      {
        headerText: "Country",
        key: "Country",
        dataType: "string"
      }
    ],
    features: [{
        name: "Updating",
        columnSettings: [{
          columnKey: "Title",
          editorType: "combo",
          editorOptions: {
            dataSource: comboOptions,
            textKey: "",
            valueKey: "",
            multiSelection: {
              enabled: true,
              showCheckboxes: true
            }
          }
        }],
        editCellEnding: log,
        editCellEnded: log,        
        editRowEnding: log,
        editRowEnded: log
      },
      {
        name: "Selection",
        mode: "cell"
      },
      {
        name: "Filtering"
      },
      {
        name: "Sorting"
      }
    ]
  });
  
  function log(e, args) {
    const type = e.type.split("iggridupdatingedit").pop();
    if (type.startsWith("cell") && args.columnKey !== "Title") return;
    
 ...