How to Implement Dynamic Dependent Filtering in Laravel Nova 4

In this article, I will show how to achieve a dynamic-dependent filter on Laravel Nova version 4. This feature allows users to easily filter data based on their specific requirements, leading to a more user-friendly experience.

Installation

First, you have to add a new package to your Laravel application by using the package manager called the composer

composer require resham/nova-dependent-filter

Requirements

PHP >= 7.3
Laravel Framework
Laravel Nova v4

Usage

Once the Installation is complete, you can use it by creating a filter class.

Normal Usage

You can use this filter as nova’s filter with the same feature as they have.

use Resham\NovaDependentFilter\DependentFilter;

class CountryFilter extends DependentFilter
{
    /**
     * Name of filter.
     *
     * @var string
     */
    public $name = 'Country';

    /**
     * The filter's attribute. Also, it is key of filter.
     *
     * @var string
     */
    public $key = 'country_code';

    /**
     * Get the filter's available options.
     *
     * @param  \Laravel\Nova\Http\Requests\NovaRequest  $request
     * @param  array $filters
     * @return array
     */
    public function options(NovaRequest $request, array $filters = [])
    {
        return Country::pluck('name', 'country_code');
    }
}

Dependent Usage

Let’s have a dependent filter state that depends on the country filter. You can achieve the dynamic-dependent filter as follow:

Parent Filter

Define the parent filter(on which other filters depend)

use Resham\NovaDependentFilter\DependentFilter;

class CountryFilter extends DependentFilter
{
    /**
     * Name of filter.
     *
     * @var string
     */
    public $name = 'Country';

    /**
     * The filter's attribute. Also, it is key of filter.
     *
     * @var string
     */
    public $key = 'country_code';

    /**
     * The other filters key whose are depends on this filter.
     *
     * @var string[]
     */
    public $parentOf = ['state'];

    /**
     * Get the filter's available options.
     *
     * @param  \Laravel\Nova\Http\Requests\NovaRequest  $request
     * @param  array $filters
     * @return array
     */
    public function options(NovaRequest $request, array $filters = [])
    {
        return Country::pluck('name', 'country_code');
    }
}

Note: Don’t forget to define the key of the child filter on the $parentOf property.

Child Filter

Let’s define the child filter which is depends on parent filter.

use Resham\NovaDependentFilter\DependentFilter;

class StateFilter extends DependentFilter
{
    /**
     * Name of filter.
     *
     * @var string
     */
    public $name = 'State';

    /**
     * The filter's attribute. Also, it is key of filter.
     *
     * @var string
     */
    public $key = 'state';

    /**
     * Get the filter's available options.
     *
     * @param  \Laravel\Nova\Http\Requests\NovaRequest  $request
     * @param  array $filters
     * @return array
     */
    public function options(NovaRequest $request, array $filters = [])
    {
        return State::where('country_code', $filters['country_code'] ?? '')
                        ->pluck('name', 'id');
    }
}

Registering Filters

You can register the filter as we define it with nova.

/**
 * Get the filters available for the resource.
 *
 * @param  \Laravel\Nova\Http\Requests\NovaRequest  $request
 * @return array
 */
public function filters(NovaRequest $request)
{
    return [
        new CountryFilter
    ];
}

Also, you can use CountryFilter::make()

/**
 * Get the filters available for the resource.
 *
 * @param  \Laravel\Nova\Http\Requests\NovaRequest  $request
 * @return array
 */
public function filters(NovaRequest $request)
{
    return [
        CountryFilter::make()
    ];
}

Reference

Dependent Filter for Laravel Nova 4