JSFiddle - React, Tailwind, and code Playground

by Ivan Kuznetsov

HTML

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

JavaScript

$(function() {
    var source = {
        datatype: 'json',
        url: 'http://api.openweathermap.org/data/2.5/find?lat=55.5&lon=37.5&cnt=300',
        datafields: [
            { name: 'city', map: 'name', type: 'string' },
            { name: 'temperature', map: 'main>temp', type: 'float' },
            { name: 'pressure', map: 'main>pressure', type: 'number' },
            { name: 'humidity', map: 'main>humidity', type: 'number' }
        ],
        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', 'city', 'desc');
        },
        columns: [
            { text: 'City', datafield: 'city' },
            { text: 'Temperature', datafield: 'temperature' },
            { text: 'Pressure', datafield: 'pressure' },
            { text: 'Humidity', datafield: 'humidity' },
        ]
    });
});