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="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/js/bootstrap.min.js"></script>
<script src="http://igniteui.com/js-data/nw-customers-with-orders-big"></script>
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css" rel="stylesheet"></link>
<link href="http://cdn-na.infragistics.com/igniteui/latest/css/themes/metro/infragistics.theme.css" rel="stylesheet"></link>
<link href="http://cdn-na.infragistics.com/igniteui/latest/css/structure/infragistics.css" rel="stylesheet"></link>


<!-- Button trigger modal -->
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#exampleModalLong">
  Launch demo modal
</button>

<!-- Modal -->
<div class="modal fade" id="exampleModalLong" tabindex="-1" role="dialog" aria-labelledby="exampleModalLongTitle" aria-hidden="true">
  <div class="modal-dialog modal-lg" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title" id="exampleModalLongTitle">Modal title</h5>
        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
          <span aria-hidden="true">&times;</span>
        </button>
      </div>
      <div class="modal-body">
	  <div class="container-fluid">
        <table id="grid"></table>
	  </div>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
        <button type="button" class="btn btn-primary">Save changes</button>
      </div>
    </div>
  </div>
</div>

JavaScript

var isAlreadyInit = false;
function initGrid() {
	$("#grid").igGrid({
	
		autoGenerateColumns: false,
		width: "100%   ",
		height: 565,
		dataSource: nwCustomersWithOrders,
		primaryKey: "ID",
		autoFitLastColumn: true,
		columns: [
			{ key: "ID", hidden: true },
			{ headerText: "Company Name", key: "CompanyName", dataType: "string", width: "*" },
			{ headerText: "Contact Name", key: "ContactName", dataType: "string", width: "200px" },
			{ headerText: "Contact Title", key: "ContactTitle", dataType: "string", width: "200px" },
			{ headerText: "Address", key: "Address", dataType: "string", width: "*" },
			{ headerText: "City", key: "City", dataType: "string", width: "*" },
			{ headerText: "Country", key: "Country", dataType: "string", width: "*" }
		],

		features: [
			{
				name: "Filtering",
				mode: "advanced"
			}
		]
	});
}

$(function () {
	$('#exampleModalLong').on("shown.bs.modal", () => {
		if (!isAlreadyInit) {
    	initGrid();
      isAlreadyInit = true;
    }
	});
});