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

Is it possible to style table borders? #724

Open
nstolpe opened this issue Oct 12, 2016 · 7 comments
Open

Is it possible to style table borders? #724

nstolpe opened this issue Oct 12, 2016 · 7 comments

Comments

@nstolpe
Copy link

nstolpe commented Oct 12, 2016

Can table borders have styles (dashed, dotted, etc) like those assignable through CSS border-style? I've looked through the docs and the source without success, but I could be missing something.

@liborm85
Copy link
Collaborator

liborm85 commented Sep 1, 2018

Border styles implemented by commit 0072269.

Example of usage:

var dd = {
	content: [
		{
			table: {
				headerRows: 1,
				body: [
					['Header 1', 'Header 2', 'Header 3'],
					['Sample value 1', 'Sample value 2', 'Sample value 3'],
					['Sample value 1', 'Sample value 2', 'Sample value 3'],
					['Sample value 1', 'Sample value 2', 'Sample value 3'],
					['Sample value 1', 'Sample value 2', 'Sample value 3'],
					['Sample value 1', 'Sample value 2', 'Sample value 3'],
				]
			},
			layout: {
				hLineStyle: function (i, node) {
					if (i === 0 || i === node.table.body.length) {
						return null;
					}
					return {dash: {length: 10, space: 4}};
				},
				vLineStyle: function (i, node) {
					if (i === 0 || i === node.table.widths.length) {
						return null;
					}
					return {dash: {length: 4}};
				},
			}
		}
	]
}

@ericchaves
Copy link

Is this available at playground? I've tried the definition below but the result has no dashed line.
Out of curiosity, Is it possible to draw lines in any other way (ie, a single line without any table)?

var dd = {
	content: [
		{
			table: {
				headerRows: 1,
				body: [
					['Header 1', 'Header 2', 'Header 3'],
					['Sample value 1', 'Sample value 2', 'Sample value 3'],
					['Sample value 1', 'Sample value 2', 'Sample value 3'],
					['Sample value 1', 'Sample value 2', 'Sample value 3'],
					['Sample value 1', 'Sample value 2', 'Sample value 3'],
					['Sample value 1', 'Sample value 2', 'Sample value 3'],
				]
			},
			layout: {
				hLineStyle: function (i, node) {
					return {dash: {length: 10, space: 4}};
				},
				vLineStyle: function (i, node) {
					return {dash: {length: 4}};
				},
			}
		}
	]
}

@Auenc
Copy link

Auenc commented Oct 22, 2018

With the current version of pdfmake on npm dashed borders do not work. If you manually replace the src/tableProcessor.js file with the file that exists on master, it will work. Seems the most up to date tableProcessor didn't make it into the 0.1.38 build.

@liborm85 liborm85 reopened this Nov 26, 2018
@DaJoBro
Copy link

DaJoBro commented Jan 23, 2019

Is it planned to implement rounded borders?

@gboysko
Copy link

gboysko commented Jan 22, 2024

It would be great to have double borders as well.

@boycce
Copy link

boycce commented Aug 22, 2024

Awesome, looks like this has been released now.

@bheemaguli
Copy link

Is there plan to release the 'layout' options as style apis? Having python backend to generate dynamic tables resticts non-json functionalitis. All the layout features are out of reach in this case.

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

No branches or pull requests

8 participants