RealGrid2 Guide
Style & Theme
Header, footer, status bar styles

Surrounding areas such as header, footer, status bar, etc.

This page explains the ‘header, footer, status bar, etc.’ areas among the style areas.

Please refer to the links below for explanations of other areas.

rg-header, rg-footer

Specifies the style of the header and footer areas. The header can have several overlapping styles applied depending on its state. For example, when focus is on a specific cell, the header area of that column will be affected by the rg-header-focus class.

The header also includes images used for sorting and filtering in base64 format, and can be modified to suit the user's style.

The usage example below is an example of changing the background color of the header.

.rg-header {
   text-align: center;
   font-weight: bold;
   color: #4e545f;
   /* Change header color */
   background: #0000ff;
}
 
/* ... */
 
.rg-header-focus {
   /* Change the color of the focus header */
   background: #000000;
   color: #3b2f14;
}

rg-rowindicator-*, rg-statebar-_, rg-checkbar-*

Indicators, status bars, and check bars are areas that express and manage various properties and states of a row. The rg-rowindicator-*, rg-statebar-*, and rg-checkbar-* classes manage the styles for this area.

In the usage example

.rg-rowindicator-cell {
   /* Change indicator background color */
   background-color: #0000ff;
   border-top: none;
   border-right: 1px solid #bcc0c8;
   border-bottom: 1px solid #bcc0c8;
   border-left: none;
   padding-left: 3px;
   padding-right: 3px;
}
 
/* ... */
 
.rg-statebar-cell {
   /* Change status bar background color */
   background-color: #0000ff;
   border-top: none;
   border-right: 1px solid #d2d5da;
   border-bottom: 1px solid #d2d5da;
   border-left: none;
   text-align: center;
}
 
/* ... */
 
.rg-checkbar-cell {
   /* Change check bar background color */
   background-color: #0000ff;
   text-align: center;
   border-top: none;
   border-right: 1px solid #d2d5da;
   border-bottom: 1px solid #d2d5da;
   border-left: none;
}
Body area stylesCell, data area styles