셀 값을 기준으로 Slick 그리드의 각 셀에 CSS 추가하기

Question

셀 값을 기반으로 CSS 셀 클래스를 슬릭 그리드에 적용하고 싶습니다. 이 코드가 작동하지만

나는 열

{ 
    id: 'deptType', 
    name: 'Department Type', 
    field: 'dept_type', 
    sortable: true, 
    formatter: function (row, cell, value, columnDef, dataContext) { 
        if(value === 'red'){ 
         return '<div style="width:100%; padding:0; margin:0" class ="red">' + value + '</div>'; 
        } 
        return '<div style="width:100%; padding:0; margin:0" class ="green">' + value + '</div>'; 
      } 
} 

에 다음 코드를 사용하고 있습니다. 이 문제를 해결하는 더 나은 방법이 있는지 궁금합니다.

Answer 1

코드가 나에게 잘 보이는 것 같습니다. HTML 속성 style 대신 class을 사용하지 않는 다음 코드를 사용하여 스타일을 중앙 집중화하고 잠재적으로 CSS 렌더링 속도를 향상시킬 수 있습니다.

.red, .green { 
width:100%; 
padding:0; 
margin:0; 
} 
.red { 
color: red; 
} 
.green { 
color: green; 
} 

{ 
    id: 'deptType', 
    name: 'Department Type', 
    field: 'dept_type', 
    sortable: true, 
    formatter: function (row, cell, value, columnDef, dataContext) { 
        if(value === 'red'){ 
         return '<div class ="red">' + value + '</div>'; 
        } 
        return '<div class ="green">' + value + '</div>'; 
      } 
}