Table - Print

Through the built-in printing function, table data can be printed in a beautiful format, supporting custom titles, headers/footers, specific columns, pagination, printing multiple tables, and custom templates.

Print Table

The most basic printing method, using the component instance method print() to generate a print preview in a new window.

Print Table

Custom Header and Footer

Custom the top and bottom content of the printed page via headerHtml and footerHtml.

Custom Header and Footer

Advanced Print

Multiple options can be configured such as Title, No., Time, Count, and Paper orientation.

Advanced Print

Specify Columns

Control the columns to be printed by checking/unchecking.

Specify Columns

Custom Header/Title

Build complex company headers, including company name, report name, and report number via headerHtml.

Custom Header/Title

Custom Footer/Page Number

Add signature lines such as created by, approved by, and date via footerHtml.

Custom Footer

Set Margins

Configure the top, right, bottom, and left margins of the printed page via margin.

Set Margins

Paginate the Table for Printing

Set the maximum number of rows per page via pageSize for automatic pagination. Use showPageNumber to display page numbers.

Pagination Print

Print Multiple Tables

Print multiple tables with different data at once using the printMultiple method, with each table automatically paginated.

Print Multiple Tables

Print Shipping Order

The printTemplate method allows for the printing of completely custom HTML templates, such as shipping orders, invoices, reports, etc.

Print Shipping Order

API

print(config?) Method

Property	Description	Type	Default
title	Print title	string	—
showIndex	Whether to show the index (No.) column	boolean	false
indexTitle	Index column title	string	'No.'
columns	Specify columns to print (prop array)	string[]	All visible columns
excludeColumns	Exclude columns	string[]	—
data	Custom print data	Record<string, unknown>[]	Current data
formatCell	Format cell content	(value, column, row) => string	—
headerHtml	Custom header HTML	string	—
footerHtml	Custom footer HTML	string	—
margin	Page margins	{ top?, right?, bottom?, left? }	10mm
orientation	Page orientation	'portrait' | 'landscape'	'portrait'
showTime	Whether to show print time	boolean	true
showCount	Whether to show record count	boolean	true
columnTitles	Custom Column Titles	Record<string, string>	—
pageSize	Maximum rows per page	number	—
showPageNumber	Whether to show page numbers	boolean	false
tableStyle	Custom table style	string	—
extraCss	Extra CSS	string	—
autoPrint	Automatically pop up print dialog	boolean	false
beforePrint	Callback before print	() => boolean	—
afterPrint	Callback after print	() => void	—

printMultiple(tables, config?) Method

Print multiple tables at once; each table is automatically paginated.

Parameter	Description	Type
tables	Table configuration array	Array<{ title?, data, columns?, config? }>
config	Global configuration	Same as print(config)

printTemplate(html, config?) Method

Print a completely custom HTML template.

Parameter	Description	Type
html	Custom HTML content	string
config	Print configuration	Same as print(config)

Notes

• Printing depends on window.open(); ensure the browser allows popups.
• Print styles are implemented via inline CSS to ensure correct rendering in the print preview.
• Use the @page CSS rule to control page orientation and margins.
• Pagination is implemented using page-break-after: always.
• autoPrint: true automatically pops up the print dialog after the window opens.