Adjust DataTable scrollHeight attribute within the window resize event handler

[manuelpoelzl]

Hi everyone,

Within my application I do have a DataTable which has set the scrollHeight property to this:

scrollHeight={(window.innerHeight-290).toString()+"px"}}

This works perfectly fine, however i want to achieve the same behavior when I resize the window.
I tried to set the scrollHeight attribute in the event listener but saw that the scrollHeight attribute of the getTable() return value can not be changed.

I'm using the table ref which i defined like this:

const tableRef=useRef<DataTable<any>>(null);

But I don't see an option here to define the desired attribute, so i wonder if there is another way to achieve this?

[melloware]

Can't you change this to a useState hook so it rerenders on change?

{(window.innerHeight-290).toString()+"px"}}

[manuelpoelzl]

Well, you're right.
Forgot for a moment how React works it seems to me 😅

Sorry for the inconvenience and thanks for answering!!

[melloware]

No problem!!!

[manuelpoelzl]

Hi!
Do you maybe know some sort of workaround when using the virtualScrollerOptions?
The resize works perfectly fine when i shrink the window, the size which is set as state is applied correctly:

However, when i enlarge the window again, the table seems kinda cut off:

I doubt anybody will ever do it, but when I shrink the window to some really small size and enlarge it again, the whole content seems to be gone:

I've tried to use some of the virtualScrollerOptions such as scrollHeight and autoSize but had no luck with it.

[melloware]

I think your issue is this open bug: primefaces/primereact#4413

[manuelpoelzl]

Thanks for the hint!
That is indeed the same problem.