When a row contains a subtable with a lot of data, it moves to the next page. However, on the next page, the subtable distorts the parent table and breaks the layout.
var dd = {
content: [
{
text: "Table with Nested Table",
style: "header",
},
[
{
layout: {
paddingLeft: function (i, node) {
return 8;
},
paddingRight: function (i, node) {
return 8;
},
paddingTop: function (i, node) {
return 10;
},
paddingBottom: function (i, node) {
return 20;
}
},
table: {
headerRows: 1,
widths: ["*", "*"],
body: [
[
{ text: "Header 1", bold: true },
{ text: "Header 2", bold: true },
],
["Row 1 Col 1", "Row 1 Col 2"],
[
{
colSpan: 2,
table: {
headerRows: 1,
widths: ['*', '*', '*'],
body: [
["Col1", "Col2", "Col3"],
["1", "2", "3"],
["1", "2", "3"],
["1", "2", "3"],
["1", "2", "3"],
["1", "2", "3"],
["1", "2", "3"],
["1", "2", "3"],
["1", "2", "3"],
["1", "2", "3"],
["1", "2", "3"],
["1", "2", "3"],
["1", "2", "3"],
["1", "2", "3"],
["1", "2", "3"],
["1", "2", "3"],
["1", "2", "3"],
["1", "2", "3"],
["1", "2", "3"],
["1", "2", "3"],
["1", "2", "3"],
["1", "2", "3"],
["1", "2", "3"],
["1", "2", "3"],
["1", "2", "3"],
["1", "2", "3"],
["1", "2", "3"],
["1", "2", "3"],
["1", "2", "3"],
["1", "2", "3"],
["1", "2", "3"],
["1", "2", "3"],
["1", "2", "3"],
["1", "2", "3"]
],
},
layout: {
hLineWidth: function () { return 0.5 },
vLineWidth: function () { return 0.5 },
hLineColor: function () { return 'black' },
vLineColor: function () { return 'black' },
paddingLeft: function () { return 4 },
paddingRight: function () { return 4 },
paddingTop: function () { return 2 },
paddingBottom: function () { return 2 }
}
},
{}
],
["Row 2 Col 1", "Row 2 Col 2"],
["Row 3 Col 1", "Row 3 Col 2"],
["Row 4 Col 1", "Row 4 Col 2"],
["Row 5 Col 1", "Row 5 Col 2"],
["Row 6 Col 1", "Row 6 Col 2"],
["Row 7 Col 1", "Row 7 Col 2"],
["Row 8 Col 1", "Row 8 Col 2"],
["Row 9 Col 1", "Row 9 Col 2"],
["Row 10 Col 1", "Row 10 Col 2"]
],
}
}
]
],
styles: {
header: {
fontSize: 18,
bold: true,
margin: [0, 0, 0, 10],
}
}
};
Hello,
When a row contains a subtable with a lot of data, it moves to the next page. However, on the next page, the subtable distorts the parent table and breaks the layout.
Example: