Grid Data Sources

jqxGrid

The Grid plugin can be bound to multiple types of data collections including arrays, xml, json, tsv, csv or remote data. To data bind the Grid to a data source you need to set its source property to point to an instance of jqxDataAdapter.
The source object represents a set of key/value pairs.
The example code below illustrates how to create jqxDataAdapter from a source object. 
var dataAdapter = new $.jqx.dataAdapter(source, {
    loadComplete: function (data) 
    {
        // data is loaded. 
    },
    loadError: function (xhr, status, error)
    { 
       // data is not loaded.
    }    
});

If you bind the Grid to remote data source using asynchronous requests( that is by default when you specify url in the source object and you didn't set the async field to false), then make sure that you call any method or set a property once the data is loaded. To ensure that you call your code when the Grid is loaded with data, use the Grid's ready callback function or bind to the 'bindingcomplete' event before the Grid's initialization and call your code inside the event handler.

Example with 'ready' callback: 
var url = "../sampledata/beverages.txt";

// prepare the data
var source =
{
    datatype: "json",
    datafields: [
        { name: 'name' },
        { name: 'type' },
        { name: 'calories', type: 'int' },
        { name: 'totalfat' },
        { name: 'protein' }
    ],
    id: 'id',
    url: url
};
var dataAdapter = new $.jqx.dataAdapter(source);

$("#jqxgrid").jqxGrid(
{
    width: 400,
    source: dataAdapter,
    ready: function () {
        $("#jqxgrid").jqxGrid('hidecolumn', 'name');
    },
    columnsresize: true,
    columns: [
        { text: 'Name', datafield: 'name', width: 250 },
        { text: 'Beverage Type', datafield: 'type', width: 250 },
        { text: 'Calories', datafield: 'calories', width: 180 },
        { text: 'Total Fat', datafield: 'totalfat', width: 120 },
        { text: 'Protein', datafield: 'protein', minwidth: 120 }
    ]
});
Example with 'bindingcomplete': 
var url = "../sampledata/beverages.txt";

// prepare the data
var source =
{
    datatype: "json",
    datafields: [
        { name: 'name' },
        { name: 'type' },
        { name: 'calories', type: 'int' },
        { name: 'totalfat' },
        { name: 'protein' }
    ],
    id: 'id',
    url: url
};
var dataAdapter = new $.jqx.dataAdapter(source);

$("#jqxgrid").bind('bindingcomplete', function (event) {
    $("#jqxgrid").jqxGrid('hidecolumn', 'name');
});

$("#jqxgrid").jqxGrid(
{
    width: 400,
    source: dataAdapter,
    columnsresize: true,
    columns: [
        { text: 'Name', datafield: 'name', width: 250 },
        { text: 'Beverage Type', datafield: 'type', width: 250 },
        { text: 'Calories', datafield: 'calories', width: 180 },
        { text: 'Total Fat', datafield: 'totalfat', width: 120 },
        { text: 'Protein', datafield: 'protein', minwidth: 120 }
    ]
});

Initialize a Grid with the source property specified.

Bind the Grid to an array.

The data member is array. The datatype member is set to "array".

The result of the above code is:


What happens when the data source is changed? How to refresh the Grid?

To refresh the Grid, you need to simply set its 'source' property again. 
<!DOCTYPE html>
<html lang="en">
<head>
    <title id='Description'>Grid populated from Array.</title>
    <link rel="stylesheet" href="../../jqwidgets/styles/jqx.base.css" type="text/css" />
    <script type="text/javascript" src="../../scripts/jquery-1.11.1.min.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxcore.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxbuttons.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxscrollbar.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxmenu.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxgrid.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxgrid.selection.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxdata.js"></script>
    <script type="text/javascript">
        $(document).ready(function () {
            // prepare the data
            var data = new Array();
            var generatedata = function (rowscount) {
                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 < rowscount; 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;
                }
                return data;
            }
            var source =
            {
                localdata: generatedata(50),
                datatype: "array"
            };
            var dataAdapter = new $.jqx.dataAdapter(source, {
                downloadComplete: function (data, status, xhr) { },
                loadComplete: function (data) { },
                loadError: function (xhr, status, error) { }
            });
            $("#jqxgrid").jqxGrid(
            {
                width: 670,
                source: dataAdapter,
                columns: [
                  { text: 'First Name', datafield: 'firstname', width: 100 },
                  { text: 'Last Name', datafield: 'lastname', width: 100 },
                  { 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', width: 100, cellsalign: 'right', cellsformat: 'c2' }
                ]
            });
            // refresh Grid data.
            $('input').click(function () {
                source.localdata = generatedata(50);
                $("#jqxgrid").jqxGrid({ source: source });
            });
        });
    </script>
<script async src="https://www.googletagmanager.com/gtag/js?id=G-2FX5PV9DNT"></script><script>window.dataLayer = window.dataLayer || [];function gtag(){dataLayer.push(arguments);}gtag('js', new Date());gtag('config', 'G-2FX5PV9DNT');</script></head>
<body class='default'>
    <div id='jqxWidget' >
        <div id="jqxgrid"></div>
        <input type="button" value="Refresh Data" />
    </div>
</body>
</html>

The result of the above code is:

Bind the Grid to XML data.

In the source initialization, you need to set the following:
- url of a xml file.
- id field.
- root data record.
- record - this is the data record which will be displayed as a row in the Grid.
- datatype - 'xml'
- datafields - the record's member names. You can also specify the mapping to the member's data.

Code Example: 
<?xml version="1.0" encoding="utf-8" standalone="yes"?>
<feed xml:base="http://services.odata.org/Northwind/Northwind.svc/" xmlns:d="http://schemas.microsoft.com/ado/2007/08/dataservices" xmlns:m="http://schemas.microsoft.com/ado/2007/08/dataservices/metadata" xmlns="http://www.w3.org/2005/Atom">
<title type="text">Customers</title>
<updated>2012-11-30T11:39:28Z</updated>
<link rel="self" title="Customers" href="Customers" />
<entry>
  <title type="text"></title>
  <updated>2012-11-30T11:39:28Z</updated>
  <author>
    <name />
  </author>
  <content type="application/xml">
    <m:properties>
      <d:CustomerID>ALFKI</d:CustomerID>
      <d:CompanyName>Alfreds Futterkiste</d:CompanyName>
      <d:ContactName>Maria Anders</d:ContactName>
      <d:ContactTitle>Sales Representative</d:ContactTitle>
      <d:Address>Obere Str. 57</d:Address>
      <d:City>Berlin</d:City>
      <d:Region m:null="true" />
      <d:PostalCode>12209</d:PostalCode>
      <d:Country>Germany</d:Country>
      <d:Phone>030-0074321</d:Phone>
      <d:Fax>030-0076545</d:Fax>
    </m:properties>
  </content>
</entry>
</feed>


<!DOCTYPE html>
<html lang="en">
<head>
    <title id='Description'>This example shows how to create a Grid from XML data.</title>
    <link rel="stylesheet" href="../../jqwidgets/styles/jqx.base.css" type="text/css" />
    <script type="text/javascript" src="../../scripts/jquery-1.11.1.min.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxcore.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxbuttons.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxscrollbar.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxmenu.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxgrid.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxgrid.selection.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxdata.js"></script>
    <script type="text/javascript">
        $(document).ready(function () {
            var url = "customers.xml";
           
            // prepare the data
            var source =
            {
                datatype: "xml",
                datafields: [
                    { name: 'CompanyName', map: 'm\\:properties>d\\:CompanyName' },
                    { name: 'ContactName', map: 'm\\:properties>d\\:ContactName' },
                    { name: 'ContactTitle', map: 'm\\:properties>d\\:ContactTitle' },
                    { name: 'City', map: 'm\\:properties>d\\:City' },
                    { name: 'PostalCode', map: 'm\\:properties>d\\:PostalCode' },
                    { name: 'Country', map: 'm\\:properties>d\\:Country' }
                ],
                root: "entry",
                record: "content",
                id: 'm\\:properties>d\\:CustomerID',
                url: url
            };
            var dataAdapter = new $.jqx.dataAdapter(source, {
                downloadComplete: function (data, status, xhr) { },
                loadComplete: function (data) { },
                loadError: function (xhr, status, error) { }
            });
            // Create jqxGrid
            $("#jqxgrid").jqxGrid(
            {
                width: 670,
                source: dataAdapter,
                columns: [
                  { text: 'Company Name', datafield: 'CompanyName', width: 250 },
                  { text: 'Contact Name', datafield: 'ContactName', width: 150 },
                  { text: 'Contact Title', datafield: 'ContactTitle', width: 180 },
                  { text: 'City', datafield: 'City', width: 120 },
                  { text: 'Postal Code', datafield: 'PostalCode', width: 90 },
                  { text: 'Country', datafield: 'Country', width: 100 }
                ]
            });
        });
    </script>
<script async src="https://www.googletagmanager.com/gtag/js?id=G-2FX5PV9DNT"></script><script>window.dataLayer = window.dataLayer || [];function gtag(){dataLayer.push(arguments);}gtag('js', new Date());gtag('config', 'G-2FX5PV9DNT');</script></head>
<body class='default'>
    <div id='jqxWidget' style="font-size: 13px; font-family: Verdana; float: left;">
        <div id="jqxgrid"></div>
    </div>
</body>
</html>

The result of the above code is:

You can also set the datafield's type in the source object initialization.

The sortcolumn and sortdirection properties in the above code apply a sorting and a sort order to a Grid column.

Bind the Grid to JSON data.

When you bind the Grid to JSON data, you need to set the source object's datatype to 'json'.
Sample JSON data: 
[{
 "id": "1",
 "name": "Hot Chocolate",
 "type": "Chocolate Beverage",
 "calories": "370",
 "totalfat": "16g",
 "protein": "14g"
 }, {
 "id": 2,
 "name": "Peppermint Hot Chocolate",
 "type": "Chocolate Beverage",
 "calories": "440",
 "totalfat": "16g",
 "protein": "13g"
}, {
 "id": "3",
 "name": "Salted Caramel Hot Chocolate",
 "type": "Chocolate Beverage",
 "calories": "450",
 "totalfat": "16g",
 "protein": "13g"
}, {
 "id": "4",
 "name": "White Hot Chocolate",
 "type": "Chocolate Beverage",
 "calories": "420",
 "totalfat": "16g",
 "protein": "12g"
}, {
 "id": "5",
 "name": "Caffe Americano",
 "type": "Espresso Beverage",
 "calories": "15",
 "totalfat": "0g",
 "protein": "1g"
}, {
 "id": "6",
 "name": "Caffe Latte",
 "type": "Espresso Beverage",
 "calories": "190",
 "totalfat": "7g",
 "protein": "12g"
}, {
 "id": "7",
 "name": "Caffe Mocha",
 "type": "Espresso Beverage",
 "calories": "330",
 "totalfat": "15g",
 "protein": "13g"
}, {
 "id": "8",
 "name": "Cappuccino",
 "type": "Espresso Beverage",
 "calories": "120",
 "totalfat": "4g",
 "protein": "8g"
}, {
 "id": "9",
 "name": "Caramel Brulee Latte",
 "type": "Espresso Beverage",
 "calories": "420",
 "totalfat": "9g",
 "protein": "8g"
}, {
 "id": "10",
 "name": "Caramel Macchiato",
 "type": "Espresso Beverage",
 "calories": "240",
 "totalfat": "11g",
 "protein": "10g"
}, {
 "id": "11",
 "name": "Peppermint Hot Chocolate",
 "type": "Espresso Beverage",
 "calories": "440",
 "totalfat": "10g",
 "protein": "13g"
}, {
 "id": "12",
 "name": "Cinnamon Dolce Latte",
 "type": "Espresso Beverage",
 "calories": "260",
 "totalfat": "6g",
 "protein": "10g"
}, {
 "id": "13",
 "name": "Eggnog Latte",
 "type": "Espresso Beverage",
 "calories": "460",
 "totalfat": "16g",
 "protein": "13g"
}, {
 "id": "14",
 "name": "Espresso",
 "type": "Espresso Beverage",
 "calories": "5",
 "totalfat": "1g",
 "protein": "1g"
}, {
 "id": "15",
 "name": "Espresso Con Panna",
 "type": "Espresso Beverage",
 "calories": "30",
 "totalfat": "1g",
 "protein": "0g"
}, {
 "id": "16",
 "name": "Espresso Macchiato",
 "type": "Espresso Beverage",
 "calories": "100",
 "totalfat": "1g",
 "protein": "0g"
}, {
 "id": "17",
 "name": "Flavored Latte",
 "type": "Espresso Beverage",
 "calories": "250",
 "totalfat": "6g",
 "protein": "12g"
}, {
 "id": "18",
 "name": "Gingerbread Latte",
 "type": "Espresso Beverage",
 "calories": "320",
 "totalfat": "13g",
 "protein": "12g"
}, {
 "id": "19",
 "name": "White Chocolate Mocha",
 "type": "Espresso Beverage",
 "calories": "470",
 "totalfat": "18g",
 "protein": "15g"
}, {
 "id": 20,
 "name": "Skinny Peppermint Mocha",
 "type": "Espresso Beverage",
 "calories": 130,
 "totalfat": "15g",
 "protein": "13g"
}, {
 "id": "21",
 "name": "Skinny Flavored Latte",
 "type": "Espresso Beverage",
 "calories": "120",
 "totalfat": "0g",
 "protein": "12g"
}, {
 "id": "22",
 "name": "Pumpkin Spice Latte",
 "type": "Espresso Beverage",
 "calories": "380",
 "totalfat": "13g",
 "protein": "14g"
}, {
 "id": "23",
 "name": "Caffe Vanilla Frappuccino",
 "type": "Frappuccino Blended Beverage",
 "calories": "310",
 "totalfat": "3g",
 "protein": "3g"
}, {
 "id": "24",
 "name": "Caffe Vanilla Frappuccino Light",
 "type": "Frappuccino Blended Beverage",
 "calories": "180",
 "totalfat": "0g",
 "protein": "3g"
}, {
 "id": "25",
 "name": "Caramel Brulee Frappuccino",
 "type": "Frappuccino Blended Beverage",
 "calories": "410",
 "totalfat": "13g",
 "protein": "4g"
}, {
 "id": "26",
 "name": "Caramel Brulee Frappuccino Light",
 "type": "Frappuccino Blended Beverage",
 "calories": "190",
 "totalfat": "0g",
 "protein": "3g"
}, {
 "id": "27",
 "name": "Eggnog Frappuccino",
 "type": "Frappuccino Blended Beverage",
 "calories": "420",
 "totalfat": "18g",
 "protein": "7g"
}, {
 "id": "28",
 "name": "Mocha Frappuccino",
 "type": "Frappuccino Blended Beverage",
 "calories": "400",
 "totalfat": "15g",
 "protein": "5g"
}, {
 "id": "29",
 "name": "Tazo Green Tea Creme Frappuccino",
 "type": "Frappuccino Blended Beverage",
 "calories": "430",
 "totalfat": "16g",
 "protein": "6g"
}]

Code example: 
<!DOCTYPE html>
<html lang="en">
<head>
    <title id='Description'>Grid populated from JSON.</title>
    <link rel="stylesheet" href="../../jqwidgets/styles/jqx.base.css" type="text/css" />
    <script type="text/javascript" src="../../scripts/jquery-1.11.1.min.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxcore.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxbuttons.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxscrollbar.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxmenu.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxgrid.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxgrid.selection.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxdata.js"></script>
    <script type="text/javascript">
        $(document).ready(function () {
            var url = "beverages.txt";
            // prepare the data
            var source =
            {
                datatype: "json",
                datafields: [
                    { name: 'name' },
                    { name: 'type' },
                    { name: 'calories' },
                    { name: 'totalfat' },
                    { name: 'protein' },
                ],
                id: 'id',
                url: url
            };
            var dataAdapter = new $.jqx.dataAdapter(source, {
                downloadComplete: function (data, status, xhr) { },
                loadComplete: function (data) { },
                loadError: function (xhr, status, error) { }
            });
            $("#jqxgrid").jqxGrid(
            {
                width: 670,
                source: dataAdapter,
                columns: [
                  { text: 'Name', datafield: 'name', width: 250 },
                  { text: 'Beverage Type', datafield: 'type', width: 250 },
                  { text: 'Calories', datafield: 'calories', width: 180 },
                  { text: 'Total Fat', datafield: 'totalfat', width: 120 },
                  { text: 'Protein', datafield: 'protein', width: 120 }
              ]
            });
        });
    </script>
<script async src="https://www.googletagmanager.com/gtag/js?id=G-2FX5PV9DNT"></script><script>window.dataLayer = window.dataLayer || [];function gtag(){dataLayer.push(arguments);}gtag('js', new Date());gtag('config', 'G-2FX5PV9DNT');</script></head>
<body class='default'>
    <div id='jqxWidget' style="font-size: 13px; font-family: Verdana; float: left;">
        <div id="jqxgrid"></div>
    </div>
</body>
</html>

The result of the above code is:

If you want to bind the Grid to JSONP data, then you need to set the source object's datatype to 'jsonp'.

Bind the Grid to tab-separated values (TSV).

When you bind the Grid to TSV data, you need to set the source object's datatype to 'tab'.
Code example: 
<!DOCTYPE html>
<html lang="en">
<head>
    <title id='Description'>This example shows how to create a Grid from Tab-delimited text also known as tab-separated values (TSV).</title>
    <link rel="stylesheet" href="../../jqwidgets/styles/jqx.base.css" type="text/css" />
    <script type="text/javascript" src="../../scripts/jquery-1.11.1.min.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxcore.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxdata.js"></script> 
    <script type="text/javascript" src="../../jqwidgets/jqxbuttons.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxscrollbar.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxmenu.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxgrid.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxgrid.selection.js"></script> 
    <script type="text/javascript" src="../../jqwidgets/jqxgrid.columnsresize.js"></script> 
    <script type="text/javascript" src="../../jqwidgets/jqxlistbox.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxdropdownlist.js"></script>
    <script type="text/javascript">
        $(document).ready(function () {
            // prepare the data
            var source =
            {
                datatype: "tab",
                datafields: [
                    { name: 'Year', type: 'int' },
                    { name: 'HPI', type: 'float' },
                    { name: 'BuildCost', type: 'float' },
                    { name: 'Population', type: 'float' },
                    { name: 'Rate', type: 'float' }
                ],
                url: 'homeprices.txt'
            };
            var dataAdapter = new $.jqx.dataAdapter(source);
            $("#jqxgrid").jqxGrid(
            {
                width: 670,
                source: dataAdapter,
                columnsresize: true,
                columns: [
                  { text: 'Year', datafield: 'Year', width: 100, minwidth: 90, maxwidth: 150 },
                  { text: 'HPI', datafield: 'HPI', cellsformat: 'f2', width: 100 },
                  { text: 'Build Cost', datafield: 'BuildCost', cellsformat: 'c2', width: 180 },
                  { text: 'Population', datafield: 'Population', cellsformat: 'f2', width: 100 },
                  { text: 'Rate', datafield: 'Rate', cellsformat: 'f5', minwidth: 100 }
                ]
            });
        });
    </script>
<script async src="https://www.googletagmanager.com/gtag/js?id=G-2FX5PV9DNT"></script><script>window.dataLayer = window.dataLayer || [];function gtag(){dataLayer.push(arguments);}gtag('js', new Date());gtag('config', 'G-2FX5PV9DNT');</script></head>
<body class='default'>
    <div id='jqxWidget'>
        <div id="jqxgrid"></div>
    </div>
</body>
</html>

The result of the above code is:


Bind the Grid to comma-separated values (CSV).

When you bind the Grid to CSV data, you need to set the source object's datatype to 'csv'.
Code example: 
<!DOCTYPE html>
<html lang="en">
<head>
    <title id='Description'>This example shows how to create a Grid from Tab-delimited text also known as tab-separated values (TSV).</title>
    <link rel="stylesheet" href="../../jqwidgets/styles/jqx.base.css" type="text/css" />
    <script type="text/javascript" src="../../scripts/jquery-1.11.1.min.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxcore.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxdata.js"></script> 
    <script type="text/javascript" src="../../jqwidgets/jqxbuttons.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxscrollbar.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxmenu.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxgrid.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxgrid.selection.js"></script> 
    <script type="text/javascript" src="../../jqwidgets/jqxgrid.columnsresize.js"></script> 
    <script type="text/javascript" src="../../jqwidgets/jqxlistbox.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxdropdownlist.js"></script>
    <script type="text/javascript">
        $(document).ready(function () {
            // prepare the data
            var source =
            {
                datatype: "tab",
                datafields: [
                    { name: 'Year', type: 'int' },
                    { name: 'HPI', type: 'float' },
                    { name: 'BuildCost', type: 'float' },
                    { name: 'Population', type: 'float' },
                    { name: 'Rate', type: 'float' }
                ],
                url: 'homeprices.txt'
            };
            var dataAdapter = new $.jqx.dataAdapter(source);
            $("#jqxgrid").jqxGrid(
            {
                width: 670,
                source: dataAdapter,
                columnsresize: true,
                columns: [
                  { text: 'Year', datafield: 'Year', width: 100, minwidth: 90, maxwidth: 150 },
                  { text: 'HPI', datafield: 'HPI', cellsformat: 'f2', width: 100 },
                  { text: 'Build Cost', datafield: 'BuildCost', cellsformat: 'c2', width: 180 },
                  { text: 'Population', datafield: 'Population', cellsformat: 'f2', width: 100 },
                  { text: 'Rate', datafield: 'Rate', cellsformat: 'f5', minwidth: 100 }
                ]
            });
        });
    </script>
<script async src="https://www.googletagmanager.com/gtag/js?id=G-2FX5PV9DNT"></script><script>window.dataLayer = window.dataLayer || [];function gtag(){dataLayer.push(arguments);}gtag('js', new Date());gtag('config', 'G-2FX5PV9DNT');</script></head>
<body class='default'>
    <div id='jqxWidget'>
        <div id="jqxgrid"></div>
    </div>
</body>
</html>

The result of the above code is:


Additional properties of the source object: