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.
