Listing records

#Using tabs to filter the records

You can add tabs above the table, which can be used to filter the records based on some predefined conditions. Each tab can scope the Eloquent query of the table in a different way. To register tabs, add a getTabs() method to the List page class, and return an array of Tab objects:

use Filament\Resources\Components\Tab;
use Illuminate\Database\Eloquent\Builder;
 
public function getTabs(): array
{
    return [
        'all' => Tab::make(),
        'active' => Tab::make()
            ->modifyQueryUsing(fn (Builder $query) => $query->where('active', true)),
        'inactive' => Tab::make()
            ->modifyQueryUsing(fn (Builder $query) => $query->where('active', false)),
    ];
}
use Filament\Resources\Components\Tab;
use Illuminate\Database\Eloquent\Builder;

public function getTabs(): array
{
    return [
        'all' => Tab::make(),
        'active' => Tab::make()
            ->modifyQueryUsing(fn (Builder $query) => $query->where('active', true)),
        'inactive' => Tab::make()
            ->modifyQueryUsing(fn (Builder $query) => $query->where('active', false)),
    ];
}

#Customizing the filter tab labels

The keys of the array will be used as identifiers for the tabs, so they can be persisted in the URL's query string. The label of each tab is also generated from the key, but you can override that by passing a label into the make() method of the tab:

use Filament\Resources\Components\Tab;
use Illuminate\Database\Eloquent\Builder;
 
public function getTabs(): array
{
    return [
        'all' => Tab::make('All customers'),
        'active' => Tab::make('Active customers')
            ->modifyQueryUsing(fn (Builder $query) => $query->where('active', true)),
        'inactive' => Tab::make('Inactive customers')
            ->modifyQueryUsing(fn (Builder $query) => $query->where('active', false)),
    ];
}
use Filament\Resources\Components\Tab;
use Illuminate\Database\Eloquent\Builder;

public function getTabs(): array
{
    return [
        'all' => Tab::make('All customers'),
        'active' => Tab::make('Active customers')
            ->modifyQueryUsing(fn (Builder $query) => $query->where('active', true)),
        'inactive' => Tab::make('Inactive customers')
            ->modifyQueryUsing(fn (Builder $query) => $query->where('active', false)),
    ];
}

#Adding icons to filter tabs

You can add icons to the tabs by passing an icon into the icon() method of the tab:

use Filament\Resources\Components\Tab;
 
Tab::make()
    ->icon('heroicon-m-user-group')
use Filament\Resources\Components\Tab;

Tab::make()
    ->icon('heroicon-m-user-group')

You can also change the icon's position to be after the label instead of before it, using the iconPosition() method:

use Filament\Support\Enums\IconPosition;
 
Tab::make()
    ->icon('heroicon-m-user-group')
    ->iconPosition(IconPosition::After)
use Filament\Support\Enums\IconPosition;

Tab::make()
    ->icon('heroicon-m-user-group')
    ->iconPosition(IconPosition::After)

#Adding badges to filter tabs

You can add badges to the tabs by passing a string into the badge() method of the tab:

use Filament\Resources\Components\Tab;
 
Tab::make()
    ->badge(Customer::query()->where('active', true)->count())
use Filament\Resources\Components\Tab;

Tab::make()
    ->badge(Customer::query()->where('active', true)->count())

#Changing the color of filter tab badges

The color of a badge may be changed using the badgeColor() method:

use Filament\Resources\Components\Tab;
 
Tab::make()
    ->badge(Customer::query()->where('active', true)->count())
    ->badgeColor('success')
use Filament\Resources\Components\Tab;

Tab::make()
    ->badge(Customer::query()->where('active', true)->count())
    ->badgeColor('success')

#Adding extra attributes to filter tabs

You may also pass extra HTML attributes to filter tabs using extraAttributes():

use Filament\Resources\Components\Tab;
 
Tab::make()
    ->extraAttributes(['data-cy' => 'statement-confirmed-tab'])
use Filament\Resources\Components\Tab;

Tab::make()
    ->extraAttributes(['data-cy' => 'statement-confirmed-tab'])

#Customizing the default tab

To customize the default tab that is selected when the page is loaded, you can return the array key of the tab from the getDefaultActiveTab() method:

use Filament\Resources\Components\Tab;
 
public function getTabs(): array
{
    return [
        'all' => Tab::make(),
        'active' => Tab::make(),
        'inactive' => Tab::make(),
    ];
}
 
public function getDefaultActiveTab(): string | int | null
{
    return 'active';
}
use Filament\Resources\Components\Tab;

public function getTabs(): array
{
    return [
        'all' => Tab::make(),
        'active' => Tab::make(),
        'inactive' => Tab::make(),
    ];
}

public function getDefaultActiveTab(): string | int | null
{
    return 'active';
}

#Authorization

For authorization, Filament will observe any model policies that are registered in your app.

Users may access the List page if the viewAny() method of the model policy returns true.

The reorder() method is used to control reordering a record.

#Customizing the table Eloquent query

Although you can customize the Eloquent query for the entire resource, you may also make specific modifications for the List page table. To do this, use the modifyQueryUsing() method in the table() method of the resource:

use Filament\Tables\Table;
use Illuminate\Database\Eloquent\Builder;
 
public static function table(Table $table): Table
{
    return $table
        ->modifyQueryUsing(fn (Builder $query) => $query->withoutGlobalScopes());
}
use Filament\Tables\Table;
use Illuminate\Database\Eloquent\Builder;

public static function table(Table $table): Table
{
    return $table
        ->modifyQueryUsing(fn (Builder $query) => $query->withoutGlobalScopes());
}

#Custom list page view

For further customization opportunities, you can override the static $view property on the page class to a custom view in your app:

protected static string $view = 'filament.resources.users.pages.list-users';
protected static string $view = 'filament.resources.users.pages.list-users';

This assumes that you have created a view at resources/views/filament/resources/users/pages/list-users.blade.php.

Here's a basic example of what that view might contain:

<x-filament-panels::page>
    {{ $this->table }}
</x-filament-panels::page>
<x-filament-panels::page>
    {{ $this->table }}
</x-filament-panels::page>

To see everything that the default view contains, you can check the vendor/filament/filament/resources/views/resources/pages/list-records.blade.php file in your project.

Edit on GitHub

Still need help? Join our Discord community or open a GitHub discussion