The second table is most likely printed on top of the first one. You would have to specify the start position of the second table like so:

var res = doc.autoTableHtmlToJson(document.getElementById('tbl1'));
doc.autoTable(res.columns, res.data);
var res2 = doc.autoTableHtmlToJson(document.getElementById('tbl2'));
doc.autoTable(res2.columns, res2.data, {
    startY: doc.lastAutoTable.finalY + 50
});
Answer from Simon Bengtsson on Stack Overflow
🌐
npm
npmjs.com › package › jspdf-autotable
jspdf-autotable - npm
--></table> autoTable(doc, { html: '#my-table' }) // Or use javascript directly: autoTable(doc, { head: [['Name', 'Email', 'Country']], body: [ ['David', '[email protected]', 'Sweden'], ['Castille', '[email protected]', 'Spain'], // ... ], }) doc.save('table.pdf') You can also use the plugin methods directly on the jsPDF documents:
      » npm install jspdf-autotable
    
Published   Feb 26, 2025
Version   5.0.2
Author   Simon Bengtsson
🌐
GitHub
github.com › simonbengtsson › jsPDF-AutoTable
GitHub - simonbengtsson/jsPDF-AutoTable: jsPDF plugin for generating PDF tables with javascript
--></table> autoTable(doc, { html: '#my-table' }) // Or use javascript directly: autoTable(doc, { head: [['Name', 'Email', 'Country']], body: [ ['David', '[email protected]', 'Sweden'], ['Castille', '[email protected]', 'Spain'], // ... ], }) doc.save('table.pdf') You can also use the plugin methods directly on the jsPDF documents:
Starred by 2.5K users
Forked by 637 users
Languages   TypeScript 89.5% | HTML 7.6% | JavaScript 2.9%
🌐
CodePen
codepen.io › someatoms › pen › adojWy
Two tables and header with jspdf-autotable
<button onclick="generate()">Generate [email protected]</td> <td>Canada</td> <td>18.186.38.37</td> </tr> </tbody> </table> ... function generate() { var doc = new jsPDF('p', 'pt'); var res = doc.autoTableHtmlToJson(document.getElementById("basi...
🌐
Simonbengtsson
simonbengtsson.github.io › jsPDF-AutoTable
AutoTable sample
Multiple tables · Header and footer · Default options · Column styles · Rowspan and colspan · Themes · Nested · Custom style · Custom borders · Horizontal Page Break · Horizontal Page Break Repeat · Horizontal Page Break Behaviour Download PDF · It appears you don't have PDF support ...
🌐
Phppot
phppot.com › javascript › jspdf-autotable
jsPDF AutoTable example – Table to PDF - Phppot
PDF tables generation from HTML or JavaScript array using jsPDF AutoTables plugin.
🌐
GitHub
github.com › parallax › jsPDF › issues › 822
jsPDF auto table multiple tables · Issue #822 · parallax/jsPDF
I am using JSPDF and Auto-table plugin for multiple tables. but when table height increase from one page 2nd table overlap on 1st table. here is my code http://jsbin.com/jugusoqici/edit?html,js,con...
Find elsewhere
🌐
CodePen
codepen.io › mmghv › pen › jOPjdGJ
jsPDF-AutoTable: Multi-section table - multiple tables wrap
// https://github.com/simonbengtsson/jsPDF-AutoTable/issues/626 function createRows(count) { const rows = []; for (let i = 1; i <= count; i++) { rows.push([i, `Name ${i}`, `Email ${i}`]) } return rows; } function generatePDF() { const doc = new jsPDF('p', 'mm', 'a4'); // overall margin const margin = { left: 15, right: 15, top: 20, bottom: 20, }; const tablesCount = parseInt(document.getElementById('tables').value); const rowsCount = parseInt(document.getElementById('rows').value); // number of table sections in the page const sections = parseInt(document.getElementById('sections').value); //
🌐
GitHub
github.com › simonbengtsson › jsPDF-AutoTable › issues › 10
Multiple Tables · Issue #10 · simonbengtsson/jsPDF-AutoTable
doc.setFontSize(20); doc.text($scope.selectedDay.name, 40, 48); angular.forEach($scope.selectedDay.sets, function (set) { angular.forEach(set.meals, function (meal) { var rows = []; angular.forEach(meal.items, function (item) { rows.push({ "food": item.food.name, "amount": item.amount, "servingSize": "cup", "protein": "0", "carbs": "0", "fat": "0", "calories": "0" }); }); doc.autoTable(cols, rows, { margins: { horizontal: 40, top: 60, bottom: 40 }}); }); }); doc.save('table.pdf'); ... Everything seems to be in order, however since you don't specify the startY position, they all get printed on the same place. Checkout the multiple tables example in examples/examples.js for an example how to use the startY option.
Published   Apr 03, 2015
Author   mpaul31
🌐
GitHub
github.com › simonbengtsson › jsPDF-AutoTable › issues › 253
Multiple tables example: Table breaking to 3rd page in the example provided · Issue #253 · simonbengtsson/jsPDF-AutoTable
March 10, 2017 - Hi Folks, Great work on this project! :) I am facing an issue while working with multiple tables example. Some of the rows from 'bottom left' and 'bottom right' tables are coming up in page 1 which is perfect. In 2nd page the remaining r...
Published   Apr 13, 2017
Top answer
1 of 2
14

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 () {
const doc = new jsPDF();
autoTable(doc, {
    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: {left: data.cell.x + data.cell.padding('left')},
                tableWidth: 'wrap',
                theme: 'grid',
                styles: {
                    fontSize: 7,
                    cellPadding: 1,
                }
            });
        }
    },
    columnStyles: {
        5: {cellWidth: 40}
    },
    bodyStyles: {
        minCellHeight: 30
    }
});
doc.save('table.pdf');
};
<script src="https://cdnjs.cloudflare.com/ajax/libs/jspdf/1.5.3/jspdf.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jspdf-autotable/3.2.3/jspdf.plugin.autotable.min.js"></script>
<button id="generate">Generate PDF</button>

<table id="table" style="display: none;">
    <thead>
    <tr>
        <th>ID</th>
        <th>First name</th>
        <th>Last name</th>
        <th>Email</th>
        <th>Country</th>
        <th>Table</th>
    </tr>
    </thead>
    <tbody>
    <tr>
        <td align="right">1</td>
        <td>Donna</td>
        <td>Moore</td>
        <td>[email protected]</td>
        <td>China</td>
        <td></td>
    </tr>
    <tr>
        <td align="right">2</td>
        <td>Janice</td>
        <td>Henry</td>
        <td>[email protected]</td>
        <td>Ukraine</td>
        <td></td>
    </tr>
    <tr>
        <td align="right">3</td>
        <td>Ruth</td>
        <td>Wells</td>
        <td>[email protected]</td>
        <td>Trinidad and Tobago</td>
        <td></td>
    </tr>
    <tr>
        <td align="right">4</td>
        <td>Jason</td>
        <td>Ray</td>
        <td>[email protected]</td>
        <td>Brazil</td>
        <td></td>
    </tr>
    <tr>
        <td align="right">5</td>
        <td>Jane</td>
        <td>Stephens</td>
        <td>[email protected]</td>
        <td>United States</td>
        <td></td>
    </tr>
    <tr>
        <td align="right">6</td>
        <td>Adam</td>
        <td>Nichols</td>
        <td>[email protected]</td>
        <td>Canada</td>
        <td></td>
    </tr>
    </tbody>
</table>
2 of 2
0

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:

<div className="App">
        <button
            onClick={downloadPDF}
            style={{
                marginTop: 20,
                background: 'blue',
                color: 'white',
                width: '200px',
                height: '50px',
            }}
        >
            Download as PDF
        </button>
        <table id="table" style={{ display: 'none' }}>
            <thead>
                <tr>
                    <th align="center">Column1</th>
                    <th align="center">Column2</th>
                    <th align="center">Column3</th>
                    <th align="center">Column4</th>
                    <th align="center">Column5-Table</th>
                </tr>
            </thead>
            <tbody>
                <tr>
                    <td align="center">1</td>
                    <td>row1</td>
                    <td>row1</td>
                    <td>row1</td>
                    <td></td>
                </tr>
                <tr>
                    <td align="center">2</td>
                    <td>row2</td>
                    <td>row2</td>
                    <td>row2</td>
                    <td></td>
                </tr>
                <tr>
                    <td align="center">1</td>
                    <td>row3</td>
                    <td>row3</td>
                    <td>row3</td>
                    <td></td>
                </tr>
                <tr>
                    <td align="center">3</td>
                    <td>row4</td>
                    <td>row4</td>
                    <td>row4</td>
                    <td></td>
                </tr>
            </tbody>
        </table>
    </div>
  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');
    };
🌐
UNPKG
unpkg.com [email protected] › README.md
Unpkg
If you want to know something about ... other things that has the value of the last printed y coordinate on a page. This can be used to draw text, multiple tables or other content after a table....
🌐
GitHub
github.com › simonbengtsson › jsPDF-AutoTable › issues › 249
I want to print multiple dynamic tables to pdf but it shows only the first one · Issue #249 · simonbengtsson/jsPDF-AutoTable
<?php require 'include/header.html'; require 'php/database.php'; function convertToHoursMins($time, $format = 'd:d') { if ($time < 1) { return; } $hours = floor($time / 60); $minutes = ($time % 60); return sprintf($format, $hours, $minutes); } ?> <script src="js/jspdf.min.js"></script> <script src="js/jspdf.plugin.autotable.js"></script> <script type="text/javascript"> function generate() { var doc = new jsPDF('p', 'pt'); var res = doc.autoTableHtmlToJson(document.getElementById("basic-table")); doc.autoTable(res.columns, res.data, {margin: {top: 80}}); var header = function(data) { doc.setF
🌐
GitHub
github.com › JonatanPe › jsPDF-AutoTable
GitHub - JonatanPe/jsPDF-AutoTable
var columns = ["ID", "Name", "Country"]; var rows = [ [1, "Shaw", "Tanzania", ...], [2, "Nelson", "Kazakhstan", ...], [3, "Garcia", "Madagascar", ...], ... ]; // Only pt supported (not mm or in) var doc = new jsPDF('p', 'pt'); doc.autoTable(columns, rows); doc.save('table.pdf');
Starred by 17 users
Forked by 4 users
Languages   TypeScript 81.5% | JavaScript 18.5%
🌐
Stack Overflow
stackoverflow.com › questions › 72287179 › how-to-put-multiple-horizontally-tables-in-jspdf-autotable
How to put multiple horizontally tables in jsPDF-autotable - Stack Overflow
I am new to JSPDF and I don't understand how to make 2 tables appear next to each others. I've tried the multiple example in examples/examples.js · var doc = new jspdf.jsPDF('p','pt','a4'); var pageNumber = doc.internal.getNumberOfPages() doc.autoTable({ startY: 240, showHead: 'firstPage', html: '#table', styles: { overflow: 'hidden'}, margin: { left: 107 }, }); doc.setPage(pageNumber) doc.autoTable({ startY: 240, showHead: 'firstPage', html: '#table', styles: { overflow: 'hidden'}, margin: { right: 107 }, });
🌐
GitHub
github.com › simonbengtsson › jsPDF-AutoTable › issues › 424
Multiple Tables side-by-side multiple pages don't align · Issue #424 · simonbengtsson/jsPDF-AutoTable
Looking at the Multiple Tables example, the two side-by-side tables align on the first page that they are displayed, but as they extend to a second page, they are no longer side-by-side.
🌐
UNPKG
unpkg.com › browse › [email protected] › README.md
jspdf-autotable
]; var rows = [ {"id": 1, "name": "Shaw", "country": "Tanzania", ...}, {"id": 2, "name": "Nelson", "country": "Kazakhstan", ...}, {"id": 3, "name": "Garcia", "country": "Madagascar", ...}, ... ]; // Only pt supported (not mm or in) var doc = new jsPDF('p', 'pt'); doc.autoTable(columns, rows, { styles: {fillColor: [100, 255, 255]}, columnStyles: { id: {fillColor: 255} }, margin: {top: 60}, beforePageContent: function(data) { doc.text("Header", 40, 30); } }); doc.save('table.pdf'); ``` This plugin exports umd which means that you can use it together with build tools such as webpack, browserify and rollupjs.
🌐
GitHub
github.com › simonbengtsson › jsPDF-AutoTable › issues › 498
Two Table Single Row · Issue #498 · simonbengtsson/jsPDF-AutoTable
February 26, 2019 - How add multiple table in single row. When using startX and endX it doesn't show any progress rather than they are showing the same as the before. const doc = new jsPDF("l", "mm", "a4"); // tslint:disable-next-line:no-shadowed-variable const drawCell = function (data: { doc: any; table: { body: any; }; row: { index: number; }; }) { // tslint:disable-next-line:no-shadowed-variable const doc = data.doc; const rows = data.table.body; if (data.row.index === rows.length - 1) { doc.setFontStyle("bold"); // doc.setFontSize(12); doc.setFillColor(255, 255, 255); } }; const data = []; data.push([ '1', '
Published   May 28, 2019