AG GRID 콤보 이름 보이게 하기(함수형)

react, typescript에서 ag-grid field 중에 처리 유형이 있는데 항목은 PROCESS, VERIFY, NOTFIY 코드 인데 명칭은 PROCESS : 'Process', VERIFY: 'Answer', NOTFIY

const processTypeMap: Record<string, string> = {
PROCESS: 'Process',
VERIFY: 'Answer',
NOTFIY: 'Notify', // 오타가 아니라면 그대로 사용
};

import { ColDef } from 'ag-grid-community';

const columnDefs: ColDef[] = [
{

headerName: '처리 유형',
field: 'processType', // 해당 데이터 필드명
valueFormatter: (params) => processTypeMap[params.value] || params.value,

},
// 다른 컬럼들...
];

import React from 'react';
import { AgGridReact } from 'ag-grid-react';
import { ColDef } from 'ag-grid-community';
import 'ag-grid-community/styles/ag-grid.css';
import 'ag-grid-community/styles/ag-theme-alpine.css';

const processTypeMap: Record<string, string> = {
PROCESS: 'Process',
VERIFY: 'Answer',
NOTFIY: 'Notify', // 확인 필요
};

const columnDefs: ColDef[] = [
{ headerName: 'ID', field: 'id' },
{

headerName: '처리 유형',
field: 'processType',
valueFormatter: (params) => processTypeMap[params.value] || params.value,

},
];

const rowData = [
{ id: 1, processType: 'PROCESS' },
{ id: 2, processType: 'VERIFY' },
{ id: 3, processType: 'NOTFIY' },
];

export const ProcessGrid: React.FC = () => {
return (

<div className="ag-theme-alpine" style={{ height: 300, width: '100%' }}>
  <AgGridReact rowData={rowData} columnDefs={columnDefs} />
</div>

);
};