Nested tables in a pdf using jspdf and jspdf-autotable

Nested tables in pdf

How to achieve nested tables in a PDF using jspdf and jspadf-autotable? Something similar to the picture below:

8,041 3 3 gold badges 62 62 silver badges 90 90 bronze badges asked Sep 8, 2016 at 9:12 75 1 1 gold badge 2 2 silver badges 5 5 bronze badges

2 Answers 2

There is no native support for having nested tables in jspdf-autotable but you can draw any content (including other autotables) with the didDrawCell hook.

var elem = document.getElementById("generate"); elem.onclick = function () < var doc = new jsPDF(); doc.autoTable(< html: '#table', didDrawCell: function (data) < if (data.column.dataKey === 5 && data.cell.section === 'body') < doc.autoTable(< head: [["One", "Two", "Three", "Four"]], body: [ ["1", "2", "3", "4"], ["1", "2", "3", "4"], ["1", "2", "3", "4"], ["1", "2", "3", "4"] ], startY: data.cell.y + 2, margin: , tableWidth: 'wrap', theme: 'grid', styles: < fontSize: 7, cellPadding: 1, >>); > >, columnStyles: < 5: >, bodyStyles: < minCellHeight: 30 >>); doc.save('table.pdf'); >;
   
  
ID First name Last name Email Country Table 
   
1 Donna Moore [email protected] China 
 
2 Janice Henry [email protected] Ukraine 
 
3 Ruth Wells [email protected] Trinidad and Tobago 
 
4 Jason Ray [email protected] Brazil 
 
5 Jane Stephens [email protected] United States 
 
6 Adam Nichols [email protected] Canada
answered Sep 8, 2016 at 10:14 Simon Bengtsson Simon Bengtsson 8,041 3 3 gold badges 62 62 silver badges 90 90 bronze badges Thanks Simon, I believe it will fulfill my requirements. Commented Sep 8, 2016 at 10:22

Sweet! Sorry for the messy code for doing this at the moment. Will improve it at some point in the library.

Commented Sep 8, 2016 at 10:23 Awesome answer @SimonBengtsson Commented Sep 10, 2016 at 5:51

great @SimonBengtsson, thank you! For others who have issue with more pages (like i had), Simon's solution can be extended with storing page number beside positions and using doc.setPage before the creation of nested table with autoTable method

Commented Dec 8, 2016 at 16:59 @SimonBengtsson How can you change the rows height, if the inner tables are not the same size? Commented Jul 24, 2017 at 2:39

To add nested table using jspdf and jspdf-autotable and to make it dynamic so the data in both table and nested table are coming from a service or from the user: I am using React but you can implement it in vanila JS or any other library or framework.

1.add the main table in the "html page" or "jsx" you can map through array instead of adding static table rows:

 
  >> 
 
Column1 Column2 Column3 Column4 Column5-Table 
   
1 row1 row1 row1 
 
2 row2 row2 row2 
 
1 row3 row3 row3 
 
3 row4 row4 row4
  1. downloadPDF Function in here we need to track the index to give the nested table the right data "not to be static or same data for all the nested tables":
const downloadPDF = () => < const doc = new jsPDF(); doc.autoTable(< headStyles: < valign: 'middle', halign: 'center', >, html: '#table', didDrawCell: function (data) < let neastedTableData = [ [ ['32423423', 'ady arabiat-1', 'false', '2022-07-07'], ['32423423', 'ady arabiat-1', 'false', '2022-07-07'], ], [ ['32423423', 'ady arabiat-2', 'false', '2022-07-07'], ['32423423', 'ady arabiat-2', 'false', '2022-07-07'], ], [ ['32423423', 'ady arabiat-3', 'false', '2022-07-07'], ['32423423', 'ady arabiat-3', 'false', '2022-07-07'], ['32423423', 'ady arabiat-3', 'false', '2022-07-07'], ['32423423', 'ady arabiat-3', 'false', '2022-07-07'], ['32423423', 'ady arabiat-3', 'false', '2022-07-07'], ], [ ['32423423', 'ady arabiat-4', 'false', '2022-07-07'], ['32423423', 'ady arabiat-4', 'false', '2022-07-07'], ['32423423', 'ady arabiat-4', 'false', '2022-07-07'], ['32423423', 'ady arabiat-4', 'false', '2022-07-07'], ['32423423', 'ady arabiat-4', 'false', '2022-07-07'], ], [ ['32423423', 'ady arabiat-5', 'false', '2022-07-07'], ['32423423', 'ady arabiat-5', 'false', '2022-07-07'], ['32423423', 'ady arabiat-5', 'false', '2022-07-07'], ], [ ['32423423', 'ady arabiat-6', 'false', '2022-07-07'], ['32423423', 'ady arabiat-6', 'false', '2022-07-07'], ['32423423', 'ady arabiat-6', 'false', '2022-07-07'], ], ]; if (data.column.dataKey === 4 && data.cell.section === 'body') < let index = data.row.index; //check the index so you add the data for the nested Table dynamically depends on which row you are in doc.autoTable(< head: [ [ 'N-Column1', 'N-Column2', 'N-Column3', 'N-Column4', ], ], body: neastedTableData[index], //index here startY: data.cell.y + 2, margin: < left: data.cell.x + data.cell.padding('left'), >, tableWidth: 'wrap', theme: 'grid', styles: < fontSize: 7, cellPadding: 2, >, >); > >, columnStyles: < 4: < cellWidth: 85 >, >, bodyStyles: < minCellHeight: 45, >, >); doc.save('table.pdf'); >;