跳到主要内容
版本:Current

Icon column

Introduction

Icon columns render an icon representing the state of the column:

use Filament\Tables\Columns\IconColumn;
use Filament\Support\Icons\Heroicon;

IconColumn::make('status')
->icon(fn (string $state): string => match ($state) {
'draft' => Heroicon::OutlinedPencil,
'reviewing' => Heroicon::OutlinedClock,
'published' => Heroicon::OutlinedCheckCircle,
})
The icon() method can inject various utilities into the function as parameters.Learn more about utility injection.
UtilityTypeParameterDescription
ColumnFilament\Tables\Columns\Column$columnThe current column instance.
LivewireLivewire\Component$livewireThe Livewire component instance.
Eloquent record?Illuminate\Database\Eloquent\Model$recordThe Eloquent record for the current table row.
Row loopstdClass$rowLoopThe <a href="https://laravel.com/docs/blade#the-loop-variable" target="_blank">row loop</a> object for the current table row.
Statemixed$stateThe current value of the column, based on the current table row.
TableFilament\Tables\Table$tableThe current table instance.
Icon column

Customizing the color

You may change the color of the icon, using the color() method:

use Filament\Tables\Columns\IconColumn;

IconColumn::make('status')
->color('success')

By passing a function to color(), you can customize the color based on the state of the column:

use Filament\Tables\Columns\IconColumn;

IconColumn::make('status')
->color(fn (string $state): string => match ($state) {
'draft' => 'info',
'reviewing' => 'warning',
'published' => 'success',
default => 'gray',
})
The color() method can inject various utilities into the function as parameters.Learn more about utility injection.
UtilityTypeParameterDescription
ColumnFilament\Tables\Columns\Column$columnThe current column instance.
LivewireLivewire\Component$livewireThe Livewire component instance.
Eloquent record?Illuminate\Database\Eloquent\Model$recordThe Eloquent record for the current table row.
Row loopstdClass$rowLoopThe <a href="https://laravel.com/docs/blade#the-loop-variable" target="_blank">row loop</a> object for the current table row.
Statemixed$stateThe current value of the column, based on the current table row.
TableFilament\Tables\Table$tableThe current table instance.
Icon column with color

Customizing the size

The default icon size is IconSize::Large, but you may customize the size to be either IconSize::ExtraSmall, IconSize::Small, IconSize::Medium, IconSize::ExtraLarge or IconSize::TwoExtraLarge:

use Filament\Tables\Columns\IconColumn;
use Filament\Support\Enums\IconSize;

IconColumn::make('status')
->size(IconSize::Medium)
As well as allowing a static value, the size() method also accepts a function to dynamically calculate it. You can inject various utilities into the function as parameters.Learn more about utility injection.
UtilityTypeParameterDescription
ColumnFilament\Tables\Columns\Column$columnThe current column instance.
LivewireLivewire\Component$livewireThe Livewire component instance.
Eloquent record?Illuminate\Database\Eloquent\Model$recordThe Eloquent record for the current table row.
Row loopstdClass$rowLoopThe <a href="https://laravel.com/docs/blade#the-loop-variable" target="_blank">row loop</a> object for the current table row.
Statemixed$stateThe current value of the column, based on the current table row.
TableFilament\Tables\Table$tableThe current table instance.
Medium-sized icon column

Handling booleans

Icon columns can display a check or "X" icon based on the state of the column, either true or false, using the boolean() method:

use Filament\Tables\Columns\IconColumn;

IconColumn::make('is_featured')
->boolean()

If this attribute in the model class is already cast as a bool or boolean, Filament is able to detect this, and you do not need to use boolean() manually.

Icon column to display a boolean

Optionally, you may pass a boolean value to control if the icon should be boolean or not:

use Filament\Tables\Columns\IconColumn;

IconColumn::make('is_featured')
->boolean(FeatureFlag::active())
As well as allowing a static value, the boolean() method also accepts a function to dynamically calculate it. You can inject various utilities into the function as parameters.Learn more about utility injection.
UtilityTypeParameterDescription
ColumnFilament\Tables\Columns\Column$columnThe current column instance.
LivewireLivewire\Component$livewireThe Livewire component instance.
Eloquent record?Illuminate\Database\Eloquent\Model$recordThe Eloquent record for the current table row.
Row loopstdClass$rowLoopThe <a href="https://laravel.com/docs/blade#the-loop-variable" target="_blank">row loop</a> object for the current table row.
Statemixed$stateThe current value of the column, based on the current table row.
TableFilament\Tables\Table$tableThe current table instance.

Customizing the boolean icons

You may customize the icon representing each state:

use Filament\Tables\Columns\IconColumn;
use Filament\Support\Icons\Heroicon;

IconColumn::make('is_featured')
->boolean()
->trueIcon(Heroicon::OutlinedCheckBadge)
->falseIcon(Heroicon::OutlinedXMark)
As well as allowing static values, the trueIcon() and falseIcon() methods also accept functions to dynamically calculate them. You can inject various utilities into the functions as parameters.Learn more about utility injection.
UtilityTypeParameterDescription
ColumnFilament\Tables\Columns\Column$columnThe current column instance.
LivewireLivewire\Component$livewireThe Livewire component instance.
Eloquent record?Illuminate\Database\Eloquent\Model$recordThe Eloquent record for the current table row.
Row loopstdClass$rowLoopThe <a href="https://laravel.com/docs/blade#the-loop-variable" target="_blank">row loop</a> object for the current table row.
Statemixed$stateThe current value of the column, based on the current table row.
TableFilament\Tables\Table$tableThe current table instance.
Icon column to display a boolean with custom icons

Customizing the boolean colors

You may customize the icon color representing each state:

use Filament\Tables\Columns\IconColumn;

IconColumn::make('is_featured')
->boolean()
->trueColor('info')
->falseColor('warning')
As well as allowing static values, the trueColor() and falseColor() methods also accept functions to dynamically calculate them. You can inject various utilities into the functions as parameters.Learn more about utility injection.
UtilityTypeParameterDescription
ColumnFilament\Tables\Columns\Column$columnThe current column instance.
LivewireLivewire\Component$livewireThe Livewire component instance.
Eloquent record?Illuminate\Database\Eloquent\Model$recordThe Eloquent record for the current table row.
Row loopstdClass$rowLoopThe <a href="https://laravel.com/docs/blade#the-loop-variable" target="_blank">row loop</a> object for the current table row.
Statemixed$stateThe current value of the column, based on the current table row.
TableFilament\Tables\Table$tableThe current table instance.
Icon column to display a boolean with custom colors

Wrapping multiple icons

When displaying multiple icons, they can be set to wrap if they can't fit on one line, using wrap():

use Filament\Tables\Columns\IconColumn;

IconColumn::make('icon')
->wrap()

TIP

The "width" for wrapping is affected by the column label, so you may need to use a shorter or hidden label to wrap more tightly.