Filament•6mo ago

Filter shown in vertical instead of horizontal

I am using FiltersLayout::AboveContent. The rest of the filters are fine and shown horizontally, but the created_at and updated_at at shown vertically. How can I make them all in a horizontal line?

Solution:

https://youtu.be/cy03vMJ8JI8?si=bm2wrs7bO4F3htM2 Look after minute 8:15 of this video. I think this is what you want....

Code With Tony

YouTube

12 Add Filters and Tabs to Table - FilamentPHP V3 Tutorial

Welcome to this tutorial on Laravel Filament! In this video, we will explore how to work with filters in Laravel Filament tables to manage data efficiently. Laravel Filament is a powerful administration panel for Laravel applications that allows you to manage database records with ease. With filters, you can easily sort and filter your data to f...

Jump to solution

7 Replies

rezabrnt•6mo ago

Pulpsting0610•6mo ago

Chain filtersFormColumn(3) so that it will make 3 columns. Then in created_at filter add columnSpan method and set it to 2.

rezabrnt•6mo ago

Both of them got spanned into 2 column

Tables\Filters\Filter::make('created_at')
->form([
    Forms\Components\DatePicker::make('created_from')
        ->placeholder(fn ($state): string => 'Dec 18, ' . now()->subYear()->format('Y')),
    Forms\Components\DatePicker::make('created_until')
        ->placeholder(fn ($state): string => now()->format('M d, Y')),
])
->query(function (Builder $query, array $data): Builder {
    return $query
        ->when(
            $data['created_from'] ?? null,
            fn (Builder $query, $date): Builder => $query->whereDate('created_at', '>=', $date),
        )
        ->when(
            $data['created_until'] ?? null,
            fn (Builder $query, $date): Builder => $query->whereDate('created_at', '<=', $date),
        );
})
->indicateUsing(function (array $data): array {
    $indicators = [];
    if ($data['created_from'] ?? null) {
        $indicators['created_from'] = 'Dibuat dari ' . Carbon::parse($data['created_from'])->toFormattedDateString();
    }
    if ($data['created_until'] ?? null) {
        $indicators['created_until'] = 'Order until ' . Carbon::parse($data['created_until'])->toFormattedDateString();
    }

    return $indicators;
}),
], layout: FiltersLayout::AboveContentCollapsible)->filtersFormColumns(3)

Tables\Filters\Filter::make('created_at')
->form([
    Forms\Components\DatePicker::make('created_from')
        ->placeholder(fn ($state): string => 'Dec 18, ' . now()->subYear()->format('Y')),
    Forms\Components\DatePicker::make('created_until')
        ->placeholder(fn ($state): string => now()->format('M d, Y')),
])
->query(function (Builder $query, array $data): Builder {
    return $query
        ->when(
            $data['created_from'] ?? null,
            fn (Builder $query, $date): Builder => $query->whereDate('created_at', '>=', $date),
        )
        ->when(
            $data['created_until'] ?? null,
            fn (Builder $query, $date): Builder => $query->whereDate('created_at', '<=', $date),
        );
})
->indicateUsing(function (array $data): array {
    $indicators = [];
    if ($data['created_from'] ?? null) {
        $indicators['created_from'] = 'Dibuat dari ' . Carbon::parse($data['created_from'])->toFormattedDateString();
    }
    if ($data['created_until'] ?? null) {
        $indicators['created_until'] = 'Order until ' . Carbon::parse($data['created_until'])->toFormattedDateString();
    }

    return $indicators;
}),
], layout: FiltersLayout::AboveContentCollapsible)->filtersFormColumns(3)

here is the filter code I use

Vp•6mo ago

->form([
    Forms\Components\Grid::make(3)
        ->schema([
            Forms\Components\DatePicker::make('a'),

            Forms\Components\DatePicker::make('b'),

            Forms\Components\DatePicker::make('c'),
        ]),
])

// form column
->filtersFormColumns(1)

->form([
    Forms\Components\Grid::make(3)
        ->schema([
            Forms\Components\DatePicker::make('a'),

            Forms\Components\DatePicker::make('b'),

            Forms\Components\DatePicker::make('c'),
        ]),
])

// form column
->filtersFormColumns(1)

Solution

Pulpsting0610•6mo ago

https://youtu.be/cy03vMJ8JI8?si=bm2wrs7bO4F3htM2 Look after minute 8:15 of this video. I think this is what you want.

Code With Tony

YouTube

12 Add Filters and Tabs to Table - FilamentPHP V3 Tutorial

rezabrnt•6mo ago

Thank you. All of your answers helped me

Gaming

Programming

Filter shown in vertical instead of horizontal