[REACT] ag grid full row editing , delete/ ag grid row 수정, 삭제

 

버튼으로 row 전체를 수정 상태로 바꾸고 싶다. 

그리고 delete를 누르면 행이 삭제됐으면 좋겠다. 

어떻게 하는지 살펴보자.

---

 

1. defaultColDef에 editable: true 설정

여기서 설정한 defaultColDef는 아래에 gridOptions에 들어간다. 

 

 

 

 

 

 

2. gridOptions에서 아래의 설정 추가

gridOptions에는 그리드에 대한 전반적인 설정들이 들어가는데, 

그중에서 row전체를 버튼으로 제어를 하고 싶으면 아래의 설정들을 모두 넣어준다. 

ag grid는 클린코드라서 그런지 함수명만 보고도 행동이 이해가 간다. 

오늘도 클린코드의 중요성을 느낀다.

 

 

 

 

 

3. AgGridReact 컴포넌트에 props로 넣어주기

        <AgGridReact
          ref={gridRef}
          gridOptions={gridOptions}
          frameworkComponents={{
            actionCellRenderer: ActionCellRenderer,
          }}
        ...(생략)>

여기서 actionCellRenderer은 버튼 렌더링하는 컬럼에 필요하다. 

ActionCellRenderer 컴포넌트를 만들어주자. 

 

 

 

 

 

4. ActionCellRenderer 컴포넌트 만들기

import React from 'react';
import { Button, Stack } from '@mui/material';

const ActionCellRenderer = params => {
  let editingCells = params.api.getEditingCells();

  let isCurrentRowEditing = editingCells.some(cell => {
    return cell.rowIndex === params.node.rowIndex;
  });

  if (isCurrentRowEditing) {
    return (
      <Stack direction="row" spacing={1}>
        <Button size="small" variant="contained" data-action="update">
          update
        </Button>
        <Button size="small" variant="outlined" data-action="cancel">
          cancle
        </Button>
      </Stack>
    );
  } else {
    return (
      <Stack direction="row" spacing={1}>
        <Button size="small" variant="contained" data-action="edit">
          edit
        </Button>
        <Button size="small" variant="contained" color="secondary" data-action="delete">
          delete
        </Button>
      </Stack>
    );
  }
};

export default ActionCellRenderer;

ag grid에서 cellRenderer로 이 컴포넌트를 부르면 params에 저절로 grid 관련 정보들이 넘어온다. 

그래서 그것을 사용하면 된다. 

button에 data-action이라고 된 것이 있다. 이것은 데이터셋인데 

2번에서 params.event.target.dataset.action 이 부분을 뜻한다. 

데이터셋의 액션이 update 인지 cancel인지, edit인지를 2번 onCellClicked 함수에서 판별한다. 

 

 

 

 

5. 컬럼 만들기

 

 <AgGridColumn
    editable={false}
    field="action"
    headerName="action"
    pinned="right"
    cellRenderer="actionCellRenderer"
  />

이 컬럼은 editable false로 해주어야하고 cellRenderer로 위에서 만든 버튼 렌더러를 추가해주었다. 

 

 

 

[참고]

https://codesandbox.io/s/zealous-lederberg-sdlw2?from-embed=&file=/main.js