> ## Documentation Index
> Fetch the complete documentation index at: https://filamentphp.com/docs/llms.txt
> Use this file to discover all available pages before exploring further.
# Getting started
export const LaracastsBanner = ({title, description, url, series}) => {
const instructors = {
'building-advanced-components': {
name: 'Dan Harrin',
avatar: 'https://avatars.githubusercontent.com/u/41773797?v=4',
twitter: 'https://twitter.com/danjharrin',
website: 'https://danharrin.com',
github: 'https://github.com/danharrin'
},
'rapid-laravel-development': {
name: 'Kevin McKee',
avatar: 'https://avatars.githubusercontent.com/u/4503765?v=4',
twitter: 'https://twitter.com/iAmKevinMcKee',
website: 'https://kevinmckee.me',
github: 'https://github.com/iAmKevinMcKee'
}
};
const instructor = instructors[series] || instructors['building-advanced-components'];
return
{instructor.name}
Instructor
;
};
export const AutoScreenshot = ({name, alt, version}) => {
const [loaded, setLoaded] = useState(false);
return
setLoaded(true)} className={`rounded-2xl transition-opacity dark:hidden ${loaded ? 'opacity-100' : 'opacity-0'}`} />
setLoaded(true)} className={`hidden rounded-2xl transition-opacity dark:block ${loaded ? 'opacity-100' : 'opacity-0'}`} />
;
};
export const EditOnGitHub = ({version, path}) => {
const url = `https://github.com/filamentphp/filament/edit/${version}/${path}`;
return ;
};
export const Footer = () => {
const sponsorsByTier = JSON.parse(`{
"agency_partner": [
{
"name": "Kirschbaum",
"url": "https://kirschbaumdevelopment.com/solutions/filament-development",
"filename": "kirschbaum.svg"
}
],
"gold": [
{
"name": "Agiledrop",
"url": "https://www.agiledrop.com/laravel?utm_source=filament",
"filename": "agiledrop.svg"
},
{
"name": "Baiz.ai",
"url": "https://baiz.ai",
"filename": "baiz-ai.svg"
},
{
"name": "CMS Max",
"url": "https://cmsmax.com?ref=filamentphp.com",
"filename": "cms-max.svg"
},
{
"name": "Mailtrap",
"url": "https://mailtrap.io/email-sending?utm_source=community&utm_medium=referral&utm_campaign=filament",
"filename": "mailtrap.svg"
},
{
"name": "SerpApi",
"url": "https://serpapi.com/?utm_source=filamentphp",
"filename": "serpapi.svg"
}
]
}`);
function shuffleArray(items) {
const result = [...items];
for (let index = result.length - 1; index > 0; index--) {
const randomIndex = Math.floor(Math.random() * (index + 1));
[result[index], result[randomIndex]] = [result[randomIndex], result[index]];
}
return result;
}
const sponsors = Object.entries(sponsorsByTier).flatMap(([, sponsors]) => shuffleArray(sponsors));
return ;
};
You are currently viewing the documentation for Filament 3.x, which is a previous version of Filament.
Looking for the current stable version? Visit the [5.x documentation](/5.x/tables/columns).
## Overview
Column classes can be found in the `Filament\Tables\Columns` namespace. You can put them inside the `$table->columns()` method:
```php theme={"theme":"gruvbox-dark-hard"}
use Filament\Tables\Table;
public function table(Table $table): Table
{
return $table
->columns([
// ...
]);
}
```
Columns may be created using the static `make()` method, passing its unique name. The name of the column should correspond to a column or accessor on your model. You may use "dot notation" to access columns within relationships.
```php theme={"theme":"gruvbox-dark-hard"}
use Filament\Tables\Columns\TextColumn;
TextColumn::make('title')
TextColumn::make('author.name')
```
## Available columns
Filament ships with two main types of columns - static and editable.
Static columns display data to the user:
* [Text column](./text)
* [Icon column](./icon)
* [Image column](./image)
* [Color column](./color)
Editable columns allow the user to update data in the database without leaving the table:
* [Select column](./select)
* [Toggle column](./toggle)
* [Text input column](./text-input)
* [Checkbox column](./checkbox)
You may also [create your own custom columns](./custom) to display data however you wish.
## 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:
```php theme={"theme":"gruvbox-dark-hard"}
use Filament\Tables\Columns\TextColumn;
TextColumn::make('title')
->label('Post title')
```
Optionally, you can have the label automatically translated [using Laravel's localization features](https://laravel.com/docs/localization) with the `translateLabel()` method:
```php theme={"theme":"gruvbox-dark-hard"}
use Filament\Tables\Columns\TextColumn;
TextColumn::make('title')
->translateLabel() // Equivalent to `label(__('Title'))`
```
## Sorting
Columns may be sortable, by clicking on the column label. To make a column sortable, you must use the `sortable()` method:
```php theme={"theme":"gruvbox-dark-hard"}
use Filament\Tables\Columns\TextColumn;
TextColumn::make('name')
->sortable()
```
If you're using an accessor column, you may pass `sortable()` an array of database columns to sort by:
```php theme={"theme":"gruvbox-dark-hard"}
use Filament\Tables\Columns\TextColumn;
TextColumn::make('full_name')
->sortable(['first_name', 'last_name'])
```
You may customize how the sorting is applied to the Eloquent query using a callback:
```php theme={"theme":"gruvbox-dark-hard"}
use Filament\Tables\Columns\TextColumn;
use Illuminate\Database\Eloquent\Builder;
TextColumn::make('full_name')
->sortable(query: function (Builder $query, string $direction): Builder {
return $query
->orderBy('last_name', $direction)
->orderBy('first_name', $direction);
})
```
## Sorting by default
You may choose to sort a table by default if no other sort is applied. You can use the `defaultSort()` method for this:
```php theme={"theme":"gruvbox-dark-hard"}
use Filament\Tables\Table;
public function table(Table $table): Table
{
return $table
->columns([
// ...
])
->defaultSort('stock', 'desc');
}
```
### Persist sort in session
To persist the sorting in the user's session, use the `persistSortInSession()` method:
```php theme={"theme":"gruvbox-dark-hard"}
use Filament\Tables\Table;
public function table(Table $table): Table
{
return $table
->columns([
// ...
])
->persistSortInSession();
}
```
### Setting a default sort option label
To set a default sort option label, use the `defaultSortOptionLabel()` method:
```php theme={"theme":"gruvbox-dark-hard"}
use Filament\Tables\Table;
public function table(Table $table): Table
{
return $table
->columns([
// ...
])
->defaultSortOptionLabel('Date');
}
```
## Searching
Columns may be searchable by using the text input field in the top right of the table. To make a column searchable, you must use the `searchable()` method:
```php theme={"theme":"gruvbox-dark-hard"}
use Filament\Tables\Columns\TextColumn;
TextColumn::make('name')
->searchable()
```
If you're using an accessor column, you may pass `searchable()` an array of database columns to search within:
```php theme={"theme":"gruvbox-dark-hard"}
use Filament\Tables\Columns\TextColumn;
TextColumn::make('full_name')
->searchable(['first_name', 'last_name'])
```
You may customize how the search is applied to the Eloquent query using a callback:
```php theme={"theme":"gruvbox-dark-hard"}
use Filament\Tables\Columns\TextColumn;
use Illuminate\Database\Eloquent\Builder;
TextColumn::make('full_name')
->searchable(query: function (Builder $query, string $search): Builder {
return $query
->where('first_name', 'like', "%{$search}%")
->orWhere('last_name', 'like', "%{$search}%");
})
```
#### Customizing the table search field placeholder
You may customize the placeholder in the search field using the `searchPlaceholder()` method on the `$table`:
```php theme={"theme":"gruvbox-dark-hard"}
use Filament\Tables\Table;
public static function table(Table $table): Table
{
return $table
->columns([
// ...
])
->searchPlaceholder('Search (ID, Name)');
}
```
### Searching individually
You can choose to enable a per-column search input field using the `isIndividual` parameter:
```php theme={"theme":"gruvbox-dark-hard"}
use Filament\Tables\Columns\TextColumn;
TextColumn::make('name')
->searchable(isIndividual: true)
```
If you use the `isIndividual` parameter, you may still search that column using the main "global" search input field for the entire table.
To disable that functionality while still preserving the individual search functionality, you need the `isGlobal` parameter:
```php theme={"theme":"gruvbox-dark-hard"}
use Filament\Tables\Columns\TextColumn;
TextColumn::make('title')
->searchable(isIndividual: true, isGlobal: false)
```
You may optionally persist the searches in the query string:
```php theme={"theme":"gruvbox-dark-hard"}
use Livewire\Attributes\Url;
/**
* @var array | null>
*/
#[Url]
public array $tableColumnSearches = [];
```
### Customizing the table search debounce
You may customize the debounce time in all table search fields using the `searchDebounce()` method on the `$table`. By default it is set to `500ms`:
```php theme={"theme":"gruvbox-dark-hard"}
use Filament\Tables\Table;
public static function table(Table $table): Table
{
return $table
->columns([
// ...
])
->searchDebounce('750ms');
}
```
### Searching when the input is blurred
Instead of automatically reloading the table contents while the user is typing their search, which is affected by the [debounce](#customizing-the-table-search-debounce) of the search field, you may change the behavior so that the table is only searched when the user blurs the input (tabs or clicks out of it), using the `searchOnBlur()` method:
```php theme={"theme":"gruvbox-dark-hard"}
use Filament\Tables\Table;
public static function table(Table $table): Table
{
return $table
->columns([
// ...
])
->searchOnBlur();
}
```
### Persist search in session
To persist the table or individual column search in the user's session, use the `persistSearchInSession()` or `persistColumnSearchInSession()` method:
```php theme={"theme":"gruvbox-dark-hard"}
use Filament\Tables\Table;
public function table(Table $table): Table
{
return $table
->columns([
// ...
])
->persistSearchInSession()
->persistColumnSearchesInSession();
}
```
## Column 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 behavior of the action:
```php theme={"theme":"gruvbox-dark-hard"}
use Filament\Tables\Columns\TextColumn;
TextColumn::make('title')
->action(function (Post $record): void {
$this->dispatch('open-post-edit-modal', post: $record->getKey());
})
```
#### Action modals
You may open [action modals](../actions#modals) by passing in an `Action` object to the `action()` method:
```php theme={"theme":"gruvbox-dark-hard"}
use Filament\Tables\Actions\Action;
use Filament\Tables\Columns\TextColumn;
TextColumn::make('title')
->action(
Action::make('select')
->requiresConfirmation()
->action(function (Post $record): void {
$this->dispatch('select-post', post: $record->getKey());
}),
)
```
Action objects passed into the `action()` method must have a unique name to distinguish it from other actions within the table.
### 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:
```php theme={"theme":"gruvbox-dark-hard"}
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:
```php theme={"theme":"gruvbox-dark-hard"}
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 columns with an empty state, you may use the `default()` method. This method will treat the default state as if it were real, so columns like [image](./image) or [color](./color) will display the default image or color.
```php theme={"theme":"gruvbox-dark-hard"}
use Filament\Tables\Columns\TextColumn;
TextColumn::make('description')
->default('No description.')
```
## Adding placeholder text if a column is empty
Sometimes you may want to display placeholder text for columns with an empty state, which is styled as a lighter gray text. This differs from the [default value](#setting-a-default-value), as the placeholder is always text and not treated as if it were real state.
```php theme={"theme":"gruvbox-dark-hard"}
use Filament\Tables\Columns\TextColumn;
TextColumn::make('description')
->placeholder('No description.')
```
## Hiding columns
To hide a column conditionally, you may use the `hidden()` and `visible()` methods, whichever you prefer:
```php theme={"theme":"gruvbox-dark-hard"}
use Filament\Tables\Columns\TextColumn;
TextColumn::make('role')
->hidden(! auth()->user()->isAdmin())
// or
TextColumn::make('role')
->visible(auth()->user()->isAdmin())
```
### Toggling column visibility
Users may hide or show columns themselves in the table. To make a column toggleable, use the `toggleable()` method:
```php theme={"theme":"gruvbox-dark-hard"}
use Filament\Tables\Columns\TextColumn;
TextColumn::make('email')
->toggleable()
```
#### Making toggleable columns hidden by default
By default, toggleable columns are visible. To make them hidden instead:
```php theme={"theme":"gruvbox-dark-hard"}
use Filament\Tables\Columns\TextColumn;
TextColumn::make('id')
->toggleable(isToggledHiddenByDefault: true)
```
#### Customizing the toggle columns dropdown trigger action
To customize the toggle dropdown trigger button, you may use the `toggleColumnsTriggerAction()` method, passing a closure that returns an action. All methods that are available to [customize action trigger buttons](../../actions/trigger-button) can be used:
```php theme={"theme":"gruvbox-dark-hard"}
use Filament\Tables\Actions\Action;
use Filament\Tables\Table;
public function table(Table $table): Table
{
return $table
->filters([
// ...
])
->toggleColumnsTriggerAction(
fn (Action $action) => $action
->button()
->label('Toggle columns'),
);
}
```
## Calculated state
Sometimes you need to calculate the state of a column, instead of directly reading it from a database column.
By passing a callback function to the `state()` method, you can customize the returned state for that column based on the `$record`:
```php theme={"theme":"gruvbox-dark-hard"}
use App\Models\Order;
use Filament\Tables\Columns\TextColumn;
TextColumn::make('amount_including_vat')
->state(function (Order $record): float {
return $record->amount * (1 + $record->vat_rate);
})
```
## Tooltips
You may specify a tooltip to display when you hover over a cell:
```php theme={"theme":"gruvbox-dark-hard"}
use Filament\Tables\Columns\TextColumn;
TextColumn::make('title')
->tooltip('Title')
```
This method also accepts a closure that can access the current table record:
```php theme={"theme":"gruvbox-dark-hard"}
use Filament\Tables\Columns\TextColumn;
use Illuminate\Database\Eloquent\Model;
TextColumn::make('title')
->tooltip(fn (Model $record): string => "By {$record->author->name}")
```
## Horizontally aligning column content
Table columns are aligned to the start (left in LTR interfaces or right in RTL interfaces) by default. You may change the alignment using the `alignment()` method, and passing it `Alignment::Start`, `Alignment::Center`, `Alignment::End` or `Alignment::Justify` options:
```php theme={"theme":"gruvbox-dark-hard"}
use Filament\Support\Enums\Alignment;
use Filament\Tables\Columns\TextColumn;
TextColumn::make('email')
->alignment(Alignment::End)
```
Alternatively, you may use shorthand methods like `alignEnd()`:
```php theme={"theme":"gruvbox-dark-hard"}
use Filament\Tables\Columns\TextColumn;
TextColumn::make('name')
->alignEnd()
```
## Vertically aligning column content
Table column content is vertically centered by default. You may change the vertical alignment using the `verticalAlignment()` method, and passing it `VerticalAlignment::Start`, `VerticalAlignment::Center` or `VerticalAlignment::End` options:
```php theme={"theme":"gruvbox-dark-hard"}
use Filament\Support\Enums\VerticalAlignment;
use Filament\Tables\Columns\TextColumn;
TextColumn::make('name')
->verticalAlignment(VerticalAlignment::Start)
```
Alternatively, you may use shorthand methods like `verticallyAlignStart()`:
```php theme={"theme":"gruvbox-dark-hard"}
use Filament\Support\Enums\VerticalAlignment;
use Filament\Tables\Columns\TextColumn;
TextColumn::make('name')
->verticallyAlignStart()
```
## Allowing column headers to wrap
By default, column headers will not wrap onto multiple lines, if they need more space. You may allow them to wrap using the `wrapHeader()` method:
```php theme={"theme":"gruvbox-dark-hard"}
use Filament\Tables\Columns\TextColumn;
TextColumn::make('name')
->wrapHeader()
```
## Controlling the width of columns
By default, columns will take up as much space as they need. You may allow some columns to consume more space than others by using the `grow()` method:
```php theme={"theme":"gruvbox-dark-hard"}
use Filament\Tables\Columns\TextColumn;
TextColumn::make('name')
->grow()
```
Alternatively, you can define a width for the column, which is passed to the header cell using the `style` attribute, so you can use any valid CSS value:
```php theme={"theme":"gruvbox-dark-hard"}
use Filament\Tables\Columns\IconColumn;
IconColumn::make('is_paid')
->label('Paid')
->boolean()
->width('1%')
```
## Grouping columns
You group multiple columns together underneath a single heading using a `ColumnGroup` object:
```php theme={"theme":"gruvbox-dark-hard"}
use Filament\Tables\Columns\ColumnGroup;
use Filament\Tables\Columns\IconColumn;
use Filament\Tables\Columns\TextColumn;
use Filament\Tables\Table;
public function table(Table $table): Table
{
return $table
->columns([
TextColumn::make('title'),
TextColumn::make('slug'),
ColumnGroup::make('Visibility', [
TextColumn::make('status'),
IconColumn::make('is_featured'),
]),
TextColumn::make('author.name'),
]);
}
```
The first argument is the label of the group, and the second is an array of column objects that belong to that group.
You can also control the group header [alignment](#horizontally-aligning-column-content) and [wrapping](#allowing-column-headers-to-wrap) on the `ColumnGroup` object. To improve the multi-line fluency of the API, you can chain the `columns()` onto the object instead of passing it as the second argument:
```php theme={"theme":"gruvbox-dark-hard"}
use Filament\Support\Enums\Alignment;
use Filament\Tables\Columns\ColumnGroup;
ColumnGroup::make('Website visibility')
->columns([
// ...
])
->alignment(Alignment::Center)
->wrapHeader()
```
## Custom attributes
The HTML of columns can be customized, by passing an array of `extraAttributes()`:
```php theme={"theme":"gruvbox-dark-hard"}
use Filament\Tables\Columns\TextColumn;
TextColumn::make('slug')
->extraAttributes(['class' => 'bg-gray-200'])
```
These get merged onto the outer `` element of each cell in that column.
## Global settings
If you wish to change the default behavior of all columns globally, then you can call the static `configureUsing()` method inside a service provider's `boot()` method, to which you pass a Closure to modify the columns using. For example, if you wish to make all columns [`searchable()`](#searching) and [`toggleable()`](#toggling-column-visibility), you can do it like so:
```php theme={"theme":"gruvbox-dark-hard"}
use Filament\Tables\Columns\Column;
Column::configureUsing(function (Column $column): void {
$column
->toggleable()
->searchable();
});
```
Additionally, you can call this code on specific column types as well:
```php theme={"theme":"gruvbox-dark-hard"}
use Filament\Tables\Columns\TextColumn;
TextColumn::configureUsing(function (TextColumn $column): void {
$column
->toggleable()
->searchable();
});
```
Of course, you are still able to overwrite this on each column individually:
```php theme={"theme":"gruvbox-dark-hard"}
use Filament\Tables\Columns\TextColumn;
TextColumn::make('name')
->toggleable(false)
```
)}
Your logo here