JSFiddle - React, Tailwind, and code Playground

by dkamburov

HTML

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

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

CSS

.ui-iggrid th, .ui-iggrid th.ui-widget-header.ui-state-default {
    text-align: center;
    border-right-color: #bbb;
}
.ui-iggrid th, .ui-iggrid th.ui-widget-header.ui-state-default {
    border-top: 1px solid #eceeef;
}
.ui-iggrid-layout-helper>tbody>tr:first-child>td th {
    border-top: 0!important;
}
.ui-iggrid th, .ui-iggrid th.ui-state-active, .ui-iggrid th.ui-state-default, .ui-iggrid th.ui-state-hover {
    text-align: left;
    white-space: nowrap;
    height: 1.6em;
}
.ui-iggrid th.ui-state-active, .ui-iggrid th.ui-state-active a, .ui-iggrid th.ui-state-default, .ui-iggrid th.ui-state-default a, .ui-iggrid th.ui-state-hover, .ui-iggrid th.ui-state-hover a {
    font-weight: 400;
    text-align: left;
}
.ui-iggrid .ui-widget-header, .ui-iggrid th, .ui-iggrid th.ui-state-default {
    background-color: #fff;
    color: #373a3c;
    border-color: #eceeef;
    border-right: 1px solid #eceeef;
}
.ui-iggrid .ui-iggrid-header, .ui-iggrid table tbody td, .ui-iggrid table th {
    padding: 4px 0;
}
.ui-iggrid .ui-iggrid-header, .ui-iggrid table tbody td, .ui-iggrid table th {
    padding: 4px;
}
.ui-widget-header.ui-state-default {
    background: #0275d8;
}
.ui-widget-header.ui-state-active a, .ui-widget-header.ui-state-default, .ui-widget-header.ui-state-default a, .ui-widget-header.ui-state-hover a {
    color: #fff;
    font-weight: 400;
    border: 0;
}
.ui-state-default, .ui-widget-content .ui-state-default, .ui-widget-header .ui-state-default {
    border: 1px solid #ccc;
    background-color: #fff;
    color: #373a3c;
}
.ui-iggrid table td, .ui-iggrid table th {
    overflow: hidden;
    text-overflow: ellipsis;
    vertical-align: middle;
}
.ui-state-default {
    border: 1px solid #cacee1;
}
.ui-state-default, .ui-widget-content .ui-state-default {
    border: none;
}
.ui-state-default, .ui-widget-content .ui-state-default {
    border-radius: 2px;
    border: 1px solid #809dcf;
}
.ui-state-default, .ui-widget-content .ui-state-default,...

JavaScript

$(function () {
            $("#grid").igGrid({
                autoGenerateColumns: false,
                autofitLastColumn : false,
                renderCheckboxes: true,
                width: "100%",
                height: "400px",
                rowVirtualization : true,
                virtualizationMode: "continuous",
                columns: [
                   { headerText: "Stone ID", key: "ProductName", dataType: "string", width: "15%" },
                   { headerText: "Ship Name", key: "ShipName", dataType: "string", width: "20%" },
                   { headerText: "Order Date", key: "OrderDate", dataType: "date", width: "10%" },
                   { headerText: "Total Price", key: "ExtendedPrice", dataType: "number", format: "currency", width: "10%" },
                   { headerText: "Ship Address", key: "ShipAddress", dataType: "string", width: "15%" },
                   { headerText: "Ship City", key: "ShipCity", dataType: "string", width: "10%" },
                   { headerText: "Ship Country", key: "ShipCountry", dataType: "string", width: "10%" },
                   { headerText: "Postal Code", key: "ShipPostalCode", dataType: "string", width: "10%" }
                ],
                dataSource: northwindInvoices,
                autoAdjustHeight: true,
      					adjustVirtualHeights: true,
      					featureChooserIconDisplay: 'always',
      					enableHoverStyles: false,
                features:
                [
                {
                	name: "Sorting",
                  columnSorting: (evt, ui) => {

                    if (ui.columnKey === 'ProductName') {

                      const width = $('#grid_ProductName').width();

                      if (width < 100) {

                        $('#grid').igGridResizing('resize', ui.columnKey, 250);
                        $('#grid_ProductName').find('.stoneIdGridHeader').children().removeClass('fa-arrow-right').addClass('fa-arrow-left');

                      } else...