Filament Table: Column Background Color Based on Condition

In Filament table, you may want to highlight some column value with a background color, based on condition. Let's see how we can do that.

For example, you have a list of products and a column for the amount of product left in stock. You want that number to standout when stock is low.

A simple table looks like this:

use Filament\Tables;
use Filament\Tables\Table;
 
public static function table(Table $table): Table
{
    return $table
        ->columns([
            Tables\Columns\TextColumn::make('title'),
            Tables\Columns\TextColumn::make('left_in_stock'),
        ])
        // ...
}

To add background color, we can use the extraAttributes () method on the column and return an array with a key of a class and as a value tailwind class.

public static function table(Table $table): Table
{
    return $table
        ->columns([
            Tables\Columns\TextColumn::make('title'),
            Tables\Columns\TextColumn::make('left_in_stock')
                ->extraAttributes(function (Product $product) { 
                    if ($product->left_in_stock <= 10) {
                        return ['class' => 'bg-danger-300 dark:bg-danger-600'];
                    }
 
                    return [];
                }), 
        ])
        // ...
}

We use a callback to first check if stock is below ten. If it is, we return extra classes. Otherwise, we return an empty array.

If you don't see your added styles, it means Filament doesn't use those Tailwind classes, and you must create a custom theme.