
# Cell dynamic style

Cell dynamic styles are used when you want to apply styles to individual cells.

If the cell value is "Female", "Canada", or "VND", it is displayed in orange and cannot be edited.

`※ Within setCellStyleCallback, you must not perform operations that take a long time or change the value such as setValue().`

```js
const fields = [
  { fieldName: 'KorName', dataType: 'text' },
  { fieldName: 'Gender', dataType: 'text' },
  { fieldName: 'Age', dataType: 'number' },
  { fieldName: 'Monetary', dataType: 'text' },
  { 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: '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: '70', header: { text: 'Name' } },
  { name: 'Gender', fieldName: 'Gender', width: '55', header: { text: 'Gender', styleName: 'orange-column' } },
  { name: 'Age', fieldName: 'Age', width: '55', header: { text: 'Age' } },
  { name: 'Monetary', fieldName: 'Monetary', width: '40', header: { text: 'Currency' } },
  { name: 'Phone', fieldName: 'Phone', width: '130', header: { text: 'Phone' } },
  { name: 'ProductId', fieldName: 'ProductId', width: '150', 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: '170', header: { text: 'Card Number' } },
  { 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: '40', header: { text: 'Payment Count' } },
  { name: 'Month', fieldName: 'Month', width: '40', header: { text: 'Remaining Count' } },
  { name: 'InterestRate', fieldName: 'InterestRate', width: '40', numberFormat: '0.00', header: { text: 'Interest Rate' } },
  { name: 'SaveCost', fieldName: 'SaveCost', width: '80', numberFormat: '#,##0', header: { text: 'Payment Amount' } },
  { name: 'SaveMaturity', fieldName: 'SaveMaturity', width: '80', numberFormat: '#,##0', header: { text: 'Maturity Amount' } },
  { name: 'CurrentSave', fieldName: 'CurrentSave', width: '80', numberFormat: '#,##0', header: { text: 'Current Balance' } }
];

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) => {
    grid.setCellStyleCallback(function(gridInst, dataCell) {
      var ret = {};
      if (dataCell.value === 'Female' || dataCell.value === 'Canada' || dataCell.value === 'VND') {
        ret.styleName = 'orange-color';
        ret.editable = false;
      }
      return ret;
    });
    fetch('/data/simple_data.json')
      .then(response => response.json())
      .then(data => {
        grid.getDataSource().setRows(data);
      });
  }
}, {
  fields
});

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

```js
   gridView.setCellStyleCallback(function(grid, dataCell) {
     var ret = {}
    
     if ((dataCell.value == 'Female') || (dataCell.value == 'Canada') || (dataCell.value == 'VND')){
       ret.styleName = 'orange-color'; // ret.style = {background:"#ffff00"} Style can be applied directly
       ret.editable = false;
     }

     return ret;
   })
```