Discussing Tables with Dynamic Data

[hand-dot]

🐰UPDATE🐰

I have decided to implement this feature in V4.
There are still many blockers, but I have been able to judge that it can probably be realized.

Issue: Add DynamicTable Schema #332

---

Old Message:

Hello everyone,
I am hand-dot, the author of the pdfme.

Unfortunately, at the moment, pdfme does not have table functionality.

I have received requests for features like these in the past:

• How to add variable length data? #119
• How to create dynamic length columns ? #93

Furthermore, when I was looking at the search history on the pdfme website, I noticed that the most frequent searches were related to tables.

I am considering implementing table functionality to meet this demand.

However, I anticipate that this feature could become complex to use.
For example, I cannot decide on my own what specifications should be for the generate function interface, Designer UI, Form UI, and page-brake behavior.

That's why I have decided to post this and would like to discuss the matter with all of you.
I believe that if the specifications become clear, I can implement this feature.

In this discussion, we should avoid personal opinions and ideas that have not yet considered implementation methods.
I would like to have a constructive discussion based on concrete examples from other tools and libraries.

Thank you in advance.

[karstenwinter]

Thanks for bringing up the topic :)
I was amazed by your tool, it connects non-techies and techies gracefully.
I'm looking forward to your approach.
In the meanwhile, in my case there will be a variable length of questions and I will have different basePdfs for 1 page, 2 pages, ... 8 pages, that I can feed into the template.

[Mauro-Domingues]

I deleted my previously comment in order to follow the rules properly.

Dinamic tables are a good deal, not easy to do and a lot of specified rules. Like break with content, break page with content and even ignore filling the table to not break the layoult.

It's very complex to stabilish rules about it and some bugs happens.

This example is from a contract and some services. We have common services paid monthly and paid per hour. So in this example i have 2 dinamic tables and the must respect each other.

• First example - PDFKIT

We have some break lines cz of the names too long and besides the max of lines per table was not reached, it breaks the page when another big name comes so it doesn't break the layout.
Contrato_ 000.pdf

Same pdf but i removed 2 hour services and the tables still are working and respecting each other
Contrato_ 000-hours-removed.pdf

Now all hour modules were removed, the layout got broken by a bug, means it works the most of the times but sometimes it happens bugs we can't prevent. I am not the author of 100% of the code, its a legacy project that I implemented some dinamic features. I didn't have too much time to do that and I assume it's not perfect.
Contrato_ 000-all-hours-removed.pdf

• Second Example - PUPPETEER

This one i am the author of 100% of the code and i am using puppeteer. Besides being a simple table it works fine
relatorio-geral.pdf

One line added over the limit
relatorio-geral.pdf

More lines added
relatorio-geral.pdf

much more lines added
relatorio-geral.pdf

• Conclusion
  There is a bunch of rules about talking of dinamic tables that you can't predict and it's a variable developer from developer and project from project.
  What you could do: add a structure of a table in the schema, where the user would chose the amount of columns and the width of each one.

something like this would be good, not considered a non-intuitive thing for a developer using your lib:

const template: Template = {
  basePdf: BLANK_PDF,
  schemas: [
    {
      table: {
        type: 'table',
        position: { x: 0, y: 0 },
        width: 100,
        height: 220,
        ...props,
        header: [
          { x: { width: 30, height: 10, ...props } },
          { y: { width: 30, height: 10, ...props } },
          { z: { width: 40, height: 10, ...props } },
        ],
        body: {
          height: 20,
          max-columns: 10,
          ...props
        },
        footer: {
          height: 10,
          ...props
        }
      },
    },
  ],
};

In fact, rules about breaking page or ignoring to fill the table and jump to next page should be responsability of the developer using it.

---

• Out of scope of the discussion
  Please if you could add features to make forms, like squares, circles, horizontal lines, vertical lines. Thats the only thing i missed in your lib.
  Also congrats for it, it's an awesome work.

[hand-dot]

@Mauro-Domingues
Thank you for your very constructive comment. Indeed, as you mentioned, this feature can be quite complex and even if implemented, it may not necessarily be user-friendly.

I think your approach to using Puppeteer to create tables is correct.

There is an appropriate way to use this library, and in the case of using tables, I would recommend using a different library, specifically Puppeteer.

[Mauro-Domingues]

In fact, dynamic things in pdf are always secret boxes. Both the functionality of the table and the tables have a similar logic. Limiting the length of characters may not be the best option.
You can try to limit an entry with pixels, there is a useful lib for this use case named string-pixel-width

import pixelWidth from 'string-pixel-width';

function checkWidth(text: string, font: string, fontSize: number) {
  const width = pixelWidth(text, { font: font, size: fontSize });
  if (width > 100) {
    throw new Error('Text width is greater than 100 pixels');
  }
}

Then you can delimiter a single line based on a size, or even break a line if it passes the limit.

[hand-dot]

Inside pdfme, we are already using such boxes to control things like text wraparound.

This is just a small part of the features that will be implemented with tables.

[tudorels]

It would be a great idea to develop the possibility to include tables. For a start, an implementation like in pdfmake. See tables on http://pdfmake.org/playground.html
Thanks!

[hand-dot]

Hi @tudorels
Thanks for posting to this discussion.
I am aware that there is a demand for table functionality and that pdfmake implements tables. However, as I have already written at the beginning, that is not what I want to know.

What I want to understand is how I should implement table functionality as pdfme and what specifications I should define to. How do I implement this while maintaining existing features and concepts? What about page breaks?

It's easy to express desires. I need more in-depth opinions.

[tudorels]

I don't use pdfme at the moment, but I'm considering it and want to see if it's suitable for the projects I'll be working on. At the moment I don't know much about pdfme and I don't have any suggestions for implementing the tables. I will try to study the project more. Thanks!

[Zzombiee2361]

I don't currently need to display a table, but I do need to display a dynamic text block that can be short or long. Theoretically all you need is a calculated height of the text, if you could make that available in the schema that would be helpful. Maybe something like this:

const template: Template = {
  basePdf: BLANK_PDF,
  schemas: [
    {
      a: {
        type: 'text',
        position: { x: 0, y: 0 },
        width: 10,
        height: 'auto',
      },
      b: {
        type: 'text',
        position: (schemas) => ({
          x: schemas[0].a.position.x,
          y: schemas[0].a.position.y + schemas[0].a.height + 10,
        }),
        width: 10,
        height: 'auto',
      },
      c: {
        type: 'text',
        position: (schemas) => ({
          x: schemas[0].b.position.x,
          y: schemas[0].b.position.y + schemas[0].b.height + 10,
        }),
        width: 10,
        height: 'auto',
      },
    },
    {
      d: {
        type: 'text',
        position: (schemas) => ({
          x: schemas[0].c.position.x,
          // page is where the item is actually rendered as index, so 1 mean it overflows from the first page
          y: (schemas[0].c.page === 1 ? schemas[0].c.position.y + schemas[0].c.height + 10 : 10),
        }),
        width: 10,
        height: 'auto',
      },
    },
  ],
};

This principle could also be applied to table rows. But I'm not really sure though, this could be very confusing with a lot of pages, or just downright impossible to implement. Also this would be quite hard to do graphically.

[Zzombiee2361]

You could add a helper function to reduce that repetition

function placeBelow(item, margin = 0, currentPage = null) {
  return (currentPage === null || (currentPage !== null && item.page > currentPage) ? item.position.y + item.height + margin : margin);
}

function placeBeside(item, margin = 0) {
  return item.position.x + item.width + margin;
}

...
{
  d: {
    type: 'text',
    position: (schemas) => ({
      x: schemas[0].c.position.x,
      y: placeBelow(schemas[0].c, 10, 1),
    }),
    width: 10,
    height: 'auto',
  },
},

[Zzombiee2361]

Another thing that could be considered is constraint/anchor system. This would be quite similar to ConstraintLayout on android. It would be possible to configure graphically. Although this could be over-engineered solution for this problem

[hand-dot]

@Zzombiee2361
I remembered your advice earlier and did a bit of research on ConstraintLayout, and I finally understood your ideas.

Awesome!

[hand-dot]

I do not want to address this feature within the core part of pdfme.
Instead, I’m considering addressing it after implementing the features of the Custom Schema Plugin,
which is scheduled for release in V3.

The demand for this feature still exists. Ongoing discussions are open to anyone, including myself, to participate.

[tcurdt]

I guess tables is just a specialisation problem of dynamic heights and content flow.

TBH I am not sure I could come up with a single PDF use case that could live without at least dynamic heights.
As long as there is a way like @Zzombiee2361 laid out, the table itself could be done outside of the core.

But AFAIU this is not yet possible. And we cannot really use the library without.
I am lurking here for a while. I am really hoping for this to land some day.

[hand-dot]

@tcurdt Thanks for reacting my comment.
I drafted the Custom Schema Plugin about 3 weeks ago.
Moving forward, I'll make sure not to forget about this dynamic table feature as we continue with its design and implementation.

Feel free to comment if you have any further thoughts. Thank you.

[hand-dot]

V3 has been released in beta, and it's expected to be officially installable via npm on November 5th.

Starting with this version, Custom Schemas (Plugins) are supported.
https://pdfme.com/docs/custom-schemas

You can access pdfDoc during PDF rendering.

pdfme/packages/common/src/types.ts

Line 25 in 6a6884e

pdfDoc: PDFDocument;

If the content overflows the page, you should be able to add a new page using the addPage method.
https://pdf-lib.js.org/docs/api/classes/pdfdocument#addpage

[hand-dot]

ref: https://github.com/simonbengtsson/jsPDF-AutoTable

[marco-mastella]

that's awesome... are you working to implement it on pdfme too?

[hand-dot]

Yes👍

[hand-dot]

Version 3 has been feature released. It might be possible to implement by defining the new custom schemas feature.
https://pdfme.com/docs/custom-schemas

Is there anyone who wants to try implementing this?
I haven't had the time to focus solely on this feature yet, but I can offer support if needed.

[Ben-CA]

Just discovered pdfMe today. Looks very cool! But I'm needing to be able to support variable length content, including multiple pages. For instance on an invoice or other business document; it might have 8 lines per page, but might need to be 12 lines (2 pages).

I can do this with puppeteer-html-pdf and using their handlebars html template, passing in the JSON data in an array, and it dynamically will adjust the length. Here's how they handle the "loop" in the template:

        {{#each invoiceItems}}
        <tr class="item {{#if @last}} last {{/if}}">
            <td>{{this.line}}</td>
            <td>{{this.item}}</td>
            <td>{{this.qty}}</td>
            <td>{{this.amount}}</td>
        </tr>
        {{/each}}

But I was really looking for the ability to be able to edit and format the template with a nice editor, which your setup has.

[hand-dot]

I have decided to implement this feature in V4.
There are still many blockers, but I have been able to judge that it can probably be realized.

Issue: Add DynamicTable Schema #332

[marco-mastella]

that's awesome. Do you have a rough ETA for v4 release?

[hand-dot]

No. I have a full-time job as well, so it will probably take quite some time. I think it will take more than six months.

[marco-mastella]

thanks for the feedback. Really appreciated.

[hand-dot]

The DynamicTable Schema has been released as Beta in pdfme V4.

For more details, please refer to the following documentation:
https://pdfme.com/docs/tables