---
product: "AG Grid"
title: "PDF Export - Columns"
description: "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."
enterprise: true
framework: vue
version: "36.2.0"
related:
    - title: "Styles"
      url: "https://www.ag-grid.com/archive/36.2.0/vue-data-grid/pdf-export-styles/"
    - title: "Languages"
      url: "https://www.ag-grid.com/archive/36.2.0/vue-data-grid/pdf-export-languages/"
    - title: "Extra Content"
      url: "https://www.ag-grid.com/archive/36.2.0/vue-data-grid/pdf-export-extra-content/"
    - title: "Customising Content"
      url: "https://www.ag-grid.com/archive/36.2.0/vue-data-grid/pdf-export-customising-content/"
    - title: "Images"
      url: "https://www.ag-grid.com/archive/36.2.0/vue-data-grid/pdf-export-images/"
    - title: "Watermarks"
      url: "https://www.ag-grid.com/archive/36.2.0/vue-data-grid/pdf-export-watermarks/"
    - title: "Rows"
      url: "https://www.ag-grid.com/archive/36.2.0/vue-data-grid/pdf-export-rows/"
    - title: "Hyperlinks"
      url: "https://www.ag-grid.com/archive/36.2.0/vue-data-grid/pdf-export-hyperlinks/"
    - title: "Master Detail"
      url: "https://www.ag-grid.com/archive/36.2.0/vue-data-grid/pdf-export-master-detail/"
    - title: "Page Setup"
      url: "https://www.ag-grid.com/archive/36.2.0/vue-data-grid/pdf-export-page-setup/"
    - title: "API Reference"
      url: "https://www.ag-grid.com/archive/36.2.0/vue-data-grid/pdf-export-api/"
llms: "https://www.ag-grid.com/archive/36.2.0/llms.txt"
---

# PDF Export - Columns

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

Column headers and column-group headers are exported by default. Set `skipColumnHeaders=true` or `skipColumnGroupHeaders=true` to omit the corresponding header rows.

```ts
this.gridApi.exportDataAsPdf({
    skipColumnHeaders: false,
    skipColumnGroupHeaders: true,
});
```

When headers are included, `processHeaderCallback` and `processGroupHeaderCallback` can customise their exported text.

## Hidden And Specific Columns

Hidden columns are omitted by default. Set `allColumns=true` to export every primary column in `columnDefs` order, including hidden columns.

```ts
this.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.

```ts
this.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

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

The Row Numbers column is not exported by default, even when it is displayed in the grid. Set `exportRowNumbers=true` to include it.

```ts
this.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.

#### PDF Export - Columns

```ts
import {
  createApp,
  defineComponent,
  onBeforeMount,
  ref,
  shallowRef,
} from "vue";
import { AgGridVue } from "ag-grid-vue3";
import "./styles.css";
import {
  ClientSideRowModelModule,
  ColDef,
  ColGroupDef,
  GridApi,
  GridOptions,
  GridReadyEvent,
  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();
}

ModuleRegistry.registerModules([
  ClientSideRowModelModule,
  ContextMenuModule,
  RowNumbersModule,
  PdfExportModule,
]);

interface OrderData {
  customer: string;
  country: string;
  product: string;
  quantity: number;
  total: number;
  internalReference: string;
}

function isChecked(id: string): boolean {
  return document.querySelector<HTMLInputElement>(`#${id}`)!.checked;
}

function 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 VueExample = defineComponent({
  template: `
        <div style="height: 100%">
                <div class="example-wrapper">
      <div class="controls" v-on:change="onPdfExportOptionsChanged()">
        <button v-on:click="onBtExport()">Export to PDF</button>
        <label for="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>
      <ag-grid-vue
        style="width: 100%; height: 100%;"
        @grid-ready="onGridReady"
        :rowData="rowData"
        :columnDefs="columnDefs"
        :defaultColDef="defaultColDef"
        :rowNumbers="true"
        :defaultPdfExportParams="defaultPdfExportParams"></ag-grid-vue>
      </div>
        </div>
    `,
  components: {
    "ag-grid-vue": AgGridVue,
  },
  setup(props) {
    const gridApi = shallowRef<GridApi<OrderData> | null>(null);
    const rowData = ref<OrderData[] | null>([
      {
        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 = ref<(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 = ref<ColDef>({
      flex: 1,
      minWidth: 100,
    });
    const defaultPdfExportParams = ref<PdfExportParams>({
      columnWidth: "auto",
    });

    function onPdfExportOptionsChanged() {
      gridApi.value.setGridOption(
        "defaultPdfExportParams",
        getPdfExportParams(),
      );
    }
    function onBtExport() {
      gridApi.value.exportDataAsPdf();
    }
    const onGridReady = (params: GridReadyEvent) => {
      gridApi.value = params.api;
    };

    return {
      gridApi,
      rowData,
      columnDefs,
      defaultColDef,
      defaultPdfExportParams,
      onGridReady,
      onPdfExportOptionsChanged,
      onBtExport,
    };
  },
});

const app = createApp(VueExample);
app.mount("#app");
```

[Live example: PDF Export - Columns](https://www.ag-grid.com/archive/36.2.0/examples/pdf-export-columns/pdf-export-columns/vue3/)

## Column Widths

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.

#### Widths And Autosizing

```ts
import {
  createApp,
  defineComponent,
  onBeforeMount,
  ref,
  shallowRef,
} from "vue";
import { AgGridVue } from "ag-grid-vue3";
import "./styles.css";
import {
  ClientSideRowModelModule,
  ColDef,
  ColGroupDef,
  GridApi,
  GridOptions,
  GridReadyEvent,
  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();
}

ModuleRegistry.registerModules([
  ClientSideRowModelModule,
  ContextMenuModule,
  RowNumbersModule,
  PdfExportModule,
]);

interface ProductData {
  sku: string;
  product: string;
  description: string;
  units: number;
  unitPrice: number;
}

function 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 VueExample = defineComponent({
  template: `
        <div style="height: 100%">
                <div class="example-wrapper">
      <div class="controls" v-on:change="onPdfExportOptionsChanged()">
        <button v-on:click="onBtExport()">Export to PDF</button>
        <label for="widthMode">Column widths</label>
        <select id="widthMode">
          <option value="grid">Grid</option>
          <option value="auto">Auto</option>
          <option value="custom">Custom</option>
        </select>
      </div>
      <ag-grid-vue
        style="width: 100%; height: 100%;"
        @grid-ready="onGridReady"
        :rowData="rowData"
        :columnDefs="columnDefs"
        :defaultColDef="defaultColDef"
        :rowNumbers="true"
        :defaultPdfExportParams="defaultPdfExportParams"></ag-grid-vue>
      </div>
        </div>
    `,
  components: {
    "ag-grid-vue": AgGridVue,
  },
  setup(props) {
    const gridApi = shallowRef<GridApi<ProductData> | null>(null);
    const rowData = ref<ProductData[] | null>([
      {
        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 = ref<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 = ref<ColDef>({ resizable: true });
    const defaultPdfExportParams = ref<PdfExportParams>({
      exportRowNumbers: true,
      columnWidth: "grid",
    });

    function onPdfExportOptionsChanged() {
      gridApi.value.setGridOption(
        "defaultPdfExportParams",
        getPdfExportParams(),
      );
    }
    function onBtExport() {
      gridApi.value.exportDataAsPdf();
    }
    const onGridReady = (params: GridReadyEvent) => {
      gridApi.value = params.api;
    };

    return {
      gridApi,
      rowData,
      columnDefs,
      defaultColDef,
      defaultPdfExportParams,
      onGridReady,
      onPdfExportOptionsChanged,
      onBtExport,
    };
  },
});

const app = createApp(VueExample);
app.mount("#app");
```

[Live example: Widths And Autosizing](https://www.ag-grid.com/archive/36.2.0/examples/pdf-export-columns/pdf-widths-autosizing/vue3/)

## API

### Export Options

| Property | Type | Required | Default | Description |
| --- | --- | --- | --- | --- |
| `columnWidth` | `PdfColumnWidth \| PdfColumnWidthCallback` |  |  |  |
| `exportRowNumbers` | `boolean` |  |  |  |
| `allColumns` | `boolean` |  |  |  |
| `columnKeys` | `(string \| Column)[]` |  |  |  |
| `skipColumnGroupHeaders` | `boolean` |  |  |  |
| `skipColumnHeaders` | `boolean` |  |  |  |

### ColumnWidthCallbackParams

Properties available on the `ColumnWidthCallbackParams` interface.

| Property | Type | Required | Default | Description |
| --- | --- | --- | --- | --- |
| `column` | `Column \| null` |  |  |  |
| `index` | `number` |  |  |  |