JSFiddle - React, Tailwind, and code Playground

by ysuper

HTML

<script src="http://www.guriddo.net/demo/js/jquery.min.js"></script>
<script src="http://www.guriddo.net/demo/js/trirand/jquery.jqGrid.min.js"></script>
<script src="http://www.guriddo.net/demo/js/trirand/i18n/grid.locale-en.js"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/jszip/2.5.0/jszip.min.js"></script>
<link rel="stylesheet" href="http://www.guriddo.net/demo/css/jquery-ui.css">
<link rel="stylesheet" href="http://www.guriddo.net/demo/css/trirand/ui.jqgrid.css">

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

JavaScript

var mydata = [
	{ id: "1001", col1: "1", col2: "1", col3: "" },
  { id: "1002", col1: "2", col2: "2", col3: "" },
];
        
$("#grid").jqGrid({
    datatype: "local",
    data: mydata,
    /* height: 250, */
    height: "auto",
    width: 500,
    colNames: ['id', 'col1', 'col2', 'col3'],
    pager: "#gridpager",
    colModel: [{
            name: 'id',
            index: 'id',
            width: 60,
        },
        {
            name: 'col1',
            index: 'col1',
            width: 50,
        },
        {
            name: 'col2',
            index: 'col2',
            width: 50
        },
        {
            name: 'col3',
            index: 'col3',
            width: 50,
            formatter: function(cellvalue, options, rowObject) {
                var showValue = (parseInt(rowObject.col1) + parseInt(rowObject.col2));
                if (showValue) {
                    if (options.isExported) {
                        return showValue;
                    } else {
                        return showValue;
                    }
                } else {
                   return 'novalue';
                }
            },
        }
    ],
    caption: "exportToExcel Calculated Column",
});
$('#grid').navGrid('#gridpager', {
        edit: false,
        add: false,
        del: false,
        search: false,
        refresh: false,
        view: false,
        position: "left",
        cloneToTop: true
    }, {}, // edit options
    {}, // add options
    {}, // delete options
    {} // search options
);
// add Export button
$('#grid').navButtonAdd('#gridpager', {
    buttonicon: "ui-icon-circle-triangle-e",
    title: "Export to Excel",
    caption: "Export to Excel",
    position: "last",
    onClickButton: function() {
        $('#grid').jqGrid("exportToExcel", {
            includeLabels: true,
            includeGroupHeader: true,
            includeFooter: true,
            fileName: "test.xlsx"
        })
    }
});