Skip to content
DzGrid

print

Prints the grid’s rows as a real table; a function you call with the grid, not a feature.

Importimport { print } from '@dzgrid/dom/print';
Signatureprint(grid: PrintableGrid, o?: PrintOptions | undefined): Promise<void>
Textsimport { EN_PRINT } from '@dzgrid/dom/locales/en-print';
languages: en, fr, ar
Style sheetimport '@dzgrid/theme/print.css';
Declared inpackages/dom/src/print/index.ts
OptionsType
maxRowsnumber
titlestring
headerfalse

What it does

Section titled “What it does”

print(grid, options) is not given in features: you call it with the grid, from your own button, and nothing is loaded until then. It prints the rows as they are on screen — same columns, order, sort and filters, not only the rows scrolled into view — as a real table: headers repeated on each page, no row cut in two, right to left in Arabic, a dark theme printed light. Pinned rows come first and last; a grouped grid prints its group and totals rows; detail panels are not printed. A grid with server pages prints the page shown.

It builds the table beside the grid, opens the browser’s print dialog, and removes the table afterwards; the screen grid is not touched. If it is called again before the dialog opens, only the newest call prints. Past maxRows, the first rows are printed, a line says how many, and a print-too-many problem is told.

The browser’s own print command (Ctrl+P) prints only what the page shows, unless printOnMenu is set. In Angular, pass ctrl.grid().

Options

Section titled “Options”
  • maxRows: the most rows printed. Default 5 000.
  • title: the table’s caption. Default: the grid’s accessible name.
  • header: false leaves the header rows out. They are printed by default, on a grid with headers: 'hidden' too.

Example

Section titled “Example”
import { createGrid } from '@dzgrid/dom';
import { print } from '@dzgrid/dom/print';
import { EN } from '@dzgrid/dom/locales/en';
import { EN_PRINT } from '@dzgrid/dom/locales/en-print';


type Lighthouse = { id: string; light: string; metres: number };


const grid = createGrid<Lighthouse>(document.getElementById('lights')!, {
  rows: [{ id: 'l1', light: 'Gull rock', metres: 31 }, { id: 'l2', light: 'Mussel point', metres: 18 }],
  columns: [
    { id: 'light', header: 'Lighthouse' },
    { id: 'metres', header: 'Height (m)', type: 'number' },
  ],
  getRowId: (l) => l.id,
  messages: { ...EN, text: { ...EN.text, ...EN_PRINT.text } },
});


document.getElementById('print')!.addEventListener('click', () => {
  void print(grid, { title: 'Lighthouses of the bay', maxRows: 2000 });
});

Live demo

Section titled “Live demo”

Press « Print » above the grid: the browser's print preview shows the table.

See also

Section titled “See also”