[ React ] 그리드 특정 셀 드롭박스로 변환 + 보여지는 건 다르게 하기 (ag-grid cellEditorSelector, valueFormatter)

그리드 특정 셀을 이렇게 드롭박스로 변환시켜 선택할 수 있게 만드는 방법!

 

 

https://www.ag-grid.com/react-data-grid/cell-editors/

React Data Grid: Cell Editors

 

ag grid에서 설명해주는 거 따라하면 잘 된다

 

설정 (setting)	값 (value)
유형	Finte

const cellEditorSelector = (params: { data: { setting: string } }) => {
        if (params.data.setting === 'type') {
            return {
                component: 'agSelectCellEditor',
                params: { values: ['Finite', 'Infinite'] },
                popup: true
            };
        return undefined;
    };

설정(열)에 유형(type)이라고 되어있는 행 부분의 값에 드롭박스를 넣고 싶을 때, 이렇게 쓰면 된다. 

이때 값이 Finite, Infinite로 들어가야하는데 보여지는 건 유한, 무한으로 보여지고 싶으면 valueFormatter을 쓰면 된다. 

 

처음에 cellEditorSelector key, value 이렇게 검색도 해봤는데 안 나옴..

values 뒤에 keys : ['무한','유한'] 도 써봤지만 먹지 않았음.

 

속는 셈 치고 그냥 valueFormatter 써봤는데 너무 잘 된다.. 

const arrTypeList = [
        { eng: 'Finite', kor: '유한' },
        { eng: 'Infinite', kor: '무한' }
    ];
    
const korFormatter = (params: ValueFormatterParams) => {
        const name = arrTypeList?.find((element) => element.eng === params.value);
        return name?.kor;
    };
    
const columnDefs = [
        { headerName: '설정', field: 'setting', cellStyle: { textAlign: 'left' } },
        {
            headerName: '값',
            field: 'value',
            cellStyle: { textAlign: 'left' },
            editable: true,
            cellEditorSelector,
            valueFormatter: korFormatter
        },

 

끝~~

 

 

※ 문제점

여러 셀 드롭박스 설정시.. Formatter 안에서도 조건문으로 나누어 줘야 하는데..

if문 쓰는 순간 드롭 버튼 누르면 Formatter가 다 풀려버린다.. 

완벽한 방법이 아니다 :(