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

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.

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....