Documentation

Styling and Appearance

jQWidgets uses a pair of css files - jqx.base.css and jqx.[theme name].css. The base stylesheet creates the styles related to the widget's layout like margin, padding, border-width, position. The second css file applies the widget's colors and backgrounds. The jqx.base.css should be included before the second CSS file.

Below is the list of CSS classes used by jqxDataTable.

jqx-widget - applied to the DataTable widget.
jqx-grid - applied to DataTable container element.
jqx-grid-pager - applied to the DataTable Pager.
jqx-grid-header- applied to DataTable Columns container element.
jqx-grid-column-header - applied to a DataTable column.
jqx-widget-header - applied to a DataTable column, Toolbar, Statusbar and Groups Header.
jqx-widget-content - applied to the DataTable's content area.
jqx-grid-content - applied to the DataTable's content area.
jqx-grid-toolbar - applied to the toolbar.
jqx-grid-statusbar - applied to the statusbar.
jqx-cell - applied to the DataTable cells.
jqx-grid-cell - applied to the DataTable cells.
jqx-grid-cell-locked - applied to DataTable cells in a locked row.
jqx-grid-cell-sort - applied to the DataTable cells in the sort column.
jqx-grid-cell-filter - applied to the DataTable cells in the filter column.
jqx-grid-cell-alt - alternating cells style. This is applied to the cells in the alternating rows.
jqx-grid-cell-pinned - applied to the cells in a pinned column.
jqx-grid-cell-selected - applied to a selected cell.
jqx-fill-state-pressed - applied to a selected cell.
jqx-grid-cell-hover - applied to a hovered cell.
jqx-fill-state-hover - applied to a hovered cell.
jqx-grid-column-resizeline - applied to the column's resize line.
jqx-grid-column-resizestartline - applied to the column's resize start line.
jqx-fill-state-disabled - applied to the widget when it is disabled.
jqx-grid-group-drag-line - applied to the drop line indicators displayed in the grouping header.
jqx-grid-group-column-line - applied to the lines between the group columns.
jqx-right-align - applied to the content in cells depending on the column's cellsAlign value. Aligns the cell's content to the right.
jqx-left-align - applied to the content in cells depending on the column's cellsAlign value. Aligns the cell's content to the left.
jqx-center-align - applied to the content in cells depending on the column's cellsAlign value. Aligns the cell's content to the center.

When you create a custom style with colors and backgrounds for jqxDataTable, you need to do the following:

Add the above CSS classes related to jqxDataTable
After each CSS class, add your theme name.
For example:
jqx-grid-energyblue
To apply your custom style to jqxDataTable, you need to set its 'theme' property(option) to point to your theme's name.

The sample below demonstrates how to set the 'Energy Blue' theme to jqxDataTable.

<!DOCTYPE html>
<html lang="en">
<head>
    <title id="Description">Apply a Theme to jQWidgets DataTable</title>
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />  
    <link rel="stylesheet" href="../../jqwidgets/styles/jqx.base.css" type="text/css" />
    <link rel="stylesheet" href="../../jqwidgets/styles/jqx.energyblue.css" type="text/css" />
    <script type="text/javascript" src="../../scripts/jquery-1.11.1.min.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxcore.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxdata.js"></script> 
    <script type="text/javascript" src="../../jqwidgets/jqxbuttons.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxscrollbar.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxdatatable.js"></script>
    <script type="text/javascript" src="../../scripts/demos.js"></script>
    <script type="text/javascript">
        $(document).ready(function () {
            // prepare the data
            var data = new Array();
            var firstNames =
            [
                "Andrew", "Nancy", "Shelley", "Regina", "Yoshi", "Antoni", "Mayumi", "Ian", "Peter", "Lars", "Petra", "Martin", "Sven", "Elio", "Beate", "Cheryl", "Michael", "Guylene"
            ];
            var lastNames =
            [
                "Fuller", "Davolio", "Burke", "Murphy", "Nagase", "Saavedra", "Ohno", "Devling", "Wilson", "Peterson", "Winkler", "Bein", "Petersen", "Rossi", "Vileid", "Saylor", "Bjorn", "Nodier"
            ];
            var productNames =
            [
                "Black Tea", "Green Tea", "Caffe Espresso", "Doubleshot Espresso", "Caffe Latte", "White Chocolate Mocha", "Cramel Latte", "Caffe Americano", "Cappuccino", "Espresso Truffle", "Espresso con Panna", "Peppermint Mocha Twist"
            ];
            var priceValues =
            [
                "2.25", "1.5", "3.0", "3.3", "4.5", "3.6", "3.8", "2.5", "5.0", "1.75", "3.25", "4.0"
            ];
            for (var i = 0; i < 200; i++) {
                var row = {};
                var productindex = Math.floor(Math.random() * productNames.length);
                var price = parseFloat(priceValues[productindex]);
                var quantity = 1 + Math.round(Math.random() * 10);
                row["firstname"] = firstNames[Math.floor(Math.random() * firstNames.length)];
                row["lastname"] = lastNames[Math.floor(Math.random() * lastNames.length)];
                row["productname"] = productNames[productindex];
                row["price"] = price;
                row["quantity"] = quantity;
                row["total"] = price * quantity;
                data[i] = row;
            }
            var source =
            {
                localData: data,
                dataType: "array",
                dataFields:
                [
                    { name: 'firstname', type: 'string' },
                    { name: 'lastname', type: 'string' },
                    { name: 'productname', type: 'string' },
                    { name: 'quantity', type: 'number' },
                    { name: 'price', type: 'number' },
                    { name: 'total', type: 'number' }
                ]
            };
            var dataAdapter = new $.jqx.dataAdapter(source);
            $("#table").jqxDataTable(
            {
                width: 670,
                theme: 'energyblue',
                pageable: true,
                pagerButtonsCount: 10,
                source: dataAdapter,
                columnsResize: true,
                columns: [
                  { text: 'Name', dataField: 'firstname', width: 100 },
                  { text: 'Last Name', dataField: 'lastname', width: 100 },
                  { text: 'Product', editable: false, dataField: 'productname', width: 180 },
                  { text: 'Quantity', dataField: 'quantity', width: 80, cellsAlign: 'right', align: 'right' },
                  { text: 'Unit Price', dataField: 'price', width: 90, cellsAlign: 'right', align: 'right', cellsFormat: 'c2' },
                  { text: 'Total', dataField: 'total', cellsAlign: 'right', align: 'right', cellsFormat: 'c2' }
                ]
            });
        });
    </script>
<script async src="https://www.googletagmanager.com/gtag/js?id=G-2FX5PV9DNT"></script><script>window.dataLayer = window.dataLayer || [];function gtag(){dataLayer.push(arguments);}gtag('js', new Date());gtag('config', 'G-2FX5PV9DNT');</script></head>
<body class='default'>
    <div id="table">
    </div>
</body>
</html>