[Solved] How to get a table to scroll its rows within a tab panel?

[murrah]

Hi.
I have a q-table inside a q-tab-panel. It is not a virtual scroll - there will only ever be < 100 rows. I am paginating by 10 rows. When the tab panel is too short to show all 10 rows I would like to keep the pagination footer sticky to the bottom of the tab panel and the rows to scroll (vertically). In other words the tab panel height is the maximum table height with scrolling when it wont fit.

Here is my code pen

If you set the fixed height on the table wrapper div you can see the effect I am trying to achieve but of course the table should flex to the tab panel size. And, if there are only 1 or 2 rows (for example) the table remains at the full height of the wrapper div with the pagination footer sticky to the bottom of that div. That is what I want.

Without a fixed height the 10 table rows makes the table higher than tab panel. I cant find a flex way to achieve this.

My question is: How to use flex so the the table will always grow/shrink with the tab panel resize and the pagination footer will stick to the bottom of the tab panel?

The Text Tab is just to show that the tab setup is flexing properly for simple text scrolling.

Thanks,
Murray

[metalsadman]

@murrah combining your codepen, docs examples https://quasar.dev/vue-components/table#Example--Sticky-header
plus usage of QResizeObserver https://quasar.dev/vue-components/resize-observer

here:
https://codepen.io/metalsadman/pen/WNoLOoW?editors=1010

[murrah]

@metalsadman
Wow! That’s awesome. Thank you.
I already had the sticky header but left it out of my example to keep it simple. I thought the issue of the sizing was with flex but clearly I was wasting time trying to make that happen! Much appreciated.
Go well,
Murray