Vertical lines in pdfkit-tables in node.js

Question

I have API that generate pdf file after saving values into database. My customer needed to generate this pdf and then send it by mail. He sended my photo of how should that pdf look like. I recreated it, it looks same as in that picture but it is hard to read because there are missing vertical lines. I looked trought docs and also tried to google, bud I did not found anyithing. Here is how my PDF looks like:

As you can see, vertical lines are missing and because of that is harder to read.

Is there any possibility to add vertical lines?

Here is my code:

let doc = new PDFDocument({ margin: 30, size: "A4" });
      doc.pipe(
        fs.createWriteStream(`${problemName}_${creationDate}` + ".pdf")
      );
      const table = {
        title:
          "Zápis koordinátora " +
          koordinatorName +
          " zo dna " +
          creationDate +
          ".",
        divider: {
          header: { disabled: true },
          horizontal: { disabled: false, width: 1, opacity: 1 },
          padding: 5,
          columnSpacing: 10,
        },
        headers: [
          { width: 130, renderer: null },
          { width: 130, renderer: null },
          { width: 130, renderer: null },
          { width: 130, renderer: null },
        ],
        rows: [
          ["Nazov", problemName, "", ""],
          [
            "Nazov staveniska (Projekt)",
            constructionName,
            "Na vedomie komu",
            "mailing list 1",
          ],
          [
            "Vytvoril koordinator BOZP",
            koordinatorName,
            "Priorita",
            problemPriority,
          ],
          ["Datum zistenia", creationDate, "Datum odstranenia", ""],
          [
            "Zodpovedny za vyriesenie zistenia",
            "Janko Maly",
            "Celkovy pocet zisteni v dni",
            10,
          ],
          ["Miesto zistenia", discoveryPlace, "Zistenie císlo", 1],
          ["Popis", problemText],
          [
            "Navrh na udelenie sankcie",
            "50€",
            "Pre spolocnost",
            adressedFor,
          ],
        ],
      };

      doc.table(table, {
        prepareHeader: () => doc.font("Helvetica-Bold").fontSize(8),
        prepareRow: (row, indexColumn, indexRow, rectRow, rectCell) => {
          doc.font("Helvetica").fontSize(8);
          indexColumn === 0;
        },
      });
      doc.end();

I am using pdfkit-table package.

Thank you all

Answer 1

My approach is to insert the required header as a first element in the array of data(i.e., index 0). and make sure you enable hideHeader:true . Use prepareRow to add borders to both Headers and the rest of the table.

//Selecting the required headers from my data
const pdfHeaders = "accountNumber,invoiceNumber,seller,bank,invoiceDueDate,invoiceAmountOutstanding,allocatedAmount,swissFlag,debtor,lineOfBusiness";

//Mapping headers
const headersMapping = {
  accountNumber: "Account Number",
  invoiceNumber: "Invoice Number",
  seller: "Seller",
  bank: "Bank",
  invoiceDueDate: "Invoice Due Date",
  invoiceAmountOutstanding: "Invoice Amount Outstanding (USD)",
  allocatedAmount: "Allocated Amount USD",
  swissFlag: "Swiss Flag",
  debtor: "Debtor",
  lineOfBusiness: "Line of Business"
};


const headers = pdfHeaders.split(",").map((header) => ({
  label: headersMapping[header] || header,
  property: header,
  align: "center",
}));




//Inserting headers to index 0 (first element) of my data
arrayOfObjects.unshift(headersMapping)


const table = {
  title: "TITLE",
  subtitle: ``,
  headers: headers,
  datas: arrayOfObjects,
  rows: [],
};

//prepareRow does the magic of adding borders, 
const options = {
  columnSpacing: 5,
  padding: 5,
  align: "center",
  hideHeader: true, // Make sure hideHeader is set to true
  prepareRow: (row, indexColumn, indexRow, rectRow, rectCell) => {
    let {
      x,
      y,
      width,
      height
    } = rectCell;
    doc.moveDown(3); //use this incase you encounter any overflow.
    doc
      .lineWidth(.5)
      .moveTo(x, y)
      .lineTo(x + width, y)
      .lineTo(x + width, y + height)
      .lineTo(x, y + height)
      .lineTo(x, y)
      .stroke();

  },
};


doc.table(table, options);
doc.end();

Answer 2

By definition simple PDF structure is not tabular there is one cell (the page) and that one column can be subdivide into two or more rows with null spaces between the text sub columns.

That is why tables are difficult to sub[ex]tract

So adding coloured rows in one area is fairly simple to make like a table, thus to make vertical sub dividers is more difficult, However that feature was added in January 2022 https://github.com/natancabral/pdfkit-table/files/7865078/document-5.pdf

For example see https://github.com/natancabral/pdfkit-table/issues/16#issuecomment-1012389097

Update per pending Pull Request (not yet implemented) & comment from @MoshFeu below.

In order to allow borders to header, we need to run prepareRow on the headers too. This works for me. https://github.com/natancabral/pdfkit-table/issues/16#issuecomment-1962831881