Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Bottom border on the table doesn't show when the table is on multiple pages #2792

Open
bobbinch opened this issue Sep 24, 2024 · 2 comments
Open

Comments

@bobbinch
Copy link

Hello,
I try to do a table with a header, many rows and horizontal borders above and below the header and at the end of the table. But, when the table is on multiple pages, the table on the first page doesn't have a bottom border.

This an example that works on "playground" to illustrate my problem. (sorry for the length of the example)

Thanks.


var dd = {
	content: [
	
		{text: 'Headers', style: 'subheader'},
		'You can declare how many rows should be treated as a header. Headers are automatically repeated on the following pages',
		{text: ['It is also possible to set keepWithHeaderRows to make sure there will be no page-break between the header and these rows. Take a look at the document-definition and play with it. If you set it to one, the following table will automatically start on the next page, since there\'s not enough space for the first row to be rendered here'], color: 'gray', italics: true},
		{
			style: 'tableExample',
			margin: [5, 10, 5, 0],
			headlineLevel: 'table',
			table: {
				headerRows: 1,
				dontBreakRows: true,
				widths:['*', 20, 80, 80],
				keepWithHeaderRows: 1,
				body: [
					[{text: 'Header 1', style: 'tableHeader'}, {text: 'H2', style: 'tableHeader'}, {text: 'Header 3', style: 'tableHeader'},{text: 'Header 4', style: 'tableHeader'}],
					[
						'Lorem ipsum dolor sit amet, consectetur adipi',
						'10',
						'156.3',
						'156.3'
					],
					[
						'Lorem ipsum dolor sit amet, consectetur adipi',
						'10',
						'156.3',
						'156.3'
					],
					[
						'Lorem ipsum dolor sit amet, consectetur adipi',
						'10',
						'156.3',
						'156.3'
					],
					[
						'Lorem ipsum dolor sit amet, consectetur adipi',
						'10',
						'156.3',
						'156.3'
					],
					[
						'Lorem ipsum dolor sit amet, consectetur adipi',
						'10',
						'156.3',
						'156.3'
					],
					[
						'Lorem ipsum dolor sit amet, consectetur adipi',
						'10',
						'156.3',
						'156.3'
					],
					[
						'Lorem ipsum dolor sit amet, consectetur adipi',
						'10',
						'156.3',
						'156.3'
					],
					[
						'Lorem ipsum dolor sit amet, consectetur adipi',
						'10',
						'156.3',
						'156.3'
					],
					[
						'Lorem ipsum dolor sit amet, consectetur adipi',
						'10',
						'156.3',
						'156.3'
					],
					[
						'Lorem ipsum dolor sit amet, consectetur adipi',
						'10',
						'156.3',
						'156.3'
					],
					[
						'Lorem ipsum dolor sit amet, consectetur adipi',
						'10',
						'156.3',
						'156.3'
					],
					[
						'Lorem ipsum dolor sit amet, consectetur adipi',
						'10',
						'156.3',
						'156.3'
					],
					[
						'Lorem ipsum dolor sit amet, consectetur adipi',
						'10',
						'156.3',
						'156.3'
					],
					[
						'Lorem ipsum dolor sit amet, consectetur adipi',
						'10',
						'156.3',
						'156.3'
					],
					[
						'Lorem ipsum dolor sit amet, consectetur adipi',
						'10',
						'156.3',
						'156.3'
					],
					[
						'Lorem ipsum dolor sit amet, consectetur adipi',
						'10',
						'156.3',
						'156.3'
					],
					[
						'Lorem ipsum dolor sit amet, consectetur adipi',
						'10',
						'156.3',
						'156.3'
					],
					[
						'Lorem ipsum dolor sit amet, consectetur adipi',
						'10',
						'156.3',
						'156.3'
					],
					[
						'Lorem ipsum dolor sit amet, consectetur adipi',
						'10',
						'156.3',
						'156.3'
					],
					[
						'Lorem ipsum dolor sit amet, consectetur adipi',
						'10',
						'156.3',
						'156.3'
					],
					[
						'Lorem ipsum dolor sit amet, consectetur adipi',
						'10',
						'156.3',
						'156.3'
					],
					[
						'Lorem ipsum dolor sit amet, consectetur adipi',
						'10',
						'156.3',
						'156.3'
					],
					[
						'Lorem ipsum dolor sit amet, consectetur adipi',
						'10',
						'156.3',
						'156.3'
					],
					[
						'Lorem ipsum dolor sit amet, consectetur adipi',
						'10',
						'156.3',
						'156.3'
					],
					[
						'Lorem ipsum dolor sit amet, consectetur adipi',
						'10',
						'156.3',
						'156.3'
					],
					[
						'Lorem ipsum dolor sit amet, consectetur adipi',
						'10',
						'156.3',
						'156.3'
					],
					[
						'Lorem ipsum dolor sit amet, consectetur adipi',
						'10',
						'156.3',
						'156.3'
					],
					[
						'Lorem ipsum dolor sit amet, consectetur adipi',
						'10',
						'156.3',
						'156.3'
					],
					[
						'Lorem ipsum dolor sit amet, consectetur adipi',
						'10',
						'156.3',
						'156.3'
					],
					[
						'Lorem ipsum dolor sit amet, consectetur adipi',
						'10',
						'156.3',
						'156.3'
					],
					[
						'Lorem ipsum dolor sit amet, consectetur adipi',
						'10',
						'156.3',
						'156.3'
					],[
						'Lorem ipsum dolor sit amet, consectetur adipi',
						'10',
						'156.3',
						'156.3'
					],
					[
						'Lorem ipsum dolor sit amet, consectetur adipi',
						'10',
						'156.3',
						'156.3'
					],
					[
						'Lorem ipsum dolor sit amet, consectetur adipi',
						'10',
						'156.3',
						'156.3'
					],
					[
						'Lorem ipsum dolor sit amet, consectetur adipi',
						'10',
						'156.3',
						'156.3'
					],
					[
						'Lorem ipsum dolor sit amet, consectetur adipi',
						'10',
						'156.3',
						'156.3'
					],
					[
						'Lorem ipsum dolor sit amet, consectetur adipi',
						'10',
						'156.3',
						'156.3'
					],
					[
						'Lorem ipsum dolor sit amet, consectetur adipi',
						'10',
						'156.3',
						'156.3'
					],
					[
						'Lorem ipsum dolor sit amet, consectetur adipi',
						'11',
						'156.3',
						'156.3'
					],
				]
			},
			layout: {
                          hLineWidth: (i, node, columnIndex) => {
                            return i === 0 || i === 1 || i === node.table.body.length ? 1 : 0;
                          },
                          vLineWidth: function (i, node) {
                            return 1;
                          },
                          defaultBorder: true,
                        }
		},
	]
}
@fe-cj
Copy link
Contributor

fe-cj commented Sep 25, 2024

When there is a page break in a table it uses the table styling to decide if it should draw the bottom border. So it is not drawing the line because the last row before the page break does not have bottom border.

I tried in LibreOffice Writer and it behaves the same way:
image

@bobbinch
Copy link
Author

Ok thank you for your answer but do you have an idea to do this ? (knowing that the number of lines is not constant).

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

2 participants