Repeated Table Headers

The PDF Processing component enables you to render recurrent table headers.

To repeat the <thead> elements on each page, set the repeatHeaders option.

For more information on how to render recurrent table headers with the Drawing library, refer to its PDF output documentation.

import React from 'react';
import ReactDOM from 'react-dom';
import { savePDF } from '@progress/kendo-react-pdf';

import products from './products.json';

class App extends React.Component {
    table;

    constructor(props) {
        super(props);
        this.state = { products, repeatHeaders: true };
    }

    render() {
        return (
            <div>
                <div className="example-config">
                    <div>
                        <input className="k-checkbox" type="checkbox" id="repeatHeaders" checked={this.state.repeatHeaders} onChange={() => {
                            this.setState((prevState) => {
                                return { repeatHeaders: !prevState.repeatHeaders };
                            });
                        }} />
                        <label className="k-checkbox-label mb-2" htmlFor="repeatHeaders">Repeat headers</label>
                    </div>
                    <button className="k-button" onClick={this.exportPDF}>Export PDF</button>
                </div>

                <table class="table" ref={(table) => { this.table = table; }}>
                    <thead>
                        <tr>
                            <th>Product</th>
                            <th>Unit Price</th>
                            <th>Qty</th>
                        </tr>
                    </thead>
                    <tbody>
                        {this.generateRows()}
                    </tbody>
                </table>
            </div>
        );
    }

    generateRows() {
        return this.state.products.map(product => {
            return (
                <tr>
                    <td>{product.ProductName}</td>
                    <td>{product.UnitPrice}</td>
                    <td>{product.QuantityPerUnit}</td>
                </tr>
            );
        });
    }

    exportPDF = () => {
        savePDF(ReactDOM.findDOMNode(this.table), {
            repeatHeaders: this.state.repeatHeaders,
            paperSize: 'A4',
            margin: '2cm'
        });
    }
}

ReactDOM.render(
    <App />,
    document.querySelector('my-app')
);

In this article

 /