Lattice Grid Buy a licence

demo D120

Printing

Virtualisation off for the print pass, then restored

print mode

Building…
Loading a live grid…

The configuration

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@toclocoinc/lattice-grid@1.13.0/lattice-grid.min.css">
<script src="https://cdn.jsdelivr.net/npm/@toclocoinc/lattice-grid@1.13.0/lattice-grid.min.js"></script>

<div id="grid" style="height: 540px"></div>

<script>
  const grid = LatticeGrid.createGrid(document.getElementById('grid'), {
    rowKey: 'id',
    // Print is a rail button rather than something the page does. It calls the
    // browser's own print, so it has to be the visitor asking.
    toolPanel: {
      side: 'left',
      panels: ['columns', 'filters'],
      actions: ['undo', 'redo', 'restore', 'maximise', '-', 'print'],
    },
    columns: [
      // Nothing pinned. A pinned region is a second scroller and paper does not
      // scroll, so a printed grid wants one flat run of columns.
      { field: 'ref', title: 'Invoice', layout: { width: 140 } },
      { field: 'supplier', title: 'Supplier', layout: { flex: 1, min: 200 }, filter: { type: 'set' } },
      { field: 'region', title: 'Region', filter: { type: 'set' } },
      { field: 'category', title: 'Category', filter: { type: 'set' } },
      { field: 'quantity', title: 'Qty', type: 'number', layout: { width: 110 } },
      { field: 'amount', title: 'Amount', type: 'number', layout: { width: 150 },
        format: { style: 'currency', currency: 'GBP', decimals: 2 }, total: 'sum',
        filter: { type: 'number' } },
    ],
    rows,  // 400 supplier charge records
  });
</script>

Printing a virtualised JavaScript data grid without losing rows

A grid that renders only the rows and columns inside the viewport is fast on screen but wrong on paper: a browser’s print pass lays out the DOM as it stands, so a virtualised grid would print only the handful of rows currently mounted. Lattice Grid’s print mode addresses this by disabling virtualisation for the print pass, mounting every row and column so the browser’s own pagination can flow the full data set across pages, then restoring windowed rendering once the print dialogue closes. Reach for this whenever a report, an audit trail, or a filtered view needs to leave the browser as physical or PDF pages rather than stay on screen. The grid enters print mode automatically on a beforeprint event and leaves it on afterprint, so no manual toggle is needed around a call to window.print().

Because the switch is automatic, the sort order, active filters, and column visibility in place at the moment of printing are what appears on the page, not a separate export snapshot that could drift from what the user was looking at. For a grid holding a million rows, mounting every row for print is a one-off cost paid only during that pass; the grid returns to virtual scrolling immediately afterwards, so ordinary interaction is unaffected once the print window closes.

How do you print a large data grid without missing rows?

Call window.print() (or trigger print-to-PDF) against a grid with print mode enabled. Lattice Grid listens for the beforeprint event, disables row and column virtualisation so every row mounts into the DOM for pagination, then listens for afterprint to restore normal virtual scrolling, so nothing needs to be toggled by hand before or after.

Related demos