DataGrid Export

Export DataGrid data with dependency-free PDF and Excel adapters, or provide custom adapters for advanced PDF and workbook generation.

Export

Export uses exportOptions plus optional data providers to download current, all, or selected grid data.

How to use it

Enable export actions with exportOptions.enabled = true. The DataGrid ships dependency-free browser adapters for simple PDF and Excel-compatible table files.
Choose type: "pdf", "excel", or "both" and pages: "current", "all", or "selection".
Provide dataProviderAll when pages is "all"; provide dataProviderSelection when pages is "selection".
Use fileName, pdf options, and excel.sheetName to control the generated output.
Project ng-template ngbExportButton when the app needs custom export buttons but still wants to call the grid export trigger.
Provide a custom PdfExportAdapter or ExcelExportAdapter only when your app needs branded PDFs, images, charts, formulas, multiple sheets, styling, or a true .xlsx workbook.

Loading interactive DataGrid example…

Code snippet

Grid example - component setup and template binding

      import { Component } from '@angular/core';
import { Datagrid } from '@angular-bootstrap/ngbootstrap';

@Component({
  standalone: true,
  imports: [Datagrid],
  template: `
    <ngb-datagrid
      [columns]="columns"
      [data]="currentPageRows"
      [exportOptions]="exportOptions"
      [dataProviderAll]="loadAllRows"
      [dataProviderSelection]="selectedRows"
    ></ngb-datagrid>
  `,
})
export class ExportDemo {
  readonly exportOptions = {
    enabled: true,
    type: 'both' as const,
    pages: 'all' as const,
    fileName: 'product-inventory',
    pdf: { pageSize: 'A4', landscape: true },
    excel: { sheetName: 'Inventory' },
  };

  loadAllRows = () => this.inventoryService.loadAll();
  selectedRows = () => this.selection;
}

API notes - key inputs, outputs, and column properties

      // The built-in adapters avoid xlsx, jspdf, and jspdf-autotable.
// They are intentionally small: simple table PDF + Excel-compatible .xls.

// Custom PDF example for richer browser PDFs:
import { PDFDocument, StandardFonts, rgb } from 'pdf-lib';
import {
  PdfExportAdapter,
  type PdfExportPayload,
} from '@angular-bootstrap/ngbootstrap';

export class BrandedPdfExportAdapter implements PdfExportAdapter {
  async export(payload: PdfExportPayload): Promise<void> {
    const pdf = await PDFDocument.create();
    const page = pdf.addPage([842, 595]);
    const font = await pdf.embedFont(StandardFonts.HelveticaBold);

    page.drawText('Orders export', {
      x: 40,
      y: 540,
      size: 18,
      font,
      color: rgb(0.24, 0.25, 0.95),
    });

    const bytes = await pdf.save();
    const blob = new Blob([bytes], { type: 'application/pdf' });
    const url = URL.createObjectURL(blob);
    const link = document.createElement('a');
    link.href = url;
    link.download = `${payload.fileName}.pdf`;
    link.click();
    URL.revokeObjectURL(url);
  }
}

providers: [{ provide: PdfExportAdapter, useClass: BrandedPdfExportAdapter }];

// Custom Excel example for true .xlsx workbooks:
import { Workbook } from 'exceljs';
import {
  ExcelExportAdapter,
  type ExcelExportPayload,
} from '@angular-bootstrap/ngbootstrap';

export class XlsxExportAdapter implements ExcelExportAdapter {
  async export(payload: ExcelExportPayload): Promise<void> {
    const workbook = new Workbook();
    const sheet = workbook.addWorksheet(payload.sheetName || 'Sheet1');

    sheet.columns = payload.columns.map((column) => ({
      header: column.title,
      key: column.key,
      width: Math.max(14, column.title.length + 4),
    }));
    sheet.addRows(payload.rows);

    const buffer = await workbook.xlsx.writeBuffer();
    const blob = new Blob([buffer], {
      type: 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet',
    });
    const url = URL.createObjectURL(blob);
    const link = document.createElement('a');
    link.href = url;
    link.download = `${payload.fileName}.xlsx`;
    link.click();
    URL.revokeObjectURL(url);
  }
}

providers: [{ provide: ExcelExportAdapter, useClass: XlsxExportAdapter }];

API Information

Property	Type	Default	Description
`exportOptions.enabled`	`boolean`	`false`	Shows the export controls when true.
`exportOptions.type`	`"pdf" \| "excel" \| "both"`	`"both"`	Selects which export actions are available.
`exportOptions.pages`	`"current" \| "all" \| "selection"`	`"current"`	Selects current page rows, all rows from dataProviderAll, or selected rows from dataProviderSelection.
`exportOptions.fileName`	`string`	`"export"`	Sets the generated file name.
`exportOptions.pdf`	`{ pageSize?: string; landscape?: boolean; margins?: [number, number, number, number] }`	`-`	Controls PDF page size, orientation, and margins for the built-in PDF adapter.
`exportOptions.excel.sheetName`	`string`	`"Sheet1"`	Sets the worksheet name for Excel export. Invalid Excel sheet-name characters are removed.
`dataProviderAll`	`() => Observable<T[]> \| Promise<T[]> \| T[]`	`undefined`	Provides all rows when exportOptions.pages is "all".
`dataProviderSelection`	`() => T[]`	`undefined`	Provides selected rows when exportOptions.pages is "selection".
`PdfExportPayload`	`{ fileName: string; columns: string[]; rows: any[]; options?: any }`	`-`	Payload passed to PdfExportAdapter. Columns are visible column field names.
`ExcelExportPayload`	`{ fileName: string; sheetName: string; columns: Array<{ key: string; title: string }>; rows: any[] }`	`-`	Payload passed to ExcelExportAdapter. Columns include visible field keys and header titles.
`JsPdfAdapter`	`PdfExportAdapter`	`built-in`	Dependency-free browser PDF adapter for simple table exports. Use a custom adapter for rich PDFs.
`BrowserExcelExportAdapter`	`ExcelExportAdapter`	`built-in`	Dependency-free SpreadsheetML adapter that downloads an Excel-compatible .xls workbook.
`ngbExportButton`	`Template directive`	`-`	Projects custom export buttons that call the grid export trigger.