MUI Data grid column default value 설정 방법

MUI Data grid는 기본적으로 column의 필드값이 존재하지 않으면 빈값으로 노출이 됩니다. 하지만 상황에 따라 기본이 되는 값을 변경하고 싶을 때가 있습니다. 예를 들어 날짜별로 제품의 주문횟수들을 계산할 때, 주문이 들어오지 않아 받아오는 데이터에 해당 속성이 없다면 어떻게 할까요? 코드로 확인해보겠습니다.

MUI Data grid - 두 번째 row의 주문횟수 필드값이 존재하지 않을 경우

코드

import { Box } from '@mui/material';
import { DataGrid } from '@mui/x-data-grid';

const rows = [
  { id: 1, date: '01', name: '반팔', orders: 2550, stock: 9230 },
  { id: 2, date: '02', name: '코트', stock: 1872 },
  { id: 3, date: '03', name: '니트', orders: 3920, stock: 1020 },
];

const columns = [
  { field: 'date', headerName: '날짜', width: 100 },
  { field: 'name', headerName: '제품이름', width: 100 },
  { field: 'orders', headerName: '주문횟수', type: 'number', width: 150 },
  { field: 'stock', headerName: '재고', type: 'number', width: 150 },
];

export default function App() {
  return (
    <Box
      sx={{
        height: '300px',
        padding: '2rem',
      }}>
      <DataGrid rows={rows} columns={columns} />
    </Box>
  );
}

위 코드에서, API 통신을 통해 rows를 받아왔다고 가정해봅시다. 그러면 rows를 순회하면서 해당 속성을 추가해야 할까요? 그렇게 할 수도 있지만 아래에 더 쉬운 방법이 있습니다.

const columns = [
  { field: 'date', headerName: '날짜', width: 100 },
  { field: 'name', headerName: '제품이름', width: 100 },
  {
    field: 'orders',
    headerName: '주문횟수',
    type: 'number',
    width: 150,
    valueGetter: ({ value }) => value || 0,
  },
  { field: 'stock', headerName: '재고', type: 'number', width: 150 },
];

MUI Data grid column의 기본값은 valueGetter를 사용하여 지정할 수 있습니다. 위처럼 valueGetter 속성으로 column에 해당 값이 없을 때 사용할 수 있습니다. 또한 다른 필드의 조합을 렌더링할 때도 쓰일 수 있습니다.

function getFullName(params) {
  return `${params.row.firstName || ''} ${params.row.lastName || ''}`;
}

const columns = [
  { field: 'firstName', headerName: 'First name', width: 130 },
  { field: 'lastName', headerName: 'Last name', width: 130 },
  {
    field: 'fullName',
    headerName: 'Full name',
    width: 160,
    valueGetter: getFullName,
  },
];

결론

MUI 공식문서가 친절하긴 하지만 양이 워낙 방대하다보니 개인적으로 찾기 어려웠습니다. 그래도 하나씩 찾아서 해결하는 재미가 있네요. 특히 백오피스 웹 앱을 개발할 때 필요한 것들은 웬만하면 다 있는 것 같아요.

 

모쪼록 해당 글이 도움이 되었으면 좋겠습니다.