Filament•6mo ago

Show a Select instead of the list of the tabs in the List page

Hi everyone! I have a resource called Payment and a page called ListPayments. I created as many tabs as the available years (in my application) to filter the payments. I would like to have a select instead of a list of all the tabs because it can get kind of cluttered 🙂 Is there any way to achieve that? Or something that I haven't thought of as an alternative? Thank you!

9 Replies

Kymset•6mo ago

I would have a look at using filters rather than tabs. Mainly have a look at Query Builder Date Contraints: https://filamentphp.com/docs/3.x/tables/filters/query-builder#date-constraints You end up with filters looking like the one attached where you can specifiy the date has to be a certain year. Your code would need to be like the following: Imports:

use Filament\Tables\Filters\QueryBuilder;
use Filament\Tables\Filters\QueryBuilder\Constraints\DateConstraint;

use Filament\Tables\Filters\QueryBuilder;
use Filament\Tables\Filters\QueryBuilder\Constraints\DateConstraint;

In filters:

QueryBuilder::make()
  ->constraints([
     DateConstraint::make('created_at'),
]),

QueryBuilder::make()
  ->constraints([
     DateConstraint::make('created_at'),
]),

Hope that helps 🙂

Query builder - Table Builder - Filament

zemoOP•6mo ago

First of all thank you for your time and help :)) I have already implemented date filters but I would still like to have a more intuitive way to filter by year right off the bat. Solely because the final users of this application are going to be people who are not exactly experienced with computers

Kymset•6mo ago

Another solution using filters could be this for it to be less complex:

SelectFilter::make('created_at')
    ->options([
          '2022'
          '2023'
          '2024'
    ])
    ->query(function (Builder $query, $data) {
        if ($data['value'] === null) {
            return $query;
        }
        return $query->whereYear($data['value']);
        });
    }),

SelectFilter::make('created_at')
    ->options([
          '2022'
          '2023'
          '2024'
    ])
    ->query(function (Builder $query, $data) {
        if ($data['value'] === null) {
            return $query;
        }
        return $query->whereYear($data['value']);
        });
    }),

I haven't tested this bit of code out but it is something along those lines

zemoOP•6mo ago

thank you :)) I'll stay around in case someone knows how to show a select instead of a list

Dennis Koch•6mo ago

Customize the view and put a select in there that’s tied to the Livewire prop.

zemoOP•6mo ago

thank you! is there a documentation page about this? I haven't had any luck, apart from this https://filamentphp.com/docs/3.x/panels/resources/custom-pages

Custom pages - Panel Builder - Filament

Dennis Koch•6mo ago

What exactly? It's pretty much just Livewire stuff.

zemoOP•6mo ago

I imagine there is an existent Filament default view and I have to customize it, where do I find it?

Dennis Koch•6mo ago

For ListPages it's called list-records.blade.php. Usually you can check the $view property of a parent class.

Gaming

Programming

Show a Select instead of the list of the tabs in the List page