How to have different colors on rows based on one field in row in oj-data-grid

On a data grid, we can use a function in the cell.class-name attribute to dynamically pass the class name based on row data.

“cellContext” will contain the required information. We can use console.log() to identify the structure.

This can be used for other attributes, like “header.column.class-name” as well on oj-data-grid

This can be used when we want show different style for different rows, like

If we want to highlight top performer in a data set,
or differently show calculated fields
or if we want to show different type with a different color

Sample HTML code:

<div class="oj-flex">
  <div class="oj-flex-item oj-sm-12 ">
    <h5>Data grid</h5>
    <oj-data-grid id="datagrid" style="width:100%;height:400px" aria-label="My Data Grid" 
      data='{{ salaryDataADP }}'
      header.column.style="[[ headerColStyle ]]" header.column.resizable.width="enable"
      header.column.resizable.height="enable" header.row.resizable.width="enable"     
      header.row.resizable.height="enable"
      header.column.class-name="oj-helper-justify-content-flex-start" 
      cell.class-name="[[ cellClassNameFunc ]]"
      cell.style="width: 200px;">     
    </oj-data-grid>
  </div>
</div>

Sample JS code:

this.cellClassNameFunc = function (cellContext) {
  let cellRowIndex = cellContext.indexes.row;
  let classNameStr = "oj-helper-justify-content ";
  
  // to do styling based on index 
  // if (cellRowIndex % 3 === 0) {
  //   classNameStr += "oj-bg-success-10 oj-text-color-success";
  // } else if (cellRowIndex % 3 === 1) {
  //   classNameStr += "oj-bg-danger-30	 oj-text-color-danger";
  // } else {
  //   classNameStr += "oj-bg-warning-30 oj-text-color-warning";
  // }
  
  let key = cellContext.key;
  console.log(cellContext);
  console.log(cellContext.datasource.data[cellRowIndex]);
  let rowData = cellContext.datasource.data.find((x) => x.id === key);
  if (rowData.city === "Delhi" || rowData.city === "Banglore") {
    classNameStr += "oj-bg-success-10 oj-text-color-success";
  } else if (rowData.city === "Hyderabad" || rowData.city === "Kolkata") {
    classNameStr += "oj-bg-danger-30	 oj-text-color-danger";
  } else if (rowData.city === "Mumbai" || rowData.city === "Nagpur") {
    classNameStr += "oj-bg-warning-30 oj-text-color-warning";
  }
  
  cellContext.datasource[cellRowIndex];
  
  return classNameStr;
};