KevinVandy/material-react-table

When using `enableRowVirtualization`, the layout of `filterVariant: 'datetime-range',` behaves improperly

meesvandongen opened this issue · 0 comments

material-react-table version

2.12.0

react & react-dom versions

18.2.0

Describe the bug and the steps to reproduce it

When adding a date-time range filter, and setting virtualization for rows, the filter UI will overflow the column/table. The parent cell will not accommodate for the bigger size.

Minimal, Reproducible Example - (Optional, but Recommended)

https://codesandbox.io/p/devbox/keen-goldberg-lwxzp8?file=%2Fsrc%2FTS.tsx%3A26%2C8

      {
        accessorKey: 'country',
        header: 'Country',
        filterVariant: 'datetime-range',
        accessorFn: (row) => new Date().toLocaleDateString(),
      },

    enableRowVirtualization: true,

Screenshots or Videos (Optional)

image

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

Maybe, I'll investigate and start debugging

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.