React Data GridPDF Export - Page Setup

"use client";

import React, {
  useCallback,
  useMemo,
  useRef,
  useState,
  StrictMode,
} from "react";
import { createRoot } from "react-dom/client";
import { AgGridReact, AgGridProvider } from "ag-grid-react";
import "./styles.css";
import {
  ClientSideRowModelModule,
  ColDef,
  ColGroupDef,
  GridApi,
  GridOptions,
  ModuleRegistry,
  PdfExportParams,
  PdfPageOrientation,
  PdfPageSize,
  enableDevValidations,
} from "ag-grid-community";
import { ContextMenuModule, PdfExportModule } from "ag-grid-enterprise";

if (process.env.NODE_ENV !== "production") {
  // Enable extended validations only for development
  enableDevValidations();
}

const modules = [ClientSideRowModelModule, ContextMenuModule, PdfExportModule];

interface InventoryData {
  item: string;
  category: string;
  warehouse: string;
  quantity: number;
  status: string;
}

const getPageSize: () => PdfPageSize = () => {
  const pageSize =
    document.querySelector<HTMLSelectElement>("#pageSize")!.value;
  if (pageSize === "Letter") {
    return "Letter";
  }
  if (pageSize === "custom") {
    return { width: 420, height: 300 };
  }
  return "A4";
};

const getPageOrientation: () => PdfPageOrientation = () => {
  return document.querySelector<HTMLSelectElement>("#orientation")!.value ===
    "portrait"
    ? "portrait"
    : "landscape";
};

const getPageMargin: () => number = () => {
  const margin = document.querySelector<HTMLSelectElement>("#margin")!.value;
  if (margin === "compact") {
    return 18;
  }
  if (margin === "wide") {
    return 54;
  }
  return 36;
};

const getPdfExportParams: () => PdfExportParams = () => {
  return {
    documentTitle: "Quarterly Inventory",
    page: {
      size: getPageSize(),
      orientation: getPageOrientation(),
      margin: getPageMargin(),
    },
    repeatHeader:
      document.querySelector<HTMLInputElement>("#repeatHeader")!.checked,
    columnWidth: "auto",
  };
};

const GridExample = () => {
  const gridRef = useRef<AgGridReact<InventoryData>>(null);
  const containerStyle = useMemo(() => ({ width: "100%", height: "100%" }), []);
  const gridStyle = useMemo(() => ({ height: "100%", width: "100%" }), []);
  const [rowData, setRowData] = useState<InventoryData[]>(
    Array.from({ length: 40 }, (_, index) => {
      const categories = ["Accessories", "Displays", "Networking", "Storage"];
      const warehouses = ["London", "Chicago", "Singapore"];
      const itemNumber = index + 1;
      return {
        item: `Item ${itemNumber}`,
        category: categories[index % categories.length],
        warehouse: warehouses[index % warehouses.length],
        quantity: 20 + itemNumber * 3,
        status: itemNumber % 4 === 0 ? "Reorder" : "Available",
      };
    }),
  );
  const [columnDefs, setColumnDefs] = useState<ColDef[]>([
    { field: "item", minWidth: 170 },
    { field: "category", minWidth: 130 },
    { field: "warehouse", minWidth: 120 },
    { field: "quantity" },
    { field: "status" },
  ]);
  const defaultColDef = useMemo<ColDef>(() => {
    return {
      flex: 1,
      minWidth: 100,
    };
  }, []);
  const defaultPdfExportParams = useMemo<PdfExportParams>(() => {
    return {
      documentTitle: "Quarterly Inventory",
      page: {
        size: "A4",
        orientation: "landscape",
        margin: 36,
      },
      repeatHeader: true,
      columnWidth: "auto",
    };
  }, []);

  const onPdfExportOptionsChanged = useCallback(() => {
    gridRef.current!.api.setGridOption(
      "defaultPdfExportParams",
      getPdfExportParams(),
    );
  }, []);

  const onBtExport = useCallback(() => {
    gridRef.current!.api.exportDataAsPdf();
  }, []);

  return (
    <AgGridProvider modules={modules}>
      <div style={containerStyle}>
        <div className="example-wrapper">
          <div className="controls" onChange={onPdfExportOptionsChanged}>
            <button onClick={onBtExport}>Export to PDF</button>
            <label htmlFor="pageSize">Page size</label>
            <select id="pageSize">
              <option value="A4">A4</option>
              <option value="Letter">Letter</option>
              <option value="custom">Custom small page</option>
            </select>
            <label htmlFor="orientation">Orientation</label>
            <select id="orientation">
              <option value="landscape">Landscape</option>
              <option value="portrait">Portrait</option>
            </select>
            <label htmlFor="margin">Margins</label>
            <select id="margin">
              <option value="standard">Standard</option>
              <option value="compact">Compact</option>
              <option value="wide">Wide</option>
            </select>
            <label>
              <input id="repeatHeader" type="checkbox" defaultChecked /> Repeat
              table headers
            </label>
          </div>

          <div style={gridStyle}>
            <AgGridReact<InventoryData>
              ref={gridRef}
              rowData={rowData}
              columnDefs={columnDefs}
              defaultColDef={defaultColDef}
              defaultPdfExportParams={defaultPdfExportParams}
            />
          </div>
        </div>
      </div>
    </AgGridProvider>
  );
};

const root = createRoot(document.getElementById("root")!);
root.render(
  <StrictMode>
    <GridExample />
  </StrictMode>,
);

.example-wrapper {
    display: flex;
    flex-direction: column;
    height: 100%;
}

.controls {
    display: flex;
    flex-wrap: wrap;
    gap: 8px 12px;
    align-items: center;
    margin-bottom: 8px;
}

#myGrid {
    flex: 1 1 0px;
    width: 100%;
}