
# Column dynamic style

Column dynamic style applies the style according to the value only to the column for which styleCallback is specified.

`※ You must not perform operations that take a long time or change values, such as setValue(), within styleCallback.`

#### Reference to own column cell value

Displayed in orange when the value is “M”.

```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: '70', header: { text: 'Name' } },
  {
    name: 'Gender',
    fieldName: 'Gender',
    width: '55',
    header: { text: 'Gender', styleName: 'orange-column' },
    styleCallback: function(grid, dataCell) {
      var ret = {};
      if (dataCell.value === 'Male') {
        ret.styleName = 'orange-column';
      }
      return ret;
    }
  },
  { name: 'Age', fieldName: 'Age', width: '55', header: { text: 'Age' } },
  { 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: '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: '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) => {
    fetch('/data/simple_data.json')
      .then(response => response.json())
      .then(data => {
        grid.getDataSource().setRows(data);
      });
  }
}, {
  fields
});

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

```js
var columns = [
   ...skip...
   {
     name: "Gender",
     fieldName: "Gender",
     width: "55",
     header: {
       text: "Gender",
       styleName: "orange-column"
     },
     styleCallback: function(grid, dataCell){
       var ret = {}

       if(dataCell.value == 'Mam'){
         ret.styleName = "orange-column" // ret.style = {background:"#ffff00"} Style can be applied directly
       }

       return ret;
     }
   },
   ...skip...
];

gridView.setColumns(columns);
```

#### References other column cell values

If the value of the gender column is "Male" and the value of the age column is 60 to 70, it will be orange and cannot be edited.

```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: '70', header: { text: 'Name' } },
  { name: 'Gender', fieldName: 'Gender', width: '55', header: { text: 'Gender' } },
  {
    name: 'Age',
    fieldName: 'Age',
    width: '55',
    header: { text: 'Age', styleName: 'orange-column' },
    styleCallback: function(grid, dataCell) {
      var ret = {};
      var gender = grid.getValue(dataCell.index.itemIndex, 'Gender');
      if (gender === 'Male' && dataCell.value >= 60 && dataCell.value <= 70) {
        ret.styleName = 'orange-column';
        ret.editable = false;
      }
      return ret;
    }
  },
  { 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: '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: '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) => {
    fetch('/data/simple_data.json')
      .then(response => response.json())
      .then(data => {
        grid.getDataSource().setRows(data);
      });
  }
}, {
  fields
});

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

```js
var columns = [
   ...skip...
   {
     name: "Age",
     fieldName: "Age",
     width: "55",
     header: {
       text: "Age",
       styleName: "orange-column"
     },
     styleCallback: function(grid, dataCell){
       var ret = {}
       var gender = grid.getValue(dataCell.index.itemIndex, "Gender")

       if( (gender == 'Male') && (dataCell.value >= 50 && dataCell.value <= 60)){
         ret.styleName = "orange-column";
         ret.editable = false;
       }

       return ret;
     }
   },
   ...skip...
];

gridView.setColumns(columns);
```

#### Dynamically applied in check renderer

New rows can be checked, and existing rows cannot be checked.

```js
const fields = [
  { fieldName: 'Bool1', dataType: 'boolean' },
  { fieldName: 'Bool2', dataType: 'text' },
  { 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: 'Bool2',
    fieldName: 'Bool2',
    width: '60',
    editable: false,
    renderer: { type: 'check', trueValues: 'Y,y,YES,yes', falseValues: 'N,n,NO,no' },
    header: { text: 'Check', styleName: 'orange-column' },
    styleCallback: function(grid, dataCell) {
      var ret = {};
      ret.renderer = {
        type: 'check',
        trueValues: 'Y,y,YES,yes',
        falseValues: 'N,n,NO,no',
        editable: dataCell.item.itemState === 'appending' || dataCell.item.rowState === 'created'
      };
      return ret;
    }
  },
  { 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', styleName: 'right-column', header: { text: 'Phone' } },
  { name: 'ProductId', fieldName: 'ProductId', width: '120', styleName: 'right-column', header: { text: 'Product ID' } },
  { name: 'KorCountry', fieldName: 'KorCountry', width: '100', styleName: 'right-column', 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', header: { text: 'Interest Rate' }, styleName: 'right-column' },
  { name: 'SaveCost', fieldName: 'SaveCost', width: '70', numberFormat: '#,##0', header: { text: 'Payment Amount' }, styleName: 'right-column' },
  { name: 'SaveMaturity', fieldName: 'SaveMaturity', width: '120', numberFormat: '#,##0', header: { text: 'Maturity Amount' }, styleName: 'right-column' },
  { name: 'CurrentSave', fieldName: 'CurrentSave', width: '80', numberFormat: '#,##0', header: { text: 'Current Balance' }, styleName: 'right-column' }
];

function addRow() {
  dataProvider.addRow([]);
}

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_check.json')
      .then(response => response.json())
      .then(data => {
        grid.getDataSource().setRows(data);
      });
  }
}, {
  fields
});

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

```js
var columns = [
   ...skip...
   {
     name: "Bool2",
     fieldName: "Bool2",
     width: "60",
     editable: false,
     renderer: {
       type: "check",
       trueValues: "Y,y,YES,yes",
       falseValues: "N,n,NO,no"
     },
     header: {
       text: "check",
       styleName: "orange-column"
     },
     styleCallback: function(grid, dataCell){
       var ret = {};
     
       ret.renderer = {
         type: "check",
         trueValues: "Y,y,YES,yes",
         falseValues: "N,n,NO,no",
         editable: dataCell.item.itemState == "appending" || dataCell.item.rowState == "created"
       }

       return ret;
     }
   },
   ...skip...
];

gridView.setColumns(columns);
```