KevinVandy
Table content not rendered under these properties: enableTopToolbar=false enableRowVirtualization=true initialState.expanded=true
material-react-table version
v3.0.1
react & react-dom versions
18.3.1
Describe the bug and the steps to reproduce it
This reproduciable test is based on the RowOrderingWithRowVirtualization example in the RowOrdering.stories on the v3 lastest branch.
export const RowOrderingWithRowVirtualization = () => {
const [data, setData] = useState(() => initData);
return (
<MaterialReactTable
// The problem is reproduced when the following 3 properties are set as follows
enableTopToolbar={false}
enableRowVirtualization={true}
initialState={{ expanded: true }}
columns={columns}
data={data}
/>
);
};
when the page is loaded, The table is empty, not data is rendered( DOM of the table body is also empty).
In the above example, although data is not tree-style structure, I think the problem is not related to it because if we keep enableTopToolbar to false and expanded to true, and only change enableRowVirtualization to false, the problem disappear. In my case, the data is tree-like structure.
But if you do some any operations on the empty table to re-render(e.g. drag columns, click to sort), data will be shown.
Minimal, Reproducible Example - (Optional, but Recommended)
See above
Screenshots or Videos (Optional)
No response
Do you intend to try to help solve this bug with your own PR?
None
Terms
- [X] I understand that if my bug cannot be reliably reproduced in a debuggable environment, it will probably not be fixed and this issue may even be closed.
material-react-table version
v3.0.1
react & react-dom versions
18.3.1
Describe the bug and the steps to reproduce it
The same bug as reported originally above by @FrankChen021 can also be reproduced with the following minimal example:
const table = useMaterialReactTable({
data: [{ id: 1 }],
columns: [
{
id: 'id',
header: 'id',
accessorKey: 'id',
},
],
enableRowVirtualization: true,
globalFilterFn: 'contains',
renderTopToolbar: <span>Test</span>,
});
return (
<MaterialReactTable table={table} />
);
};
When the page is initially loaded, the table appears empty, no data row is rendered( DOM of the table body is also empty).
Whenever I remove any one of the table options, the problem disappears. As stated by @FrankChen021, as soon as you perform any operations on the empty table to re-render(e.g. drag columns, click to sort), data will be shown.
It is important to note that this issue only occurs in a preview build (vite build && vite preview) but not in a development build (vite).
Minimal, Reproducible Example - (Optional, but Recommended)
See above
Screenshots or Videos (Optional)
Do you intend to try to help solve this bug with your own PR?
I can try to help.
Terms
I understand that if my bug cannot be reliably reproduced in a debuggable environment, it will probably not be fixed and this issue may even be closed.
Encountering this issue as well when using this combination of properties
