[data grid] Improved filter panel

[joserodolfofreitas]

Summary

The current filter panel has a couple of usability problems.

• It blocks almost entirely the first row, which is likely often to be the single row hit by a filter
• There's no clear way to leave the panel besides clicking outside the popup.
• It doesn't look great on small screens (see https://github.com/mui/mui-x/issues/5183)

Motivation

• Improved look and feel (UI/UX)
• To lessen the impact of the panel over the grid, particularly over the filtered column
• Create more possibilites for customization as we did with the new column menu

Initial Proposals and ideas

• Replace the X icon with a trashcan (as mentioned at #4929)
• Have a less wide panel; maybe it makes sense to verticalize the options and avoid displaying the panel over the filtered column.
• Explore having a draggable panel.
• Reconsider layout integration with the data grid.
• Custom column menu #5102

Potential issues we can cover

Challenges

• Most of the solutions are hard to apply or don't work well with multi-filtering.

Examples

Dev Express

Syncfusion'

AG Grid

There are a few problems to consider though, specially on the AG Grid example, you can't always know which column you're filtering, because there's no indication on the panel itself, and assuming based on its position is not reliable, Is it filtering on country or sport?

Telerik doesn't seem to have such a panel and is based on filtering on the header option.

[yaredtsy]

@joserodolfofreitas if the filter panel is verticalized. Would it be long when we use multi-filtering? since the current one works by adding a new filter component below?

.

AG Grid uses a sidebar for multi-filtering.

[joserodolfofreitas]

That's a good point, @yaredtsy. It could get long depending on the number of filters active. But generally speaking, all the solutions are on the table yet. For instance, we might verticalize the single-column panel, and align each of those panels horizontally in case of multi-filtering (if that presents a better trade-off between the available options).

Do you have a preference on this matter?

[yaredtsy]

I think it would be great if they are collapsable and shows the headerName only . and the active components will expand and they are verticalized.

[yaredtsy]

@joserodolfofreitas I have built a demo. you can check it out at https://codesandbox.io/s/stupefied-breeze-1rvgx0?file=/demo.tsx

[joserodolfofreitas]

Thank you for the example, @yaredtsy! It does a solid job helping us explore this path.

Before implementing this feature, we'll explore other possibilities as well, most likely with a visual concept/design first. There's also a discussion on #6247 where we may consider implementing a Query Language for the filter text inputs, which enables users to type yared OR jose, or > 17, for instance.

If we pursue that path, it may also impact how we'll re-design the filter panel.

[joserodolfofreitas]

As a note: perhaps the solution using hooks to empower users to change the layout in the Date Pickers works well here too.

[cherniavskii]

Related issue https://github.com/mui/mui-x/issues/5183

[chatterz]

The mobile behavior of the current filter popper is not yet perfect.