[agGrid] cellEditor 옵션 (select)

agCellEditor

기본 input

default 값으로 editable을 true로 주고 cellEditor을 설정하지 않았을 때 나타난다.

      let colDef = [
        {
          field: 'columnID',
          headerName: 'columnID',
          editable: true,
          cellEditor: 'agCellEditor',
          cellEditorParams: {}
        },
        { field: 'type', headerName: 'type' }
      ];

 

agSelectCellEditor

무료 버전인 ag-grid-community에서 사용할 수 있는 select 옵션입니다.

      let colDef = [
        {
          field: 'columnID',
          headerName: 'columnID',
          editable: true,
          cellEditor: 'agSelectCellEditor',
          cellEditorParams: params => {
            return { values: this.gridOptions };
          }
        },
        { field: 'type', headerName: 'type' }
      ];

유료 버전인 ag-grid-enterprise에는 agRichSelectCellEditor 등 다양한 select 옵션이 존재합니다.

 

cellEditorSelector

cellEditorSelector는 ag-Grid에서 제공하는 셀 에디터를 선택하는 방법을 지정하는 속성입니다.

함수형태로 만들어서 case에 따라 다르게 리턴할 수 도 있습니다.

      let colDef = [
        {
          field: 'columnID',
          headerName: 'columnID',
          editable: true,
          cellEditorSelector: cellEditorSelector
        },
        { field: 'type', headerName: 'type' }
      ];
      function cellEditorSelector(params) {
        if (params.data.type === 'gender') {
          return {
            component: 'agSelectCellEditor',
            params: {
              values: ['Male', 'Female']
            }
          };
        } else {
          return {
            component: 'agCellEditor'
          };
        }
      }