How to print tables in React
Łukasz Holeczek
Follow Łukasz Holeczek on GitHub
Connect with Łukasz Holeczek on LinkedIn
Follow Łukasz Holeczek on X (Twitter)
Adding print functionality to tables allows users to create physical or PDF copies of data, which is crucial for reports and documentation. With over 25 years of experience building web applications and as the creator of CoreUI, I’ve implemented print features in numerous enterprise systems. The most effective solution is to use the browser’s native print dialog combined with CSS print media queries to control what gets printed. This approach requires no external libraries and works across all modern browsers.
Use window.print() combined with CSS @media print to create a print-friendly table view.
const PrintableTable = ({ data }) => {
const handlePrint = () => {
window.print()
}
return (
<div>
<button onClick={handlePrint} className='no-print'>Print Table</button>
<table className='printable-table'>
<thead>
<tr>
<th>Name</th>
<th>Email</th>
</tr>
</thead>
<tbody>
{data.map((row, i) => (
<tr key={i}>
<td>{row.name}</td>
<td>{row.email}</td>
</tr>
))}
</tbody>
</table>
</div>
)
}
Add this CSS to your stylesheet:
@media print {
.no-print {
display: none;
}
.printable-table {
width: 100%;
border-collapse: collapse;
}
.printable-table th,
.printable-table td {
border: 1px solid #000;
padding: 8px;
}
}
Best Practice Note
The window.print() function triggers the browser’s print dialog. The @media print CSS rule hides the print button and applies print-specific styles like borders and padding. You can hide navigation, sidebars, and other UI elements by adding the no-print class. This is the same pattern we use in CoreUI admin templates to ensure clean, professional printed reports without unnecessary page elements.
