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 gridOptions = {
processCellCallback: (params) => `_${params.value ?? ''}_`,
processRowGroupCallback: (params) => `row group: ${params.node.key ?? ''}`,
// other grid options ...
}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.
import {
ClientSideRowModelModule,
GridApi,
GridOptions,
ModuleRegistry,
ProcessCellForExportParams,
ProcessRowGroupForExportParams,
createGrid,
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();
}
ModuleRegistry.registerModules([
ClientSideRowModelModule,
ContextMenuModule,
PdfExportModule,
RowGroupingModule,
]);
interface ResultData {
athlete: string;
country: string;
sport: string;
gold: number;
}
let gridApi: GridApi<ResultData>;
const gridOptions: GridOptions<ResultData> = {
columnDefs: [
{ field: "athlete", minWidth: 180 },
{ field: "country", rowGroup: true, hide: true },
{ field: "sport", minWidth: 140 },
{ field: "gold" },
],
defaultColDef: {
flex: 1,
minWidth: 100,
},
groupDefaultExpanded: -1,
defaultPdfExportParams: {
processCellCallback(params: ProcessCellForExportParams): string {
return `_${params.value ?? ""}_`;
},
processRowGroupCallback(params: ProcessRowGroupForExportParams): string {
return `row group: ${params.node.key ?? ""}`;
},
},
rowData: [
{
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 },
],
};
function onBtExport() {
gridApi.exportDataAsPdf();
}
gridApi = createGrid(
document.querySelector<HTMLElement>("#myGrid")!,
gridOptions,
);
if (typeof window !== "undefined") {
// Attach external event handlers to window so they can be called from index.html
(<any>window).onBtExport = onBtExport;
}
.example-wrapper {
display: flex;
flex-direction: column;
height: 100%;
}
button {
align-self: flex-start;
margin-bottom: 8px;
}
#myGrid {
flex: 1 1 0px;
width: 100%;
}
<div class="example-wrapper">
<button onclick="onBtExport()">Export to PDF</button>
<div id="myGrid"></div>
</div>
Customising Column Headers and Group Header Values Copy Link
Use processHeaderCallback and processGroupHeaderCallback to customise exported column headers and column-group headers.
const gridOptions = {
processHeaderCallback: (params) => `header: ${params.api.getDisplayNameForColumn(params.column, null)}`,
processGroupHeaderCallback: (params) =>
`group header: ${params.api.getDisplayNameForColumnGroup(params.columnGroup, null)}`,
// other grid options ...
}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: .
import {
ClientSideRowModelModule,
ColumnApiModule,
GridApi,
GridOptions,
ModuleRegistry,
ProcessGroupHeaderForExportParams,
ProcessHeaderForExportParams,
createGrid,
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();
}
ModuleRegistry.registerModules([
ClientSideRowModelModule,
ColumnApiModule,
ContextMenuModule,
PdfExportModule,
]);
interface ResultData {
athlete: string;
country: string;
gold: number;
silver: number;
}
let gridApi: GridApi<ResultData>;
const gridOptions: GridOptions<ResultData> = {
columnDefs: [
{
headerName: "Athlete Details",
children: [
{ field: "athlete", minWidth: 180 },
{ field: "country", minWidth: 150 },
],
},
{
headerName: "Medal Results",
children: [{ field: "gold" }, { field: "silver" }],
},
],
defaultColDef: {
flex: 1,
minWidth: 100,
},
defaultPdfExportParams: {
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)}`;
},
},
rowData: [
{ 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 },
],
};
function onBtExport() {
gridApi.exportDataAsPdf();
}
gridApi = createGrid(
document.querySelector<HTMLElement>("#myGrid")!,
gridOptions,
);
if (typeof window !== "undefined") {
// Attach external event handlers to window so they can be called from index.html
(<any>window).onBtExport = onBtExport;
}
.example-wrapper {
display: flex;
flex-direction: column;
height: 100%;
}
button {
align-self: flex-start;
margin-bottom: 8px;
}
#myGrid {
flex: 1 1 0px;
width: 100%;
}
<div class="example-wrapper">
<button onclick="onBtExport()">Export to PDF</button>
<div id="myGrid"></div>
</div>
These callbacks return text. To style the processed result, use processStyleCallback; its value is the final exported string.