pdfmake
pdfmake copied to clipboard
Published
20 hours ago •
bpampuch
bpampuch
Rowspan not working when headerRows are more than 1 in Table
Rowspan not working properly when headerRows are greater than 1
{
"table": {
"keepWithHeaderRows": true,
"headerRows": 2,
"body": [
[{
"text": "OPTION",
"alignment": "center",
"rowSpan": 2,
"style": "tableHeaderCell"
}, {
"text": "DESCRIPTION",
"alignment": "left",
"rowSpan": 2,
"style": "tableHeaderCell"
}, {
"text": "PENSION",
"alignment": "center",
"colSpan": 4,
"style": "tableHeaderCell"
}, {}, {}, {}],
[{}, {}, {
"text": "YEARLY",
"label": "YLY",
"alignment": "center",
"style": "tableHeaderCell"
}, {
"text": "HALF YEARLY",
"label": "HLY",
"alignment": "center",
"style": "tableHeaderCell"
}, {
"text": "QUARTERLY",
"label": "QLY",
"alignment": "center",
"style": "tableHeaderCell"
}, {
"text": "MONTHLY",
"label": "MLY",
"alignment": "center",
"style": "tableHeaderCell"
}],
[{
"text": 1,
"alignment": "center",
"rowSpan": 2
}, {
"text": "Deferred Annuity for Single life",
"alignment": "left",
"rowSpan": 2
}, {
"text": 22480,
"alignment": "center"
}, {
"text": 11015,
"alignment": "center"
}, {
"text": 5451,
"alignment": "center"
}, {
"text": 1798,
"alignment": "center"
}],
[{}, {}, {
"text": "11.04%",
"style": "interestRate",
"alignment": "center"
}, {
"text": "10.82%",
"style": "interestRate",
"alignment": "center"
}, {
"text": "10.71%",
"style": "interestRate",
"alignment": "center"
}, {
"text": "10.6%",
"style": "interestRate",
"alignment": "center"
}],
[{
"text": 2,
"alignment": "center",
"rowSpan": 2
}, {
"text": "Deferred Annuity for Joint life",
"alignment": "left",
"rowSpan": 2
}, {
"text": 21800,
"alignment": "center"
}, {
"text": 10682,
"alignment": "center"
}, {
"text": 5287,
"alignment": "center"
}, {
"text": 1744,
"alignment": "center"
}],
[{}, {}, {
"text": "10.71%",
"style": "interestRate",
"alignment": "center"
}, {
"text": "10.49%",
"style": "interestRate",
"alignment": "center"
}, {
"text": "10.39%",
"style": "interestRate",
"alignment": "center"
}, {
"text": "10.28%",
"style": "interestRate",
"alignment": "center"
}]
],
"widths": ["auto", "*", "auto", "auto", "auto", "auto"]
}
}
Screenshot
Property 'keepWithHeaderRows' must be an integer, not a boolean. Anyway, there is a problem when property keepWithHeaderRows is set to a value bigger than zero and the first column of the rows affected span more than one row. Issue 1959 is related to this one.
The temporary solution is to set 'keepWithHeaderRows' the same value as 'rowSpan' property value.
For example, the code below is problematic because 'keepWithHeaderRows' is set to 1 and the first row spans 2 rows:
// playground requires you to assign document definition to a variable called dd
var dd = {
content: [
// 'Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.',
{
"margin": [0, 650, 0, 0],
"table": {
"keepWithHeaderRows": 1,
"headerRows": 2,
"body": [
[{
"text": "OPTION",
"alignment": "center",
"rowSpan": 2,
"style": "tableHeaderCell"
}, {
"text": "DESCRIPTION",
"alignment": "left",
"rowSpan": 2,
"style": "tableHeaderCell"
}, {
"text": "PENSION",
"alignment": "center",
"colSpan": 4,
"style": "tableHeaderCell"
}, {}, {}, {}],
[{}, {}, {
"text": "YEARLY",
"label": "YLY",
"alignment": "center",
"style": "tableHeaderCell"
}, {
"text": "HALF YEARLY",
"label": "HLY",
"alignment": "center",
"style": "tableHeaderCell"
}, {
"text": "QUARTERLY",
"label": "QLY",
"alignment": "center",
"style": "tableHeaderCell"
}, {
"text": "MONTHLY",
"label": "MLY",
"alignment": "center",
"style": "tableHeaderCell"
}],
[{
"text": 1,
"alignment": "center",
"rowSpan": 2
}, {
"text": "Deferred Annuity for Single life",
"alignment": "left",
"rowSpan": 2
}, {
"text": 22480,
"alignment": "center"
}, {
"text": 11015,
"alignment": "center"
}, {
"text": 5451,
"alignment": "center"
}, {
"text": 1798,
"alignment": "center"
}],
[{}, {}, {
"text": "11.04%",
"style": "interestRate",
"alignment": "center"
}, {
"text": "10.82%",
"style": "interestRate",
"alignment": "center"
}, {
"text": "10.71%",
"style": "interestRate",
"alignment": "center"
}, {
"text": "10.6%",
"style": "interestRate",
"alignment": "center"
}],
[{
"text": 2,
"alignment": "center",
"rowSpan": 2
}, {
"text": "Deferred Annuity for Joint life",
"alignment": "left",
"rowSpan": 2
}, {
"text": 21800,
"alignment": "center"
}, {
"text": 10682,
"alignment": "center"
}, {
"text": 5287,
"alignment": "center"
}, {
"text": 1744,
"alignment": "center"
}],
[{}, {}, {
"text": "10.71%",
"style": "interestRate",
"alignment": "center"
}, {
"text": "10.49%",
"style": "interestRate",
"alignment": "center"
}, {
"text": "10.39%",
"style": "interestRate",
"alignment": "center"
}, {
"text": "10.28%",
"style": "interestRate",
"alignment": "center"
}]
],
"widths": ["auto", "*", "auto", "auto", "auto", "auto"]
}
}
]
}
The temporary solution is to set 'keepWithHeaderRows' to 2:
// playground requires you to assign document definition to a variable called dd
var dd = {
content: [
// 'Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.',
{
"margin": [0, 650, 0, 0],
"table": {
"keepWithHeaderRows": 2,
"headerRows": 2,
"body": [
[{
"text": "OPTION",
"alignment": "center",
"rowSpan": 2,
"style": "tableHeaderCell"
}, {
"text": "DESCRIPTION",
"alignment": "left",
"rowSpan": 2,
"style": "tableHeaderCell"
}, {
"text": "PENSION",
"alignment": "center",
"colSpan": 4,
"style": "tableHeaderCell"
}, {}, {}, {}],
[{}, {}, {
"text": "YEARLY",
"label": "YLY",
"alignment": "center",
"style": "tableHeaderCell"
}, {
"text": "HALF YEARLY",
"label": "HLY",
"alignment": "center",
"style": "tableHeaderCell"
}, {
"text": "QUARTERLY",
"label": "QLY",
"alignment": "center",
"style": "tableHeaderCell"
}, {
"text": "MONTHLY",
"label": "MLY",
"alignment": "center",
"style": "tableHeaderCell"
}],
[{
"text": 1,
"alignment": "center",
"rowSpan": 2
}, {
"text": "Deferred Annuity for Single life",
"alignment": "left",
"rowSpan": 2
}, {
"text": 22480,
"alignment": "center"
}, {
"text": 11015,
"alignment": "center"
}, {
"text": 5451,
"alignment": "center"
}, {
"text": 1798,
"alignment": "center"
}],
[{}, {}, {
"text": "11.04%",
"style": "interestRate",
"alignment": "center"
}, {
"text": "10.82%",
"style": "interestRate",
"alignment": "center"
}, {
"text": "10.71%",
"style": "interestRate",
"alignment": "center"
}, {
"text": "10.6%",
"style": "interestRate",
"alignment": "center"
}],
[{
"text": 2,
"alignment": "center",
"rowSpan": 2
}, {
"text": "Deferred Annuity for Joint life",
"alignment": "left",
"rowSpan": 2
}, {
"text": 21800,
"alignment": "center"
}, {
"text": 10682,
"alignment": "center"
}, {
"text": 5287,
"alignment": "center"
}, {
"text": 1744,
"alignment": "center"
}],
[{}, {}, {
"text": "10.71%",
"style": "interestRate",
"alignment": "center"
}, {
"text": "10.49%",
"style": "interestRate",
"alignment": "center"
}, {
"text": "10.39%",
"style": "interestRate",
"alignment": "center"
}, {
"text": "10.28%",
"style": "interestRate",
"alignment": "center"
}]
],
"widths": ["auto", "*", "auto", "auto", "auto", "auto"]
}
}
]
}
