alternating cell fill?

[yocontra]

is this possible given the current implementation? you can specify the cell fill but there doesn't seem to be an easy mechanism for filling on alternating rows

[yocontra]

It seems like cell/header backgrounds don't work at all - using this attribute just paints a black rectangle, you can't specify the color. Looking at the code, the color option never gets passed through: https://github.com/voilab/voilab-pdf-table/blob/master/voilab-table.js#L42

[turneye]

It seems like cell/header backgrounds don't work at all - using this attribute just paints a black rectangle, you can't specify the color. Looking at the code, the color option never gets passed through: https://github.com/voilab/voilab-pdf-table/blob/master/voilab-table.js#L42

To set the background color you need to call doc.fillColor on the PDFDocument prior to calling addBody / addHeader - the problem is that doc.fillColor also defines the text color. So if you ever set fill or fillHeader as far as I can tell you will never see the text in the cell just a colored cell. It's not really useful in it's current form - we'd need to add some "color" properties to the column definition for both foreground and background colors.

[r-rayns]

I have managed to get alternate row shading working using onRowAdd and onPageAdded. I shade each row using a rectangle with the fill and stroke set to the shading colour. The majority of rows are shaded in onRowAdd this is triggered just before the row is added so the shading appears behind the text.

However I was getting an issue where a blank area was being shaded just before a page break. To fix this I had to detect when a row was about to trigger a page break and perform the shading inside the onPageAdded event.

The code could probably be made neater but here it is:

// The below section of code draws a background behind each row.
// rowShadingCounter initialised to 0 elsewhere
.onRowAdd((tb, row) => {
  currentRowHeight = row._renderedContent.height;
  const pageBreakPoint = doc.page.height - doc.page.margins.bottom - 5; // minus the row top padding of 5

  // check if a page break is about to occur when the row is added. If so leave onPageAdded to set the row background
  if (tb.pdf.y > (pageBreakPoint - currentRowHeight)) return;
  

  const shade = rowShadingCounter % 2 === 0 ? colours.rowShade1 : colours.rowShade2;
  // shade the row
  rowShading(tb.pdf, 70, tb.pdf.y, 449, currentRowHeight, shade)
    .fillAndStroke(colours.black, colours.black); // set back to black for text

  rowShadingCounter++;
})
.onPageAdded(tb => {
  const shade = rowShadingCounter % 2 === 0 ? colours.rowShade1 : colours.rowShade2;
  // shade the first row, add 10 to the y to avoid shading the table headers
  rowShading(tb.pdf, 70, (tb.pdf.y + 10), 449, currentRowHeight, shade)
    .fillAndStroke(colours.black, colours.black); // set back to black for text

  rowShadingCounter++;
  // add table headers
  tb.addHeader();
});

const rowShading = (doc, x, y, w, h, shade) => {
  return doc
    .rect(x, y, w, h)
    .fillAndStroke(shade, shade);
};

This results in:

I've tested it with rows of varying heights and it still handles it.

[tafel]

Nice job! What you can do is to pack your code in a plugin (check FitColumn Plugin for a base to start).

I can then reference it here if it fit the needs of many.

[r-rayns]

Nice job! What you can do is to pack your code in a plugin (check FitColumn Plugin for a base to start).

I can then reference it here if it fit the needs of many.

I've done as you've suggested. I wasn't sure how you wanted me to send the plug-in so I've opened a new PR, hope that is okay.