Filter option not showing

[marcwitteveen]

I recently updated to latest Laravel, Livewire and PowerGrid.

I am using the following code but I can not get filters to work, can somebody help me and tell me what I am missing?

Thanks,

Marc

`<?php

namespace App\Livewire;

use App\Models\RouteLimits;
use Illuminate\Database\Eloquent\Builder;
use PowerComponents\LivewirePowerGrid\Footer;
use PowerComponents\LivewirePowerGrid\Button;
use PowerComponents\LivewirePowerGrid\Column;
use PowerComponents\LivewirePowerGrid\PowerGrid;
use PowerComponents\LivewirePowerGrid\Facades\Filter;
use PowerComponents\LivewirePowerGrid\PowerGridColumns;
use PowerComponents\LivewirePowerGrid\PowerGridComponent;

final class LimitsTable extends PowerGridComponent
{
//Messages informing success/error data is updated.
public bool $showUpdateMessages = true;

public array $perPageValues = [10, 15, 25, 50, 100, 0];

public $customers;

public $timemodels;

public $currencies;

public $routes;

public $trunkgroups;

public string $sortField = 'route_limits_id';

// Features Setup
public function setUp(): array
{
    $this->persist(['columns', 'filters', 'sort']);

    return [
        Footer::make()
            ->showPerPage()
            ->showRecordCount(),
    ];      
}

public function header(): array
{
    return [
        Button::add('add-limit')
            ->slot('Add limit')
            ->class('cursor-pointer block bg-white-200 text-gray-700 border border-gray-300 rounded py-2 px-3 leading-tight focus:outline-none focus:bg-white focus:border-gray-600 dark:border-gray-500 dark:bg-gray-500 2xl:dark:placeholder-gray-300 dark:text-gray-200 dark:text-gray-300')
            ->openModal('add-limit', []),
        ];
}

// Datasource
public function datasource(): ?Builder
{
    return RouteLimits::query()
    ->leftjoin('tmp_routes', function ($tmp_routes) {
        $tmp_routes->on('route_limits.route_id', '=', 'tmp_routes.id');
    })
    //->with('route')
    ->select([
        'route_limits.id as route_limits_id',
        'route_limits.route_id as route_id',
        'route_limits.current_value as current_value',
        'route_limits.limit as limit',
        'route_limits.notes as notes',
        'tmp_routes.name as route_name'
    ]);
}

// Relationship Search
public function relationSearch(): array
{
    return [];
}

// Add Column
public function addColumns(): PowerGridColumns
{
    return PowerGrid::columns()          
        ->addColumn('id')
        ->addColumn('route_id')
        ->addColumn('route_name')
        ->addColumn('status', function (RouteLimits $model) {
            $html = sprintf("<progress class='%s' max='%d' value='%d'></progress>", $model->getColorAttribute(), $model->limit, $model->current_value);
            return $html;
          })
        ->addColumn('current_value')
        ->addColumn('limit')
        ;
}

// Include Columns
public function columns(): array
{
    return [
            Column::add()
                ->title(__('ID'))
                ->field('route_limits_id')
            ,
            Column::add()
                ->title(__('Route ID'))
                ->field('route_id')
                ->searchable()
                ->sortable()
            ,
            Column::add()
                ->title(__('Route'))
                ->field('route_name')
                ->searchable()
                ->sortable()
            ,
            Column::add()
                ->title(__('Status'))
                ->field('status')
            ,

            Column::make('Current value', 'current_value', 'route_limits.current_value')
                ->searchable()
                ->sortable(),

            /*
            Column::add()
                ->title(__('Current value'))
                ->field('current_value')
                //->makeInputText('route_limits.current_value')
                ->searchable()
                ->sortable()
            ,
            */
            Column::add()
                ->title(__('Limit'))
                ->field('limit')
                ->searchable()
                ->sortable()
            ,
            Column::action('Action'),
        ];
}

public function filter(): array
{
    return [
        Filter::inputText('current_value'),
    ];
}

public function actions(): array
{
    $theme = config('livewire-powergrid.theme');

    $edit   = ($theme == 'tailwind') ? 'bg-indigo-500 cursor-pointer text-white px-3 py-2 m-1 rounded text-sm' : 'btn btn-primary';

    $delete = ($theme == 'tailwind') ? 'bg-red-500 text-white px-3 py-2 m-1 rounded text-sm' : 'btn btn-danger';

    return [
        Button::add('edit')
            ->slot('<svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" viewBox="0 0 20 20" fill="currentColor"><path d="M13.586 3.586a2 2 0 112.828 2.828l-.793.793-2.828-2.828.793-.793zM11.379 5.793L3 14.172V17h2.828l8.38-8.379-2.83-2.828z" /></svg>')
            ->class($edit)
            ->openModal('edit-limit', ['limit_id' => 'route_limits_id']),

        Button::add('destroy')
            ->slot('<svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" viewBox="0 0 20 20" fill="currentColor"><path fill-rule="evenodd" d="M9 2a1 1 0 00-.894.553L7.382 4H4a1 1 0 000 2v10a2 2 0 002 2h8a2 2 0 002-2V6a1 1 0 100-2h-3.382l-.724-1.447A1 1 0 0011 2H9zM7 8a1 1 0 012 0v6a1 1 0 11-2 0V8zm5-1a1 1 0 00-1 1v6a1 1 0 102 0V8a1 1 0 00-1-1z" clip-rule="evenodd" /></svg>')
            ->class($delete)
            ->openModal('delete-limit', ['limit_id' => 'route_limits_id']),
    ];
}

}`

[luanfreitasdev]

Can you try this ?

public function filter(): array
{
    return [
        Filter::inputText('current_value', 'route_limits.current_value'),
    ];
}

[marcwitteveen]

I did, however the result is the same... no filter is showing.

[marcwitteveen]

I have added a screenshot of the JS files loaded on the page screenshot of JavaScripts loaded.

I am using Vite.

[marcwitteveen]

Solved, the method is called filterS with an S and not filter