pdfmake
pdfmake copied to clipboard
bpampuch
How to fill column background color for pdfmake with fillColor ?
Is there any option to fill column background color with fillColor: '#dedede' ?
fillColor works in tablecell very well at the same time it doesn't work for column :(
<script src="https://rawgit.com/bpampuch/pdfmake/master/build/vfs_fonts.js"></script>
<script src="https://rawgit.com/yelouafi/pdfmake/master/build/pdfmake.js"></script>
<script>
function print(argument) {
// open the PDF in a new window
pdfMake.createPdf(docDefinition).open();
}
</script>
<button onclick="print()" style="display:block; margin: 10px auto;padding: 20px 50px;">Print</button>
<hr>
<script>
var docDefinition = {
content: [
'This paragraph fills full width, as there are no columns. Next paragraph however consists of three columns', {
columns: [{
// auto-sized columns have their widths based on their content
width: 'auto',
text: 'First column',
fontSize: 30,
fillColor: '#dedede'
}, {
// star-sized columns fill the remaining space
// if there's more than one star-column, available width is divided equally
width: '*',
text: 'Second column'
}, {
// fixed width
width: 100,
text: 'Third column'
}, {
// percentage width
width: '10%',
text: 'Last column'
}],
// optional space between columns
columnGap: 10
},
'This paragraph goes below all columns and has full width'
]
};
</script>
If background color on columns doesn't work for you, I guess it doesn't work at all :-/
Do you want to work on a pull request for that?
@jthoenes Thank you very much for your quick reply. I will have a look how does the function works, and I will definitely implement give pull request if I find solution :+1:
You can use a table for that. Here is what worked for me:
content: [ { table: { widths:['*'], body: [[{ text: "Monthly Report", style: 'filledHeader' }]] } } ], styles: { filledHeader: { bold: true, fontSize: 14, color: 'white', fillColor: 'black', alignment: 'center' } }
Table approach worked (background is just background for text, maybe if one uses it in a columns parent):
{
margin: [32, 0, 0, 0],
table: {
widths: ['*'],
body: [[{
fontSize: 10,
fillColor: 'lightgrey',
alignment: 'left',
columns: [
{
text: 'foo 123'
},
{
text: '456 bar'
}
]
}]]
}
}
or you can also replace columns with just a {text: 'hi'}
{ table: { widths: [ '', '', ], body: [ [ 'Column1', 'Column2', ], ], }, layout: { fillColor: function(rowIndex, node, columnIndex) { return (rowIndex === 0) ? '#0050b8' : null; }, }, }
This is what you were looking for!! this worked for me, now I'm trying to figure out how change the 'text color' of the row
Will this issue be fixed? I need to set the background color only in one column.
