pdfmake
pdfmake copied to clipboard
Published
20 hours ago •
bpampuch
bpampuch
Spanning of table-cells
If you're using col-span on a cell, which is followed by another cell, the spanning eats up the latter one. This is because the expanding of the cells does not insert, but sets the span-cells also if there is already a cell.
This document definition produces a "Malformed table row":
{
"content": [{
"table": {
"body": [
[
"1",
"Apfel",
"4",
{
"alignment": "right",
"text": "0,30"
}, {
"alignment": "right",
"text": "1,20"
}
],
[
"2",
"Birne",
"3",
{
"alignment": "right",
"text": "0,55"
}, {
"alignment": "right",
"text": "1,65"
}
],
[{
"alignment": "right",
"colSpan": 4,
"text": "Summe"
}, {
"alignment": "right",
"text": "2,85"
}
]
],
"widths": ["10%", "50%", "10%", "15%", "15%"]
}
}]
}
If you change the order in the last row it works, because in this order the effect does not take place. With row-spans it's the same thing. In additonal, the column count is stored before the loop over columns starts, and therefore the loop doesn't respect that the cell-spanning influences the column count during loop run. This results in empty cells at row end.
I forked and branched your project and fixed the problems here: https://github.com/fio66/pdfmake-tablespan-fixes/tree/table-span-fixes How can I contribute it?
Test definitions with some combinations of col- and row-spans:
{
"content": [{
"table": {
"body": [
[{
"style": "tableHeader",
"alignment": "left",
"text": "Col. 1"
}, {
"style": "tableHeader",
"alignment": "left",
"text": "Col. 2"
}, {
"style": "tableHeader",
"alignment": "left",
"text": "Col. 3"
}, {
"style": "tableHeader",
"alignment": "left",
"text": "Col. 4"
}],
[{
"style": "",
"alignment": "left",
"colSpan": 2,
"text": "1"
}, {
"style": "",
"alignment": "left",
"colSpan": 2,
"text": "2"
}],
[{
"style": "",
"alignment": "left",
"text": "3"
}, {
"style": "",
"alignment": "left",
"colSpan": 3,
"text": "4"
}],
[{
"style": "",
"alignment": "left",
"text": "5"
}, {
"style": "",
"alignment": "left",
"text": "6"
}, {
"style": "",
"alignment": "left",
"text": "7"
}, {
"style": "",
"alignment": "left",
"text": "8"
}]
],
"widths": ["25%", "25%", "25%", "25%"]
},
"style": "tableStyle",
"headerRows": 1
}, "\n", {
"table": {
"body": [
[{
"style": "tableHeader",
"alignment": "left",
"text": "Col. 1"
}, {
"style": "tableHeader",
"alignment": "left",
"text": "Col. 2"
}, {
"style": "tableHeader",
"alignment": "left",
"text": "Col. 3"
}, {
"style": "tableHeader",
"alignment": "left",
"text": "Col. 4"
}],
[{
"style": "",
"alignment": "left",
"rowSpan": 2,
"text": "1"
}, {
"style": "",
"alignment": "left",
"colSpan": 2,
"text": "2"
}, {
"style": "",
"alignment": "left",
"text": "3"
}],
[{
"style": "",
"alignment": "left",
"colSpan": 3,
"text": "4"
}],
[{
"style": "",
"alignment": "left",
"text": "5"
}, {
"style": "",
"alignment": "left",
"text": "6"
}, {
"style": "",
"alignment": "left",
"text": "7"
}, {
"style": "",
"alignment": "left",
"text": "8"
}]
],
"widths": ["25%", "25%", "25%", "25%"]
},
"style": "tableStyle",
"headerRows": 1
}, "\n", {
"table": {
"body": [
[{
"style": "tableHeader",
"alignment": "left",
"text": "Col. 1"
}, {
"style": "tableHeader",
"alignment": "left",
"text": "Col. 2"
}, {
"style": "tableHeader",
"alignment": "left",
"text": "Col. 3"
}, {
"style": "tableHeader",
"alignment": "left",
"text": "Col. 4"
}],
[{
"style": "",
"alignment": "left",
"text": "1"
}, {
"style": "",
"alignment": "left",
"colSpan": 2,
"rowSpan": 2,
"text": "2"
}, {
"style": "",
"alignment": "left",
"text": "3"
}],
[{
"style": "",
"alignment": "left",
"text": "4"
}, {
"style": "",
"alignment": "left",
"text": "5"
}],
[{
"style": "",
"alignment": "left",
"text": "6"
}, {
"style": "",
"alignment": "left",
"text": "7"
}, {
"style": "",
"alignment": "left",
"text": "8"
}, {
"style": "",
"alignment": "left",
"text": "9"
}]
],
"widths": ["25%", "25%", "25%", "25%"]
},
"style": "tableStyle",
"headerRows": 1
}],
"images": {},
"pageSize": "A4",
"info": {
"title": "JANUS-Report"
},
"defaultStyle": {
"font": "Roboto",
"fontSize": 12,
"color": "#000",
"alignment": "justify",
"lineHeight": 1.2
},
"styles": {
"italic": {
"italics": true
},
"bold": {
"bold": true
},
"underline": {
"decoration": "underline"
},
"strike": {
"decoration": "lineThrough"
},
"heading1": {
"font": "Roboto",
"fontSize": 20,
"lineHeight": 1.4,
"marginTop": 10,
"alignment": "left"
},
"heading2": {
"font": "Roboto",
"fontSize": 16,
"lineHeight": 1.2,
"marginTop": 8,
"alignment": "left"
},
"heading3": {
"font": "Roboto",
"fontSize": 12,
"lineHeight": 1.1,
"marginTop": 6,
"alignment": "left"
},
"heading4": {
"font": "Roboto",
"fontSize": 12,
"marginTop": 6,
"alignment": "left"
},
"hyperlink": {
"color": "#365F91",
"underlined": true
},
"red": {
"color": "#FB3B5C"
},
"green": {
"color": "#008030"
},
"highlighted": {
"background": "yellow"
},
"tableHeader": {
"fillColor": "#98c0f4"
},
"tableData": {
"alignment": "left",
"borderTop": "none"
},
"normal": {
"font": "Roboto",
"fontSize": 12,
"color": "#000",
"alignment": "justify",
"lineHeight": 1.2
}
}
}
GitHub documentation:
Hi I'm using 0.2.8 , but still not able to handle the error app is getting crashed if I pass invalid table. Tried using try catch but still no use.
