Adding Filters in Magento Admin Grid | Column and Non-Column Component
In our previous tutorial regarding customizing Magento Admin Grid, we delved into creating custom data providers for Magento admin grids. Today, we’ll focus on another crucial aspect: implementing filter components.
Filters are crucial in enabling users to narrow down results based on specific criteria. In Magento, there are two main ways to add filters:
- Using the filter tag in columns.
- Creating custom filters for non-column components.
Before diving into coding, let’s quickly see the type of built-in filters available to use in Magento
Built-in Filter Types in Magento 2
- text: For text-based filtering.
- date: For date-based filtering.
- select: For filtering based on predefined options.
- daterange: For filtering based on a date range.
Read more from the official adobe documentation about filters and UI component customization
For the code walkthrough we will be using the module we created in the earlier article about creating custom data providers in Magento 2. You may use any other module with a custom admin grid to follow along in this tutorial.
Full Video Walkthrough by CodeWithAliasgar
Adding Filters Using the filter Tag
The standard method to add filters to your Magento admin grid is by using the filter tag within the column definitions in the UI component XML file.
This approach is straightforward and works well for filtering data based on existing columns.
How to add the filter tag?
Let’s add a filter in the admin grid we created in the last tutorial. In the grid we have a column for name, so to add filter tag for the same
- Go to the admin Grid UI Component file located in view/adminhtml/ui_component/grids_custom_customdataprovider_list.xml
- Go to the filter component, <filter />, and add the following code in to add the date filter to your custom admin grid
To explain the key points in the above code example
- <filterRange> This tag defines a range filter component.
- name=”date”: Assigns the name “date” to the specific filter. This name will be used to reference the filter later.
- class=”Magento\Ui\Component\Filters\Type\DateRange”: Specifies the class responsible for rendering the date range filter component.
- provider=”{ $parentName }”: Defines the data provider for the filter. This typically points to the parent component.
- <rangeType>date</rangeType>: Specifies that the filter is for a date range.
- The translate=”true” attribute indicates that the label can be translated.
- <dataScope>date</dataScope>: Defines the data scope for the filter. This is a very important parameter which is used to bind the filter’s value to the grid’s data provider.
Below are couple of additional examples to better understand the filter
Input Type Filter for SKU
Select Filter for Store Views
Below are some of the new fields we used
- <options> is used to pass the options in the filters
- <caption> is used to define the value
- <import> is used to import the properties of visibility
important notes
Data Scope: The dataScope attribute is crucial for binding filter values to the grid’s data provider.
Filter Configuration: You can customize filter behavior using various configuration options, such as options, validation, and template.
UI Components: Leverage Magento’s UI component framework for building complex filter interfaces like we did in case of date and select filters.
Filters play a crucial role in the Magento Admin Grid. Without relevant filters, grids can become cumbersome to use, leading to a poor user experience and unnecessary waste of time and resources. I hope this tutorial was valuable, and that you now feel confident in adding any type of filter to your custom Magento admin grid.
Would you like to share this article?
Would you like to integrate Whatsapp or APIs into your website or mobile app?
