공식문서: https://www.ag-grid.com/react-data-grid/cell-styles/#cell-class

AG Grid에서 셀에 class를 붙여 셀 스타일링 하려면 cellStyle, cellClass, cellClassRules 3가지 옵션을 사용할 수 있습니다.

1. cellStyle

셀에 CSS 속성을 직접 설정. 클래스 사용하지 않음.

cellStyle: {color: 'red', 'background-color': 'green'}

// different styles for each row
cellStyle: (params) => {
  if (params.data["customClass"] === "MANAGED_ITEM" || params.data["mgmtYN"] === "Y") {
    return {color: 'red', backgroundColor: 'green'};
  }
  return null;

2. cellClass

초기 렌더링 시 클래스 고정 적용. 데이터 변경 시 반영되지 않음. 데이터 변경 후 반영 원하면 refreshCells() 호출 필요.

cellClass: 'bg-yellow',
cellClass: ['my-class1','my-class2'],
cellClass: params => {
  return params.value === 'something' ? 'my-class-1' : 'my-class-2';
},
cellClass: (params) => changeCellClass(params, headerName),

(필요 시)
api.forEach((node) => {
  if(node.data.status === 'pending') {
    node.setDataValue('status', 'approve'); // 값 변경
    api.refreshCells({ rowNodes: [node] }) // 강제 셀 업데이트
  }
})

3. cellClassRules

조건에 따라 셀 클래스 적용. 데이터 변경 시 자동으로 클래스 적용. (refreshCells() api 호출 필요 없음)

 cellClassRules: {
    "bg-blue-2": (params: CellClassParams) => {
      return params.data["customClass"] === "MANAGED_ITEM";
    }
    "bg-red-1": params => params.value > 2000,
  };