CODEWITHSUNDEEP
jspdfjspdf-autotable
Magno Alberto
Magno Alberto

Reputation: 668

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

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
                },
            });

jsPDF table side by side

enter image description here

Upvotes: 1

Views: 1427

Answers (1)

Magno Alberto
Magno Alberto

Reputation: 668

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'));

Upvotes: 1

Related Questions