---
product: "AG Grid"
title: "PDF Export - Styles"
description: "PDF Export uses colours from the active grid theme by default. Use colors to override page, body-row, alternate-row, header, text, and border colours for the exported document."
enterprise: true
framework: javascript
version: "36.2.0"
related:
    - title: "Languages"
      url: "https://www.ag-grid.com/archive/36.2.0/javascript-data-grid/pdf-export-languages/"
    - title: "Extra Content"
      url: "https://www.ag-grid.com/archive/36.2.0/javascript-data-grid/pdf-export-extra-content/"
    - title: "Customising Content"
      url: "https://www.ag-grid.com/archive/36.2.0/javascript-data-grid/pdf-export-customising-content/"
    - title: "Images"
      url: "https://www.ag-grid.com/archive/36.2.0/javascript-data-grid/pdf-export-images/"
    - title: "Watermarks"
      url: "https://www.ag-grid.com/archive/36.2.0/javascript-data-grid/pdf-export-watermarks/"
    - title: "Rows"
      url: "https://www.ag-grid.com/archive/36.2.0/javascript-data-grid/pdf-export-rows/"
    - title: "Columns"
      url: "https://www.ag-grid.com/archive/36.2.0/javascript-data-grid/pdf-export-columns/"
    - title: "Hyperlinks"
      url: "https://www.ag-grid.com/archive/36.2.0/javascript-data-grid/pdf-export-hyperlinks/"
    - title: "Master Detail"
      url: "https://www.ag-grid.com/archive/36.2.0/javascript-data-grid/pdf-export-master-detail/"
    - title: "Page Setup"
      url: "https://www.ag-grid.com/archive/36.2.0/javascript-data-grid/pdf-export-page-setup/"
    - title: "API Reference"
      url: "https://www.ag-grid.com/archive/36.2.0/javascript-data-grid/pdf-export-api/"
llms: "https://www.ag-grid.com/archive/36.2.0/llms.txt"
---

# PDF Export - Styles

PDF Export uses colours from the active grid theme by default. Use `colors` to override page, body-row, alternate-row, header, text, and border colours for the exported document.

```js
const gridOptions = {
    colors: {
        headerBackgroundColor: '#123a5a',
        headerTextColor: '#ffffff',
        oddRowBackgroundColor: '#f3f6f8',
    },

    // other grid options ...
}
```

Export the following example to see the effect of these overrides: the exported PDF uses the configured header and row colours rather than the grid's on-screen theme.

#### PDF Styling

```ts
import {
  ClientSideRowModelModule,
  GridApi,
  GridOptions,
  ModuleRegistry,
  NumberFilterModule,
  TextFilterModule,
  createGrid,
  enableDevValidations,
} from "ag-grid-community";
import {
  ColumnMenuModule,
  ContextMenuModule,
  PdfExportModule,
} from "ag-grid-enterprise";
import { IOlympicData } from "./interfaces";

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

ModuleRegistry.registerModules([
  TextFilterModule,
  NumberFilterModule,
  ClientSideRowModelModule,
  PdfExportModule,
  ColumnMenuModule,
  ContextMenuModule,
]);

let gridApi: GridApi<IOlympicData>;

const gridOptions: GridOptions<IOlympicData> = {
  columnDefs: [
    {
      headerName: "Group A",
      children: [
        { field: "athlete", minWidth: 200 },
        { field: "country", minWidth: 200 },
      ],
    },
    {
      headerName: "Group B",
      children: [
        { field: "sport", minWidth: 150 },
        { field: "gold" },
        { field: "silver" },
        { field: "bronze" },
        { field: "total" },
      ],
    },
  ],
  defaultColDef: {
    filter: true,
    minWidth: 100,
    flex: 1,
  },
  defaultPdfExportParams: {
    colors: {
      headerBackgroundColor: "#e8f1ff",
      headerTextColor: "#123a5a",
      borderColor: "#c3d4ea",
      oddRowBackgroundColor: "#0057af",
    },
  },
};

function onBtExport() {
  gridApi!.exportDataAsPdf();
}

const gridDiv = document.querySelector<HTMLElement>("#myGrid")!;
gridApi = createGrid(gridDiv, gridOptions);

fetch("https://www.ag-grid.com/example-assets/small-olympic-winners.json")
  .then((response) => response.json())
  .then(function (data) {
    gridApi!.setGridOption("rowData", data);
  });

if (typeof window !== "undefined") {
  // Attach external event handlers to window so they can be called from index.html
  (<any>window).onBtExport = onBtExport;
}
```

[Live example: PDF Styling](https://www.ag-grid.com/archive/36.2.0/examples/pdf-export-styles/pdf-styling/typescript/)

## Automatic Grid Styles

PDF Export evaluates supported grid style definitions during serialisation:

1. `rowStyle` and `getRowStyle` are applied to the exported row.
2. `colDef.cellStyle` is applied to each exported body cell.
3. `colDef.headerStyle` is applied to exported header cells.
4. A cell style overrides the row style for properties supplied by both.

```ts
const columnDefs: ColDef[] = [
    {
        field: 'status',
        cellStyle: {
            color: '#b42318',
            fontWeight: 'bold',
        },
    },
];
```

For function-based `cellStyle`, the `value` parameter is the grid's display value before PDF export callbacks process it. This allows existing grid styling logic to continue working when `processCellCallback` changes the exported text.

Only properties represented by `PdfCellStyle` are converted. CSS classes, `cellClass`, `cellClassRules`, arbitrary CSS, and Cell Renderer styles are not exported.

#### Rows And Cells

```ts
import {
  CellStyle,
  CellStyleFunc,
  CellStyleModule,
  ClientSideRowModelModule,
  ColDef,
  GridApi,
  GridOptions,
  GridReadyEvent,
  ModuleRegistry,
  NumberFilterModule,
  RowStyleModule,
  TextFilterModule,
  createGrid,
  enableDevValidations,
} from "ag-grid-community";
import {
  ColumnMenuModule,
  ContextMenuModule,
  PdfExportModule,
} from "ag-grid-enterprise";
import { data } from "./data";
import { IOlympicData } from "./interfaces";

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

ModuleRegistry.registerModules([
  TextFilterModule,
  NumberFilterModule,
  ClientSideRowModelModule,
  CellStyleModule,
  RowStyleModule,
  PdfExportModule,
  ColumnMenuModule,
  ContextMenuModule,
]);

let gridApi: GridApi<IOlympicData>;

const cellStyle: CellStyleFunc = (params) => {
  const total = Number(params.value ?? 0);

  if (total >= 5) {
    return {
      backgroundColor: "#e1f3e8",
      color: "#1b5e20",
      fontWeight: "700",
    } as CellStyle;
  }

  if (total <= 2) {
    return {
      color: "#8b1d1d",
      fontWeight: "700",
    };
  }

  return undefined;
};

const columnDefs: ColDef<IOlympicData>[] = [
  { field: "athlete", minWidth: 220, sort: "asc" },
  { field: "country", minWidth: 180 },
  { field: "sport", minWidth: 140 },
  {
    field: "total",
    headerStyle: () => ({
      backgroundColor: "#dbeafe",
      color: "#0f172a",
      fontWeight: "700",
    }),
    cellStyle,
  },
];

const gridOptions: GridOptions<IOlympicData> = {
  columnDefs,
  defaultColDef: {
    filter: true,
    minWidth: 100,
    flex: 1,
  },
  getRowStyle: (params) =>
    (params.data?.athlete ?? "") === ""
      ? { backgroundColor: "#da4d4d" }
      : undefined,
  onGridReady: (params: GridReadyEvent) => {
    params.api.setGridOption("rowData", data);
  },
};

function onSkipGridStylesChange() {
  const skipGridStyles =
    document.querySelector<HTMLInputElement>("#skipGridStyles")?.checked ??
    false;
  gridApi!.setGridOption("defaultPdfExportParams", { skipGridStyles });
}

function onBtExport() {
  gridApi!.exportDataAsPdf();
}

const gridDiv = document.querySelector<HTMLElement>("#myGrid")!;
gridApi = createGrid(gridDiv, gridOptions);

if (typeof window !== "undefined") {
  // Attach external event handlers to window so they can be called from index.html
  (<any>window).onSkipGridStylesChange = onSkipGridStylesChange;
  (<any>window).onBtExport = onBtExport;
}
```

[Live example: Rows And Cells](https://www.ag-grid.com/archive/36.2.0/examples/pdf-export-styles/pdf-rows-and-cells/typescript/)

Set `skipGridStyles=true` to skip grid style definitions and use only theme defaults, `colors`, and PDF-specific overrides. This also skips `colDef.wrapText` and `colDef.wrapHeaderText` integration.

```js
api.exportDataAsPdf({
    skipGridStyles: true,
});
```

## PDF-Specific Overrides

Use `processStyleCallback` to style exported elements without changing the grid. The callback receives `type: 'row' | 'cell' | 'rowgroup' | 'header' | 'groupheader'` and the final exported text in `value` for cell and header elements.

```js
api.exportDataAsPdf({
    processStyleCallback: ({ type, value }) => {
        return type === 'cell' && value === 'Late' ? { color: '#b42318', fontWeight: 'bold' } : undefined;
    },
});
```

Styles returned by `processStyleCallback` take precedence over automatic grid styles:

1. A `row` result overrides `rowStyle` and `getRowStyle` for that row.
2. A `cell` or `rowgroup` result overrides the resolved row style and `colDef.cellStyle` for that cell.
3. A `header` or `groupheader` result overrides `colDef.headerStyle` for that header.

`processStyleCallback` still runs when `skipGridStyles=true`.

Export the following example to see the callback override the "Late" cells with a red, bold style in the PDF:

#### Rows And Cells Override

```ts
import {
  ClientSideRowModelModule,
  ColDef,
  GridApi,
  GridOptions,
  GridReadyEvent,
  ModuleRegistry,
  NumberFilterModule,
  PdfStyleCallbackParams,
  TextFilterModule,
  createGrid,
  enableDevValidations,
} from "ag-grid-community";
import {
  ColumnMenuModule,
  ContextMenuModule,
  PdfExportModule,
} from "ag-grid-enterprise";
import { data } from "./data";
import { IOlympicData } from "./interfaces";

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

ModuleRegistry.registerModules([
  TextFilterModule,
  NumberFilterModule,
  ClientSideRowModelModule,
  PdfExportModule,
  ColumnMenuModule,
  ContextMenuModule,
]);

let gridApi: GridApi<IOlympicData>;

const columnDefs: ColDef<IOlympicData>[] = [
  { field: "athlete", minWidth: 220, sort: "asc" },
  { field: "country", minWidth: 180 },
  { field: "sport", minWidth: 140 },
  { field: "total" },
];

const gridOptions: GridOptions<IOlympicData> = {
  columnDefs,
  defaultColDef: {
    filter: true,
    minWidth: 100,
    flex: 1,
  },
  onGridReady: (params: GridReadyEvent) => {
    params.api.setGridOption("rowData", data);
  },

  defaultPdfExportParams: {
    processStyleCallback: (params: PdfStyleCallbackParams) => {
      if (params.type === "header") {
        return {
          backgroundColor: "#e0f2fe",
          color: "#0c4a6e",
          fontFamily: "Helvetica-Bold",
        };
      }
    },
  },
};

function onBtExport() {
  gridApi!.exportDataAsPdf();
}

const gridDiv = document.querySelector<HTMLElement>("#myGrid")!;
gridApi = createGrid(gridDiv, gridOptions);

if (typeof window !== "undefined") {
  // Attach external event handlers to window so they can be called from index.html
  (<any>window).onBtExport = onBtExport;
}
```

[Live example: Rows And Cells Override](https://www.ag-grid.com/archive/36.2.0/examples/pdf-export-styles/pdf-rows-and-cells-override/typescript/)

## Text And Box Styles

`PdfCellStyle` supports registered TrueType and built-in PDF fonts, font size, weight and style, text direction, text and background colours, borders, padding, alignment, wrapping, explicit line-break preservation, line height, maximum lines, and overflow behaviour. Margin is supported for the document title only. See [Languages](https://www.ag-grid.com/archive/36.2.0/javascript-data-grid/pdf-export-languages/) for custom font registration and Unicode text.

Use `defaultCellStyle` and `defaultHeaderStyle` to configure table-wide typography and box styles. `defaultCellStyle` applies to body cells, including [custom content](https://www.ag-grid.com/archive/36.2.0/javascript-data-grid/pdf-export-extra-content/) rows. Header and group-header cells use `defaultHeaderStyle`, with every unset property inherited from `defaultCellStyle`.

```js
api.exportDataAsPdf({
    defaultCellStyle: {
        fontFamily: 'Times-Roman',
        fontSize: 9,
        padding: 4,
    },
    defaultHeaderStyle: {
        fontSize: 10,
    },
    drawCellBorders: true,
});
```

The cascade is applied separately to each property. For example, if `defaultCellStyle.fontSize` is `9` and `defaultHeaderStyle.fontSize` is not set, both body and header cells use 9pt text. Set the header value explicitly when it should differ.

When neither style sets a font size, body cells use 10pt text and headers use 11pt text. Headers derive a bold face from the resolved body font when no font weight is inherited or set.

## API

### Export Options

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

| Property | Type | Required | Default | Description |
| --- | --- | --- | --- | --- |
| `colors` | `PdfColors` |  |  |  |
| `skipGridStyles` | `boolean` |  |  |  |
| `processStyleCallback` | `Function` |  |  |  |
| `defaultCellStyle` | `PdfCellStyle` |  |  |  |
| `defaultHeaderStyle` | `PdfCellStyle` |  |  |  |
| `drawCellBorders` | `boolean` |  |  |  |

### PdfColors

Properties available on the `PdfColors` interface.

| Property | Type | Required | Default | Description |
| --- | --- | --- | --- | --- |
| `backgroundColor` | `string` |  |  |  |
| `dataBackgroundColor` | `string` |  |  |  |
| `oddRowBackgroundColor` | `string` |  |  |  |
| `foregroundColor` | `string` |  |  |  |
| `headerBackgroundColor` | `string` |  |  |  |
| `headerTextColor` | `string` |  |  |  |
| `borderColor` | `string` |  |  |  |

### PdfCellStyle

Properties available on the `PdfCellStyle` interface.

| Property | Type | Required | Default | Description |
| --- | --- | --- | --- | --- |
| `backgroundColor` | `string` |  |  |  |
| `borderColor` | `string` |  |  |  |
| `borderWidth` | `number` |  |  |  |
| `padding` | `number \| PdfMargin` |  |  |  |
| `alignment` | `PdfTextAlignment` |  |  |  |
| `wrapText` | `boolean` |  |  |  |
| `preserveLineBreaks` | `boolean` |  |  |  |
| `preserveSpaces` | `boolean` |  |  |  |
| `maxLines` | `number` |  |  |  |
| `overflow` | `PdfTextOverflow` |  |  |  |
| `fontSize` | `number` |  |  |  |
| `fontFamily` | `PdfFontFamily` |  |  |  |
| `fontWeight` | `PdfFontWeight` |  |  |  |
| `fontStyle` | `PdfFontStyle` |  |  |  |
| `direction` | `PdfTextDirection` |  |  |  |
| `language` | `string` |  |  |  |
| `color` | `string` |  |  |  |
| `lineHeight` | `number` |  |  |  |