[ 20230102 TIL ] [ JavaScript ] AG-GRID 특정 행 색깔 변경하기 (getRowStyle)

우리나라 축제에 대한 데이터가 들어있는 그리드가 있다고 해보자. 

현재 진행중인 축제 행을 노란색으로 표시해주고자 한다.

 

getRowStyle : rowStyles 추가하고, rowStyles에 구현해준다.

activeParadeList에 진행중인 축제 리스트가 들어있고, 조건에 만족하는 행에 대해서 background : 'yellow' 해준다.

const rowStyles = (params: any) => {
        if (activeParadeList.find((el) => el.paradeName === params.data.cdNm)) {
            return { background: 'yellow' };
        }
        return { background: '' };
    };
    
const gridCodeTypeProps = {
        title: '축제 목록',
        rowData: selectList,
        columnDef: columnDefs,
        showIndex: false,
        useQuickFilter: true,
        TotalJobFile: true,
        gridStyle: { height: 'calc(100vh - 240px)', minHeight: 200 },
        onSelectionValue: onCellClicked,
        suppressContextMenu: true,
        deselectAll: isDeselectAll,
        getRowStyle: rowStyles
    };