---
product: "AG Grid"
title: "PDF Export - Columns"
description: "PDF Export includes the currently displayed columns in their displayed order by default. Export parameters can include hidden columns, choose a specific column set, suppress headers, or include the Row Numbers column."
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: "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: "Page Setup"
      url: "https://www.ag-grid.com/react-data-grid/pdf-export-page-setup/"
    - 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 - Columns

PDF Export includes the currently displayed columns in their displayed order by default. Export parameters can include hidden columns, choose a specific column set, suppress headers, or include the Row Numbers column.

## Column Headers

Column headers and column-group headers are exported by default. Set `skipColumnHeaders=true` or `skipColumnGroupHeaders=true` to omit the corresponding header rows.

```jsx
gridApi.exportDataAsPdf({
    skipColumnHeaders: false,
    skipColumnGroupHeaders: true,
});
```

When headers are included, `processHeaderCallback` and `processGroupHeaderCallback` can customise their exported text.

## Hidden And Specific Columns

Hidden columns are omitted by default. Set `allColumns=true` to export every primary column in `columnDefs` order, including hidden columns.

```jsx
gridApi.exportDataAsPdf({
    allColumns: true,
});
```

Use `columnKeys` when only a specific set of columns should be exported. The supplied column keys or Column objects also determine their export order.

```jsx
gridApi.exportDataAsPdf({
    columnKeys: ['customer', 'product', 'total'],
});
```

When pivot mode is active, PDF Export uses the currently displayed pivot result columns. Hidden or collapsed pivot result columns are not added by `allColumns`.

## Column Groups

Displayed column-group headers are rendered as PDF header rows. A PDF cannot contain interactive collapsible column groups, so exported groups are a static representation of the selected columns.

Columns hidden by a closed grid group are omitted by default. Use `allColumns=true` to include every primary column, or use `columnKeys` for precise control over the exported column set.

## Row Numbers

The Row Numbers column is not exported by default, even when it is displayed in the grid. Set `exportRowNumbers=true` to include it.

```jsx
gridApi.exportDataAsPdf({
    exportRowNumbers: true,
});
```

When `columnWidth` is omitted, the exported Row Numbers column is sized automatically from its contents. A global or per-column `columnWidth` configuration can override this behaviour.

The example below demonstrates header suppression, visible or hidden column selection, and Row Numbers export.

#### PDF Export - Columns

```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,
  RowNumbersOptions,
  enableDevValidations,
} from "ag-grid-community";
import {
  ContextMenuModule,
  PdfExportModule,
  RowNumbersModule,
} from "ag-grid-enterprise";

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

const modules = [
  ClientSideRowModelModule,
  ContextMenuModule,
  RowNumbersModule,
  PdfExportModule,
];

interface OrderData {
  customer: string;
  country: string;
  product: string;
  quantity: number;
  total: number;
  internalReference: string;
}

const isChecked: (id: string) => boolean = (id: string) => {
  return document.querySelector<HTMLInputElement>(`#${id}`)!.checked;
};

const getPdfExportParams: () => PdfExportParams = () => {
  const columnSet =
    document.querySelector<HTMLSelectElement>("#columnSet")!.value;
  const params: PdfExportParams = {
    skipColumnGroupHeaders: isChecked("skipColumnGroupHeaders"),
    skipColumnHeaders: isChecked("skipColumnHeaders"),
    exportRowNumbers: isChecked("exportRowNumbers"),
    columnWidth: "auto",
  };
  if (columnSet === "all") {
    params.allColumns = true;
  } else if (columnSet === "specific") {
    params.columnKeys = ["customer", "product", "total"];
  }
  return params;
};

const GridExample = () => {
  const gridRef = useRef<AgGridReact<OrderData>>(null);
  const containerStyle = useMemo(() => ({ width: "100%", height: "100%" }), []);
  const gridStyle = useMemo(() => ({ height: "100%", width: "100%" }), []);
  const [rowData, setRowData] = useState<OrderData[]>([
    {
      customer: "Atlas Design",
      country: "United Kingdom",
      product: "Mechanical Keyboard",
      quantity: 12,
      total: 1794,
      internalReference: "Priority account",
    },
    {
      customer: "Northstar Labs",
      country: "United States",
      product: "USB-C Dock",
      quantity: 8,
      total: 1752,
      internalReference: "Renewal due",
    },
    {
      customer: "Horizon Studio",
      country: "Australia",
      product: "Studio Monitor",
      quantity: 6,
      total: 4134,
      internalReference: "New customer",
    },
  ]);
  const [columnDefs, setColumnDefs] = useState<(ColDef | ColGroupDef)[]>([
    {
      headerName: "Customer Details",
      children: [
        { field: "customer", minWidth: 160 },
        { field: "country", minWidth: 140 },
      ],
    },
    {
      headerName: "Order Details",
      children: [
        { field: "product", minWidth: 180 },
        { field: "quantity" },
        { field: "total", valueFormatter: (params) => `$${params.value}` },
      ],
    },
    {
      field: "internalReference",
      headerName: "Internal Reference",
      hide: true,
    },
  ]);
  const defaultColDef = useMemo<ColDef>(() => {
    return {
      flex: 1,
      minWidth: 100,
    };
  }, []);
  const defaultPdfExportParams = useMemo<PdfExportParams>(() => {
    return {
      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="columnSet">Columns</label>
            <select id="columnSet">
              <option value="visible">Visible</option>
              <option value="all">All, including hidden</option>
              <option value="specific">Customer, Product and Total</option>
            </select>
            <label>
              <input id="skipColumnGroupHeaders" type="checkbox" /> Skip group
              headers
            </label>
            <label>
              <input id="skipColumnHeaders" type="checkbox" /> Skip headers
            </label>
            <label>
              <input id="exportRowNumbers" type="checkbox" /> Export row numbers
            </label>
          </div>

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

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

[Live example: PDF Export - Columns](https://www.ag-grid.com/examples/pdf-export-columns/pdf-export-columns/reactFunctionalTs/)

## Column Widths

The `columnWidth` option accepts:

- `'grid'` to use the current column width in the grid.
- `'auto'` to size each column to fit its contents.
- A number to use a fixed width in points.
- A callback to return a custom value for each column.

When `columnWidth` is omitted, regular columns use `'grid'` and the Row Numbers column uses `'auto'`. A `columnWidth` value overrides those defaults; a callback result overrides the default for that column. Returning `null` or `undefined` from the callback uses the column's default mode.

Auto widths are measured before page scaling. If the combined widths exceed the printable page width, every column is reduced proportionally. Smaller tables are not stretched. Horizontal pagination and automatically expanding the page size are not supported.

PDF layout dimensions use points, where 72 points equal one inch.

#### Widths And Autosizing

```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,
  ROW_NUMBERS_COLUMN_ID,
  RowNumbersOptions,
  enableDevValidations,
} from "ag-grid-community";
import {
  ContextMenuModule,
  PdfExportModule,
  RowNumbersModule,
} from "ag-grid-enterprise";

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

const modules = [
  ClientSideRowModelModule,
  ContextMenuModule,
  RowNumbersModule,
  PdfExportModule,
];

interface ProductData {
  sku: string;
  product: string;
  description: string;
  units: number;
  unitPrice: number;
}

const getPdfExportParams: () => PdfExportParams = () => {
  const widthMode =
    document.querySelector<HTMLSelectElement>("#widthMode")!.value;
  const params: PdfExportParams = { exportRowNumbers: true };
  if (widthMode === "custom") {
    params.columnWidth = ({ column }) => {
      const columnId = column?.getColId();
      if (columnId === ROW_NUMBERS_COLUMN_ID) {
        return "auto";
      }
      if (columnId === "description") {
        return 220;
      }
      if (columnId === "sku" || columnId === "units") {
        return 70;
      }
      return "auto";
    };
  } else {
    params.columnWidth = widthMode === "grid" ? "grid" : "auto";
  }
  return params;
};

const GridExample = () => {
  const gridRef = useRef<AgGridReact<ProductData>>(null);
  const containerStyle = useMemo(() => ({ width: "100%", height: "100%" }), []);
  const gridStyle = useMemo(() => ({ height: "100%", width: "100%" }), []);
  const [rowData, setRowData] = useState<ProductData[]>([
    {
      sku: "KB-104",
      product: "Mechanical Keyboard",
      description:
        "Low-profile wireless keyboard with hot-swappable switches and multi-device pairing.",
      units: 128,
      unitPrice: 149.5,
    },
    {
      sku: "DS-220",
      product: "USB-C Dock",
      description:
        "Twelve-port desktop dock supporting dual displays, Ethernet, audio, and power delivery.",
      units: 76,
      unitPrice: 219,
    },
    {
      sku: "MN-340",
      product: "Studio Monitor",
      description:
        "Colour-accurate 27-inch display intended for design, photography, and video workflows.",
      units: 42,
      unitPrice: 689,
    },
  ]);
  const [columnDefs, setColumnDefs] = useState<ColDef[]>([
    { field: "sku", width: 100 },
    { field: "product", width: 180 },
    { field: "description", minWidth: 260 },
    { field: "units", width: 100 },
    {
      field: "unitPrice",
      headerName: "Unit Price",
      width: 120,
      valueFormatter: (p) => `$${p.value}`,
    },
  ]);
  const defaultColDef = useMemo<ColDef>(() => {
    return { resizable: true };
  }, []);
  const defaultPdfExportParams = useMemo<PdfExportParams>(() => {
    return {
      exportRowNumbers: true,
      columnWidth: "grid",
    };
  }, []);

  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="widthMode">Column widths</label>
            <select id="widthMode">
              <option value="grid">Grid</option>
              <option value="auto">Auto</option>
              <option value="custom">Custom</option>
            </select>
          </div>

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

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

[Live example: Widths And Autosizing](https://www.ag-grid.com/examples/pdf-export-columns/pdf-widths-autosizing/reactFunctionalTs/)

## API

### Export Options

| Property | Type | Required | Default | Description |
| --- | --- | --- | --- | --- |
| `columnWidth` | `PdfColumnWidth \| PdfColumnWidthCallback` |  |  |  |
| `exportRowNumbers` | `boolean` |  |  |  |
| `allColumns` | `boolean` |  |  |  |
| `columnKeys` | `(string \| Column)[]` |  |  |  |
| `skipColumnGroupHeaders` | `boolean` |  |  |  |
| `skipColumnHeaders` | `boolean` |  |  |  |

### ColumnWidthCallbackParams

Properties available on the `ColumnWidthCallbackParams` interface.

| Property | Type | Required | Default | Description |
| --- | --- | --- | --- | --- |
| `column` | `Column \| null` |  |  |  |
| `index` | `number` |  |  |  |