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 the Pivot Grid.
  • jqx-widget - applied to the Pivot Grid.
  • jqx-widget-content - applied to the Pivot Grid.
  • jqx-grid-pager - applied to the Pivot Grid Pager.
  • jqx-pivotgrid - applied to the Pivot Grid.
  • jqx-pivotgrid-item - applied to the Pivot Grid items.
  • jqx-pivotgrid-expand-button - applied to the expand buttons in the rows and columns.
  • jqx-pivotgrid-collapse-button - applied to the collapse buttons in the rows and columns.
  • jqx-pivotgrid-menu-button - applied to the Pivot Grid button displayed when you hover a row or column.
  • jqx-pivotgrid-sortasc-icon - applied to the Pivot Grid sort ascending icon.
  • jqx-pivotgrid-sortdesc-icon - applied to the Pivot Grid sort descending menu icon.
  • jqx-pivotgrid-sortremove-icon - applied to the Pivot Grid sort remove icon.
  • jqx-pivotgrid-sortsettings-icon - applied to the Pivot Grid settings icon.
When you create a custom style with colors and backgrounds for Pivot Grid, you need to do the following:
  • Add the above CSS classes related to the Pivot Grid
  • After each CSS class, add your theme name.
    For example:
    jqx-pivotgrid-light
  • To apply your custom style to the Pivot Grid, you need to set its 'theme' property(option) to point to your theme name string.