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.