Vue Data GridPDF Export - Columns

Version 36.2.0

Enterprise

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 Copy Link

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

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

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

Hidden And Specific Columns Copy Link

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

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.

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 Copy Link

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 Copy Link

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

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.

main.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");

styles.css

.example-wrapper {
    display: flex;
    flex-direction: column;
    height: 100%;
}

.controls {
    display: flex;
    flex-wrap: wrap;
    gap: 8px 16px;
    align-items: center;
    margin-bottom: 8px;
}

#myGrid {
    flex: 1 1 0px;
    width: 100%;
}

Column Widths Copy Link

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.

main.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");

styles.css

.example-wrapper {
    display: flex;
    flex-direction: column;
    height: 100%;
}

.controls {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px;
    margin-bottom: 8px;
}

#myGrid {
    flex: 1 1 0px;
    width: 100%;
}

API Copy Link

Export Options Copy Link

PdfColumnWidth | PdfColumnWidthCallback

default: 'grid'

Controls exported column widths. Use auto to size from exported content, grid to use the current column width in the grid, a number for a width in points, or a callback for per-column control. Widths are proportionally reduced when their total exceeds the printable page width.

boolean

default: false

Set to true to allow the contents of the Row Numbers column to be exported.

boolean

default: false

If true, all columns will be exported in the order they appear in the columnDefs. When false only the columns currently being displayed will be exported.

(string | Column)[]

Provide a list (an array) of column keys or Column objects if you want to export specific columns.

boolean

default: false

Set to true to exclude header column groups.

boolean

default: false

Set to true if you don't want to export column headers.

ColumnWidthCallbackParams Copy Link

Properties available on the ColumnWidthCallbackParams interface.

Column | null

number

Getting Started

AI Features

Layout & Styling

Charting

Core Features

Advanced Features

Vue Data GridPDF Export - Columns

Column Headers Copy Link

Hidden And Specific Columns Copy Link

Column Groups Copy Link

Row Numbers Copy Link

Column Widths Copy Link

API Copy Link

Export Options Copy Link

ColumnWidthCallbackParams Copy Link