Table content not rendered under these properties: enableTopToolbar=false enableRowVirtualization=true initialState.expanded=true

[FrankChen021]

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

• 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.

[TobiasSenger]

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.