PDF Export uses Value Getters and, by default, Value Formatters. Export callbacks can replace the resulting text without changing the values displayed in the grid.
Customising Cell and Row Group Values Copy Link
Use processCellCallback and processRowGroupCallback in defaultPdfExportParams to customise exported body cells and row groups.
const processCellCallback = (params) => `_${params.value ?? ''}_`;
const processRowGroupCallback = (params) => `row group: ${params.node.key ?? ''}`;
<AgGridReact
processCellCallback={processCellCallback}
processRowGroupCallback={processRowGroupCallback}
/>See below the functions on the PdfExportParams interface to customise exported grid cell and row group values.
A callback function invoked once per cell in the grid. Return a string value to be displayed in the export. For example this is useful for formatting date values.
|
A callback function invoked once per row group. Return a string to be displayed in the group cell.
|
The following example adds the prefix row group: to row-group values and surrounds body-cell values with underscores in the exported PDF.
"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,
ProcessCellForExportParams,
ProcessRowGroupForExportParams,
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,
ContextMenuModule,
PdfExportModule,
RowGroupingModule,
];
interface ResultData {
athlete: string;
country: string;
sport: string;
gold: number;
}
const GridExample = () => {
const gridRef = useRef<AgGridReact<ResultData>>(null);
const containerStyle = useMemo(() => ({ width: "100%", height: "100%" }), []);
const gridStyle = useMemo(() => ({ height: "100%", width: "100%" }), []);
const [rowData, setRowData] = useState<ResultData[]>([
{
athlete: "Asha Patel",
country: "United Kingdom",
sport: "Rowing",
gold: 2,
},
{
athlete: "Noah Williams",
country: "United Kingdom",
sport: "Cycling",
gold: 1,
},
{ athlete: "Sofia Rossi", country: "Italy", sport: "Swimming", gold: 3 },
{ athlete: "Marco Bianchi", country: "Italy", sport: "Fencing", gold: 1 },
]);
const [columnDefs, setColumnDefs] = useState<ColDef[]>([
{ field: "athlete", minWidth: 180 },
{ field: "country", rowGroup: true, hide: true },
{ field: "sport", minWidth: 140 },
{ field: "gold" },
]);
const defaultColDef = useMemo<ColDef>(() => {
return {
flex: 1,
minWidth: 100,
};
}, []);
const defaultPdfExportParams = useMemo<PdfExportParams>(() => {
return {
processCellCallback(params: ProcessCellForExportParams): string {
return `_${params.value ?? ""}_`;
},
processRowGroupCallback(params: ProcessRowGroupForExportParams): string {
return `row group: ${params.node.key ?? ""}`;
},
};
}, []);
const onBtExport = useCallback(() => {
gridRef.current!.api.exportDataAsPdf();
}, []);
return (
<AgGridProvider modules={modules}>
<div style={containerStyle}>
<div className="example-wrapper">
<button onClick={onBtExport}>Export to PDF</button>
<div style={gridStyle}>
<AgGridReact<ResultData>
ref={gridRef}
rowData={rowData}
columnDefs={columnDefs}
defaultColDef={defaultColDef}
groupDefaultExpanded={-1}
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%;
}
button {
align-self: flex-start;
margin-bottom: 8px;
}
#myGrid {
flex: 1 1 0px;
width: 100%;
}
Customising Column Headers and Group Header Values Copy Link
Use processHeaderCallback and processGroupHeaderCallback to customise exported column headers and column-group headers.
const processHeaderCallback = (params) => `header: ${params.api.getDisplayNameForColumn(params.column, null)}`;
const processGroupHeaderCallback = (params) =>
`group header: ${params.api.getDisplayNameForColumnGroup(params.columnGroup, null)}`;
<AgGridReact
processHeaderCallback={processHeaderCallback}
processGroupHeaderCallback={processGroupHeaderCallback}
/>See below the functions on the PdfExportParams interface to customise exported column group headers and headers.
A callback function invoked once per column. Return a string to be displayed in the column header.
|
A callback function invoked once per column group. Return a string to be displayed in the column group header. Note that column groups are exported by default, this option will not work with skipColumnGroupHeaders=true.
|
The following example prefixes exported headers with header: and exported group headers with group header: .
"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,
ColumnApiModule,
GridApi,
GridOptions,
ModuleRegistry,
PdfExportParams,
ProcessGroupHeaderForExportParams,
ProcessHeaderForExportParams,
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,
ColumnApiModule,
ContextMenuModule,
PdfExportModule,
];
interface ResultData {
athlete: string;
country: string;
gold: number;
silver: number;
}
const GridExample = () => {
const gridRef = useRef<AgGridReact<ResultData>>(null);
const containerStyle = useMemo(() => ({ width: "100%", height: "100%" }), []);
const gridStyle = useMemo(() => ({ height: "100%", width: "100%" }), []);
const [rowData, setRowData] = useState<ResultData[]>([
{ athlete: "Asha Patel", country: "United Kingdom", gold: 2, silver: 1 },
{ athlete: "Sofia Rossi", country: "Italy", gold: 3, silver: 2 },
{ athlete: "Mei Chen", country: "Singapore", gold: 1, silver: 2 },
]);
const [columnDefs, setColumnDefs] = useState<(ColDef | ColGroupDef)[]>([
{
headerName: "Athlete Details",
children: [
{ field: "athlete", minWidth: 180 },
{ field: "country", minWidth: 150 },
],
},
{
headerName: "Medal Results",
children: [{ field: "gold" }, { field: "silver" }],
},
]);
const defaultColDef = useMemo<ColDef>(() => {
return {
flex: 1,
minWidth: 100,
};
}, []);
const defaultPdfExportParams = useMemo<PdfExportParams>(() => {
return {
processHeaderCallback(params: ProcessHeaderForExportParams): string {
return `header: ${params.api.getDisplayNameForColumn(params.column, null)}`;
},
processGroupHeaderCallback(
params: ProcessGroupHeaderForExportParams,
): string {
return `group header: ${params.api.getDisplayNameForColumnGroup(params.columnGroup, null)}`;
},
};
}, []);
const onBtExport = useCallback(() => {
gridRef.current!.api.exportDataAsPdf();
}, []);
return (
<AgGridProvider modules={modules}>
<div style={containerStyle}>
<div className="example-wrapper">
<button onClick={onBtExport}>Export to PDF</button>
<div style={gridStyle}>
<AgGridReact<ResultData>
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>,
);
.example-wrapper {
display: flex;
flex-direction: column;
height: 100%;
}
button {
align-self: flex-start;
margin-bottom: 8px;
}
#myGrid {
flex: 1 1 0px;
width: 100%;
}
These callbacks return text. To style the processed result, use processStyleCallback; its value is the final exported string.