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)

12 Replies

Vp•2y ago

Maybe this one https://filamentphp.com/docs/3.x/tables/filters#positioning-filters-into-grid-columns I didn't check

Filters - Table Builder - Filament

waleedGRTOP•2y ago

Already tried this 😔

waleedGRTOP•2y ago

Same

Kenneth Sese•2y 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.

waleedGRTOP•2y 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.

waleedGRTOP•2y ago

Kenneth Sese•2y 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:

waleedGRTOP•2y ago

the problem is still there filter form always appears in vertical form

Kenneth Sese•2y 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

waleedGRTOP•2y ago

Working 😀

Kenneth Sese•2y ago

Take a look at the Form builder and Grid specificially to customize the breakpoints as you make your browser bigger/smaller

waleedGRTOP•2y ago

Thank you for your help. I genuinely appreciate it.

Gaming

Programming

Form filter in one line

Did you find this page helpful?