Life goes slowly...

ag-grid-react에서 엑셀 다운로드(Excel Export) 기능은 매우 강력하며, Enterprise 기능이 아닌 Community Edition에서도 사용 가능합니다. 단순 클릭으로 현재 그리드에 표시된 데이터를 .xlsx 또는 .csv 형식으로 내보낼 수 있습니다. ✅ 1. Excel 파일 다운로드 (XLSX)import React, { useRef, useState } from "react";import { AgGridReact } from "ag-grid-react";import "ag-grid-community/styles/ag-grid.css";import "ag-grid-community/styles/ag-theme-alpine.css";const GridExportExcel = (..

ag-grid-react에서 행(row) 편집 기능은 매우 강력하며, 인라인(in-place) 방식으로 데이터를 편집할 수 있습니다. React 개발자의 관점에서 보면, 셀 편집은 자동으로 관리되지만, 외부 상태 동기화나 저장 버튼과의 연동을 직접 제어할 수 있어야 실전에서 유용합니다.✅ 기본 행 편집 방식Ag-Grid는 셀 단위 편집을 지원하지만, 그리드 옵션을 조금만 설정하면 **행 단위 편집(row editing)**처럼 동작하게 할 수 있습니다. import React, { useState } from "react";import { AgGridReact } from "ag-grid-react";import "ag-grid-community/styles/ag-grid.css";import "ag-g..

✅ 사용자 정의 셀 렌더러란?기본적으로 AgGridReact는 텍스트 기반으로 데이터를 셀에 출력합니다. 하지만 복잡한 UI(버튼, 이미지, 링크, 조건부 스타일 등)를 출력하고 싶은 경우, React 컴포넌트를 셀 렌더러로 지정할 수 있습니다.이는 일종의 Cell View Layer를 개발자가 직접 구성할 수 있도록 해주는 구조입니다. 💡 동작 방식 요약React로 렌더러 컴포넌트를 작성한다.AgGridReact의 frameworkComponents에 등록한다.컬럼 정의(columnDefs)의 cellRenderer 속성으로 해당 컴포넌트를 지정한다.Ag-Grid가 각 셀에 대해 해당 컴포넌트를 mount한다.🔧 AgGridReact 에서 prop를 통한 이벤트 처리 예제 import React, ..