title: Text column

import Aside from "@components/Aside.astro" import AutoScreenshot from "@components/AutoScreenshot.astro" import UtilityInjection from "@components/UtilityInjection.astro"

Introduction

Text columns display simple text:

use Filament\Tables\Columns\TextColumn;

TextColumn::make('title')

Customizing the color

You may set a color for the text:

use Filament\Tables\Columns\TextColumn;

TextColumn::make('status')
    ->color('primary')

<UtilityInjection set="tableColumns" version="5.x">As well as allowing a static value, the color() method also accepts a function to dynamically calculate it. You can inject various utilities into the function as parameters.</UtilityInjection>

Adding an icon

Text columns may also have an icon:

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

TextColumn::make('email')
    ->icon(Heroicon::Envelope)

<UtilityInjection set="tableColumns" version="5.x">The icon() method also accepts a function to dynamically calculate the icon. You can inject various utilities into the function as parameters.</UtilityInjection>

You may set the position of an icon using iconPosition():

use Filament\Tables\Columns\TextColumn;
use Filament\Support\Enums\IconPosition;
use Filament\Support\Icons\Heroicon;

TextColumn::make('email')
    ->icon(Heroicon::Envelope)
    ->iconPosition(IconPosition::After) // `IconPosition::Before` or `IconPosition::After`

<UtilityInjection set="tableColumns" version="5.x">The iconPosition() method also accepts a function to dynamically calculate the icon position. You can inject various utilities into the function as parameters.</UtilityInjection>

The icon color defaults to the text color, but you may customize the icon color separately using iconColor():

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

TextColumn::make('email')
    ->icon(Heroicon::Envelope)
    ->iconColor('primary')

<UtilityInjection set="tableColumns" version="5.x">The iconColor() method also accepts a function to dynamically calculate the icon color. You can inject various utilities into the function as parameters.</UtilityInjection>

Displaying as a "badge"

By default, text is quite plain and has no background color. You can make it appear as a "badge" instead using the badge() method. A great use case for this is with statuses, where may want to display a badge with a color that matches the status:

use Filament\Tables\Columns\TextColumn;

TextColumn::make('status')
    ->badge()
    ->color(fn (string $state): string => match ($state) {
        'draft' => 'gray',
        'reviewing' => 'warning',
        'published' => 'success',
        'rejected' => 'danger',
    })

You may add other things to the badge, like an icon.

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

use Filament\Tables\Columns\TextColumn;

TextColumn::make('status')
    ->badge(FeatureFlag::active())

<UtilityInjection set="tableColumns" version="5.x">As well as allowing a static value, the badge() method also accepts a function to dynamically calculate it. You can inject various utilities into the function as parameters.</UtilityInjection>

Formatting

When using a text column, you may want the actual outputted text in the UI to differ from the raw state of the column, which is often automatically retrieved from an Eloquent model. Formatting the state allows you to preserve the integrity of the raw data while also allowing it to be presented in a more user-friendly way.

To format the state of a text column without changing the state itself, you can use the formatStateUsing() method. This method accepts a function that takes the state as an argument and returns the formatted state:

use Filament\Tables\Columns\TextColumn;

TextColumn::make('status')
    ->formatStateUsing(fn (string $state): string => __("statuses.{$state}"))

In this case, the status column in the database might contain values like draft, reviewing, published, or rejected, but the formatted state will be the translated version of these values.

<UtilityInjection set="tableColumns" version="5.x">The function passed to formatStateUsing() can inject various utilities as parameters.</UtilityInjection>

Date formatting

Instead of passing a function to formatStateUsing(), you may use the date(), dateTime(), and time() methods to format the column's state using PHP date formatting tokens:

use Filament\Tables\Columns\TextColumn;

TextColumn::make('created_at')
    ->date()

TextColumn::make('created_at')
    ->dateTime()

TextColumn::make('created_at')
    ->time()

You may customize the date format by passing a custom format string to the date(), dateTime(), or time() method. You may use any PHP date formatting tokens:

use Filament\Tables\Columns\TextColumn;

TextColumn::make('created_at')
    ->date('M j, Y')
    
TextColumn::make('created_at')
    ->dateTime('M j, Y H:i:s')
    
TextColumn::make('created_at')
    ->time('H:i:s')

<UtilityInjection set="tableColumns" version="5.x">As well as allowing static values, the date(), dateTime(), and time() methods also accept a function to dynamically calculate the format. You can inject various utilities into the function as parameters.</UtilityInjection>

Date formatting using Carbon macro formats

You may use also the isoDate(), isoDateTime(), and isoTime() methods to format the column's state using Carbon's macro-formats:

use Filament\Tables\Columns\TextColumn;

TextColumn::make('created_at')
    ->isoDate()

TextColumn::make('created_at')
    ->isoDateTime()

TextColumn::make('created_at')
    ->isoTime()

You may customize the date format by passing a custom macro format string to the isoDate(), isoDateTime(), or isoTime() method. You may use any Carbon's macro-formats:

use Filament\Tables\Columns\TextColumn;

TextColumn::make('created_at')
    ->isoDate('L')

TextColumn::make('created_at')
    ->isoDateTime('LLL')

TextColumn::make('created_at')
    ->isoTime('LT')

<UtilityInjection set="tableColumns" version="5.x">As well as allowing static values, the isoDate(), isoDateTime(), and isoTime() methods also accept a function to dynamically calculate the format. You can inject various utilities into the function as parameters.</UtilityInjection>

Relative date formatting

You may use the since() method to format the column's state using Carbon's diffForHumans():

use Filament\Tables\Columns\TextColumn;

TextColumn::make('created_at')
    ->since()

Displaying a formatting date in a tooltip

Additionally, you can use the dateTooltip(), dateTimeTooltip(), timeTooltip(), isoDateTooltip(), isoDateTimeTooltip(), isoTime(), isoTimeTooltip(), or sinceTooltip() method to display a formatted date in a tooltip, often to provide extra information:

use Filament\Tables\Columns\TextColumn;

TextColumn::make('created_at')
    ->since()
    ->dateTooltip() // Accepts a custom PHP date formatting string

TextColumn::make('created_at')
    ->since()
    ->dateTimeTooltip() // Accepts a custom PHP date formatting string

TextColumn::make('created_at')
    ->since()
    ->timeTooltip() // Accepts a custom PHP date formatting string

TextColumn::make('created_at')
    ->since()
    ->isoDateTooltip() // Accepts a custom Carbon macro format string

TextColumn::make('created_at')
    ->since()
    ->isoDateTimeTooltip() // Accepts a custom Carbon macro format string

TextColumn::make('created_at')
    ->since()
    ->isoTimeTooltip() // Accepts a custom Carbon macro format string

TextColumn::make('created_at')
    ->dateTime()
    ->sinceTooltip()

Setting the timezone for date formatting

Each of the date formatting methods listed above also accepts a timezone argument, which allows you to convert the time set in the state to a different timezone:

use Filament\Tables\Columns\TextColumn;

TextColumn::make('created_at')
    ->dateTime(timezone: 'America/New_York')

You can also pass a timezone to the timezone() method of the column to apply a timezone to all date-time formatting methods at once:

use Filament\Tables\Columns\TextColumn;

TextColumn::make('created_at')
    ->timezone('America/New_York')
    ->dateTime()

<UtilityInjection set="tableColumns" version="5.x">As well as allowing static values, the timezone() method also accepts a function to dynamically calculate the timezone. You can inject various utilities into the function as parameters.</UtilityInjection>

If you do not pass a timezone() to the column, it will use Filament's default timezone. You can set Filament's default timezone using the FilamentTimezone::set() method in the boot() method of a service provider such as AppServiceProvider:

use Filament\Support\Facades\FilamentTimezone;

public function boot(): void
{
    FilamentTimezone::set('America/New_York');
}

This is useful if you want to set a default timezone for all text columns in your application. It is also used in other places where timezones are used in Filament.

Number formatting

Instead of passing a function to formatStateUsing(), you can use the numeric() method to format a column as a number:

use Filament\Tables\Columns\TextColumn;

TextColumn::make('stock')
    ->numeric()

If you would like to customize the number of decimal places used to format the number with, you can use the decimalPlaces argument:

use Filament\Tables\Columns\TextColumn;

TextColumn::make('stock')
    ->numeric(decimalPlaces: 0)

<UtilityInjection set="tableColumns" version="5.x">As well as allowing static values, the decimalPlaces argument also accepts a function to dynamically calculate it. You can inject various utilities into the function as parameters.</UtilityInjection>

By default, your app's locale will be used to format the number suitably. If you would like to customize the locale used, you can pass it to the locale argument:

use Filament\Tables\Columns\TextColumn;

TextColumn::make('stock')
    ->numeric(locale: 'nl')

<UtilityInjection set="tableColumns" version="5.x">As well as allowing static values, the locale argument also accepts a function to dynamically calculate it. You can inject various utilities into the function as parameters.</UtilityInjection>

Money formatting

Instead of passing a function to formatStateUsing(), you can use the money() method to easily format amounts of money, in any currency:

use Filament\Tables\Columns\TextColumn;

TextColumn::make('price')
    ->money('EUR')

<UtilityInjection set="tableColumns" version="5.x">As well as allowing static values, the money() method also accepts a function to dynamically calculate it. You can inject various utilities into the function as parameters.</UtilityInjection>

There is also a divideBy argument for money() that allows you to divide the original value by a number before formatting it. This could be useful if your database stores the price in cents, for example:

use Filament\Tables\Columns\TextColumn;

TextColumn::make('price')
    ->money('EUR', divideBy: 100)

<UtilityInjection set="tableColumns" version="5.x">As well as allowing static values, the divideBy argument also accepts a function to dynamically calculate it. You can inject various utilities into the function as parameters.</UtilityInjection>

By default, your app's locale will be used to format the money suitably. If you would like to customize the locale used, you can pass it to the locale argument:

use Filament\Tables\Columns\TextColumn;

TextColumn::make('price')
    ->money('EUR', locale: 'nl')

If you would like to customize the number of decimal places used to format the number with, you can use the decimalPlaces argument:

use Filament\Tables\Columns\TextColumn;

TextColumn::make('price')
    ->money('EUR', decimalPlaces: 3)

Rendering Markdown

If your column value is Markdown, you may render it using markdown():

use Filament\Tables\Columns\TextColumn;

TextColumn::make('description')
    ->markdown()

Optionally, you may pass a boolean value to control if the text should be rendered as Markdown or not:

use Filament\Tables\Columns\TextColumn;

TextColumn::make('description')
    ->markdown(FeatureFlag::active())

<UtilityInjection set="tableColumns" version="5.x">As well as allowing a static value, the markdown() method also accepts a function to dynamically calculate it. You can inject various utilities into the function as parameters.</UtilityInjection>

Rendering HTML

If your column value is HTML, you may render it using html():

use Filament\Tables\Columns\TextColumn;

TextColumn::make('description')
    ->html()

Optionally, you may pass a boolean value to control if the text should be rendered as HTML or not:

use Filament\Tables\Columns\TextColumn;

TextColumn::make('description')
    ->html(FeatureFlag::active())

<UtilityInjection set="tableColumns" version="5.x">As well as allowing a static value, the html() method also accepts a function to dynamically calculate it. You can inject various utilities into the function as parameters.</UtilityInjection>

Rendering raw HTML without sanitization

If you use this method, then the HTML will be sanitized to remove any potentially unsafe content before it is rendered. If you'd like to opt out of this behavior, you can wrap the HTML in an HtmlString object by formatting it:

use Filament\Tables\Columns\TextColumn;
use Illuminate\Support\HtmlString;

TextColumn::make('description')
    ->formatStateUsing(fn (string $state): HtmlString => new HtmlString($state))

Alternatively, you can return a view() object from the formatStateUsing() method, which will also not be sanitized:

use Filament\Tables\Columns\TextColumn;
use Illuminate\Contracts\View\View;

TextColumn::make('description')
    ->formatStateUsing(fn (string $state): View => view(
        'filament.tables.columns.description-column-content',
        ['state' => $state],
    ))

Displaying a description

Descriptions may be used to easily render additional text above or below the column contents.

You can display a description below the contents of a text column using the description() method:

use Filament\Tables\Columns\TextColumn;

TextColumn::make('title')
    ->description(fn (Post $record): string => $record->description)

<UtilityInjection set="tableColumns" version="5.x">The function passed to description() can inject various utilities as parameters.</UtilityInjection>

By default, the description is displayed below the main text, but you can move it using 'above' as the second parameter:

use Filament\Tables\Columns\TextColumn;

TextColumn::make('title')
    ->description(fn (Post $record): string => $record->description, position: 'above')

Listing multiple values

Multiple values can be rendered in a text column if its state is an array. This can happen if you are using an array cast on an Eloquent attribute, an Eloquent relationship with multiple results, or if you have passed an array to the state() method. If there are multiple values inside your text column, they will be comma-separated. You may use the listWithLineBreaks() method to display them on new lines instead:

use Filament\Tables\Columns\TextColumn;

TextColumn::make('authors.name')
    ->listWithLineBreaks()

Optionally, you may pass a boolean value to control if the text should have line breaks between each item or not:

use Filament\Tables\Columns\TextColumn;

TextColumn::make('authors.name')
    ->listWithLineBreaks(FeatureFlag::active())

<UtilityInjection set="tableColumns" version="5.x">As well as allowing a static value, the listWithLineBreaks() method also accepts a function to dynamically calculate it. You can inject various utilities into the function as parameters.</UtilityInjection>

Adding bullet points to the list

You may add a bullet point to each list item using the bulleted() method:

use Filament\Tables\Columns\TextColumn;

TextColumn::make('authors.name')
    ->bulleted()

Optionally, you may pass a boolean value to control if the text should have bullet points or not:

use Filament\Tables\Columns\TextColumn;

TextColumn::make('authors.name')
    ->bulleted(FeatureFlag::active())

<UtilityInjection set="tableColumns" version="5.x">As well as allowing a static value, the bulleted() method also accepts a function to dynamically calculate it. You can inject various utilities into the function as parameters.</UtilityInjection>

Limiting the number of values in the list

You can limit the number of values in the list using the limitList() method:

use Filament\Tables\Columns\TextColumn;

TextColumn::make('authors.name')
    ->listWithLineBreaks()
    ->limitList(3)

<UtilityInjection set="tableColumns" version="5.x">As well as allowing a static value, the limitList() method also accepts a function to dynamically calculate it. You can inject various utilities into the function as parameters.</UtilityInjection>

Expanding the limited list

You can allow the limited items to be expanded and collapsed, using the expandableLimitedList() method:

use Filament\Tables\Columns\TextColumn;

TextColumn::make('authors.name')
    ->listWithLineBreaks()
    ->limitList(3)
    ->expandableLimitedList()

Optionally, you may pass a b.....

Tables Laravel Package