How can arrange the text and the logo properly?

Question

I wanted to have the logo on the left side of the word "Title" but it is currently at the lower part of the page. And the text "Sample" is being covered by the table. How can I re-arrange these text and images properly?

I recreated it here: https://codesandbox.io/s/js-pdf-with-data-printable-from-displayed-data-lup6ir?file=/src/App.js

Codes:

const handlePrint = () => {
    console.log("clicked");
    const doc = new jsPDF();

    var img = new Image();
    img.src = require("./assets/logo-social.png");

    img.onload = () => {
      // await for the image to be fully loaded
      doc.addImage(img, "png", 10, 78, 12, 15);
      doc.text("Title here", 20, 10);
      doc.text("Sample", 20, 15);

      const columns = ["Data"];
      const rows = [];
      data.map((item) =>
        rows.push([
          item.cartItems.map(
            (item) => `${item.name}: ${item.color} = ${item.quantity}`
          )
        ])
      );

      doc.autoTable(columns, rows);
      doc.save("order.pdf");
    };
  };

Answer 1

Use didDrawPage callback of autoTable, like this :

 var finalY = doc.lastAutoTable.finalY || 10;
           ...

  doc.autoTable(columns, rows, {
    startY: finalY + 20,
    showHeader: "never",
    didDrawPage: function (data) {
      // Header
      doc.setFontSize(20);
      doc.setTextColor(40);
      doc.text("Title here", data.settings.margin.left + 21, 22);
      doc.text("subtittle here", data.settings.margin.left + 21, 28);
      doc.addImage(img, "png", 10, 15, 25, 15);
    }
  });

Here is working example.