Vue Data GridPDF Export - Rows

Version 36.2.0

Enterprise

PDF Export includes rows after filtering and sorting by default. Export options can select rows, change their order, omit groups, and control pinned rows.

Export Selected Rows Copy Link

Set onlySelected=true to export selected rows. With pagination, use onlySelectedAllPages=true to include selections from every page.

this.gridApi.exportDataAsPdf({
    onlySelected: true,
});

Text Wrapping And Row Height Copy Link

Cells remain on one line by default. Enable wrapping globally with defaultCellStyle.wrapText, per column with colDef.wrapText, or per element with processStyleCallback.

this.gridApi.exportDataAsPdf({
    defaultCellStyle: {
        wrapText: true,
        maxLines: 3,
    },
});

Without a fixed height, rows grow to fit wrapped content and can continue across pages. An explicit rowHeight or headerRowHeight fixes the available height and clips overflowing text.

Supported white-space values returned by cellStyle are also translated into wrapping, line-break preservation, and space preservation.

Row Order Copy Link

The default exportedRows='filteredAndSorted' follows the displayed row order. Use 'all' to export the original unfiltered and unsorted row set.

this.gridApi.exportDataAsPdf({
    exportedRows: 'all',
});

Selection and shouldRowBeSkipped can still remove rows from this set.

Row Groups Copy Link

Row groups are exported with indentation based on their displayed level. Set rowGroupIndentSize to change the indentation, or skipRowGroups=true to omit group rows.

this.gridApi.exportDataAsPdf({
    rowGroupIndentSize: 12,
});

Pinned Rows Copy Link

Pinned top and bottom rows are exported by default. Use skipPinnedTop or skipPinnedBottom to omit them.

Manually pinned rows can also appear in the body. Set skipPinnedRowDuplicates=true to keep only their pinned copies.

this.gridApi.exportDataAsPdf({
    skipPinnedTop: true,
    skipPinnedRowDuplicates: true,
});

main.ts

import {
  createApp,
  defineComponent,
  onBeforeMount,
  ref,
  shallowRef,
} from "vue";
import { AgGridVue } from "ag-grid-vue3";
import "./styles.css";
import {
  AutoGroupColumnDef,
  ClientSideRowModelModule,
  ColDef,
  ColGroupDef,
  GridApi,
  GridOptions,
  GridReadyEvent,
  ModuleRegistry,
  PdfColumnWidthCallback,
  PdfExportParams,
  PinnedRowModule,
  RowAutoHeightModule,
  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,
  PinnedRowModule,
  RowAutoHeightModule,
  RowGroupingModule,
  ContextMenuModule,
  PdfExportModule,
]);

interface ProjectData {
  division: string;
  team: string;
  project: string;
  summary: string;
  owner: string;
  budget: number;
}

const columnWidth: PdfColumnWidthCallback = ({ column }) =>
  column?.getColId() === "summary" ? 190 : "auto";

function getPdfExportParams(): PdfExportParams {
  const includeTop =
    document.querySelector<HTMLInputElement>("#includeTop")!.checked;
  const includeBottom =
    document.querySelector<HTMLInputElement>("#includeBottom")!.checked;
  const limitLines =
    document.querySelector<HTMLInputElement>("#limitLines")!.checked;
  return {
    rowGroupIndentSize: 16,
    skipPinnedTop: !includeTop,
    skipPinnedBottom: !includeBottom,
    defaultCellStyle: {
      maxLines: limitLines ? 2 : undefined,
      overflow: "ellipsis",
    },
    columnWidth,
  };
}

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><input id="includeTop" type="checkbox" checked=""> Include pinned top</label>
        <label><input id="includeBottom" type="checkbox" checked=""> Include pinned bottom</label>
        <label><input id="limitLines" type="checkbox"> Limit wrapped text to two lines</label>
      </div>
      <ag-grid-vue
        style="width: 100%; height: 100%;"
        @grid-ready="onGridReady"
        :rowData="rowData"
        :columnDefs="columnDefs"
        :defaultColDef="defaultColDef"
        :autoGroupColumnDef="autoGroupColumnDef"
        :groupDefaultExpanded="groupDefaultExpanded"
        :pinnedTopRowData="pinnedTopRowData"
        :pinnedBottomRowData="pinnedBottomRowData"
        :defaultPdfExportParams="defaultPdfExportParams"></ag-grid-vue>
      </div>
        </div>
    `,
  components: {
    "ag-grid-vue": AgGridVue,
  },
  setup(props) {
    const gridApi = shallowRef<GridApi<ProjectData> | null>(null);
    const rowData = ref<ProjectData[] | null>([
      {
        division: "Product",
        team: "Grid",
        project: "Column Tooling",
        summary: "Improve column workflows.\nAdd keyboard controls.",
        owner: "Ava",
        budget: 185000,
      },
      {
        division: "Product",
        team: "Grid",
        project: "PDF Export",
        summary:
          "Deliver paginated reports with configurable widths, wrapping, styling, and extra content.",
        owner: "Mateo",
        budget: 240000,
      },
      {
        division: "Product",
        team: "Charts",
        project: "Financial Series",
        summary:
          "Add range, volume, and technical-indicator workflows for financial dashboards.",
        owner: "Priya",
        budget: 210000,
      },
      {
        division: "Operations",
        team: "Cloud",
        project: "Regional Hosting",
        summary:
          "Expand regional hosting capacity while keeping deployment and monitoring consistent.",
        owner: "Noah",
        budget: 320000,
      },
      {
        division: "Operations",
        team: "Support",
        project: "Service Portal",
        summary:
          "Consolidate customer requests, service status, and escalation history into one portal.",
        owner: "Mei",
        budget: 145000,
      },
    ]);
    const columnDefs = ref<ColDef[]>([
      { field: "division", rowGroup: true, hide: true },
      { field: "team", rowGroup: true, hide: true },
      { field: "project", minWidth: 180 },
      { field: "summary", minWidth: 260, wrapText: true, autoHeight: true },
      { field: "owner" },
      {
        field: "budget",
        valueFormatter: (params) => `$${Number(params.value).toLocaleString()}`,
      },
    ]);
    const defaultColDef = ref<ColDef>({ flex: 1, minWidth: 110 });
    const autoGroupColumnDef = ref<AutoGroupColumnDef>({
      headerName: "Portfolio",
      minWidth: 220,
    });
    const groupDefaultExpanded = ref(-1);
    const pinnedTopRowData = ref<any[]>([
      {
        division: "",
        team: "",
        project: "Approved Portfolio",
        summary: "Current approved programme of work",
        owner: "Leadership",
        budget: 1100000,
      },
    ]);
    const pinnedBottomRowData = ref<any[]>([
      {
        division: "",
        team: "",
        project: "Contingency",
        summary: "Unallocated portfolio contingency",
        owner: "Finance",
        budget: 125000,
      },
    ]);
    const defaultPdfExportParams = ref<PdfExportParams>({
      rowGroupIndentSize: 16,
      defaultCellStyle: {
        overflow: "ellipsis",
      },
      columnWidth,
    });

    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,
      autoGroupColumnDef,
      groupDefaultExpanded,
      pinnedTopRowData,
      pinnedBottomRowData,
      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: 12px;
    margin-bottom: 8px;
}

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

Choose Rows Programmatically Copy Link

Use rowPositions to export specific row positions, or shouldRowBeSkipped to omit rows conditionally.

this.gridApi.exportDataAsPdf({
    shouldRowBeSkipped: ({ node }) => node.data?.status === 'Archived',
});

main.ts

import {
  createApp,
  defineComponent,
  onBeforeMount,
  ref,
  shallowRef,
} from "vue";
import { AgGridVue } from "ag-grid-vue3";
import "./styles.css";
import {
  ClientSideRowModelModule,
  ColDef,
  ColGroupDef,
  GetRowIdFunc,
  GridApi,
  GridOptions,
  GridReadyEvent,
  ModuleRegistry,
  PdfExportParams,
  PinnedRowModule,
  RowApiModule,
  RowSelectionModule,
  RowSelectionOptions,
  TextFilterModule,
  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,
  PinnedRowModule,
  RowApiModule,
  RowSelectionModule,
  TextFilterModule,
  ContextMenuModule,
  PdfExportModule,
]);

interface ProjectData {
  id: string;
  employee: string;
  team: string;
  country: string;
  status: string;
}

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

function getPdfExportParams(): PdfExportParams {
  return {
    onlySelected: isChecked("onlySelected"),
    exportedRows: isChecked("allRows") ? "all" : "filteredAndSorted",
    skipPinnedTop: isChecked("skipPinnedTop"),
    skipPinnedBottom: isChecked("skipPinnedBottom"),
    columnWidth: "auto",
  };
}

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><input id="onlySelected" type="checkbox"> Selected rows only</label>
        <label><input id="allRows" type="checkbox"> Ignore filtering and sorting</label>
        <label><input id="skipPinnedTop" type="checkbox"> Skip pinned top</label>
        <label><input id="skipPinnedBottom" type="checkbox"> Skip pinned bottom</label>
      </div>
      <ag-grid-vue
        style="width: 100%; height: 100%;"
        @grid-ready="onGridReady"
        :rowData="rowData"
        :columnDefs="columnDefs"
        :defaultColDef="defaultColDef"
        :getRowId="getRowId"
        :rowSelection="rowSelection"
        :pinnedTopRowData="pinnedTopRowData"
        :pinnedBottomRowData="pinnedBottomRowData"
        :defaultPdfExportParams="defaultPdfExportParams"
        @first-data-rendered="onFirstDataRendered"></ag-grid-vue>
      </div>
        </div>
    `,
  components: {
    "ag-grid-vue": AgGridVue,
  },
  setup(props) {
    const gridApi = shallowRef<GridApi<ProjectData> | null>(null);
    const rowData = ref<ProjectData[] | null>([
      {
        id: "p1",
        employee: "Asha Patel",
        team: "Grid",
        country: "United Kingdom",
        status: "Active",
      },
      {
        id: "p2",
        employee: "Marc Dubois",
        team: "Charts",
        country: "France",
        status: "Planning",
      },
      {
        id: "p3",
        employee: "Sofia Rossi",
        team: "Grid",
        country: "Italy",
        status: "Active",
      },
      {
        id: "p4",
        employee: "Noah Williams",
        team: "Cloud",
        country: "United States",
        status: "Planning",
      },
      {
        id: "p5",
        employee: "Mei Chen",
        team: "Support",
        country: "Singapore",
        status: "Active",
      },
      {
        id: "p6",
        employee: "Lucas Silva",
        team: "Grid",
        country: "Brazil",
        status: "Archived",
      },
    ]);
    const columnDefs = ref<ColDef[]>([
      { field: "employee", minWidth: 170 },
      { field: "team" },
      { field: "country", minWidth: 150 },
      { field: "status" },
    ]);
    const defaultColDef = ref<ColDef>({
      flex: 1,
      minWidth: 110,
      filter: true,
    });
    const getRowId = ref<GetRowIdFunc>((params) => params.data.id);
    const rowSelection = ref<RowSelectionOptions | "single" | "multiple">({
      mode: "multiRow",
      headerCheckbox: false,
    });
    const pinnedTopRowData = ref<any[]>([
      {
        id: "top",
        employee: "Quarterly Plan",
        team: "All Teams",
        country: "Global",
        status: "Summary",
      },
    ]);
    const pinnedBottomRowData = ref<any[]>([
      {
        id: "bottom",
        employee: "Project Total",
        team: "4 Teams",
        country: "6 Countries",
        status: "Summary",
      },
    ]);
    const defaultPdfExportParams = ref<PdfExportParams>({
      columnWidth: "auto",
    });

    function onFirstDataRendered() {
      gridApi.value.getRowNode("p1")?.setSelected(true);
      gridApi.value.getRowNode("p3")?.setSelected(true);
    }
    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,
      getRowId,
      rowSelection,
      pinnedTopRowData,
      pinnedBottomRowData,
      defaultPdfExportParams,
      onGridReady,
      onFirstDataRendered,
      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%;
}

API Copy Link

Export Options Copy Link

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

PdfCellStyle

default: { fontFamily: 'Helvetica', fontSize: 10, padding: 4 }

Default style applied to every body cell, including custom content rows. Grid styles, row and cell styles, and processStyleCallback results override these values. When no style is provided, body cells use Helvetica at 10 points.

number

default: 12

Horizontal indentation in points for each row-group level.

number

default: calculated from font size and padding

Height of body rows in points. If omitted, calculated from font size and padding.

number

default: calculated from header font size and padding

Height of header rows in points. If omitted, calculated from header font size and padding.

RowPosition[]

Row node positions.

'all' | 'filteredAndSorted'

default: 'filteredAndSorted'

Determines whether rows are exported before being filtered and sorted.

boolean

default: false

Export only selected rows.

boolean

default: false

Only export selected rows including other pages (only makes sense when using pagination).

boolean

default: false

Set to true to skip row group headers if grouping rows. Only relevant when grouping rows.

boolean

default: false

Set to true to suppress exporting rows pinned to the top of the grid.

boolean

default: false

Set to true to suppress exporting rows pinned to the bottom of the grid.

boolean

default: false

Set to true to omit the body copies of manually pinned rows. The rows in the pinned sections are still exported unless skipPinnedTop or skipPinnedBottom is enabled.

Function

A callback function that will be invoked once per row in the grid. Return true to omit the row from the export.

ShouldRowBeSkippedParams Copy Link

Properties available on the ShouldRowBeSkippedParams<TData = any, TContext = any> interface.

IRowNode

Row node.

GridApi

The grid api.

TContext

Application context as set on gridOptions.context.

RowPosition Copy Link

Properties available on the RowPosition interface.

number

A positive number from 0 to n, where n is the last row the grid is rendering or -1 if you want to navigate to the grid header

RowPinnedType

Either 'top', 'bottom' or null/undefined (for not pinned)

Getting Started

AI Features

Layout & Styling

Charting

Core Features

Advanced Features

Vue Data GridPDF Export - Rows

Export Selected Rows Copy Link

Text Wrapping And Row Height Copy Link

Row Order Copy Link

Row Groups Copy Link

Pinned Rows Copy Link

Choose Rows Programmatically Copy Link

API Copy Link

Export Options Copy Link

ShouldRowBeSkippedParams Copy Link

RowPosition Copy Link