jQuery Grid: Adaptive Grid Layout

Grid Adaptive Layout Mode. In Adaptive Layout Mode, jqxGrid automatically shows and hides Grid columns depending on the Grid's width. The hidden columns are displayed after the "..." button is clicked.

A live JavaScript/jQuery example of jqxGrid, the jQWidgets Grid component, with its complete source code below. It is one of 139 jqxGrid demos for jQuery.

jqxGrid API used in this demo

Source code

To run it in your own page, load jqx.base.css, a theme and the library files below from npm (npm install jqwidgets-scripts) or the jsDelivr CDN, then add the markup and the script. jQuery is not required: jqxcore.js provides $. Getting started with jqxGrid shows the setup step by step.

The page loads jqx.base.css, a theme and these library files: jqxcore.js, jqxdata.js, jqxbuttons.js, jqxscrollbar.js, jqxmenu.js, jqxgrid.js, jqxgrid.selection.js, jqxlistbox.js, jqxdropdownlist.js, jqxgrid.pager.js, jqxgrid.columnsresize.js.

It also loads helper scripts of this demo site, which are not part of the library: demos.js (getWidth() and other layout helpers).

script.js

$(document).ready(function () {
    // prepare the data
    var data = new Array();

    var firstNames =
    [
        "Andrew", "Nancy", "Shelley", "Regina", "Yoshi", "Antoni", "Mayumi", "Ian", "Peter", "Lars", "Petra", "Martin", "Sven", "Elio", "Beate", "Cheryl", "Michael", "Guylene"
    ];

    var lastNames =
    [
        "Fuller", "Davolio", "Burke", "Murphy", "Nagase", "Saavedra", "Ohno", "Devling", "Wilson", "Peterson", "Winkler", "Bein", "Petersen", "Rossi", "Vileid", "Saylor", "Bjorn", "Nodier"
    ];

    var productNames =
    [
        "Black Tea", "Green Tea", "Caffe Espresso", "Doubleshot Espresso", "Caffe Latte", "White Chocolate Mocha", "Cramel Latte", "Caffe Americano", "Cappuccino", "Espresso Truffle", "Espresso con Panna", "Peppermint Mocha Twist"
    ];

    var priceValues =
    [
        "2.25", "1.5", "3.0", "3.3", "4.5", "3.6", "3.8", "2.5", "5.0", "1.75", "3.25", "4.0"
    ];

    for (var i = 0; i < 200; i++) {
        var row = {};
        var productindex = Math.floor(Math.random() * productNames.length);
        var price = parseFloat(priceValues[productindex]);
        var quantity = 1 + Math.round(Math.random() * 10);

        row["firstname"] = firstNames[Math.floor(Math.random() * firstNames.length)];
        row["lastname"] = lastNames[Math.floor(Math.random() * lastNames.length)];
        row["productname"] = productNames[productindex];
        row["price"] = price;
        row["quantity"] = quantity;
        row["total"] = price * quantity;

        data[i] = row;
    }

    var source =
    {
        localdata: data,
        datatype: "array",
        datafields:
        [
            { name: 'firstname', type: 'string' },
            { name: 'lastname', type: 'string' },
            { name: 'productname', type: 'string' },
            { name: 'quantity', type: 'number' },
            { name: 'price', type: 'number' },
            { name: 'total', type: 'number' }
        ]
    };

    var dataAdapter = new $.jqx.dataAdapter(source);

    $("#grid").jqxGrid(
    {
        width: 350,
        source: dataAdapter,
        columnsresize: true,
        adaptive: true,
        columns: [
          { text: 'Name', datafield: 'firstname', width: 120 },
          { text: 'Last Name', datafield: 'lastname', width: 120 },
          { text: 'Product', datafield: 'productname', width: 180 },
          { text: 'Quantity', datafield: 'quantity', width: 80, cellsalign: 'right' },
          { text: 'Unit Price', datafield: 'price', width: 90, cellsalign: 'right', cellsformat: 'c2' },
          { text: 'Total', datafield: 'total', cellsalign: 'right', cellsformat: 'c2' }
        ]
    });
});

body.html

<div id="jqxWidget">
    <div id="grid">
    </div>
</div>

Learn more

More jQuery Grid demos