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

어제

https://yejinrla.tistory.com/90

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

이 글을 썼었는데 저 글에 남겼듯이 문제점이 있었다. 

어떻게든 해내고 싶어서 계속 찾다가 결국 해냄.

 

 

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

JavaScript Data Grid: Cell Editors

이거 참고 했다. 어제꺼는 react-data-grid 문서였는데 오늘껀 javascript-data-grid네.

 

1. 특정 열 모두 select box 사용할 때

 

어제는 cellEditorSelector를 사용했는데 오늘은 cellEditor을 사용해봤다.

 

const columnDefs = [
{
            headerName: '값',
            field: 'value',
            cellStyle: { textAlign: 'left' },
            editable: true,
            cellEditor: 'agRichSelectCellEditor',
            cellEditorPopup: true,
            cellEditorParams: cellCellEditorParams
        }
]

cellCellEditorParams에 조건식을 걸어준다. 

 

const arrTypeList = [
        { value: 'Finite', display: '유한' },
        { value: 'Infinite', display: '무한' }
    ];

const cellCellEditorParams = (params: { data: { setting: string } }) => {
        if (params.data.setting === 'type') {
            return {
                values: ['Finite', 'Infinite'],
                formatValue: (value: any) => `${arrTypeList?.find((element) => element.value === value)?.display}`
            };
        }
        return undefined;
    };

 

셀렉박스는 이렇게 뜨고, 유한을 선택하면

 

원래의 value로 보인다. 보여지는 value까지 컨트롤하려면 valueFormatter을 쓰면 될 것 같다. 

 

 

※ 문제점

해당 컬럼 모든 값이 드롭다운으로 되어야 함.. 

 

그래서 다시 시도를 해보았습니다. 

 

2. 특정 열 중에서 특정 행의 셀만 select box 사용할 때 

ag grid 문서에 따르면, 이 경우에는 celleditorselector을 쓰는 거라고 했다. 

celleditorselector 쓰면서 어떻게 formatValue를 쓸 수 있을까.. 고민하다가 

여기서 힌트를 얻었다. 

 

values: ['Finite', 'Infinite'],
formatValue: (value: any) => `${arrTypeList?.find((element) => element.value === value)?.display}`

cellEditorParams에 썼던 이 부분을 params에 써본다면.. ?

 

const arrTypeList = [
        { value: 'Finite', display: '유한' },
        { value: 'Infinite', display: '무한' }
    ];

const cellEditorSelector = (params: { data: { setting: string } }) => {
        if (params.data.setting === 'type') {
            return {
                component: 'agRichSelectCellEditor',
                popup: true,
                params: {
                    values: ['Finite', 'Infinite'],
                    formatValue: (value: any) => `${arrTypeList?.find((element) => element.value === value)?.display} `
                }
            };
        }
        
        
const columnDefs = [
        {
            headerName: '값',
            field: 'value',
            cellStyle: { textAlign: 'left' },
            editable: true,
            cellEditorSelector
        }
    ];

 

1번에서 적용됐던 것처럼 적용이 된다..!

 

 

+ 응용 

params: {
                    values: list?.map((row) => row.value),
                    formatValue: (value: any) => `${list?.find((element) => element.value === value)?.display} `
                }

위의 arrTypeList 처럼 value와 display key로 이루어진 object를 list라고 해보자. 

values에는 value key 인 것 만 보여지게 하고, formatValue에는 해당 value에 대한 display가 보여지게 하면

더 고급진(?) 코딩을 할 수 있다.