JSFiddle - React, Tailwind, and code Playground

by dkamburov

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>
<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="grid1"></table>

CSS

#grid_container
        {
            width: 100%;
            max-width: 560px;
        }

JavaScript

$(function () {

var data = [

  { ID: "Accept", Units: 100, Description: "Laptop" },

  { ID: "Action", Units: 15, Description: "Hamburger" },

  { ID: "Address", Units: 46, Description: "Beer" },

  { ID: "Alert", Units: 3, Description: "tshirt" }

];

			$("#grid1").on("igcontrolcreated", function (evt, ui) {

					   ui.owner.element.find("tbody").unbind("selectstart");

					   ui.owner.element.find("tbody td").unbind("mousedown");

			});

$("#grid1").igGrid({

  columns: [

    { headerText: "ID", key: "ID", dataType: "string", width: "220px" },

    { headerText: "Units", key: "Units", dataType: "number", width: "90px" },

    { headerText: "Description", key: "Description", dataType: "string" }

  ],

  primaryKey: "ID",

  width: "600px",

  height: "300px",

  autoGenerateColumns: false,

  dataSource: data,

  autoCommit:true,

  virtualization: true,

  virtualizationMode: "continuous",

  features: [

    { name: "Sorting" },

    { name: 'Resizing'},

    { name: "Updating", editMode: "cell", enableAddRow: false, startEditTriggers: "click,F2" },

    { name: "Selection", mode: "row", rowSelectionChanged: (e, ui) => {
        if (makeEditable) {
          $(ui.owner.element).igGridUpdating('startEdit', ui.row.id, ui.row.element.context.cellIndex)
        }
      }
    } // Remove this and selecting text is possible

  ]

});
        });