Invisible filter icon

[gautemo]

mantine-react-table version

2.0.0-beta.0

react & react-dom versions

18.2

Describe the bug and the steps to reproduce it

Filter icons are not visible due to --ai-color: var(--mantine-color-white); in light mode, due to inline styling in Mantine. It is visible in dark mode, but not with the wanted blue color --mantine-primary-color-filled.

Minimal, Reproducible Example - (Optional, but Recommended)

1. https://v2.mantine-react-table.com/docs/examples/basic
2. Switch to light mode
3. Filter something
4. The filter icon is invisible, if you hover over it you can barely see it

Screenshots or Videos (Optional)

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.

[gautemo]

A simple fix is to do the same as MRT_TableHeadCellSortLabel and set color instead of --ai-color.

We could change the file MRT_TableHeadCellFilterLabel.module.css to:

  &[data-active] {
    color: var(--mantine-primary-color-filled);
  }

But I'm not sure if that is the way you would want it to be fixed?

[alessandrojcm]

What do you think? @KevinVandy happy to make that PR if you agree.

[KevinVandy]

Yep

[Wouter8]

As a side question related to this. Is it possible to manually render this icon, or mimick its behavior? I want to render this always, and when clicked toggle the visibility of the column filters. I now have my own button that does this (rendered through the Header option of a column):

But with this button I cannot focus the filter input like the filter icon does.