What’s the proper way to set the row height in a Perspective table?
I have tried:
Rows > style > maxHeight:15
Rows > style > height:!5
without any success.
3 Likes
If you add a “fontSize” property to the style for the table it will adjust the font size for the table. This will automatically change row widths.
ex. fontSize:20px
If you don’t put the “px” it will highlight red but still work.
Edit: I should have said you want to add fontSize to the style for the Rows. That’s rows.style.fontSize. You can add this property using the style editor.
Don't know if it's proper, but cells.style.height seems to work.
4 Likes
Try adding “minHeight” instead of “maxHeight” to the row styles and set it to something like 50.
Sorry, just realized you were trying to make it shorter than the default height…looks like maybe font size takes precedent. Definitely some weird behavior with maxHeight <20.
1 Like
It seems the rows have a minHeight of 30px. If you try setting the height or minHeight of the cells to something less than 30, it will be capped to 30px.
Is this something we can get around?
Has anyone found a way around this?
You can’t, at least not easily. This was intentional. It’s there as a row virtualization measurement calculation optimization. We can look at again to see if it’s feasible.
2 Likes
We had to find a workaround to meet a customer requirement (we needed to show 5 rows and column headers within a 100px space).
The way we’ve gotten around this is by:
- Create an xy container, and put the table into it
- Manually added a style property called
zoomto the xy container, with a value of 0.5 (zooms out) - Then we adjusted the font sizes of the cells and columns.
However, this method has a few downsides:
- Works fine on Chrome, but Safari has several issues (column headers don’t line up with cells)
- The sort arrows are much smaller
- And other issues (mainly occurring when virtualization mode was enabled)
1 Like
This feature is a necessity when using embedded views...
Case in point (see the bottom screenshot of the linked post)
Long short:
I wanted to have a "table" of embedded views but flex repeater was way too slow and unperformant, even with 10 rows. Moved to using a virtualised Table with 1 column set to use a viewPath. Much more performant and actually useable now, however the height of each row which should be 81px as per the height of the embedded view is ~805px tall in the table! That's a lot of user scrolling to see 600 rows...
Is any development taking place to remove the 30px minHeight constraint? I am running into the same issue. I need to set the row height to less than 30px. I’d like to be able to do that without resorting to workarounds such as the one described by @dillonu.
Hey Paul, this worked for me.
1 Like
Am running into the same issue. Need to be able to set row height. Makes on sense for a row to be capped at 30px when the font is set to 8px. too much dead space.
1 Like
Newer versions of Perspective have Table.props.rows.height which allows for setting the height of all rows.
4 Likes
Cheers. Was obviously putting the property in the wrong place!
Which version is this in? Can’t get it to work in 8.1.5.
Release version 8.1.6.
Thank you very much Paul. This solution works for me.
1 Like