I want to set the row height for all the rows in my table. I am currently specifying my styles like this:

table: {
    widths: ['33%', '34%', '33%'],
    heights: [40, 40],
    headerRows: 1,

That works very well if I have a known amount of rows, in this case, the first row and the table header get the height of 40. Everything underneath will fall back to the default height since I didn't specify anything different.

If I, however, have a table with a lot of rows or like in my case a table where the row count is dynamic, it is a tedious task to write each height into the object.

Is there any better way of applying styles to all rows?

I want to set the row height for all the rows in my table. I am currently specifying my styles like this:

table: {
    widths: ['33%', '34%', '33%'],
    heights: [40, 40],
    headerRows: 1,

That works very well if I have a known amount of rows, in this case, the first row and the table header get the height of 40. Everything underneath will fall back to the default height since I didn't specify anything different.

If I, however, have a table with a lot of rows or like in my case a table where the row count is dynamic, it is a tedious task to write each height into the object.

Is there any better way of applying styles to all rows?

• javascript
• pdf-generation
• javascript-objects
• pdfmake

Share Improve this question Follow asked Feb 8, 2022 at 9:14 Luke_KSLuke_KS 18333 silver badges1616 bronze badges

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 3

You can set the same height for all rows by assigning to "heights" a number instead of an array:

table: {
  widths: ['33%', '34%', '33%'],
  heights: 40, 
  headerRows: 1,
  body: [...]
}

Alternatively, you could dynamically generate an array of the right length in JavaScript. This is more cumbersome, but it would allow you to specify different heights for different rows in a programmatic way.

Look at the playground here for more examples.

You can set padding in top and bottom. It is so handly, you can also set padding for specific row(s).

table: {
    widths: ['33%', '34%', '33%'],
    headerRows: 1,
    body: [...]
}, 
layout: {
    paddingTop: function (i, node) {
      return 5;
      //return (i === node.table.widths.length - 1) ? 5 : 5;
    },
    paddingBottom: function (i, node) {
      return 5;
      //return (i === node.table.widths.length - 1) ? 5 : 5;
    }
}