Print Plugin

The Print Plugin enables printing the full grid content by temporarily disabling virtualization and applying print-optimized styles. It handles large datasets gracefully with configurable row limits.

Features

• Print Layout Mode - Optimized CSS styles for printing
• Page Orientation - Portrait or landscape orientation
• Row Limits - Configurable maximum rows with confirmation dialog for large datasets
• Toolbar Button - Optional print button in grid header
• Title & Timestamp - Optional print header with customizable title and timestamp
• Column Hiding - Mark columns as printHidden to exclude from print output

Installation

import '@toolbox-web/grid/features/print';

Basic Usage

Use the controls to try different orientations, toggle title/timestamp, isolated printing, and the toolbar button. Enable “Toolbar button” to add a print icon to the grid header (requires shell.header config).

PRINT

Orientation Page orientation

landscapeportrait

Toolbar button Show print button in grid toolbar

Include title Show title in print header

Include timestamp Show timestamp in print footer

Isolate Hide non-grid content when printing

🖨️ Print Grid

Show source

Vanilla JS

import { queryGrid } from '@toolbox-web/grid';
import '@toolbox-web/grid/features/print';

const grid = queryGrid('tbw-grid');

grid.gridConfig = {
  columns: [
    { field: 'name', header: 'Name' },
    { field: 'department', header: 'Department' },
    { field: 'salary', header: 'Salary' },
  ],
  features: {
    print: {
      title: 'Employee Report',
      includeTitle: true,
      includeTimestamp: true,
    },
  },
};

// Programmatic print
const plugin = grid.getPluginByName('print');
await plugin.print();

React

import '@toolbox-web/grid-react/features/print';
import { DataGrid } from '@toolbox-web/grid-react';
import { useGridPrint } from '@toolbox-web/grid-react/features/print';

function EmployeeGrid({ data }) {
  const { print } = useGridPrint();

  const handlePrint = async () => {
    await print({ title: 'Employee Report' });
  };

  return (
    <div>
      <button onClick={handlePrint}>Print Report</button>
      <DataGrid
        rows={data}
        columns={[
          { field: 'name', header: 'Name' },
          { field: 'department', header: 'Department' },
          { field: 'salary', header: 'Salary' },
        ]}
        print={{
          title: 'Employee Report',
          includeTitle: true,
          includeTimestamp: true,
        }}
        style={{ height: '400px' }}
      />
    </div>
  );
}

Vue

<script setup>
import '@toolbox-web/grid-vue/features/print';
import { TbwGrid, TbwGridColumn } from '@toolbox-web/grid-vue';
import { ref } from 'vue';

const data = [
  { name: 'Alice', department: 'Engineering', salary: 95000 },
  { name: 'Bob', department: 'Marketing', salary: 75000 },
];

const gridRef = ref(null);

const handlePrint = async () => {
  await gridRef.value?.gridElement?.getPluginByName('print')?.print();
};
</script>

<template>
  <div>
    <button @click="handlePrint">Print Report</button>
    <TbwGrid ref="gridRef" :rows="data" :print="{ title: 'Employee Report', includeTitle: true, includeTimestamp: true }" style="height: 400px">
      <TbwGridColumn field="name" header="Name" />
      <TbwGridColumn field="department" header="Department" />
      <TbwGridColumn field="salary" header="Salary" />
    </TbwGrid>
  </div>
</template>

Angular

// Feature import - enables the [print] input
import '@toolbox-web/grid-angular/features/print';

import { Component, viewChild, ElementRef } from '@angular/core';
import { Grid } from '@toolbox-web/grid-angular';
import type { ColumnConfig, GridElement } from '@toolbox-web/grid';

@Component({
  selector: 'app-employee-grid',
  imports: [Grid],
  template: `
    <button (click)="handlePrint()">Print Report</button>
    <tbw-grid
      #grid
      [rows]="rows"
      [columns]="columns"
      [print]="{ title: 'Employee Report', includeTitle: true, includeTimestamp: true }"
      style="height: 400px; display: block;">
    </tbw-grid>
  `,
})
export class EmployeeGridComponent {
  gridRef = viewChild<ElementRef<GridElement>>('grid');
  rows = [...];

  columns: ColumnConfig[] = [
    { field: 'name', header: 'Name' },
    { field: 'department', header: 'Department' },
    { field: 'salary', header: 'Salary' },
  ];

  async handlePrint() {
    const plugin = this.gridRef()?.nativeElement.getPluginByName('print');
    await plugin?.print();
  }
}

Configuration Options

See PrintConfig for the full list of options and defaults.

Hiding Columns in Print

Use the printHidden column property to exclude specific columns from print output. This is useful for hiding action buttons, interactive elements, or columns that aren’t relevant on paper.

import { queryGrid } from '@toolbox-web/grid';

const grid = queryGrid('tbw-grid');

grid.gridConfig = {
  columns: [
    { field: 'id', header: 'ID' },
    { field: 'name', header: 'Name' },
    { field: 'email', header: 'Email' },
    { field: 'actions', header: 'Actions', printHidden: true }, // Hidden when printing
  ],
  features: { print: true },
};

The printHidden property:

• Temporarily hides columns when print() is called
• Automatically restores column visibility after printing
• Preserves the original hidden state (if a column was already hidden, it stays hidden)
• Works independently of the VisibilityPlugin

🖨️ Print Grid The "Actions" column has printHidden: true and will not appear in the printout.

Show source

Row Limits

Two separate options control large dataset behavior:

• warnThreshold - Shows a confirmation dialog when row count exceeds this value, letting users consent to a potentially slow print operation
• maxRows - Hard-limits the printed rows to this number (excess rows are not rendered)

⚠️ This grid has 1,000 rows. The plugin uses warnThreshold: 500 (shows confirmation dialog) and maxRows: 100 (hard limit). Check the print preview to see only 100 rows.

🖨️ Print Grid (max 100 rows)

// Warn at 500+ rows, but print all if confirmed
features: { print: { warnThreshold: 500 } }

// Hard limit to 100 rows (no warning, just limits)
features: { print: { maxRows: 100, warnThreshold: 0 } }

// Warn at 500+ rows AND hard limit to 1000
features: { print: { warnThreshold: 500, maxRows: 1000 } }

The confirmation dialog shows:

• Total row count
• Note about hard limit (if maxRows is set)
• Option to proceed or cancel

Events

The plugin emits events during the print lifecycle:

🖨️ Print Grid

Event Log:

print-start

Fired when print preparation begins:

grid.on('print-start', ({ rowCount, limitApplied, originalRowCount }) => {
  console.log('Preparing rows:', rowCount);
  console.log('Limit applied:', limitApplied);
  if (limitApplied) {
    console.log('Original count:', originalRowCount);
  }
});

print-complete

Fired when the print dialog closes:

grid.on('print-complete', ({ duration, rowCount }) => {
  console.log('Dialog open for:', duration, 'ms');
  console.log('Rows prepared:', rowCount);
});

Note

Browsers don’t expose whether the user clicked “Print” or “Cancel”. The success field only indicates whether the plugin encountered an error preparing the print dialog - it does NOT indicate the user’s choice.

Programmatic API

print(params?)

Initiates the print process. Returns a Promise that resolves when printing completes.

const plugin = grid.getPluginByName('print');

// Basic print (prints entire page)
await plugin.print();

// With runtime overrides
await plugin.print({
  title: 'Custom Report Title',
  orientation: 'portrait',
});

// Isolated print - opens new window with only the grid
await plugin.print({ isolate: true });

Print Parameters

Parameter	Type	Description
orientation	'portrait' | 'landscape'	Override page orientation
title	string	Override print title
maxRows	number	Override maximum rows
isolate	boolean	Print with page isolation (hides all non-grid content)

Isolated Printing

When isolate: true is passed, the plugin uses CSS to hide everything on the page except the grid during printing. This is useful when:

• The page has navigation, sidebars, or headers that shouldn’t appear in print
• You want to print only the grid without surrounding UI
• The grid is embedded in an application framework like Storybook, Angular, etc.

// Print just the grid, hiding all other page content
await plugin.print({ isolate: true });

How it works:

1. A temporary @media print stylesheet is injected
2. The stylesheet hides all elements except the grid (identified by its unique ID)
3. After printing, the stylesheet is removed
4. The grid stays in place with virtualization disabled, so ALL rows are printed

isPrinting()

Returns true if a print operation is currently in progress.

if (plugin.isPrinting()) {
  console.log('Print already in progress');
}

Print CSS Classes

The plugin applies these CSS classes during printing:

Class	Description
.print-portrait	Applied when orientation is portrait
.print-landscape	Applied when orientation is landscape
.tbw-print-header	Print header container
.tbw-print-header-title	Title element
.tbw-print-header-timestamp	Timestamp element

Custom Print Styles

Override print styles using CSS:

@media print {
  tbw-grid.print-landscape {
    /* Custom print styles */
    font-size: 10pt;
  }

  tbw-grid.print-landscape .dg-cell {
    border-color: #000;
  }
}

How It Works

1. Disable Virtualization - Temporarily renders all rows (up to maxRows)
2. Apply Print Styles - Adds print-mode CSS class and orientation class
3. Add Print Header - Inserts title and timestamp (if configured)
4. Trigger Print - Calls window.print()
5. Cleanup - Restores virtualization and removes temporary elements

Browser Support

The Print Plugin uses standard browser printing APIs (window.print(), @media print) and works in all modern browsers:

• Chrome / Edge (Chromium)
• Firefox
• Safari

Best Practices

1. Set reasonable maxRows - Consider limiting to ~5000 rows to prevent browser hangs
2. Use landscape for wide grids - More columns fit horizontally
3. Test print preview - Use browser’s print preview to verify layout
4. Custom titles - Provide meaningful titles for printed reports
5. Use printHidden for interactive columns - Hide action buttons, checkboxes, etc.
6. Use isolate: true - When other page content interferes with print layout

Standalone Utility Function

For simple use cases where you don’t need the full plugin, use the standalone printGridIsolated function:

import { queryGrid } from '@toolbox-web/grid';
import { printGridIsolated } from '@toolbox-web/grid/plugins/print';

const grid = queryGrid('tbw-grid');
await printGridIsolated(grid, {
  orientation: 'landscape',
});

This function injects a temporary CSS stylesheet that hides everything except the target grid during printing. The grid must have an id attribute (DataGridElement auto-generates one if not explicitly set).

Note: Unlike the PrintPlugin, this function does NOT disable virtualization. If you need to print all rows, use the full PrintPlugin with isolate: true.

See Also

• Export — Export to CSV/JSON
• Selection — Row/cell selection