
# 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.

- [User Styles Overview](/guides/grid-style/realgrid-2-custom-styles-0-intro)
- [Body Area](/guides/grid-style/realgrid-2-custom-styles-1-body)
- [Around area such as header, footer, status bar, etc.](/guides/grid-style/realgrid-2-custom-styles-2-header)
- [cell, data area](/guides/grid-style/realgrid-2-custom-styles-3-data)
- [Edit area](/guides/grid-style/realgrid-2-custom-styles-4-edit)

#### 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.

```css
.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;
}
```

```js
const fields = [
  { fieldName: 'KorName', dataType: 'text' },
  { fieldName: 'Gender', dataType: 'text' },
  { fieldName: 'Age', dataType: 'number' },
  { fieldName: 'Phone', dataType: 'text' },
  { fieldName: 'ProductId', dataType: 'text' },
  { fieldName: 'KorCountry', dataType: 'text' },
  { fieldName: 'OrderDate', dataType: 'datetime', datetimeFormat: 'yyyy-MM-dd', amText: 'AM', pmText: 'PM' },
  { fieldName: 'CardNumber', dataType: 'text' },
  { fieldName: 'Monetary', dataType: 'text' },
  { fieldName: 'StartDate', dataType: 'datetime', datetimeFormat: 'yyyy-MM-dd', amText: 'AM', pmText: 'PM' },
  { fieldName: 'EndDate', dataType: 'datetime', datetimeFormat: 'yyyy-MM-dd', amText: 'AM', pmText: 'PM' },
  { fieldName: 'ToMonth', dataType: 'number' },
  { fieldName: 'Month', dataType: 'number' },
  { fieldName: 'Year', dataType: 'number' },
  { fieldName: 'InterestRate', dataType: 'number' },
  { fieldName: 'SaveCost', dataType: 'number' },
  { fieldName: 'SaveMaturity', dataType: 'number' },
  { fieldName: 'CurrentSave', dataType: 'number' }
];

const columns = [
  { name: 'KorName', fieldName: 'KorName', width: '60', header: { text: 'Name' } },
  { name: 'Gender', fieldName: 'Gender', width: '40', header: { text: 'Gender' } },
  { name: 'Age', fieldName: 'Age', width: '40', header: { text: 'Age' }, styleName: 'right-column' },
  { name: 'Phone', fieldName: 'Phone', width: '100', header: { text: 'Phone' } },
  { name: 'ProductId', fieldName: 'ProductId', width: '120', header: { text: 'Product ID' } },
  { name: 'KorCountry', fieldName: 'KorCountry', width: '100', header: { text: 'Investment Country' } },
  { name: 'OrderDate', fieldName: 'OrderDate', width: '100', header: { text: 'Order Date' } },
  { name: 'CardNumber', fieldName: 'CardNumber', width: '140', header: { text: 'Card Number' } },
  { name: 'Monetary', fieldName: 'Monetary', width: '40', header: { text: 'Currency' } },
  { name: 'StartDate', fieldName: 'StartDate', width: '100', header: { text: 'First Payment Date' } },
  { name: 'EndDate', fieldName: 'EndDate', width: '100', header: { text: 'End Date' } },
  { name: 'ToMonth', fieldName: 'ToMonth', width: '50', header: { text: 'Payment Count' }, styleName: 'right-column' },
  { name: 'Month', fieldName: 'Month', width: '50', header: { text: 'Remaining Count' }, styleName: 'right-column' },
  { name: 'InterestRate', fieldName: 'InterestRate', width: '50', numberFormat: '0.00', header: { text: 'Interest Rate' }, styleName: 'right-column' },
  { name: 'SaveCost', fieldName: 'SaveCost', width: '80', numberFormat: '#,##0', header: { text: 'Payment Amount' }, styleName: 'right-column' },
  { name: 'SaveMaturity', fieldName: 'SaveMaturity', width: '80', numberFormat: '#,##0', header: { text: 'Maturity Amount' }, styleName: 'right-column' },
  { name: 'CurrentSave', fieldName: 'CurrentSave', width: '80', numberFormat: '#,##0', header: { text: 'Current Balance' }, styleName: 'right-column' }
];

const { gridView, dataProvider } = RealGrid.createGrid('realgrid', {
  columns,
  header: {
    height: 40
  },
  display: {
    rowHeight: 36,
    emptyMessage: 'No data to display.'
  },
  edit: {
    insertable: true,
    appendable: true
  },
  footer: {
    height: 40
  },
  stateBar: {
    width: 16
  },
  onInitialized: (grid) => {
    fetch('/data/simple_data.json')
      .then(response => response.json())
      .then(data => {
        grid.getDataSource().setRows(data);
      });
  }
}, {
  fields
});

window.gridView = gridView;
window.dataProvider = dataProvider;


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

const styleEl = document.createElement('style');
styleEl.textContent = customStyles;
document.head.appendChild(styleEl);
```

#### 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

```css
.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;
}
```

```js
const fields = [
  { fieldName: 'KorName', dataType: 'text' },
  { fieldName: 'Gender', dataType: 'text' },
  { fieldName: 'Age', dataType: 'number' },
  { fieldName: 'Phone', dataType: 'text' },
  { fieldName: 'ProductId', dataType: 'text' },
  { fieldName: 'KorCountry', dataType: 'text' },
  { fieldName: 'OrderDate', dataType: 'datetime', datetimeFormat: 'yyyy-MM-dd', amText: 'AM', pmText: 'PM' },
  { fieldName: 'CardNumber', dataType: 'text' },
  { fieldName: 'Monetary', dataType: 'text' },
  { fieldName: 'StartDate', dataType: 'datetime', datetimeFormat: 'yyyy-MM-dd', amText: 'AM', pmText: 'PM' },
  { fieldName: 'EndDate', dataType: 'datetime', datetimeFormat: 'yyyy-MM-dd', amText: 'AM', pmText: 'PM' },
  { fieldName: 'ToMonth', dataType: 'number' },
  { fieldName: 'Month', dataType: 'number' },
  { fieldName: 'Year', dataType: 'number' },
  { fieldName: 'InterestRate', dataType: 'number' },
  { fieldName: 'SaveCost', dataType: 'number' },
  { fieldName: 'SaveMaturity', dataType: 'number' },
  { fieldName: 'CurrentSave', dataType: 'number' }
];

const columns = [
  { name: 'KorName', fieldName: 'KorName', width: '60', header: { text: 'Name' } },
  { name: 'Gender', fieldName: 'Gender', width: '40', header: { text: 'Gender' } },
  { name: 'Age', fieldName: 'Age', width: '40', header: { text: 'Age' }, styleName: 'right-column' },
  { name: 'Phone', fieldName: 'Phone', width: '100', header: { text: 'Phone' } },
  { name: 'ProductId', fieldName: 'ProductId', width: '120', header: { text: 'Product ID' } },
  { name: 'KorCountry', fieldName: 'KorCountry', width: '100', header: { text: 'Investment Country' } },
  { name: 'OrderDate', fieldName: 'OrderDate', width: '100', header: { text: 'Order Date' } },
  { name: 'CardNumber', fieldName: 'CardNumber', width: '140', header: { text: 'Card Number' } },
  { name: 'Monetary', fieldName: 'Monetary', width: '40', header: { text: 'Currency' } },
  { name: 'StartDate', fieldName: 'StartDate', width: '100', header: { text: 'First Payment Date' } },
  { name: 'EndDate', fieldName: 'EndDate', width: '100', header: { text: 'End Date' } },
  { name: 'ToMonth', fieldName: 'ToMonth', width: '50', header: { text: 'Payment Count' }, styleName: 'right-column' },
  { name: 'Month', fieldName: 'Month', width: '50', header: { text: 'Remaining Count' }, styleName: 'right-column' },
  { name: 'InterestRate', fieldName: 'InterestRate', width: '50', numberFormat: '0.00', header: { text: 'Interest Rate' }, styleName: 'right-column' },
  { name: 'SaveCost', fieldName: 'SaveCost', width: '80', numberFormat: '#,##0', header: { text: 'Payment Amount' }, styleName: 'right-column' },
  { name: 'SaveMaturity', fieldName: 'SaveMaturity', width: '80', numberFormat: '#,##0', header: { text: 'Maturity Amount' }, styleName: 'right-column' },
  { name: 'CurrentSave', fieldName: 'CurrentSave', width: '80', numberFormat: '#,##0', header: { text: 'Current Balance' }, styleName: 'right-column' }
];

const { gridView, dataProvider } = RealGrid.createGrid('realgrid', {
  columns,
  header: {
    height: 40
  },
  display: {
    rowHeight: 36,
    emptyMessage: 'No data to display.'
  },
  edit: {
    insertable: true,
    appendable: true
  },
  footer: {
    height: 40
  },
  stateBar: {
    width: 16
  },
  onInitialized: (grid) => {
    fetch('/data/simple_data.json')
      .then(response => response.json())
      .then(data => {
        grid.getDataSource().setRows(data);
      });
  }
}, {
  fields
});

window.gridView = gridView;
window.dataProvider = dataProvider;


const customStyles = `
.rg-rowindicator-cell {
  /* Change indicator background color */
  background-color: #0000ff !important;
  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 !important;
  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 !important;
  text-align: center;
  border-top: none;
  border-right: 1px solid #d2d5da;
  border-bottom: 1px solid #d2d5da;
  border-left: none;
}
`;

const styleEl = document.createElement('style');
styleEl.textContent = customStyles;
document.head.appendChild(styleEl);
```