---
product: "AG Grid"
title: "PDF Export - Rows"
description: "PDF Export includes rows after filtering and sorting by default. Export options can select rows, change their order, omit groups, and control pinned rows."
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: "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: "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 - Rows

PDF Export includes rows after filtering and sorting by default. Export options can select rows, change their order, omit groups, and control pinned rows.

## Export Selected Rows

Set `onlySelected=true` to export selected rows. With pagination, use `onlySelectedAllPages=true` to include selections from every page.

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

## Text Wrapping And Row Height

Cells remain on one line by default. Enable wrapping globally with `defaultCellStyle.wrapText`, per column with `colDef.wrapText`, or per element with `processStyleCallback`.

```jsx
gridApi.exportDataAsPdf({
    defaultCellStyle: {
        wrapText: true,
        maxLines: 3,
    },
});
```

Without a fixed height, rows grow to fit wrapped content and can continue across pages. An explicit `rowHeight` or `headerRowHeight` fixes the available height and clips overflowing text.

Supported `white-space` values returned by `cellStyle` are also translated into wrapping, line-break preservation, and space preservation.

## Row Order

The default `exportedRows='filteredAndSorted'` follows the displayed row order. Use `'all'` to export the original unfiltered and unsorted row set.

```jsx
gridApi.exportDataAsPdf({
    exportedRows: 'all',
});
```

Selection and `shouldRowBeSkipped` can still remove rows from this set.

## Row Groups

Row groups are exported with indentation based on their displayed level. Set `rowGroupIndentSize` to change the indentation, or `skipRowGroups=true` to omit group rows.

```jsx
gridApi.exportDataAsPdf({
    rowGroupIndentSize: 12,
});
```

## Pinned Rows

Pinned top and bottom rows are exported by default. Use `skipPinnedTop` or `skipPinnedBottom` to omit them.

Manually pinned rows can also appear in the body. Set `skipPinnedRowDuplicates=true` to keep only their pinned copies.

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

#### Wrapping, Grouping And Pinning

```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 {
  AutoGroupColumnDef,
  ClientSideRowModelModule,
  ColDef,
  ColGroupDef,
  GridApi,
  GridOptions,
  ModuleRegistry,
  PdfColumnWidthCallback,
  PdfExportParams,
  PinnedRowModule,
  RowAutoHeightModule,
  enableDevValidations,
} from "ag-grid-community";
import {
  ContextMenuModule,
  PdfExportModule,
  RowGroupingModule,
} from "ag-grid-enterprise";

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

const modules = [
  ClientSideRowModelModule,
  PinnedRowModule,
  RowAutoHeightModule,
  RowGroupingModule,
  ContextMenuModule,
  PdfExportModule,
];

interface ProjectData {
  division: string;
  team: string;
  project: string;
  summary: string;
  owner: string;
  budget: number;
}

const columnWidth: PdfColumnWidthCallback = ({ column }) =>
  column?.getColId() === "summary" ? 190 : "auto";

const getPdfExportParams: () => PdfExportParams = () => {
  const includeTop =
    document.querySelector<HTMLInputElement>("#includeTop")!.checked;
  const includeBottom =
    document.querySelector<HTMLInputElement>("#includeBottom")!.checked;
  const limitLines =
    document.querySelector<HTMLInputElement>("#limitLines")!.checked;
  return {
    rowGroupIndentSize: 16,
    skipPinnedTop: !includeTop,
    skipPinnedBottom: !includeBottom,
    defaultCellStyle: {
      maxLines: limitLines ? 2 : undefined,
      overflow: "ellipsis",
    },
    columnWidth,
  };
};

const GridExample = () => {
  const gridRef = useRef<AgGridReact<ProjectData>>(null);
  const containerStyle = useMemo(() => ({ width: "100%", height: "100%" }), []);
  const gridStyle = useMemo(() => ({ height: "100%", width: "100%" }), []);
  const [rowData, setRowData] = useState<ProjectData[]>([
    {
      division: "Product",
      team: "Grid",
      project: "Column Tooling",
      summary: "Improve column workflows.\nAdd keyboard controls.",
      owner: "Ava",
      budget: 185000,
    },
    {
      division: "Product",
      team: "Grid",
      project: "PDF Export",
      summary:
        "Deliver paginated reports with configurable widths, wrapping, styling, and extra content.",
      owner: "Mateo",
      budget: 240000,
    },
    {
      division: "Product",
      team: "Charts",
      project: "Financial Series",
      summary:
        "Add range, volume, and technical-indicator workflows for financial dashboards.",
      owner: "Priya",
      budget: 210000,
    },
    {
      division: "Operations",
      team: "Cloud",
      project: "Regional Hosting",
      summary:
        "Expand regional hosting capacity while keeping deployment and monitoring consistent.",
      owner: "Noah",
      budget: 320000,
    },
    {
      division: "Operations",
      team: "Support",
      project: "Service Portal",
      summary:
        "Consolidate customer requests, service status, and escalation history into one portal.",
      owner: "Mei",
      budget: 145000,
    },
  ]);
  const [columnDefs, setColumnDefs] = useState<ColDef[]>([
    { field: "division", rowGroup: true, hide: true },
    { field: "team", rowGroup: true, hide: true },
    { field: "project", minWidth: 180 },
    { field: "summary", minWidth: 260, wrapText: true, autoHeight: true },
    { field: "owner" },
    {
      field: "budget",
      valueFormatter: (params) => `$${Number(params.value).toLocaleString()}`,
    },
  ]);
  const defaultColDef = useMemo<ColDef>(() => {
    return { flex: 1, minWidth: 110 };
  }, []);
  const autoGroupColumnDef = useMemo<AutoGroupColumnDef>(() => {
    return { headerName: "Portfolio", minWidth: 220 };
  }, []);
  const pinnedTopRowData = useMemo<any[]>(() => {
    return [
      {
        division: "",
        team: "",
        project: "Approved Portfolio",
        summary: "Current approved programme of work",
        owner: "Leadership",
        budget: 1100000,
      },
    ];
  }, []);
  const pinnedBottomRowData = useMemo<any[]>(() => {
    return [
      {
        division: "",
        team: "",
        project: "Contingency",
        summary: "Unallocated portfolio contingency",
        owner: "Finance",
        budget: 125000,
      },
    ];
  }, []);
  const defaultPdfExportParams = useMemo<PdfExportParams>(() => {
    return {
      rowGroupIndentSize: 16,
      defaultCellStyle: {
        overflow: "ellipsis",
      },
      columnWidth,
    };
  }, []);

  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>
              <input id="includeTop" type="checkbox" defaultChecked /> Include
              pinned top
            </label>
            <label>
              <input id="includeBottom" type="checkbox" defaultChecked />{" "}
              Include pinned bottom
            </label>
            <label>
              <input id="limitLines" type="checkbox" /> Limit wrapped text to
              two lines
            </label>
          </div>

          <div style={gridStyle}>
            <AgGridReact<ProjectData>
              ref={gridRef}
              rowData={rowData}
              columnDefs={columnDefs}
              defaultColDef={defaultColDef}
              autoGroupColumnDef={autoGroupColumnDef}
              groupDefaultExpanded={-1}
              pinnedTopRowData={pinnedTopRowData}
              pinnedBottomRowData={pinnedBottomRowData}
              defaultPdfExportParams={defaultPdfExportParams}
            />
          </div>
        </div>
      </div>
    </AgGridProvider>
  );
};

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

[Live example: Wrapping, Grouping And Pinning](https://www.ag-grid.com/examples/pdf-export-rows/pdf-wrapping-grouping-pinning/reactFunctionalTs/)

## Choose Rows Programmatically

Use `rowPositions` to export specific row positions, or `shouldRowBeSkipped` to omit rows conditionally.

```jsx
gridApi.exportDataAsPdf({
    shouldRowBeSkipped: ({ node }) => node.data?.status === 'Archived',
});
```

#### PDF Export - Rows

```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,
  GetRowIdFunc,
  GridApi,
  GridOptions,
  ModuleRegistry,
  PdfExportParams,
  PinnedRowModule,
  RowApiModule,
  RowSelectionModule,
  RowSelectionOptions,
  TextFilterModule,
  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,
  PinnedRowModule,
  RowApiModule,
  RowSelectionModule,
  TextFilterModule,
  ContextMenuModule,
  PdfExportModule,
];

interface ProjectData {
  id: string;
  employee: string;
  team: string;
  country: string;
  status: string;
}

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

const getPdfExportParams: () => PdfExportParams = () => {
  return {
    onlySelected: isChecked("onlySelected"),
    exportedRows: isChecked("allRows") ? "all" : "filteredAndSorted",
    skipPinnedTop: isChecked("skipPinnedTop"),
    skipPinnedBottom: isChecked("skipPinnedBottom"),
    columnWidth: "auto",
  };
};

const GridExample = () => {
  const gridRef = useRef<AgGridReact<ProjectData>>(null);
  const containerStyle = useMemo(() => ({ width: "100%", height: "100%" }), []);
  const gridStyle = useMemo(() => ({ height: "100%", width: "100%" }), []);
  const [rowData, setRowData] = useState<ProjectData[]>([
    {
      id: "p1",
      employee: "Asha Patel",
      team: "Grid",
      country: "United Kingdom",
      status: "Active",
    },
    {
      id: "p2",
      employee: "Marc Dubois",
      team: "Charts",
      country: "France",
      status: "Planning",
    },
    {
      id: "p3",
      employee: "Sofia Rossi",
      team: "Grid",
      country: "Italy",
      status: "Active",
    },
    {
      id: "p4",
      employee: "Noah Williams",
      team: "Cloud",
      country: "United States",
      status: "Planning",
    },
    {
      id: "p5",
      employee: "Mei Chen",
      team: "Support",
      country: "Singapore",
      status: "Active",
    },
    {
      id: "p6",
      employee: "Lucas Silva",
      team: "Grid",
      country: "Brazil",
      status: "Archived",
    },
  ]);
  const [columnDefs, setColumnDefs] = useState<ColDef[]>([
    { field: "employee", minWidth: 170 },
    { field: "team" },
    { field: "country", minWidth: 150 },
    { field: "status" },
  ]);
  const defaultColDef = useMemo<ColDef>(() => {
    return {
      flex: 1,
      minWidth: 110,
      filter: true,
    };
  }, []);
  const getRowId = useCallback((params) => params.data.id, []);
  const rowSelection = useMemo<
    RowSelectionOptions | "single" | "multiple"
  >(() => {
    return {
      mode: "multiRow",
      headerCheckbox: false,
    };
  }, []);
  const pinnedTopRowData = useMemo<any[]>(() => {
    return [
      {
        id: "top",
        employee: "Quarterly Plan",
        team: "All Teams",
        country: "Global",
        status: "Summary",
      },
    ];
  }, []);
  const pinnedBottomRowData = useMemo<any[]>(() => {
    return [
      {
        id: "bottom",
        employee: "Project Total",
        team: "4 Teams",
        country: "6 Countries",
        status: "Summary",
      },
    ];
  }, []);
  const defaultPdfExportParams = useMemo<PdfExportParams>(() => {
    return {
      columnWidth: "auto",
    };
  }, []);

  const onFirstDataRendered = useCallback(() => {
    gridRef.current!.api.getRowNode("p1")?.setSelected(true);
    gridRef.current!.api.getRowNode("p3")?.setSelected(true);
  }, []);

  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>
              <input id="onlySelected" type="checkbox" /> Selected rows only
            </label>
            <label>
              <input id="allRows" type="checkbox" /> Ignore filtering and
              sorting
            </label>
            <label>
              <input id="skipPinnedTop" type="checkbox" /> Skip pinned top
            </label>
            <label>
              <input id="skipPinnedBottom" type="checkbox" /> Skip pinned bottom
            </label>
          </div>

          <div style={gridStyle}>
            <AgGridReact<ProjectData>
              ref={gridRef}
              rowData={rowData}
              columnDefs={columnDefs}
              defaultColDef={defaultColDef}
              getRowId={getRowId}
              rowSelection={rowSelection}
              pinnedTopRowData={pinnedTopRowData}
              pinnedBottomRowData={pinnedBottomRowData}
              defaultPdfExportParams={defaultPdfExportParams}
              onFirstDataRendered={onFirstDataRendered}
            />
          </div>
        </div>
      </div>
    </AgGridProvider>
  );
};

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

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

## API

### Export Options

See below the functions on the `PdfExportParams` interface to customise exported grid values.

| Property | Type | Required | Default | Description |
| --- | --- | --- | --- | --- |
| `defaultCellStyle` | `PdfCellStyle` |  |  |  |
| `rowGroupIndentSize` | `number` |  |  |  |
| `rowHeight` | `number` |  |  |  |
| `headerRowHeight` | `number` |  |  |  |
| `rowPositions` | `RowPosition[]` |  |  |  |
| `exportedRows` | `'all' \| 'filteredAndSorted'` |  |  |  |
| `onlySelected` | `boolean` |  |  |  |
| `onlySelectedAllPages` | `boolean` |  |  |  |
| `skipRowGroups` | `boolean` |  |  |  |
| `skipPinnedTop` | `boolean` |  |  |  |
| `skipPinnedBottom` | `boolean` |  |  |  |
| `skipPinnedRowDuplicates` | `boolean` |  |  |  |
| `shouldRowBeSkipped` | `Function` |  |  |  |

### ShouldRowBeSkippedParams

Properties available on the `ShouldRowBeSkippedParams&lt;TData = any, TContext = any&gt;` interface.

| Property | Type | Required | Default | Description |
| --- | --- | --- | --- | --- |
| `node` | `IRowNode` |  |  |  |
| `api` | `GridApi` |  |  |  |
| `context` | `TContext` |  |  |  |

### RowPosition

Properties available on the `RowPosition` interface.

| Property | Type | Required | Default | Description |
| --- | --- | --- | --- | --- |
| `rowIndex` | `number` |  |  |  |
| `rowPinned` | `RowPinnedType` |  |  |  |