ag-Grid-React Excel 다운로드

 

 

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 = () => {
  const gridRef = useRef();

  const [rowData] = useState([
    { make: "Hyundai", model: "Sonata", price: 2500 },
    { make: "Kia", model: "K5", price: 2700 },
  ]);

  const [columnDefs] = useState([
    { field: "make" },
    { field: "model" },
    { field: "price" },
  ]);

  const handleExportExcel = () => {
    gridRef.current.api.exportDataAsExcel();
  };

  return (
    <div>
      <button onClick={handleExportExcel}>Excel Export</button>
      <div className="ag-theme-alpine" style={{ height: 400, width: 600 }}>
        <AgGridReact
          ref={gridRef}
          rowData={rowData}
          columnDefs={columnDefs}
        />
      </div>
    </div>
  );
};

export default GridExportExcel;

 

📂 exportDataAsExcel 옵션

exportDataAsExcel()에 옵션을 줄 수 있습니다.

gridRef.current.api.exportDataAsExcel({
  fileName: "my-data.xlsx",
  sheetName: "Sheet1",
  columnKeys: ["make", "model"], // 특정 컬럼만
  allColumns: true,              // 숨겨진 컬럼까지 포함
  onlySelected: false,           // 선택된 행만
});

 

✅ 2. CSV 파일 다운로드

엑셀보다 더 가볍게 CSV로도 내보낼 수 있습니다.

gridRef.current.api.exportDataAsCsv({
  fileName: "my-data.csv",
});

 

 

자주 사용하는 옵션 들로 형식(예: 날짜 포맷 변경, 숫자 통화 처리, 특정 컬럼 제외 등)에 맞춰 엑셀 포맷을 커스터마이징할 수도 있습니다.