Rounded table borders?

[DaveSanders]

I'm evaluating pdfmake for a very specific use case, and the client needs to have table borders that are rounded and colored. In some cases, the entire table has four rounded corners, in most cases its just the TL and TR corners that are rounded.

Every other thing we do is covered by pdfmake except this. Looking at the code, it doesn't look like this would be possible with tables themselves, but is there some way to layer a table without an outer border over the top of a canvas? Knowing that the tables might be variable height, and might cross pages?

I'm guessing no, but I wanted to double check to see if I was missing something.

I'd be willing to work on a PR to add this feature, but looking at the table rendering code, this might not even be easy without rewriting a lot of the border code to use rects instead of lines, or to do something tricky to make lines bend corners.

Any ideas on what it would take to add this?

[dorothythurston]

@DaveSanders maybe you could do something like set the outside border of the table to white (or the color of your background) and then draw a vector graphic that would be the same size as your table but with rounded corners and try to line it up with the table?

[dorothythurston]

You'll have to be more dynamic with you variables than this but here is an example of the canvas and table with rounded corners using absolute positions to line it up:

var dd = {
	content: [
	    {
			canvas: [
				{
					type: 'rect',
					x: 0,
					y: 0,
					w: 285,
					h: 130,
					r: 5,
					lineColor: 'black',
				},
			]
	    },
		{
			style: 'tableExample',
			table: {
				headerRows: 1,
				body: [
					[{text: 'Header 1', style: 'tableHeader'}, {text: 'Header 2', style: 'tableHeader'}, {text: 'Header 3', style: 'tableHeader'}],
					['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: 'headerLineOnly',
			absolutePosition: {x: 45, y: 50}
		},
	],
	styles: {
	}
	
}

[dorothythurston]

this is what that code generates if you try it out in http://pdfmake.org/playground.html

[DaveSanders]

Thanks for showing an example. Unfortunately, I have a couple things the client wants that this can't do. First, I need rounded corners on the top two corners only. Second, the header area would need to be filled in with a solid color - I tried to do this with canvas, but you get color at the corners too. Finally, wouldn't it be difficult to know the size of a table to be able to make the canvas the same shape?

I'm probably going to be using an HTML to PDF solution, since I can do all of the layout in a flow oriented layout with HTML.

Thanks for trying it out though!

[liborm85]

Feature request for table borders is here: #724

[cocuba]

why is closed ?? in the feature request #724 it doesnt' fixed

[Guito]

Hello @liborm85 ,
Do you think this can be implemented?

[AZchVVT]

@liborm85 the canvas implementation doesn't work for me because I need the title and lines to be different colors