How add a table as header on each page with jsPDF and autoTable

Question

I will have a flexible table on the pdf... so if it is very big, autoTable will split it in different pages... right? In that point, if the table will be splitted in different pages, I want to put a table AS HEADER on each page...

I tried the hooks beforePageContent & autoTableAddPageContent but I couldn't make it work... I'm calling doc.autoTable inside:

let columns = [
  {title: "ID", dataKey: "id"},
  {title: "Name", dataKey: "name"},
  {title: "Email", dataKey: "email"}
];

let data = [
  {id: 1, name: "A", email: "[email protected]"}, 
  {id: 2, name: "B", email: "[email protected]"}
];

let options = { startY: 30 };

doc.autoTable(columns, data, options);

What options do I have?

I had use jsPDF with autoTable so know the basics

Thankyou

Answer 1

I you want to add a table on each page you can simply call doc.autoTable multiple times. Here is a simple example:

var doc = new jsPDF('p', 'pt');
var headers = ["Header 1", "Header 2"];
var rows = [["Cell 1", "Cell 2"], ["Cell 1", "Cell 2"]];

doc.autoTable(headers, rows);
doc.text("Some content...", 40, doc.autoTableEndPosY() + 40);

doc.addPage();

doc.autoTable(headers, rows);
doc.text("Some content...", 40, doc.autoTableEndPosY() + 40);


doc.save("table.pdf");

<script src="https://cdnjs.cloudflare.com/ajax/libs/jspdf/1.3.2/jspdf.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jspdf-autotable/2.1.0/jspdf.plugin.autotable.js"></script>

Answer 2

To show table headers on each page using jsPDF-Autotable, we can use below option.

showHead: 'everyPage'

Official jsPDF-AutoTable documentation link https://github.com/simonbengtsson/jsPDF-AutoTable#other-options