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?
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.