Filters layout not appearing properly above content

I have the following filters

            ->filters([
                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),
                            );
                    })
            ],layout: FiltersLayout::AboveContent)

            ->filters([
                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),
                            );
                    })
            ],layout: FiltersLayout::AboveContent)

However they appear as a column, and not like this

72 Replies

Lara Zeus•12mo ago

this https://filamentphp.com/docs/3.x/tables/filters#displaying-filters-above-the-table-content

Filters - Table Builder - Filament

DarkKnightOP•12mo ago

Hey, I know. That where I took the image from 😅. Thats the problem, it doesnt work

DarkKnightOP•12mo ago

It appears like this

Lara Zeus•12mo ago

ah ok 🙂 ->filtersFormColumns(3) in the same doc page 🙂

DarkKnightOP•12mo ago

Hey . That still doesnt work. I also tried it 😅. It only makes the columns wider, like this:

DarkKnightOP•12mo ago

This is very weird. I dont have any custom css or anything Do you think it could be a bug?

Lara Zeus•12mo ago

I think each form is a standalone filter so not sure how to make one filter to disply as colimns maybe wrap it into grid

Grid::make()
->columns(2)
->schema([
    DatePicker::make('created_from')->columnSpan(1),
    DatePicker::make('created_until')->columnSpan(1),
])

Grid::make()
->columns(2)
->schema([
    DatePicker::make('created_from')->columnSpan(1),
    DatePicker::make('created_until')->columnSpan(1),
])

DarkKnightOP•12mo ago

You mean, like this?

            ->filters([
                Grid::make('created_at')
                    ->columns(2)
                    ->schema([
                        DatePicker::make('created_from')->columnSpan(1),
                        DatePicker::make('created_until')->columnSpan(1),
                    ])

            ->filters([
                Grid::make('created_at')
                    ->columns(2)
                    ->schema([
                        DatePicker::make('created_from')->columnSpan(1),
                        DatePicker::make('created_until')->columnSpan(1),
                    ])

Method Filament\Tables\Columns\Layout\Grid::getName does not exist.

Lara Zeus•12mo ago

Grid::make()

DarkKnightOP•12mo ago

Its the same error

Lara Zeus•12mo ago

I literally copied the code from a resource I have 😂 weird

DarkKnightOP•12mo ago

brooo 🤣 🤣

Lara Zeus•12mo ago

noo

Tables\Filters\Filter::make('created_at')
->form([
    Grid::make()->schema([
        DatePicker::make('created_from')->columnSpan(1),
        DatePicker::make('created_until')->columnSpan(1),
    ])->columns()
]),

Tables\Filters\Filter::make('created_at')
->form([
    Grid::make()->schema([
        DatePicker::make('created_from')->columnSpan(1),
        DatePicker::make('created_until')->columnSpan(1),
    ])->columns()
]),

all gose in form

DarkKnightOP•12mo ago

Legend 💪. Thank you! Mind if I ask one more question?

Lara Zeus•12mo ago

sure

DarkKnightOP•12mo ago

Wait a sec, if I keep adding components, the UI gets messed up again

            ->filters([
                Tables\Filters\Filter::make('created_at')
                    ->form([
                        Grid::make()
                            // ->columns(5)
                            ->schema([
                                DatePicker::make('created_from')->columnSpan(1),
                                DatePicker::make('created_until')->columnSpan(1),
                                DatePicker::make('date_from')->columnSpan(1),
                                // ->hidden(fn(\Filament\Forms\Get $get) => $get('date_range') != 'custom')
                                Select::make('date_range')
                                    ->options([
                                        'always' => 'Always',
                                        'today' => 'Today',
                                        'this_week' => 'This week',
                                        'this_month' => 'This month',
                                        'this_quarter' => 'This quarter',
                                        'this_year' => 'This year',
                                        'yesterday' => 'yesterday',
                                        'last_week' => 'Last week',
                                        'last_month' => 'Last month',
                                        'last_quarter' => 'Last quarter',
                                        'last_year' => 'Last year',
                                        'custom' => 'Custom',
                                    ])->default('always')->columnSpan(1),
                                Forms\Components\DatePicker::make('date_until')->columnSpan(1),
                            ])
                    ]),
            ], layout: FiltersLayout::AboveContent)
            ->filtersFormColumns(5)

            ->filters([
                Tables\Filters\Filter::make('created_at')
                    ->form([
                        Grid::make()
                            // ->columns(5)
                            ->schema([
                                DatePicker::make('created_from')->columnSpan(1),
                                DatePicker::make('created_until')->columnSpan(1),
                                DatePicker::make('date_from')->columnSpan(1),
                                // ->hidden(fn(\Filament\Forms\Get $get) => $get('date_range') != 'custom')
                                Select::make('date_range')
                                    ->options([
                                        'always' => 'Always',
                                        'today' => 'Today',
                                        'this_week' => 'This week',
                                        'this_month' => 'This month',
                                        'this_quarter' => 'This quarter',
                                        'this_year' => 'This year',
                                        'yesterday' => 'yesterday',
                                        'last_week' => 'Last week',
                                        'last_month' => 'Last month',
                                        'last_quarter' => 'Last quarter',
                                        'last_year' => 'Last year',
                                        'custom' => 'Custom',
                                    ])->default('always')->columnSpan(1),
                                Forms\Components\DatePicker::make('date_until')->columnSpan(1),
                            ])
                    ]),
            ], layout: FiltersLayout::AboveContent)
            ->filtersFormColumns(5)

I want to keep adding components, and they are all added in a line

DarkKnightOP•12mo ago

Lara Zeus•12mo ago

->columns(5) ? and do you need them all in one filter?

DarkKnightOP•12mo ago

Doubt xd

DarkKnightOP•12mo ago

I want all these filters in the header of the table (AboveLayout)

Lara Zeus•12mo ago

I mean you can make multiple filters

Tables\Filters\Filter::make('created_at')->form(),
Tables\Filters\Filter::make('created_until')->form(),
Tables\Filters\Filter::make('date_range')->form(),

Tables\Filters\Filter::make('created_at')->form(),
Tables\Filters\Filter::make('created_until')->form(),
Tables\Filters\Filter::make('date_range')->form(),

and they still all AboveLayout try removing ->filtersFormColumns(5) only use form() if you want to like group filters with one query if i making sense 😅

DarkKnightOP•12mo ago

Yehh, I understand, for each Filter a different ->query() I had everythign grouped in v2 and it worked well, but things changed haha What if I want to use the queries in conjuction?

Lara Zeus•12mo ago

ya in this case one filter with one form 👍

DarkKnightOP•12mo ago

Yeah, but then the problem is they appear as a column 🤣 Ive been working on this for too long

Lara Zeus•12mo ago

removing ->filtersFormColumns(5) didnt help? so you have to get how Grid works it's responsive div with tailwindcss classes its gonna be tricky

DarkKnightOP•12mo ago

YESS. I figured it out Its hard to explain whats going on, but I think I get it One more thing. I have some resources with names "status", "definitions", etc. But when I set them to collapsed from the panel, it doesnt seem to work?

            ->navigationGroups([
                'Execution',
                'Deals',
                'Affairs',
                'Communication',
                'System',
                'Status',
                'Definitions',
                NavigationGroup::make()
                    ->label('Status')
                    ->icon('heroicon-o-shopping-cart'),
                NavigationGroup::make()
                    ->label('System')
                    ->icon('heroicon-o-pencil'),
                NavigationGroup::make()
                    ->label('Definitions')
                    ->collapsed(),
            ])

            ->navigationGroups([
                'Execution',
                'Deals',
                'Affairs',
                'Communication',
                'System',
                'Status',
                'Definitions',
                NavigationGroup::make()
                    ->label('Status')
                    ->icon('heroicon-o-shopping-cart'),
                NavigationGroup::make()
                    ->label('System')
                    ->icon('heroicon-o-pencil'),
                NavigationGroup::make()
                    ->label('Definitions')
                    ->collapsed(),
            ])

Lara Zeus•12mo ago

the collapsed stored in the local storage, so if you make some changes you need toclear that to see the effect

DarkKnightOP•12mo ago

Can you elaborate? Basically what I want to do, is have that group collapsed by default when loading the page

Lara Zeus•12mo ago

when loading the page the first time, filament will store which nav group is collapsed in local storage so if you made any changes like adding ->collapsed() you need to clear that data

DarkKnightOP•12mo ago

So you cant have it always load collapsed?

Lara Zeus•12mo ago

no you can for new users will appers collapsed but for your browser... clear the local storage data then refresh

DarkKnightOP•12mo ago

okk lemme try

DarkKnightOP•12mo ago

local storage

Lara Zeus•12mo ago

right clikc and delete just in case after reshresh it will populate again with the new values

DarkKnightOP•12mo ago

oh bruh, it works now. Thank you @Lara Zeus !

Lara Zeus•12mo ago

you're welcome 🙂

DarkKnightOP•12mo ago

But there isnt a way to delete the users value from his storage, right? is that illegal? Or in other words, force him to always open the page with collapsed groups

Lara Zeus•12mo ago

not sure actually, you could write some js code to check if there is any stored data and handle that but dosnt make sense since the user still can open and close these groups and it will sotre again in the storage

DarkKnightOP•12mo ago

Hey sorry again. But it seems the Filters appear broken on screen with different sizes:(

DarkKnightOP•12mo ago

For example like this on 1080p screens.

DarkKnightOP•12mo ago

Even if I pull my dev tools, it breaks!

DarkKnightOP•12mo ago

If you have time, I would appreciate it if you could help again:)

->filters([
                Tables\Filters\Filter::make('created_at')
                    ->form([
                        Grid::make([
                            'sm' => 3,
                            'xl' => 6,
                            '2xl' => 8,
                        ])->columns(9)->schema([
                            Select::make('date_range')
                                ->options([
                                    'always' => 'Always',
                                    'today' => 'Today',
                                    'this_week' => 'This week',
                                    'this_month' => 'This month',
                                    'this_quarter' => 'This quarter',
                                    'this_year' => 'This year',
                                    'yesterday' => 'yesterday',
                                    'last_week' => 'Last week',
                                    'last_month' => 'Last month',
                                    'last_quarter' => 'Last quarter',
                                    'last_year' => 'Last year',
                                    'custom' => 'Custom',
                                ])->default('always')->columnSpan(1),
                            Forms\Components\DatePicker::make('date_from')
                                ->hidden(fn(\Filament\Forms\Get $get) => $get('date_range') != 'custom'),
                            Forms\Components\DatePicker::make('date_until')
                                ->hidden(fn(\Filament\Forms\Get $get) => $get('date_range') != 'custom'),
                            Select::make('owner_user_id')
                                ->label('Project owner')
                                ->options(User::all()->pluck('name', 'id'))
                                ->multiple()
                                ->searchable(),

->filters([
                Tables\Filters\Filter::make('created_at')
                    ->form([
                        Grid::make([
                            'sm' => 3,
                            'xl' => 6,
                            '2xl' => 8,
                        ])->columns(9)->schema([
                            Select::make('date_range')
                                ->options([
                                    'always' => 'Always',
                                    'today' => 'Today',
                                    'this_week' => 'This week',
                                    'this_month' => 'This month',
                                    'this_quarter' => 'This quarter',
                                    'this_year' => 'This year',
                                    'yesterday' => 'yesterday',
                                    'last_week' => 'Last week',
                                    'last_month' => 'Last month',
                                    'last_quarter' => 'Last quarter',
                                    'last_year' => 'Last year',
                                    'custom' => 'Custom',
                                ])->default('always')->columnSpan(1),
                            Forms\Components\DatePicker::make('date_from')
                                ->hidden(fn(\Filament\Forms\Get $get) => $get('date_range') != 'custom'),
                            Forms\Components\DatePicker::make('date_until')
                                ->hidden(fn(\Filament\Forms\Get $get) => $get('date_range') != 'custom'),
                            Select::make('owner_user_id')
                                ->label('Project owner')
                                ->options(User::all()->pluck('name', 'id'))
                                ->multiple()
                                ->searchable(),

                            Select::make('relation_id')
                                ->label('Relation')
                                // ->columnSpan(1)
                                ->options(Relation::all()->pluck('name', 'id'))
                                ->multiple()
                                ->searchable(),
                            Select::make('project_id')
                                ->label('Project')
                                ->options(Project::orderBy('name')->get()->pluck('name', 'id'))
                                ->multiple()
                                // ->columnSpan(1)
                                ->searchable(),
                            Select::make('task_id')
                                ->label('Task')
                                // ->columnSpan(1)
                                ->options(Task::all()->pluck('name', 'id'))
                                ->multiple()
                                ->searchable(),
                            Select::make('worker_user_id')
                                ->label('Worker')
                                // ->columnSpan(1)
                                ->options(User::all()->pluck('name', 'id'))
                                ->multiple()
                                ->searchable(),
                            Select::make('status_id')
                                ->label('Status')
                                // ->columnSpan(1)
                                ->options(TimeRegistrationStatus::all()->pluck('name', 'id'))
                                ->multiple(),
                        ])
                    ])

                            Select::make('relation_id')
                                ->label('Relation')
                                // ->columnSpan(1)
                                ->options(Relation::all()->pluck('name', 'id'))
                                ->multiple()
                                ->searchable(),
                            Select::make('project_id')
                                ->label('Project')
                                ->options(Project::orderBy('name')->get()->pluck('name', 'id'))
                                ->multiple()
                                // ->columnSpan(1)
                                ->searchable(),
                            Select::make('task_id')
                                ->label('Task')
                                // ->columnSpan(1)
                                ->options(Task::all()->pluck('name', 'id'))
                                ->multiple()
                                ->searchable(),
                            Select::make('worker_user_id')
                                ->label('Worker')
                                // ->columnSpan(1)
                                ->options(User::all()->pluck('name', 'id'))
                                ->multiple()
                                ->searchable(),
                            Select::make('status_id')
                                ->label('Status')
                                // ->columnSpan(1)
                                ->options(TimeRegistrationStatus::all()->pluck('name', 'id'))
                                ->multiple(),
                        ])
                    ])

Lara Zeus•12mo ago

I dont think this can be fixed 🙂 grid is 12 columns so do the math, I dont think 1 column per filter will be fit for the field so you have to rethink the UI again with this many filters maybe use modal or slideover? one thing you can try columns(['md' => .....]) and play around

DarkKnightOP•12mo ago

Hey thanks for your reply. However, I still couldnt get it to work 😦 I will ask Dan and hope he doesnt yell at me 🤣

Dennis Koch•12mo ago

You just put too many filters in one line 🤔

DarkKnightOP•12mo ago

Nahhh It worked perfectly fine in v2 When migrating to v3, then the Filter component, became a single column dropdown you can activate by pressing the Filter button Now I have created a Grid, but its overly complicated. I want it to work on all screens

DarkKnightOP•12mo ago

@Dennis Koch I just need the code for this: https://filamentphp.com/docs/3.x/tables/filters/layout#displaying-filters-above-the-table-content

Filter layout - Table Builder - Filament

DarkKnightOP•12mo ago

In the schema How did Dan do it?

Dennis Koch•12mo ago

https://github.com/filamentphp/filament/blob/1d32bb6cdce6640e4a2e82d2f7e59e39bb09c741/docs-assets/app/app/Livewire/TablesDemo.php#L732-L747

DarkKnightOP•12mo ago

Im afraid that still doesnt work. It keeps breaking the UI

DarkKnightOP•12mo ago

I would appreciate it if you could have a look https://pastebin.com/sse351ZN Maybe im doing somethign wrong and just not seeing it Uhhhhhh wait hold up. If I remove all the callables, then it works???? wth I found the issue! @Dennis Koch Its the ->multiple() callback. Thats what causing the issue.

DarkKnightOP•12mo ago

multiple

DarkKnightOP•12mo ago

Single

DarkKnightOP•12mo ago

Is this intentional? Im guessing it isnt But they are both part of the class="choices". SO how are they different? 🤔

Dennis Koch•12mo ago

I doubt it's intentional, but I also have no idea 😅

DarkKnightOP•12mo ago

Ok then. Time to debug 🤓 For the past 2 hours Ive been trying to find the damn blade file but I cant. Do you have any idea how I can find it?

<div class="choices__inner"><select x-ref="input" id="tableFilters.created_at.owner_user_id" multiple="multiple"
        class="choices__input" hidden="" tabindex="-1" data-choice="active"></select>
    <div class="choices__list choices__list--multiple"></div><input type="search" name="search_terms"
        class="choices__input choices__input--cloned" autocomplete="off" autocapitalize="off" spellcheck="false"
        role="textbox" aria-autocomplete="list" aria-label="Select an option" placeholder="Select an option"
        style="/* min-width: 17ch; *//* width: 1ch; */width: 1ch;min-width: -webkit-fill-available;">
</div>

<div class="choices__inner"><select x-ref="input" id="tableFilters.created_at.owner_user_id" multiple="multiple"
        class="choices__input" hidden="" tabindex="-1" data-choice="active"></select>
    <div class="choices__list choices__list--multiple"></div><input type="search" name="search_terms"
        class="choices__input choices__input--cloned" autocomplete="off" autocapitalize="off" spellcheck="false"
        role="textbox" aria-autocomplete="list" aria-label="Select an option" placeholder="Select an option"
        style="/* min-width: 17ch; *//* width: 1ch; */width: 1ch;min-width: -webkit-fill-available;">
</div>

As you can see, the div has custom styling via style=""

Lara Zeus•12mo ago

I think it's vendor/filament/forms/resources/views/components/select.blade.php

DarkKnightOP•12mo ago

Its overriding my theme classes 1s i will check https://pastebin.com/12q5mB9J

awcodes•12mo ago

Just target it with css and set min-width to 100%

DarkKnightOP•12mo ago

target it? I did it via theme. and it doesnt work:/ Also this is generally a bug, and I want to submit a PR This file doesnt have any style

awcodes•12mo ago

min-width: 100% !important; And if it’s a bug it’s a bug in choices.js not filament.

DarkKnightOP•12mo ago

UI bug from javascript?

DarkKnightOP•12mo ago

Even though the bug is iun frontend?

awcodes•12mo ago

Would have to dig further. Anyway, min-width: 100% !important; works. I’m using it in the table repeater plugin to solve this exact issue.

DarkKnightOP•12mo ago

Ahh okk. Did you inject via a theme?

awcodes•12mo ago

It’s in the plugin’s css file.

DarkKnightOP•12mo ago

Btw i used

    width: 1ch;
    min-width: -webkit-fill-available;

    width: 1ch;
    min-width: -webkit-fill-available;

This also works

awcodes•12mo ago

So it would work in a theme too

DarkKnightOP•12mo ago

Hm. What is the class name?

awcodes•12mo ago

I just did .choices input {}

DarkKnightOP•12mo ago

I did .choices__input .choices__input--cloned but it didnt work. I will try yours Thanks. That worked!

Gaming

Programming

Filters layout not appearing properly above content