Print Support

PrintManager enables printing canvas-rendered tables by generating a temporary DOM <table> element and injecting @media print CSS. Since canvas content is not included in the browser print flow, the print manager reconstructs the visible data as an HTML table at print time.

Live Demo

Click Print to generate an HTML table from canvas data and open the browser print dialog. Sorted/filtered data is respected.

🖨️ Print Table

View source code

PrintSupportDemo.tsx

import { useRef } from 'react';
import { WitTable } from '@witqq/spreadsheet-react';
import type { WitTableRef } from '@witqq/spreadsheet-react';
import { DemoWrapper } from './DemoWrapper';
import { generateEmployees, employeeColumns } from './generate-data';
import { useSiteTheme } from './useSiteTheme';

const data = generateEmployees(100);

export function PrintSupportDemo() {
  const { witTheme } = useSiteTheme();
  const tableRef = useRef<WitTableRef>(null);

  return (
    <DemoWrapper title="Live Demo" description="Click Print to generate an HTML table from canvas data and open the browser print dialog. Sorted/filtered data is respected." height={440}>
      <div style={{ display: 'flex', flexDirection: 'column', height: '100%' }}>
        <div style={{ padding: '0.5rem 0.75rem', borderBottom: '1px solid #e2e8f0', flexShrink: 0 }}>
          <button
            onClick={() => tableRef.current?.print()}
            style={{ padding: '4px 12px', cursor: 'pointer' }}
          >
            🖨️ Print Table
          </button>
        </div>
        <div style={{ flex: 1 }}>
          <WitTable
            theme={witTheme}
            ref={tableRef}
            columns={employeeColumns}
            data={data}
            showRowNumbers
            sortable
            style={{ width: '100%', height: '100%' }}
          />
        </div>
      </div>
    </DemoWrapper>
  );
}

The print output respects DataView — if the table is filtered or sorted, only the filtered/sorted data is printed.

Print Button

Trigger printing through the table ref:

import { useRef } from 'react';
import { WitTable, WitTableRef } from '@witqq/spreadsheet-react';

function App() {
  const ref = useRef<WitTableRef>(null);

  return (
    <>
      <button onClick={() => ref.current?.print()}>
        Print Table
      </button>
      <WitTable
        ref={ref}
        columns={columns}
        data={data}
      />
    </>
  );
}

maxPrintRows

Large datasets are capped at maxPrintRows (default: 10,000) to prevent browser freezes. When truncated, a notice is appended to the printed output indicating how many rows were omitted.

<WitTable
  ref={ref}
  columns={columns}
  data={data}
  maxPrintRows={5000}
/>

How It Works

1. PrintManager reads all visible rows from DataView
2. Generates an HTML <table> with column headers and cell values
3. Injects @media print CSS that hides the canvas and shows the table
4. Calls window.print()
5. Cleans up the temporary DOM elements after printing

API Reference

PrintManager

Method	Signature	Description
attach	(engine: WitEngine) => void	Attach to engine instance
detach	() => void	Detach and clean up
print	() => void	Generate DOM table and trigger print