Rendering issues with non-nested tables

[mrtusc]

Hi,

I have some render issues with tables and page breaks. There are some related issues (#191 and #203), but they all seem to concern nested tables, which is not the case here.

You can recreate the issue with following example:

const pdf = require('pdfjs')
const doc = new pdf.Document({
  font: require('pdfjs/font/Helvetica'),
  fontSize: 12
})

/// Fill first page (but not completely) to enforce page break:
for (let i = 0; i < 50; i++) doc.cell().text(`line ${i + 1}`)

// Create table with two columns and two rows:
const table = doc.cell().table({
  widths: [null, null],
  borderWidth: 1
})

const row = table.row()
row.cell().text('ONE')
row.cell().text('TWO')

const row2 = table.row()
row2.cell().text('THREE')
row2.cell().text('FOUR')

The table is rendered on page 2 (as it should), but the cell "FOUR" is moved to the top of the page, overlapping cell "TWO" (see document.pdf).

Is this a problem you are already aware of?

[rkusa]

Thanks for the report. I am indeed not aware of that issue. I appreciate the small reproducible case! I unfortunately couldn't track the issue down in the amount of time I am currently able to invest into pdfjs and I am not sure when I'll come around to look at it again. So I am afraid that there might not be a fix anytime soon (sorry).

[rkusa]

Actually, after giving this a second look, this is probably the same as the other mentioned issues, as you are writing the table inside a cell (technically also a nested table).

If your use-case allows, move the table out of the cell:

-const table = doc.cell().table({
+const table = doc.table({
  widths: [null, null],
  borderWidth: 1
})

[mrtusc]

This solution renders part of the table on the first page and the other part on the second page. However, in my use case, the table needs to stay in one piece. So if the table doesn't fit completely on the first page, it should be rendered completely on the second page.

Thanks for your answer anyway :-)