[ React / ag-grid ] 관련정리

 

< gridOption >

rowDrag: true  => 드래그 이벤트 적용시킬 column에 지정하면 아래처럼 표시됨.

drag col

valueParser : 셀에서 값이 편집된 후 호출. 입력값이 지정한대로 파싱/변환되며 반환값이 valueSetter로 전달.

valueSetter : 데이터가 셀에 입력되기 직전에 호출. 셀 값이 변경될 때마다 호출. (cellEditor 사용시 유용.)

=> 변경값이 적용되면 return true,

=>   return false 로 해주면 변경값이 적용되지 않음. 

=>  기존 데이터모델 값과 변경한 값이 같으면 newValue로 잡지 않는다. 대신 공백이 포함되면 잡음**  

* valueParser에서 입력값이 변환되어  valueSetter 에서 변환된 값을 데이터 모델에 저장하거나 추가로직 실행.

 

cellRenderer : (데이터가 변경) 셀이 렌더링 때 호출. (grid가 렌더링 된다고 무조건 호출되는건 아님!!) 

* valueSetter 에서 저장된 데이터 모델의 값을 읽고, 셀에 데이터를 표시하는 방법을 정의. (시각적인 변경)

* setSelected 함수로 체크박스 체크/해제

cellRenderer: (params) => {
        params.node.setSelected(true);
}

 

 

cellStyle : 데이터가 변경된 이후 그리드가 렌더링 될때 적용. 셀 스타일 지정.

=> return { color: 'red' }      * 데이터 변경 시 즉시반영X

 

---

 

< event >

onRowClicked : 클릭이벤트 

onRowDoubleClicked : 더블클릭이벤트 (클릭이벤트와 함께 사용하면 중첩으로 발생)

 

onCellClicked : 클릭이벤트

 (event 속성값) 

 - colDef : 클릭한 cell의 field, headerName 접근가능.

 - data : 클릭한 cell 의 data값에 접근가능.

 - node : 클릭한 row정보. 

 - rowIndex : 클릭한 cell의 row의 index. 

 - type : "cellClicked"

 - value : cell값

 

onCellDoubleClicked : 더블클릭이벤트 (클릭이벤트와 함께 사용하면 중첩으로 발생)

 

onCellValueChanged : 셀의 값이 성공적으로 변경된 이후에 발생. (값 변경 이후 추가적인 로직 필요할 때)

        => valueSetter가 값을 성공적으로 설정한 이후 호출, 셀을 편집하고 Enter를 눌러 편집을 완료한 직후 호출.

        => 더블클릭시 cell수정 활성화, click으로 변경가능 (뭐더라..)

(event 속성값) 

 - colDef : 수정한 cell의 field, headerName 접근가능.

 - data : 수정한 cell 의 data값에 접근가능. ( valueSetter 에서 설정한 값이 적용된 data )

 - node : 수정한 row정보. 

 - rowIndex : 클릭한 cell의 row의 index. 

 - type : " "cellValueChanged"

 - value : 수정한 cell값

 - newValue : 수정한 cell값

 - oldValue : 수정전 cell값

 

 

 

onRowDragEnd : 마우스 드래그가 완료된 이후 호출. 

1행 (rowIndex=0) 을 2행 (rowIndex=1) 으로 이동하면 

e(1행)의 overNode : 이동 후 다음 rowNode 정보 ( rowIndex = 2 ) 

e(1행)의 overIndex  : 2 (이동 후 overNode 의 rowIndex ) 

e(1행)의 node : 이동 후 현재의 rowNode 정보 

(관련option들)

rowDragManaged={true} // 드래그 행이동
rowDragMultiRow={true} // 여러행 한번에 이동
rowDragEntireRow={true} // 드래그 행이동을 전체컬럼에 적용(row에 적용)
suppressMoveWhenRowDragging={true} // 행이동 미리보기

 

---

 

< grid_api 함수 >

( grid에 ref={gridRef} 옵션추가 및  const gridRef = useRef(""); 변수선언)

 

forEachNode : 그리드의 모든 rowNode를 순회.

gridRef.current.api.forEachNode((rowNode) => {
	console.log(rowNode.data)  
});

 

 

(rowNode 속성값)

 - data : 그리드의 data값에 접근가능.    {field1 : val1, field2 : val2 ...}

   => data.(field명) 으로 value값에 접근가능.  

- rowIndex : row의 index값 (0~ )

- selectable : 체크박스 체크가능여부.

- selected : 체크박스 체크여부.

* setSelected 함수로 체크박스 체크/해제

gridRef.current.api.forEachNode((rowNode) => {
	if(조건){
    	rowNode.setSelected(true);
    }
});

 

 

getSelectedRows : 그리드에서 (체크박스)선택한 rowNode의 data 정보. (배열)

gridRef.current.api.getSelectedRows();

// [{...}] 
// 0 : {field1 : val1, field2 : val2 ...}
// 1 : {field1 : val1, field2 : val2 ...}

 

refreshCells : 원하는 cell만 렌더링. 

gridRef.current.api.refreshCells({
  columns: ['field3'], // 다시 렌더링할 컬럼 지정
  force: true            // 강제 렌더링 옵션
});

 

applyTransaction : 행추가(update) / 삭제(remove)

* 행추가

const newRow = [{
      field1: "defaultVal",
      field2: "",
      ...
    }]
    
    
gridRef.current.api.applyTransaction({
  add: newRow,
  addIndex: 0
});

 

* 행삭제

const deleteRows = gridRef.current.api.getSelectedRows();

gridRef.current.api.applyTransaction({
  remove: deleteRows
});

 

 

 

---

 

https://www.ag-grid.com/react-data-grid/deep-dive/

React Grid: Creating a Basic Grid | AG Grid