React UI Components 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 jqxGrid.

  • jqxGrid Style

  • jqx-widget - applied to the Grid widget.
  • jqx-grid - applied to Grid container DIV element.
  • jqx-grid-pager - applied to the Grid Pager.
  • jqx-grid-header- applied to Grid Columns container element.
  • jqx-grid-column-header - applied to a Grid column.
  • jqx-widget-header - applied to a Grid column, Toolbar, Statusbar and Groups Header.
  • jqx-widget-content - applied to the Grid's content area.
  • jqx-grid-content - applied to the Grid's content area.
  • jqx-grid-toolbar - applied to the toolbar.
  • jqx-grid-statusbar - applied to the statusbar.
  • jqx-grid-column-menubutton - applied to a column's menu button.
  • jqx-grid-column-sortascbutton - applied to a column's sort button when the sort order is ascending.
  • jqx-grid-column-sortdescbutton - applied to a column's sort button when the sort order is descending.
  • jqx-grid-column-filterbutton - applied to a column's filter button.
  • jqx-grid-sortasc-icon - applied to the sort ascending menu item in the Grid's Context Menu.
  • jqx-grid-sortdesc-icon - applied to the sort descending menu item in the Grid's Context Menu.
  • jqx-grid-sortremove-icon - applied to the sort remove menu item in the Grid's Context Menu.
  • jqx-grid-groupby-icon - applied to the 'group by' menu item in the Grid's Context Menu.
  • jqx-grid-groups-header - applied to the Grouping Panel area.
  • jqx-grid-group-column - applied to the grouping columns in the Grouping Panel.
  • jqx-grid-cell - applied to the grid cells.
  • jqx-grid-cell-sort - applied to the grid cells in the sort column.
  • jqx-grid-cell-filter - applied to the grid cells in the filter column.
  • jqx-grid-group-cell - applied to the cells in a grouping row.
  • jqx-grid-details-cell - applied to the cells in a details row.
  • 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.
  • jqx-fill-state-hover - applied to a hovered cell.
  • jqx-grid-group-collapse - applied to the collapse button of a grouping row.
  • jqx-grid-group-collapse-rtl - applied to the collapse button of a grouping row when "rtl" is enabled.
  • jqx-grid-group-expand - applied to the expand button of a grouping row.
  • jqx-grid-group-expand-rtl - applied to the expand button of a grouping row when "rtl" is enabled.
  • 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.
When you create a custom style with colors and backgrounds for jqxGrid, you need to do the following:
  • Add the above CSS classes related to jqxButtons
  • After each CSS class, add your theme name.
    For example:
    jqx-grid-energyblue
  • To apply your custom style to the Grid, you need to set its 'theme' property(option) to point to your theme name string.