---
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: react
version: "36.2.0"
related:
    - 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: "Rows"
      url: "https://www.ag-grid.com/react-data-grid/pdf-export-rows/"
    - 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 - 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.

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

<AgGridReact colors={colors} />
```

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

```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,
  GridApi,
  GridOptions,
  ModuleRegistry,
  NumberFilterModule,
  PdfExportParams,
  TextFilterModule,
  enableDevValidations,
} from "ag-grid-community";
import {
  ColumnMenuModule,
  ContextMenuModule,
  PdfExportModule,
} from "ag-grid-enterprise";
import { IOlympicData } from "./interfaces";
import { useFetchJson } from "./useFetchJson";

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

const modules = [
  TextFilterModule,
  NumberFilterModule,
  ClientSideRowModelModule,
  PdfExportModule,
  ColumnMenuModule,
  ContextMenuModule,
];

const GridExample = () => {
  const gridRef = useRef<AgGridReact<IOlympicData>>(null);
  const containerStyle = useMemo(() => ({ width: "100%", height: "100%" }), []);
  const gridStyle = useMemo(() => ({ height: "100%", width: "100%" }), []);

  const [columnDefs, setColumnDefs] = useState<(ColDef | ColGroupDef)[]>([
    {
      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" },
      ],
    },
  ]);
  const defaultColDef = useMemo<ColDef>(() => {
    return {
      filter: true,
      minWidth: 100,
      flex: 1,
    };
  }, []);
  const defaultPdfExportParams = useMemo<PdfExportParams>(() => {
    return {
      colors: {
        headerBackgroundColor: "#e8f1ff",
        headerTextColor: "#123a5a",
        borderColor: "#c3d4ea",
        oddRowBackgroundColor: "#0057af",
      },
    };
  }, []);

  const { data, loading } = useFetchJson<IOlympicData>(
    "https://www.ag-grid.com/example-assets/small-olympic-winners.json",
  );

  const onBtExport = useCallback(() => {
    gridRef.current!.api.exportDataAsPdf();
  }, []);

  return (
    <AgGridProvider modules={modules}>
      <div style={containerStyle}>
        <div className="container">
          <div>
            <button
              onClick={onBtExport}
              style={{ marginBottom: "5px", fontWeight: "bold" }}
            >
              Export PDF
            </button>
          </div>
          <div className="grid-wrapper">
            <div style={gridStyle}>
              <AgGridReact<IOlympicData>
                ref={gridRef}
                rowData={data}
                loading={loading}
                columnDefs={columnDefs}
                defaultColDef={defaultColDef}
                defaultPdfExportParams={defaultPdfExportParams}
              />
            </div>
          </div>
        </div>
      </div>
    </AgGridProvider>
  );
};

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

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

## 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

```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 {
  CellStyle,
  CellStyleFunc,
  CellStyleModule,
  ClientSideRowModelModule,
  ColDef,
  ColGroupDef,
  GetRowStyle,
  GridApi,
  GridOptions,
  GridReadyEvent,
  ModuleRegistry,
  NumberFilterModule,
  RowStyleModule,
  TextFilterModule,
  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();
}

const modules = [
  TextFilterModule,
  NumberFilterModule,
  ClientSideRowModelModule,
  CellStyleModule,
  RowStyleModule,
  PdfExportModule,
  ColumnMenuModule,
  ContextMenuModule,
];

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 GridExample = () => {
  const gridRef = useRef<AgGridReact<IOlympicData>>(null);
  const containerStyle = useMemo(() => ({ width: "100%", height: "100%" }), []);
  const gridStyle = useMemo(() => ({ height: "100%", width: "100%" }), []);
  const [rowData, setRowData] = useState<IOlympicData[]>();
  const [columnDefs, setColumnDefs] = useState<ColDef[]>([
    { 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 defaultColDef = useMemo<ColDef>(() => {
    return {
      filter: true,
      minWidth: 100,
      flex: 1,
    };
  }, []);
  const getRowStyle = useCallback(
    (params) =>
      (params.data?.athlete ?? "") === ""
        ? { backgroundColor: "#da4d4d" }
        : undefined,
    [],
  );

  const onGridReady = useCallback((params: GridReadyEvent) => {
    setRowData(data);
  }, []);

  const onSkipGridStylesChange = useCallback(() => {
    const skipGridStyles =
      document.querySelector<HTMLInputElement>("#skipGridStyles")?.checked ??
      false;
    gridRef.current!.api.setGridOption("defaultPdfExportParams", {
      skipGridStyles,
    });
  }, []);

  const onBtExport = useCallback(() => {
    gridRef.current!.api.exportDataAsPdf();
  }, []);

  return (
    <AgGridProvider modules={modules}>
      <div style={containerStyle}>
        <div className="container">
          <div>
            <button
              onClick={onBtExport}
              style={{ marginBottom: "5px", fontWeight: "bold" }}
            >
              Export PDF
            </button>
            <label
              className="option"
              htmlFor="skipGridStyles"
              onChange={onSkipGridStylesChange}
            >
              <input id="skipGridStyles" type="checkbox" />
              Skip Grid Styles
            </label>
          </div>
          <div className="grid-wrapper">
            <div style={gridStyle}>
              <AgGridReact<IOlympicData>
                ref={gridRef}
                rowData={rowData}
                columnDefs={columnDefs}
                defaultColDef={defaultColDef}
                getRowStyle={getRowStyle}
                onGridReady={onGridReady}
              />
            </div>
          </div>
        </div>
      </div>
    </AgGridProvider>
  );
};

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

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

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.

```jsx
gridApi.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.

```jsx
gridApi.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

```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,
  GridApi,
  GridOptions,
  GridReadyEvent,
  ModuleRegistry,
  NumberFilterModule,
  PdfExportParams,
  PdfStyleCallbackParams,
  TextFilterModule,
  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();
}

const modules = [
  TextFilterModule,
  NumberFilterModule,
  ClientSideRowModelModule,
  PdfExportModule,
  ColumnMenuModule,
  ContextMenuModule,
];

const GridExample = () => {
  const gridRef = useRef<AgGridReact<IOlympicData>>(null);
  const containerStyle = useMemo(() => ({ width: "100%", height: "100%" }), []);
  const gridStyle = useMemo(() => ({ height: "100%", width: "100%" }), []);
  const [rowData, setRowData] = useState<IOlympicData[]>();
  const [columnDefs, setColumnDefs] = useState<ColDef[]>([
    { field: "athlete", minWidth: 220, sort: "asc" },
    { field: "country", minWidth: 180 },
    { field: "sport", minWidth: 140 },
    { field: "total" },
  ]);
  const defaultColDef = useMemo<ColDef>(() => {
    return {
      filter: true,
      minWidth: 100,
      flex: 1,
    };
  }, []);
  const defaultPdfExportParams = useMemo<PdfExportParams>(() => {
    return {
      processStyleCallback: (params: PdfStyleCallbackParams) => {
        if (params.type === "header") {
          return {
            backgroundColor: "#e0f2fe",
            color: "#0c4a6e",
            fontFamily: "Helvetica-Bold",
          };
        }
      },
    };
  }, []);

  const onGridReady = useCallback((params: GridReadyEvent) => {
    setRowData(data);
  }, []);

  const onBtExport = useCallback(() => {
    gridRef.current!.api.exportDataAsPdf();
  }, []);

  return (
    <AgGridProvider modules={modules}>
      <div style={containerStyle}>
        <div className="container">
          <div>
            <button
              onClick={onBtExport}
              style={{ marginBottom: "5px", fontWeight: "bold" }}
            >
              Export PDF
            </button>
          </div>
          <div className="grid-wrapper">
            <div style={gridStyle}>
              <AgGridReact<IOlympicData>
                ref={gridRef}
                rowData={rowData}
                columnDefs={columnDefs}
                defaultColDef={defaultColDef}
                defaultPdfExportParams={defaultPdfExportParams}
                onGridReady={onGridReady}
              />
            </div>
          </div>
        </div>
      </div>
    </AgGridProvider>
  );
};

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

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

## 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/react-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/react-data-grid/pdf-export-extra-content/) rows. Header and group-header cells use `defaultHeaderStyle`, with every unset property inherited from `defaultCellStyle`.

```jsx
gridApi.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` |  |  |  |