How to have different header row height than body row height?

[skokenes]

Support Question

Hi, in the editable data grid example on Perspective's website, the column header row has a height of 36px while the table rows have a height of 23px:

Despite this difference, the virtualization works properly and you can scroll to all rows within the window.

I have tried to accomplish something similar using regular-table, but any time my header row is bigger than my table rows, the table does not render properly. It ends up rendering less rows than fill the available scrolling space.

I have tried looking at the underlying perspective data grid code to figure out how its accomplishing this different header size, but I can't seem to find the solution.

Any guidance on how to render a column header height that is different from the table body row height, without breaking the row virtualization? See this video of the broken behavior:

CleanShot.2023-09-19.at.14.42.16.mp4

[texodus]

You may be able to work around this by creating a double header row in the data listener, then using CSS to hide/double the one you want to show (perhaps using rowspan attribute). Let me consider how to support variable row heights more directly