Pdfmake: Colspan line bug on repeated header

[gnibeda]

On repeaterd headers, cells with colspan has unnecessary vertical lines(on first page all ok):

Document definition:

[{"table":{"headerRows":5,"body":[[{"text":"C","rowSpan":4},{"text":"C","rowSpan":4},{"text":"C","rowSpan":4},{"text":"C","colSpan":4},"","","",{"text":"C","colSpan":5},"","","","",{"text":"C","rowSpan":4}],[{"text":"C"},{"text":"C"},{"text":"C"},{"text":"C","rowSpan":3},{"text":"C","colSpan":2},"",{"text":"C","rowSpan":3},{"text":"C","rowSpan":3},{"text":"C","colSpan":3},"","",{"text":"C","rowSpan":3},{"text":"C"}],[{"text":"C"},{"text":"C"},{"text":"C"},{"text":"C"},{"text":"C","rowSpan":2},{"text":"C","rowSpan":2},{"text":"C"},{"text":"C"},{"text":"C","rowSpan":2},{"text":"C","colSpan":2},"",{"text":"C"},{"text":"C"}],[{"text":"C"},{"text":"C"},{"text":"C"},{"text":"C"},{"text":"C"},{"text":"C"},{"text":"C"},{"text":"C"},{"text":"C"},{"text":"C"},{"text":"C"},{"text":"C"},{"text":"C"}],[{"text":"C"},{"text":"C"},{"text":"C"},{"text":"C"},{"text":"C"},{"text":"C"},{"text":"C"},{"text":"C"},{"text":"C"},{"text":"C"},{"text":"C"},{"text":"C"},{"text":"C"}],[{"text":"C"},{"text":"C"},{"text":"C"},"","",{"text":"C"},"","","","","","",""],[{"text":"C"},{"text":"C"},{"text":"C"},"","",{"text":"C"},{"text":"C"},{"text":"C"},{"text":"C"},{"text":"C"},{"text":"C"},{"text":"C"},{"text":"C"}],[{"text":"C"},{"text":"C"},{"text":"C"},"","",{"text":"C"},{"text":"C"},{"text":"C"},{"text":"C"},{"text":"C"},{"text":"C"},{"text":"C"},{"text":"C"}],[{"text":"C"},{"text":"C"},{"text":"C"},"",{"text":"C"},{"text":"C"},{"text":"C"},{"text":"C"},{"text":"C"},{"text":"C"},{"text":"C"},{"text":"C"},{"text":"C"}],[{"text":"C"},{"text":"C"},{"text":"C"},"",{"text":"C"},{"text":"C"},{"text":"C"},{"text":"C"},{"text":"C"},{"text":"C"},{"text":"C"},{"text":"C"},{"text":"C"}],[{"text":"C"},{"text":"C"},{"text":"C"},"",{"text":"C"},{"text":"C"},{"text":"C"},{"text":"C"},{"text":"C"},{"text":"C"},{"text":"C"},{"text":"C"},{"text":"C"}],[{"text":"C"},{"text":"C"},{"text":"C"},"",{"text":"C"},{"text":"C"},{"text":"C"},{"text":"C"},{"text":"C"},{"text":"C"},{"text":"C"},{"text":"C"},{"text":"C"}],[{"text":"C"},{"text":"C"},{"text":"C"},{"text":"C"},{"text":"C"},{"text":"C"},{"text":"C"},{"text":"C"},{"text":"C"},{"text":"C"},{"text":"C"},{"text":"C"},{"text":"C"}],[{"text":"C"},{"text":"C"},{"text":"C"},"","",{"text":"C"},{"text":"C"},{"text":"C"},{"text":"C"},{"text":"C"},{"text":"C"},{"text":"C"},{"text":"C"}],[{"text":"C"},{"text":"C"},{"text":"C"},"",{"text":"C"},{"text":"C"},{"text":"C"},{"text":"C"},{"text":"C"},{"text":"C"},{"text":"C"},{"text":"C"},{"text":"C"}],[{"text":"C"},{"text":"C"},{"text":"C"},"",{"text":"C"},{"text":"C"},{"text":"C"},{"text":"C"},{"text":"C"},{"text":"C"},{"text":"C"},{"text":"C"},{"text":"C"}],[{"text":"C"},{"text":"C"},{"text":"C"},"",{"text":"C"},{"text":"C"},{"text":"C"},{"text":"C"},{"text":"C"},{"text":"C"},{"text":"C"},{"text":"C"},{"text":"C"}],[{"text":"C"},{"text":"C"},{"text":"C"},"",{"text":"C"},{"text":"C"},{"text":"C"},{"text":"C"},{"text":"C"},{"text":"C"},{"text":"C"},{"text":"C"},{"text":"C"}],[{"text":"C"},{"text":"C"},{"text":"C"},"",{"text":"C"},{"text":"C"},{"text":"C"},{"text":"C"},{"text":"C"},{"text":"C"},{"text":"C"},{"text":"C"},{"text":"C"}],[{"text":"C"},{"text":"C"},{"text":"C"},"",{"text":"C"},{"text":"C"},{"text":"C"},{"text":"C"},{"text":"C"},{"text":"C"},{"text":"C"},{"text":"C"},{"text":"C"}],[{"text":"C"},{"text":"C"},{"text":"C"},"",{"text":"C"},{"text":"C"},{"text":"C"},{"text":"C"},{"text":"C"},{"text":"C"},{"text":"C"},{"text":"C"},{"text":"C"}],[{"text":"C"},{"text":"C"},{"text":"C"},{"text":"C"},{"text":"C"},{"text":"C"},{"text":"C"},{"text":"C"},{"text":"C"},{"text":"C"},{"text":"C"},{"text":"C"},{"text":"C"}],[{"text":"C"},{"text":"C"},{"text":"C"},"",{"text":"C"},{"text":"C"},{"text":"C"},{"text":"C"},{"text":"C"},{"text":"C"},{"text":"C"},{"text":"C"},{"text":"C"}],[{"text":"C"},{"text":"C"},{"text":"C"},"",{"text":"C"},{"text":"C"},{"text":"C"},{"text":"C"},{"text":"C"},{"text":"C"},{"text":"C"},{"text":"C"},{"text":"C"}],[{"text":"C"},{"text":"C"},{"text":"C"},"",{"text":"C"},{"text":"C"},{"text":"C"},{"text":"C"},{"text":"C"},{"text":"C"},{"text":"C"},{"text":"C"},{"text":"C"}],[{"text":"C"},{"text":"C"},{"text":"C"},"",{"text":"C"},{"text":"C"},{"text":"C"},{"text":"C"},{"text":"C"},{"text":"C"},{"text":"C"},{"text":"C"},{"text":"C"}],[{"text":"C"},{"text":"C"},{"text":"C"},"","",{"text":"C"},{"text":"C"},{"text":"C"},{"text":"C"},{"text":"C"},{"text":"C"},{"text":"C"},{"text":"C"}],[{"text":"C"},{"text":"C"},{"text":"C"},"",{"text":"C"},{"text":"C"},{"text":"C"},{"text":"C"},{"text":"C"},{"text":"C"},{"text":"C"},{"text":"C"},{"text":"C"}],[{"text":"C"},{"text":"C"},{"text":"C"},"","",{"text":"C"},{"text":"C"},{"text":"C"},{"text":"C"},{"text":"C"},{"text":"C"},{"text":"C"},{"text":"C"}],[{"text":"C"},{"text":"C"},{"text":"C"},"",{"text":"C"},{"text":"C"},{"text":"C"},{"text":"C"},{"text":"C"},{"text":"C"},{"text":"C"},{"text":"C"},{"text":"C"}],[{"text":"C"},{"text":"C"},{"text":"C"},{"text":"C"},{"text":"C"},{"text":"C"},{"text":"C"},{"text":"C"},{"text":"C"},{"text":"C"},{"text":"C"},{"text":"C"},{"text":"C"}],[{"text":"C"},{"text":"C"},{"text":"C"},"",{"text":"C"},{"text":"C"},{"text":"C"},{"text":"C"},{"text":"C"},{"text":"C"},{"text":"C"},{"text":"C"},{"text":"C"}],[{"text":"C"},{"text":"C"},{"text":"C"},"",{"text":"C"},{"text":"C"},{"text":"C"},{"text":"C"},{"text":"C"},{"text":"C"},{"text":"C"},{"text":"C"},{"text":"C"}],[{"text":"C"},{"text":"C"},{"text":"C"},"",{"text":"C"},{"text":"C"},{"text":"C"},{"text":"C"},{"text":"C"},{"text":"C"},{"text":"C"},{"text":"C"},{"text":"C"}],[{"text":"C"},{"text":"C"},{"text":"C"},"",{"text":"C"},{"text":"C"},{"text":"C"},{"text":"C"},{"text":"C"},{"text":"C"},{"text":"C"},{"text":"C"},{"text":"C"}],[{"text":"C"},{"text":"C"},{"text":"C"},"",{"text":"C"},{"text":"C"},{"text":"C"},{"text":"C"},{"text":"C"},{"text":"C"},{"text":"C"},{"text":"C"},{"text":"C"}],[{"text":"C"},{"text":"C"},{"text":"C"},"",{"text":"C"},{"text":"C"},{"text":"C"},{"text":"C"},{"text":"C"},{"text":"C"},{"text":"C"},{"text":"C"},{"text":"C"}],[{"text":"C"},{"text":"C"},{"text":"C"},{"text":"C"},{"text":"C"},{"text":"C"},{"text":"C"},{"text":"C"},{"text":"C"},{"text":"C"},{"text":"C"},{"text":"C"},{"text":"C"}],[{"text":"C"},{"text":"C"},{"text":"C"},"",{"text":"C"},{"text":"C"},{"text":"C"},{"text":"C"},{"text":"C"},{"text":"C"},{"text":"C"},{"text":"C"},{"text":"C"}],[{"text":"C"},{"text":"C"},{"text":"C"},"",{"text":"C"},{"text":"C"},{"text":"C"},{"text":"C"},{"text":"C"},{"text":"C"},{"text":"C"},{"text":"C"},{"text":"C"}],[{"text":"C"},{"text":"C"},{"text":"C"},"",{"text":"C"},{"text":"C"},{"text":"C"},{"text":"C"},{"text":"C"},{"text":"C"},{"text":"C"},{"text":"C"},{"text":"C"}],[{"text":"C"},{"text":"C"},{"text":"C"},"","",{"text":"C"},{"text":"C"},{"text":"C"},{"text":"C"},{"text":"C"},{"text":"C"},{"text":"C"},{"text":"C"}],[{"text":"C"},{"text":"C"},{"text":"C"},"",{"text":"C"},{"text":"C"},{"text":"C"},{"text":"C"},{"text":"C"},{"text":"C"},{"text":"C"},{"text":"C"},{"text":"C"}],[{"text":"C"},{"text":"C"},{"text":"C"},"",{"text":"C"},{"text":"C"},{"text":"C"},{"text":"C"},{"text":"C"},{"text":"C"},{"text":"C"},{"text":"C"},{"text":"C"}],[{"text":"C"},{"text":"C"},{"text":"C"},"",{"text":"C"},{"text":"C"},{"text":"C"},{"text":"C"},{"text":"C"},{"text":"C"},{"text":"C"},{"text":"C"},{"text":"C"}],[{"text":"C"},{"text":"C"},{"text":"C"},"",{"text":"C"},{"text":"C"},{"text":"C"},{"text":"C"},{"text":"C"},{"text":"C"},{"text":"C"},{"text":"C"},{"text":"C"}],[{"text":"C"},{"text":"C"},{"text":"C"},"",{"text":"C"},{"text":"C"},{"text":"C"},{"text":"C"},{"text":"C"},{"text":"C"},{"text":"C"},{"text":"C"},{"text":"C"}],[{"text":"C"},{"text":"C"},{"text":"C"},"",{"text":"C"},{"text":"C"},{"text":"C"},{"text":"C"},{"text":"C"},{"text":"C"},{"text":"C"},{"text":"C"},{"text":"C"}],[{"text":"C"},{"text":"C"},{"text":"C"},"",{"text":"C"},{"text":"C"},{"text":"C"},{"text":"C"},{"text":"C"},{"text":"C"},{"text":"C"},{"text":"C"},{"text":"C"}],[{"text":"C"},{"text":"C"},{"text":"C"},"",{"text":"C"},{"text":"C"},{"text":"C"},{"text":"C"},{"text":"C"},{"text":"C"},{"text":"C"},{"text":"C"},{"text":"C"}],[{"text":"C"},{"text":"C"},{"text":"C"},"",{"text":"C"},{"text":"C"},{"text":"C"},{"text":"C"},{"text":"C"},{"text":"C"},{"text":"C"},{"text":"C"},{"text":"C"}],[{"text":"C"},{"text":"C"},{"text":"C"},"",{"text":"C"},{"text":"C"},{"text":"C"},{"text":"C"},{"text":"C"},{"text":"C"},{"text":"C"},{"text":"C"},{"text":"C"}],[{"text":"C"},{"text":"C"},{"text":"C"},"",{"text":"C"},{"text":"C"},{"text":"C"},{"text":"C"},{"text":"C"},{"text":"C"},{"text":"C"},{"text":"C"},{"text":"C"}],[{"text":"C"},{"text":"C"},{"text":"C"},"",{"text":"C"},{"text":"C"},{"text":"C"},{"text":"C"},{"text":"C"},{"text":"C"},{"text":"C"},{"text":"C"},{"text":"C"}],[{"text":"C"},{"text":"C"},{"text":"C"},{"text":"C"},{"text":"C"},{"text":"C"},{"text":"C"},{"text":"C"},{"text":"C"},{"text":"C"},{"text":"C"},{"text":"C"},{"text":"C"}],[{"text":"C"},{"text":"C"},{"text":"C"},"",{"text":"C"},{"text":"C"},{"text":"C"},{"text":"C"},{"text":"C"},{"text":"C"},{"text":"C"},{"text":"C"},{"text":"C"}],[{"text":"C"},{"text":"C"},{"text":"C"},"","",{"text":"C"},{"text":"C"},{"text":"C"},{"text":"C"},{"text":"C"},{"text":"C"},{"text":"C"},{"text":"C"}],[{"text":"C"},{"text":"C"},{"text":"C"},"","",{"text":"C"},{"text":"C"},{"text":"C"},{"text":"C"},{"text":"C"},{"text":"C"},{"text":"C"},{"text":"C"}],[{"text":"C"},{"text":"C"},{"text":"C"},"",{"text":"C"},{"text":"C"},{"text":"C"},{"text":"C"},{"text":"C"},{"text":"C"},{"text":"C"},{"text":"C"},{"text":"C"}],[{"text":"C"},{"text":"C"},{"text":"C"},"",{"text":"C"},{"text":"C"},{"text":"C"},{"text":"C"},{"text":"C"},{"text":"C"},{"text":"C"},{"text":"C"},{"text":"C"}],[{"text":"C"},{"text":"C"},{"text":"C"},"",{"text":"C"},{"text":"C"},{"text":"C"},{"text":"C"},{"text":"C"},{"text":"C"},{"text":"C"},{"text":"C"},{"text":"C"}]],"widths":["50%","auto","auto","auto","auto","auto","auto","auto","auto","auto","auto","auto","auto"]}}]

I saw this: https://github.com/bpampuch/pdfmake/issues/235
But seems now bug in colspan. Pdfmake was builded from latest sources.

[gnibeda]

Is there any news about this issue?

[jthoenes]

No. Haven't had the time to look into it. Sorry.

[jthoenes]

Can you try to minimize your document definition, e.g. make the minimal amount of JSON which still has the issue?
That'll make finding the bug much easier.

[gnibeda]

Definition long, because table should be on two pages to see bug.
Here is shorter version:

var dd = {
    content: [{ 
            "table": {
                "headerRows":2,
                "body":[
                    [{text: "1", rowSpan: 2}, {text: "2", colSpan: 2}, ""],
                    ["", "3", "4"],
                    [".", ".", "."],
                    [".", ".", "."],
                    [".", ".", "."],
                    [".", ".", "."],
                    [".", ".", "."],
                    [".", ".", "."],
                    [".", ".", "."],
                    [".", ".", "."],
                    [".", ".", "."],
                    [".", ".", "."],
                    [".", ".", "."],
                    [".", ".", "."],
                    [".", ".", "."],
                    [".", ".", "."],
                    [".", ".", "."],
                    [".", ".", "."],
                    [".", ".", "."],
                    [".", ".", "."],
                    [".", ".", "."],
                    [".", ".", "."],
                    [".", ".", "."],
                    [".", ".", "."],
                    [".", ".", "."],
                    [".", ".", "."],
                    [".", ".", "."],
                    [".", ".", "."],
                    [".", ".", "."],
                    [".", ".", "."],
                    [".", ".", "."],
                    [".", ".", "."],
                    [".", ".", "."],
                    [".", ".", "."],
                    [".", ".", "."],
                    [".", ".", "."],
                    [".", ".", "."],
                    [".", ".", "."],
                    [".", ".", "."],
                    [".", ".", "."],
                    [".", ".", "."],
                    [".", ".", "."]
                ]
            }
        }]
}

This [".", ".", "."] needed to make table long to go on second page. Look at header and you will see issue:

[jthoenes]

Ok, got it. He're a smaller document definition (for reference):

var dd = {
    pageSize: 'A9',
    content: [{ 
            "table": {
                "headerRows":2,
                "body":[
                    [{text: "1", rowSpan: 2},{text: "2", colSpan: 2}, ""],
                    ["", "3", "4"],
                    [".", ".", "."],
                    [".", ".", "."]
                ]
            }
        }]
}

I don't know, if I can look into it soon. Very busy at the moment :-/

[gnibeda]

Hi again. Any news about this bug? I'm asking, because with this issue pdfmake is useless in case of table generation. It's strange that this issue still not fixed.
Can you tell me part of code that respond for header generation. I'll try take a look.

[jthoenes]

I would say it's part of the "unbreakableBlock" which spans across TableProcessor, LayoutBuilder, PageElementContext and ElementContext.

I would like to disentangle and refactor this at some point in time ...

[ispeh]

dontBreakRows:true solved my problem

[gnibeda]

But it doubles cell lines in table. Is it normal behaviour?
I need single lines in table cells, like without dontBreakRows.
Doubled lines with dontBreakRows:

Compared to dontBreakRows: false

[ispeh]

Try with custom horizontal line width:

table: 
{
    widths: [ 'auto', 'auto', '*', '*', '*', '*', '*', '*','*','*' ],
    headerRows: 2,
    pageBreak: 'before',
    dontBreakRows:true,
    body: oData
},
layout:
{                           
    hLineWidth: function(i, node) 
    {
        return (i === 0 || i === node.table.body.length) ? 0.5 : 0.5;
    }
}

[jthoenes]

@gnibeda That's not normal - but a differnent bug.

[gnibeda]

@ispeh Thank you. This is good temporary workaround.
you logic function is strange. you can return 0.5 in all cases :)
But issues still exists and should be solved.

[loverdrive]

I confirm the bug with doubled lines with dontBreakRows set true.
Any news about a fix?

Thank you very much for the great work to this library!

[loverdrive]

I think to solved bug relative to doubled lines with dontBreakRows set true.
I just comment the line number 15730 of library pdfmake.js

        if(this.dontBreakRows) {
            writer.tracker.auto('pageChanged',
                function() {
                    self.drawHorizontalLine(rowIndex, writer);
                },
                function() {
                    writer.commitUnbreakableBlock();
//                  self.drawHorizontalLine(rowIndex, writer);
                }
          );
        }

It works for me. @gnibeda if you want to test it in your code, let me know if work.

[gnibeda]

Thank you. I'm on leave now. I'll check this on 1 aug

[EpicWolverine]

@ispeh Thanks, this fixed the colspan/vertical line issue.
@loverdrive Thanks, this almost fixed the double horizontal lines issue (though that line is now on line #18494). I still get double lines below the headers when they are repeated. So the lines are normal below the first instance of the header and all the data rows, but on second instance of the header (first repeat, on page 2) the line between the last row of the header and the rest of the data is doubled. Though maybe it's almost a feature because you can see that the table is a continuation. It would be great if you could submit a PR for this, though it seems @bpampuch has been inactive as of late.

[liborm85]

Fixed by commit https://github.com/bpampuch/pdfmake/commit/4ec1acc9b55490559724ec6ceec8c1b57efb0e8f..

New version pdfmake released.

[jasminmif]

I want to add smth here, cause since the last deploy colSpan is not working properly.
Before if you colSpan a column, you didnt have to add the missing columns.
ex:

 content: [{ 
            "table": {
                "headerRows":2,
                "body":[
                    [
                        "1",
                        "2",
                        "3"
                    ],
                    [
                        {
                            text: "colspan",
                            colSpan: 3
                        }
                    ]
                ]
            }
        }]

Now you have to do smth like this, which in my case doesnt seem to be OK.

content: [{ 
            "table": {
                "headerRows":2,
                "body":[
                    [
                        "1",
                        "2",
                        "3"
                    ],
                    [
                        {
                            text: "colspan",
                            colSpan: 3
                        },
                        {},{}  // THEESE 2 OBJ, to fill the blank columns
                    ]
                ]
            }
        }]

[liborm85]

Fixed by commit https://github.com/bpampuch/pdfmake/commit/e0e4e135459ea3ec954c02cf1d48e27d6d02ba7c.

Version 0.1.30 released.

[liborm85]

_liborm85 commented on 30 May 2017_
Fixed by commit https://github.com/bpampuch/pdfmake/commit/4ec1acc9b55490559724ec6ceec8c1b57efb0e8f..

New version pdfmake released.

Refixed by commit https://github.com/bpampuch/pdfmake/commit/c2cdd465e7f5146079e7f4a916e37d2d40567393.
(Bug was in adding repeatables.)