Pdfmake: Something similar to border-width property in css

[Quixomatic]

Are there currently any plans to add border-width functionality to tables? Currently the borders are quite bulky, looks like 2px to 3px in width to me. Being able to control the widths of the borders would be extremely useful.

[liborm85]

This is supported, you can use hLineWidth and vLineWidth functions, see playground > _TABLES_ and readme.

[Quixomatic]

@liborm85 thank you for the quick response, I didn't realize what that was for. Is there a numeric value translation that maps to 1px border widths? It seems like returning 0.1 - 0.25 for hLineWidth and vLineWidth looks closest to 1px.

[liborm85]

Unit is points (pt).

[blikblum]

I am also looking into this issue.

With @liborm85 info and this conversor i found that 1 pixel === 0.75 points.

But when setting line width to 0.75 sometimes draws a sharp line sometimes a fuzzy one.

See how this def is draw in playground:

 {
    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: {
        hLineWidth: function (i, node) {
            return 0.75;
        },
        vLineWidth: function (i, node) {
            return 0.75;
        }
    }
}

Second and fourth vertical lines and fourth horizontal line are sharp, while others are fuzzy

I bet is something related how vector graphics are draw. There's some info about this when using cairo, a vector drawing with a PostScript and PDF inspired api:
https://www.cairographics.org/FAQ/#sharp_lines
http://stevehanov.ca/blog/index.php?id=28

In fact, changing margin left and top changes how lines are draw

[Quixomatic]

@blikblum I noticed that as well, sometimes the lines are sharp/fuzzy depending on the value you set for hLineWidth and vLineWidth, since my project doesn't require the values to change I found that 0.25 provides the sharpest lines (at least so far).

@liborm85 thank you for letting me know the unit of measure is in pt, very helpful

[Quixomatic]

@liborm85 is there anything on the books to add borders to regular text content blocks?

[liborm85]

Borders is not supported with text.