Issues when using rowspan and colspan in 0.5.0-beta.1

[ef-anemetzfiedler]

First of all, a big thanks to @NigelCunningham for all the work recently put into the project!

While 0.5.0-beta.1 is already a massive improvement for tables that use rowspan (previously none of the columns were repeated at all after a page break), there still seem to be some issues, which I will outline below.

I've made some self-contained html files which you should be able to open just like the examples in this repo.

The first issue I've found is that sometimes a column just disappears. Maybe the implementation does not take colspan into account? In this example, the second column is missing after the page break:
example-rowspan-too-few-columns.txt

By just varying the margin of the table in the example file, I was able to reproduce a few more issues.

Increasing the margin of the table to 50px produces a javascript-error, for some reason: example-rowspan-javascript-error.txt. This also omits the second page.

paged.polyfill.js:2195 Uncaught (in promise) TypeError: Cannot read properties of undefined (reading 'content')
    at paged.polyfill.js:2195:69
    at Array.forEach (<anonymous>)
    at Layout.processOverflowResult (paged.polyfill.js:2194:24)
    at Layout.findBreakToken (paged.polyfill.js:2207:23)
    at Layout.renderTo (paged.polyfill.js:1728:27)
    at Page.layout (paged.polyfill.js:2966:47)
    at Chunker.layout (paged.polyfill.js:3755:29)
    at async Chunker.renderAsync (paged.polyfill.js:3650:17)

Increasing the margin further to 70px produces a correct result layout-wise, but moves the content to a different column on the next page (in this case from the second-to-last column to the last column): example-rowspan-content-in-different-column.txt

Increasing the margin to 130px prouces a result where the layout falls apart completely: example-rowspan-falling-apart.txt

I hope it's clear in the example files how the table is supposed to look. It's basically the first 12 rows repeated twice, except for the single column that has a rowspan of 24.

I'm also sharing our "fix" (no guarantee for correctness - but it has worked for all of our test cases), just in case it helps with the current implementation. We previously used this to fix our application (using paged.js 0.4.3 and puppeteer 21.7.0). It calls the function "addTableCellsIfUsingRowSpan" in the (undocumented - at least to my knowledge) paged.js hook "layout":
paged-fix-rowspan.txt

In a nutshell, it basically iterates over the entire table, keeping track of all td entries that use rowspan, and also takes colspan into account. For each row, it decrements a counter for each currently tracked column, and throws a column away if the counter reaches 0. Then, at the page break, it knows exactly which columns are missing and where it has to insert them.

I'm pretty new to contributing to open source. If there is any missing information, please let me know.

Edit: I used Google Chrome Version 122.0.6261.129 for the html files that I posted above.

[julientaq]

hi there!

Thank you for sharing your solution, you’re doing well, welcome to open source world !

☕

The hooks for pagedjs needs to be more documented indeed. I was waiting for the merge of @NigelCunningham before getting back in as some may have changed quite a lot.

I think we can turn your solution in an extension as it seems to help very complex tables. That will also help us to test it before seing if we can reuse some bit of it in the code.

[ef-anemetzfiedler]

@julientaq Please keep in mind that my solution worked for 0.4.3 and will probably not work anymore for 0.5.0 (as an extension). I haven't looked at Nigel's changes in detail, but it might also just be a small fix in his implementation, since 0.5.0 seems to already insert the previously missing td's at the start of a new page.

[julientaq]

yup yup!

That’s why i say we need to spend some time to test everything :D