Adding grid filters

Besides a basic search, you can also add multiple filters which can all be applied at once. There are no filters by default, which also means that the collapsable Filters panel is not shown.

XML layout definition

Filters can be added via the XML layout argument grid_filters. Each filter has a field name, a label and a condition type.

<block>
    <argument>
        <argument name="grid_filters" xsi:type="array">
            <item name="title" xsi:type="array">
                <item name="label" xsi:type="string">Title</item>
                <item name="condition_type" xsi:type="string">like</item>
            </item>
        </argument>
    </arguments>
</block>

See the grid reference for more details.

Class-based definition

Instead of defining the filter via XML layout, you can also use a PHP class for this. For this, create a new class that implements Loki\AdminComponents\Grid\Filter\FilterInterface and pass it as follows:

<block>
    <arguments>
        <argument name="grid_filters" xsi:type="array">
            <item name="custom" xsi:type="object">
                YireoTraining\Example\Grid\GridFilter\CustomFilter
            </item>
        </argument>
    </arguments>
</block>

Your custom class could extend from Loki\AdminComponents\Grid\Filter\Filter but this is not required.

How it works

The filter definitions are created by the GridViewModel and then passed to the PHTML templates. Each filter is then rendered by calling its render() method which should output an HTML form. The Loki\AdminComponents\Grid\Filter\Filter class implements this by reusing the PHTML templates of the Loki Components Form API. This also allows you to define a field_type to render your filter field in a different way.

<block>
    <argument>
        <item name="page_id" xsi:type="array">
            <item name="label" xsi:type="string">ID</item>
            <item name="condition_type" xsi:type="string">from_to</item>
            <item name="field_type" xsi:type="string">from_to</item>
        </item>
    </arguments>
</block>

When the form field changes, the Alpine.js property gridFilters is updated. When the button Apply Filters is set, this gridFilters property is sent to Magento and saved in the grid state. Next, when the grid renders again, the grid repository calls the relevant provider and the provider handler applies all filters to this provider. If the provider is a collection or a repository, this probably works out of the box. If the provider is an array, you will need to write custom code for this.

Static filters

Static filters work similarly like regular grid filters, except that their value is configured in the XML layout, instead of being customized by a user.