[MUI-Datagrid] 특정 컬럼에서 null 값 표현하기

mui에서 제공하는 datagrid를 사용해서 컬럼을 만들던 중,
Null 값은 빈 공백으로만 출력되는 현상이 나타났다.

<DataGridPro
 sx={{
    fontSize: '10px',
    '& .serviceUsageDialogHeader': {
    backgroundColor: '#f1f7f9',
    color: '#1a3e72',
    },
}}
rowHeight={25}
headerHeight={25}
experimentalFeatures={{columnGrouping: true}}
columns={컬럼명}
rows={컬럼 상세}
getRowId={(row) =>
Object.values(row).reduce((prev, curr) => prev + curr)
}
hideFooterPagination={true}
autoHeight={true}
columnGroupingModel={bizmsgGroupingModel}
/>

기존 코드에서 {컬럼 상세} 부분의 코드만 변경해주면 null 값도 임의의 숫자나 문자로 표현할 수 있다.

다음은 변경된 코드이다

rows={컬럼 상세.map(row => {
const transformedRow = { ...row };
for (const key in transformedRow) {
if (transformedRow[key] === null) {
transformedRow[key] = 0;
}
}
return transformedRow;
})}

datagridPro 에서 prop에 전달되는 데이터를 가공하는 부분을 수정해주는 것이다

{컬럼 상세} 배열의 각 요소에 대해 map()함수를 사용하여 순회한다.
여기서 배열의 각 요소를 처리하고 변형할 수 있다.

const transformedRow 에서 현재 순회중인 요소인 row를 복사하여 transformedRow객체에 할당한다
(여기서, 원본데이터는 변경되지 않고 새로운 객체를 생성한다)

for문에서 반복하며 조건문내에서 객체의 각 키에 대해 null인지 확인하고, null인 경우 값을 0으로 변경해준다.

이후, 변형된 transformedRow객체를 반환해준 후, 변형된 객체들로 구성된 새 배열이 DataGridPr의 rows prop에 전달될 수 있다.