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>
<script src="https://igniteui.com/js/apiviewer.js"></script>
<script src="https://igniteui.com/js-data/northwind"></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>
<link href="https://igniteui.com/css/apiviewer.css" rel="stylesheet" type="text/css"></link>

<table id="gridBooks">
</table>

CSS

fieldset.explorer
        {
            float: left;
            width: 45%;
        }
        #sampleContainer fieldset input[type="checkbox"] + label
        {
            display: inline;
        }
        .addNewRow
        {
            width: 100%;
            list-style-type: none;
        }
        .addNewRow li
        {
            display: inline-block;
            float: left;
            margin-right: 1em;
            height: 60px;
        }
        .ui-igedit
        {
            margin: 2px 0px 2px 0px;
        }

JavaScript

$(function () {
  $("#gridBooks").igGrid({

    primaryKey: "bookNumber",

    width: '100%',

    autofitLastColumn: false,

    autoGenerateColumns: false,

    renderCheckboxes: true,

    dataSource: [{},{}],

    columns: [



      // Hidden Value

      { headerText: "BookNumber", key: "bookNumber", dataType: "int", hidden: true },

      { headerText: "backColor", key: "backColor", dataType: "string", hidden: true },

      { headerText: "textColor", key: "textColor", dataType: "string", hidden: true },

      { headerText: "isActive", key: "isActive", dataType: "string", hidden: true },

      { headerText: "End Time", key: "endtime", dataType: "string", hidden: true },

      { headerText: "Start Time", key: "starttime", dataType: "string", hidden: true },



      {

        headerText: "Book Name",

        key: "bookName",

        dataType: "string",

        headerCssClass: "th-sch-books-name",

        columnCssClass: "",

        template: "<td class='td-sch-books-name ig-md-table-col td-grid-card-header' data-title='Book Name'><div class='smd-card-media-left'>${bookName}<div class='smd-card-media-right btn-action-right d-lg-none'><a href='javascript:void(0);' onclick='EditRow(${bookNumber})' class='btn btn-sm pmd-btn-fab pmd-ripple-effect btn-dark btn-cell-action pmd-sidebar-toggle' data-target='addBookSidebar' data-placement='right' data-position='fixed' title='Edit'><i class='material-icons pmd-icon-sm'>edit</i></a> <a data-target='#' data-toggle='' href='javascript:void(0);' class='btn btn-sm pmd-btn-fab pmd-ripple-effect btn-delete btn-cell-action' title='Delete' onclick='DeleteRow(${bookNumber},`${bookName}`)'><i class='material-icons pmd-icon-sm'>delete_forever</i></a></div></div></td>",

      },

      {

        headerText: "Address",

        key: "address",

        dataType: "string",

        headerCssClass: "th-sch-books-address",

        columnCssClass: "",

        template: "<td class='td-sch-books-address ig-md-table-col-6'...