Pdfmake: Is it possible to assign background color to a table cell?

Created on 19 May 2014  路  15Comments  路  Source: bpampuch/pdfmake

Is it possible to assign background color to a table cell?

thanks, library is awesome

feature request

Most helpful comment

Needed that for my app so i added some lines of code to tableProcessor.js;
You use it by adding another function in the layout definition

var layout = { 
    hLineWidth: function(i, node) { ... }, 
    vLineWidth: function(i, node) { ... }, 
    hLineColor: function(i, node) { ... }, 
    vLineColor: function(i, node) { ... }, 
    //you just return null for the rest
    fillColor: function(row, col, node) { return row > 0 && row % 2 ? 'yellow' : null; }
} 

here is a plunker to test

Not sure if that will fit well the rest o library but i tested it and it works well (even against variable border sizes)

All 15 comments

Hi, I try to use this library and it's very simple and fun.
But I need to set a style with background color to a table cell..Is it possible?

thanks

Not yet

Sorry, I've been very busy during last 3 weeks, I'll get back to pdfmake next week.

Ok, thanks for your answer!

Hi, sorry, but I need to use this feature.
When do you think will be implemented?
I need this information because I may find another library...

Thanks

I would like to add that I could really use this feature as well.

Yes, It could be really useful. And It would be great not only to a cell, also to a complete row. Thanks

Needed that for my app so i added some lines of code to tableProcessor.js;
You use it by adding another function in the layout definition

var layout = { 
    hLineWidth: function(i, node) { ... }, 
    vLineWidth: function(i, node) { ... }, 
    hLineColor: function(i, node) { ... }, 
    vLineColor: function(i, node) { ... }, 
    //you just return null for the rest
    fillColor: function(row, col, node) { return row > 0 && row % 2 ? 'yellow' : null; }
} 

here is a plunker to test

Not sure if that will fit well the rest o library but i tested it and it works well (even against variable border sizes)

Nice work yelouafi.
Is it possible to assign a cell color inside the code? For example:

[{ text: 'Cell text', style: 'headerTable', colSpan:2, fillColor:'red'},{}]

Hmm, I'm not seeing this working in Chrome on plunker. Is this this working?

Sorry I was fixing some issues and did some branching reset
Plunker should be working fine now
BTW i changed the usage to a more natural fillColor style property as @onbermejo commented;

[{ text: ...., fillColor: 'yellow'}]

And since it's style property you can also use the library styling capabilities (style dictionaries, style overrides)

var docDef = {
    .....    
    [{ text: ....,  style: 'myCell'}]
   .....
   styles: {
     myCell: { fillColor: 'yellow' }
   }

It is working very well!
Thank you @yelouafi

@yelouafi :Before I implement it on my production server, I would like to know if this new library is the same as the original, only with the change of the fillColor? I have been comparing them and there are several changes.

@bpampuch : Are you going to implement this changes to your original file?

It would be great not to divide the project,

Thanks.

@onbermejo the only changes are (the master branch includes also the latest builds)

  • modified sources files (4): docMeasure, elementWriter, pageElementWriter and tableProcessor
  • files in the build directory, those are necessary if you want to use the library on the browser (you should avoid the minified version for now until issues #18 and #60 are fixed)

you can also checkout the tableCellFillColor and run your own builds locally

BTW you may also find it useful to merge the textDecorator

And just a last EDIT: i don't intend to create a new library from this fork; all those features are intended to enhance the main library (which i find awesome to have in the node.js archipel).

as for the integration into the main library i already made this pull requests #82 and #79;

Thanks, yelouafi.

I just wasn't sure if I was doing something incorrect at the time or using an unsupported

I appreciate your efforts on this project. You are doing some pretty cool things.

PR has been merged

Hi
I'd like to create a table with alternating background colors for each row. yelouafi's original approach with the table layout would have worked for me, but I see the fillColor property is now a part of the cell's style itself, which is also practical, but not so handy for what I want. Is there any way to do this without setting a style for each row on my code? Thanks!

Was this page helpful?
0 / 5 - 0 ratings

Related issues

Masber picture Masber  路  3Comments

Christian24 picture Christian24  路  3Comments

ValeSauer picture ValeSauer  路  3Comments

dmatesic picture dmatesic  路  3Comments

kumarandena picture kumarandena  路  3Comments