Multiple tables (one by one) and only bottom border

[Tarshevskiy]

Hello! I tried to find any information and got zero results. I need to create multiple tables wit different headers, but stuck. When I'm trying to add second table it's broken.

Second issue is: how to add only at last row TOP border? and last question: is there way to make bold text in last cell?

part of my code:

  const pdf = new PDFDocument({
      size: "A4",
      margin: 45,
      autoFirstPage: true,
    }),
    table = new PdfTable(pdf, {
      bottomMargin: 30,
    });
table
    .addPlugin(
      new (require("voilab-pdf-table/plugins/fitcolumn"))({
        column: "title",
      })
    )
    .setColumnsDefaults(column_opts);

  add_table_func(pdf, table); //this makes new table for first time 

  pdf.x = left_margin;
  pdf.moveDown(5);

  add_table_func(pdf, table); //this makes broken table for second time
  pdf.end();

function add_table_func(pdf, table) {
  console.log("pdf.page.width", pdf.page.width);
  table
    .addColumns([
      {
        id: "title",
        header: "Herr Peckewitz, Holger",
        align: "left",
        width: pdf.page.width - 330,
      },
      {
        id: "net",
        header: "Netto",
        width: 50,
      },
      {
        id: "tax",
        header: "MwSt. 5%",
        width: 60,
      },
      {
        id: "gross",
        header: "MwSt. 16%",
        width: 60,
        // border: ["L", "B", "T", "R"],
      },
      {
        id: "total",
        header: "Brutto",
        width: 70,
        // border: data.title == undefined ? ["B"] : [],
        renderer: function (tb, data) {
          table.pdf.fontSize(10).font("./IBM_Plex_Sans/IBMPlexSans-Light.ttf");
          return data.total;
        },
      },
    ])
    .onPageAdded(function (tb) {
      tb.addHeader();
    });

  table.addBody([
    {
      title: "ISANA Cremedusche Pearl, 300 ml ",
      net: 0.59,
      tax: "0",
      gross: 0.1,
      total: 0.69,
    },
    {
      title: "Liefergebühr",
      net: 0.73,
      tax: "0",
      gross: 0.12,
      total: 0.85,
    },
    {
      net: 1.32,
      tax: "0",
      gross: 0.22,
      total: 1.54,
      last_field: true,
    },
  ]);
}

[tafel]

Hello, you should add only once your columns (just after your setColumnsDefaults) And your add_table_func should only add the content (addBody). And it should do the trick,

[Tarshevskiy]

addBody

Wow, thanks for quick answer! I,ve changed code, like you advised. But (text under code)

table
    .addPlugin(
      new (require("voilab-pdf-table/plugins/fitcolumn"))({
        column: "title",
      })
    )
    .setColumnsDefaults(column_opts)
    .addColumns([
      {
        id: "title",
        header: "Herr Peckewitz, Holger",
        align: "left",
        width: pdf.page.width - 330,
      },
      {
        id: "net",
        header: "Netto",
        width: 50,
      },
      {
        id: "tax",
        header: "MwSt. 5%",
        width: 60,
      },
      {
        id: "gross",
        header: "MwSt. 16%",
        width: 60,
        // border: ["L", "B", "T", "R"],
      },

      {
        id: "total",
        header: "Brutto",
        width: 70,
        // border: data.title == undefined ? ["B"] : [],
        renderer: function (tb, data) {
          table.pdf.fontSize(10).font("./IBM_Plex_Sans/IBMPlexSans-Light.ttf");
          return data.total;
        },
      },
    ])
    .onPageAdded(function (tb) {
      tb.addHeader();
    });

  add_table_func(pdf, table);

  pdf.x = left_margin;
  pdf.moveDown(5);

  add_table_func(pdf, table);

  pdf.text("i'm not moved down");

  pdf.end();

function add_table_func(pdf, table) {
  console.log("pdf.page.width", pdf.page.width);

  table.addBody([
    {
      title: "ISANA Cremedusche Pearl, 300 ml ",
      net: 0.59,
      tax: "0",
      gross: 0.1,
      total: 0.69,
    },
    {
      title: "Liefergebühr",
      net: 0.73,
      tax: "0",
      gross: 0.12,
      total: 0.85,
    },
    {
      net: 1.32,
      tax: "0",
      gross: 0.22,
      total: 1.54,
      last_field: true,
    },
  ]);
}

Is there any way to change header title name in different tables? Like in attached picture below.

And could I have access for only last cell to make font weight bolder? And maybe there is a way to get access only to last row border?

Every tables would be creating by loop function with different headers

I will be very grateful for your answer.

[tafel]

There's no "magic" with text formatting. You need to set yourself the bold font when displaying total. You need to use your last_field to set bold font, for example in the onRowAdd event. And alos in your onHeaderAdd event.

For your header, you can use setColumnParam(columnId, key, value, silent) to change the header.

[Radjoni]

What about this 'i'm not mvoed down' text? I have the same problem when i want to add some text to be centered before table (like some table title). Text before first table is ok but before second table text is moved to right even with use of moveDown() method.

After every table i call pdfDoc.moveDown() and then i call:

pdfDoc.font('Times-Bold') .text(${title}, { align: 'center' });

Can u help me? :)

[tafel]

You can control the starting point of your table by reseting the x position: pdfDoc.x = 20; // for example

[Radjoni]

Now it's everything as expected. Thx.