Repeated Table Headers

The Drawing library enables you to render recurrent table headers.

If you want the <thead> elements, or the headers of Kendo UI Grid widgets, to be repeated on each page, pass the repeatHeaders: true option.


    <script>
      function exportPDF(){
        kendo.drawing.drawDOM("#grid", {
           paperSize: "A4",
           margin: "2cm",
           landscape: true,
           forcePageBreak: ".my-page-break",
           repeatHeaders:true
        }).then(function(group){
          kendo.drawing.pdf.saveAs(group, "filename.pdf");
        });
      }
    </script>

    <button class="k-button" onclick="exportPDF()">Export</button>
    <table id="grid">
      <thead>
        <tr>
          <th>Car Make</th>
          <th>Car Model</th>
          <th>Year</th>
          <th>Category</th>
          <th>Air Conditioner</th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <td>Volvo</td>
          <td>S60</td>
          <td>2010</td>
          <td>Saloon</td>
          <td>Yes</td>
        </tr>
        <tr>
          <td>Audi</td>
          <td>A4</td>
          <td>2002</td>
          <td>Saloon</td>
          <td>Yes</td>
        </tr>
        <tr>
          <td>BMW</td>
          <td>535d</td>
          <td>2006</td>
          <td>Saloon</td>
          <td>Yes</td>
        </tr>
        <tr>
          <td>BMW</td>
          <td>320d</td>
          <td>2006</td>
          <td>Saloon</td>
          <td>No</td>
        </tr>
        <tr class="my-page-break">
          <td>VW</td>
          <td>Passat</td>
          <td>2008</td>
          <td>Saloon</td>
          <td >Yes</td>
        </tr>
        <tr>
          <td>Peugeot</td>
          <td>407</td>
          <td>2006</td>
          <td>Saloon</td>
          <td>Yes</td>
        </tr>
        <tr>
          <td>Honda</td>
          <td>Accord</td>
          <td>2008</td>
          <td>Saloon</td>
          <td>No</td>
        </tr>
        <tr>
          <td>Alfa Romeo</td>
          <td>159</td>
          <td>2008</td>
          <td>Saloon</td>
          <td>No</td>
        </tr>
        <tr>
          <td>Nissan</td>
          <td>Almera</td>
          <td>2001</td>
          <td>Saloon</td>
          <td>Yes</td>
        </tr>
        <tr>
          <td>Mitsubishi</td>
          <td>Lancer</td>
          <td>2008</td>
          <td>Saloon</td>
          <td>Yes</td>
        </tr>
      </tbody>
    </table>

See Also

In this article
Not finding the help you need? Improve this article