Filament Table Builder has dozens of ways how to customize column values. In this lesson, I will touch on the most commonly used ones.
Filament has a general concept of a "Badge", I personally call it a "Tag", which is just a visual representation of a text/number surrounded by a border.
Let's take a look at it by just adding ->badge() to two columns in our Products table: status and tags.
return $table ->columns([ Tables\Columns\TextColumn::make('name'), Tables\Columns\TextColumn::make('price'), Tables\Columns\TextColumn::make('status') ->badge(), Tables\Columns\TextColumn::make('category.name'), Tables\Columns\TextColumn::make('tags.name') ->badge(), ])Here's the visual result:
As you can see, Filament automatically wraps the text as a "badge". Not only does it work for a simple TextColumn, but also, in the case of the belongsToMany relationship, it shows multiple badges instead of a comma-separated text.
You can also specify different colors for different badge values.
Tables\Columns\TextColumn::make('status') ->badge() ->color(fn (string $state): string => match ($state) { 'in stock' => 'primary', 'sold out' => 'danger', 'coming soon' => 'info', }),Here's how it looks now:
You can choose the colors from these options:
You would often want some text to act as a link to another section or page. For example, the Product "Category" column could link to the Edit Category page or to a page of Products filtered by that Category.
For that, you can add the ->url() method to your column.
Tables\Columns\TextColumn::make('category.name') ->url(fn (Product $product): string => CategoryResource::getUrl('edit', ['record' => $product->category_id])),Notice: to be honest, I prefer the short PHP functions syntax only if the line of code is actually short. In this case, for readability, I would choose this:
Tables\Columns\TextColumn::make('category.name') ->url(function (Product $product): string { return CategoryResource::getUrl('edit', [ 'record' => $product->category_id ]); }),And then, clicking on the category name would lead to the page something like /admin/categories/1/edit or similar. In our project, we don't have the page for Category Edit, as we generated that resource as --simple, so this was just an illustrative example.
As you can see, you can get the URL to any of the Filament Resources pages with the method getUrl():
CategoryResource::getUrl();: returns /admin/categories
CategoryResource::getUrl('create');: returns /admin/categories/create
CategoryResource::getUrl('edit', ['record' => 1]);: returns /admin/categories/1/edit
By default, Filament is trying to "guess" the column name in the header of the table from the field name, just putting the Title Case:
TextColumn::make('name') -> "Name"TextColumn::make('category.name') -> "Category"TextColumn::make('tags.name') -> "Tags"But you can easily override it just by adding ->label() to the chained methods.
Tables\Columns\TextColumn::make('category.name') ->label('Category name'),Here's the visual result:
Also, you can specify a different alignment than the default "left". Again, it's as easy as adding a method to the chain:
Tables\Columns\TextColumn::make('price') ->sortable() ->money('usd') ->getStateUsing(function (Product $record): float { return $record->price / 100; }) ->alignEnd(), 
Shorter methods for each possible alignment:
Or, you can use a longer syntax with one standard method and specific Enum constants for the alignments:
use Filament\Support\Enums\Alignment; // ...Tables\Columns\TextColumn::make('price') ->alignment(Alignment::End)If you want to show a timestamp field like created_at, you may choose which part to show: full date and time, only date, or "x days ago".
Just pick one of the methods to attach to the chain with the optional format parameter:
Tables\Columns\TextColumn::make('created_at') ->dateTime(),
Tables\Columns\TextColumn::make('created_at') ->dateTime('m/d/Y H:i'),
Tables\Columns\TextColumn::make('created_at') ->date(),
// This will run "diffForHumans" under the hoodTables\Columns\TextColumn::make('created_at') ->since(),
These are just a few typical customizations of the table columns. For more examples and methods, please refer to the official documentation.