jsPDF: how to add and/or align two distinct tables next to each other (side by side) - jspdf

Question

I have two tables and I need to put them next to each other.
For example purposes, I used the same dataset, but the table on the left side might have a few more rows.
I found several examples, but I couldn't find a way to get what I expected.
jsPDF v2.3.1
const doc = new jsPDF('p', 'mm', 'A4');
doc.autoTable({
head: [['ID', 'Name', 'Country']],
body: [['1', 'Simon', 'Sweden'], ['2', 'Karl', 'Norway']],
margin: {left: 120}
});
doc.autoTable({
head: [['ID', 'Name', 'Country']],
body: [['1', 'Simon', 'Sweden'], ['2', 'Karl', 'Norway']],
margin: {
// top: 80, // test
right: 120
},
});

Answer 1

After two days of research, so far, apparently the best way was to use a parent table (template) and nest the two tables in each column (td) of the parent table, using the autoTable.didDrawCell() method.
const doc = new jsPDF('p', 'mm', 'A4');
doc.autoTable({
html: '#table-parent',
didDrawCell: function (data) {
// to nest a child table within the first cell of the first row
if (data.row.index === 0 && data.column.index === 0) {
doc.autoTable({
head: [["LEFT", "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,
tableWidth: data.cell.width,
theme: 'plain', // plain | grid
});
// to nest a another child table within the second cell of the first row
if (data.row.index === 0 && data.column.index === 1) {
doc.autoTable({
head: [["RIGHT", "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,
tableWidth: data.cell.width,
theme: 'plain', // plain | grid
});
}
}
}
});
// DOWNLOAD
// doc.save('table.pdf');
// PREVIEW
window.open(doc.output('bloburl'));