In the previous section, we saw how to import the MUI adapter and use it to render the grid. In this section, we will see how to use the MUI adapter to render the filters.
As you can see, the filters are rendered using the MUI adapter. Notice, all we need to do is to pass the
materialAdapter to the
adapter prop of the grid.
Please click the
Toggle MUI Adapter button to see the difference between the default and the MUI adapter. This also demonstrates that with a single line of code, you can switch between the default and the MUI adapter.
MUI Custom Filters
Just like creating custom filters using basic HTML elements, you can also create custom filters using MUI components. Let's take a look at an example. We will use the MUI Slider component to create a custom filter for the
There is a much more elaborate example of using MUI components to create custom filters in the MUI Advanced Filters section.
In the MUI Advanced Filters example, please pay attention to the global toolbar, we demonstrate how to use the MUI AutoComplete component to create a global filter.