Lattice Grid Buy a licence

demo D120

Printing in htmx

Virtualisation off for the print pass, then restored

print mode

This grid turns virtualisation off for the print pass so every row and column lays out on paper, then restores it afterwards. It fixes the trap where a virtualised grid would print only the handful of rows on screen, so a printout carries the whole table.

Building…
Loading a live grid…

This is the htmx version. A server-rendered table is upgraded in place, so the page is readable before any script runs and gains the full grid when the module loads, which suits a progressively enhanced app.

The configuration

<link rel="stylesheet" href="https://cdn.latticegrid.dev/lattice-grid@1.107.0/lattice-grid.min.css">

<!-- A real, server-rendered table: readable with JavaScript off. data-field on
     each header names the column that cell becomes, and data-id on each row is
     the key the grid carries it under. -->
<table id="printing-table" data-lattice-grid>
  <thead>
    <tr>
      <th data-field="ref">Invoice</th>
      <th data-field="supplier">Supplier</th>
      <th data-field="region">Region</th>
      <th data-field="category">Category</th>
      <th data-field="quantity">Qty</th>
      <th data-field="amount">Amount</th>
    </tr>
  </thead>
  <tbody>
    <tr data-id="L000001"><td>INV-2026-1000</td><td>Northgate Fibre, Ltd</td><td>Cardiff</td><td>Circuit rental</td><td>24</td><td>5630.64</td></tr>
    <tr data-id="L000002"><td>INV-2026-1000</td><td>Selby Ducting</td><td>Cardiff</td><td>Install</td><td>23</td><td>4525.69</td></tr>
    <tr data-id="L000003"><td>INV-2026-1000</td><td>Selby Ducting</td><td>Manchester</td><td>Install</td><td>4</td><td>2025.95</td></tr>
    <!-- the rest of the rows, rendered by your server -->
  </tbody>
</table>

<script type="module">
  import { hydrateTable } from 'https://cdn.latticegrid.dev/lattice-grid@1.107.0/modules/htmx.esm.min.js';

  // The markup carries the rows; a server-rendered table's column types are
  // declared in the config hydrateTable takes. The grid replaces the table
  // where it stood.
  const grid = hydrateTable(document.getElementById('printing-table'), {
    // The print button lays the whole grid out for paper and opens the browser's
    // own print, so a reader can send a clean copy to print or to PDF.
    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' } },
    ],
  });
</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