Data not displayed on initial page load with virtualization enabled and table data passed as props to main component

[gruuschesdevelopmenthq]

material-react-table version

2.12.1

react & react-dom versions

18.2.0

Describe the bug and the steps to reproduce it

Description

When virtualization is enabled in Material React Table, no data is displayed on the initial page load if the data is passed directly as props to the main component. This issue does not occur when data fetching is handled within the main component itself. The data is present (as confirmed by console logs), but it does not render until the table is interacted with (e.g., using the global search or toggling the 'select all' checkbox), or when navigating via React Router links on the page.

Steps to Reproduce

1. Enable virtualization on the Material React Table.
2. Pass data directly as props to the main component.
3. Refresh the page.
4. Observe that no data is displayed initially.
5. Interact with the table or navigate the page to see the data appear.

Expected Behavior

The table should display the data immediately upon the initial render when the data is passed as props, even with virtualization enabled.

Actual Behavior

The data does not appear until the table is interacted with in some manner after the initial page load.

Possible Solution

Triggering a state update or a re-render upon initial load might resolve the issue, though this is just a speculative workaround. It seems there might be an issue with how the virtualization engine handles the initial rendering cycle.

Minimal, Reproducible Example - (Optional, but Recommended)

I've added parts of the code so you can reproduce it more easily, but I guess you will most likely use your own data, so just make sure you pass the data as props to the main component like:
export default function someComponent({ testData }: Props) {

At least for me it's reproducible every time I pass the data as props like this instead of fetching it within the component, as long as virtualization is enabled. Without virtualization it works on refresh also.

---

type TestTable = {
id: string;
name: string;
item: string;
};

type Props = {
navData: TestTable[];
};

export default function someComponent({ testData }: Props) {

const columns = useMemo<MRT_ColumnDef[]>(
() => [
{
accessorKey: 'name',
id: 'name',
header: 'NAME',
Cell: ({ row }) => {
return (
<Box
sx={{
display: 'flex',
alignItems: 'center',
justifyContent: 'space-between',
width: '95%',
ml: 0,
}}
>
<ListItemText
primary={row.original.name}
secondary={row.original.item}
primaryTypographyProps={{
fontWeight: 'fontWeightMedium',
variant: 'body2',
fontFamily: 'fontFamilyThird',
noWrap: true,
color: 'background.black',
}}
secondaryTypographyProps={{
fontWeight: 'fontWeightMedium',
variant: 'body2',
fontFamily: 'fontFamilyThird',
noWrap: true,
flexShrink: 0,
color: 'text.subText',
}}
sx={{ display: 'inline-flex', justifyContent: 'space-between' }}
/>

);
},
},
],
[]
);

const tableContainerRef = useRef(null);
const rowVirtualizerInstanceRef = useRef<MRT_RowVirtualizer<HTMLDivElement, HTMLTableRowElement>>(null);

const table: any = useMaterialReactTable({
columns,
data: testData,
enableTopToolbar: false,
enableTableHead: false,
enableStickyHeader: false,
enableHiding: true,
enableColumnDragging: false,
enableColumnOrdering: false,
enableFullScreenToggle: false,
enableDensityToggle: false,
enableColumnFilters: false,
enableGlobalFilter: true,
defaultDisplayColumn: { enableResizing: false },
enableBottomToolbar: false,
enableColumnResizing: false,
enableColumnVirtualization: true,
enableGlobalFilterModes: false,
enableColumnFilterModes: false,
enablePagination: false,
enablePinning: false,
enableRowNumbers: false,
enableColumnActions: false,
enableRowVirtualization: true,
muiTableContainerProps: {
ref: tableContainerRef,
sx: {
height: { xs: 'calc(100vh - 142px)', lg: 'calc(100vh - 172px)' },
width: 'auto',
overflowX: 'hidden',
},
},
enableRowSelection: false,
getRowId: (row) => row.id,
initialState: { showColumnFilters: false, showGlobalFilter: true, density: 'compact' },
state: {},
manualFiltering: false,
manualPagination: false,
manualSorting: false,
rowVirtualizerInstanceRef,
rowVirtualizerOptions: { overscan: 5 },
muiTableBodyRowProps: {
sx: {
'&.MuiTableRow-root': {
backgroundColor: 'background.default', // Replace with your actual color values or styles.
// backgroundColor: isActive ? '#666666' : '#222222', // Replace with your actual color values or styles.
},
},
},
muiTableBodyCellProps: {
sx: {
borderBottomStyle: 'none',
'&.MuiTableCell-root': {
padding: 0,
},
},
},
muiSearchTextFieldProps: {
placeholder: 'Search for items',
variant: 'outlined',
},
filterFns: {
customFilterFn: (row, _, filterValue) => {
const lowerCaseFilter = filterValue.toLowerCase();
return (
row.original.name.toLowerCase().includes(lowerCaseFilter) ||
row.original.item.toLowerCase().includes(lowerCaseFilter)
);
},
},
globalFilterFn: 'customFilterFn',
});

const renderContent = (
<Box
sx={{
height: 1,

    '& .simplebar-content': {
      height: 1,
      display: 'flex',
      flexDirection: 'column',
    },
  }}
>
  <MRTGlobalFilterTextField table={table} />
  <MRTTableContainer table={table} />
  <Box sx={{ flexGrow: 1 }} />
</Box>

);

return (
<Box
sx={{
position: 'relative',
height: 1,
flexShrink: { lg: 0 },
}}
>
<Stack
sx={{
height: 1,
position: 'fixed',
borderRight: (theme) => solid 1px #f1f1f1,
}}
>
{renderContent}


);
}

Screenshots or Videos (Optional)

After refreshing the site:

After interacting with the site:

Do you intend to try to help solve this bug with your own PR?

No, because I do not know how

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.