---
title: "Excel Export - Page Setup"
enterprise: true
framework: react
version: "36.1.0"
---

# Excel Export - Page Setup

Excel Export allows you to configure the page settings for the exported Excel file.

## Page Setup

You can customise the Excel export page settings such as **page size**, **orientation**, and **margin**, using the `pageSetup` and `margins` configs of the [Excel Export Params](https://www.ag-grid.com/archive/36.1.0/react-data-grid/excel-export-api/#excelexportparams). These settings are visible when printing the exported Excel file or exporting to PDF.

```jsx
const defaultExcelExportParams = useMemo(() => { 
	return {
        pageSetup: {
            orientation: 'Landscape',
            pageSize: 'A3'
        },
        margins: {
            top: 1,
            right: 1,
            bottom: 1,
            left: 1,
            header: 0.5,
            footer: 0.5,
        }
    };
}, []);

<AgGridReact defaultExcelExportParams={defaultExcelExportParams} />
```

> **Warning**
>
> The value of the margins must be provided in `inches`.

Note the following:

- The sample below allow you to configure the page size, orientation and margin values.
- Page size and orientation are stored in the `pageSetup` object.
- Margin values are stored in the `margins` object.

#### Excel Export - Page Setup

```tsx
'use client';
import React, { StrictMode, useCallback, useMemo, useState } from "react";
import { createRoot } from "react-dom/client";

import type { ColDef, GridApi, GridReadyEvent } from "ag-grid-community";
import {
  ClientSideRowModelModule,
  NumberFilterModule,
  TextFilterModule,
  enableDevValidations,
} from "ag-grid-community";
import {
  ColumnMenuModule,
  ContextMenuModule,
  ExcelExportModule,
} from "ag-grid-enterprise";
import { AgGridProvider, AgGridReact } from "ag-grid-react";

import type { IOlympicData } from "./interfaces";
import "./styles.css";

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

const modules = [
  TextFilterModule,
  NumberFilterModule,
  ClientSideRowModelModule,
  ColumnMenuModule,
  ContextMenuModule,
  ExcelExportModule,
];

function getNumber(id: string) {
  const el = document.querySelector(id) as any;
  if (!el || isNaN(el.value)) {
    return 0;
  }
  return parseFloat(el.value);
}

function getValue(id: string) {
  return (document.querySelector(id) as any).value;
}

function getSheetConfig() {
  return {
    pageSetup: {
      orientation: getValue("#pageOrientation"),
      pageSize: getValue("#pageSize"),
    },
    margins: {
      top: getNumber("#top"),
      right: getNumber("#right"),
      bottom: getNumber("#bottom"),
      left: getNumber("#left"),
      header: getNumber("#header"),
      footer: getNumber("#footer"),
    },
  };
}

const GridExample = () => {
  const containerStyle = useMemo(() => ({ width: "100%", height: "100%" }), []);
  const gridStyle = useMemo(() => ({ height: "100%", width: "100%" }), []);
  const [gridApi, setGridApi] = useState<GridApi | null>(null);
  const [rowData, setRowData] = useState<IOlympicData[]>();
  const [columnDefs, setColumnDefs] = useState<ColDef[]>([
    { field: "athlete", minWidth: 200 },
    { field: "country", minWidth: 200 },
    { field: "sport", minWidth: 150 },
    { field: "gold" },
    { field: "silver" },
    { field: "bronze" },
    { field: "total" },
  ]);
  const defaultColDef = useMemo<ColDef>(() => {
    return {
      filter: true,
      minWidth: 100,
      flex: 1,
    };
  }, []);

  const onFormSubmit = useCallback(
    (e: React.FormEvent<HTMLFormElement>) => {
      e.preventDefault();
      const { pageSetup, margins } = getSheetConfig();
      gridApi!.exportDataAsExcel({ pageSetup, margins });
    },
    [gridApi],
  );

  const popupParent = useMemo<HTMLElement | null>(() => {
    return document.body;
  }, []);
  const onGridReady = useCallback((params: GridReadyEvent) => {
    setGridApi(params.api);
    fetch("https://www.ag-grid.com/example-assets/small-olympic-winners.json")
      .then((resp) => resp.json())
      .then((data: IOlympicData[]) =>
        setRowData(data.filter((rec: any) => rec.country != null)),
      );
  }, []);

  return (
    <AgGridProvider modules={modules}>
      <div style={containerStyle}>
        <div className="container">
          <form
            onSubmit={(e: React.FormEvent<HTMLFormElement>) => onFormSubmit(e)}
          >
            <div className="columns">
              <div className="column">
                <label className="option" htmlFor="pageOrientation">
                  Page Orientation =
                  <select id="pageOrientation">
                    <option value="Portrait">Portrait</option>
                    <option value="Landscape">Landscape</option>
                  </select>
                </label>
                <label className="option" htmlFor="pageSize">
                  Page Size =
                  <select id="pageSize">
                    <option value="Letter">Letter</option>
                    <option value="Letter Small">Letter Small</option>
                    <option value="Tabloid">Tabloid</option>
                    <option value="Ledger">Ledger</option>
                    <option value="Legal">Legal</option>
                    <option value="Statement">Statement</option>
                    <option value="Executive">Executive</option>
                    <option value="A3">A3</option>
                    <option value="A4">A4</option>
                    <option value="A4 Small">A4 Small</option>
                    <option value="A5">A5</option>
                    <option value="A6">A6</option>
                    <option value="B4">B4</option>
                    <option value="B5">B5</option>
                    <option value="Folio">Folio</option>
                    <option value="Envelope">Envelope</option>
                    <option value="Envelope DL">Envelope DL</option>
                    <option value="Envelope C5">Envelope C5</option>
                    <option value="Envelope B5">Envelope B5</option>
                    <option value="Envelope C3">Envelope C3</option>
                    <option value="Envelope C4">Envelope C4</option>
                    <option value="Envelope C6">Envelope C6</option>
                    <option value="Envelope Monarch">Envelope Monarch</option>
                    <option value="Japanese Postcard">Japanese Postcard</option>
                    <option value="Japanese Double Postcard">
                      Japanese Double Postcard
                    </option>
                  </select>
                </label>
              </div>
              <fieldset className="column margin-container">
                <legend>Margins</legend>
                <label htmlFor="top">
                  Top ={" "}
                  <input
                    type="number"
                    id="top"
                    defaultValue="0.75"
                    min="0"
                    step="0.05"
                  />
                </label>
                <label htmlFor="right">
                  Right ={" "}
                  <input
                    type="number"
                    id="right"
                    defaultValue="0.7"
                    min="0"
                    step="0.05"
                  />
                </label>
                <label htmlFor="bottom">
                  Bottom ={" "}
                  <input
                    type="number"
                    id="bottom"
                    defaultValue="0.75"
                    min="0"
                    step="0.05"
                  />
                </label>
                <label htmlFor="left">
                  Left ={" "}
                  <input
                    type="number"
                    id="left"
                    defaultValue="0.7"
                    min="0"
                    step="0.05"
                  />
                </label>
                <label htmlFor="header">
                  Header ={" "}
                  <input
                    type="number"
                    id="header"
                    defaultValue="0.3"
                    min="0"
                    step="0.05"
                  />
                </label>
                <label htmlFor="footer">
                  Footer ={" "}
                  <input
                    type="number"
                    id="footer"
                    defaultValue="0.3"
                    min="0"
                    step="0.05"
                  />
                </label>
              </fieldset>
            </div>
            <div>
              <input
                type="submit"
                style={{ margin: "5px 0px", fontWeight: "bold" }}
                value="Export to Excel"
              />
            </div>
          </form>
          <div className="grid-wrapper">
            <div style={gridStyle}>
              <AgGridReact<IOlympicData>
                rowData={rowData}
                columnDefs={columnDefs}
                defaultColDef={defaultColDef}
                popupParent={popupParent}
                onGridReady={onGridReady}
              />
            </div>
          </div>
        </div>
      </div>
    </AgGridProvider>
  );
};

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

[Live example: Excel Export - Page Setup](https://www.ag-grid.com/archive/36.1.0/examples/excel-export-page-setup/excel-export-page-setup/reactFunctionalTs)

## Interfaces

### ExcelExportParams

```ts
interface ExcelExportParams {
    // ...
    margins?: ExcelSheetMargin;
    pageSetup?: ExcelSheetPageSetup
}
```

### ExcelSheetMargin

Properties available on the `ExcelSheetMargin` interface.

| Property | Type | Required | Default | Description |
| --- | --- | --- | --- | --- |
| `top` | `number` |  | `0.75` | The sheet top margin. |
| `right` | `number` |  | `0.7` | The sheet right margin. |
| `bottom` | `number` |  | `0.75` | The sheet bottom margin. |
| `left` | `number` |  | `0.7` | The sheet left margin. |
| `header` | `number` |  | `0.3` | The sheet header margin. |
| `footer` | `number` |  | `0.3` | The sheet footer margin. |

### ExcelSheetPageSetup

Properties available on the `ExcelSheetPageSetup` interface.

| Property | Type | Required | Default | Description |
| --- | --- | --- | --- | --- |
| `orientation` | `'Portrait' \| 'Landscape'` |  | `'Portrait'` | Use this property to change the print orientation. |
| `pageSize` | `\| 'Letter'         \| 'Letter Small'         \| 'Tabloid'         \| 'Ledger'         \| 'Legal'         \| 'Statement'         \| 'Executive'         \| 'A3'         \| 'A4'         \| 'A4 Small'         \| 'A5'         \| 'A6'         \| 'B4'         \| 'B5'         \| 'Folio'         \| 'Envelope'         \| 'Envelope DL'         \| 'Envelope C5'         \| 'Envelope B5'         \| 'Envelope C3'         \| 'Envelope C4'         \| 'Envelope C6'         \| 'Envelope Monarch'         \| 'Japanese Postcard'         \| 'Japanese Double Postcard'` |  | `'Letter'` | Use this property to set the sheet size. |