jqwidgets-scripts-custom
Version:
jQWidgets is an advanced jQuery, Angular 7, Vue, React, ASP .NET MVC, Custom Elements and HTML5 UI framework.
165 lines (161 loc) • 6.94 kB
HTML
<html lang="en">
<head>
<title id='Description'>Custom Element DataTable DefaultFunctionality</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="This is an example of Custom Elements DataTable default functionalities." />
<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="../../sampledata/generatedata.js"></script>
<script type="text/javascript" src="../../../scripts/demos.js"></script>
<script type="text/javascript">
JQXElements.settings['dataTableSettings'] =
{
altRows: true,
sortable: true,
editable: true,
selectionMode: 'singleRow',
columns: [
{ text: 'First Name', dataField: 'First Name', width: 200 },
{ text: 'Last Name', dataField: 'Last Name', width: 200 },
{ text: 'Product', dataField: 'Product', width: 250 },
{ text: 'Unit Price', dataField: 'Price', width: 100, align: 'right', cellsAlign: 'right', cellsFormat: 'c2' },
{ text: 'Quantity', dataField: 'Quantity', width: 100, align: 'right', cellsAlign: 'right', cellsFormat: 'n' }
]
}
</script>
</head>
<body>
<div class="example-description">
This is an example of Custom Element DataTable. The Custom Element DataTable was built to allow you to easily replace your existing HTML Tables. It can read and display the data from your HTML Tables, but it can also display data from different data sources like XML, JSON, Array, CSV or TSV. The DataTable enables editing of cells and entire rows including options to edit with a dialog or to lock rows. It also supports sorting, filtering and paging. One of the advanced features is that you can use the data table to enable nested tables. Aggregates and grouping are supported as well. You can export your data to Excel, XML, CSV, TSV, JSON, PDF and HTML. Conditional formatting will enable you to add custom CSS styles. Localization will give you the option to show information in other languages than English.
</div>
<jqx-data-table settings="dataTableSettings">
<table border="1">
<thead>
<tr>
<th align="left">First Name</th>
<th align="left">Last Name</th>
<th align="left">Product</th>
<th align="right">Price</th>
<th align="right">Quantity</th>
</tr>
</thead>
<tbody>
<tr>
<td>Ian</td>
<td>Devling</td>
<td>Espresso Truffle</td>
<td>$1.75</td>
<td>8</td>
</tr>
<tr>
<td>Nancy</td>
<td>Wilson</td>
<td>Cappuccino</td>
<td>$5.00</td>
<td>3</td>
</tr>
<tr>
<td>Cheryl</td>
<td>Nodier</td>
<td>Caffe Americano</td>
<td>$2.50</td>
<td>4</td>
</tr>
<tr>
<td>Martin</td>
<td>Saavedra</td>
<td>Caramel Latte</td>
<td>$3.80</td>
<td>11</td>
</tr>
<tr>
<td>Guylene</td>
<td>Bjorn</td>
<td>Green Tea</td>
<td>$1.50</td>
<td>8</td>
</tr>
<tr>
<td>Andrew</td>
<td>Burke</td>
<td>Caffe Espresso</td>
<td>$3.00</td>
<td>2</td>
</tr>
<tr>
<td>Regina</td>
<td>Murphy</td>
<td>White Chocolate Mocha</td>
<td>$3.60</td>
<td>6</td>
</tr>
<tr>
<td>Michael</td>
<td>Murphy</td>
<td>Caramel Latte</td>
<td>$3.80</td>
<td>2</td>
</tr>
<tr>
<td>Petra</td>
<td>Bein</td>
<td>Caffe Americano</td>
<td>$2.50</td>
<td>7</td>
</tr>
<tr>
<td>Nancy</td>
<td>Nodier</td>
<td>Caffe Latte</td>
<td>$4.50</td>
<td>10</td>
</tr>
<tr>
<td>Peter</td>
<td>Devling</td>
<td>Green Tea</td>
<td>$1.50</td>
<td>1</td>
</tr>
<tr>
<td>Beate</td>
<td>Saylor</td>
<td>Espresso con Panna</td>
<td>$3.25</td>
<td>3</td>
</tr>
<tr>
<td>Shelley</td>
<td>Nodier</td>
<td>Peppermint Mocha Twist</td>
<td>$4.00</td>
<td>7</td>
</tr>
<tr>
<td>Nancy</td>
<td>Murphy</td>
<td>Peppermint Mocha Twist</td>
<td>$4.00</td>
<td>1</td>
</tr>
<tr>
<td>Lars</td>
<td>Wilson</td>
<td>Caffe Espresso</td>
<td>$3.00</td>
<td>11</td>
</tr>
</tbody>
</table>
</jqx-data-table>
</body>
</html>