Skip to content

Bug Report: Subtable breaches the table and breaks the line when table crosses two pages #2885

Description

@giatkt1598

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:

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],
        }
    }
};
Image

Metadata

Metadata

Assignees

No one assigned

    Labels

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions