Columns

Getting started

Column classes can be found in the Filament\Tables\Columns namespace.

They reside within the getTableColumns() method of your Livewire component:

protected function getTableColumns(): array
{
return [
// ...
];
}

Columns may be created using the static make() method, passing its name. The name of the column should correspond to a column or accessor on your model. You may use "dot syntax" to access columns within relationships.

use Filament\Tables\Columns\TextColumn;
 
TextColumn::make('title')
 
TextColumn::make('author.name')

Setting a label

By default, the label of the column, which is displayed in the header of the table, is generated from the name of the column. You may customize this using the label() method:

use Filament\Tables\Columns\TextColumn;
 
TextColumn::make('title')->label('Post title')

Sorting

Columns may be sortable, by clicking on the column label. To make a column sortable, you must use the sortable() method:

use Filament\Tables\Columns\TextColumn;
 
TextColumn::make('title')->sortable()

If you're using an accessor column, you may pass sortable() an array of database columns to sort by:

use Filament\Tables\Columns\TextColumn;
 
TextColumn::make('full_name')->sortable(['first_name', 'last_name'])

Searching

Columns may be searchable, by using the text input in the top right of the table. To make a column searchable, you must use the searchable() method:

use Filament\Tables\Columns\TextColumn;
 
TextColumn::make('title')->searchable()

If you're using an accessor column, you may pass searchable() an array of database columns to search within:

use Filament\Tables\Columns\TextColumn;
 
TextColumn::make('full_name')->searchable(['first_name', 'last_name'])

Cell actions and URLs

When a cell is clicked, you may run an "action", or open a URL.

Running actions

To run an action, you may use the action() method, passing a callback or the name of a Livewire method to run. Each method accepts a $record parameter which you may use to customize the behaviour of the action:

use Filament\Tables\Columns\TextColumn;
 
TextColumn::make('title')
->action(function (Post $record): void {
$this->dispatchBrowserEvent('open-post-edit-modal', [
'post' => $record->getKey(),
]);
})

Opening URLs

To open a URL, you may use the url() method, passing a callback or static URL to open. Callbacks accept a $record parameter which you may use to customize the URL:

use Filament\Tables\Columns\TextColumn;
 
TextColumn::make('title')
->url(fn (Post $record): string => route('posts.edit', ['post' => $record]))

You may also choose to open the URL in a new tab:

use Filament\Tables\Columns\TextColumn;
 
TextColumn::make('title')
->url(fn (Post $record): string => route('posts.edit', ['post' => $record]))
->openUrlInNewTab()

Setting a default value

To set a default value for fields with a null state, you may use the default() method:

use Filament\Tables\Columns\TextColumn;
 
TextColumn::make('title')->default('Untitled')

Responsive layouts

You may choose to show and hide columns based on the responsive breakpoint of the browser. To do this, you may use a visibleFrom() or hiddenFrom() method:

use Filament\Tables\Columns\TextColumn;
 
TextColumn::make('slug')->visibleFrom('md')

Text column

You may use the date() and dateTime() methods to format the column's state using PHP date formatting tokens:

use Filament\Tables\Columns\TextColumn;
 
TextColumn::make('created_at')->dateTime()

The money() method allows you to easily format monetary values, in any currency. This functionality uses akaunting/laravel-money internally:

use Filament\Tables\Columns\TextColumn;
 
TextColumn::make('price')->money('eur')

You may limit() the length of the cell's value:

use Filament\Tables\Columns\TextColumn;
 
TextColumn::make('description')->limit('50')

You may also transform a set of known cell values using the enum() method:

use Filament\Tables\Columns\TextColumn;
 
TextColumn::make('status')->enum([
'draft' => 'Draft',
'reviewing' => 'Reviewing',
'published' => 'Published',
])

You may instead pass a custom formatting callback to formatStateUsing(), which accepts the $state of the cell, and optionally its $record:

use Filament\Tables\Columns\TextColumn;
 
TextColumn::make('status')
->formatStateUsing(fn (string $state): string => __("statuses.{$state}"))

Boolean column

Boolean columns render a check or cross icon representing their state:

use Filament\Tables\Columns\BooleanColumn;
 
BooleanColumn::make('is_featured')

You may customize the icon representing each state. Icons are the name of a Blade component present. By default, Heroicons are installed:

use Filament\Tables\Columns\BooleanColumn;
 
BooleanColumn::make('is_featured')
->trueIcon('heroicon-o-badge-check')
->falseIcon('heroicon-o-x-circle')

You may customize the icon color representing each state. These may be either primary, secondary, success, warning or danger:

use Filament\Tables\Columns\BooleanColumn;
 
BooleanColumn::make('is_featured')
->trueColor('primary')
->falseColor('warning')

Image column

use Filament\Tables\Columns\ImageColumn;
 
ImageColumn::make('header_image')

You may make the image fully rounded(), which is useful for rendering avatars:

use Filament\Tables\Columns\ImageColumn;
 
ImageColumn::make('author.avatar')->rounded()

You may customize the image size by passing a width() and height(), or both with size():

use Filament\Tables\Columns\ImageColumn;
 
ImageColumn::make('header_image')->width(200)
 
ImageColumn::make('header_image')->height(50)
 
ImageColumn::make('author.avatar')->size(40)

By default, the public disk will be used to retrieve images. You may pass a custom disk name to the disk() method:

use Filament\Tables\Columns\ImageColumn;
 
ImageColumn::make('header_image')->disk('s3')

Icon column

Icon columns render a Blade icon component representing their state:

use Filament\Tables\Columns\IconColumn;
 
IconColumn::make('is_featured')
->options([
'heroicon-o-x-circle',
'heroicon-o-pencil' => 'draft',
'heroicon-o-clock' => 'reviewing',
'heroicon-o-check-circle' => 'published',
])

You may also pass a callback to activate an option, accepting the cell's $state:

use Filament\Tables\Columns\IconColumn;
 
IconColumn::make('is_featured')
->options([
'heroicon-o-x-circle',
'heroicon-o-pencil' => fn ($state): bool => $state === 'draft',
'heroicon-o-clock' => fn ($state): bool => $state === 'reviewing',
'heroicon-o-check-circle' => fn ($state): bool => $state === 'published',
])

Icon columns may also have a set of icon colors, using the same syntax. They may be either primary, secondary, success, warning or danger:

use Filament\Tables\Columns\IconColumn;
 
IconColumn::make('is_featured')
->options([
'heroicon-o-x-circle',
'heroicon-o-pencil' => 'draft',
'heroicon-o-clock' => 'reviewing',
'heroicon-o-check-circle' => 'published',
])
->colors([
'secondary',
'danger' => 'draft',
'warning' => 'reviewing',
'success' => 'published',
])

Badge column

Icon columns render a colored badge representing their state. The badge contains the state of the cell. You may use the same formatting methods as for text columns:

use Filament\Tables\Columns\BadgeColumn;
 
BadgeColumn::make('status')
->enum([
'draft' => 'Draft',
'reviewing' => 'Reviewing',
'published' => 'Published',
])

Badges may have a color. It may be either primary, secondary, success, warning or danger:

use Filament\Tables\Columns\BadgeColumn;
 
BadgeColumn::make('status')
->colors([
'secondary',
'danger' => 'draft',
'warning' => 'reviewing',
'success' => 'published',
])

You may instead activate a color using a callback, accepting the cell's $state:

use Filament\Tables\Columns\BadgeColumn;
 
BadgeColumn::make('status')
->colors([
'secondary',
'danger' => fn ($state): bool => $state === 'draft',
'warning' => fn ($state): bool => $state === 'reviewing',
'success' => fn ($state): bool => $state === 'published',
])

View column

You may render a custom view for a cell using the view() method:

use Filament\Tables\Columns\ViewColumn;
 
ViewColumn::make('status')->view('filament.tables.columns.status-switcher')

Inside your view, you may retrieve the state of the cell using the $getState() method:

<div>
{{ $getState() }}
</div>

Building custom columns

You may create your own custom column classes and cell views, which you can reuse across your project, and even release as a plugin to the community.

If you're just creating a simple custom column to use once, you could instead use a view column to render any custom Blade file.

Extend the Filament\Tables\Columns\Column class, and define the $view path of the custom field:

use Filament\Tables\Columns\Column;
 
class StatusSwitcher extends Column
{
protected string $view = 'filament.tables.columns.status-switcher';
}

Inside your view, you may retrieve the state of the cell using the $getState() method:

<div>
{{ $getState() }}
</div>

Still need help? Join our Discord community or open a GitHub discussion

Enjoying Filament?

We are open source at heart. To allow us to build new features, fix bugs, and run the community, we require your financial support.

Sponsor Filament on GitHub