The table component for your Mantine data-rich applications, supporting asynchronous data loading, column sorting, custom cell data rendering, context menus, nesting, Gmail-style batch row selection, dark theme, and more.
I have a problem with the filters popover, when the table has a large number of columns, and one of the filters is open when scrolling the table than the popover destroys the layout page, an additional scroll appears on the page.
Example: https://stackblitz.com/edit/github-wjvkrc-jv7dj5
Select the last filter and scroll the table content to the left, pay your attention to the additional horizontal scrolling of the page.
Example from docs:
The reason for this is that Popover component that is used in DataTableHeaderCellFilter component has withinPortal={true} prop by default. By changing this prop to false, the popover behavior looks better.
Example from docs:
Would it be a good idea to add the ability to override Popover component props for the filters, or is there a possible workaround?
I have a problem with the filters popover, when the table has a large number of columns, and one of the filters is open when scrolling the table than the popover destroys the layout page, an additional scroll appears on the page.
Example: https://stackblitz.com/edit/github-wjvkrc-jv7dj5 Select the last filter and scroll the table content to the left, pay your attention to the additional horizontal scrolling of the page.
Example from docs:
The reason for this is that
Popovercomponent that is used inDataTableHeaderCellFiltercomponent haswithinPortal={true}prop by default. By changing this prop tofalse, the popover behavior looks better.Example from docs:
Would it be a good idea to add the ability to override
Popovercomponent props for the filters, or is there a possible workaround?