Customizing Grid Filters

As with the CRUD form, you can customize the filter section of your grid table.

You can access each form component here. Here is an example below:

public function configureFilter(): void
{
    $options = [
        1 => 'One',
        2 => 'Two',
    ];
    $fields = [
        TextField::init('name'),  
        ChoiceField::init('type', 'Type', choiceType: 'select', choiceList: $options)->setDefaultValue(1),
    ];
    $this->getFilter($fields);  
}

In this example:

TextField

TextField::init('name'): Initializes a text field for filtering by name.

ChoiceField

ChoiceField::init('type', 'Type', choiceType: 'select', choiceList: $options): Initializes a choice field (dropdown) for filtering by type, with the given options.

choiceType

choiceType: Specifies the type of choice input (in this case, a select dropdown).

choiceList

choiceList: Provides the options for the select dropdown.

setDefaultValue

setDefaultValue(1): Sets the default value for the choice field to 1.

This allows you to customize the filters for your grid table, providing a more tailored and interactive filtering experience.

setComponent

You can also use setComponent just like in form components to set a custom component for your filters.

In your custom component, you can easily access:

$value

The current value of the field.

$row

The entire row data.

This provides you with the flexibility to fully customize how each filter field is rendered.

Disable Grid Filters

To simplify filter configuration in the Grid, you can update a method to hide empty filters. Just add the configureFilter() method like this:

public function configureFilter(): void
{
   $this->getFilter([]);
}

This will automatically hide any filters that have no fields in the Table.

Customizing Filter Search and Reset Buttons

Here.