JSFiddle - React, Tailwind, and code Playground

by georgianastasov

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/2022.2/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;
}
.exporting-overlay {
    position: absolute;
    background-color: rgba(181, 181, 181, 0.9);
    top: 0;
    left: 0;
    z-index: 100000;
    text-align: center;
    vertical-align: top;
}
.exporting-overlay:after {
    content: "";
    display: inline-block;
    vertical-align: middle;
    height: 100%;
}
.exporting-text {
    font-size: 46px;
    font-weight: bold;
}

JavaScript

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

    $.ig.loader(function () {
        var data = [
            { 'Name': 'Omnis ut illum nisi.', 'ProductNumber': 2973311236, "InStock": true, "Quantity": 56, VendorWebsite: 'http://infragistics.com/', DeliveryDate: "02/01/2023" },
            { 'Name': 'Quis quibusdam qui.', 'ProductNumber': 5907101619, "InStock": false, "Quantity": 0, VendorWebsite: 'http://infragistics.com/', DeliveryDate: "09/22/2014" },
            { 'Name': 'Sint laudantium et.', 'ProductNumber': 3057803521, "InStock": true, "Quantity": 26, VendorWebsite: 'http://infragistics.com/', DeliveryDate: "08/13/2015" },
            { 'Name': 'Tempore eos.', 'ProductNumber': 3576608248, "InStock": true, "Quantity": 8, VendorWebsite: 'http://infragistics.com/', DeliveryDate: "06/28/2014" },
            { 'Name': 'Maiores aut ducimus.', 'ProductNumber': 7079645227, "InStock": true, "Quantity": 62, VendorWebsite: 'http://infragistics.com/', DeliveryDate: "04/19/2015" },
            { 'Name': 'Vel inventore.', 'ProductNumber': 191484500, "InStock": true, "Quantity": 18, VendorWebsite: 'http://infragistics.com/', DeliveryDate: "07/21/2015" },
            { 'Name': 'Ut molestiae.', 'ProductNumber': 2994899561, "InStock": false, "Quantity": 0, VendorWebsite: 'http://infragistics.com/', DeliveryDate: "03/10/2016" },
            { 'Name': 'Nihil magnam aut ut.', 'ProductNumber': 5652753011, "InStock": true, "Quantity": 41, VendorWebsite: 'http://infragistics.com/', DeliveryDate: "07/25/2016" },
            { 'Name': 'Repellendus dolorum.', 'ProductNumber': 8807902556, "InStock": true, "Quantity": 10, VendorWebsite: 'http://infragistics.com/', DeliveryDate: "09/01/2017" },
            { 'Name': 'Odit ut quo minus.',...