DataTable: virtualScrollerOptions with scrollHeight="flex" causes the table to disappear

[rafalwojdowski]

Describe the bug

I copied the code from https://primereact.org/datatable/#virtualscroll and changed from scrollHeight="400px” to scrollHeight=“flex”. After this change, the table disappeared

Reproducer

https://stackblitz.com/edit/ynbybwop?file=src%2FApp.jsx

System Information

PrimeReact: 10.9.1
React: 18.3.1

Steps to reproduce the behavior

No response

Expected behavior

No response

[melloware]

I could be wrong but I am not sure virtualscroller can work with flex it needs a defined height to render.

[melloware]

ok when you set it to flex it makes it style="height: 100%;"

However the parent container has NO height so you have to give the datatable a height as well.

 <DataTable value={cars} scrollable scrollHeight="flex" 
virtualScrollerOptions={{ itemSize: 46 }} 
tableStyle={{ minWidth: '50rem' }} 
style={{ height: '400px' }}>

So either way it looks like VirtualScroller needs a fixed height.

[melloware]

as a note PrimeVue has the same issue and same conclusion I came to: primefaces/primevue#6870

[sja-cslab]

@melloware i always uses flex for 100%.

<DataTable
                ref={tableRef}
                virtualScrollerOptions={{ itemSize: 46, className: "flex flex-auto align-items-start" }}
                dataKey="id"
                value={myData}
                className="flex-auto overflow-hidden"

[melloware]

But he is using scrollheight and you are not?

[sja-cslab]

Update:
I just did not copy enough code.. here're the props:

<Splitter layout="vertical" className="flex flex-auto border-none overflow-hidden">
    <SplitterPanel className="flex border-none overflow-hidden">
        <DataTable
                ref={tableRef}
                virtualScrollerOptions={{ itemSize: 46, className: "flex flex-auto align-items-start" }}
                dataKey="id"
                value={myData}
                className="flex-auto overflow-hidden"
                header={renderHeader}
                size="small"
                selectionMode="multiple"
                selection={mySelection}
                onSelectionChange={handleSelectionChange}
                stripedRows
                resizableColumns
                columnResizeMode="expand"
                reorderableColumns
                dragSelection
                scrollable
                scrollHeight="flex" // <<<< here it is!
                sortMode="multiple"
                multiSortMeta={multiSortMeta}
                loading={loading}
                tableStyle={{ tableLayout: 'fixed', flex: '1 1 auto' }}
            >

I guess it's working because we're using flex/grid everywhere so the whole DOM-Tree has all information required for flex to work as expected.

There're several thing about flex that you should know - e.g. you need a height definition in any container that contains flex so in my case its on html/body manually set to 100%.
One important part, I had problems with is the fact that

All flex items have an automatic minimum size min-width: auto or min-height: auto on the main axis to avoid shrinking past its content.

[melloware]

Awesome closing as workaround provided!