JSFiddle - React, Tailwind, and code Playground

by oscarvanderleij

HTML

<script src="https://www.jqwidgets.com/jquery-widgets-demo/jqwidgets/jqx-all.js"></script>
<link rel="stylesheet" href="https://www.jqwidgets.com/jquery-widgets-demo/jqwidgets/styles/jqx.base.css">
<div id="test_jqxgrid"></div>

JavaScript

$(function() {
    var source = {
        datatype: 'json',
        url: 'https://api.usa.gov/jobs/search.json?query=it+jobs&size=100',
        datafields: [
            { name: 'position_title' }
        ],
    	  sort: function() {
            console.log('sorting');
            $('#test_jqxgrid').jqxGrid('updatebounddata', 'sort');
        }
    };
    
    var dataAdapter = new $.jqx.dataAdapter(source, {
        loadError: function(xhr, status, error) {
            alert(error);
        }
    });
    
    $('#test_jqxgrid').jqxGrid({
        width: '100%',
        filterable: true,
        sortable: true,
        autoshowfiltericon: true,
        autoshowcolumnsmenubutton: false,
        enabletooltips: true,
        height: 500,
        columnsresize: true,
        source: dataAdapter,
        editable: false,
        virtualmode: true,
        altrows: true,
        theme: 'classic',
        showdefaultloadelement: false,
        enablebrowserselection: true,
        rendergridrows: function(params) {
            return params.data;
        },
        ready: function() {
            $('#test_jqxgrid').jqxGrid('sortby', 'position_title', 'desc');
        },
        columns: [
            { text: 'Position Title', datafield: 'position_title' }
        ]
    });
});