F
Filament•2mo ago
Fossil

searchable method makes columns all same width

How do I prevent bool values from taking up so much space? It's adding horizontal scroll to the table now because of this.
No description
11 Replies
idk
idk•2mo ago
Hi, maybe try to add ->extraAttributes(['style' => 'width: desired width']) to the column see if it works.
Fossil
FossilOP•2mo ago
Tried that. No go. Seems like the width is decided higher up in the HTML 😦
idk
idk•2mo ago
Can you share the code?
Fossil
FossilOP•2mo ago
Every column is same=ish width
No description
Fossil
FossilOP•2mo ago
    public static function table(Table $table): Table
    {
        return $table
            ->columns([
                TextColumn::make('username')->searchable(isIndividual: true, isGlobal: false),
                TextColumn::make('email')->searchable(isIndividual: true, isGlobal: false),
                TextColumn::make('roles.name')->label('Role'),
                TextColumn::make('lastlogin')->dateTime('d-m-Y H:i:s')->label('Last Login'),
                TextColumn::make('apiaccess')->dateTime('d-m-Y H:i:s')->label('Last API'),
                IconColumn::make('verified')->boolean(),
                IconColumn::make('bad_user')->boolean()->label('Bad User'),
                IconColumn::make('passwordsecurity.google2fa_enable')->boolean()->label('2FA')->default(0),
            ])
            ->filters(
                [

                ],
                layout: \Filament\Tables\Enums\FiltersLayout::AboveContent,
            )
            ->actions([
                Tables\Actions\ViewAction::make()->slideOver(),
                Tables\Actions\EditAction::make()->slideOver()->after(function (User $record, Role $role) {
                    $record->syncRoles($record->role->name);
                    $role = $role->findByName($record->role->name);
                    $record->givePermissionTo($role->findByName($record->role->name, null)->permissions->pluck('name'));
                }),
                Tables\Actions\Action::make('disable')
                    ->label('2FA')
                    ->action(fn (User $record) => $record->disable2FA())
                    ->requiresConfirmation()
                    ->icon('heroicon-o-lock-closed')
                    ->color('danger'),
                Tables\Actions\DeleteAction::make(),
            ])
            ->bulkActions([
                Tables\Actions\DeleteBulkAction::make()
                    ->requiresConfirmation(),
            ]);

    }
    public static function table(Table $table): Table
    {
        return $table
            ->columns([
                TextColumn::make('username')->searchable(isIndividual: true, isGlobal: false),
                TextColumn::make('email')->searchable(isIndividual: true, isGlobal: false),
                TextColumn::make('roles.name')->label('Role'),
                TextColumn::make('lastlogin')->dateTime('d-m-Y H:i:s')->label('Last Login'),
                TextColumn::make('apiaccess')->dateTime('d-m-Y H:i:s')->label('Last API'),
                IconColumn::make('verified')->boolean(),
                IconColumn::make('bad_user')->boolean()->label('Bad User'),
                IconColumn::make('passwordsecurity.google2fa_enable')->boolean()->label('2FA')->default(0),
            ])
            ->filters(
                [

                ],
                layout: \Filament\Tables\Enums\FiltersLayout::AboveContent,
            )
            ->actions([
                Tables\Actions\ViewAction::make()->slideOver(),
                Tables\Actions\EditAction::make()->slideOver()->after(function (User $record, Role $role) {
                    $record->syncRoles($record->role->name);
                    $role = $role->findByName($record->role->name);
                    $record->givePermissionTo($role->findByName($record->role->name, null)->permissions->pluck('name'));
                }),
                Tables\Actions\Action::make('disable')
                    ->label('2FA')
                    ->action(fn (User $record) => $record->disable2FA())
                    ->requiresConfirmation()
                    ->icon('heroicon-o-lock-closed')
                    ->color('danger'),
                Tables\Actions\DeleteAction::make(),
            ])
            ->bulkActions([
                Tables\Actions\DeleteBulkAction::make()
                    ->requiresConfirmation(),
            ]);

    }
They are all 192px
idk
idk•2mo ago
Have you tried something like this?
No description
Fossil
FossilOP•2mo ago
Tried both yeah No changes
idk
idk•2mo ago
Mmm no idea then. Wait until someone from the core team replies to you
Fossil
FossilOP•2mo ago
Cheers Width does add the style to the <th> but it stays at 192px for some reason ->compact() would be nice to have on a table Looks like when I remove the search box row from the HTML the columns actually srhinks down a lot ->searchable(isIndividual: true, isGlobal: false) ->searchable(isIndividual: true, isGlobal: false) Yeah, removing this from columns makes the table super condensed. And each column is a different size now.
idk
idk•2mo ago
Damn didnt know that
Richard Meilinger
Richard Meilinger•4w ago
Hi there, stubled over this issue expiriencing the almost the same problem. Looks like the min-width of all cells at the row containing "->searchable" ist set to "12rem" because the class "min-w-48" is applied to it. Here are two possible workarounds I did: 1) You could either overload the CSS attributes: 
[class^="fi-table-individual-search-cell-"], [class*=" fi-table-individual-search-cell-"] {
    min-width: 0;
}
[class^="fi-table-individual-search-cell-"], [class*=" fi-table-individual-search-cell-"] {
    min-width: 0;
}
2) Remove the class from the index.blade.php (/docker/stacks/rme_test_lavarel1/vendor/filament/tables/resources/views/index.blade.php) 
<x-filament-tables::cell
    @class([
        'fi-table-individual-search-cell-' . str($column->getName())->camel()->kebab(),
        'px-3 py-2',
    ])
>
    @if ($column->isIndividuallySearchable())
        <x-filament-tables::search-field
            :debounce="$searchDebounce"
            :on-blur="$isSearchOnBlur"
            wire-model="tableColumnSearches.{{ $column->getName() }}"
        />
    @endif
</x-filament-tables::cell>
<x-filament-tables::cell
    @class([
        'fi-table-individual-search-cell-' . str($column->getName())->camel()->kebab(),
        'px-3 py-2',
    ])
>
    @if ($column->isIndividuallySearchable())
        <x-filament-tables::search-field
            :debounce="$searchDebounce"
            :on-blur="$isSearchOnBlur"
            wire-model="tableColumnSearches.{{ $column->getName() }}"
        />
    @endif
</x-filament-tables::cell>

Did you find this page helpful?