Jspdf-autotable: Two Table Single Row

[shubhamyugtia001]

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', 'shubham', 'dave', 'milan', '13245']);
    data.push(['2', 'haresh', ' 11324', '', '132453' ]);
    data.push(['3', 'milan', 'vadher', '12345', '']);
    data.push(['4', 'axay', '', '' , '']);
    data.push(['5']);

    doc.autoTable({
      startY: curruntHeight,
      startX: 10,
      endX: 90,
      margin: 10,
      willDrawCell: drawCell,
      head: [['Sr.No', 'Particulars', 'Qty. after inert deduction', 'Price/Kg or Price/Pcs (Rs)', 'Amount (Rs)']],
      body: data,
      theme: 'grid',
      headStyles: { fillColor: [255, 255, 255], textColor: [0, 0, 0], lineWidth: 0.3, lineColor: [0, 0, 0] },
      bodyStyles: {
        textColor: [0, 0, 0],
        lineWidth: 0.3, lineColor: [0, 0, 0]
      },
      columnStyles: {
        0: { columnWidth: 1, halign: 'left' },
        1: { columnWidth: 1, halign: 'center'},
        2: { columnWidth: 1, halign: 'right' },
        3: { columnWidth: 1, halign: 'right' },
        4: { columnWidth: 1, halign: 'right' },
      },
    });

    const data1 = [];

    data1.push([ '1', 'dashdkjaksd``', 'dave', 'milan', '13245']);
    data1.push(['2', 'haresh', ' 11324', '', '132453' ]);
    data1.push(['3', 'milan', 'vadher', '12345', '']);
    data1.push(['4', 'axay', '', '' , '']);
    data1.push(['5']);

    doc.autoTable({
      startY: curruntHeight + 20,
      startX: 160,
      endX: 250,
      margin: 10,
      willDrawCell: drawCell,
      head: [['Sr.No', 'Particulars', 'Qty. after inert deduction', 'Price/Kg or Price/Pcs (Rs)', 'Amount (Rs)']],
      body: data1,
      theme: 'grid',
      headStyles: { fillColor: [255, 255, 255], textColor: [0, 0, 0], lineWidth: 0.3, lineColor: [0, 0, 0] },
      bodyStyles: {
        textColor: [0, 0, 0],
        lineWidth: 0.3, lineColor: [0, 0, 0]
      },
      columnStyles: {
        0: { columnWidth: 10, halign: 'left' },
        1: { columnWidth: 10, halign: 'center'},
        2: { columnWidth: 10, halign: 'right' },
        3: { columnWidth: 10, halign: 'right' },
        4: { columnWidth: 10, halign: 'right' },
      },
    });

now how to use the data to show the 2 tab;le in same row

[shubhamyugtia001]

Image of the tables

[shubhamyugtia001]

I haven't found any solution regarding this waiting.
Waiting for your reply !! @simonbengtsson

[shubhamyugtia001]

is there any solution for this @simonbengtsson ??

its been a week eagerly waiting for the solution :+1:

[Subtletree]

Can't find any documentation for startX and endX.

Instead, add margin: { left: x } to the second table and set tableWidth on both tables.

There's an example here that uses left margin on one table and right margin on the other table
https://github.com/simonbengtsson/jsPDF-AutoTable/blob/3a2f64f113bafec212e5680aba22f548168b670c/examples/examples.js#L136-L153

[shubhamyugtia001]

let me check this @Subtletree :+1:

[shubhamyugtia001]

Yes by using margin parameter and some other changes we can implement two tables in a single row.
Thank You @Subtletree for helping me out

[dkaklamanis]

if you want to add three tables in a single row? @Subtletree @simonbengtsson @shubhamyugtia001

[Todorovikj]

autoTable(doc, {
head: [salesObjects[0]],
headStyles: {fillColor: 'gray'},
body: salesObjects.slice(1, salesObjects.length),
margin: {horizontal: 0},
startY: 20,
styles: {fontSize: 12},
tableWidth: 150,
tableId: 'salesTable'
});

autoTable(doc, {
head: [depositObjects[0]],
headStyles: {fillColor: 'gray'},
body: depositObjects.slice(1, depositObjects.length),
margin: {horizontal: 160},
styles: {fontSize: 12},
startY: 20,
tableWidth: 150
});

Example with 2 tables in one row.
I think you can see the fields that are data actually