[ React ] AG-GRID applyTransaction 행추가(add), 행삭제(remove), 행수정(update) 기능 구현하기

AG-GRID를 이용해서 그리드 행추가, 행삭제, 행수정 기능을 구현하려고 했다.

검색을 해보니까 생각보다 잘 나와있지 않아서 포스팅해본다. 

 

 

 

import { GridApi } from 'ag-grid-community'

 

일단 GridApi를 import 해주었다. 

 

 

원하는 applyTransaction 이 없다..

도대체 이건 어떻게 쓰는 건가 하고 소스를 뒤져보았다.

 

const [gridApi, setGridApi] = useState<GridApi>();

useState로 사용을 하더라.. 

 

 

➕행 추가 (add) 

const newRow = {
            JobNm: '',
            FromTm: '',
            ToTm: '',
            Use_YN: 'Y',
            Remark: ''
        };
        gridApi?.applyTransaction({ add: [newRow] });

 

추가하고자 하는 row를 설정한 후에, add 뒤에 적으면 된다.

 

 

➖ 행 삭제 (remove)

    const listDel = async () => {
        const selectedData = gridApi?.getSelectedRows();
        gridApi?.applyTransaction({ remove: selectedData });
    };

delete는 선택된 row를 지우고자 했기 때문에, getSelectedRows를 먼저 쓴 후에

그 row를 remove!

 

 

🔘 행 수정 (update)

    () => {
        const selectedData: any = gridApi?.getSelectedRows();
        const temp = [];
        for (let i = 0; i < selectedData.length; i += 1) {
            selectedData[i].rowType = 'D';
            temp.push(selectedData[i]);
            gridApi?.applyTransaction({ update: temp });
        }
    };

ag-grid의 예제와는 조금 다를 수 있다. 나는 선택된 행에 대해서만 update 되길 원해서,

getSelectedRows를 사용했다. 그리고 해당 row의 rowType(상태값)을 D로 변경한 후에 temp에 push.

 

처음에는 update: selectedData[i] 라고 써봤는데, 유사배열 오류가 나서

temp를 선언해주고 push를 했더니만 됐다. 

 

 

 

참고 : https://www.ag-grid.com/javascript-data-grid/data-update-transactions/

JavaScript Data Grid: Client-Side Data - Transaction Updates

 

 

🤣 add를 했는데, rowData(데이터셋)에 반영이 되지 않는다.. 데이터셋과 연결된 경우에는 다른 방법을 써야할 것 같은 느낌.. ㅠㅠ