I cannot create table

[Akshaypmna18]

Describe the bug

I cannot create table using pdfme

To Reproduce

  const [template, setTemplate] = useState({
    // basePdf: BLANK_PDF,
    basePdf: { width: 210, height: 297, padding: [10, 10, 10, 10] },
    schemas: [
      {
        mytable: {
          type: "table",
          icon: '<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-table"><path d="M12 3v18"/><rect width="18" height="18" x="3" y="3" rx="2"/><path d="M3 9h18"/><path d="M3 15h18"/></svg>',
          position: { x: 28.706846058368317, y: 37.85750960310253 },
          width: 150,
          height: 57.5184,
          content:
            '[["Alice","New York","Alice is a freelance web designer and developer"],["Bob","Paris","Bob is a freelance illustrator and graphic designer"]]',
          showHead: true,
          head: ["Name", "City", "Description"],
          headWidthPercentages: [30, 30, 40],
          tableStyles: { borderWidth: 0.3, borderColor: "#000000" },
          headStyles: {
            fontName: "NotoSerifJP-Regular",
            fontSize: 13,
            characterSpacing: 0,
            alignment: "left",
            verticalAlignment: "middle",
            lineHeight: 1,
            fontColor: "#ffffff",
            borderColor: "",
            backgroundColor: "#2980ba",
            borderWidth: { top: 0, right: 0, bottom: 0, left: 0 },
            padding: { top: 5, right: 5, bottom: 5, left: 5 },
          },
          bodyStyles: {
            fontName: "NotoSerifJP-Regular",
            fontSize: 13,
            characterSpacing: 0,
            alignment: "left",
            verticalAlignment: "middle",
            lineHeight: 1,
            fontColor: "#000000",
            borderColor: "#888888",
            backgroundColor: "",
            alternateBackgroundColor: "#f5f5f5",
            borderWidth: { top: 0.1, right: 0.1, bottom: 0.1, left: 0.1 },
            padding: { top: 5, right: 5, bottom: 5, left: 5 },
          },
          columnStyles: {},
        },
      },
    ],
  });

  let designer;

  const inputs = [
    {
      mytable: [
        [
          "Alice",
          "New York",
          "Alice is a freelance web designer and developer",
        ],
        ["Bob", "Paris", "Bob is a freelance illustrator and graphic designer"],
      ],
    },
  ];

  const handlePdf = async () =>
    await generate({
      template,
      inputs,
      plugins: {
        text,
        image,
        qrcode: barcodes.qrcode,
        Table: tableBeta,
        line,
        rectangle,
        ellipse,
        svg,
        readOnlySvg,
        readOnlyImage,
        readOnlyText,
      },
    }).then((pdf) => {
      const blob = new Blob([pdf.buffer], { type: "application/pdf" });
      window.open(URL.createObjectURL(blob));
    });

Expected behavior

the error message

VM4835:1 Uncaught (in promise) SyntaxError: Unexpected token 'A', "Alice,New "... is not valid JSON at JSON.parse () at modifyTemplateForTable (chunk-HQ6VPE25.js?v=d5246820:104654:27) at modifyTemplate (@pdfme_generator.js?v=1305fb5a:123:16) at getDynamicTemplate (chunk-RT2GMJPP.js?v=d5246820:6098:34) at generate (@pdfme_generator.js?v=1305fb5a:117:35) at async handlePdf (pdfme.jsx:96:5)

Your Environment

- pdfme package(@pdfme/generator or @pdfme/ui):@pdfme/generator
- pdfme version: i don't know
- Operating system: windows 10 
- Node.js version or Browser name & version: 18. and brave

Your Error Log

VM4835:1 Uncaught (in promise) SyntaxError: Unexpected token 'A', "Alice,New "... is not valid JSON
    at JSON.parse (<anonymous>)
    at modifyTemplateForTable (chunk-HQ6VPE25.js?v=d5246820:104654:27)
    at modifyTemplate (@pdfme_generator.js?v=1305fb5a:123:16)
    at getDynamicTemplate (chunk-RT2GMJPP.js?v=d5246820:6098:34)
    at generate (@pdfme_generator.js?v=1305fb5a:117:35)
    at async handlePdf (pdfme.jsx:96:5)

Additional context

 const [template, setTemplate] = useState({
    // basePdf: BLANK_PDF,
    basePdf: { width: 210, height: 297, padding: [10, 10, 10, 10] },
    schemas: [
      {
        mytable: {
          type: "table",
          icon: '<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-table"><path d="M12 3v18"/><rect width="18" height="18" x="3" y="3" rx="2"/><path d="M3 9h18"/><path d="M3 15h18"/></svg>',
          position: { x: 28.706846058368317, y: 37.85750960310253 },
          width: 150,
          height: 57.5184,
          content:
            '[["Alice","New York","Alice is a freelance web designer and developer"],["Bob","Paris","Bob is a freelance illustrator and graphic designer"]]',
          showHead: true,
          head: ["Name", "City", "Description"],
          headWidthPercentages: [30, 30, 40],
          tableStyles: { borderWidth: 0.3, borderColor: "#000000" },
          headStyles: {
            fontName: "NotoSerifJP-Regular",
            fontSize: 13,
            characterSpacing: 0,
            alignment: "left",
            verticalAlignment: "middle",
            lineHeight: 1,
            fontColor: "#ffffff",
            borderColor: "",
            backgroundColor: "#2980ba",
            borderWidth: { top: 0, right: 0, bottom: 0, left: 0 },
            padding: { top: 5, right: 5, bottom: 5, left: 5 },
          },
          bodyStyles: {
            fontName: "NotoSerifJP-Regular",
            fontSize: 13,
            characterSpacing: 0,
            alignment: "left",
            verticalAlignment: "middle",
            lineHeight: 1,
            fontColor: "#000000",
            borderColor: "#888888",
            backgroundColor: "",
            alternateBackgroundColor: "#f5f5f5",
            borderWidth: { top: 0.1, right: 0.1, bottom: 0.1, left: 0.1 },
            padding: { top: 5, right: 5, bottom: 5, left: 5 },
          },
          columnStyles: {},
        },
      },
    ],
  });

const inputs = [
    {
      mytable: [
        [
          "Alice",
          "New York",
          "Alice is a freelance web designer and developer",
        ],
        ["Bob", "Paris", "Bob is a freelance illustrator and graphic designer"],
      ],
    },
  ];

  const handlePdf = async () =>
    await generate({
      template,
      inputs,
      plugins: {
        text,
        image,
        qrcode: barcodes.qrcode,
        Table: tableBeta,
        line,
        rectangle,
        ellipse,
        svg,
        readOnlySvg,
        readOnlyImage,
        readOnlyText,
      },
    }).then((pdf) => {
      const blob = new Blob([pdf.buffer], { type: "application/pdf" });
      window.open(URL.createObjectURL(blob));
    });

<Button onClick={handlePdf}>Create pdf</Button>

[ctkc]

+1 Same issue

[romankolosok]

+1 have same issue, tired example from website, didn't help. However, I figured out a way to make it work here's how:

const inputs = {
//some inputs
"mytable": "[[\"Alice\",\"New York\",\"Alice is a freelance web designer and developer\"],[\"Bob\",\"Paris\",\"Bob is a freelance illustrator and graphic designer\"]]"
}

This creates a dynamically filled table for me, if you follow the docs example and make this change, you will get dynamic tables to work.

[ctkc]

@romankolosok Unfortunately it didn't work for me. I could get rid of the previous error but now I'm receiving "Blank PDF is not supported" which is thrown by the createSingleTable method.

[lowbits]

@ctkc if you're using betaTable you need margins

try

"basePdf": { "width": 210, "height": 297, "padding": [10,10,10,10] }

[ctkc]

@lowbits Thanks for the suggestion, that works! The problem was that I had a base64 encoded string in the basePdf because I was using a base PDF as a template. I generated it here https://playground.pdfme.com/ so it seems like the playground is not supporting tables yet.