Custom Elements

Show Demo List

Theme:

Demo
View Source
API Reference

<!DOCTYPE html><html lang="en"><head>    <title id='Description'>Custom Element DataTable FluidSize</title>    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />    <meta name="viewport" content="width=device-width, initial-scale=1 maximum-scale=1 minimum-scale=1" />    <meta name="description" content="In this example the width and height of the Custom Elements DataTable are set in precentages." />    <link rel="stylesheet" href="../jqwidgets/styles/jqx.base.css" type="text/css" />    <link rel="stylesheet" href="../styles/demos.css" type="text/css" />    <script type="text/javascript" src="../scripts/webcomponents-lite.min.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxcore.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxcore.elements.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/jqxdatatable.js"></script>    <script type="text/javascript" src="../scripts/demos.js"></script>    <style>        html, body {            padding: 3px;            box-sizing: border-box;            margin: 0;            overflow: hidden;            width: 100%;            height: 100%;        }    </style>    <script type='text/javascript'>        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);        JQXElements.settings['dataTableSettings'] =        {            pageable: true,            pagerButtonsCount: 3,            width: '100%',            height: '100%',            pageSize: 50,            source: dataAdapter,            columnsResize: true,            columns: [                { text: 'Name', dataField: 'firstname', width: '20%' },                { text: 'Last Name', dataField: 'lastname', width: '20%' },                { text: 'Product', editable: false, dataField: 'productname', width: '30%' },                { text: 'Quantity', dataField: 'quantity', width: '30%', cellsAlign: 'right', align: 'right' }            ]            }    </script></head><body>    <div class="example-description">        jQWidgets Custom elements DataTable with Fluid Size. The width and height of the Custom element DataTable in this demo are in percentages.    </div>   <jqx-data-table settings="dataTableSettings">   </jqx-data-table></body></html>

altRows boolean false

Sets or gets the altRows property.

<!DOCTYPE html><html lang="en"><head>    <title id='Description'>DataTable Custom Element</title>    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />    <meta name="viewport" content="width=device-width, initial-scale=1 maximum-scale=1 minimum-scale=1" />    <link rel="stylesheet" href="../jqwidgets/styles/site.css" type="text/css" />    <link rel="stylesheet" href="../jqwidgets/styles/jqx.light.css" type="text/css" />    <link rel="stylesheet" href="../styles/demos.css" type="text/css" />    <script type="text/javascript" src="../scripts/webcomponents-lite.min.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxcore.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxcore.elements.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/jqxlistbox.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxdropdownlist.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxdatatable.js"></script>    <script type="text/javascript">		var adapter = new jqx.dataAdapter({			dataType: "json",			dataFields: [				{ name: 'name', type: 'string' },				{ name: 'type', type: 'string' },				{ name: 'calories', type: 'int' },				{ name: 'totalfat', type: 'string' },				{ name: 'protein', type: 'string' }			],			id: 'id',			url: "../sampledata/beverages.txt"		});		var columns = [				{ text: 'Name', dataField: 'name', width: 300 },				{ text: 'Beverage Type', dataField: 'type', width: 300 },				{ text: 'Calories', dataField: 'calories', width: 180 },				{ text: 'Total Fat', dataField: 'totalfat', width: 120 },				{ text: 'Protein', dataField: 'protein' }		];		JQXElements.settings["dataTableSettings"] =		{			pageable:true,pagerButtonsCount:10, source:adapter,columnsResize:true, columns:columns,altRows:true, theme:"light"		}    </script></head><body>   <jqx-data-table settings="dataTableSettings"></jqx-data-table></body></html>

autoRowHeight boolean true

Sets or gets the autoRowHeight property.

<!DOCTYPE html><html lang="en"><head>    <title id='Description'>DataTable Custom Element</title>    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />    <meta name="viewport" content="width=device-width, initial-scale=1 maximum-scale=1 minimum-scale=1" />    <link rel="stylesheet" href="../jqwidgets/styles/site.css" type="text/css" />    <link rel="stylesheet" href="../jqwidgets/styles/jqx.light.css" type="text/css" />    <link rel="stylesheet" href="../styles/demos.css" type="text/css" />    <script type="text/javascript" src="../scripts/webcomponents-lite.min.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxcore.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxcore.elements.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/jqxlistbox.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxdropdownlist.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxdatatable.js"></script>    <script type="text/javascript">		var adapter = new jqx.dataAdapter({			dataType: "json",			dataFields: [				{ name: 'name', type: 'string' },				{ name: 'type', type: 'string' },				{ name: 'calories', type: 'int' },				{ name: 'totalfat', type: 'string' },				{ name: 'protein', type: 'string' }			],			id: 'id',			url: "../sampledata/beverages.txt"		});		var columns = [				{ text: 'Name', dataField: 'name', width: 300 },				{ text: 'Beverage Type', dataField: 'type', width: 300 },				{ text: 'Calories', dataField: 'calories', width: 180 },				{ text: 'Total Fat', dataField: 'totalfat', width: 120 },				{ text: 'Protein', dataField: 'protein' }		];		JQXElements.settings["dataTableSettings"] =		{			pageable:true,pagerButtonsCount:10, source:adapter,columnsResize:true, columns:columns,autoRowHeight:false, theme:"light"		}    </script></head><body>   <jqx-data-table settings="dataTableSettings"></jqx-data-table></body></html>

aggregatesHeight number 34

Sets or gets the aggregatesHeight property.

<!DOCTYPE html><html lang="en"><head>    <title id='Description'>DataTable Custom Element</title>    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />    <meta name="viewport" content="width=device-width, initial-scale=1 maximum-scale=1 minimum-scale=1" />    <link rel="stylesheet" href="../jqwidgets/styles/site.css" type="text/css" />    <link rel="stylesheet" href="../jqwidgets/styles/jqx.light.css" type="text/css" />    <link rel="stylesheet" href="../styles/demos.css" type="text/css" />    <script type="text/javascript" src="../scripts/webcomponents-lite.min.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxcore.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxcore.elements.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/jqxlistbox.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxdropdownlist.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxdatatable.js"></script>    <script type="text/javascript">		var adapter = new jqx.dataAdapter({			dataType: "json",			dataFields: [				{ name: 'name', type: 'string' },				{ name: 'type', type: 'string' },				{ name: 'calories', type: 'int' },				{ name: 'totalfat', type: 'string' },				{ name: 'protein', type: 'string' }			],			id: 'id',			url: "../sampledata/beverages.txt"		});		var columns = [				{ text: 'Name', dataField: 'name', width: 300 },				{ text: 'Beverage Type', dataField: 'type', width: 300 },				{ text: 'Calories', dataField: 'calories', width: 180 },				{ text: 'Total Fat', dataField: 'totalfat', width: 120 },				{ text: 'Protein', dataField: 'protein' }		];		JQXElements.settings["dataTableSettings"] =		{			pageable:true,pagerButtonsCount:10, source:adapter,columnsResize:true, columns:columns,aggregatesHeight:40, theme:"light"		}    </script></head><body>   <jqx-data-table settings="dataTableSettings"></jqx-data-table></body></html>

autoShowLoadElement boolean true

Sets or gets the autoShowLoadElement property.

<!DOCTYPE html><html lang="en"><head>    <title id='Description'>DataTable Custom Element</title>    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />    <meta name="viewport" content="width=device-width, initial-scale=1 maximum-scale=1 minimum-scale=1" />    <link rel="stylesheet" href="../jqwidgets/styles/site.css" type="text/css" />    <link rel="stylesheet" href="../jqwidgets/styles/jqx.light.css" type="text/css" />    <link rel="stylesheet" href="../styles/demos.css" type="text/css" />    <script type="text/javascript" src="../scripts/webcomponents-lite.min.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxcore.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxcore.elements.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/jqxlistbox.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxdropdownlist.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxdatatable.js"></script>    <script type="text/javascript">		var adapter = new jqx.dataAdapter({			dataType: "json",			dataFields: [				{ name: 'name', type: 'string' },				{ name: 'type', type: 'string' },				{ name: 'calories', type: 'int' },				{ name: 'totalfat', type: 'string' },				{ name: 'protein', type: 'string' }			],			id: 'id',			url: "../sampledata/beverages.txt"		});		var columns = [				{ text: 'Name', dataField: 'name', width: 300 },				{ text: 'Beverage Type', dataField: 'type', width: 300 },				{ text: 'Calories', dataField: 'calories', width: 180 },				{ text: 'Total Fat', dataField: 'totalfat', width: 120 },				{ text: 'Protein', dataField: 'protein' }		];		JQXElements.settings["dataTableSettings"] =		{			pageable:true,pagerButtonsCount:10, source:adapter,columnsResize:true, columns:columns,autoShowLoadElement:false, theme:"light"		}    </script></head><body>   <jqx-data-table settings="dataTableSettings"></jqx-data-table></body></html>

columnsHeight number 30

Sets or gets the columnsHeight property.

<!DOCTYPE html><html lang="en"><head>    <title id='Description'>DataTable Custom Element</title>    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />    <meta name="viewport" content="width=device-width, initial-scale=1 maximum-scale=1 minimum-scale=1" />    <link rel="stylesheet" href="../jqwidgets/styles/site.css" type="text/css" />    <link rel="stylesheet" href="../jqwidgets/styles/jqx.light.css" type="text/css" />    <link rel="stylesheet" href="../styles/demos.css" type="text/css" />    <script type="text/javascript" src="../scripts/webcomponents-lite.min.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxcore.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxcore.elements.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/jqxlistbox.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxdropdownlist.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxdatatable.js"></script>    <script type="text/javascript">		var adapter = new jqx.dataAdapter({			dataType: "json",			dataFields: [				{ name: 'name', type: 'string' },				{ name: 'type', type: 'string' },				{ name: 'calories', type: 'int' },				{ name: 'totalfat', type: 'string' },				{ name: 'protein', type: 'string' }			],			id: 'id',			url: "../sampledata/beverages.txt"		});		var columns = [				{ text: 'Name', dataField: 'name', width: 300 },				{ text: 'Beverage Type', dataField: 'type', width: 300 },				{ text: 'Calories', dataField: 'calories', width: 180 },				{ text: 'Total Fat', dataField: 'totalfat', width: 120 },				{ text: 'Protein', dataField: 'protein' }		];		JQXElements.settings["dataTableSettings"] =		{			pageable:true,pagerButtonsCount:10, source:adapter,columnsResize:true, columns:columns,columnsHeight:20, theme:"light"		}    </script></head><body>   <jqx-data-table settings="dataTableSettings"></jqx-data-table></body></html>

columns array []

Sets or gets the columns property.

<!DOCTYPE html><html lang="en"><head>    <title id='Description'>DataTable Custom Element</title>    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />    <meta name="viewport" content="width=device-width, initial-scale=1 maximum-scale=1 minimum-scale=1" />    <link rel="stylesheet" href="../jqwidgets/styles/site.css" type="text/css" />    <link rel="stylesheet" href="../jqwidgets/styles/jqx.light.css" type="text/css" />    <link rel="stylesheet" href="../styles/demos.css" type="text/css" />    <script type="text/javascript" src="../scripts/webcomponents-lite.min.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxcore.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxcore.elements.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/jqxlistbox.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxdropdownlist.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxdatatable.js"></script>    <script type="text/javascript">		var adapter = new jqx.dataAdapter({			dataType: "json",			dataFields: [				{ name: 'name', type: 'string' },				{ name: 'type', type: 'string' },				{ name: 'calories', type: 'int' },				{ name: 'totalfat', type: 'string' },				{ name: 'protein', type: 'string' }			],			id: 'id',			url: "../sampledata/beverages.txt"		});		var columns = [				{ text: 'Name', dataField: 'name', width: 300 },				{ text: 'Beverage Type', dataField: 'type', width: 300 },				{ text: 'Calories', dataField: 'calories', width: 180 },				{ text: 'Total Fat', dataField: 'totalfat', width: 120 },				{ text: 'Protein', dataField: 'protein' }		];		JQXElements.settings["dataTableSettings"] =		{			pageable:true,pagerButtonsCount:10, source:adapter,columnsResize:true, columns:columns, theme:"light"		}    </script></head><body>   <jqx-data-table settings="dataTableSettings"></jqx-data-table></body></html>

columnGroups array []

Sets or gets the columnGroups property.

<!DOCTYPE html><html lang="en"><head>    <title id='Description'>DataTable Custom Element</title>    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />    <meta name="viewport" content="width=device-width, initial-scale=1 maximum-scale=1 minimum-scale=1" />    <link rel="stylesheet" href="../jqwidgets/styles/site.css" type="text/css" />    <link rel="stylesheet" href="../jqwidgets/styles/jqx.light.css" type="text/css" />    <link rel="stylesheet" href="../styles/demos.css" type="text/css" />    <script type="text/javascript" src="../scripts/webcomponents-lite.min.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxcore.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxcore.elements.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/jqxlistbox.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxdropdownlist.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxdatatable.js"></script>    <script type="text/javascript">		var adapter = new jqx.dataAdapter({			dataType: "json",			dataFields: [				{ name: 'name', type: 'string' },				{ name: 'type', type: 'string' },				{ name: 'calories', type: 'int' },				{ name: 'totalfat', type: 'string' },				{ name: 'protein', type: 'string' }			],			id: 'id',			url: "../sampledata/beverages.txt"		});		var columns = [				{ text: 'Name', dataField: 'name', width: 300 },				{ text: 'Beverage Type', dataField: 'type', width: 300 },				{ text: 'Calories', dataField: 'calories', width: 180 },				{ text: 'Total Fat', dataField: 'totalfat', width: 120 },				{ text: 'Protein', dataField: 'protein' }		];		JQXElements.settings["dataTableSettings"] =		{			pageable:true,pagerButtonsCount:10, source:adapter,columnsResize:true, columns:columns, theme:"light", columnGroups:columnGroups		}    </script></head><body>   <jqx-data-table settings="dataTableSettings"></jqx-data-table></body></html>

columnsResize boolean false

Sets or gets the columnsResize property.

<!DOCTYPE html><html lang="en"><head>    <title id='Description'>DataTable Custom Element</title>    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />    <meta name="viewport" content="width=device-width, initial-scale=1 maximum-scale=1 minimum-scale=1" />    <link rel="stylesheet" href="../jqwidgets/styles/site.css" type="text/css" />    <link rel="stylesheet" href="../jqwidgets/styles/jqx.light.css" type="text/css" />    <link rel="stylesheet" href="../styles/demos.css" type="text/css" />    <script type="text/javascript" src="../scripts/webcomponents-lite.min.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxcore.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxcore.elements.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/jqxlistbox.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxdropdownlist.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxdatatable.js"></script>    <script type="text/javascript">		var adapter = new jqx.dataAdapter({			dataType: "json",			dataFields: [				{ name: 'name', type: 'string' },				{ name: 'type', type: 'string' },				{ name: 'calories', type: 'int' },				{ name: 'totalfat', type: 'string' },				{ name: 'protein', type: 'string' }			],			id: 'id',			url: "../sampledata/beverages.txt"		});		var columns = [				{ text: 'Name', dataField: 'name', width: 300 },				{ text: 'Beverage Type', dataField: 'type', width: 300 },				{ text: 'Calories', dataField: 'calories', width: 180 },				{ text: 'Total Fat', dataField: 'totalfat', width: 120 },				{ text: 'Protein', dataField: 'protein' }		];		JQXElements.settings["dataTableSettings"] =		{			pageable:true,pagerButtonsCount:10, source:adapter,columnsResize:true, columns:columns, theme:"light"		}    </script></head><body>   <jqx-data-table settings="dataTableSettings"></jqx-data-table></body></html>

columnsReorder boolean false

Sets or gets the columnsReorder property.

<!DOCTYPE html><html lang="en"><head>    <title id='Description'>DataTable Custom Element</title>    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />    <meta name="viewport" content="width=device-width, initial-scale=1 maximum-scale=1 minimum-scale=1" />    <link rel="stylesheet" href="../jqwidgets/styles/site.css" type="text/css" />    <link rel="stylesheet" href="../jqwidgets/styles/jqx.light.css" type="text/css" />    <link rel="stylesheet" href="../styles/demos.css" type="text/css" />    <script type="text/javascript" src="../scripts/webcomponents-lite.min.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxcore.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxcore.elements.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/jqxlistbox.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxdropdownlist.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxdatatable.js"></script>    <script type="text/javascript">		var adapter = new jqx.dataAdapter({			dataType: "json",			dataFields: [				{ name: 'name', type: 'string' },				{ name: 'type', type: 'string' },				{ name: 'calories', type: 'int' },				{ name: 'totalfat', type: 'string' },				{ name: 'protein', type: 'string' }			],			id: 'id',			url: "../sampledata/beverages.txt"		});		var columns = [				{ text: 'Name', dataField: 'name', width: 300 },				{ text: 'Beverage Type', dataField: 'type', width: 300 },				{ text: 'Calories', dataField: 'calories', width: 180 },				{ text: 'Total Fat', dataField: 'totalfat', width: 120 },				{ text: 'Protein', dataField: 'protein' }		];		JQXElements.settings["dataTableSettings"] =		{			pageable:true,pagerButtonsCount:10, source:adapter,columnsResize:true, columns:columns, theme:"light",columnsReorder:true		}    </script></head><body>   <jqx-data-table settings="dataTableSettings"></jqx-data-table></body></html>

disabled boolean false

Sets or gets the disabled property.

<!DOCTYPE html><html lang="en"><head>    <title id='Description'>DataTable Custom Element</title>    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />    <meta name="viewport" content="width=device-width, initial-scale=1 maximum-scale=1 minimum-scale=1" />    <link rel="stylesheet" href="../jqwidgets/styles/site.css" type="text/css" />    <link rel="stylesheet" href="../jqwidgets/styles/jqx.light.css" type="text/css" />    <link rel="stylesheet" href="../styles/demos.css" type="text/css" />    <script type="text/javascript" src="../scripts/webcomponents-lite.min.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxcore.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxcore.elements.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/jqxlistbox.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxdropdownlist.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxdatatable.js"></script>    <script type="text/javascript">		var adapter = new jqx.dataAdapter({			dataType: "json",			dataFields: [				{ name: 'name', type: 'string' },				{ name: 'type', type: 'string' },				{ name: 'calories', type: 'int' },				{ name: 'totalfat', type: 'string' },				{ name: 'protein', type: 'string' }			],			id: 'id',			url: "../sampledata/beverages.txt"		});		var columns = [				{ text: 'Name', dataField: 'name', width: 300 },				{ text: 'Beverage Type', dataField: 'type', width: 300 },				{ text: 'Calories', dataField: 'calories', width: 180 },				{ text: 'Total Fat', dataField: 'totalfat', width: 120 },				{ text: 'Protein', dataField: 'protein' }		];		JQXElements.settings["dataTableSettings"] =		{			pageable:true,pagerButtonsCount:10, source:adapter,columnsResize:true, columns:columns, theme:"light",disabled:true		}    </script></head><body>   <jqx-data-table settings="dataTableSettings"></jqx-data-table></body></html>

editable boolean false

Sets or gets the editable property.

<!DOCTYPE html><html lang="en"><head>    <title id='Description'>DataTable Custom Element</title>    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />    <meta name="viewport" content="width=device-width, initial-scale=1 maximum-scale=1 minimum-scale=1" />    <link rel="stylesheet" href="../jqwidgets/styles/site.css" type="text/css" />    <link rel="stylesheet" href="../jqwidgets/styles/jqx.light.css" type="text/css" />    <link rel="stylesheet" href="../styles/demos.css" type="text/css" />    <script type="text/javascript" src="../scripts/webcomponents-lite.min.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxcore.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxcore.elements.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/jqxlistbox.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxdropdownlist.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxdatatable.js"></script>    <script type="text/javascript">		var adapter = new jqx.dataAdapter({			dataType: "json",			dataFields: [				{ name: 'name', type: 'string' },				{ name: 'type', type: 'string' },				{ name: 'calories', type: 'int' },				{ name: 'totalfat', type: 'string' },				{ name: 'protein', type: 'string' }			],			id: 'id',			url: "../sampledata/beverages.txt"		});		var columns = [				{ text: 'Name', dataField: 'name', width: 300 },				{ text: 'Beverage Type', dataField: 'type', width: 300 },				{ text: 'Calories', dataField: 'calories', width: 180 },				{ text: 'Total Fat', dataField: 'totalfat', width: 120 },				{ text: 'Protein', dataField: 'protein' }		];		JQXElements.settings["dataTableSettings"] =		{			pageable:true,pagerButtonsCount:10, source:adapter,columnsResize:true, columns:columns, theme:"light",editable:true		}    </script></head><body>   <jqx-data-table settings="dataTableSettings"></jqx-data-table></body></html>

editSettings object { saveOnPageChange: true, saveOnBlur: true, saveOnSelectionChange: true, cancelOnEsc: true, saveOnEnter: true, editSingleCell: false, editOnDoubleClick: true, editOnF2: true }

Sets or gets the editSettings property.

<!DOCTYPE html><html lang="en"><head>    <title id='Description'>DataTable Custom Element</title>    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />    <meta name="viewport" content="width=device-width, initial-scale=1 maximum-scale=1 minimum-scale=1" />    <link rel="stylesheet" href="../jqwidgets/styles/site.css" type="text/css" />    <link rel="stylesheet" href="../jqwidgets/styles/jqx.light.css" type="text/css" />    <link rel="stylesheet" href="../styles/demos.css" type="text/css" />    <script type="text/javascript" src="../scripts/webcomponents-lite.min.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxcore.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxcore.elements.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/jqxlistbox.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxdropdownlist.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxdatatable.js"></script>    <script type="text/javascript">		var adapter = new jqx.dataAdapter({			dataType: "json",			dataFields: [				{ name: 'name', type: 'string' },				{ name: 'type', type: 'string' },				{ name: 'calories', type: 'int' },				{ name: 'totalfat', type: 'string' },				{ name: 'protein', type: 'string' }			],			id: 'id',			url: "../sampledata/beverages.txt"		});		var columns = [				{ text: 'Name', dataField: 'name', width: 300 },				{ text: 'Beverage Type', dataField: 'type', width: 300 },				{ text: 'Calories', dataField: 'calories', width: 180 },				{ text: 'Total Fat', dataField: 'totalfat', width: 120 },				{ text: 'Protein', dataField: 'protein' }		];		JQXElements.settings["dataTableSettings"] =		{			pageable:true,pagerButtonsCount:10, source:adapter,columnsResize:true, columns:columns, theme:"light", editSettings:"editSettings"		}    </script></head><body>   <jqx-data-table settings="dataTableSettings"></jqx-data-table></body></html>

exportSettings object { columnsHeader: true, hiddenColumns: false, serverURL: null, characterSet: null, recordsInView: true, fileName: "jqxDataTable"}

Sets or gets the exportSettings property.

<!DOCTYPE html><html lang="en"><head>    <title id='Description'>DataTable Custom Element</title>    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />    <meta name="viewport" content="width=device-width, initial-scale=1 maximum-scale=1 minimum-scale=1" />    <link rel="stylesheet" href="../jqwidgets/styles/site.css" type="text/css" />    <link rel="stylesheet" href="../jqwidgets/styles/jqx.light.css" type="text/css" />    <link rel="stylesheet" href="../styles/demos.css" type="text/css" />    <script type="text/javascript" src="../scripts/webcomponents-lite.min.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxcore.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxcore.elements.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/jqxlistbox.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxdropdownlist.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxdatatable.js"></script>    <script type="text/javascript">		var adapter = new jqx.dataAdapter({			dataType: "json",			dataFields: [				{ name: 'name', type: 'string' },				{ name: 'type', type: 'string' },				{ name: 'calories', type: 'int' },				{ name: 'totalfat', type: 'string' },				{ name: 'protein', type: 'string' }			],			id: 'id',			url: "../sampledata/beverages.txt"		});		var columns = [				{ text: 'Name', dataField: 'name', width: 300 },				{ text: 'Beverage Type', dataField: 'type', width: 300 },				{ text: 'Calories', dataField: 'calories', width: 180 },				{ text: 'Total Fat', dataField: 'totalfat', width: 120 },				{ text: 'Protein', dataField: 'protein' }		];		JQXElements.settings["dataTableSettings"] =		{			pageable:true,pagerButtonsCount:10, source:adapter,columnsResize:true, columns:columns, theme:"light", exportSettings:"exportSettings"		}    </script></head><body>   <jqx-data-table settings="dataTableSettings"></jqx-data-table></body></html>

enableHover boolean true

Sets or gets the enableHover property.

<!DOCTYPE html><html lang="en"><head>    <title id='Description'>DataTable Custom Element</title>    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />    <meta name="viewport" content="width=device-width, initial-scale=1 maximum-scale=1 minimum-scale=1" />    <link rel="stylesheet" href="../jqwidgets/styles/site.css" type="text/css" />    <link rel="stylesheet" href="../jqwidgets/styles/jqx.light.css" type="text/css" />    <link rel="stylesheet" href="../styles/demos.css" type="text/css" />    <script type="text/javascript" src="../scripts/webcomponents-lite.min.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxcore.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxcore.elements.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/jqxlistbox.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxdropdownlist.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxdatatable.js"></script>    <script type="text/javascript">		var adapter = new jqx.dataAdapter({			dataType: "json",			dataFields: [				{ name: 'name', type: 'string' },				{ name: 'type', type: 'string' },				{ name: 'calories', type: 'int' },				{ name: 'totalfat', type: 'string' },				{ name: 'protein', type: 'string' }			],			id: 'id',			url: "../sampledata/beverages.txt"		});		var columns = [				{ text: 'Name', dataField: 'name', width: 300 },				{ text: 'Beverage Type', dataField: 'type', width: 300 },				{ text: 'Calories', dataField: 'calories', width: 180 },				{ text: 'Total Fat', dataField: 'totalfat', width: 120 },				{ text: 'Protein', dataField: 'protein' }		];		JQXElements.settings["dataTableSettings"] =		{			pageable:true,pagerButtonsCount:10, source:adapter,columnsResize:true, columns:columns, theme:"light",enableHover:true		}    </script></head><body>   <jqx-data-table settings="dataTableSettings"></jqx-data-table></body></html>

enableBrowserSelection boolean false

Sets or gets the enableBrowserSelection property.

<!DOCTYPE html><html lang="en"><head>    <title id='Description'>DataTable Custom Element</title>    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />    <meta name="viewport" content="width=device-width, initial-scale=1 maximum-scale=1 minimum-scale=1" />    <link rel="stylesheet" href="../jqwidgets/styles/site.css" type="text/css" />    <link rel="stylesheet" href="../jqwidgets/styles/jqx.light.css" type="text/css" />    <link rel="stylesheet" href="../styles/demos.css" type="text/css" />    <script type="text/javascript" src="../scripts/webcomponents-lite.min.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxcore.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxcore.elements.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/jqxlistbox.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxdropdownlist.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxdatatable.js"></script>    <script type="text/javascript">		var adapter = new jqx.dataAdapter({			dataType: "json",			dataFields: [				{ name: 'name', type: 'string' },				{ name: 'type', type: 'string' },				{ name: 'calories', type: 'int' },				{ name: 'totalfat', type: 'string' },				{ name: 'protein', type: 'string' }			],			id: 'id',			url: "../sampledata/beverages.txt"		});		var columns = [				{ text: 'Name', dataField: 'name', width: 300 },				{ text: 'Beverage Type', dataField: 'type', width: 300 },				{ text: 'Calories', dataField: 'calories', width: 180 },				{ text: 'Total Fat', dataField: 'totalfat', width: 120 },				{ text: 'Protein', dataField: 'protein' }		];		JQXElements.settings["dataTableSettings"] =		{			pageable:true,pagerButtonsCount:10, source:adapter,columnsResize:true, columns:columns, theme:"light",enableBrowserSelection:true		}    </script></head><body>   <jqx-data-table settings="dataTableSettings"></jqx-data-table></body></html>

filterable boolean false

Sets or gets the filterable property.

<!DOCTYPE html><html lang="en"><head>    <title id='Description'>DataTable Custom Element</title>    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />    <meta name="viewport" content="width=device-width, initial-scale=1 maximum-scale=1 minimum-scale=1" />    <link rel="stylesheet" href="../jqwidgets/styles/site.css" type="text/css" />    <link rel="stylesheet" href="../jqwidgets/styles/jqx.light.css" type="text/css" />    <link rel="stylesheet" href="../styles/demos.css" type="text/css" />    <script type="text/javascript" src="../scripts/webcomponents-lite.min.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxcore.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxcore.elements.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/jqxlistbox.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxdropdownlist.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxdatatable.js"></script>    <script type="text/javascript">		var adapter = new jqx.dataAdapter({			dataType: "json",			dataFields: [				{ name: 'name', type: 'string' },				{ name: 'type', type: 'string' },				{ name: 'calories', type: 'int' },				{ name: 'totalfat', type: 'string' },				{ name: 'protein', type: 'string' }			],			id: 'id',			url: "../sampledata/beverages.txt"		});		var columns = [				{ text: 'Name', dataField: 'name', width: 300 },				{ text: 'Beverage Type', dataField: 'type', width: 300 },				{ text: 'Calories', dataField: 'calories', width: 180 },				{ text: 'Total Fat', dataField: 'totalfat', width: 120 },				{ text: 'Protein', dataField: 'protein' }		];		JQXElements.settings["dataTableSettings"] =		{			pageable:true,pagerButtonsCount:10, source:adapter,columnsResize:true, columns:columns, theme:"light",filterable:true		}    </script></head><body>   <jqx-data-table settings="dataTableSettings"></jqx-data-table></body></html>

filterHeight number 30

Sets or gets the filterHeight property.

<!DOCTYPE html><html lang="en"><head>    <title id='Description'>DataTable Custom Element</title>    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />    <meta name="viewport" content="width=device-width, initial-scale=1 maximum-scale=1 minimum-scale=1" />    <link rel="stylesheet" href="../jqwidgets/styles/site.css" type="text/css" />    <link rel="stylesheet" href="../jqwidgets/styles/jqx.light.css" type="text/css" />    <link rel="stylesheet" href="../styles/demos.css" type="text/css" />    <script type="text/javascript" src="../scripts/webcomponents-lite.min.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxcore.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxcore.elements.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/jqxlistbox.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxdropdownlist.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxdatatable.js"></script>    <script type="text/javascript">		var adapter = new jqx.dataAdapter({			dataType: "json",			dataFields: [				{ name: 'name', type: 'string' },				{ name: 'type', type: 'string' },				{ name: 'calories', type: 'int' },				{ name: 'totalfat', type: 'string' },				{ name: 'protein', type: 'string' }			],			id: 'id',			url: "../sampledata/beverages.txt"		});		var columns = [				{ text: 'Name', dataField: 'name', width: 300 },				{ text: 'Beverage Type', dataField: 'type', width: 300 },				{ text: 'Calories', dataField: 'calories', width: 180 },				{ text: 'Total Fat', dataField: 'totalfat', width: 120 },				{ text: 'Protein', dataField: 'protein' }		];		JQXElements.settings["dataTableSettings"] =		{			pageable:true,pagerButtonsCount:10, source:adapter,columnsResize:true, columns:columns, theme:"light",filterHeight:35,filterable:true		}    </script></head><body>   <jqx-data-table settings="dataTableSettings"></jqx-data-table></body></html>

filterMode string "default"

Sets or gets the filterMode property.

<!DOCTYPE html><html lang="en"><head>    <title id='Description'>DataTable Custom Element</title>    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />    <meta name="viewport" content="width=device-width, initial-scale=1 maximum-scale=1 minimum-scale=1" />    <link rel="stylesheet" href="../jqwidgets/styles/site.css" type="text/css" />    <link rel="stylesheet" href="../jqwidgets/styles/jqx.light.css" type="text/css" />    <link rel="stylesheet" href="../styles/demos.css" type="text/css" />    <script type="text/javascript" src="../scripts/webcomponents-lite.min.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxcore.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxcore.elements.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/jqxlistbox.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxdropdownlist.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxdatatable.js"></script>    <script type="text/javascript">		var adapter = new jqx.dataAdapter({			dataType: "json",			dataFields: [				{ name: 'name', type: 'string' },				{ name: 'type', type: 'string' },				{ name: 'calories', type: 'int' },				{ name: 'totalfat', type: 'string' },				{ name: 'protein', type: 'string' }			],			id: 'id',			url: "../sampledata/beverages.txt"		});		var columns = [				{ text: 'Name', dataField: 'name', width: 300 },				{ text: 'Beverage Type', dataField: 'type', width: 300 },				{ text: 'Calories', dataField: 'calories', width: 180 },				{ text: 'Total Fat', dataField: 'totalfat', width: 120 },				{ text: 'Protein', dataField: 'protein' }		];		JQXElements.settings["dataTableSettings"] =		{			pageable:true,pagerButtonsCount:10, source:adapter,columnsResize:true, columns:columns, theme:"light",filterable:true, filterMode:"advanced"		}    </script></head><body>   <jqx-data-table settings="dataTableSettings"></jqx-data-table></body></html>

groups array []

Sets or gets the groups property.

<!DOCTYPE html><html lang="en"><head>    <title id='Description'>DataTable Custom Element</title>    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />    <meta name="viewport" content="width=device-width, initial-scale=1 maximum-scale=1 minimum-scale=1" />    <link rel="stylesheet" href="../jqwidgets/styles/site.css" type="text/css" />    <link rel="stylesheet" href="../jqwidgets/styles/jqx.light.css" type="text/css" />    <link rel="stylesheet" href="../styles/demos.css" type="text/css" />    <script type="text/javascript" src="../scripts/webcomponents-lite.min.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxcore.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxcore.elements.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/jqxlistbox.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxdropdownlist.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxdatatable.js"></script>    <script type="text/javascript">		var adapter = new jqx.dataAdapter({			dataType: "json",			dataFields: [				{ name: 'name', type: 'string' },				{ name: 'type', type: 'string' },				{ name: 'calories', type: 'int' },				{ name: 'totalfat', type: 'string' },				{ name: 'protein', type: 'string' }			],			id: 'id',			url: "../sampledata/beverages.txt"		});		var columns = [				{ text: 'Name', dataField: 'name', width: 300 },				{ text: 'Beverage Type', dataField: 'type', width: 300 },				{ text: 'Calories', dataField: 'calories', width: 180 },				{ text: 'Total Fat', dataField: 'totalfat', width: 120 },				{ text: 'Protein', dataField: 'protein' }		];		JQXElements.settings["dataTableSettings"] =		{			pageable:true,pagerButtonsCount:10, source:adapter,columnsResize:true, columns:columns, theme:"light", groups:'['firstname']'		}    </script></head><body>   <jqx-data-table settings="dataTableSettings"></jqx-data-table></body></html>

groupsRenderer function null

Sets or gets the groupsRenderer property.

<!DOCTYPE html><html lang="en"><head>    <title id='Description'>DataTable Custom Element</title>    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />    <meta name="viewport" content="width=device-width, initial-scale=1 maximum-scale=1 minimum-scale=1" />    <link rel="stylesheet" href="../jqwidgets/styles/site.css" type="text/css" />    <link rel="stylesheet" href="../jqwidgets/styles/jqx.light.css" type="text/css" />    <link rel="stylesheet" href="../styles/demos.css" type="text/css" />    <script type="text/javascript" src="../scripts/webcomponents-lite.min.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxcore.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxcore.elements.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/jqxlistbox.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxdropdownlist.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxdatatable.js"></script>    <script type="text/javascript">		var adapter = new jqx.dataAdapter({			dataType: "json",			dataFields: [				{ name: 'name', type: 'string' },				{ name: 'type', type: 'string' },				{ name: 'calories', type: 'int' },				{ name: 'totalfat', type: 'string' },				{ name: 'protein', type: 'string' }			],			id: 'id',			url: "../sampledata/beverages.txt"		});		var columns = [				{ text: 'Name', dataField: 'name', width: 300 },				{ text: 'Beverage Type', dataField: 'type', width: 300 },				{ text: 'Calories', dataField: 'calories', width: 180 },				{ text: 'Total Fat', dataField: 'totalfat', width: 120 },				{ text: 'Protein', dataField: 'protein' }		];		JQXElements.settings["dataTableSettings"] =		{			pageable:true,pagerButtonsCount:10, source:adapter,columnsResize:true, columns:columns, theme:"light", groupsRenderer:"groupsRenderer"		}    </script></head><body>   <jqx-data-table settings="dataTableSettings"></jqx-data-table></body></html>

height number null

Sets or gets the height property.

<!DOCTYPE html><html lang="en"><head>    <title id='Description'>DataTable Custom Element</title>    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />    <meta name="viewport" content="width=device-width, initial-scale=1 maximum-scale=1 minimum-scale=1" />    <link rel="stylesheet" href="../jqwidgets/styles/site.css" type="text/css" />    <link rel="stylesheet" href="../jqwidgets/styles/jqx.light.css" type="text/css" />    <link rel="stylesheet" href="../styles/demos.css" type="text/css" />    <script type="text/javascript" src="../scripts/webcomponents-lite.min.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxcore.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxcore.elements.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/jqxlistbox.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxdropdownlist.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxdatatable.js"></script>    <script type="text/javascript">		var adapter = new jqx.dataAdapter({			dataType: "json",			dataFields: [				{ name: 'name', type: 'string' },				{ name: 'type', type: 'string' },				{ name: 'calories', type: 'int' },				{ name: 'totalfat', type: 'string' },				{ name: 'protein', type: 'string' }			],			id: 'id',			url: "../sampledata/beverages.txt"		});		var columns = [				{ text: 'Name', dataField: 'name', width: 300 },				{ text: 'Beverage Type', dataField: 'type', width: 300 },				{ text: 'Calories', dataField: 'calories', width: 180 },				{ text: 'Total Fat', dataField: 'totalfat', width: 120 },				{ text: 'Protein', dataField: 'protein' }		];		JQXElements.settings["dataTableSettings"] =		{			pageable:true,pagerButtonsCount:10, source:adapter,columnsResize:true, columns:columns, theme:"light",height:350		}    </script></head><body>   <jqx-data-table settings="dataTableSettings"></jqx-data-table></body></html>

initRowDetails function null

Sets or gets the initRowDetails property.

<!DOCTYPE html><html lang="en"><head>    <title id='Description'>DataTable Custom Element</title>    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />    <meta name="viewport" content="width=device-width, initial-scale=1 maximum-scale=1 minimum-scale=1" />    <link rel="stylesheet" href="../jqwidgets/styles/site.css" type="text/css" />    <link rel="stylesheet" href="../jqwidgets/styles/jqx.light.css" type="text/css" />    <link rel="stylesheet" href="../styles/demos.css" type="text/css" />    <script type="text/javascript" src="../scripts/webcomponents-lite.min.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxcore.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxcore.elements.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/jqxlistbox.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxdropdownlist.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxdatatable.js"></script>    <script type="text/javascript">		var adapter = new jqx.dataAdapter({			dataType: "json",			dataFields: [				{ name: 'name', type: 'string' },				{ name: 'type', type: 'string' },				{ name: 'calories', type: 'int' },				{ name: 'totalfat', type: 'string' },				{ name: 'protein', type: 'string' }			],			id: 'id',			url: "../sampledata/beverages.txt"		});		var columns = [				{ text: 'Name', dataField: 'name', width: 300 },				{ text: 'Beverage Type', dataField: 'type', width: 300 },				{ text: 'Calories', dataField: 'calories', width: 180 },				{ text: 'Total Fat', dataField: 'totalfat', width: 120 },				{ text: 'Protein', dataField: 'protein' }		];		JQXElements.settings["dataTableSettings"] =		{			pageable:true,pagerButtonsCount:10, source:adapter,columnsResize:true, columns:columns, theme:"light", initRowDetails:"initRowDetails"		}    </script></head><body>   <jqx-data-table settings="dataTableSettings"></jqx-data-table></body></html>

incrementalSearch boolean true

Sets or gets the incrementalSearch property.

<!DOCTYPE html><html lang="en"><head>    <title id='Description'>DataTable Custom Element</title>    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />    <meta name="viewport" content="width=device-width, initial-scale=1 maximum-scale=1 minimum-scale=1" />    <link rel="stylesheet" href="../jqwidgets/styles/site.css" type="text/css" />    <link rel="stylesheet" href="../jqwidgets/styles/jqx.light.css" type="text/css" />    <link rel="stylesheet" href="../styles/demos.css" type="text/css" />    <script type="text/javascript" src="../scripts/webcomponents-lite.min.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxcore.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxcore.elements.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/jqxlistbox.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxdropdownlist.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxdatatable.js"></script>    <script type="text/javascript">		var adapter = new jqx.dataAdapter({			dataType: "json",			dataFields: [				{ name: 'name', type: 'string' },				{ name: 'type', type: 'string' },				{ name: 'calories', type: 'int' },				{ name: 'totalfat', type: 'string' },				{ name: 'protein', type: 'string' }			],			id: 'id',			url: "../sampledata/beverages.txt"		});		var columns = [				{ text: 'Name', dataField: 'name', width: 300 },				{ text: 'Beverage Type', dataField: 'type', width: 300 },				{ text: 'Calories', dataField: 'calories', width: 180 },				{ text: 'Total Fat', dataField: 'totalfat', width: 120 },				{ text: 'Protein', dataField: 'protein' }		];		JQXElements.settings["dataTableSettings"] =		{			pageable:true,pagerButtonsCount:10, source:adapter,columnsResize:true, columns:columns, theme:"light",incrementalSearch:true		}    </script></head><body>   <jqx-data-table settings="dataTableSettings"></jqx-data-table></body></html>

localization object default localization strings.

Sets or gets the localization property.

<!DOCTYPE html><html lang="en"><head>    <title id='Description'>DataTable Custom Element</title>    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />    <meta name="viewport" content="width=device-width, initial-scale=1 maximum-scale=1 minimum-scale=1" />    <link rel="stylesheet" href="../jqwidgets/styles/site.css" type="text/css" />    <link rel="stylesheet" href="../jqwidgets/styles/jqx.light.css" type="text/css" />    <link rel="stylesheet" href="../styles/demos.css" type="text/css" />    <script type="text/javascript" src="../scripts/webcomponents-lite.min.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxcore.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxcore.elements.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/jqxlistbox.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxdropdownlist.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxdatatable.js"></script>    <script type="text/javascript">		var adapter = new jqx.dataAdapter({			dataType: "json",			dataFields: [				{ name: 'name', type: 'string' },				{ name: 'type', type: 'string' },				{ name: 'calories', type: 'int' },				{ name: 'totalfat', type: 'string' },				{ name: 'protein', type: 'string' }			],			id: 'id',			url: "../sampledata/beverages.txt"		});		var columns = [				{ text: 'Name', dataField: 'name', width: 300 },				{ text: 'Beverage Type', dataField: 'type', width: 300 },				{ text: 'Calories', dataField: 'calories', width: 180 },				{ text: 'Total Fat', dataField: 'totalfat', width: 120 },				{ text: 'Protein', dataField: 'protein' }		];		JQXElements.settings["dataTableSettings"] =		{			pageable:true,pagerButtonsCount:10, source:adapter,columnsResize:true, columns:columns, theme:"light", localization:"localization"		}    </script></head><body>   <jqx-data-table settings="dataTableSettings"></jqx-data-table></body></html>

pagerHeight number 28

Sets or gets the pagerHeight property.

<!DOCTYPE html><html lang="en"><head>    <title id='Description'>DataTable Custom Element</title>    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />    <meta name="viewport" content="width=device-width, initial-scale=1 maximum-scale=1 minimum-scale=1" />    <link rel="stylesheet" href="../jqwidgets/styles/site.css" type="text/css" />    <link rel="stylesheet" href="../jqwidgets/styles/jqx.light.css" type="text/css" />    <link rel="stylesheet" href="../styles/demos.css" type="text/css" />    <script type="text/javascript" src="../scripts/webcomponents-lite.min.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxcore.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxcore.elements.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/jqxlistbox.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxdropdownlist.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxdatatable.js"></script>    <script type="text/javascript">		var adapter = new jqx.dataAdapter({			dataType: "json",			dataFields: [				{ name: 'name', type: 'string' },				{ name: 'type', type: 'string' },				{ name: 'calories', type: 'int' },				{ name: 'totalfat', type: 'string' },				{ name: 'protein', type: 'string' }			],			id: 'id',			url: "../sampledata/beverages.txt"		});		var columns = [				{ text: 'Name', dataField: 'name', width: 300 },				{ text: 'Beverage Type', dataField: 'type', width: 300 },				{ text: 'Calories', dataField: 'calories', width: 180 },				{ text: 'Total Fat', dataField: 'totalfat', width: 120 },				{ text: 'Protein', dataField: 'protein' }		];		JQXElements.settings["dataTableSettings"] =		{			pageable:true,pagerButtonsCount:10, source:adapter,columnsResize:true, columns:columns, theme:"light",pagerHeight:35		}    </script></head><body>   <jqx-data-table settings="dataTableSettings"></jqx-data-table></body></html>

pageSize number 10

Sets or gets the pageSize property.

<!DOCTYPE html><html lang="en"><head>    <title id='Description'>DataTable Custom Element</title>    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />    <meta name="viewport" content="width=device-width, initial-scale=1 maximum-scale=1 minimum-scale=1" />    <link rel="stylesheet" href="../jqwidgets/styles/site.css" type="text/css" />    <link rel="stylesheet" href="../jqwidgets/styles/jqx.light.css" type="text/css" />    <link rel="stylesheet" href="../styles/demos.css" type="text/css" />    <script type="text/javascript" src="../scripts/webcomponents-lite.min.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxcore.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxcore.elements.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/jqxlistbox.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxdropdownlist.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxdatatable.js"></script>    <script type="text/javascript">		var adapter = new jqx.dataAdapter({			dataType: "json",			dataFields: [				{ name: 'name', type: 'string' },				{ name: 'type', type: 'string' },				{ name: 'calories', type: 'int' },				{ name: 'totalfat', type: 'string' },				{ name: 'protein', type: 'string' }			],			id: 'id',			url: "../sampledata/beverages.txt"		});		var columns = [				{ text: 'Name', dataField: 'name', width: 300 },				{ text: 'Beverage Type', dataField: 'type', width: 300 },				{ text: 'Calories', dataField: 'calories', width: 180 },				{ text: 'Total Fat', dataField: 'totalfat', width: 120 },				{ text: 'Protein', dataField: 'protein' }		];		JQXElements.settings["dataTableSettings"] =		{			pageable:true,pagerButtonsCount:10, source:adapter,columnsResize:true, columns:columns, theme:"light",pageSize:15		}    </script></head><body>   <jqx-data-table settings="dataTableSettings"></jqx-data-table></body></html>

pageSizeOptions array ['5', '10', '20']

Sets or gets the pageSizeOptions property.

<!DOCTYPE html><html lang="en"><head>    <title id='Description'>DataTable Custom Element</title>    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />    <meta name="viewport" content="width=device-width, initial-scale=1 maximum-scale=1 minimum-scale=1" />    <link rel="stylesheet" href="../jqwidgets/styles/site.css" type="text/css" />    <link rel="stylesheet" href="../jqwidgets/styles/jqx.light.css" type="text/css" />    <link rel="stylesheet" href="../styles/demos.css" type="text/css" />    <script type="text/javascript" src="../scripts/webcomponents-lite.min.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxcore.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxcore.elements.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/jqxlistbox.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxdropdownlist.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxdatatable.js"></script>    <script type="text/javascript">		var adapter = new jqx.dataAdapter({			dataType: "json",			dataFields: [				{ name: 'name', type: 'string' },				{ name: 'type', type: 'string' },				{ name: 'calories', type: 'int' },				{ name: 'totalfat', type: 'string' },				{ name: 'protein', type: 'string' }			],			id: 'id',			url: "../sampledata/beverages.txt"		});		var columns = [				{ text: 'Name', dataField: 'name', width: 300 },				{ text: 'Beverage Type', dataField: 'type', width: 300 },				{ text: 'Calories', dataField: 'calories', width: 180 },				{ text: 'Total Fat', dataField: 'totalfat', width: 120 },				{ text: 'Protein', dataField: 'protein' }		];		JQXElements.settings["dataTableSettings"] =		{			pageable:true,pagerButtonsCount:10, source:adapter,columnsResize:true, columns:columns, theme:"light", pageSizeOptions:'[15, 25, 35]'		}    </script></head><body>   <jqx-data-table settings="dataTableSettings"></jqx-data-table></body></html>

pageable boolean false

Sets or gets the pageable property.

<!DOCTYPE html><html lang="en"><head>    <title id='Description'>DataTable Custom Element</title>    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />    <meta name="viewport" content="width=device-width, initial-scale=1 maximum-scale=1 minimum-scale=1" />    <link rel="stylesheet" href="../jqwidgets/styles/site.css" type="text/css" />    <link rel="stylesheet" href="../jqwidgets/styles/jqx.light.css" type="text/css" />    <link rel="stylesheet" href="../styles/demos.css" type="text/css" />    <script type="text/javascript" src="../scripts/webcomponents-lite.min.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxcore.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxcore.elements.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/jqxlistbox.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxdropdownlist.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxdatatable.js"></script>    <script type="text/javascript">		var adapter = new jqx.dataAdapter({			dataType: "json",			dataFields: [				{ name: 'name', type: 'string' },				{ name: 'type', type: 'string' },				{ name: 'calories', type: 'int' },				{ name: 'totalfat', type: 'string' },				{ name: 'protein', type: 'string' }			],			id: 'id',			url: "../sampledata/beverages.txt"		});		var columns = [				{ text: 'Name', dataField: 'name', width: 300 },				{ text: 'Beverage Type', dataField: 'type', width: 300 },				{ text: 'Calories', dataField: 'calories', width: 180 },				{ text: 'Total Fat', dataField: 'totalfat', width: 120 },				{ text: 'Protein', dataField: 'protein' }		];		JQXElements.settings["dataTableSettings"] =		{			pageable:true,pagerButtonsCount:10, source:adapter,columnsResize:true, columns:columns, theme:"light"		}    </script></head><body>   <jqx-data-table settings="dataTableSettings"></jqx-data-table></body></html>

pagerPosition string "bottom"

Sets or gets the pagerPosition property.

<!DOCTYPE html><html lang="en"><head>    <title id='Description'>DataTable Custom Element</title>    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />    <meta name="viewport" content="width=device-width, initial-scale=1 maximum-scale=1 minimum-scale=1" />    <link rel="stylesheet" href="../jqwidgets/styles/site.css" type="text/css" />    <link rel="stylesheet" href="../jqwidgets/styles/jqx.light.css" type="text/css" />    <link rel="stylesheet" href="../styles/demos.css" type="text/css" />    <script type="text/javascript" src="../scripts/webcomponents-lite.min.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxcore.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxcore.elements.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/jqxlistbox.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxdropdownlist.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxdatatable.js"></script>    <script type="text/javascript">		var adapter = new jqx.dataAdapter({			dataType: "json",			dataFields: [				{ name: 'name', type: 'string' },				{ name: 'type', type: 'string' },				{ name: 'calories', type: 'int' },				{ name: 'totalfat', type: 'string' },				{ name: 'protein', type: 'string' }			],			id: 'id',			url: "../sampledata/beverages.txt"		});		var columns = [				{ text: 'Name', dataField: 'name', width: 300 },				{ text: 'Beverage Type', dataField: 'type', width: 300 },				{ text: 'Calories', dataField: 'calories', width: 180 },				{ text: 'Total Fat', dataField: 'totalfat', width: 120 },				{ text: 'Protein', dataField: 'protein' }		];		JQXElements.settings["dataTableSettings"] =		{			pageable:true,pagerButtonsCount:10, source:adapter,columnsResize:true, columns:columns, theme:"light", pagerPosition:"top"		}    </script></head><body>   <jqx-data-table settings="dataTableSettings"></jqx-data-table></body></html>

pagerMode string "default"

Sets or gets the pagerMode property.

<!DOCTYPE html><html lang="en"><head>    <title id='Description'>DataTable Custom Element</title>    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />    <meta name="viewport" content="width=device-width, initial-scale=1 maximum-scale=1 minimum-scale=1" />    <link rel="stylesheet" href="../jqwidgets/styles/site.css" type="text/css" />    <link rel="stylesheet" href="../jqwidgets/styles/jqx.light.css" type="text/css" />    <link rel="stylesheet" href="../styles/demos.css" type="text/css" />    <script type="text/javascript" src="../scripts/webcomponents-lite.min.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxcore.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxcore.elements.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/jqxlistbox.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxdropdownlist.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxdatatable.js"></script>    <script type="text/javascript">		var adapter = new jqx.dataAdapter({			dataType: "json",			dataFields: [				{ name: 'name', type: 'string' },				{ name: 'type', type: 'string' },				{ name: 'calories', type: 'int' },				{ name: 'totalfat', type: 'string' },				{ name: 'protein', type: 'string' }			],			id: 'id',			url: "../sampledata/beverages.txt"		});		var columns = [				{ text: 'Name', dataField: 'name', width: 300 },				{ text: 'Beverage Type', dataField: 'type', width: 300 },				{ text: 'Calories', dataField: 'calories', width: 180 },				{ text: 'Total Fat', dataField: 'totalfat', width: 120 },				{ text: 'Protein', dataField: 'protein' }		];		JQXElements.settings["dataTableSettings"] =		{			pageable:true,pagerButtonsCount:10, source:adapter,columnsResize:true, columns:columns, theme:"light", pagerMode:"advanced"		}    </script></head><body>   <jqx-data-table settings="dataTableSettings"></jqx-data-table></body></html>

pagerButtonsCount number 5

Sets or gets the pagerButtonsCount property.

<!DOCTYPE html><html lang="en"><head>    <title id='Description'>DataTable Custom Element</title>    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />    <meta name="viewport" content="width=device-width, initial-scale=1 maximum-scale=1 minimum-scale=1" />    <link rel="stylesheet" href="../jqwidgets/styles/site.css" type="text/css" />    <link rel="stylesheet" href="../jqwidgets/styles/jqx.light.css" type="text/css" />    <link rel="stylesheet" href="../styles/demos.css" type="text/css" />    <script type="text/javascript" src="../scripts/webcomponents-lite.min.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxcore.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxcore.elements.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/jqxlistbox.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxdropdownlist.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxdatatable.js"></script>    <script type="text/javascript">		var adapter = new jqx.dataAdapter({			dataType: "json",			dataFields: [				{ name: 'name', type: 'string' },				{ name: 'type', type: 'string' },				{ name: 'calories', type: 'int' },				{ name: 'totalfat', type: 'string' },				{ name: 'protein', type: 'string' }			],			id: 'id',			url: "../sampledata/beverages.txt"		});		var columns = [				{ text: 'Name', dataField: 'name', width: 300 },				{ text: 'Beverage Type', dataField: 'type', width: 300 },				{ text: 'Calories', dataField: 'calories', width: 180 },				{ text: 'Total Fat', dataField: 'totalfat', width: 120 },				{ text: 'Protein', dataField: 'protein' }		];		JQXElements.settings["dataTableSettings"] =		{			pageable:true,pagerButtonsCount:10, source:adapter,columnsResize:true, columns:columns, theme:"light"		}    </script></head><body>   <jqx-data-table settings="dataTableSettings"></jqx-data-table></body></html>

pagerRenderer function null

Sets or gets the pagerRenderer property.

<!DOCTYPE html><html lang="en"><head>    <title id='Description'>DataTable Custom Element</title>    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />    <meta name="viewport" content="width=device-width, initial-scale=1 maximum-scale=1 minimum-scale=1" />    <link rel="stylesheet" href="../jqwidgets/styles/site.css" type="text/css" />    <link rel="stylesheet" href="../jqwidgets/styles/jqx.light.css" type="text/css" />    <link rel="stylesheet" href="../styles/demos.css" type="text/css" />    <script type="text/javascript" src="../scripts/webcomponents-lite.min.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxcore.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxcore.elements.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/jqxlistbox.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxdropdownlist.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxdatatable.js"></script>    <script type="text/javascript">		var adapter = new jqx.dataAdapter({			dataType: "json",			dataFields: [				{ name: 'name', type: 'string' },				{ name: 'type', type: 'string' },				{ name: 'calories', type: 'int' },				{ name: 'totalfat', type: 'string' },				{ name: 'protein', type: 'string' }			],			id: 'id',			url: "../sampledata/beverages.txt"		});		var columns = [				{ text: 'Name', dataField: 'name', width: 300 },				{ text: 'Beverage Type', dataField: 'type', width: 300 },				{ text: 'Calories', dataField: 'calories', width: 180 },				{ text: 'Total Fat', dataField: 'totalfat', width: 120 },				{ text: 'Protein', dataField: 'protein' }		];		JQXElements.settings["dataTableSettings"] =		{			pageable:true,pagerButtonsCount:10, source:adapter,columnsResize:true, columns:columns, theme:"light", pagerRenderer:"pagerRenderer"		}    </script></head><body>   <jqx-data-table settings="dataTableSettings"></jqx-data-table></body></html>

ready function null

Sets or gets the ready property.

<!DOCTYPE html><html lang="en"><head>    <title id='Description'>DataTable Custom Element</title>    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />    <meta name="viewport" content="width=device-width, initial-scale=1 maximum-scale=1 minimum-scale=1" />    <link rel="stylesheet" href="../jqwidgets/styles/site.css" type="text/css" />    <link rel="stylesheet" href="../jqwidgets/styles/jqx.light.css" type="text/css" />    <link rel="stylesheet" href="../styles/demos.css" type="text/css" />    <script type="text/javascript" src="../scripts/webcomponents-lite.min.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxcore.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxcore.elements.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/jqxlistbox.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxdropdownlist.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxdatatable.js"></script>    <script type="text/javascript">		var adapter = new jqx.dataAdapter({			dataType: "json",			dataFields: [				{ name: 'name', type: 'string' },				{ name: 'type', type: 'string' },				{ name: 'calories', type: 'int' },				{ name: 'totalfat', type: 'string' },				{ name: 'protein', type: 'string' }			],			id: 'id',			url: "../sampledata/beverages.txt"		});		var columns = [				{ text: 'Name', dataField: 'name', width: 300 },				{ text: 'Beverage Type', dataField: 'type', width: 300 },				{ text: 'Calories', dataField: 'calories', width: 180 },				{ text: 'Total Fat', dataField: 'totalfat', width: 120 },				{ text: 'Protein', dataField: 'protein' }		];		JQXElements.settings["dataTableSettings"] =		{			pageable:true,pagerButtonsCount:10, source:adapter,columnsResize:true, columns:columns, theme:"light", ready:"ready"		}    </script></head><body>   <jqx-data-table settings="dataTableSettings"></jqx-data-table></body></html>

rowDetails boolean false

Sets or gets the rowDetails property.

<!DOCTYPE html><html lang="en"><head>    <title id='Description'>DataTable Custom Element</title>    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />    <meta name="viewport" content="width=device-width, initial-scale=1 maximum-scale=1 minimum-scale=1" />    <link rel="stylesheet" href="../jqwidgets/styles/site.css" type="text/css" />    <link rel="stylesheet" href="../jqwidgets/styles/jqx.light.css" type="text/css" />    <link rel="stylesheet" href="../styles/demos.css" type="text/css" />    <script type="text/javascript" src="../scripts/webcomponents-lite.min.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxcore.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxcore.elements.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/jqxlistbox.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxdropdownlist.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxdatatable.js"></script>    <script type="text/javascript">		var adapter = new jqx.dataAdapter({			dataType: "json",			dataFields: [				{ name: 'name', type: 'string' },				{ name: 'type', type: 'string' },				{ name: 'calories', type: 'int' },				{ name: 'totalfat', type: 'string' },				{ name: 'protein', type: 'string' }			],			id: 'id',			url: "../sampledata/beverages.txt"		});		var columns = [				{ text: 'Name', dataField: 'name', width: 300 },				{ text: 'Beverage Type', dataField: 'type', width: 300 },				{ text: 'Calories', dataField: 'calories', width: 180 },				{ text: 'Total Fat', dataField: 'totalfat', width: 120 },				{ text: 'Protein', dataField: 'protein' }		];		JQXElements.settings["dataTableSettings"] =		{			pageable:true,pagerButtonsCount:10, source:adapter,columnsResize:true, columns:columns, theme:"light",rowDetails:true		}    </script></head><body>   <jqx-data-table settings="dataTableSettings"></jqx-data-table></body></html>

renderToolbar function null

Sets or gets the renderToolbar property.

<!DOCTYPE html><html lang="en"><head>    <title id='Description'>DataTable Custom Element</title>    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />    <meta name="viewport" content="width=device-width, initial-scale=1 maximum-scale=1 minimum-scale=1" />    <link rel="stylesheet" href="../jqwidgets/styles/site.css" type="text/css" />    <link rel="stylesheet" href="../jqwidgets/styles/jqx.light.css" type="text/css" />    <link rel="stylesheet" href="../styles/demos.css" type="text/css" />    <script type="text/javascript" src="../scripts/webcomponents-lite.min.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxcore.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxcore.elements.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/jqxlistbox.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxdropdownlist.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxdatatable.js"></script>    <script type="text/javascript">		var adapter = new jqx.dataAdapter({			dataType: "json",			dataFields: [				{ name: 'name', type: 'string' },				{ name: 'type', type: 'string' },				{ name: 'calories', type: 'int' },				{ name: 'totalfat', type: 'string' },				{ name: 'protein', type: 'string' }			],			id: 'id',			url: "../sampledata/beverages.txt"		});		var columns = [				{ text: 'Name', dataField: 'name', width: 300 },				{ text: 'Beverage Type', dataField: 'type', width: 300 },				{ text: 'Calories', dataField: 'calories', width: 180 },				{ text: 'Total Fat', dataField: 'totalfat', width: 120 },				{ text: 'Protein', dataField: 'protein' }		];		JQXElements.settings["dataTableSettings"] =		{			pageable:true,pagerButtonsCount:10, source:adapter,columnsResize:true, columns:columns, theme:"light", renderToolbar:"renderToolbar"		}    </script></head><body>   <jqx-data-table settings="dataTableSettings"></jqx-data-table></body></html>

renderStatusbar function null

Sets or gets the renderStatusbar property.

<!DOCTYPE html><html lang="en"><head>    <title id='Description'>DataTable Custom Element</title>    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />    <meta name="viewport" content="width=device-width, initial-scale=1 maximum-scale=1 minimum-scale=1" />    <link rel="stylesheet" href="../jqwidgets/styles/site.css" type="text/css" />    <link rel="stylesheet" href="../jqwidgets/styles/jqx.light.css" type="text/css" />    <link rel="stylesheet" href="../styles/demos.css" type="text/css" />    <script type="text/javascript" src="../scripts/webcomponents-lite.min.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxcore.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxcore.elements.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/jqxlistbox.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxdropdownlist.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxdatatable.js"></script>    <script type="text/javascript">		var adapter = new jqx.dataAdapter({			dataType: "json",			dataFields: [				{ name: 'name', type: 'string' },				{ name: 'type', type: 'string' },				{ name: 'calories', type: 'int' },				{ name: 'totalfat', type: 'string' },				{ name: 'protein', type: 'string' }			],			id: 'id',			url: "../sampledata/beverages.txt"		});		var columns = [				{ text: 'Name', dataField: 'name', width: 300 },				{ text: 'Beverage Type', dataField: 'type', width: 300 },				{ text: 'Calories', dataField: 'calories', width: 180 },				{ text: 'Total Fat', dataField: 'totalfat', width: 120 },				{ text: 'Protein', dataField: 'protein' }		];		JQXElements.settings["dataTableSettings"] =		{			pageable:true,pagerButtonsCount:10, source:adapter,columnsResize:true, columns:columns, theme:"light", renderStatusbar:"renderStatusbar"		}    </script></head><body>   <jqx-data-table settings="dataTableSettings"></jqx-data-table></body></html>

rendering function null

Sets or gets the rendering property.

<!DOCTYPE html><html lang="en"><head>    <title id='Description'>DataTable Custom Element</title>    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />    <meta name="viewport" content="width=device-width, initial-scale=1 maximum-scale=1 minimum-scale=1" />    <link rel="stylesheet" href="../jqwidgets/styles/site.css" type="text/css" />    <link rel="stylesheet" href="../jqwidgets/styles/jqx.light.css" type="text/css" />    <link rel="stylesheet" href="../styles/demos.css" type="text/css" />    <script type="text/javascript" src="../scripts/webcomponents-lite.min.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxcore.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxcore.elements.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/jqxlistbox.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxdropdownlist.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxdatatable.js"></script>    <script type="text/javascript">		var adapter = new jqx.dataAdapter({			dataType: "json",			dataFields: [				{ name: 'name', type: 'string' },				{ name: 'type', type: 'string' },				{ name: 'calories', type: 'int' },				{ name: 'totalfat', type: 'string' },				{ name: 'protein', type: 'string' }			],			id: 'id',			url: "../sampledata/beverages.txt"		});		var columns = [				{ text: 'Name', dataField: 'name', width: 300 },				{ text: 'Beverage Type', dataField: 'type', width: 300 },				{ text: 'Calories', dataField: 'calories', width: 180 },				{ text: 'Total Fat', dataField: 'totalfat', width: 120 },				{ text: 'Protein', dataField: 'protein' }		];		JQXElements.settings["dataTableSettings"] =		{			pageable:true,pagerButtonsCount:10, source:adapter,columnsResize:true, columns:columns, theme:"light", rendering:"rendering"		}    </script></head><body>   <jqx-data-table settings="dataTableSettings"></jqx-data-table></body></html>

rendered function null

Sets or gets the rendered property.

<!DOCTYPE html><html lang="en"><head>    <title id='Description'>DataTable Custom Element</title>    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />    <meta name="viewport" content="width=device-width, initial-scale=1 maximum-scale=1 minimum-scale=1" />    <link rel="stylesheet" href="../jqwidgets/styles/site.css" type="text/css" />    <link rel="stylesheet" href="../jqwidgets/styles/jqx.light.css" type="text/css" />    <link rel="stylesheet" href="../styles/demos.css" type="text/css" />    <script type="text/javascript" src="../scripts/webcomponents-lite.min.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxcore.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxcore.elements.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/jqxlistbox.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxdropdownlist.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxdatatable.js"></script>    <script type="text/javascript">		var adapter = new jqx.dataAdapter({			dataType: "json",			dataFields: [				{ name: 'name', type: 'string' },				{ name: 'type', type: 'string' },				{ name: 'calories', type: 'int' },				{ name: 'totalfat', type: 'string' },				{ name: 'protein', type: 'string' }			],			id: 'id',			url: "../sampledata/beverages.txt"		});		var columns = [				{ text: 'Name', dataField: 'name', width: 300 },				{ text: 'Beverage Type', dataField: 'type', width: 300 },				{ text: 'Calories', dataField: 'calories', width: 180 },				{ text: 'Total Fat', dataField: 'totalfat', width: 120 },				{ text: 'Protein', dataField: 'protein' }		];		JQXElements.settings["dataTableSettings"] =		{			pageable:true,pagerButtonsCount:10, source:adapter,columnsResize:true, columns:columns, theme:"light", rendered:"rendered"		}    </script></head><body>   <jqx-data-table settings="dataTableSettings"></jqx-data-table></body></html>

rtl boolean false

Sets or gets the rtl property.

<!DOCTYPE html><html lang="en"><head>    <title id='Description'>DataTable Custom Element</title>    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />    <meta name="viewport" content="width=device-width, initial-scale=1 maximum-scale=1 minimum-scale=1" />    <link rel="stylesheet" href="../jqwidgets/styles/site.css" type="text/css" />    <link rel="stylesheet" href="../jqwidgets/styles/jqx.light.css" type="text/css" />    <link rel="stylesheet" href="../styles/demos.css" type="text/css" />    <script type="text/javascript" src="../scripts/webcomponents-lite.min.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxcore.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxcore.elements.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/jqxlistbox.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxdropdownlist.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxdatatable.js"></script>    <script type="text/javascript">		var adapter = new jqx.dataAdapter({			dataType: "json",			dataFields: [				{ name: 'name', type: 'string' },				{ name: 'type', type: 'string' },				{ name: 'calories', type: 'int' },				{ name: 'totalfat', type: 'string' },				{ name: 'protein', type: 'string' }			],			id: 'id',			url: "../sampledata/beverages.txt"		});		var columns = [				{ text: 'Name', dataField: 'name', width: 300 },				{ text: 'Beverage Type', dataField: 'type', width: 300 },				{ text: 'Calories', dataField: 'calories', width: 180 },				{ text: 'Total Fat', dataField: 'totalfat', width: 120 },				{ text: 'Protein', dataField: 'protein' }		];		JQXElements.settings["dataTableSettings"] =		{			pageable:true,pagerButtonsCount:10, source:adapter,columnsResize:true, columns:columns, theme:"light",rtl:true		}    </script></head><body>   <jqx-data-table settings="dataTableSettings"></jqx-data-table></body></html>

source object null

Sets or gets the source property.

<!DOCTYPE html><html lang="en"><head>    <title id='Description'>DataTable Custom Element</title>    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />    <meta name="viewport" content="width=device-width, initial-scale=1 maximum-scale=1 minimum-scale=1" />    <link rel="stylesheet" href="../jqwidgets/styles/site.css" type="text/css" />    <link rel="stylesheet" href="../jqwidgets/styles/jqx.light.css" type="text/css" />    <link rel="stylesheet" href="../styles/demos.css" type="text/css" />    <script type="text/javascript" src="../scripts/webcomponents-lite.min.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxcore.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxcore.elements.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/jqxlistbox.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxdropdownlist.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxdatatable.js"></script>    <script type="text/javascript">		var adapter = new jqx.dataAdapter({			dataType: "json",			dataFields: [				{ name: 'name', type: 'string' },				{ name: 'type', type: 'string' },				{ name: 'calories', type: 'int' },				{ name: 'totalfat', type: 'string' },				{ name: 'protein', type: 'string' }			],			id: 'id',			url: "../sampledata/beverages.txt"		});		var columns = [				{ text: 'Name', dataField: 'name', width: 300 },				{ text: 'Beverage Type', dataField: 'type', width: 300 },				{ text: 'Calories', dataField: 'calories', width: 180 },				{ text: 'Total Fat', dataField: 'totalfat', width: 120 },				{ text: 'Protein', dataField: 'protein' }		];		JQXElements.settings["dataTableSettings"] =		{			pageable:true,pagerButtonsCount:10, source:adapter,columnsResize:true, columns:columns, theme:"light"		}    </script></head><body>   <jqx-data-table settings="dataTableSettings"></jqx-data-table></body></html>

sortable boolean false

Sets or gets the sortable property.

<!DOCTYPE html><html lang="en"><head>    <title id='Description'>DataTable Custom Element</title>    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />    <meta name="viewport" content="width=device-width, initial-scale=1 maximum-scale=1 minimum-scale=1" />    <link rel="stylesheet" href="../jqwidgets/styles/site.css" type="text/css" />    <link rel="stylesheet" href="../jqwidgets/styles/jqx.light.css" type="text/css" />    <link rel="stylesheet" href="../styles/demos.css" type="text/css" />    <script type="text/javascript" src="../scripts/webcomponents-lite.min.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxcore.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxcore.elements.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/jqxlistbox.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxdropdownlist.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxdatatable.js"></script>    <script type="text/javascript">		var adapter = new jqx.dataAdapter({			dataType: "json",			dataFields: [				{ name: 'name', type: 'string' },				{ name: 'type', type: 'string' },				{ name: 'calories', type: 'int' },				{ name: 'totalfat', type: 'string' },				{ name: 'protein', type: 'string' }			],			id: 'id',			url: "../sampledata/beverages.txt"		});		var columns = [				{ text: 'Name', dataField: 'name', width: 300 },				{ text: 'Beverage Type', dataField: 'type', width: 300 },				{ text: 'Calories', dataField: 'calories', width: 180 },				{ text: 'Total Fat', dataField: 'totalfat', width: 120 },				{ text: 'Protein', dataField: 'protein' }		];		JQXElements.settings["dataTableSettings"] =		{			pageable:true,pagerButtonsCount:10, source:adapter,columnsResize:true, columns:columns, theme:"light",sortable:true		}    </script></head><body>   <jqx-data-table settings="dataTableSettings"></jqx-data-table></body></html>

showAggregates boolean false

Sets or gets the showAggregates property.

<!DOCTYPE html><html lang="en"><head>    <title id='Description'>DataTable Custom Element</title>    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />    <meta name="viewport" content="width=device-width, initial-scale=1 maximum-scale=1 minimum-scale=1" />    <link rel="stylesheet" href="../jqwidgets/styles/site.css" type="text/css" />    <link rel="stylesheet" href="../jqwidgets/styles/jqx.light.css" type="text/css" />    <link rel="stylesheet" href="../styles/demos.css" type="text/css" />    <script type="text/javascript" src="../scripts/webcomponents-lite.min.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxcore.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxcore.elements.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/jqxlistbox.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxdropdownlist.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxdatatable.js"></script>    <script type="text/javascript">		var adapter = new jqx.dataAdapter({			dataType: "json",			dataFields: [				{ name: 'name', type: 'string' },				{ name: 'type', type: 'string' },				{ name: 'calories', type: 'int' },				{ name: 'totalfat', type: 'string' },				{ name: 'protein', type: 'string' }			],			id: 'id',			url: "../sampledata/beverages.txt"		});		var columns = [				{ text: 'Name', dataField: 'name', width: 300 },				{ text: 'Beverage Type', dataField: 'type', width: 300 },				{ text: 'Calories', dataField: 'calories', width: 180 },				{ text: 'Total Fat', dataField: 'totalfat', width: 120 },				{ text: 'Protein', dataField: 'protein' }		];		JQXElements.settings["dataTableSettings"] =		{			pageable:true,pagerButtonsCount:10, source:adapter,columnsResize:true, columns:columns, theme:"light",showAggregates:true		}    </script></head><body>   <jqx-data-table settings="dataTableSettings"></jqx-data-table></body></html>

showToolbar boolean false

Sets or gets the showToolbar property.

<!DOCTYPE html><html lang="en"><head>    <title id='Description'>DataTable Custom Element</title>    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />    <meta name="viewport" content="width=device-width, initial-scale=1 maximum-scale=1 minimum-scale=1" />    <link rel="stylesheet" href="../jqwidgets/styles/site.css" type="text/css" />    <link rel="stylesheet" href="../jqwidgets/styles/jqx.light.css" type="text/css" />    <link rel="stylesheet" href="../styles/demos.css" type="text/css" />    <script type="text/javascript" src="../scripts/webcomponents-lite.min.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxcore.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxcore.elements.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/jqxlistbox.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxdropdownlist.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxdatatable.js"></script>    <script type="text/javascript">		var adapter = new jqx.dataAdapter({			dataType: "json",			dataFields: [				{ name: 'name', type: 'string' },				{ name: 'type', type: 'string' },				{ name: 'calories', type: 'int' },				{ name: 'totalfat', type: 'string' },				{ name: 'protein', type: 'string' }			],			id: 'id',			url: "../sampledata/beverages.txt"		});		var columns = [				{ text: 'Name', dataField: 'name', width: 300 },				{ text: 'Beverage Type', dataField: 'type', width: 300 },				{ text: 'Calories', dataField: 'calories', width: 180 },				{ text: 'Total Fat', dataField: 'totalfat', width: 120 },				{ text: 'Protein', dataField: 'protein' }		];		JQXElements.settings["dataTableSettings"] =		{			pageable:true,pagerButtonsCount:10, source:adapter,columnsResize:true, columns:columns, theme:"light",showToolbar:true		}    </script></head><body>   <jqx-data-table settings="dataTableSettings"></jqx-data-table></body></html>

showStatusbar boolean false

Sets or gets the showStatusbar property.

<!DOCTYPE html><html lang="en"><head>    <title id='Description'>DataTable Custom Element</title>    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />    <meta name="viewport" content="width=device-width, initial-scale=1 maximum-scale=1 minimum-scale=1" />    <link rel="stylesheet" href="../jqwidgets/styles/site.css" type="text/css" />    <link rel="stylesheet" href="../jqwidgets/styles/jqx.light.css" type="text/css" />    <link rel="stylesheet" href="../styles/demos.css" type="text/css" />    <script type="text/javascript" src="../scripts/webcomponents-lite.min.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxcore.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxcore.elements.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/jqxlistbox.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxdropdownlist.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxdatatable.js"></script>    <script type="text/javascript">		var adapter = new jqx.dataAdapter({			dataType: "json",			dataFields: [				{ name: 'name', type: 'string' },				{ name: 'type', type: 'string' },				{ name: 'calories', type: 'int' },				{ name: 'totalfat', type: 'string' },				{ name: 'protein', type: 'string' }			],			id: 'id',			url: "../sampledata/beverages.txt"		});		var columns = [				{ text: 'Name', dataField: 'name', width: 300 },				{ text: 'Beverage Type', dataField: 'type', width: 300 },				{ text: 'Calories', dataField: 'calories', width: 180 },				{ text: 'Total Fat', dataField: 'totalfat', width: 120 },				{ text: 'Protein', dataField: 'protein' }		];		JQXElements.settings["dataTableSettings"] =		{			pageable:true,pagerButtonsCount:10, source:adapter,columnsResize:true, columns:columns, theme:"light",showStatusbar:true		}    </script></head><body>   <jqx-data-table settings="dataTableSettings"></jqx-data-table></body></html>

statusBarHeight number 34

Sets or gets the statusBarHeight property.

<!DOCTYPE html><html lang="en"><head>    <title id='Description'>DataTable Custom Element</title>    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />    <meta name="viewport" content="width=device-width, initial-scale=1 maximum-scale=1 minimum-scale=1" />    <link rel="stylesheet" href="../jqwidgets/styles/site.css" type="text/css" />    <link rel="stylesheet" href="../jqwidgets/styles/jqx.light.css" type="text/css" />    <link rel="stylesheet" href="../styles/demos.css" type="text/css" />    <script type="text/javascript" src="../scripts/webcomponents-lite.min.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxcore.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxcore.elements.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/jqxlistbox.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxdropdownlist.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxdatatable.js"></script>    <script type="text/javascript">		var adapter = new jqx.dataAdapter({			dataType: "json",			dataFields: [				{ name: 'name', type: 'string' },				{ name: 'type', type: 'string' },				{ name: 'calories', type: 'int' },				{ name: 'totalfat', type: 'string' },				{ name: 'protein', type: 'string' }			],			id: 'id',			url: "../sampledata/beverages.txt"		});		var columns = [				{ text: 'Name', dataField: 'name', width: 300 },				{ text: 'Beverage Type', dataField: 'type', width: 300 },				{ text: 'Calories', dataField: 'calories', width: 180 },				{ text: 'Total Fat', dataField: 'totalfat', width: 120 },				{ text: 'Protein', dataField: 'protein' }		];		JQXElements.settings["dataTableSettings"] =		{			pageable:true,pagerButtonsCount:10, source:adapter,columnsResize:true, columns:columns, theme:"light",statusBarHeight:40		}    </script></head><body>   <jqx-data-table settings="dataTableSettings"></jqx-data-table></body></html>

scrollBarSize number 17

Sets or gets the scrollBarSize property.

<!DOCTYPE html><html lang="en"><head>    <title id='Description'>DataTable Custom Element</title>    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />    <meta name="viewport" content="width=device-width, initial-scale=1 maximum-scale=1 minimum-scale=1" />    <link rel="stylesheet" href="../jqwidgets/styles/site.css" type="text/css" />    <link rel="stylesheet" href="../jqwidgets/styles/jqx.light.css" type="text/css" />    <link rel="stylesheet" href="../styles/demos.css" type="text/css" />    <script type="text/javascript" src="../scripts/webcomponents-lite.min.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxcore.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxcore.elements.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/jqxlistbox.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxdropdownlist.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxdatatable.js"></script>    <script type="text/javascript">		var adapter = new jqx.dataAdapter({			dataType: "json",			dataFields: [				{ name: 'name', type: 'string' },				{ name: 'type', type: 'string' },				{ name: 'calories', type: 'int' },				{ name: 'totalfat', type: 'string' },				{ name: 'protein', type: 'string' }			],			id: 'id',			url: "../sampledata/beverages.txt"		});		var columns = [				{ text: 'Name', dataField: 'name', width: 300 },				{ text: 'Beverage Type', dataField: 'type', width: 300 },				{ text: 'Calories', dataField: 'calories', width: 180 },				{ text: 'Total Fat', dataField: 'totalfat', width: 120 },				{ text: 'Protein', dataField: 'protein' }		];		JQXElements.settings["dataTableSettings"] =		{			pageable:true,pagerButtonsCount:10, source:adapter,columnsResize:true, columns:columns, theme:"light",scrollBarSize:20		}    </script></head><body>   <jqx-data-table settings="dataTableSettings"></jqx-data-table></body></html>

selectionMode string "multipleRows"

Sets or gets the selectionMode property.

<!DOCTYPE html><html lang="en"><head>    <title id='Description'>DataTable Custom Element</title>    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />    <meta name="viewport" content="width=device-width, initial-scale=1 maximum-scale=1 minimum-scale=1" />    <link rel="stylesheet" href="../jqwidgets/styles/site.css" type="text/css" />    <link rel="stylesheet" href="../jqwidgets/styles/jqx.light.css" type="text/css" />    <link rel="stylesheet" href="../styles/demos.css" type="text/css" />    <script type="text/javascript" src="../scripts/webcomponents-lite.min.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxcore.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxcore.elements.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/jqxlistbox.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxdropdownlist.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxdatatable.js"></script>    <script type="text/javascript">		var adapter = new jqx.dataAdapter({			dataType: "json",			dataFields: [				{ name: 'name', type: 'string' },				{ name: 'type', type: 'string' },				{ name: 'calories', type: 'int' },				{ name: 'totalfat', type: 'string' },				{ name: 'protein', type: 'string' }			],			id: 'id',			url: "../sampledata/beverages.txt"		});		var columns = [				{ text: 'Name', dataField: 'name', width: 300 },				{ text: 'Beverage Type', dataField: 'type', width: 300 },				{ text: 'Calories', dataField: 'calories', width: 180 },				{ text: 'Total Fat', dataField: 'totalfat', width: 120 },				{ text: 'Protein', dataField: 'protein' }		];		JQXElements.settings["dataTableSettings"] =		{			pageable:true,pagerButtonsCount:10, source:adapter,columnsResize:true, columns:columns, theme:"light", selectionMode:"singleRow"		}    </script></head><body>   <jqx-data-table settings="dataTableSettings"></jqx-data-table></body></html>

serverProcessing boolean false

Sets or gets the serverProcessing property.

<!DOCTYPE html><html lang="en"><head>    <title id='Description'>DataTable Custom Element</title>    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />    <meta name="viewport" content="width=device-width, initial-scale=1 maximum-scale=1 minimum-scale=1" />    <link rel="stylesheet" href="../jqwidgets/styles/site.css" type="text/css" />    <link rel="stylesheet" href="../jqwidgets/styles/jqx.light.css" type="text/css" />    <link rel="stylesheet" href="../styles/demos.css" type="text/css" />    <script type="text/javascript" src="../scripts/webcomponents-lite.min.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxcore.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxcore.elements.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/jqxlistbox.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxdropdownlist.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxdatatable.js"></script>    <script type="text/javascript">		var adapter = new jqx.dataAdapter({			dataType: "json",			dataFields: [				{ name: 'name', type: 'string' },				{ name: 'type', type: 'string' },				{ name: 'calories', type: 'int' },				{ name: 'totalfat', type: 'string' },				{ name: 'protein', type: 'string' }			],			id: 'id',			url: "../sampledata/beverages.txt"		});		var columns = [				{ text: 'Name', dataField: 'name', width: 300 },				{ text: 'Beverage Type', dataField: 'type', width: 300 },				{ text: 'Calories', dataField: 'calories', width: 180 },				{ text: 'Total Fat', dataField: 'totalfat', width: 120 },				{ text: 'Protein', dataField: 'protein' }		];		JQXElements.settings["dataTableSettings"] =		{			pageable:true,pagerButtonsCount:10, source:adapter,columnsResize:true, columns:columns, theme:"light",serverProcessing:true		}    </script></head><body>   <jqx-data-table settings="dataTableSettings"></jqx-data-table></body></html>

showHeader boolean true

Sets or gets the showHeader property.

<!DOCTYPE html><html lang="en"><head>    <title id='Description'>DataTable Custom Element</title>    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />    <meta name="viewport" content="width=device-width, initial-scale=1 maximum-scale=1 minimum-scale=1" />    <link rel="stylesheet" href="../jqwidgets/styles/site.css" type="text/css" />    <link rel="stylesheet" href="../jqwidgets/styles/jqx.light.css" type="text/css" />    <link rel="stylesheet" href="../styles/demos.css" type="text/css" />    <script type="text/javascript" src="../scripts/webcomponents-lite.min.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxcore.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxcore.elements.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/jqxlistbox.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxdropdownlist.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxdatatable.js"></script>    <script type="text/javascript">		var adapter = new jqx.dataAdapter({			dataType: "json",			dataFields: [				{ name: 'name', type: 'string' },				{ name: 'type', type: 'string' },				{ name: 'calories', type: 'int' },				{ name: 'totalfat', type: 'string' },				{ name: 'protein', type: 'string' }			],			id: 'id',			url: "../sampledata/beverages.txt"		});		var columns = [				{ text: 'Name', dataField: 'name', width: 300 },				{ text: 'Beverage Type', dataField: 'type', width: 300 },				{ text: 'Calories', dataField: 'calories', width: 180 },				{ text: 'Total Fat', dataField: 'totalfat', width: 120 },				{ text: 'Protein', dataField: 'protein' }		];		JQXElements.settings["dataTableSettings"] =		{			pageable:true,pagerButtonsCount:10, source:adapter,columnsResize:true, columns:columns, theme:"light",showHeader:false		}    </script></head><body>   <jqx-data-table settings="dataTableSettings"></jqx-data-table></body></html>

theme string ''

Sets or gets the theme property.

<!DOCTYPE html><html lang="en"><head>    <title id='Description'>DataTable Custom Element</title>    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />    <meta name="viewport" content="width=device-width, initial-scale=1 maximum-scale=1 minimum-scale=1" />    <link rel="stylesheet" href="../jqwidgets/styles/site.css" type="text/css" />    <link rel="stylesheet" href="../jqwidgets/styles/jqx.light.css" type="text/css" />    <link rel="stylesheet" href="../styles/demos.css" type="text/css" />    <script type="text/javascript" src="../scripts/webcomponents-lite.min.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxcore.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxcore.elements.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/jqxlistbox.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxdropdownlist.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxdatatable.js"></script>    <script type="text/javascript">		var adapter = new jqx.dataAdapter({			dataType: "json",			dataFields: [				{ name: 'name', type: 'string' },				{ name: 'type', type: 'string' },				{ name: 'calories', type: 'int' },				{ name: 'totalfat', type: 'string' },				{ name: 'protein', type: 'string' }			],			id: 'id',			url: "../sampledata/beverages.txt"		});		var columns = [				{ text: 'Name', dataField: 'name', width: 300 },				{ text: 'Beverage Type', dataField: 'type', width: 300 },				{ text: 'Calories', dataField: 'calories', width: 180 },				{ text: 'Total Fat', dataField: 'totalfat', width: 120 },				{ text: 'Protein', dataField: 'protein' }		];		JQXElements.settings["dataTableSettings"] =		{			pageable:true,pagerButtonsCount:10, source:adapter,columnsResize:true, columns:columns, theme:"light"		}    </script></head><body>   <jqx-data-table settings="dataTableSettings"></jqx-data-table></body></html>

toolbarHeight number 34

Sets or gets the toolbarHeight property.

<!DOCTYPE html><html lang="en"><head>    <title id='Description'>DataTable Custom Element</title>    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />    <meta name="viewport" content="width=device-width, initial-scale=1 maximum-scale=1 minimum-scale=1" />    <link rel="stylesheet" href="../jqwidgets/styles/site.css" type="text/css" />    <link rel="stylesheet" href="../jqwidgets/styles/jqx.light.css" type="text/css" />    <link rel="stylesheet" href="../styles/demos.css" type="text/css" />    <script type="text/javascript" src="../scripts/webcomponents-lite.min.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxcore.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxcore.elements.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/jqxlistbox.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxdropdownlist.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxdatatable.js"></script>    <script type="text/javascript">		var adapter = new jqx.dataAdapter({			dataType: "json",			dataFields: [				{ name: 'name', type: 'string' },				{ name: 'type', type: 'string' },				{ name: 'calories', type: 'int' },				{ name: 'totalfat', type: 'string' },				{ name: 'protein', type: 'string' }			],			id: 'id',			url: "../sampledata/beverages.txt"		});		var columns = [				{ text: 'Name', dataField: 'name', width: 300 },				{ text: 'Beverage Type', dataField: 'type', width: 300 },				{ text: 'Calories', dataField: 'calories', width: 180 },				{ text: 'Total Fat', dataField: 'totalfat', width: 120 },				{ text: 'Protein', dataField: 'protein' }		];		JQXElements.settings["dataTableSettings"] =		{			pageable:true,pagerButtonsCount:10, source:adapter,columnsResize:true, columns:columns, theme:"light",toolbarHeight:40		}    </script></head><body>   <jqx-data-table settings="dataTableSettings"></jqx-data-table></body></html>

width number null

Sets or gets the width property.

<!DOCTYPE html><html lang="en"><head>    <title id='Description'>DataTable Custom Element</title>    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />    <meta name="viewport" content="width=device-width, initial-scale=1 maximum-scale=1 minimum-scale=1" />    <link rel="stylesheet" href="../jqwidgets/styles/site.css" type="text/css" />    <link rel="stylesheet" href="../jqwidgets/styles/jqx.light.css" type="text/css" />    <link rel="stylesheet" href="../styles/demos.css" type="text/css" />    <script type="text/javascript" src="../scripts/webcomponents-lite.min.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxcore.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxcore.elements.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/jqxlistbox.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxdropdownlist.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxdatatable.js"></script>    <script type="text/javascript">		var adapter = new jqx.dataAdapter({			dataType: "json",			dataFields: [				{ name: 'name', type: 'string' },				{ name: 'type', type: 'string' },				{ name: 'calories', type: 'int' },				{ name: 'totalfat', type: 'string' },				{ name: 'protein', type: 'string' }			],			id: 'id',			url: "../sampledata/beverages.txt"		});		var columns = [				{ text: 'Name', dataField: 'name', width: 300 },				{ text: 'Beverage Type', dataField: 'type', width: 300 },				{ text: 'Calories', dataField: 'calories', width: 180 },				{ text: 'Total Fat', dataField: 'totalfat', width: 120 },				{ text: 'Protein', dataField: 'protein' }		];		JQXElements.settings["dataTableSettings"] =		{			pageable:true,pagerButtonsCount:10, source:adapter,columnsResize:true, columns:columns, theme:"light"		}    </script></head><body>   <jqx-data-table settings="dataTableSettings"></jqx-data-table></body></html>

bindingComplete Event

Code examples

Bind to the bindingComplete event of jqxDataTable.

<!DOCTYPE html><html lang="en"><head>    <title id='Description'>DataTable Custom Element</title>    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />    <meta name="viewport" content="width=device-width, initial-scale=1 maximum-scale=1 minimum-scale=1" />    <link rel="stylesheet" href="../jqwidgets/styles/site.css" type="text/css" />    <link rel="stylesheet" href="../jqwidgets/styles/jqx.light.css" type="text/css" />    <link rel="stylesheet" href="../styles/demos.css" type="text/css" />    <script type="text/javascript" src="../scripts/webcomponents-lite.min.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxcore.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxcore.elements.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/jqxlistbox.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxdropdownlist.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxdatatable.js"></script>    <script type="text/javascript">		var adapter = new jqx.dataAdapter({			dataType: "json",			dataFields: [				{ name: 'name', type: 'string' },				{ name: 'type', type: 'string' },				{ name: 'calories', type: 'int' },				{ name: 'totalfat', type: 'string' },				{ name: 'protein', type: 'string' }			],			id: 'id',			url: "../sampledata/beverages.txt"		});		var columns = [				{ text: 'Name', dataField: 'name', width: 300 },				{ text: 'Beverage Type', dataField: 'type', width: 300 },				{ text: 'Calories', dataField: 'calories', width: 180 },				{ text: 'Total Fat', dataField: 'totalfat', width: 120 },				{ text: 'Protein', dataField: 'protein' }		];		JQXElements.settings["dataTableSettings"] =		{			pageable:true,pagerButtonsCount:10, source:adapter,columnsResize:true, columns:columns, theme:"light"		}	window.onload = function() {		document.querySelector("jqx-data-table").addEventListener("bindingComplete", function(event) {			// Your code here.		});	};    </script></head><body>   <jqx-data-table settings="dataTableSettings"></jqx-data-table></body></html>

cellBeginEdit Event

Code examples

Bind to the cellBeginEdit event of jqxDataTable.

<!DOCTYPE html><html lang="en"><head>    <title id='Description'>DataTable Custom Element</title>    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />    <meta name="viewport" content="width=device-width, initial-scale=1 maximum-scale=1 minimum-scale=1" />    <link rel="stylesheet" href="../jqwidgets/styles/site.css" type="text/css" />    <link rel="stylesheet" href="../jqwidgets/styles/jqx.light.css" type="text/css" />    <link rel="stylesheet" href="../styles/demos.css" type="text/css" />    <script type="text/javascript" src="../scripts/webcomponents-lite.min.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxcore.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxcore.elements.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/jqxlistbox.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxdropdownlist.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxdatatable.js"></script>    <script type="text/javascript">		var adapter = new jqx.dataAdapter({			dataType: "json",			dataFields: [				{ name: 'name', type: 'string' },				{ name: 'type', type: 'string' },				{ name: 'calories', type: 'int' },				{ name: 'totalfat', type: 'string' },				{ name: 'protein', type: 'string' }			],			id: 'id',			url: "../sampledata/beverages.txt"		});		var columns = [				{ text: 'Name', dataField: 'name', width: 300 },				{ text: 'Beverage Type', dataField: 'type', width: 300 },				{ text: 'Calories', dataField: 'calories', width: 180 },				{ text: 'Total Fat', dataField: 'totalfat', width: 120 },				{ text: 'Protein', dataField: 'protein' }		];		JQXElements.settings["dataTableSettings"] =		{			pageable:true,pagerButtonsCount:10, source:adapter,columnsResize:true, columns:columns, theme:"light"		}	window.onload = function() {		document.querySelector("jqx-data-table").addEventListener("cellBeginEdit", function(event) {			// Your code here.		});	};    </script></head><body>   <jqx-data-table settings="dataTableSettings"></jqx-data-table></body></html>

cellEndEdit Event

Code examples

Bind to the cellEndEdit event of jqxDataTable.

<!DOCTYPE html><html lang="en"><head>    <title id='Description'>DataTable Custom Element</title>    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />    <meta name="viewport" content="width=device-width, initial-scale=1 maximum-scale=1 minimum-scale=1" />    <link rel="stylesheet" href="../jqwidgets/styles/site.css" type="text/css" />    <link rel="stylesheet" href="../jqwidgets/styles/jqx.light.css" type="text/css" />    <link rel="stylesheet" href="../styles/demos.css" type="text/css" />    <script type="text/javascript" src="../scripts/webcomponents-lite.min.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxcore.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxcore.elements.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/jqxlistbox.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxdropdownlist.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxdatatable.js"></script>    <script type="text/javascript">		var adapter = new jqx.dataAdapter({			dataType: "json",			dataFields: [				{ name: 'name', type: 'string' },				{ name: 'type', type: 'string' },				{ name: 'calories', type: 'int' },				{ name: 'totalfat', type: 'string' },				{ name: 'protein', type: 'string' }			],			id: 'id',			url: "../sampledata/beverages.txt"		});		var columns = [				{ text: 'Name', dataField: 'name', width: 300 },				{ text: 'Beverage Type', dataField: 'type', width: 300 },				{ text: 'Calories', dataField: 'calories', width: 180 },				{ text: 'Total Fat', dataField: 'totalfat', width: 120 },				{ text: 'Protein', dataField: 'protein' }		];		JQXElements.settings["dataTableSettings"] =		{			pageable:true,pagerButtonsCount:10, source:adapter,columnsResize:true, columns:columns, theme:"light"		}	window.onload = function() {		document.querySelector("jqx-data-table").addEventListener("cellEndEdit", function(event) {			// Your code here.		});	};    </script></head><body>   <jqx-data-table settings="dataTableSettings"></jqx-data-table></body></html>

cellValueChanged Event

Code examples

Bind to the cellValueChanged event of jqxDataTable.

<!DOCTYPE html><html lang="en"><head>    <title id='Description'>DataTable Custom Element</title>    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />    <meta name="viewport" content="width=device-width, initial-scale=1 maximum-scale=1 minimum-scale=1" />    <link rel="stylesheet" href="../jqwidgets/styles/site.css" type="text/css" />    <link rel="stylesheet" href="../jqwidgets/styles/jqx.light.css" type="text/css" />    <link rel="stylesheet" href="../styles/demos.css" type="text/css" />    <script type="text/javascript" src="../scripts/webcomponents-lite.min.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxcore.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxcore.elements.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/jqxlistbox.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxdropdownlist.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxdatatable.js"></script>    <script type="text/javascript">		var adapter = new jqx.dataAdapter({			dataType: "json",			dataFields: [				{ name: 'name', type: 'string' },				{ name: 'type', type: 'string' },				{ name: 'calories', type: 'int' },				{ name: 'totalfat', type: 'string' },				{ name: 'protein', type: 'string' }			],			id: 'id',			url: "../sampledata/beverages.txt"		});		var columns = [				{ text: 'Name', dataField: 'name', width: 300 },				{ text: 'Beverage Type', dataField: 'type', width: 300 },				{ text: 'Calories', dataField: 'calories', width: 180 },				{ text: 'Total Fat', dataField: 'totalfat', width: 120 },				{ text: 'Protein', dataField: 'protein' }		];		JQXElements.settings["dataTableSettings"] =		{			pageable:true,pagerButtonsCount:10, source:adapter,columnsResize:true, columns:columns, theme:"light"		}	window.onload = function() {		document.querySelector("jqx-data-table").addEventListener("cellValueChanged", function(event) {			// Your code here.		});	};    </script></head><body>   <jqx-data-table settings="dataTableSettings"></jqx-data-table></body></html>

columnResized Event

Code examples

Bind to the columnResized event of jqxDataTable.

<!DOCTYPE html><html lang="en"><head>    <title id='Description'>DataTable Custom Element</title>    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />    <meta name="viewport" content="width=device-width, initial-scale=1 maximum-scale=1 minimum-scale=1" />    <link rel="stylesheet" href="../jqwidgets/styles/site.css" type="text/css" />    <link rel="stylesheet" href="../jqwidgets/styles/jqx.light.css" type="text/css" />    <link rel="stylesheet" href="../styles/demos.css" type="text/css" />    <script type="text/javascript" src="../scripts/webcomponents-lite.min.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxcore.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxcore.elements.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/jqxlistbox.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxdropdownlist.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxdatatable.js"></script>    <script type="text/javascript">		var adapter = new jqx.dataAdapter({			dataType: "json",			dataFields: [				{ name: 'name', type: 'string' },				{ name: 'type', type: 'string' },				{ name: 'calories', type: 'int' },				{ name: 'totalfat', type: 'string' },				{ name: 'protein', type: 'string' }			],			id: 'id',			url: "../sampledata/beverages.txt"		});		var columns = [				{ text: 'Name', dataField: 'name', width: 300 },				{ text: 'Beverage Type', dataField: 'type', width: 300 },				{ text: 'Calories', dataField: 'calories', width: 180 },				{ text: 'Total Fat', dataField: 'totalfat', width: 120 },				{ text: 'Protein', dataField: 'protein' }		];		JQXElements.settings["dataTableSettings"] =		{			pageable:true,pagerButtonsCount:10, source:adapter,columnsResize:true, columns:columns, theme:"light"		}	window.onload = function() {		document.querySelector("jqx-data-table").addEventListener("columnResized", function(event) {			// Your code here.		});	};    </script></head><body>   <jqx-data-table settings="dataTableSettings"></jqx-data-table></body></html>

columnReordered Event

Code examples

Bind to the columnReordered event of jqxDataTable.

<!DOCTYPE html><html lang="en"><head>    <title id='Description'>DataTable Custom Element</title>    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />    <meta name="viewport" content="width=device-width, initial-scale=1 maximum-scale=1 minimum-scale=1" />    <link rel="stylesheet" href="../jqwidgets/styles/site.css" type="text/css" />    <link rel="stylesheet" href="../jqwidgets/styles/jqx.light.css" type="text/css" />    <link rel="stylesheet" href="../styles/demos.css" type="text/css" />    <script type="text/javascript" src="../scripts/webcomponents-lite.min.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxcore.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxcore.elements.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/jqxlistbox.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxdropdownlist.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxdatatable.js"></script>    <script type="text/javascript">		var adapter = new jqx.dataAdapter({			dataType: "json",			dataFields: [				{ name: 'name', type: 'string' },				{ name: 'type', type: 'string' },				{ name: 'calories', type: 'int' },				{ name: 'totalfat', type: 'string' },				{ name: 'protein', type: 'string' }			],			id: 'id',			url: "../sampledata/beverages.txt"		});		var columns = [				{ text: 'Name', dataField: 'name', width: 300 },				{ text: 'Beverage Type', dataField: 'type', width: 300 },				{ text: 'Calories', dataField: 'calories', width: 180 },				{ text: 'Total Fat', dataField: 'totalfat', width: 120 },				{ text: 'Protein', dataField: 'protein' }		];		JQXElements.settings["dataTableSettings"] =		{			pageable:true,pagerButtonsCount:10, source:adapter,columnsResize:true, columns:columns, theme:"light"		}	window.onload = function() {		document.querySelector("jqx-data-table").addEventListener("columnReordered", function(event) {			// Your code here.		});	};    </script></head><body>   <jqx-data-table settings="dataTableSettings"></jqx-data-table></body></html>

sort Event

Code examples

Bind to the sort event of jqxDataTable.

<!DOCTYPE html><html lang="en"><head>    <title id='Description'>DataTable Custom Element</title>    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />    <meta name="viewport" content="width=device-width, initial-scale=1 maximum-scale=1 minimum-scale=1" />    <link rel="stylesheet" href="../jqwidgets/styles/site.css" type="text/css" />    <link rel="stylesheet" href="../jqwidgets/styles/jqx.light.css" type="text/css" />    <link rel="stylesheet" href="../styles/demos.css" type="text/css" />    <script type="text/javascript" src="../scripts/webcomponents-lite.min.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxcore.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxcore.elements.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/jqxlistbox.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxdropdownlist.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxdatatable.js"></script>    <script type="text/javascript">		var adapter = new jqx.dataAdapter({			dataType: "json",			dataFields: [				{ name: 'name', type: 'string' },				{ name: 'type', type: 'string' },				{ name: 'calories', type: 'int' },				{ name: 'totalfat', type: 'string' },				{ name: 'protein', type: 'string' }			],			id: 'id',			url: "../sampledata/beverages.txt"		});		var columns = [				{ text: 'Name', dataField: 'name', width: 300 },				{ text: 'Beverage Type', dataField: 'type', width: 300 },				{ text: 'Calories', dataField: 'calories', width: 180 },				{ text: 'Total Fat', dataField: 'totalfat', width: 120 },				{ text: 'Protein', dataField: 'protein' }		];		JQXElements.settings["dataTableSettings"] =		{			pageable:true,pagerButtonsCount:10, source:adapter,columnsResize:true, columns:columns, theme:"light"		}	window.onload = function() {		document.querySelector("jqx-data-table").addEventListener("sort", function(event) {			// Your code here.		});	};    </script></head><body>   <jqx-data-table settings="dataTableSettings"></jqx-data-table></body></html>

filter Event

Code examples

Bind to the filter event of jqxDataTable.

<!DOCTYPE html><html lang="en"><head>    <title id='Description'>DataTable Custom Element</title>    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />    <meta name="viewport" content="width=device-width, initial-scale=1 maximum-scale=1 minimum-scale=1" />    <link rel="stylesheet" href="../jqwidgets/styles/site.css" type="text/css" />    <link rel="stylesheet" href="../jqwidgets/styles/jqx.light.css" type="text/css" />    <link rel="stylesheet" href="../styles/demos.css" type="text/css" />    <script type="text/javascript" src="../scripts/webcomponents-lite.min.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxcore.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxcore.elements.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/jqxlistbox.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxdropdownlist.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxdatatable.js"></script>    <script type="text/javascript">		var adapter = new jqx.dataAdapter({			dataType: "json",			dataFields: [				{ name: 'name', type: 'string' },				{ name: 'type', type: 'string' },				{ name: 'calories', type: 'int' },				{ name: 'totalfat', type: 'string' },				{ name: 'protein', type: 'string' }			],			id: 'id',			url: "../sampledata/beverages.txt"		});		var columns = [				{ text: 'Name', dataField: 'name', width: 300 },				{ text: 'Beverage Type', dataField: 'type', width: 300 },				{ text: 'Calories', dataField: 'calories', width: 180 },				{ text: 'Total Fat', dataField: 'totalfat', width: 120 },				{ text: 'Protein', dataField: 'protein' }		];		JQXElements.settings["dataTableSettings"] =		{			pageable:true,pagerButtonsCount:10, source:adapter,columnsResize:true, columns:columns, theme:"light"		}	window.onload = function() {		document.querySelector("jqx-data-table").addEventListener("filter", function(event) {			// Your code here.		});	};    </script></head><body>   <jqx-data-table settings="dataTableSettings"></jqx-data-table></body></html>

pageChanged Event

Code examples

Bind to the pageChanged event of jqxDataTable.

<!DOCTYPE html><html lang="en"><head>    <title id='Description'>DataTable Custom Element</title>    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />    <meta name="viewport" content="width=device-width, initial-scale=1 maximum-scale=1 minimum-scale=1" />    <link rel="stylesheet" href="../jqwidgets/styles/site.css" type="text/css" />    <link rel="stylesheet" href="../jqwidgets/styles/jqx.light.css" type="text/css" />    <link rel="stylesheet" href="../styles/demos.css" type="text/css" />    <script type="text/javascript" src="../scripts/webcomponents-lite.min.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxcore.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxcore.elements.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/jqxlistbox.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxdropdownlist.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxdatatable.js"></script>    <script type="text/javascript">		var adapter = new jqx.dataAdapter({			dataType: "json",			dataFields: [				{ name: 'name', type: 'string' },				{ name: 'type', type: 'string' },				{ name: 'calories', type: 'int' },				{ name: 'totalfat', type: 'string' },				{ name: 'protein', type: 'string' }			],			id: 'id',			url: "../sampledata/beverages.txt"		});		var columns = [				{ text: 'Name', dataField: 'name', width: 300 },				{ text: 'Beverage Type', dataField: 'type', width: 300 },				{ text: 'Calories', dataField: 'calories', width: 180 },				{ text: 'Total Fat', dataField: 'totalfat', width: 120 },				{ text: 'Protein', dataField: 'protein' }		];		JQXElements.settings["dataTableSettings"] =		{			pageable:true,pagerButtonsCount:10, source:adapter,columnsResize:true, columns:columns, theme:"light"		}	window.onload = function() {		document.querySelector("jqx-data-table").addEventListener("pageChanged", function(event) {			// Your code here.		});	};    </script></head><body>   <jqx-data-table settings="dataTableSettings"></jqx-data-table></body></html>

pageSizeChanged Event

Code examples

Bind to the pageSizeChanged event of jqxDataTable.

<!DOCTYPE html><html lang="en"><head>    <title id='Description'>DataTable Custom Element</title>    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />    <meta name="viewport" content="width=device-width, initial-scale=1 maximum-scale=1 minimum-scale=1" />    <link rel="stylesheet" href="../jqwidgets/styles/site.css" type="text/css" />    <link rel="stylesheet" href="../jqwidgets/styles/jqx.light.css" type="text/css" />    <link rel="stylesheet" href="../styles/demos.css" type="text/css" />    <script type="text/javascript" src="../scripts/webcomponents-lite.min.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxcore.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxcore.elements.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/jqxlistbox.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxdropdownlist.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxdatatable.js"></script>    <script type="text/javascript">		var adapter = new jqx.dataAdapter({			dataType: "json",			dataFields: [				{ name: 'name', type: 'string' },				{ name: 'type', type: 'string' },				{ name: 'calories', type: 'int' },				{ name: 'totalfat', type: 'string' },				{ name: 'protein', type: 'string' }			],			id: 'id',			url: "../sampledata/beverages.txt"		});		var columns = [				{ text: 'Name', dataField: 'name', width: 300 },				{ text: 'Beverage Type', dataField: 'type', width: 300 },				{ text: 'Calories', dataField: 'calories', width: 180 },				{ text: 'Total Fat', dataField: 'totalfat', width: 120 },				{ text: 'Protein', dataField: 'protein' }		];		JQXElements.settings["dataTableSettings"] =		{			pageable:true,pagerButtonsCount:10, source:adapter,columnsResize:true, columns:columns, theme:"light"		}	window.onload = function() {		document.querySelector("jqx-data-table").addEventListener("pageSizeChanged", function(event) {			// Your code here.		});	};    </script></head><body>   <jqx-data-table settings="dataTableSettings"></jqx-data-table></body></html>

rowClick Event

Code examples

Bind to the rowClick event of jqxDataTable.

<!DOCTYPE html><html lang="en"><head>    <title id='Description'>DataTable Custom Element</title>    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />    <meta name="viewport" content="width=device-width, initial-scale=1 maximum-scale=1 minimum-scale=1" />    <link rel="stylesheet" href="../jqwidgets/styles/site.css" type="text/css" />    <link rel="stylesheet" href="../jqwidgets/styles/jqx.light.css" type="text/css" />    <link rel="stylesheet" href="../styles/demos.css" type="text/css" />    <script type="text/javascript" src="../scripts/webcomponents-lite.min.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxcore.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxcore.elements.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/jqxlistbox.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxdropdownlist.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxdatatable.js"></script>    <script type="text/javascript">		var adapter = new jqx.dataAdapter({			dataType: "json",			dataFields: [				{ name: 'name', type: 'string' },				{ name: 'type', type: 'string' },				{ name: 'calories', type: 'int' },				{ name: 'totalfat', type: 'string' },				{ name: 'protein', type: 'string' }			],			id: 'id',			url: "../sampledata/beverages.txt"		});		var columns = [				{ text: 'Name', dataField: 'name', width: 300 },				{ text: 'Beverage Type', dataField: 'type', width: 300 },				{ text: 'Calories', dataField: 'calories', width: 180 },				{ text: 'Total Fat', dataField: 'totalfat', width: 120 },				{ text: 'Protein', dataField: 'protein' }		];		JQXElements.settings["dataTableSettings"] =		{			pageable:true,pagerButtonsCount:10, source:adapter,columnsResize:true, columns:columns, theme:"light"		}	window.onload = function() {		document.querySelector("jqx-data-table").addEventListener("rowClick", function(event) {			// Your code here.		});	};    </script></head><body>   <jqx-data-table settings="dataTableSettings"></jqx-data-table></body></html>

rowDoubleClick Event

Code examples

Bind to the rowDoubleClick event of jqxDataTable.

<!DOCTYPE html><html lang="en"><head>    <title id='Description'>DataTable Custom Element</title>    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />    <meta name="viewport" content="width=device-width, initial-scale=1 maximum-scale=1 minimum-scale=1" />    <link rel="stylesheet" href="../jqwidgets/styles/site.css" type="text/css" />    <link rel="stylesheet" href="../jqwidgets/styles/jqx.light.css" type="text/css" />    <link rel="stylesheet" href="../styles/demos.css" type="text/css" />    <script type="text/javascript" src="../scripts/webcomponents-lite.min.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxcore.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxcore.elements.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/jqxlistbox.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxdropdownlist.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxdatatable.js"></script>    <script type="text/javascript">		var adapter = new jqx.dataAdapter({			dataType: "json",			dataFields: [				{ name: 'name', type: 'string' },				{ name: 'type', type: 'string' },				{ name: 'calories', type: 'int' },				{ name: 'totalfat', type: 'string' },				{ name: 'protein', type: 'string' }			],			id: 'id',			url: "../sampledata/beverages.txt"		});		var columns = [				{ text: 'Name', dataField: 'name', width: 300 },				{ text: 'Beverage Type', dataField: 'type', width: 300 },				{ text: 'Calories', dataField: 'calories', width: 180 },				{ text: 'Total Fat', dataField: 'totalfat', width: 120 },				{ text: 'Protein', dataField: 'protein' }		];		JQXElements.settings["dataTableSettings"] =		{			pageable:true,pagerButtonsCount:10, source:adapter,columnsResize:true, columns:columns, theme:"light"		}	window.onload = function() {		document.querySelector("jqx-data-table").addEventListener("rowDoubleClick", function(event) {			// Your code here.		});	};    </script></head><body>   <jqx-data-table settings="dataTableSettings"></jqx-data-table></body></html>

rowSelect Event

Code examples

Bind to the rowSelect event of jqxDataTable.

<!DOCTYPE html><html lang="en"><head>    <title id='Description'>DataTable Custom Element</title>    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />    <meta name="viewport" content="width=device-width, initial-scale=1 maximum-scale=1 minimum-scale=1" />    <link rel="stylesheet" href="../jqwidgets/styles/site.css" type="text/css" />    <link rel="stylesheet" href="../jqwidgets/styles/jqx.light.css" type="text/css" />    <link rel="stylesheet" href="../styles/demos.css" type="text/css" />    <script type="text/javascript" src="../scripts/webcomponents-lite.min.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxcore.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxcore.elements.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/jqxlistbox.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxdropdownlist.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxdatatable.js"></script>    <script type="text/javascript">		var adapter = new jqx.dataAdapter({			dataType: "json",			dataFields: [				{ name: 'name', type: 'string' },				{ name: 'type', type: 'string' },				{ name: 'calories', type: 'int' },				{ name: 'totalfat', type: 'string' },				{ name: 'protein', type: 'string' }			],			id: 'id',			url: "../sampledata/beverages.txt"		});		var columns = [				{ text: 'Name', dataField: 'name', width: 300 },				{ text: 'Beverage Type', dataField: 'type', width: 300 },				{ text: 'Calories', dataField: 'calories', width: 180 },				{ text: 'Total Fat', dataField: 'totalfat', width: 120 },				{ text: 'Protein', dataField: 'protein' }		];		JQXElements.settings["dataTableSettings"] =		{			pageable:true,pagerButtonsCount:10, source:adapter,columnsResize:true, columns:columns, theme:"light"		}	window.onload = function() {		document.querySelector("jqx-data-table").addEventListener("rowSelect", function(event) {			// Your code here.		});	};    </script></head><body>   <jqx-data-table settings="dataTableSettings"></jqx-data-table></body></html>

rowUnselect Event

Code examples

Bind to the rowUnselect event of jqxDataTable.

<!DOCTYPE html><html lang="en"><head>    <title id='Description'>DataTable Custom Element</title>    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />    <meta name="viewport" content="width=device-width, initial-scale=1 maximum-scale=1 minimum-scale=1" />    <link rel="stylesheet" href="../jqwidgets/styles/site.css" type="text/css" />    <link rel="stylesheet" href="../jqwidgets/styles/jqx.light.css" type="text/css" />    <link rel="stylesheet" href="../styles/demos.css" type="text/css" />    <script type="text/javascript" src="../scripts/webcomponents-lite.min.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxcore.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxcore.elements.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/jqxlistbox.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxdropdownlist.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxdatatable.js"></script>    <script type="text/javascript">		var adapter = new jqx.dataAdapter({			dataType: "json",			dataFields: [				{ name: 'name', type: 'string' },				{ name: 'type', type: 'string' },				{ name: 'calories', type: 'int' },				{ name: 'totalfat', type: 'string' },				{ name: 'protein', type: 'string' }			],			id: 'id',			url: "../sampledata/beverages.txt"		});		var columns = [				{ text: 'Name', dataField: 'name', width: 300 },				{ text: 'Beverage Type', dataField: 'type', width: 300 },				{ text: 'Calories', dataField: 'calories', width: 180 },				{ text: 'Total Fat', dataField: 'totalfat', width: 120 },				{ text: 'Protein', dataField: 'protein' }		];		JQXElements.settings["dataTableSettings"] =		{			pageable:true,pagerButtonsCount:10, source:adapter,columnsResize:true, columns:columns, theme:"light"		}	window.onload = function() {		document.querySelector("jqx-data-table").addEventListener("rowUnselect", function(event) {			// Your code here.		});	};    </script></head><body>   <jqx-data-table settings="dataTableSettings"></jqx-data-table></body></html>

rowBeginEdit Event

Code examples

Bind to the rowBeginEdit event of jqxDataTable.

<!DOCTYPE html><html lang="en"><head>    <title id='Description'>DataTable Custom Element</title>    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />    <meta name="viewport" content="width=device-width, initial-scale=1 maximum-scale=1 minimum-scale=1" />    <link rel="stylesheet" href="../jqwidgets/styles/site.css" type="text/css" />    <link rel="stylesheet" href="../jqwidgets/styles/jqx.light.css" type="text/css" />    <link rel="stylesheet" href="../styles/demos.css" type="text/css" />    <script type="text/javascript" src="../scripts/webcomponents-lite.min.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxcore.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxcore.elements.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/jqxlistbox.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxdropdownlist.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxdatatable.js"></script>    <script type="text/javascript">		var adapter = new jqx.dataAdapter({			dataType: "json",			dataFields: [				{ name: 'name', type: 'string' },				{ name: 'type', type: 'string' },				{ name: 'calories', type: 'int' },				{ name: 'totalfat', type: 'string' },				{ name: 'protein', type: 'string' }			],			id: 'id',			url: "../sampledata/beverages.txt"		});		var columns = [				{ text: 'Name', dataField: 'name', width: 300 },				{ text: 'Beverage Type', dataField: 'type', width: 300 },				{ text: 'Calories', dataField: 'calories', width: 180 },				{ text: 'Total Fat', dataField: 'totalfat', width: 120 },				{ text: 'Protein', dataField: 'protein' }		];		JQXElements.settings["dataTableSettings"] =		{			pageable:true,pagerButtonsCount:10, source:adapter,columnsResize:true, columns:columns, theme:"light"		}	window.onload = function() {		document.querySelector("jqx-data-table").addEventListener("rowBeginEdit", function(event) {			// Your code here.		});	};    </script></head><body>   <jqx-data-table settings="dataTableSettings"></jqx-data-table></body></html>

rowEndEdit Event

Code examples

Bind to the rowEndEdit event of jqxDataTable.

<!DOCTYPE html><html lang="en"><head>    <title id='Description'>DataTable Custom Element</title>    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />    <meta name="viewport" content="width=device-width, initial-scale=1 maximum-scale=1 minimum-scale=1" />    <link rel="stylesheet" href="../jqwidgets/styles/site.css" type="text/css" />    <link rel="stylesheet" href="../jqwidgets/styles/jqx.light.css" type="text/css" />    <link rel="stylesheet" href="../styles/demos.css" type="text/css" />    <script type="text/javascript" src="../scripts/webcomponents-lite.min.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxcore.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxcore.elements.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/jqxlistbox.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxdropdownlist.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxdatatable.js"></script>    <script type="text/javascript">		var adapter = new jqx.dataAdapter({			dataType: "json",			dataFields: [				{ name: 'name', type: 'string' },				{ name: 'type', type: 'string' },				{ name: 'calories', type: 'int' },				{ name: 'totalfat', type: 'string' },				{ name: 'protein', type: 'string' }			],			id: 'id',			url: "../sampledata/beverages.txt"		});		var columns = [				{ text: 'Name', dataField: 'name', width: 300 },				{ text: 'Beverage Type', dataField: 'type', width: 300 },				{ text: 'Calories', dataField: 'calories', width: 180 },				{ text: 'Total Fat', dataField: 'totalfat', width: 120 },				{ text: 'Protein', dataField: 'protein' }		];		JQXElements.settings["dataTableSettings"] =		{			pageable:true,pagerButtonsCount:10, source:adapter,columnsResize:true, columns:columns, theme:"light"		}	window.onload = function() {		document.querySelector("jqx-data-table").addEventListener("rowEndEdit", function(event) {			// Your code here.		});	};    </script></head><body>   <jqx-data-table settings="dataTableSettings"></jqx-data-table></body></html>

rowExpand Event

Code examples

Bind to the rowExpand event of jqxDataTable.

<!DOCTYPE html><html lang="en"><head>    <title id='Description'>DataTable Custom Element</title>    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />    <meta name="viewport" content="width=device-width, initial-scale=1 maximum-scale=1 minimum-scale=1" />    <link rel="stylesheet" href="../jqwidgets/styles/site.css" type="text/css" />    <link rel="stylesheet" href="../jqwidgets/styles/jqx.light.css" type="text/css" />    <link rel="stylesheet" href="../styles/demos.css" type="text/css" />    <script type="text/javascript" src="../scripts/webcomponents-lite.min.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxcore.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxcore.elements.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/jqxlistbox.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxdropdownlist.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxdatatable.js"></script>    <script type="text/javascript">		var adapter = new jqx.dataAdapter({			dataType: "json",			dataFields: [				{ name: 'name', type: 'string' },				{ name: 'type', type: 'string' },				{ name: 'calories', type: 'int' },				{ name: 'totalfat', type: 'string' },				{ name: 'protein', type: 'string' }			],			id: 'id',			url: "../sampledata/beverages.txt"		});		var columns = [				{ text: 'Name', dataField: 'name', width: 300 },				{ text: 'Beverage Type', dataField: 'type', width: 300 },				{ text: 'Calories', dataField: 'calories', width: 180 },				{ text: 'Total Fat', dataField: 'totalfat', width: 120 },				{ text: 'Protein', dataField: 'protein' }		];		JQXElements.settings["dataTableSettings"] =		{			pageable:true,pagerButtonsCount:10, source:adapter,columnsResize:true, columns:columns, theme:"light"		}	window.onload = function() {		document.querySelector("jqx-data-table").addEventListener("rowExpand", function(event) {			// Your code here.		});	};    </script></head><body>   <jqx-data-table settings="dataTableSettings"></jqx-data-table></body></html>

rowCollapse Event

Code examples

Bind to the rowCollapse event of jqxDataTable.

<!DOCTYPE html><html lang="en"><head>    <title id='Description'>DataTable Custom Element</title>    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />    <meta name="viewport" content="width=device-width, initial-scale=1 maximum-scale=1 minimum-scale=1" />    <link rel="stylesheet" href="../jqwidgets/styles/site.css" type="text/css" />    <link rel="stylesheet" href="../jqwidgets/styles/jqx.light.css" type="text/css" />    <link rel="stylesheet" href="../styles/demos.css" type="text/css" />    <script type="text/javascript" src="../scripts/webcomponents-lite.min.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxcore.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxcore.elements.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/jqxlistbox.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxdropdownlist.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxdatatable.js"></script>    <script type="text/javascript">		var adapter = new jqx.dataAdapter({			dataType: "json",			dataFields: [				{ name: 'name', type: 'string' },				{ name: 'type', type: 'string' },				{ name: 'calories', type: 'int' },				{ name: 'totalfat', type: 'string' },				{ name: 'protein', type: 'string' }			],			id: 'id',			url: "../sampledata/beverages.txt"		});		var columns = [				{ text: 'Name', dataField: 'name', width: 300 },				{ text: 'Beverage Type', dataField: 'type', width: 300 },				{ text: 'Calories', dataField: 'calories', width: 180 },				{ text: 'Total Fat', dataField: 'totalfat', width: 120 },				{ text: 'Protein', dataField: 'protein' }		];		JQXElements.settings["dataTableSettings"] =		{			pageable:true,pagerButtonsCount:10, source:adapter,columnsResize:true, columns:columns, theme:"light"		}	window.onload = function() {		document.querySelector("jqx-data-table").addEventListener("rowCollapse", function(event) {			// Your code here.		});	};    </script></head><body>   <jqx-data-table settings="dataTableSettings"></jqx-data-table></body></html>

addRow Method

Parameter	Type	Description
rowIndex	number
rowData	object
rowPosition	string	"last" and "first". By default "last" is used

Return Value
void

<!DOCTYPE html><html lang="en"><head>    <title id='Description'>DataTable Custom Element</title>    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />    <meta name="viewport" content="width=device-width, initial-scale=1 maximum-scale=1 minimum-scale=1" />    <link rel="stylesheet" href="../jqwidgets/styles/site.css" type="text/css" />    <link rel="stylesheet" href="../jqwidgets/styles/jqx.light.css" type="text/css" />    <link rel="stylesheet" href="../styles/demos.css" type="text/css" />    <script type="text/javascript" src="../scripts/webcomponents-lite.min.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxcore.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxcore.elements.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/jqxlistbox.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxdropdownlist.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxdatatable.js"></script>    <script type="text/javascript">		var adapter = new jqx.dataAdapter({			dataType: "json",			dataFields: [				{ name: 'name', type: 'string' },				{ name: 'type', type: 'string' },				{ name: 'calories', type: 'int' },				{ name: 'totalfat', type: 'string' },				{ name: 'protein', type: 'string' }			],			id: 'id',			url: "../sampledata/beverages.txt"		});		var columns = [				{ text: 'Name', dataField: 'name', width: 300 },				{ text: 'Beverage Type', dataField: 'type', width: 300 },				{ text: 'Calories', dataField: 'calories', width: 180 },				{ text: 'Total Fat', dataField: 'totalfat', width: 120 },				{ text: 'Protein', dataField: 'protein' }		];		JQXElements.settings["dataTableSettings"] =		{			width:850		}	window.onload = function() {		document.querySelector("jqx-data-table").addRow(10,{},'first');								}    </script></head><body>   <jqx-data-table settings="dataTableSettings"></jqx-data-table></body></html>

addFilter Method

Parameter	Type	Description
dataField	string
filerGroup	object

Return Value
void

<!DOCTYPE html><html lang="en"><head>    <title id='Description'>DataTable Custom Element</title>    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />    <meta name="viewport" content="width=device-width, initial-scale=1 maximum-scale=1 minimum-scale=1" />    <link rel="stylesheet" href="../jqwidgets/styles/site.css" type="text/css" />    <link rel="stylesheet" href="../jqwidgets/styles/jqx.light.css" type="text/css" />    <link rel="stylesheet" href="../styles/demos.css" type="text/css" />    <script type="text/javascript" src="../scripts/webcomponents-lite.min.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxcore.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxcore.elements.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/jqxlistbox.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxdropdownlist.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxdatatable.js"></script>    <script type="text/javascript">		var adapter = new jqx.dataAdapter({			dataType: "json",			dataFields: [				{ name: 'name', type: 'string' },				{ name: 'type', type: 'string' },				{ name: 'calories', type: 'int' },				{ name: 'totalfat', type: 'string' },				{ name: 'protein', type: 'string' }			],			id: 'id',			url: "../sampledata/beverages.txt"		});		var columns = [				{ text: 'Name', dataField: 'name', width: 300 },				{ text: 'Beverage Type', dataField: 'type', width: 300 },				{ text: 'Calories', dataField: 'calories', width: 180 },				{ text: 'Total Fat', dataField: 'totalfat', width: 120 },				{ text: 'Protein', dataField: 'protein' }		];		JQXElements.settings["dataTableSettings"] =		{			width:850		}	window.onload = function() {		document.querySelector("jqx-data-table").addFilter('firstName',new $.jqx.filtergroup());								}    </script></head><body>   <jqx-data-table settings="dataTableSettings"></jqx-data-table></body></html>

applyFilters Method

Parameter	Type	Description
None

Return Value
void

<!DOCTYPE html><html lang="en"><head>    <title id='Description'>DataTable Custom Element</title>    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />    <meta name="viewport" content="width=device-width, initial-scale=1 maximum-scale=1 minimum-scale=1" />    <link rel="stylesheet" href="../jqwidgets/styles/site.css" type="text/css" />    <link rel="stylesheet" href="../jqwidgets/styles/jqx.light.css" type="text/css" />    <link rel="stylesheet" href="../styles/demos.css" type="text/css" />    <script type="text/javascript" src="../scripts/webcomponents-lite.min.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxcore.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxcore.elements.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/jqxlistbox.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxdropdownlist.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxdatatable.js"></script>    <script type="text/javascript">		var adapter = new jqx.dataAdapter({			dataType: "json",			dataFields: [				{ name: 'name', type: 'string' },				{ name: 'type', type: 'string' },				{ name: 'calories', type: 'int' },				{ name: 'totalfat', type: 'string' },				{ name: 'protein', type: 'string' }			],			id: 'id',			url: "../sampledata/beverages.txt"		});		var columns = [				{ text: 'Name', dataField: 'name', width: 300 },				{ text: 'Beverage Type', dataField: 'type', width: 300 },				{ text: 'Calories', dataField: 'calories', width: 180 },				{ text: 'Total Fat', dataField: 'totalfat', width: 120 },				{ text: 'Protein', dataField: 'protein' }		];		JQXElements.settings["dataTableSettings"] =		{			width:850		}	window.onload = function() {		document.querySelector("jqx-data-table").applyFilters();								}    </script></head><body>   <jqx-data-table settings="dataTableSettings"></jqx-data-table></body></html>

beginUpdate Method

Parameter	Type	Description
None

Return Value
void

<!DOCTYPE html><html lang="en"><head>    <title id='Description'>DataTable Custom Element</title>    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />    <meta name="viewport" content="width=device-width, initial-scale=1 maximum-scale=1 minimum-scale=1" />    <link rel="stylesheet" href="../jqwidgets/styles/site.css" type="text/css" />    <link rel="stylesheet" href="../jqwidgets/styles/jqx.light.css" type="text/css" />    <link rel="stylesheet" href="../styles/demos.css" type="text/css" />    <script type="text/javascript" src="../scripts/webcomponents-lite.min.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxcore.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxcore.elements.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/jqxlistbox.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxdropdownlist.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxdatatable.js"></script>    <script type="text/javascript">		var adapter = new jqx.dataAdapter({			dataType: "json",			dataFields: [				{ name: 'name', type: 'string' },				{ name: 'type', type: 'string' },				{ name: 'calories', type: 'int' },				{ name: 'totalfat', type: 'string' },				{ name: 'protein', type: 'string' }			],			id: 'id',			url: "../sampledata/beverages.txt"		});		var columns = [				{ text: 'Name', dataField: 'name', width: 300 },				{ text: 'Beverage Type', dataField: 'type', width: 300 },				{ text: 'Calories', dataField: 'calories', width: 180 },				{ text: 'Total Fat', dataField: 'totalfat', width: 120 },				{ text: 'Protein', dataField: 'protein' }		];		JQXElements.settings["dataTableSettings"] =		{			width:850		}	window.onload = function() {		document.querySelector("jqx-data-table").beginUpdate();								}    </script></head><body>   <jqx-data-table settings="dataTableSettings"></jqx-data-table></body></html>

beginRowEdit Method

Parameter	Type	Description
rowIndex	number

Return Value
void

<!DOCTYPE html><html lang="en"><head>    <title id='Description'>DataTable Custom Element</title>    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />    <meta name="viewport" content="width=device-width, initial-scale=1 maximum-scale=1 minimum-scale=1" />    <link rel="stylesheet" href="../jqwidgets/styles/site.css" type="text/css" />    <link rel="stylesheet" href="../jqwidgets/styles/jqx.light.css" type="text/css" />    <link rel="stylesheet" href="../styles/demos.css" type="text/css" />    <script type="text/javascript" src="../scripts/webcomponents-lite.min.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxcore.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxcore.elements.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/jqxlistbox.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxdropdownlist.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxdatatable.js"></script>    <script type="text/javascript">		var adapter = new jqx.dataAdapter({			dataType: "json",			dataFields: [				{ name: 'name', type: 'string' },				{ name: 'type', type: 'string' },				{ name: 'calories', type: 'int' },				{ name: 'totalfat', type: 'string' },				{ name: 'protein', type: 'string' }			],			id: 'id',			url: "../sampledata/beverages.txt"		});		var columns = [				{ text: 'Name', dataField: 'name', width: 300 },				{ text: 'Beverage Type', dataField: 'type', width: 300 },				{ text: 'Calories', dataField: 'calories', width: 180 },				{ text: 'Total Fat', dataField: 'totalfat', width: 120 },				{ text: 'Protein', dataField: 'protein' }		];		JQXElements.settings["dataTableSettings"] =		{			width:850		}	window.onload = function() {		document.querySelector("jqx-data-table").beginRowEdit(10);								}    </script></head><body>   <jqx-data-table settings="dataTableSettings"></jqx-data-table></body></html>

beginCellEdit Method

Parameter	Type	Description
rowIndex	number
dataField	string

Return Value
void

<!DOCTYPE html><html lang="en"><head>    <title id='Description'>DataTable Custom Element</title>    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />    <meta name="viewport" content="width=device-width, initial-scale=1 maximum-scale=1 minimum-scale=1" />    <link rel="stylesheet" href="../jqwidgets/styles/site.css" type="text/css" />    <link rel="stylesheet" href="../jqwidgets/styles/jqx.light.css" type="text/css" />    <link rel="stylesheet" href="../styles/demos.css" type="text/css" />    <script type="text/javascript" src="../scripts/webcomponents-lite.min.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxcore.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxcore.elements.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/jqxlistbox.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxdropdownlist.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxdatatable.js"></script>    <script type="text/javascript">		var adapter = new jqx.dataAdapter({			dataType: "json",			dataFields: [				{ name: 'name', type: 'string' },				{ name: 'type', type: 'string' },				{ name: 'calories', type: 'int' },				{ name: 'totalfat', type: 'string' },				{ name: 'protein', type: 'string' }			],			id: 'id',			url: "../sampledata/beverages.txt"		});		var columns = [				{ text: 'Name', dataField: 'name', width: 300 },				{ text: 'Beverage Type', dataField: 'type', width: 300 },				{ text: 'Calories', dataField: 'calories', width: 180 },				{ text: 'Total Fat', dataField: 'totalfat', width: 120 },				{ text: 'Protein', dataField: 'protein' }		];		JQXElements.settings["dataTableSettings"] =		{			width:850		}	window.onload = function() {		document.querySelector("jqx-data-table").beginCellEdit(10,'firstName');								}    </script></head><body>   <jqx-data-table settings="dataTableSettings"></jqx-data-table></body></html>

clearSelection Method

Parameter	Type	Description
None

Return Value
void

<!DOCTYPE html><html lang="en"><head>    <title id='Description'>DataTable Custom Element</title>    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />    <meta name="viewport" content="width=device-width, initial-scale=1 maximum-scale=1 minimum-scale=1" />    <link rel="stylesheet" href="../jqwidgets/styles/site.css" type="text/css" />    <link rel="stylesheet" href="../jqwidgets/styles/jqx.light.css" type="text/css" />    <link rel="stylesheet" href="../styles/demos.css" type="text/css" />    <script type="text/javascript" src="../scripts/webcomponents-lite.min.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxcore.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxcore.elements.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/jqxlistbox.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxdropdownlist.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxdatatable.js"></script>    <script type="text/javascript">		var adapter = new jqx.dataAdapter({			dataType: "json",			dataFields: [				{ name: 'name', type: 'string' },				{ name: 'type', type: 'string' },				{ name: 'calories', type: 'int' },				{ name: 'totalfat', type: 'string' },				{ name: 'protein', type: 'string' }			],			id: 'id',			url: "../sampledata/beverages.txt"		});		var columns = [				{ text: 'Name', dataField: 'name', width: 300 },				{ text: 'Beverage Type', dataField: 'type', width: 300 },				{ text: 'Calories', dataField: 'calories', width: 180 },				{ text: 'Total Fat', dataField: 'totalfat', width: 120 },				{ text: 'Protein', dataField: 'protein' }		];		JQXElements.settings["dataTableSettings"] =		{			width:850		}	window.onload = function() {		document.querySelector("jqx-data-table").clearSelection();								}    </script></head><body>   <jqx-data-table settings="dataTableSettings"></jqx-data-table></body></html>

clearFilters Method

Parameter	Type	Description
None

Return Value
void

<!DOCTYPE html><html lang="en"><head>    <title id='Description'>DataTable Custom Element</title>    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />    <meta name="viewport" content="width=device-width, initial-scale=1 maximum-scale=1 minimum-scale=1" />    <link rel="stylesheet" href="../jqwidgets/styles/site.css" type="text/css" />    <link rel="stylesheet" href="../jqwidgets/styles/jqx.light.css" type="text/css" />    <link rel="stylesheet" href="../styles/demos.css" type="text/css" />    <script type="text/javascript" src="../scripts/webcomponents-lite.min.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxcore.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxcore.elements.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/jqxlistbox.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxdropdownlist.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxdatatable.js"></script>    <script type="text/javascript">		var adapter = new jqx.dataAdapter({			dataType: "json",			dataFields: [				{ name: 'name', type: 'string' },				{ name: 'type', type: 'string' },				{ name: 'calories', type: 'int' },				{ name: 'totalfat', type: 'string' },				{ name: 'protein', type: 'string' }			],			id: 'id',			url: "../sampledata/beverages.txt"		});		var columns = [				{ text: 'Name', dataField: 'name', width: 300 },				{ text: 'Beverage Type', dataField: 'type', width: 300 },				{ text: 'Calories', dataField: 'calories', width: 180 },				{ text: 'Total Fat', dataField: 'totalfat', width: 120 },				{ text: 'Protein', dataField: 'protein' }		];		JQXElements.settings["dataTableSettings"] =		{			width:850		}	window.onload = function() {		document.querySelector("jqx-data-table").clearFilters();								}    </script></head><body>   <jqx-data-table settings="dataTableSettings"></jqx-data-table></body></html>

clear Method

Parameter	Type	Description
None

Return Value
void

<!DOCTYPE html><html lang="en"><head>    <title id='Description'>DataTable Custom Element</title>    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />    <meta name="viewport" content="width=device-width, initial-scale=1 maximum-scale=1 minimum-scale=1" />    <link rel="stylesheet" href="../jqwidgets/styles/site.css" type="text/css" />    <link rel="stylesheet" href="../jqwidgets/styles/jqx.light.css" type="text/css" />    <link rel="stylesheet" href="../styles/demos.css" type="text/css" />    <script type="text/javascript" src="../scripts/webcomponents-lite.min.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxcore.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxcore.elements.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/jqxlistbox.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxdropdownlist.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxdatatable.js"></script>    <script type="text/javascript">		var adapter = new jqx.dataAdapter({			dataType: "json",			dataFields: [				{ name: 'name', type: 'string' },				{ name: 'type', type: 'string' },				{ name: 'calories', type: 'int' },				{ name: 'totalfat', type: 'string' },				{ name: 'protein', type: 'string' }			],			id: 'id',			url: "../sampledata/beverages.txt"		});		var columns = [				{ text: 'Name', dataField: 'name', width: 300 },				{ text: 'Beverage Type', dataField: 'type', width: 300 },				{ text: 'Calories', dataField: 'calories', width: 180 },				{ text: 'Total Fat', dataField: 'totalfat', width: 120 },				{ text: 'Protein', dataField: 'protein' }		];		JQXElements.settings["dataTableSettings"] =		{			width:850		}	window.onload = function() {		document.querySelector("jqx-data-table").clear();								}    </script></head><body>   <jqx-data-table settings="dataTableSettings"></jqx-data-table></body></html>

destroy Method

Parameter	Type	Description
None

Return Value
void

<!DOCTYPE html><html lang="en"><head>    <title id='Description'>DataTable Custom Element</title>    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />    <meta name="viewport" content="width=device-width, initial-scale=1 maximum-scale=1 minimum-scale=1" />    <link rel="stylesheet" href="../jqwidgets/styles/site.css" type="text/css" />    <link rel="stylesheet" href="../jqwidgets/styles/jqx.light.css" type="text/css" />    <link rel="stylesheet" href="../styles/demos.css" type="text/css" />    <script type="text/javascript" src="../scripts/webcomponents-lite.min.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxcore.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxcore.elements.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/jqxlistbox.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxdropdownlist.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxdatatable.js"></script>    <script type="text/javascript">		var adapter = new jqx.dataAdapter({			dataType: "json",			dataFields: [				{ name: 'name', type: 'string' },				{ name: 'type', type: 'string' },				{ name: 'calories', type: 'int' },				{ name: 'totalfat', type: 'string' },				{ name: 'protein', type: 'string' }			],			id: 'id',			url: "../sampledata/beverages.txt"		});		var columns = [				{ text: 'Name', dataField: 'name', width: 300 },				{ text: 'Beverage Type', dataField: 'type', width: 300 },				{ text: 'Calories', dataField: 'calories', width: 180 },				{ text: 'Total Fat', dataField: 'totalfat', width: 120 },				{ text: 'Protein', dataField: 'protein' }		];		JQXElements.settings["dataTableSettings"] =		{			width:850		}	window.onload = function() {		document.querySelector("jqx-data-table").destroy();								}    </script></head><body>   <jqx-data-table settings="dataTableSettings"></jqx-data-table></body></html>

deleteRow Method

Parameter	Type	Description
rowIndex	number

Return Value
void

<!DOCTYPE html><html lang="en"><head>    <title id='Description'>DataTable Custom Element</title>    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />    <meta name="viewport" content="width=device-width, initial-scale=1 maximum-scale=1 minimum-scale=1" />    <link rel="stylesheet" href="../jqwidgets/styles/site.css" type="text/css" />    <link rel="stylesheet" href="../jqwidgets/styles/jqx.light.css" type="text/css" />    <link rel="stylesheet" href="../styles/demos.css" type="text/css" />    <script type="text/javascript" src="../scripts/webcomponents-lite.min.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxcore.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxcore.elements.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/jqxlistbox.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxdropdownlist.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxdatatable.js"></script>    <script type="text/javascript">		var adapter = new jqx.dataAdapter({			dataType: "json",			dataFields: [				{ name: 'name', type: 'string' },				{ name: 'type', type: 'string' },				{ name: 'calories', type: 'int' },				{ name: 'totalfat', type: 'string' },				{ name: 'protein', type: 'string' }			],			id: 'id',			url: "../sampledata/beverages.txt"		});		var columns = [				{ text: 'Name', dataField: 'name', width: 300 },				{ text: 'Beverage Type', dataField: 'type', width: 300 },				{ text: 'Calories', dataField: 'calories', width: 180 },				{ text: 'Total Fat', dataField: 'totalfat', width: 120 },				{ text: 'Protein', dataField: 'protein' }		];		JQXElements.settings["dataTableSettings"] =		{			width:850		}	window.onload = function() {		document.querySelector("jqx-data-table").deleteRow(0);								}    </script></head><body>   <jqx-data-table settings="dataTableSettings"></jqx-data-table></body></html>

endUpdate Method

Parameter	Type	Description
None

Return Value
void

<!DOCTYPE html><html lang="en"><head>    <title id='Description'>DataTable Custom Element</title>    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />    <meta name="viewport" content="width=device-width, initial-scale=1 maximum-scale=1 minimum-scale=1" />    <link rel="stylesheet" href="../jqwidgets/styles/site.css" type="text/css" />    <link rel="stylesheet" href="../jqwidgets/styles/jqx.light.css" type="text/css" />    <link rel="stylesheet" href="../styles/demos.css" type="text/css" />    <script type="text/javascript" src="../scripts/webcomponents-lite.min.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxcore.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxcore.elements.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/jqxlistbox.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxdropdownlist.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxdatatable.js"></script>    <script type="text/javascript">		var adapter = new jqx.dataAdapter({			dataType: "json",			dataFields: [				{ name: 'name', type: 'string' },				{ name: 'type', type: 'string' },				{ name: 'calories', type: 'int' },				{ name: 'totalfat', type: 'string' },				{ name: 'protein', type: 'string' }			],			id: 'id',			url: "../sampledata/beverages.txt"		});		var columns = [				{ text: 'Name', dataField: 'name', width: 300 },				{ text: 'Beverage Type', dataField: 'type', width: 300 },				{ text: 'Calories', dataField: 'calories', width: 180 },				{ text: 'Total Fat', dataField: 'totalfat', width: 120 },				{ text: 'Protein', dataField: 'protein' }		];		JQXElements.settings["dataTableSettings"] =		{			width:850		}	window.onload = function() {		document.querySelector("jqx-data-table").endUpdate();								}    </script></head><body>   <jqx-data-table settings="dataTableSettings"></jqx-data-table></body></html>

ensureRowVisible Method

Parameter	Type	Description
rowIndex	number

Return Value
void

<!DOCTYPE html><html lang="en"><head>    <title id='Description'>DataTable Custom Element</title>    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />    <meta name="viewport" content="width=device-width, initial-scale=1 maximum-scale=1 minimum-scale=1" />    <link rel="stylesheet" href="../jqwidgets/styles/site.css" type="text/css" />    <link rel="stylesheet" href="../jqwidgets/styles/jqx.light.css" type="text/css" />    <link rel="stylesheet" href="../styles/demos.css" type="text/css" />    <script type="text/javascript" src="../scripts/webcomponents-lite.min.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxcore.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxcore.elements.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/jqxlistbox.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxdropdownlist.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxdatatable.js"></script>    <script type="text/javascript">		var adapter = new jqx.dataAdapter({			dataType: "json",			dataFields: [				{ name: 'name', type: 'string' },				{ name: 'type', type: 'string' },				{ name: 'calories', type: 'int' },				{ name: 'totalfat', type: 'string' },				{ name: 'protein', type: 'string' }			],			id: 'id',			url: "../sampledata/beverages.txt"		});		var columns = [				{ text: 'Name', dataField: 'name', width: 300 },				{ text: 'Beverage Type', dataField: 'type', width: 300 },				{ text: 'Calories', dataField: 'calories', width: 180 },				{ text: 'Total Fat', dataField: 'totalfat', width: 120 },				{ text: 'Protein', dataField: 'protein' }		];		JQXElements.settings["dataTableSettings"] =		{			width:850		}	window.onload = function() {		document.querySelector("jqx-data-table").ensureRowVisible(10);								}    </script></head><body>   <jqx-data-table settings="dataTableSettings"></jqx-data-table></body></html>

endRowEdit Method

Parameter	Type	Description
rowIndex	number
cancelChanges	boolean

Return Value
void

<!DOCTYPE html><html lang="en"><head>    <title id='Description'>DataTable Custom Element</title>    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />    <meta name="viewport" content="width=device-width, initial-scale=1 maximum-scale=1 minimum-scale=1" />    <link rel="stylesheet" href="../jqwidgets/styles/site.css" type="text/css" />    <link rel="stylesheet" href="../jqwidgets/styles/jqx.light.css" type="text/css" />    <link rel="stylesheet" href="../styles/demos.css" type="text/css" />    <script type="text/javascript" src="../scripts/webcomponents-lite.min.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxcore.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxcore.elements.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/jqxlistbox.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxdropdownlist.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxdatatable.js"></script>    <script type="text/javascript">		var adapter = new jqx.dataAdapter({			dataType: "json",			dataFields: [				{ name: 'name', type: 'string' },				{ name: 'type', type: 'string' },				{ name: 'calories', type: 'int' },				{ name: 'totalfat', type: 'string' },				{ name: 'protein', type: 'string' }			],			id: 'id',			url: "../sampledata/beverages.txt"		});		var columns = [				{ text: 'Name', dataField: 'name', width: 300 },				{ text: 'Beverage Type', dataField: 'type', width: 300 },				{ text: 'Calories', dataField: 'calories', width: 180 },				{ text: 'Total Fat', dataField: 'totalfat', width: 120 },				{ text: 'Protein', dataField: 'protein' }		];		JQXElements.settings["dataTableSettings"] =		{			width:850		}	window.onload = function() {		document.querySelector("jqx-data-table").endRowEdit(10,true);								}    </script></head><body>   <jqx-data-table settings="dataTableSettings"></jqx-data-table></body></html>

endCellEdit Method

Parameter	Type	Description
rowIndex	number
dataField	string

Return Value
void

<!DOCTYPE html><html lang="en"><head>    <title id='Description'>DataTable Custom Element</title>    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />    <meta name="viewport" content="width=device-width, initial-scale=1 maximum-scale=1 minimum-scale=1" />    <link rel="stylesheet" href="../jqwidgets/styles/site.css" type="text/css" />    <link rel="stylesheet" href="../jqwidgets/styles/jqx.light.css" type="text/css" />    <link rel="stylesheet" href="../styles/demos.css" type="text/css" />    <script type="text/javascript" src="../scripts/webcomponents-lite.min.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxcore.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxcore.elements.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/jqxlistbox.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxdropdownlist.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxdatatable.js"></script>    <script type="text/javascript">		var adapter = new jqx.dataAdapter({			dataType: "json",			dataFields: [				{ name: 'name', type: 'string' },				{ name: 'type', type: 'string' },				{ name: 'calories', type: 'int' },				{ name: 'totalfat', type: 'string' },				{ name: 'protein', type: 'string' }			],			id: 'id',			url: "../sampledata/beverages.txt"		});		var columns = [				{ text: 'Name', dataField: 'name', width: 300 },				{ text: 'Beverage Type', dataField: 'type', width: 300 },				{ text: 'Calories', dataField: 'calories', width: 180 },				{ text: 'Total Fat', dataField: 'totalfat', width: 120 },				{ text: 'Protein', dataField: 'protein' }		];		JQXElements.settings["dataTableSettings"] =		{			width:850		}	window.onload = function() {		document.querySelector("jqx-data-table").endCellEdit(10,'firstName');								}    </script></head><body>   <jqx-data-table settings="dataTableSettings"></jqx-data-table></body></html>

exportData Method

Parameter	Type	Description
exportDataType	string	'xls', 'html', 'xml', 'json', 'csv', 'tsv' or 'pdf'

Return Value
Object(optional)

<!DOCTYPE html><html lang="en"><head>    <title id='Description'>DataTable Custom Element</title>    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />    <meta name="viewport" content="width=device-width, initial-scale=1 maximum-scale=1 minimum-scale=1" />    <link rel="stylesheet" href="../jqwidgets/styles/site.css" type="text/css" />    <link rel="stylesheet" href="../jqwidgets/styles/jqx.light.css" type="text/css" />    <link rel="stylesheet" href="../styles/demos.css" type="text/css" />    <script type="text/javascript" src="../scripts/webcomponents-lite.min.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxcore.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxcore.elements.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/jqxlistbox.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxdropdownlist.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxdatatable.js"></script>    <script type="text/javascript">		var adapter = new jqx.dataAdapter({			dataType: "json",			dataFields: [				{ name: 'name', type: 'string' },				{ name: 'type', type: 'string' },				{ name: 'calories', type: 'int' },				{ name: 'totalfat', type: 'string' },				{ name: 'protein', type: 'string' }			],			id: 'id',			url: "../sampledata/beverages.txt"		});		var columns = [				{ text: 'Name', dataField: 'name', width: 300 },				{ text: 'Beverage Type', dataField: 'type', width: 300 },				{ text: 'Calories', dataField: 'calories', width: 180 },				{ text: 'Total Fat', dataField: 'totalfat', width: 120 },				{ text: 'Protein', dataField: 'protein' }		];		JQXElements.settings["dataTableSettings"] =		{			width:850		}	window.onload = function() {		document.querySelector("jqx-data-table").exportData('xls');								}    </script></head><body>   <jqx-data-table settings="dataTableSettings"></jqx-data-table></body></html>

focus Method

Parameter	Type	Description
None

Return Value
void

<!DOCTYPE html><html lang="en"><head>    <title id='Description'>DataTable Custom Element</title>    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />    <meta name="viewport" content="width=device-width, initial-scale=1 maximum-scale=1 minimum-scale=1" />    <link rel="stylesheet" href="../jqwidgets/styles/site.css" type="text/css" />    <link rel="stylesheet" href="../jqwidgets/styles/jqx.light.css" type="text/css" />    <link rel="stylesheet" href="../styles/demos.css" type="text/css" />    <script type="text/javascript" src="../scripts/webcomponents-lite.min.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxcore.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxcore.elements.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/jqxlistbox.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxdropdownlist.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxdatatable.js"></script>    <script type="text/javascript">		var adapter = new jqx.dataAdapter({			dataType: "json",			dataFields: [				{ name: 'name', type: 'string' },				{ name: 'type', type: 'string' },				{ name: 'calories', type: 'int' },				{ name: 'totalfat', type: 'string' },				{ name: 'protein', type: 'string' }			],			id: 'id',			url: "../sampledata/beverages.txt"		});		var columns = [				{ text: 'Name', dataField: 'name', width: 300 },				{ text: 'Beverage Type', dataField: 'type', width: 300 },				{ text: 'Calories', dataField: 'calories', width: 180 },				{ text: 'Total Fat', dataField: 'totalfat', width: 120 },				{ text: 'Protein', dataField: 'protein' }		];		JQXElements.settings["dataTableSettings"] =		{			width:850		}	window.onload = function() {		document.querySelector("jqx-data-table").focus();								}    </script></head><body>   <jqx-data-table settings="dataTableSettings"></jqx-data-table></body></html>

getColumnProperty Method

Parameter	Type	Description
dataField	string
propertyName	string

Return Value
Object

<!DOCTYPE html><html lang="en"><head>    <title id='Description'>DataTable Custom Element</title>    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />    <meta name="viewport" content="width=device-width, initial-scale=1 maximum-scale=1 minimum-scale=1" />    <link rel="stylesheet" href="../jqwidgets/styles/site.css" type="text/css" />    <link rel="stylesheet" href="../jqwidgets/styles/jqx.light.css" type="text/css" />    <link rel="stylesheet" href="../styles/demos.css" type="text/css" />    <script type="text/javascript" src="../scripts/webcomponents-lite.min.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxcore.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxcore.elements.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/jqxlistbox.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxdropdownlist.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxdatatable.js"></script>    <script type="text/javascript">		var adapter = new jqx.dataAdapter({			dataType: "json",			dataFields: [				{ name: 'name', type: 'string' },				{ name: 'type', type: 'string' },				{ name: 'calories', type: 'int' },				{ name: 'totalfat', type: 'string' },				{ name: 'protein', type: 'string' }			],			id: 'id',			url: "../sampledata/beverages.txt"		});		var columns = [				{ text: 'Name', dataField: 'name', width: 300 },				{ text: 'Beverage Type', dataField: 'type', width: 300 },				{ text: 'Calories', dataField: 'calories', width: 180 },				{ text: 'Total Fat', dataField: 'totalfat', width: 120 },				{ text: 'Protein', dataField: 'protein' }		];		JQXElements.settings["dataTableSettings"] =		{			width:850		}	window.onload = function() {		document.querySelector("jqx-data-table").getColumnProperty('firstName');								}    </script></head><body>   <jqx-data-table settings="dataTableSettings"></jqx-data-table></body></html>

goToPage Method

Parameter	Type	Description
pageIndex	number

Return Value
void

<!DOCTYPE html><html lang="en"><head>    <title id='Description'>DataTable Custom Element</title>    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />    <meta name="viewport" content="width=device-width, initial-scale=1 maximum-scale=1 minimum-scale=1" />    <link rel="stylesheet" href="../jqwidgets/styles/site.css" type="text/css" />    <link rel="stylesheet" href="../jqwidgets/styles/jqx.light.css" type="text/css" />    <link rel="stylesheet" href="../styles/demos.css" type="text/css" />    <script type="text/javascript" src="../scripts/webcomponents-lite.min.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxcore.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxcore.elements.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/jqxlistbox.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxdropdownlist.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxdatatable.js"></script>    <script type="text/javascript">		var adapter = new jqx.dataAdapter({			dataType: "json",			dataFields: [				{ name: 'name', type: 'string' },				{ name: 'type', type: 'string' },				{ name: 'calories', type: 'int' },				{ name: 'totalfat', type: 'string' },				{ name: 'protein', type: 'string' }			],			id: 'id',			url: "../sampledata/beverages.txt"		});		var columns = [				{ text: 'Name', dataField: 'name', width: 300 },				{ text: 'Beverage Type', dataField: 'type', width: 300 },				{ text: 'Calories', dataField: 'calories', width: 180 },				{ text: 'Total Fat', dataField: 'totalfat', width: 120 },				{ text: 'Protein', dataField: 'protein' }		];		JQXElements.settings["dataTableSettings"] =		{			width:850		}	window.onload = function() {		document.querySelector("jqx-data-table").goToPage(10);								}    </script></head><body>   <jqx-data-table settings="dataTableSettings"></jqx-data-table></body></html>

goToPrevPage Method

Parameter	Type	Description
None

Return Value
void

<!DOCTYPE html><html lang="en"><head>    <title id='Description'>DataTable Custom Element</title>    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />    <meta name="viewport" content="width=device-width, initial-scale=1 maximum-scale=1 minimum-scale=1" />    <link rel="stylesheet" href="../jqwidgets/styles/site.css" type="text/css" />    <link rel="stylesheet" href="../jqwidgets/styles/jqx.light.css" type="text/css" />    <link rel="stylesheet" href="../styles/demos.css" type="text/css" />    <script type="text/javascript" src="../scripts/webcomponents-lite.min.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxcore.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxcore.elements.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/jqxlistbox.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxdropdownlist.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxdatatable.js"></script>    <script type="text/javascript">		var adapter = new jqx.dataAdapter({			dataType: "json",			dataFields: [				{ name: 'name', type: 'string' },				{ name: 'type', type: 'string' },				{ name: 'calories', type: 'int' },				{ name: 'totalfat', type: 'string' },				{ name: 'protein', type: 'string' }			],			id: 'id',			url: "../sampledata/beverages.txt"		});		var columns = [				{ text: 'Name', dataField: 'name', width: 300 },				{ text: 'Beverage Type', dataField: 'type', width: 300 },				{ text: 'Calories', dataField: 'calories', width: 180 },				{ text: 'Total Fat', dataField: 'totalfat', width: 120 },				{ text: 'Protein', dataField: 'protein' }		];		JQXElements.settings["dataTableSettings"] =		{			width:850		}	window.onload = function() {		document.querySelector("jqx-data-table").goToPrevPage();								}    </script></head><body>   <jqx-data-table settings="dataTableSettings"></jqx-data-table></body></html>

goToNextPage Method

Parameter	Type	Description
None

Return Value
void

<!DOCTYPE html><html lang="en"><head>    <title id='Description'>DataTable Custom Element</title>    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />    <meta name="viewport" content="width=device-width, initial-scale=1 maximum-scale=1 minimum-scale=1" />    <link rel="stylesheet" href="../jqwidgets/styles/site.css" type="text/css" />    <link rel="stylesheet" href="../jqwidgets/styles/jqx.light.css" type="text/css" />    <link rel="stylesheet" href="../styles/demos.css" type="text/css" />    <script type="text/javascript" src="../scripts/webcomponents-lite.min.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxcore.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxcore.elements.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/jqxlistbox.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxdropdownlist.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxdatatable.js"></script>    <script type="text/javascript">		var adapter = new jqx.dataAdapter({			dataType: "json",			dataFields: [				{ name: 'name', type: 'string' },				{ name: 'type', type: 'string' },				{ name: 'calories', type: 'int' },				{ name: 'totalfat', type: 'string' },				{ name: 'protein', type: 'string' }			],			id: 'id',			url: "../sampledata/beverages.txt"		});		var columns = [				{ text: 'Name', dataField: 'name', width: 300 },				{ text: 'Beverage Type', dataField: 'type', width: 300 },				{ text: 'Calories', dataField: 'calories', width: 180 },				{ text: 'Total Fat', dataField: 'totalfat', width: 120 },				{ text: 'Protein', dataField: 'protein' }		];		JQXElements.settings["dataTableSettings"] =		{			width:850		}	window.onload = function() {		document.querySelector("jqx-data-table").goToNextPage();								}    </script></head><body>   <jqx-data-table settings="dataTableSettings"></jqx-data-table></body></html>

getSelection Method

Parameter	Type	Description
None

Return Value
Array

<!DOCTYPE html><html lang="en"><head>    <title id='Description'>DataTable Custom Element</title>    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />    <meta name="viewport" content="width=device-width, initial-scale=1 maximum-scale=1 minimum-scale=1" />    <link rel="stylesheet" href="../jqwidgets/styles/site.css" type="text/css" />    <link rel="stylesheet" href="../jqwidgets/styles/jqx.light.css" type="text/css" />    <link rel="stylesheet" href="../styles/demos.css" type="text/css" />    <script type="text/javascript" src="../scripts/webcomponents-lite.min.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxcore.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxcore.elements.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/jqxlistbox.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxdropdownlist.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxdatatable.js"></script>    <script type="text/javascript">		var adapter = new jqx.dataAdapter({			dataType: "json",			dataFields: [				{ name: 'name', type: 'string' },				{ name: 'type', type: 'string' },				{ name: 'calories', type: 'int' },				{ name: 'totalfat', type: 'string' },				{ name: 'protein', type: 'string' }			],			id: 'id',			url: "../sampledata/beverages.txt"		});		var columns = [				{ text: 'Name', dataField: 'name', width: 300 },				{ text: 'Beverage Type', dataField: 'type', width: 300 },				{ text: 'Calories', dataField: 'calories', width: 180 },				{ text: 'Total Fat', dataField: 'totalfat', width: 120 },				{ text: 'Protein', dataField: 'protein' }		];		JQXElements.settings["dataTableSettings"] =		{			width:850		}	window.onload = function() {		var result = document.querySelector("jqx-data-table").getSelection();								}    </script></head><body>   <jqx-data-table settings="dataTableSettings"></jqx-data-table></body></html>

getRows Method

Parameter	Type	Description
None

Return Value
Array

<!DOCTYPE html><html lang="en"><head>    <title id='Description'>DataTable Custom Element</title>    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />    <meta name="viewport" content="width=device-width, initial-scale=1 maximum-scale=1 minimum-scale=1" />    <link rel="stylesheet" href="../jqwidgets/styles/site.css" type="text/css" />    <link rel="stylesheet" href="../jqwidgets/styles/jqx.light.css" type="text/css" />    <link rel="stylesheet" href="../styles/demos.css" type="text/css" />    <script type="text/javascript" src="../scripts/webcomponents-lite.min.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxcore.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxcore.elements.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/jqxlistbox.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxdropdownlist.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxdatatable.js"></script>    <script type="text/javascript">		var adapter = new jqx.dataAdapter({			dataType: "json",			dataFields: [				{ name: 'name', type: 'string' },				{ name: 'type', type: 'string' },				{ name: 'calories', type: 'int' },				{ name: 'totalfat', type: 'string' },				{ name: 'protein', type: 'string' }			],			id: 'id',			url: "../sampledata/beverages.txt"		});		var columns = [				{ text: 'Name', dataField: 'name', width: 300 },				{ text: 'Beverage Type', dataField: 'type', width: 300 },				{ text: 'Calories', dataField: 'calories', width: 180 },				{ text: 'Total Fat', dataField: 'totalfat', width: 120 },				{ text: 'Protein', dataField: 'protein' }		];		JQXElements.settings["dataTableSettings"] =		{			width:850		}	window.onload = function() {		var result = document.querySelector("jqx-data-table").getRows();								}    </script></head><body>   <jqx-data-table settings="dataTableSettings"></jqx-data-table></body></html>

getView Method

Parameter	Type	Description
None

Return Value
Array

<!DOCTYPE html><html lang="en"><head>    <title id='Description'>DataTable Custom Element</title>    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />    <meta name="viewport" content="width=device-width, initial-scale=1 maximum-scale=1 minimum-scale=1" />    <link rel="stylesheet" href="../jqwidgets/styles/site.css" type="text/css" />    <link rel="stylesheet" href="../jqwidgets/styles/jqx.light.css" type="text/css" />    <link rel="stylesheet" href="../styles/demos.css" type="text/css" />    <script type="text/javascript" src="../scripts/webcomponents-lite.min.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxcore.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxcore.elements.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/jqxlistbox.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxdropdownlist.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxdatatable.js"></script>    <script type="text/javascript">		var adapter = new jqx.dataAdapter({			dataType: "json",			dataFields: [				{ name: 'name', type: 'string' },				{ name: 'type', type: 'string' },				{ name: 'calories', type: 'int' },				{ name: 'totalfat', type: 'string' },				{ name: 'protein', type: 'string' }			],			id: 'id',			url: "../sampledata/beverages.txt"		});		var columns = [				{ text: 'Name', dataField: 'name', width: 300 },				{ text: 'Beverage Type', dataField: 'type', width: 300 },				{ text: 'Calories', dataField: 'calories', width: 180 },				{ text: 'Total Fat', dataField: 'totalfat', width: 120 },				{ text: 'Protein', dataField: 'protein' }		];		JQXElements.settings["dataTableSettings"] =		{			width:850		}	window.onload = function() {		var result = document.querySelector("jqx-data-table").getView();								}    </script></head><body>   <jqx-data-table settings="dataTableSettings"></jqx-data-table></body></html>

getCellValue Method

Parameter	Type	Description
rowIndex	number
dataField	string

Return Value
Object

<!DOCTYPE html><html lang="en"><head>    <title id='Description'>DataTable Custom Element</title>    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />    <meta name="viewport" content="width=device-width, initial-scale=1 maximum-scale=1 minimum-scale=1" />    <link rel="stylesheet" href="../jqwidgets/styles/site.css" type="text/css" />    <link rel="stylesheet" href="../jqwidgets/styles/jqx.light.css" type="text/css" />    <link rel="stylesheet" href="../styles/demos.css" type="text/css" />    <script type="text/javascript" src="../scripts/webcomponents-lite.min.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxcore.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxcore.elements.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/jqxlistbox.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxdropdownlist.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxdatatable.js"></script>    <script type="text/javascript">		var adapter = new jqx.dataAdapter({			dataType: "json",			dataFields: [				{ name: 'name', type: 'string' },				{ name: 'type', type: 'string' },				{ name: 'calories', type: 'int' },				{ name: 'totalfat', type: 'string' },				{ name: 'protein', type: 'string' }			],			id: 'id',			url: "../sampledata/beverages.txt"		});		var columns = [				{ text: 'Name', dataField: 'name', width: 300 },				{ text: 'Beverage Type', dataField: 'type', width: 300 },				{ text: 'Calories', dataField: 'calories', width: 180 },				{ text: 'Total Fat', dataField: 'totalfat', width: 120 },				{ text: 'Protein', dataField: 'protein' }		];		JQXElements.settings["dataTableSettings"] =		{			width:850		}	window.onload = function() {		document.querySelector("jqx-data-table").getCellValue(1,'firstName');								}    </script></head><body>   <jqx-data-table settings="dataTableSettings"></jqx-data-table></body></html>

hideColumn Method

Parameter	Type	Description
dataField	string

Return Value
void

<!DOCTYPE html><html lang="en"><head>    <title id='Description'>DataTable Custom Element</title>    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />    <meta name="viewport" content="width=device-width, initial-scale=1 maximum-scale=1 minimum-scale=1" />    <link rel="stylesheet" href="../jqwidgets/styles/site.css" type="text/css" />    <link rel="stylesheet" href="../jqwidgets/styles/jqx.light.css" type="text/css" />    <link rel="stylesheet" href="../styles/demos.css" type="text/css" />    <script type="text/javascript" src="../scripts/webcomponents-lite.min.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxcore.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxcore.elements.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/jqxlistbox.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxdropdownlist.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxdatatable.js"></script>    <script type="text/javascript">		var adapter = new jqx.dataAdapter({			dataType: "json",			dataFields: [				{ name: 'name', type: 'string' },				{ name: 'type', type: 'string' },				{ name: 'calories', type: 'int' },				{ name: 'totalfat', type: 'string' },				{ name: 'protein', type: 'string' }			],			id: 'id',			url: "../sampledata/beverages.txt"		});		var columns = [				{ text: 'Name', dataField: 'name', width: 300 },				{ text: 'Beverage Type', dataField: 'type', width: 300 },				{ text: 'Calories', dataField: 'calories', width: 180 },				{ text: 'Total Fat', dataField: 'totalfat', width: 120 },				{ text: 'Protein', dataField: 'protein' }		];		JQXElements.settings["dataTableSettings"] =		{			width:850		}	window.onload = function() {		document.querySelector("jqx-data-table").hideColumn('firstName');								}    </script></head><body>   <jqx-data-table settings="dataTableSettings"></jqx-data-table></body></html>

hideDetails Method

Parameter	Type	Description
rowIndex	boolean

Return Value
void

<!DOCTYPE html><html lang="en"><head>    <title id='Description'>DataTable Custom Element</title>    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />    <meta name="viewport" content="width=device-width, initial-scale=1 maximum-scale=1 minimum-scale=1" />    <link rel="stylesheet" href="../jqwidgets/styles/site.css" type="text/css" />    <link rel="stylesheet" href="../jqwidgets/styles/jqx.light.css" type="text/css" />    <link rel="stylesheet" href="../styles/demos.css" type="text/css" />    <script type="text/javascript" src="../scripts/webcomponents-lite.min.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxcore.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxcore.elements.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/jqxlistbox.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxdropdownlist.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxdatatable.js"></script>    <script type="text/javascript">		var adapter = new jqx.dataAdapter({			dataType: "json",			dataFields: [				{ name: 'name', type: 'string' },				{ name: 'type', type: 'string' },				{ name: 'calories', type: 'int' },				{ name: 'totalfat', type: 'string' },				{ name: 'protein', type: 'string' }			],			id: 'id',			url: "../sampledata/beverages.txt"		});		var columns = [				{ text: 'Name', dataField: 'name', width: 300 },				{ text: 'Beverage Type', dataField: 'type', width: 300 },				{ text: 'Calories', dataField: 'calories', width: 180 },				{ text: 'Total Fat', dataField: 'totalfat', width: 120 },				{ text: 'Protein', dataField: 'protein' }		];		JQXElements.settings["dataTableSettings"] =		{			width:850		}	window.onload = function() {		document.querySelector("jqx-data-table").hideDetails(1);								}    </script></head><body>   <jqx-data-table settings="dataTableSettings"></jqx-data-table></body></html>

isBindingCompleted Method

Parameter	Type	Description
None

Return Value
Boolean

<!DOCTYPE html><html lang="en"><head>    <title id='Description'>DataTable Custom Element</title>    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />    <meta name="viewport" content="width=device-width, initial-scale=1 maximum-scale=1 minimum-scale=1" />    <link rel="stylesheet" href="../jqwidgets/styles/site.css" type="text/css" />    <link rel="stylesheet" href="../jqwidgets/styles/jqx.light.css" type="text/css" />    <link rel="stylesheet" href="../styles/demos.css" type="text/css" />    <script type="text/javascript" src="../scripts/webcomponents-lite.min.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxcore.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxcore.elements.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/jqxlistbox.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxdropdownlist.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxdatatable.js"></script>    <script type="text/javascript">		var adapter = new jqx.dataAdapter({			dataType: "json",			dataFields: [				{ name: 'name', type: 'string' },				{ name: 'type', type: 'string' },				{ name: 'calories', type: 'int' },				{ name: 'totalfat', type: 'string' },				{ name: 'protein', type: 'string' }			],			id: 'id',			url: "../sampledata/beverages.txt"		});		var columns = [				{ text: 'Name', dataField: 'name', width: 300 },				{ text: 'Beverage Type', dataField: 'type', width: 300 },				{ text: 'Calories', dataField: 'calories', width: 180 },				{ text: 'Total Fat', dataField: 'totalfat', width: 120 },				{ text: 'Protein', dataField: 'protein' }		];		JQXElements.settings["dataTableSettings"] =		{			width:850		}	window.onload = function() {		var result = document.querySelector("jqx-data-table").isBindingCompleted();								}    </script></head><body>   <jqx-data-table settings="dataTableSettings"></jqx-data-table></body></html>

lockRow Method

Parameter	Type	Description
rowIndex	number

Return Value
void

<!DOCTYPE html><html lang="en"><head>    <title id='Description'>DataTable Custom Element</title>    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />    <meta name="viewport" content="width=device-width, initial-scale=1 maximum-scale=1 minimum-scale=1" />    <link rel="stylesheet" href="../jqwidgets/styles/site.css" type="text/css" />    <link rel="stylesheet" href="../jqwidgets/styles/jqx.light.css" type="text/css" />    <link rel="stylesheet" href="../styles/demos.css" type="text/css" />    <script type="text/javascript" src="../scripts/webcomponents-lite.min.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxcore.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxcore.elements.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/jqxlistbox.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxdropdownlist.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxdatatable.js"></script>    <script type="text/javascript">		var adapter = new jqx.dataAdapter({			dataType: "json",			dataFields: [				{ name: 'name', type: 'string' },				{ name: 'type', type: 'string' },				{ name: 'calories', type: 'int' },				{ name: 'totalfat', type: 'string' },				{ name: 'protein', type: 'string' }			],			id: 'id',			url: "../sampledata/beverages.txt"		});		var columns = [				{ text: 'Name', dataField: 'name', width: 300 },				{ text: 'Beverage Type', dataField: 'type', width: 300 },				{ text: 'Calories', dataField: 'calories', width: 180 },				{ text: 'Total Fat', dataField: 'totalfat', width: 120 },				{ text: 'Protein', dataField: 'protein' }		];		JQXElements.settings["dataTableSettings"] =		{			width:850		}	window.onload = function() {		document.querySelector("jqx-data-table").lockRow(10);								}    </script></head><body>   <jqx-data-table settings="dataTableSettings"></jqx-data-table></body></html>

refresh Method

Parameter	Type	Description
None

Return Value
void

<!DOCTYPE html><html lang="en"><head>    <title id='Description'>DataTable Custom Element</title>    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />    <meta name="viewport" content="width=device-width, initial-scale=1 maximum-scale=1 minimum-scale=1" />    <link rel="stylesheet" href="../jqwidgets/styles/site.css" type="text/css" />    <link rel="stylesheet" href="../jqwidgets/styles/jqx.light.css" type="text/css" />    <link rel="stylesheet" href="../styles/demos.css" type="text/css" />    <script type="text/javascript" src="../scripts/webcomponents-lite.min.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxcore.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxcore.elements.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/jqxlistbox.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxdropdownlist.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxdatatable.js"></script>    <script type="text/javascript">		var adapter = new jqx.dataAdapter({			dataType: "json",			dataFields: [				{ name: 'name', type: 'string' },				{ name: 'type', type: 'string' },				{ name: 'calories', type: 'int' },				{ name: 'totalfat', type: 'string' },				{ name: 'protein', type: 'string' }			],			id: 'id',			url: "../sampledata/beverages.txt"		});		var columns = [				{ text: 'Name', dataField: 'name', width: 300 },				{ text: 'Beverage Type', dataField: 'type', width: 300 },				{ text: 'Calories', dataField: 'calories', width: 180 },				{ text: 'Total Fat', dataField: 'totalfat', width: 120 },				{ text: 'Protein', dataField: 'protein' }		];		JQXElements.settings["dataTableSettings"] =		{			width:850		}	window.onload = function() {		document.querySelector("jqx-data-table").refresh();								}    </script></head><body>   <jqx-data-table settings="dataTableSettings"></jqx-data-table></body></html>

render Method

Parameter	Type	Description
None

Return Value
void

<!DOCTYPE html><html lang="en"><head>    <title id='Description'>DataTable Custom Element</title>    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />    <meta name="viewport" content="width=device-width, initial-scale=1 maximum-scale=1 minimum-scale=1" />    <link rel="stylesheet" href="../jqwidgets/styles/site.css" type="text/css" />    <link rel="stylesheet" href="../jqwidgets/styles/jqx.light.css" type="text/css" />    <link rel="stylesheet" href="../styles/demos.css" type="text/css" />    <script type="text/javascript" src="../scripts/webcomponents-lite.min.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxcore.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxcore.elements.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/jqxlistbox.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxdropdownlist.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxdatatable.js"></script>    <script type="text/javascript">		var adapter = new jqx.dataAdapter({			dataType: "json",			dataFields: [				{ name: 'name', type: 'string' },				{ name: 'type', type: 'string' },				{ name: 'calories', type: 'int' },				{ name: 'totalfat', type: 'string' },				{ name: 'protein', type: 'string' }			],			id: 'id',			url: "../sampledata/beverages.txt"		});		var columns = [				{ text: 'Name', dataField: 'name', width: 300 },				{ text: 'Beverage Type', dataField: 'type', width: 300 },				{ text: 'Calories', dataField: 'calories', width: 180 },				{ text: 'Total Fat', dataField: 'totalfat', width: 120 },				{ text: 'Protein', dataField: 'protein' }		];		JQXElements.settings["dataTableSettings"] =		{			width:850		}	window.onload = function() {		document.querySelector("jqx-data-table").render();								}    </script></head><body>   <jqx-data-table settings="dataTableSettings"></jqx-data-table></body></html>

removeFilter Method

Parameter	Type	Description
dataField	string

Return Value
void

<!DOCTYPE html><html lang="en"><head>    <title id='Description'>DataTable Custom Element</title>    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />    <meta name="viewport" content="width=device-width, initial-scale=1 maximum-scale=1 minimum-scale=1" />    <link rel="stylesheet" href="../jqwidgets/styles/site.css" type="text/css" />    <link rel="stylesheet" href="../jqwidgets/styles/jqx.light.css" type="text/css" />    <link rel="stylesheet" href="../styles/demos.css" type="text/css" />    <script type="text/javascript" src="../scripts/webcomponents-lite.min.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxcore.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxcore.elements.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/jqxlistbox.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxdropdownlist.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxdatatable.js"></script>    <script type="text/javascript">		var adapter = new jqx.dataAdapter({			dataType: "json",			dataFields: [				{ name: 'name', type: 'string' },				{ name: 'type', type: 'string' },				{ name: 'calories', type: 'int' },				{ name: 'totalfat', type: 'string' },				{ name: 'protein', type: 'string' }			],			id: 'id',			url: "../sampledata/beverages.txt"		});		var columns = [				{ text: 'Name', dataField: 'name', width: 300 },				{ text: 'Beverage Type', dataField: 'type', width: 300 },				{ text: 'Calories', dataField: 'calories', width: 180 },				{ text: 'Total Fat', dataField: 'totalfat', width: 120 },				{ text: 'Protein', dataField: 'protein' }		];		JQXElements.settings["dataTableSettings"] =		{			width:850		}	window.onload = function() {		document.querySelector("jqx-data-table").removeFilter(firstName);								}    </script></head><body>   <jqx-data-table settings="dataTableSettings"></jqx-data-table></body></html>

scrollOffset Method

Parameter	Type	Description
top	number
left	number

Return Value
Object

<!DOCTYPE html><html lang="en"><head>    <title id='Description'>DataTable Custom Element</title>    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />    <meta name="viewport" content="width=device-width, initial-scale=1 maximum-scale=1 minimum-scale=1" />    <link rel="stylesheet" href="../jqwidgets/styles/site.css" type="text/css" />    <link rel="stylesheet" href="../jqwidgets/styles/jqx.light.css" type="text/css" />    <link rel="stylesheet" href="../styles/demos.css" type="text/css" />    <script type="text/javascript" src="../scripts/webcomponents-lite.min.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxcore.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxcore.elements.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/jqxlistbox.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxdropdownlist.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxdatatable.js"></script>    <script type="text/javascript">		var adapter = new jqx.dataAdapter({			dataType: "json",			dataFields: [				{ name: 'name', type: 'string' },				{ name: 'type', type: 'string' },				{ name: 'calories', type: 'int' },				{ name: 'totalfat', type: 'string' },				{ name: 'protein', type: 'string' }			],			id: 'id',			url: "../sampledata/beverages.txt"		});		var columns = [				{ text: 'Name', dataField: 'name', width: 300 },				{ text: 'Beverage Type', dataField: 'type', width: 300 },				{ text: 'Calories', dataField: 'calories', width: 180 },				{ text: 'Total Fat', dataField: 'totalfat', width: 120 },				{ text: 'Protein', dataField: 'protein' }		];		JQXElements.settings["dataTableSettings"] =		{			width:850		}	window.onload = function() {		document.querySelector("jqx-data-table").scrollOffset(10,0);								}    </script></head><body>   <jqx-data-table settings="dataTableSettings"></jqx-data-table></body></html>

setColumnProperty Method

Parameter	Type	Description
dataField	string
propertyName	string
propertyValue	object

Return Value
void

<!DOCTYPE html><html lang="en"><head>    <title id='Description'>DataTable Custom Element</title>    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />    <meta name="viewport" content="width=device-width, initial-scale=1 maximum-scale=1 minimum-scale=1" />    <link rel="stylesheet" href="../jqwidgets/styles/site.css" type="text/css" />    <link rel="stylesheet" href="../jqwidgets/styles/jqx.light.css" type="text/css" />    <link rel="stylesheet" href="../styles/demos.css" type="text/css" />    <script type="text/javascript" src="../scripts/webcomponents-lite.min.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxcore.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxcore.elements.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/jqxlistbox.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxdropdownlist.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxdatatable.js"></script>    <script type="text/javascript">		var adapter = new jqx.dataAdapter({			dataType: "json",			dataFields: [				{ name: 'name', type: 'string' },				{ name: 'type', type: 'string' },				{ name: 'calories', type: 'int' },				{ name: 'totalfat', type: 'string' },				{ name: 'protein', type: 'string' }			],			id: 'id',			url: "../sampledata/beverages.txt"		});		var columns = [				{ text: 'Name', dataField: 'name', width: 300 },				{ text: 'Beverage Type', dataField: 'type', width: 300 },				{ text: 'Calories', dataField: 'calories', width: 180 },				{ text: 'Total Fat', dataField: 'totalfat', width: 120 },				{ text: 'Protein', dataField: 'protein' }		];		JQXElements.settings["dataTableSettings"] =		{			width:850		}	window.onload = function() {		document.querySelector("jqx-data-table").setColumnProperty('firstName','text','New Text');								}    </script></head><body>   <jqx-data-table settings="dataTableSettings"></jqx-data-table></body></html>

showColumn Method

Parameter	Type	Description
dataField	string

Return Value
void

<!DOCTYPE html><html lang="en"><head>    <title id='Description'>DataTable Custom Element</title>    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />    <meta name="viewport" content="width=device-width, initial-scale=1 maximum-scale=1 minimum-scale=1" />    <link rel="stylesheet" href="../jqwidgets/styles/site.css" type="text/css" />    <link rel="stylesheet" href="../jqwidgets/styles/jqx.light.css" type="text/css" />    <link rel="stylesheet" href="../styles/demos.css" type="text/css" />    <script type="text/javascript" src="../scripts/webcomponents-lite.min.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxcore.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxcore.elements.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/jqxlistbox.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxdropdownlist.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxdatatable.js"></script>    <script type="text/javascript">		var adapter = new jqx.dataAdapter({			dataType: "json",			dataFields: [				{ name: 'name', type: 'string' },				{ name: 'type', type: 'string' },				{ name: 'calories', type: 'int' },				{ name: 'totalfat', type: 'string' },				{ name: 'protein', type: 'string' }			],			id: 'id',			url: "../sampledata/beverages.txt"		});		var columns = [				{ text: 'Name', dataField: 'name', width: 300 },				{ text: 'Beverage Type', dataField: 'type', width: 300 },				{ text: 'Calories', dataField: 'calories', width: 180 },				{ text: 'Total Fat', dataField: 'totalfat', width: 120 },				{ text: 'Protein', dataField: 'protein' }		];		JQXElements.settings["dataTableSettings"] =		{			width:850		}	window.onload = function() {		document.querySelector("jqx-data-table").showColumn('firstName');								}    </script></head><body>   <jqx-data-table settings="dataTableSettings"></jqx-data-table></body></html>

selectRow Method

Parameter	Type	Description
rowIndex	number

Return Value
void

<!DOCTYPE html><html lang="en"><head>    <title id='Description'>DataTable Custom Element</title>    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />    <meta name="viewport" content="width=device-width, initial-scale=1 maximum-scale=1 minimum-scale=1" />    <link rel="stylesheet" href="../jqwidgets/styles/site.css" type="text/css" />    <link rel="stylesheet" href="../jqwidgets/styles/jqx.light.css" type="text/css" />    <link rel="stylesheet" href="../styles/demos.css" type="text/css" />    <script type="text/javascript" src="../scripts/webcomponents-lite.min.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxcore.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxcore.elements.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/jqxlistbox.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxdropdownlist.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxdatatable.js"></script>    <script type="text/javascript">		var adapter = new jqx.dataAdapter({			dataType: "json",			dataFields: [				{ name: 'name', type: 'string' },				{ name: 'type', type: 'string' },				{ name: 'calories', type: 'int' },				{ name: 'totalfat', type: 'string' },				{ name: 'protein', type: 'string' }			],			id: 'id',			url: "../sampledata/beverages.txt"		});		var columns = [				{ text: 'Name', dataField: 'name', width: 300 },				{ text: 'Beverage Type', dataField: 'type', width: 300 },				{ text: 'Calories', dataField: 'calories', width: 180 },				{ text: 'Total Fat', dataField: 'totalfat', width: 120 },				{ text: 'Protein', dataField: 'protein' }		];		JQXElements.settings["dataTableSettings"] =		{			width:850		}	window.onload = function() {		document.querySelector("jqx-data-table").selectRow(1);								}    </script></head><body>   <jqx-data-table settings="dataTableSettings"></jqx-data-table></body></html>

showDetails Method

Parameter	Type	Description
rowIndex	number

Return Value
void

<!DOCTYPE html><html lang="en"><head>    <title id='Description'>DataTable Custom Element</title>    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />    <meta name="viewport" content="width=device-width, initial-scale=1 maximum-scale=1 minimum-scale=1" />    <link rel="stylesheet" href="../jqwidgets/styles/site.css" type="text/css" />    <link rel="stylesheet" href="../jqwidgets/styles/jqx.light.css" type="text/css" />    <link rel="stylesheet" href="../styles/demos.css" type="text/css" />    <script type="text/javascript" src="../scripts/webcomponents-lite.min.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxcore.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxcore.elements.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/jqxlistbox.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxdropdownlist.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxdatatable.js"></script>    <script type="text/javascript">		var adapter = new jqx.dataAdapter({			dataType: "json",			dataFields: [				{ name: 'name', type: 'string' },				{ name: 'type', type: 'string' },				{ name: 'calories', type: 'int' },				{ name: 'totalfat', type: 'string' },				{ name: 'protein', type: 'string' }			],			id: 'id',			url: "../sampledata/beverages.txt"		});		var columns = [				{ text: 'Name', dataField: 'name', width: 300 },				{ text: 'Beverage Type', dataField: 'type', width: 300 },				{ text: 'Calories', dataField: 'calories', width: 180 },				{ text: 'Total Fat', dataField: 'totalfat', width: 120 },				{ text: 'Protein', dataField: 'protein' }		];		JQXElements.settings["dataTableSettings"] =		{			width:850		}	window.onload = function() {		document.querySelector("jqx-data-table").showDetails(1);								}    </script></head><body>   <jqx-data-table settings="dataTableSettings"></jqx-data-table></body></html>

setCellValue Method

Parameter	Type	Description
rowIndex	number
dataField	string
value	object

Return Value
void

<!DOCTYPE html><html lang="en"><head>    <title id='Description'>DataTable Custom Element</title>    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />    <meta name="viewport" content="width=device-width, initial-scale=1 maximum-scale=1 minimum-scale=1" />    <link rel="stylesheet" href="../jqwidgets/styles/site.css" type="text/css" />    <link rel="stylesheet" href="../jqwidgets/styles/jqx.light.css" type="text/css" />    <link rel="stylesheet" href="../styles/demos.css" type="text/css" />    <script type="text/javascript" src="../scripts/webcomponents-lite.min.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxcore.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxcore.elements.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/jqxlistbox.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxdropdownlist.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxdatatable.js"></script>    <script type="text/javascript">		var adapter = new jqx.dataAdapter({			dataType: "json",			dataFields: [				{ name: 'name', type: 'string' },				{ name: 'type', type: 'string' },				{ name: 'calories', type: 'int' },				{ name: 'totalfat', type: 'string' },				{ name: 'protein', type: 'string' }			],			id: 'id',			url: "../sampledata/beverages.txt"		});		var columns = [				{ text: 'Name', dataField: 'name', width: 300 },				{ text: 'Beverage Type', dataField: 'type', width: 300 },				{ text: 'Calories', dataField: 'calories', width: 180 },				{ text: 'Total Fat', dataField: 'totalfat', width: 120 },				{ text: 'Protein', dataField: 'protein' }		];		JQXElements.settings["dataTableSettings"] =		{			width:850		}	window.onload = function() {		document.querySelector("jqx-data-table").setCellValue(1,'firstName','New Value');								}    </script></head><body>   <jqx-data-table settings="dataTableSettings"></jqx-data-table></body></html>

sortBy Method

Parameter	Type	Description
dataField	string
sortOrder	string	'asc', 'desc' or null

Return Value
void

<!DOCTYPE html><html lang="en"><head>    <title id='Description'>DataTable Custom Element</title>    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />    <meta name="viewport" content="width=device-width, initial-scale=1 maximum-scale=1 minimum-scale=1" />    <link rel="stylesheet" href="../jqwidgets/styles/site.css" type="text/css" />    <link rel="stylesheet" href="../jqwidgets/styles/jqx.light.css" type="text/css" />    <link rel="stylesheet" href="../styles/demos.css" type="text/css" />    <script type="text/javascript" src="../scripts/webcomponents-lite.min.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxcore.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxcore.elements.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/jqxlistbox.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxdropdownlist.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxdatatable.js"></script>    <script type="text/javascript">		var adapter = new jqx.dataAdapter({			dataType: "json",			dataFields: [				{ name: 'name', type: 'string' },				{ name: 'type', type: 'string' },				{ name: 'calories', type: 'int' },				{ name: 'totalfat', type: 'string' },				{ name: 'protein', type: 'string' }			],			id: 'id',			url: "../sampledata/beverages.txt"		});		var columns = [				{ text: 'Name', dataField: 'name', width: 300 },				{ text: 'Beverage Type', dataField: 'type', width: 300 },				{ text: 'Calories', dataField: 'calories', width: 180 },				{ text: 'Total Fat', dataField: 'totalfat', width: 120 },				{ text: 'Protein', dataField: 'protein' }		];		JQXElements.settings["dataTableSettings"] =		{			width:850		}	window.onload = function() {		document.querySelector("jqx-data-table").sortBy('firstNmae','asc');								}    </script></head><body>   <jqx-data-table settings="dataTableSettings"></jqx-data-table></body></html>

updating Method

Parameter	Type	Description
None

Return Value
Boolean

<!DOCTYPE html><html lang="en"><head>    <title id='Description'>DataTable Custom Element</title>    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />    <meta name="viewport" content="width=device-width, initial-scale=1 maximum-scale=1 minimum-scale=1" />    <link rel="stylesheet" href="../jqwidgets/styles/site.css" type="text/css" />    <link rel="stylesheet" href="../jqwidgets/styles/jqx.light.css" type="text/css" />    <link rel="stylesheet" href="../styles/demos.css" type="text/css" />    <script type="text/javascript" src="../scripts/webcomponents-lite.min.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxcore.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxcore.elements.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/jqxlistbox.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxdropdownlist.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxdatatable.js"></script>    <script type="text/javascript">		var adapter = new jqx.dataAdapter({			dataType: "json",			dataFields: [				{ name: 'name', type: 'string' },				{ name: 'type', type: 'string' },				{ name: 'calories', type: 'int' },				{ name: 'totalfat', type: 'string' },				{ name: 'protein', type: 'string' }			],			id: 'id',			url: "../sampledata/beverages.txt"		});		var columns = [				{ text: 'Name', dataField: 'name', width: 300 },				{ text: 'Beverage Type', dataField: 'type', width: 300 },				{ text: 'Calories', dataField: 'calories', width: 180 },				{ text: 'Total Fat', dataField: 'totalfat', width: 120 },				{ text: 'Protein', dataField: 'protein' }		];		JQXElements.settings["dataTableSettings"] =		{			width:850		}	window.onload = function() {		var result = document.querySelector("jqx-data-table").updating();								}    </script></head><body>   <jqx-data-table settings="dataTableSettings"></jqx-data-table></body></html>

updateBoundData Method

Parameter	Type	Description
None

Return Value
void

<!DOCTYPE html><html lang="en"><head>    <title id='Description'>DataTable Custom Element</title>    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />    <meta name="viewport" content="width=device-width, initial-scale=1 maximum-scale=1 minimum-scale=1" />    <link rel="stylesheet" href="../jqwidgets/styles/site.css" type="text/css" />    <link rel="stylesheet" href="../jqwidgets/styles/jqx.light.css" type="text/css" />    <link rel="stylesheet" href="../styles/demos.css" type="text/css" />    <script type="text/javascript" src="../scripts/webcomponents-lite.min.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxcore.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxcore.elements.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/jqxlistbox.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxdropdownlist.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxdatatable.js"></script>    <script type="text/javascript">		var adapter = new jqx.dataAdapter({			dataType: "json",			dataFields: [				{ name: 'name', type: 'string' },				{ name: 'type', type: 'string' },				{ name: 'calories', type: 'int' },				{ name: 'totalfat', type: 'string' },				{ name: 'protein', type: 'string' }			],			id: 'id',			url: "../sampledata/beverages.txt"		});		var columns = [				{ text: 'Name', dataField: 'name', width: 300 },				{ text: 'Beverage Type', dataField: 'type', width: 300 },				{ text: 'Calories', dataField: 'calories', width: 180 },				{ text: 'Total Fat', dataField: 'totalfat', width: 120 },				{ text: 'Protein', dataField: 'protein' }		];		JQXElements.settings["dataTableSettings"] =		{			width:850		}	window.onload = function() {		document.querySelector("jqx-data-table").updateBoundData();								}    </script></head><body>   <jqx-data-table settings="dataTableSettings"></jqx-data-table></body></html>

unselectRow Method

Parameter	Type	Description
rowIndex	number

Return Value
void

<!DOCTYPE html><html lang="en"><head>    <title id='Description'>DataTable Custom Element</title>    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />    <meta name="viewport" content="width=device-width, initial-scale=1 maximum-scale=1 minimum-scale=1" />    <link rel="stylesheet" href="../jqwidgets/styles/site.css" type="text/css" />    <link rel="stylesheet" href="../jqwidgets/styles/jqx.light.css" type="text/css" />    <link rel="stylesheet" href="../styles/demos.css" type="text/css" />    <script type="text/javascript" src="../scripts/webcomponents-lite.min.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxcore.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxcore.elements.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/jqxlistbox.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxdropdownlist.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxdatatable.js"></script>    <script type="text/javascript">		var adapter = new jqx.dataAdapter({			dataType: "json",			dataFields: [				{ name: 'name', type: 'string' },				{ name: 'type', type: 'string' },				{ name: 'calories', type: 'int' },				{ name: 'totalfat', type: 'string' },				{ name: 'protein', type: 'string' }			],			id: 'id',			url: "../sampledata/beverages.txt"		});		var columns = [				{ text: 'Name', dataField: 'name', width: 300 },				{ text: 'Beverage Type', dataField: 'type', width: 300 },				{ text: 'Calories', dataField: 'calories', width: 180 },				{ text: 'Total Fat', dataField: 'totalfat', width: 120 },				{ text: 'Protein', dataField: 'protein' }		];		JQXElements.settings["dataTableSettings"] =		{			width:850		}	window.onload = function() {		document.querySelector("jqx-data-table").unselectRow(1);								}    </script></head><body>   <jqx-data-table settings="dataTableSettings"></jqx-data-table></body></html>

updateRow Method

Parameter	Type	Description
rowIndex	number
rowData	object

Return Value
void

<!DOCTYPE html><html lang="en"><head>    <title id='Description'>DataTable Custom Element</title>    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />    <meta name="viewport" content="width=device-width, initial-scale=1 maximum-scale=1 minimum-scale=1" />    <link rel="stylesheet" href="../jqwidgets/styles/site.css" type="text/css" />    <link rel="stylesheet" href="../jqwidgets/styles/jqx.light.css" type="text/css" />    <link rel="stylesheet" href="../styles/demos.css" type="text/css" />    <script type="text/javascript" src="../scripts/webcomponents-lite.min.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxcore.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxcore.elements.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/jqxlistbox.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxdropdownlist.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxdatatable.js"></script>    <script type="text/javascript">		var adapter = new jqx.dataAdapter({			dataType: "json",			dataFields: [				{ name: 'name', type: 'string' },				{ name: 'type', type: 'string' },				{ name: 'calories', type: 'int' },				{ name: 'totalfat', type: 'string' },				{ name: 'protein', type: 'string' }			],			id: 'id',			url: "../sampledata/beverages.txt"		});		var columns = [				{ text: 'Name', dataField: 'name', width: 300 },				{ text: 'Beverage Type', dataField: 'type', width: 300 },				{ text: 'Calories', dataField: 'calories', width: 180 },				{ text: 'Total Fat', dataField: 'totalfat', width: 120 },				{ text: 'Protein', dataField: 'protein' }		];		JQXElements.settings["dataTableSettings"] =		{			width:850		}	window.onload = function() {		document.querySelector("jqx-data-table").updateRow(1,{});								}    </script></head><body>   <jqx-data-table settings="dataTableSettings"></jqx-data-table></body></html>

unlockRow Method

Parameter	Type	Description
rowIndex	number

Return Value
void

<!DOCTYPE html><html lang="en"><head>    <title id='Description'>DataTable Custom Element</title>    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />    <meta name="viewport" content="width=device-width, initial-scale=1 maximum-scale=1 minimum-scale=1" />    <link rel="stylesheet" href="../jqwidgets/styles/site.css" type="text/css" />    <link rel="stylesheet" href="../jqwidgets/styles/jqx.light.css" type="text/css" />    <link rel="stylesheet" href="../styles/demos.css" type="text/css" />    <script type="text/javascript" src="../scripts/webcomponents-lite.min.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxcore.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxcore.elements.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/jqxlistbox.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxdropdownlist.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxdatatable.js"></script>    <script type="text/javascript">		var adapter = new jqx.dataAdapter({			dataType: "json",			dataFields: [				{ name: 'name', type: 'string' },				{ name: 'type', type: 'string' },				{ name: 'calories', type: 'int' },				{ name: 'totalfat', type: 'string' },				{ name: 'protein', type: 'string' }			],			id: 'id',			url: "../sampledata/beverages.txt"		});		var columns = [				{ text: 'Name', dataField: 'name', width: 300 },				{ text: 'Beverage Type', dataField: 'type', width: 300 },				{ text: 'Calories', dataField: 'calories', width: 180 },				{ text: 'Total Fat', dataField: 'totalfat', width: 120 },				{ text: 'Protein', dataField: 'protein' }		];		JQXElements.settings["dataTableSettings"] =		{			width:850		}	window.onload = function() {		document.querySelector("jqx-data-table").unlockRow(1);								}    </script></head><body>   <jqx-data-table settings="dataTableSettings"></jqx-data-table></body></html>

Custom Elements

Custom Elements

Properties

Events

Code examples

Code examples

Code examples

Code examples

Code examples

Code examples

Code examples

Code examples

Code examples

Code examples

Code examples

Code examples

Code examples

Code examples

Code examples

Code examples

Code examples

Code examples

Methods