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 Copy Link
Column headers and column-group headers are exported by default. Set skipColumnHeaders=true or skipColumnGroupHeaders=true to omit the corresponding header rows.
gridApi.exportDataAsPdf({
skipColumnHeaders: false,
skipColumnGroupHeaders: true,
});When headers are included, processHeaderCallback and processGroupHeaderCallback can customise their exported text.
Hidden And Specific Columns Copy Link
Hidden columns are omitted by default. Set allColumns=true to export every primary column in columnDefs order, including hidden columns.
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.
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 Copy Link
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 Copy Link
The Row Numbers column is not exported by default, even when it is displayed in the grid. Set exportRowNumbers=true to include it.
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.
"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>,
);
.example-wrapper {
display: flex;
flex-direction: column;
height: 100%;
}
.controls {
display: flex;
flex-wrap: wrap;
gap: 8px 16px;
align-items: center;
margin-bottom: 8px;
}
#myGrid {
flex: 1 1 0px;
width: 100%;
}
Column Widths Copy Link
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.
"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>,
);
.example-wrapper {
display: flex;
flex-direction: column;
height: 100%;
}
.controls {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 10px;
margin-bottom: 8px;
}
#myGrid {
flex: 1 1 0px;
width: 100%;
}
API Copy Link
Export Options Copy Link
Controls exported column widths. Use auto to size from exported content, grid to use the current column width in the grid, a number for a width in points, or a callback for per-column control. Widths are proportionally reduced when their total exceeds the printable page width. |
Set to true to allow the contents of the Row Numbers column to be exported. |
If true, all columns will be exported in the order they appear in the columnDefs. When false only the columns currently being displayed will be exported. |
Provide a list (an array) of column keys or Column objects if you want to export specific columns.
|
Set to true to exclude header column groups. |
Set to true if you don't want to export column headers. |
ColumnWidthCallbackParams Copy Link
Properties available on the ColumnWidthCallbackParams interface.
Column | null |
number |