ag-Grid-React 사용자 정의 셀 렌더러

 

✅ 사용자 정의 셀 렌더러란?

기본적으로 AgGridReact는 텍스트 기반으로 데이터를 셀에 출력합니다. 하지만 복잡한 UI(버튼, 이미지, 링크, 조건부 스타일 등)를 출력하고 싶은 경우, React 컴포넌트를 셀 렌더러로 지정할 수 있습니다.

이는 일종의 Cell View Layer를 개발자가 직접 구성할 수 있도록 해주는 구조입니다.

 

💡 동작 방식 요약

1. React로 렌더러 컴포넌트를 작성한다.
2. AgGridReact의 frameworkComponents에 등록한다.
3. 컬럼 정의(columnDefs)의 cellRenderer 속성으로 해당 컴포넌트를 지정한다.
4. Ag-Grid가 각 셀에 대해 해당 컴포넌트를 mount한다.

---

🔧 AgGridReact 에서 prop를 통한 이벤트 처리 예제

 

import React, { useState } from "react";
import { AgGridReact } from "ag-grid-react";
import ButtonRenderer from "./ButtonRenderer";
import "ag-grid-community/styles/ag-grid.css";
import "ag-grid-community/styles/ag-theme-alpine.css";

const AgGridText = () => {
	
	const [rowData] = useState([
        { make: "Hyundai", model: "Sonata", price: 25000 },
        { make: "Kia", model: "K5", price: 27000 },
	]);

	const [columnDefs] = useState([
		{ field: "make" },
		{ field: "model" },
		{ field: "price" },
		{
  			headerName: "작업",
  			field: "action",
  			cellRenderer: "buttonRenderer", // 렌더러 지정
		},
	]);

	const ButtonRenderer = (props) => {
		return (
            <button onClick={() => props.context.handleRowClick(props.data)}>
              선택
            </button>
          );
	};
    
	return (
    	<div className="ag-theme-alpine" style={{ height: 400, width: 600 }}>
    	<AgGridReact
          rowData={rowData}
          columnDefs={columnDefs}
          frameworkComponents={{ buttonRenderer: ButtonRenderer }}
          context={{ handleRowClick: (data) => console.log(data) }}
        />
    </div>
  );
};