JSFiddle - React, Tailwind, and code Playground
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/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>
<table id="grid">
</table>
JavaScript
$(function () {
$("#grid").igGrid({
width: "100%",
autoGenerateColumns: false,
dataSource: northwind,
responseDataKey: "results",
dataSourceType: "json",
columns: [
{ key: "EmployeeID", headerText: "Employee ID", dataType: "number" },
{ key: "LastName", headerText: "First Name", dataType: "string" },
{ key: "FirstName", headerText: "Last Name", dataType: "string" },
{ key: "Title", headerText: "Title", dataType: "string" },
{ key: "Address", headerText: "Address", dataType: "string" },
{ key: "City", headerText: "City", dataType: "string" },
{ key: "Region", headerText: "Region", dataType: "string" },
{ key: "Country", headerText: "Country", dataType: "string" },
{ key: "PostalCode", headerText: "Postal Code", dataType: "string" }
],
features: [
{
name: "Responsive",
enableVerticalRendering: false,
columnSettings: [
{
columnKey: "EmployeeID",
classes: "ui-hidden-phone"
},
{
columnKey: "Address",
classes: "ui-hidden-phone"
},
{
columnKey: "LastName",
classes: "ui-hidden-phone"
},
{
columnKey: "Region",
classes: "ui-hidden-phone"
},
{
...