Form filter in one line

How can we put them in a single line?
->filters([

Filter::make('filter')
->form([

Select::make('account')
->searchable(true)
->options(Account::query()->pluck('name', 'id')->toArray()),

DatePicker::make('start_date'),
DatePicker::make('end_data'),

])

], layout: FiltersLayout::AboveContent)
->filters([

Filter::make('filter')
->form([

Select::make('account')
->searchable(true)
->options(Account::query()->pluck('name', 'id')->toArray()),

DatePicker::make('start_date'),
DatePicker::make('end_data'),

])

], layout: FiltersLayout::AboveContent)
No description
12 Replies
waleedGRT
waleedGRTOP15mo ago
Already tried this 😔
waleedGRT
waleedGRTOP15mo ago
Same
No description
Kenneth Sese
Kenneth Sese15mo ago
@waleedgrt Just tested and this is working fine for me. A few things you can try: make sure you're on the latest version of Filament, rebuild your assets with npm run build, run php artisan filament:upgrade, and if you published your views, remove them.
waleedGRT
waleedGRTOP15mo ago
I updated the filament and executed these commands npm run build and php artisan filament:upgrade but I got the same result 😢. By the way, I am using this on the custom page.
waleedGRT
waleedGRTOP15mo ago
No description
Kenneth Sese
Kenneth Sese15mo ago
By custom page do you mean with a custom view? Or do you mean using the Table Builder? I tested on the Table Builder and that was working for me Oh I see now...you have everything wrapped in the same form! Hold on Why do you have your date pickers inside the filter? Is that what you want/need? I think you what you want is something like this:
->filters([
SelectFilter::make('account')
->searchable(true)
->options(Account::query()->pluck('name', 'id')->toArray()),
Filter::make('created_at')
->form([
DatePicker::make('created_from'),
DatePicker::make('created_until'),
])
->query(function (Builder $query, array $data): Builder {
return $query
->when(
$data['created_from'],
fn (Builder $query, $date): Builder => $query->whereDate('created_at', '>=', $date),
)
->when(
$data['created_until'],
fn (Builder $query, $date): Builder => $query->whereDate('created_at', '<=', $date),
);
})
// etc.
], layout: FiltersLayout::AboveContent)
->filters([
SelectFilter::make('account')
->searchable(true)
->options(Account::query()->pluck('name', 'id')->toArray()),
Filter::make('created_at')
->form([
DatePicker::make('created_from'),
DatePicker::make('created_until'),
])
->query(function (Builder $query, array $data): Builder {
return $query
->when(
$data['created_from'],
fn (Builder $query, $date): Builder => $query->whereDate('created_at', '>=', $date),
)
->when(
$data['created_until'],
fn (Builder $query, $date): Builder => $query->whereDate('created_at', '<=', $date),
);
})
// etc.
], layout: FiltersLayout::AboveContent)
You need to separate your filters. And then inside your date picker you have a form that you then need to separate into a grid:
waleedGRT
waleedGRTOP15mo ago
the problem is still there filter form always appears in vertical form
No description
Kenneth Sese
Kenneth Sese15mo ago
So you'll want something like this:
->filters([
SelectFilter::make('account')
->searchable(true)
->options(Account::query()->pluck('name', 'id')->toArray()),
Filter::make('created_at')
->form([
Grid::make()
->schema([
DatePicker::make('created_from')
->columnSpan(1),
DatePicker::make('created_until')
->columnSpan(1),
])
])
->columnSpan(2)
->query(function (Builder $query, array $data): Builder {
return $query
->when(
$data['created_from'],
fn (Builder $query, $date): Builder => $query->whereDate('created_at', '>=', $date),
)
->when(
$data['created_until'],
fn (Builder $query, $date): Builder => $query->whereDate('created_at', '<=', $date),
);
})

], layout: FiltersLayout::AboveContent)
->filters([
SelectFilter::make('account')
->searchable(true)
->options(Account::query()->pluck('name', 'id')->toArray()),
Filter::make('created_at')
->form([
Grid::make()
->schema([
DatePicker::make('created_from')
->columnSpan(1),
DatePicker::make('created_until')
->columnSpan(1),
])
])
->columnSpan(2)
->query(function (Builder $query, array $data): Builder {
return $query
->when(
$data['created_from'],
fn (Builder $query, $date): Builder => $query->whereDate('created_at', '>=', $date),
)
->when(
$data['created_until'],
fn (Builder $query, $date): Builder => $query->whereDate('created_at', '<=', $date),
);
})

], layout: FiltersLayout::AboveContent)
Be sure to import the correct Grid
waleedGRT
waleedGRTOP15mo ago
Working 😀
No description
Kenneth Sese
Kenneth Sese15mo ago
Take a look at the Form builder and Grid specificially to customize the breakpoints as you make your browser bigger/smaller
waleedGRT
waleedGRTOP15mo ago
Thank you for your help. I genuinely appreciate it.
Want results from more Discord servers?
Add your server