The "verticalAlignment" property cannot be correctly applied to the second page.

[jingguanzhang]

Thanks @liborm85 for the vertical alignment implementation.

I found a layout bug when a table spans multiple pages.

When a table header cell uses both rowSpan and verticalAlignment: 'middle', it renders fine on the first page. However, from the second page onwards, the text in that cell overflows and shifts outside the cell boundaries.

Minimal repro:

const table = {
            margin: [0, 5, 0, 15],
            table: {
              headerRows: 2,
              widths: ["auto", "*", "*", "*", "auto"],
              body: [
                [
                  { text: "Dept ID", style: "tableHeader", rowSpan: 2, verticalAlignment: "middle" },
                  { text: "Performance Indicators", style: "tableHeader", colSpan: 3 },
                  {},
                  {},
                  { text: "Status", style: "tableHeader", rowSpan: 2 },
                ],
                [{}, { text: "Target", style: "tableHeader" }, { text: "Actual", style: "tableHeader" }, { text: "Gap", style: "tableHeader" }, {}],
                ["D-001", "500", "480", "-20", "In Progress"],
                ["D-002", "300", "350", "+50", "Exceeded"],
                ...
                ["D-003", "750", "750", "0", "Achieved"],
                ["D-004", "200", "180", "-20", "Under Review"],
                ["D-005", "400", "410", "+10", "Achieved"],
              ],
            },
          };

[liborm85]

I used your example and added more rows, and on second page center alignment is still correct.

[jingguanzhang]

@liborm85
I made a sandbox project to reproduce :
https://codesandbox.io/p/devbox/fkm94y?embed=1&file=%2Findex.html

[liborm85]

Simplified example for playground:

var dd = {
  content: [],
  styles: {
    header: {
      fontSize: 16,
      bold: true,
      margin: [0, 0, 0, 10],
      alignment: "center",
    },
    tableHeader: {
      bold: true,
      fontSize: 10,
      color: "black",
      fillColor: "#f5f5f5",
      alignment: "center",
    },
  },
  defaultStyle: {
    fontSize: 9,
  },
};

// 2. 生成 5 页内容
for (let i = 1; i <= 5; i++) {
  dd.content.push({
    text: `Statistical Report - Page ${i}`,
    style: "header",
  });

  const table = {
    margin: [0, 5, 0, 15],
    table: {
      headerRows: 2,
      widths: ["auto", "*", "*", "*", "auto"],
      body: [
        [{
            text: "Dept ID",
            style: "tableHeader",
            rowSpan: 2,
            verticalAlignment: "middle"
          },
          {
            text: "Performance Indicators",
            style: "tableHeader",
            colSpan: 3
          },
          {},
          {},
          {
            text: "Status",
            style: "tableHeader",
            rowSpan: 2
          },
        ],
        [{}, {
          text: "Target",
          style: "tableHeader"
        }, {
          text: "Actual",
          style: "tableHeader"
        }, {
          text: "Gap",
          style: "tableHeader"
        }, {}],
        ["D-001", "500", "480", "-20", "In Progress"],
        ["D-002", "300", "350", "+50", "Exceeded"],
        ["D-003", "750", "750", "0", "Achieved"],
        ["D-004", "200", "180", "-20", "Under Review"],
        ["D-005", "400", "410", "+10", "Achieved"],
        ["D-001", "500", "480", "-20", "In Progress"],
        ["D-002", "300", "350", "+50", "Exceeded"],
        ["D-003", "750", "750", "0", "Achieved"],
        ["D-004", "200", "180", "-20", "Under Review"],
        ["D-005", "400", "410", "+10", "Achieved"],
        ["D-001", "500", "480", "-20", "In Progress"],
        ["D-002", "300", "350", "+50", "Exceeded"],
        ["D-003", "750", "750", "0", "Achieved"],
        ["D-004", "200", "180", "-20", "Under Review"],
        ["D-005", "400", "410", "+10", "Achieved"],
      ],
    },
    pageBreak: i < 5 ? "after" : undefined,
  };
  dd.content.push(table);
}