CODEWITHSUNDEEP
reactjs
Hamilton Xavier
Hamilton Xavier

Reputation: 49

JsPdf-autotable display item in the same line

I am using jspdf-autotable in the react project and I have a products object and I want to print that object as a pdf. When I try to do. are printed on the same line. I want to put the elements on different lines

enter image description here

const doc = new jsPDF();
//Obecjt
  const products = [
    { name: "computador", sold: 21 },
    { name: "Keyboard", sold: 23 },
    { name: "Mouse", sold: 77 },
    { name: "HD", sold: 25 },
    { name: "SSD", sold: 12 }
  ];
//Function to print
const Print = () => {
    doc.autoTable({ html: "#my-table" });
    const columns = ["Name", "Sold"];
    const rows = [
      [products.map((item) => item.name), products.map((item) => item.sold)]
    ];
    doc.autoTable(columns, rows);

    doc.save("table.pdf");
  };

Upvotes: 0

Views: 1446

Answers (1)

Aitor Ambite
Aitor Ambite

Reputation: 11

I don't know if you have already solved this but here is my approach to this problem.

  const Print = () => {
    doc.autoTable({ html: "#my-table" });
    const columns = ["Name", "Sold"];
    const rows = [];
    // here you go trought the arary products pushing only the values to the rows array
    products.map(item=> rows.push(Object.values(item))) 
    doc.autoTable(columns, rows);
    doc.save("table.pdf")
  }

object.values returns an array of the values of the provided object, and rows it's an array so you push it while you are mapping your products array.

I hope this works for you !

Upvotes: 1

Related Questions