인프런 커뮤니티 질문&답변

@mui/x-data-grid 패키지를 사용해서 type= "time" 을 추가 해 보려고 합니다.

검색을 해보니 공식문서에서는 커스터마이징 해서 사용할수있다고 하는 글을 보았습니다.

제가 필요한 time picker 부분을 추가하는 부분은 찾지 못했습니다. ㅠ.ㅠ

https://mui.com/x/react-data-grid/column-definition/#custom-column-types

@mui/x-data-grid 에서 기본 제공하는 타입들은 아래와 같습니다.

• 'string' (default)

• 'number'

• 'date'

• 'dateTime'

• 'boolean'

• 'singleSelect'

• 'actions'

위에 보시다 시피 'time' 이 없습니다... ㅠ.ㅠ

구글링 해보니 아래 부분에

https://github.com/mui/mui-x/issues/5421 글에서

7월12일에 time 열이 추가 되었다고 하는것 같은데..

관련된 파일이 아래 gridDateColDef.ts, gridDateOperators.ts 두가지 파일로 보이며

커스터마이징이 필요할것을 보여집니다.

https://github.com/mui/mui-x/blob/master/packages/grid/x-data-grid/src/colDef/gridDateColDef.ts

import { gridDateComparator } from '../hooks/features/sorting/gridSortingUtils';
import { getGridDateOperators } from './gridDateOperators';
import { GRID_STRING_COL_DEF } from './gridStringColDef';
import { GridColTypeDef } from '../models/colDef/gridColDef';
import { renderEditDateCell } from '../components/cell/GridEditDateCell';
import { GridValueFormatterParams } from '../models/params/gridCellParams';

export function gridDateFormatter({ value }: GridValueFormatterParams<Date | string>) {
  if (value instanceof Date) {
    return value.toLocaleDateString();
  }
  return value ?? '';
}

export function gridDateTimeFormatter({ value }: GridValueFormatterParams<Date | string>) {
  if (value instanceof Date) {
    return value.toLocaleString();
  }
  return value ?? '';
}

export const GRID_DATE_COL_DEF: GridColTypeDef<Date | string, string> = {
  ...GRID_STRING_COL_DEF,
  type: 'date',
  sortComparator: gridDateComparator,
  valueFormatter: gridDateFormatter,
  filterOperators: getGridDateOperators(),
  renderEditCell: renderEditDateCell,
  getApplyQuickFilterFn: undefined,
};

export const GRID_DATETIME_COL_DEF: GridColTypeDef<Date | string, string> = {
  ...GRID_STRING_COL_DEF,
  type: 'dateTime',  <======= 이 타이블 수정
  sortComparator: gridDateComparator,
  valueFormatter: gridDateTimeFormatter,
  filterOperators: getGridDateOperators(true),
  renderEditCell: renderEditDateCell,
  getApplyQuickFilterFn: undefined,
};

colDef 폴더에 gridDateColDef.ts 파일에서는 type 이 time 인 컬럼 속성은 보이지 않습니다.

mui x data grid 예시 파일을 열어서 아래

https://codesandbox.io/s/d13q7i?file=/demo.tsx

import * as React from "react";
import Box from "@mui/material/Box";
import { DataGrid, GridColTypeDef } from "@mui/x-data-grid";
import {
  randomStatusOptions,
  randomPrice,
  randomCreatedDate
} from "@mui/x-data-grid-generator";

const rows = [
  {
    id: 1,
    status: randomStatusOptions(),
    subTotal: randomPrice(),
    total: randomPrice(),
    date: randomCreatedDate(),
    time: "05:45"
  },
  {
    id: 2,
    status: randomStatusOptions(),
    subTotal: randomPrice(),
    total: randomPrice(),
    date: randomCreatedDate(),
    time: "05:45"
  },
  {
    id: 3,
    status: randomStatusOptions(),
    subTotal: randomPrice(),
    total: randomPrice(),
    date: randomCreatedDate(),
    time: "05:45"
  }
];

const currencyFormatter = new Intl.NumberFormat("en-US", {
  style: "currency",
  currency: "USD"
});

const usdPrice: GridColTypeDef = {
  type: "number",
  width: 200,

  valueFormatter: ({ value }) => currencyFormatter.format(value),
  cellClassName: "font-tabular-nums"
};


export default function CustomColumnTypesGrid() {
  return (
    <Box
      sx={{
        height: 300,
        width: "100%",
        "& .font-tabular-nums": {
          fontVariantNumeric: "tabular-nums"
        }
      }}
    >
      <DataGrid
        columns={[
          { field: "status", width: 130 },
          { field: "subTotal", ...usdPrice, editable: true },
          { field: "total", ...usdPrice },
          { field: "time", editable: true },
          { field: "date", type: "dateTime", width: 200, editable: true }
        ]}
        rows={rows}
      />
    </Box>
  );
}

      <DataGrid
        columns={[
          { field: "status", width: 130 },
          { field: "subTotal", ...usdPrice, editable: true },
          { field: "total", ...usdPrice },
          { field: "time", editable: true },
          { field: "date", type: "dateTime", width: 200, editable: true }
        ]}
        rows={rows}
      />

위에 일자와 시간을 선택할수 있는 셀렉터를

아래 time picker 만 나오도록 custumizing 할수 있는 팁을 주실수 있을까요?