Help to understand filters, mine doesn't work

[Mozzarella-dev]

I wanted to implement filters in my datatables but i really can't get them to work.

I've tried to look up to the examples but for my model doesn't have 2fa, nor types/roles... So i tried to copy and modify the active to try it out.

This is my ClientTable.php:

<?php

namespace App\Http\Livewire;

use Illuminate\Database\Eloquent\Builder;
use Rappasoft\LaravelLivewireTables\DataTableComponent;
use Rappasoft\LaravelLivewireTables\Views\Column;
use App\Models\Client;
use Rappasoft\LaravelLivewireTables\Views\Filter;

class ClientTable extends DataTableComponent
{

    public function filters(): array
    {
        return [
            'paying' => Filter::make('Paying Customer')
                ->select([
                    '' => 'Any',
                    1 => 'Yes',
                    0 => 'No',
                ]),
        ];
    }


    public function columns(): array
    {
        return [
            Column::make('Name', 'fullname')
                ->sortable()
                ->searchable(),
            Column::make('Email', 'email')
                ->sortable()
                ->searchable(),
            Column::make('Paying Customer', 'is_paying_customer')
                ->sortable()
                ->searchable(),
        ];
    }

    public function query(): Builder
    {
        return Client::query()
        ->when($this->getFilter('paying'), fn ($query, $paying) => $query->where('paying', $paying === 'yes'));
    }

    public function rowView(): string
    {
        return 'livewire-tables.rows.client_table';
    }
}

in the client_table view i've only got formatting of the cells and i think it's not relevant.

I'm seeing the filter dropdown on top of the table but doesn't show anything, if i click it nothing happens.

Here's a screenshot on how the filter dropdown appears:

If i include this style globally the filter dropdown disappears:

<style>
    [x-cloak] { display: none !important; }
</style>

Now i don't know what i'm doing wrong. All of the other functions of the table work and i don't think i've misplaced the livewire styles or scripts in the document.

Thanks for anybody who helps

[rappasoft]

Since the keys of your filter are boolean values, you can just do this:

return Client::query()
        ->when($this->getFilter('paying'), fn ($query, $paying) => $query->where('paying', $paying));

In your case $paying is never 'yes' because it's not one of the keys, it's one of the values.

[Mozzarella-dev]

I've modified as you suggested but i still can't see any dropdown when i click the Filter on top of the table.

[rappasoft]

Do you have AlpineJS installed?

[Mozzarella-dev]

Didn't notice i misplaced the script for alpine.js
Works wonderfully, this repo is gold.

[JoseVale99]

you just have to install alpinejs