Skip to main content
Version: 3.0

Advanced

Pagination

Disabling pagination

By default, tables will be paginated. To disable this, you should use the $table->paginated(false) method:

use Filament\Tables\Table;

public function table(Table $table): Table
{
return $table
->paginated(false);
}

Customizing the pagination options

You may customize the options for the paginated records per page select by passing them to the paginated() method:

use Filament\Tables\Table;

public function table(Table $table): Table
{
return $table
->paginated([10, 25, 50, 100, 'all']);
}

Preventing query string conflicts with the pagination page

By default, Livewire stores the pagination state in a page parameter of the URL query string. If you have multiple tables on the same page, this will mean that the pagination state of one table may be overwritten by the state of another table.

To fix this, you may define a $table->queryStringIdentifier(), to return a unique query string identifier for that table:

use Filament\Tables\Table;

public function table(Table $table): Table
{
return $table
->queryStringIdentifier('users');
}

Using simple pagination

You may use simple pagination by overriding paginateTableQuery() method.

First, locate your Livewire component. If you're using a resource from the Panel Builder and you want to add simple pagination to the List page, you'll want to open the Pages/List.php file in the resource, not the resource class itself.

use Illuminate\Contracts\Pagination\Paginator;
use Illuminate\Database\Eloquent\Builder;

protected function paginateTableQuery(Builder $query): Paginator
{
return $query->simplePaginate($this->getTableRecordsPerPage() == 'all' ? $query->count() : $this->getTableRecordsPerPage());
}

Record URLs (clickable rows)

You may allow table rows to be completely clickable by using the $table->recordUrl() method:

use Filament\Tables\Table;
use Illuminate\Database\Eloquent\Model;

public function table(Table $table): Table
{
return $table
->recordUrl(
fn (Model $record): string => route('posts.edit', ['record' => $record]),
);
}

In this example, clicking on each post will take you to the posts.edit route.

If you'd like to override the URL for a specific column, or instead run an action when a column is clicked, see the columns documentation.

Reordering records

To allow the user to reorder records using drag and drop in your table, you can use the $table->reorderable() method:

use Filament\Tables\Table;

public function table(Table $table): Table
{
return $table
->reorderable('sort');
}

If you're using mass assignment protection on your model, you will also need to add the sort attribute to the $fillable array there.

When making the table reorderable, a new button will be available on the table to toggle reordering.

Table with reorderable rows

The reorderable() method accepts the name of a column to store the record order in. If you use something like spatie/eloquent-sortable with an order column such as order_column, you may use this instead:

use Filament\Tables\Table;

public function table(Table $table): Table
{
return $table
->reorderable('order_column');
}

Enabling pagination while reordering

Pagination will be disabled in reorder mode to allow you to move records between pages. It is generally bad UX to re-enable pagination while reordering, but if you are sure then you can use $table->paginatedWhileReordering():

use Filament\Tables\Table;

public function table(Table $table): Table
{
return $table
->paginatedWhileReordering();
}

Customizing the reordering trigger action

To customize the reordering trigger button, you may use the reorderRecordsTriggerAction() method, passing a closure that returns an action. All methods that are available to customize action trigger buttons can be used:

use Filament\Tables\Actions\Action;
use Filament\Tables\Table;

public function table(Table $table): Table
{
return $table
->reorderRecordsTriggerAction(
fn (Action $action, bool $isReordering) => $action
->button()
->label($isReordering ? 'Disable reordering' : 'Enable reordering'),
);
}
Table with reorderable rows and a custom trigger action

Polling table content

You may poll table content so that it refreshes at a set interval, using the $table->poll() method:

use Filament\Tables\Table;

public function table(Table $table): Table
{
return $table
->poll('10s');
}

Deferring loading

Tables with lots of data might take a while to load, in which case you can load the table data asynchronously using the deferLoading() method:

use Filament\Tables\Table;

public function table(Table $table): Table
{
return $table
->deferLoading();
}

Searching records with Laravel Scout

While Filament doesn't provide a direct integration with Laravel Scout, you may override methods to integrate it.

Use a whereIn() clause to filter the query for Scout results:

use App\Models\Post;
use Illuminate\Database\Eloquent\Builder;

protected function applySearchToTableQuery(Builder $query): Builder
{
$this->applyColumnSearchesToTableQuery($query);

if (filled($search = $this->getTableSearch())) {
$query->whereIn('id', Post::search($search)->keys());
}

return $query;
}

Scout uses this whereIn() method to retrieve results internally, so there is no performance penalty for using it.

The applyColumnSearchesToTableQuery() method ensures that searching individual columns will still work. You can replace that method with your own implementation if you want to use Scout for those search inputs as well.

Query string

Livewire ships with a feature to store data in the URL's query string, to access across requests.

With Filament, this allows you to store your table's filters, sort, search and pagination state in the URL.

To store the filters, sorting, and search state of your table in the query string:

use Livewire\Attributes\Url;

#[Url]
public bool $isTableReordering = false;

/**
* @var array<string, mixed> | null
*/
#[Url]
public ?array $tableFilters = null;

#[Url]
public ?string $tableGrouping = null;

#[Url]
public ?string $tableGroupingDirection = null;

/**
* @var ?string
*/
#[Url]
public $tableSearch = '';

#[Url]
public ?string $tableSortColumn = null;

#[Url]
public ?string $tableSortDirection = null;

Styling table rows

Striped table rows

To enable striped table rows, you can use the striped() method:

use Filament\Tables\Table;

public function table(Table $table): Table
{
return $table
->striped();
}
Table with striped rows

Custom row classes

You may want to conditionally style rows based on the record data. This can be achieved by specifying a string or array of CSS classes to be applied to the row using the $table->recordClasses() method:

use Closure;
use Filament\Tables\Table;
use Illuminate\Database\Eloquent\Model;

public function table(Table $table): Table
{
return $table
->recordClasses(fn (Model $record) => match ($record->status) {
'draft' => 'opacity-30',
'reviewing' => 'border-s-2 border-orange-600 dark:border-orange-300',
'published' => 'border-s-2 border-green-600 dark:border-green-300',
default => null,
});
}

These classes are not automatically compiled by Tailwind CSS. If you want to apply Tailwind CSS classes that are not already used in Blade files, you should update your content configuration in tailwind.config.js to also scan for classes inside your directory: './app/Filament/**/*.php'

Global settings

To customize the default configuration that is used for all tables, you can call the static configureUsing() method from the boot() method of a service provider. The function will be run for each table that gets created:

use Filament\Tables\Enums\FiltersLayout;
use Filament\Tables\Table;

Table::configureUsing(function (Table $table): void {
$table
->filtersLayout(FiltersLayout::AboveContentCollapsible)
->paginationPageOptions([10, 25, 50]);
});