JSFiddle - React, Tailwind, and code Playground

by dkamburov

HTML

<script src="https://ajax.aspnetcdn.com/ajax/modernizr/modernizr-2.8.3.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://igniteui.github.io/help-samples/js/FileSaver.js"></script>
<script src="https://igniteui.github.io/help-samples/js/Blob.js"></script>
<script src="https://cdn-na.infragistics.com/igniteui/2018.1/latest/js/infragistics.loader.js"></script>
<table id="grid"></table>
<br>
<input type="button" id="exportButton" value="Export">

CSS

.right {
    float: right;
}

#exportButton {
    float: left;
}

JavaScript

$(function () {
    $.ig.loader({
        scriptPath: "https://cdn-na.infragistics.com/igniteui/2018.1/latest/js/",
        cssPath: "https://cdn-na.infragistics.com/igniteui/2018.1/latest/css/",
        resources:'igGrid,' + 'igGridExcelExporter'
    });

$.ig.loader(function () {
    $(function () {
            var data = [
                { 'ProductID': 1, 'Name': 'Omnis ut illum nisi.', 'ProductNumber': '2973311236' },
                { 'ProductID': 2, 'Name': 'Quis quibusdam qui.', 'ProductNumber': '5907101619' },
                { 'ProductID': 3, 'Name': 'Sint laudantium et.', 'ProductNumber': '3057803521' },
                { 'ProductID': 4, 'Name': 'Tempore eos.', 'ProductNumber': '3576608248' },
                { 'ProductID': 5, 'Name': 'Maiores aut ducimus.', 'ProductNumber': '7079645227' },
                { 'ProductID': 6, 'Name': 'Vel inventore.', 'ProductNumber': '191484500' },
                { 'ProductID': 7, 'Name': 'Ut molestiae.', 'ProductNumber': '2994899561' },
                { 'ProductID': 8, 'Name': 'Nihil magnam aut ut.', 'ProductNumber': '5652753011' },
                { 'ProductID': 9, 'Name': 'Repellendus dolorum.', 'ProductNumber': '8807902556' },
                { 'ProductID': 10, 'Name': 'Odit ut quo minus.', 'ProductNumber': '1083007847' }
            ];
            
            for (var i = 11; i < 1000000; i++) {
            	data.push({"ProductID": i, "Name": "Product" + i, "ProductNumber": "123"});
            }

            $("#grid").igGrid({
                autoGenerateColumns: false,
                columns: [
                    { key: "ProductID", headerText: "Product ID", width: "100px", dataType: "number" },
                    { key: "Name", headerText: "Product Name", width: "250px", dataType: "string" },
                    { key: "ProductNumber", headerText: "Product Number", width: "200px", dataType: "number" }
                ],
                dataSource: data,
                primaryKey: "ProductID",
           ...