---
product: "AG Grid"
title: "PDF Export - Page Setup"
description: "Configure the PDF page size, orientation, margins, and repeated table headers using the page and repeatHeader export options. Page dimensions and margins use points, where 72 points equal one inch."
enterprise: true
framework: react
version: "36.2.0"
related:
    - title: "Styles"
      url: "https://www.ag-grid.com/react-data-grid/pdf-export-styles/"
    - title: "Languages"
      url: "https://www.ag-grid.com/react-data-grid/pdf-export-languages/"
    - title: "Extra Content"
      url: "https://www.ag-grid.com/react-data-grid/pdf-export-extra-content/"
    - title: "Customising Content"
      url: "https://www.ag-grid.com/react-data-grid/pdf-export-customising-content/"
    - title: "Images"
      url: "https://www.ag-grid.com/react-data-grid/pdf-export-images/"
    - title: "Watermarks"
      url: "https://www.ag-grid.com/react-data-grid/pdf-export-watermarks/"
    - title: "Rows"
      url: "https://www.ag-grid.com/react-data-grid/pdf-export-rows/"
    - title: "Columns"
      url: "https://www.ag-grid.com/react-data-grid/pdf-export-columns/"
    - title: "Hyperlinks"
      url: "https://www.ag-grid.com/react-data-grid/pdf-export-hyperlinks/"
    - title: "Master Detail"
      url: "https://www.ag-grid.com/react-data-grid/pdf-export-master-detail/"
    - title: "API Reference"
      url: "https://www.ag-grid.com/react-data-grid/pdf-export-api/"
llms: "https://www.ag-grid.com/llms.txt"
---

# PDF Export - Page Setup

Configure the PDF page size, orientation, margins, and repeated table headers using the `page` and `repeatHeader` export options. Page dimensions and margins use points, where 72 points equal one inch.

## Page Size And Orientation

The default page is A4 landscape with a 36-point margin on every side. Use named `A4` or `Letter` page sizes, or provide explicit dimensions. Custom dimensions are normalised to the requested orientation.

```jsx
gridApi.exportDataAsPdf({
    page: {
        size: { width: 720, height: 540 },
        orientation: 'landscape',
        margin: { top: 36, right: 24, bottom: 36, left: 24 },
    },
});
```

For named sizes, changing `orientation` rotates the page dimensions. For custom sizes, the supplied dimensions are normalised so the wider side is used for landscape and the taller side is used for portrait.

## Page Margins

Set `page.margin` to one number for every side, or provide individual `top`, `right`, `bottom`, and `left` values.

```jsx
gridApi.exportDataAsPdf({
    page: {
        margin: 24,
    },
});
```

Margins reduce the printable area available to the document title and table. Exported columns are scaled down proportionally when their combined widths exceed the available width.

## Repeating Table Headers

Table header rows repeat when body rows continue onto another page by default. Set `repeatHeader=false` to render them only on the first page.

A repeated table header is omitted when it cannot fit together with the next row or row fragment. See [PDF Export - Extra Content](https://www.ag-grid.com/react-data-grid/pdf-export-extra-content/#page-headers-and-footers) to configure page headers and footers.

The example below lets you change the page size, orientation, margins, and repeated-header behaviour before exporting.

#### PDF Export - Page Setup

```tsx
"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>,
);
```

[Live example: PDF Export - Page Setup](https://www.ag-grid.com/examples/pdf-export-page-setup/pdf-export-page-setup/reactFunctionalTs/)