
# Cell, data area

This page explains the ‘Cell, Data’ area among the style area divisions.

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-button-\*

Styles for the action and popup types of [Cell Button](/guides/cell-components/cell-button) and the calendar popup button in the [Date Editor](/guides/editor/date-editor) and  You can change the style of buttons that expand the list in [Dropdown Editor](/guides/editor/dropdown-editor).

This style includes a button image in `base64` format, and you can change the image or use the style attribute to decorate the button's style.
```css
.rg-button-action {
   background: url(data:image/svg+xml;base64,PD94bWwgdm...) no-repeat center;
}

.rg-button-popup {
   background: url(data:image/svg+xml;base64,PD94bWwgdm...) no-repeat center;
}

.rg-button-list {
   background: url(data:image/svg+xml;base64,PD94bWwgdm...) no-repeat center left;
}

.rg-button-calendar {
   background: url(data:image/svg+xml;base64,PD94bWwgdm...) no-repeat center left;
}
```

#### rg-fixed-\*

The `rg-fixed-*` style classes have fixed rows and Used to specify the style of cells or dividers in a column.

The demo below is an example of changing the cell color of fixed rows and columns.

```css
.rg-fixed-row {
   /* Change cell color of fixed rows and columns */
   background: #0000ff;
}

.rg-fixed-row td {
   border-top: none;
   border-right: 1px solid #bdbdbd;
   border-bottom: 1px solid #bdbdbd;
   border-left: none;
   height: 0;
}
```

```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);
        grid.setFixedOptions({
          colCount: 2,
          rowCount: 2
        });
      });
  }
}, {
  fields
});

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

const customStyles = `
.rg-fixed-row {
  /* Fixed rows, Change column cell color */
  background: #0000ff !important;
}
 
.rg-fixed-row td {
  border-top: none;
  border-right: 1px solid #bdbdbd;
  border-bottom: 1px solid #bdbdbd;
  border-left: none;
  height: 0;
}
`;

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

#### rg-rowgroup-\*, rg-group-panel-\*

[Row Grouping](/guides/row-group/row-grouping) can add several areas that differ from the default grid style. Representative examples include ‘group panel’, ‘group header’, ‘group footer’, and ‘group bar’. Classes starting with `rg-rowgroup-*` and `rg-group-panel-*` specify styles for this area.

The demo below is an example of changing the color of the [group panel](/refs/Interface/GroupPanel#group) and `group header` area.

The `row group header` can be given a separate class with the level numbered depending on the level, but this is not defined in the default style.

```css
.rg-rowgroup-header-level-2 {
   /* Change row group 2-level header color */
   background-color: #00f;
}

/* ... */

.rg-group-panel {
   box-sizing: border-box;
   /* Change group panel color */
   background: #0000ff;
   border-bottom: 1px solid #bcc0c8;
   text-align: left;
}
```

```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
  },
  groupPanel: {
    visible: true
  },
  onInitialized: (grid) => {
    fetch('/data/simple_data.json')
      .then(response => response.json())
      .then(data => {
        grid.getDataSource().setRows(data);
        grid.groupBy(['KorCountry', 'Gender']);
      });
  }
}, {
  fields
});

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

const customStyles = `
.rg-rowgroup-header-level-2 {
  /* Row group 2-Change level header color  */
  background-color: #00f;
}
 
/* ... */
 
.rg-group-panel {
  box-sizing: border-box;
  /* Change group panel color */
  background: #0000ff;
  border-bottom: 1px solid #bcc0c8;
  text-align: left;
}
`;

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

#### rg-fosucs-\*, rg-selection-\*

You can also customize the style of focus and selection areas. Since the style of the selection area must be the highest style among the styles of other body areas, it is recommended to apply the `!important` rule.

The demo below is an example of changing the color of the focus cell and selection area.

```css
.rg-focus {
   /* Change the color of the focus cell */
   border: 2px solid #00f;
}

/* ... */

.rg-selection-cell {
   /* Change color of selected area */
   background: #0000ff40 !important;
   color:inherit;
}

.rg-selection {
   background: rgba(229, 102, 21, 0.2) !important;
   border: 1px solid rgba(229, 102, 21, 0.67);
}
```

```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);
        setTimeout(() => {
          grid.setSelection({
            style: 'block',
            startRow: 1,
            startColumn: 'Gender',
            endRow: 3,
            endColumn: 'Phone'
          });
        }, 200);
      });
  }
}, {
  fields
});

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

const customStyles = `
.rg-focus {
  /* Change focus cell color */
  border: 2px solid #00f !important;
}
 
/* ... */
 
.rg-selection-cell {
  /* Change selection area color */
  background: #0000ff40 !important;
  color: inherit;
}
 
.rg-selection {
  background: rgba(0, 0, 255, 0.2) !important;
  border: 1px solid rgba(0, 0, 255, 0.67);
}
`;

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