Colored odd /even rows in a table
ilhamkaddourii opened this issue · 2 comments
ilhamkaddourii commented
Hello,
What would be the best way to use colored background on a table, depending if the row is odd or even or based on certain number aka each 3 or so? there is nth child property in css but i can't get it to work
thank you!
Aymkdn commented
By using:
- The 'layout' attribute on your table (https://github.com/Aymkdn/html-to-pdfmake#special-properties)
- Then by defining a PDFMake layout function (https://pdfmake.github.io/docs/0.1/document-definition-object/tables/)
So the HTML Code:
<table data-pdfmake="{'layout':'zebra'}">
<tr><th>Header 1</th><th>Header 2</th></tr>
<tr><td>Row 1</td><td>Row 1</td></tr>
<tr><td>Row 2</td><td>Row 2</td></tr>
<tr><td>Row 3</td><td>Row 3</td></tr>
<tr><td>Row 4</td><td>Row 4</td></tr>
</table>
And the JS code should look like:
// generate the PDFMake code from HTML
var result = htmlToPdfMake("…html…");
// set the doc definition
var docDefinition = {
content: [ result ]
}
// generate the PDF by passing an additional parameter
var pdfDocGenerator = pdfMake.createPdf(docDefinition, {
zebra: {
// I took the below code from the PDFMake Playground
fillColor: function (rowIndex, node, columnIndex) {
return (rowIndex % 2 === 0) ? '#CCCCCC' : null;
}
}
});
Disclaimer: I didn't test this code, but it should be pretty accurate.
github-actions commented
This issue has been automatically closed because the requestor didn't provide any additional comment.