Column Sort, Search and Validate

In this 3-in-1 lesson, let's talk about the most common operations we can do with Filament columns/fields:

• Validating fields
• Sort columns in the table
• Search by table column

I decided to group those into one lesson because they are so easily accomplished in Filament that the lesson will be pretty short, anyway.

Validating Fields in Filament

If you want to add behavior to form fields, you can chain multiple methods to the XxxxxInput::make() method.

One of the most widely used ones would be ->required() for the validation.

return $form
    ->schema([
        Forms\Components\TextInput::make('name')->required(),
        Forms\Components\TextInput::make('price')->required(),
    ]);

Just by adding this, we have this behavior in the create/edit forms: validation error and asterisk sign near the label.

And there are more Filament methods for validation that you can chain together.

Forms\Components\TextInput::make('name')
    ->required()
    ->unique(),

Notice: I start putting those methods on separate lines for better readability.

Some Filament validation methods have extra parameters for convenience. The example above shows the unique() method, and by default the Edit form will not ignore the current record, so it would show a validation error even if you haven't changed anything in the form.

To avoid that, you can add a parameter:

Forms\Components\TextInput::make('name')
    ->required()
    ->unique(ignoreRecord: true),

But those Filament validation methods are just convenient helpers on top of all Laravel validation rules, so in most cases, you would use the Laravel ones. Just add ->rule() or ->rules() and use any of the familiar Laravel rules:

Forms\Components\TextInput::make('price')
    ->required()
    ->rule('numeric'),

And that's all you need to know about validation: just use the same typical Laravel rules, with an optional Filament "syntax sugar" helper on top.

Sort Table Columns

If we continue the logic of chaining various methods to ::make() in Filament, the same applies to the table columns.

To add sorting behavior to any table column, just add ->sortable() at the end.

return $table
    ->columns([
        Tables\Columns\TextColumn::make('name')->sortable(),
        Tables\Columns\TextColumn::make('price')->sortable(),
    ])

This is how the table looks now:

You can click any column and sort the table by column values ascending/descending. Those would be auto-added as parameters in the URL:

You can also specify how the table should be sorted by default. This is done by adding a method defaultSort(), but this time we add it to the $table object, not the columns.

return $table
    ->columns([
        // ...
    ])
    ->defaultSort('price', 'desc') 
    ->filters([
        // ...
    ])
    // ... other methods

Search By Table Column

Remember how we added sortable() for a column to be sortable? So yeah, in the same fashion, you can just add ->searchable().

return $table
    ->columns([
        Tables\Columns\TextColumn::make('name')
            ->sortable()
            ->searchable(), 
        Tables\Columns\TextColumn::make('price')
            ->sortable(),
    ])

Then Filament adds a search bar on the top-right where you can search for values in any columns you specified as searchable.

And the search filtering happens automatically in "live" mode. You don't have to hit Enter or any other button.

Notice. The way Filament fields/columns are configured with method chaining gives a convenient experience of IDE autocomplete when typing. Extremely useful if you're not sure what exactly the method is called.

Now, what if you want the search to be visible at the top of the table column instead of the top-right corner "global" search? The searchable() method has two parameters, to set what "mode" of search to enable.

By default, the parameter values are these:

->searchable(isIndividual: false, isGlobal: true)

But let's switch them around and see what happens:

Tables\Columns\TextColumn::make('name')
    ->sortable()
    ->searchable(isIndividual: true, isGlobal: false),

And now, we see the search input at the top of the column, and we don't see the global search field anymore.

That's it for this lesson. These are just a few examples of how Filament allows you to customize the fields by just adding the chain of methods to the ::make(). You will see that pattern more and more throughout this course as we add more methods for more complex behavior.