[ React / ag-grid ] grid 내부에 버튼 넣기

 

grid 옵션은 아래처럼 사용.

버튼 작동을 위해 'onCellClicked' 필요.

// 사용한 grid 옵션들 

<AgGridReact
    rowData={list}
    columnDefs={colDefs}
    rowSelection={"multiple"}
    rowMultiSelectWithClick={true}
    suppressRowClickSelection={false}
    enableCellTextSelection={false} 
    stopEditingWhenCellsLoseFocus={true}
    ref={gridRef}
    onCellClicked={onCellClicked}
    onCellValueChanged={onCellValueChanged}
></AgGridReact>

 

grid의 rowData와 columnDefs는 useState함수로 아래처럼 지정. 

const [list, setList] = useState([]);
const [colDefs, setColDefs] = useState([
	{
      field: "checkbox",
      headerName: "",
      headerCheckboxSelection: true,
      checkboxSelection: true,
      maxWidth: 50,
      cellRenderer: (props) => {
        props.node.setSelected(props.data.checked);
      }
    },
    
    // field 생략
    
    {
      field: "buttonField",
      headerName: "",
      width: 70,
      sortable: false,
      pinned: "right",
      cellRenderer: () => {
        return (
          <div style={{ cursor: "pointer" }}>
            <FontAwesomeIcon icon={faTrash} size="lg" />
          </div>
        );
      },
      cellStyle: { textAlign: "center" }
    }
  ]);

 

=> 각 row의 마지막 cell에 cellRenderer 옵션을 활용해 행삭제버튼(아이콘)을 넣어준다.

* rowData (여기에서는 list) 가 비어있는 경우에는 cellRenderer 를 호출하지 않기 때문에 초기 grid에는 버튼이 안보임.

 

---

 

grid 가 그려진 이후에 아래  행추가버튼(아이콘) 을 추가해서 grid의 헤더(columnDefs)를 다시 정의해준다.

  // grid 행추가 버튼
  const CustomHeaderComponent = () => {
    return (
      <div
        onClick={handleAddRow}
        style={{
          cursor: "pointer",
          width: "100%",
          display: "flex",
          justifyContent: "center"
        }}
      >
        <FontAwesomeIcon icon={faAdd} size="2x" flip="horizontal" />
      </div>
    );
  };

 

위의 CustomHeaderComponent (행추가버튼) 을 헤더에 추가해주는 함수 addRowButton 생성. 

호출은 list값이 변경될때로 설정.

  // columnDefs 재정의
  const addRowButton = () => {
    const newColDef = colDefs.map((colDef) => {
      if (colDef.field == "buttonField") {
        return {
          ...colDef,
          headerComponent: CustomHeaderComponent
        };
      }
      return colDef;
    });
    if (list.length > 0) {
      setColDefs(newColDef);
    }
  };
  
  // 함수 호출
  useEffect(() => {
    addRowButton();
  }, [list]);

 

=> list값이 업데이트 되면 headerComponent 옵션에 버튼을 넣어주고 columnDefs를 재정의해준다.

 

---

 

list값을 불러와 grid에 데이터가 채워지면  행추가 / 행삭제 버튼이 아래처럼 나타난다.

 

버튼 클릭시 'onCellClicked' 함수가 실행되니 행추가 / 행삭제 로직을 넣어주면 된다.

 

뭔가 꾸역꾸역 버튼을 넣은 느낌이지만 작동은 잘된다....

 

---

 

* grid 업데이트 (리렌더링) 시점 *

=> rowData 변경 ( 모든 셀을 다시 렌더링, 각 컬럼의 cellRenderer 호출)

=> columnDefs 변경 ( 변경된 컬럼의 셀만 다시 렌더링, 변경 컬럼의 cellRenderer 호출)

 

https://phyho.tistory.com/303

[ React / ag-grid ] 관련정리