Skip to content

Nova 4 filter component based on the Headless UI combobox component

License

Notifications You must be signed in to change notification settings

arsenaltech/nova-combobox-filter

 
 

Repository files navigation

Nova Combobox Filter

Latest Version on Packagist Total Downloads Total Downloads Total Downloads

This component is based on the Headless UI Combobox component and adds a multiselect filter to Laravel Nova.

Requirements

  • php: >=7.3
  • laravel/nova: ^4.0

Installation

Install via Composer:

composer require harrald/nova-combobox-filter

Usage

The nova-combobox-filter extends the Nova select filter. And thus follows the same logic as to how to implement it.

Filter

Make a new Filter class in App/Nova/Filters and let it extend the \Harrald\NovaComboboxFilter\NovaComboboxFilter class.

Use the following format:

<?php

namespace App\Nova\Filters;

use Harrald\NovaComboboxFilter\NovaComboboxFilter;
use Illuminate\Http\Request;
use Illuminate\Support\Collection;

class OpenPaidStateFilter extends NovaComboboxFilter
{
    /**
     * The displayable name of the filter.
     *
     * @var string
     */
    public $name = 'State';

    /**
     * The name of the column to filter on
     */
    protected function columnName(): string
    {
        return 'state';
    }

    /**
     * Get the filter's available options.
     */
    public function options(Request $request): Collection
    {
        return Collection::make([
            'Open' => 'open',
            'Paid' => 'paid',
        ]);
    }
}
  • The property $name is the displayable name of the filter.
  • The method columnName must return the name of the column to filter on
  • The options method should return a Illuminate\Support\Collection with key/value pairs.

With Dynamic options

public function options(Request $request): Collection
{
    return User::all()->pluck('id', 'name');
}

Resource

Use the new filter in you Resource. Follows the same logic as a any other Nova filter

/**
 * Get the filters available for the resource.
 *
 * @param NovaRequest $request
 * @return array
 */
public function filters(NovaRequest $request): array
{
    return [
        OpenPaidStateFilter::make(),
    ];
}

Screenshots

multi options selected

filter options by typing

Credits

This package was inspired by optimistdigital/nova-multiselect-filter

License

This project is open-sourced software licensed under the MIT license.

About

Nova 4 filter component based on the Headless UI combobox component

Resources

License

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published

Languages

  • Vue 80.4%
  • PHP 12.0%
  • JavaScript 7.6%