Column Formatting: Badges, URLs, Labels, Alignment, Dates

Video Version of the Lesson

[Only for premium members]

Link to the repository

[Only for premium members]

Text Version of the Lesson

Filament Table Builder has dozens of ways how to customize column values. In this lesson, I will touch on the most commonly used ones.

Show as Tags/Badges

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. In our case, we use Enum class, so we can do it directly in the Enum:

app/Enums/ProductStatusEnum.php:

use Filament\Support\Contracts\HasLabel;
use Filament\Support\Contracts\HasColor; 
 
enum ProductStatusEnum: string implements HasLabel 
enum ProductStatusEnum: string implements HasLabel, HasColor 
{
    case IN_STOCK = 'In Stock';
    case SOLD_OUT = 'Sold Out';
    case COMING_SOON = 'Coming Soon';
 
    public function getLabel(): ?string
    {
        return $this->value;
    }
 
    public function getColor(): ?string 
    {
        return match ($this) {
            self::IN_STOCK => 'primary',
            self::SOLD_OUT => 'danger',
            self::COMING_SOON => 'info',
        };
    } 
}

Here's how it looks now:

You can choose the colors from these...