Pdfmake: setting different cell border color on table

[m3Lvs]

Hello, is it possible to set different border color per cell ? like { text: 'cell text', border:[true,true,true,true],borderColor:'red']}

i would like to create

currently I only have this

thank you for answering, by the way, your library is awesome , very fast !

have a good day ahead!

[liborm85]

Yes, it is possible. Example of table cell:

{text: 'cell text', border: [true, true, true, true], fillColor: 'red'}

[m3Lvs]

Hello, fillColor is for cell background ? I need to set color for border Sir

[liborm85]

Simple example:

var dd = {
    content: [
        {
            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: {
                hLineColor: function (i, node) {
                    return (i === 0 || i === node.table.body.length) ? 'red' : 'blue';
                },
                vLineColor: function (i, node) {
                    return (i === 0 || i === node.table.widths.length) ? 'red' : 'blue';
                },
            }
        },
    ]
}

hLineColor and vLineColor edit as you need it

[m3Lvs]

nah, as you can see on the image I posted above "the small one" you see I already made a calendar using pdfmake.. I have used "layout" to change the color of the border right? now I am asking HOW DO I SET SPECIFIC CELL to other COLORS not the whole borders on the table..

eg. on html/css perspective,

<table>
<tr ><td class='red-border'>sample text</td><td>sample text</td><td>sample text</td></tr>
<tr><td>sample text</td><td>sample text</td><td>sample text</td></tr>
<tr><td>sample text</td><td>sample text</td><td>sample text</td></tr>
</table>

<style> td{border:1px solid #000;} .red-border{border:2px solid red !important;} </style>

is this possible?

see all the borders are dark blue and only 2 of them has "light blue" border..

[liborm85]

Then NO, borderColor property is not supported for table cell.

[m3Lvs]

Ahh I see.. as I thought so. anyways Thanks for clarifying this..

[FelipeMicali]

I think it's better for you to render your html/css calendar in a canvas element and convert it to an image, than use it in pdfmake. Use html2canvas to achieve this: https://github.com/niklasvh/html2canvas

[TSnowRock]

e this is not borderColor？

[dorothythurston]

For anyone finding this later I believe it is supported now https://github.com/bpampuch/pdfmake/commit/9e25e22e5cd0b66d9179aca6269ddc3a0bbdb557