[DataGrid] Review on the filtering feature

[oliviertassinari]

This is a follow-up after #411. I have tried to list all the improvement opportunities we can potentially leverage. This is meant to polish the feature so we can release it. By somewhat order of importance:

• 0. Move multi-filtering support to XGrid
• 1. Add documentation
• 2. Add tests
• 3. I think that the toolbar should be opt-in. This is too opinionated to be displayed by default. It's only something we should probably only include in XGrid, considering the pain around react-table is about the painful integration with the UI and that ag-Grid makes its toolbar paid.
• 4. The menu should open over the column, taking into account the alignment:

• 5. There is a double border on the toolbar

• 6. The menu jumps when closing, the content should stay identical. It feels cheap:

• 7. The toolbar actions should get a description. At least, at title in addition to the aria-label. We might want to inline the description inside it or allow developers to do such if they need to.
• 8. The clear filter icon is not correctly aligned:

• 9. I would suggest we remove the clear button, individual arrows are likely enough:

• 10. The description of the add filter button is confusing. I think that it should be "Add filter", instead of "Filter".

• 11. The padding should be inside the scroll container

• 12. I think that we should remove the tabs. It won't scale and doesn't fit into the use cases. For instance with the column picker. It will be better to have a denser display vertically longer and horizontally shorter

• 13. The columns should be displayed in 1D, the mental model is one dimensional. I go confused, I miss interpreted the order I thought the list was collapsing vertically, but it collapses horizontally as it turns out

• 14. The column picker should have a search field.
• 15. There are two scrollbars:

• 16. A switch would work better than a checkbox: https://next.material-ui.com/components/switches/#when-to-use for the column picker.
• 17. A drag & drop for the column picker to reorder the columns would be 👌 but I think I should open a new issue for it. It's outside of the scope of the filters
• 18. The popup should have rounded borders

• 19. The popup should leverage the existing components (change the elevation) not apply custom CSS, to replace:

• 20. We likely want to have a min-height for the popup, in the following configuration, the useful area is too small. We can only see one row, and the others are hidden:

• 21. .panelMainContainer or .panelFooter isn't a class name we can allow, it breaks the convention.
• 22. We should try to replace padding: 10 with a value that fits the 4px spacing grid, for design consistency.
• 23. This inline style duplicates with the CSS, we can drop it:

https://github.com/mui-org/material-ui-x/blob/b6e9a68edf32b3bcb143fa12f48df89bdec058bc/packages/grid/_modules_/grid/components/tools/FilterForm.tsx#L128

• 24. All stylesheets should be named, assuming we want them to be public and allow customizations.

https://github.com/mui-org/material-ui-x/blob/b6e9a68edf32b3bcb143fa12f48df89bdec058bc/packages/grid/_modules_/grid/components/tools/FilterForm.tsx#L24

• 25. The style of .panelFooter can be simplified, there are CSS properties that have no effect. I also think that 8px instead of 12px for the padding would work better, a higher density would probably be fine. Blueprint and Elastic UI are all-in.
• 26. I feel that the icon menu draws too much attention when hovering the column header. I think that we could might it lighter and its current color only when hovered. In the following screenshot, I hover the arrow, not the icon button:

• 27. We miss a max-height for the popup. It becomes unusable once too large. This one is too high:

Same problem with the column picker view in worse when the data table is tall (~1000px), I can't use it:

• 28. Assuming the toolbar is opt-in and only available in XGrid, I would encourage this API for the developers:

function Header() {
  return (
    <GridToolbar>
      <GridToolbarFilter />
      <GridToolbarColumn />
      <GridToolbarDensity />
    </GridToolbar>
  );
}

<XGrid component={{ Header }} />

• 29. Maybe add negation operators (not equal, etc). Not sure, maybe it should only be available with a customization API.

[oliviertassinari]

• 30. https://codesandbox.io/s/material-demo-forked-991f4?file=/demo.js

[dtassone]

• 31. Server-side filters as well

[dtassone]

• 32. Component customization. A user should be able to render a certain column menu or filters for a column.

[dtassone]

• 33. String filter input value can be an autocomplete field

[dtassone]

• 34. Add prop to preset the filter (same as sortModel)

[oliviertassinari]

• 35. .MuiDataGrid-root .MuiDataGrid-toolbar padding: 4px 4px 0
• 36. Add an indicator in the header cell if toolbar is disabled.
• 37. Add "Show column" menu item.
• 38. API convention https://material-ui.com/guides/api/#property-naming showToolbar

[oliviertassinari]

• 39. on hide column, menu anchor is lost

[oliviertassinari]

• 40. https://codesandbox.io/s/zealous-stallman-ybrvu?file=/pages/index.js. Try to open the filter

[oliviertassinari]

• 41. I got confused a couple of times now. I think that clicking the filter button should toggle the popup, not only open it.

[dtassone]

• 42. User should be able to select filter operators with a string ie column.filterOperators = {['contains', 'startWith']}

[oliviertassinari]

I have created a new issue for toolbar #726, tests & documentation are work in progress: #644, #715. For the other improvements, I think that it's best to ship the filters and get real feedback from developers, with the frequency, we can know what's more important, a lot better than guessing.