Fine‑tuning FilamentPHP Resource Tables: Inline Editing and Custom Pagination

Problem: Editing records quickly while keeping list performance under control

When managing a list of blog posts in FilamentPHP, you often need two things at once: the ability to change a title or author directly from the table (so users don’t have to open a separate edit page), and control over how many rows are loaded at a time to avoid slowing down the page on large datasets. Filament gives you both features out of the box, but wiring them together correctly requires a few deliberate steps.

Thesis

By enabling inline editing on specific fields, customizing the pagination selector, and eager‑loading relationships, you can get a responsive, editable table without sacrificing performance. The trade‑off is a slightly larger HTML payload and a dependency on Livewire for the edit‑in‑place behavior.

1. Enable inline editing on a field

Filament turns any table column into a Livewire‑powered form when you call ->inlineLabel() (or ->edit()) on the field definition. The cell becomes clickable, opens a small form, and saves via a PATCH request when the user submits.

use Filament\Resources\Resource;
use Filament\Resources\Components\Field;
use Filament\Tables\Columns\TextColumn;
use Filament\Tables\Columns\RelationshipColumn;

class PostResource extends Resource
{
    protected static ?string $model = \App\Models\Post::class;

    public static function table(Table $table): Table
    {
        return $table
            ->columns([
                TextColumn::make('title')
                    ->label('Title')
                    ->inlineLabel(), // enables inline editing
                RelationshipColumn::make('author.name')
                    ->label('Author')
                    ->inlineLabel(), // edit the author’s name inline
                TextColumn::make('published_at')
                    ->label('Published')
                    ->dateTime(),
            ])
            ->paginate([10, 25, 50]); // custom pagination selector (see next section)
            ->modifyQueryUsing(function ($query) {
                // eager‑load the author to prevent N+1 when editing inline
                return $query->with(['author']);
            });
    }
}

Clicking a title or author cell now opens a form; submitting sends a PATCH to /admin/resources/posts/{id} with the updated attribute.

2. Customize pagination controls

The paginate() helper accepts an array of page sizes. Filament renders a dropdown that lets users switch between 10, 25, or 50 rows per page. You can tailor this array to balance usability and server load.

->paginate([10, 25, 50, 100]) // adds a 100‑row option for power users

If you expect very high traffic, consider limiting the array to smaller values or caching the pagination view, because each option adds extra HTML to the response.

3. Worked example: Post resource with inline editing and custom pagination

Putting the pieces together, a typical PostResource might look like this:

?php

namespace App\Filament\Resources;

use App\Models\Post;
use Filament\Resources\Resource;
use Filament\Resources\Components\Field;
use Filament\Tables\Columns\TextColumn;
use Filament\Tables\Columns\RelationshipColumn;
use Filament\Tables\Table;

class PostResource extends Resource
{
    protected static ?string $model = Post::class;

    public static function table(Table $table): Table
    {
        return $table
            ->columns([
                TextColumn::make('title')
                    ->label('Title')
                    ->inlineLabel(),
                RelationshipColumn::make('author.name')
                    ->label('Author')
                    ->inlineLabel(),
                TextColumn::make('published_at')
                    ->label('Published')
                    ->dateTime(),
            ])
            ->paginate([10, 25, 50]) // page‑size selector
            ->modifyQueryUsing(fn ($q) => $q->with(['author']));
    }

    // optional: form, etc.
}

When a user changes the page size from the dropdown, Filament sends a request with the new per_page parameter, and the table refreshes via Livewire, preserving any inline edit state that hasn’t been submitted.

Trade‑offs and limitations

• Livewire dependency: Inline editing relies on Livewire components. If you disable Livewire or use a non‑Livewire stack, the ->inlineLabel() fields will remain plain text.
• HTML payload: Each additional pagination option adds a few dozen bytes of markup. For sites with millions of page views, consider trimming the array or caching the pagination view.
• Eager loading: Forgetting to add modifyQueryUsing can cause N+1 queries when editing relationship columns inline, degrading performance on large tables.

Actionable closing

1. Add ->inlineLabel() (or ->edit()) to any column you want editable in the table.
2. Choose a pagination array that matches your traffic profile; start with [10, 25, 50] and adjust based on latency measurements.
3. Always eager‑load relationships that appear in inline‑editable columns using modifyQueryUsing.
4. Verify the implementation:
   1. Open the resource table in the browser, inspect the <table> element – it should have class filament-table and the pagination controls should contain filament-pagination.
   2. Change the page size from the dropdown and watch the network tab: only a single request for the new page of records should appear (check with Laravel Debugbar or Telescope).
   3. Click a title or author cell, edit the value, and submit. Confirm a PATCH request is sent to the resource endpoint with the updated field.

With these steps you get a fast, editable list that scales gracefully as your data grows.