Creating a custom grid filter

You have to have a filter enabled. If the column's settings/filter is set to false, the filter is disabled. This is unfortunately the default for the MSI saleable quantity column.

Before we dive into creating a custom filter, let's see what options are available.

Let's look at the most important file to remember in uiComponent history:

vendor/magento/module-ui/view/base/ui_component/etc/definition.xml

This file provides the base definition for uiComponents. Locate the filters definition. Ultimately, you could swap this class attribute in your uiComponent. Let's open this class and we can see the filter types in \Magento\Ui\Component\Filters::$filterMap:

• text
• textRange
• select
• dateRange
• datetimeRange

You've probably seen all of these. So how would we create a new filter? You have to replicate the scaffolding you see on line 116 (as of this writing):

if (isset($this->filterMap[$filterType])
    && !isset($this->columnFilters[$component->getName()])) {

This is found in: \Magento\Ui\Component\Filters::update.

We see the resulting component is a filterRange (value of name). And a component.

It looks like this:

<listingToolbar name="listing_top">
    <filters name="listing_filters">
        <filterRange name="name_of_column"
            class="Magento\Ui\Component\Filters\Type\Range"
            component="Magento_Ui/js/grid/filters/range" />
    </filters>
</listingToolbar>

This comes directly from definitions.xml! Or, you can locate the input type, too.

<filterInput class="Magento\Ui\Component\Filters\Type\Input"/>

Or, you can create a new filter class, for example:

\Magento\Ui\Component\Filters\Type\Range::applyFilter

Don't forget that you can use the customFilters property in Magento\Framework\Api\SearchCriteria\CollectionProcessor\FilterProcessor to introduce a custom mechanism for applying a filter. However, in the context of a uiComponent, creating a new filter is the best.

Let's walk through the steps that I took to build the SwiftOtter_InventoryFilter column module.

Our Example: app/code/SwiftOtter/InventoryFilter/view/adminhtml/ui_component/product_listing.xml