Text column

#Overview

Text columns display simple text from your database:

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

TextColumn::make('title')

#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',
    })
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.

#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)
use Filament\Tables\Columns\TextColumn;

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

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

use Filament\Tables\Columns\TextColumn;
 
TextColumn::make('title')
    ->description(fn (Post $record): string => $record->description, position: 'above')
use Filament\Tables\Columns\TextColumn;

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

#Date formatting

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()
use Filament\Tables\Columns\TextColumn;

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

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()
use Filament\Tables\Columns\TextColumn;

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

#Number formatting

The numeric() method allows you to format a column as a number, using PHP's number_format():

use Filament\Tables\Columns\TextColumn;
 
TextColumn::make('stock')
    ->numeric(
        decimalPlaces: 0,
        decimalSeparator: '.',
        thousandsSeparator: ',',
    )
use Filament\Tables\Columns\TextColumn;

TextColumn::make('stock')
    ->numeric(
        decimalPlaces: 0,
        decimalSeparator: '.',
        thousandsSeparator: ',',
    )

#Currency formatting

The money() method allows you to easily format monetary values, in any currency:

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

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

#Limiting text length

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

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

TextColumn::make('description')
    ->limit(50)

You may also reuse the value that is being passed to limit():

use Filament\Tables\Columns\TextColumn;
 
TextColumn::make('description')
    ->limit(50)
    ->tooltip(function (TextColumn $column): ?string {
        $state = $column->getState();
 
        if (strlen($state) <= $column->getCharacterLimit()) {
            return null;
        }
 
        // Only render the tooltip if the column content exceeds the length limit.
        return $state;
    })
use Filament\Tables\Columns\TextColumn;

TextColumn::make('description')
    ->limit(50)
    ->tooltip(function (TextColumn $column): ?string {
        $state = $column->getState();

        if (strlen($state) <= $column->getCharacterLimit()) {
            return null;
        }

        // Only render the tooltip if the column content exceeds the length limit.
        return $state;
    })

#Limiting word count

You may limit the number of words() displayed in the cell:

use Filament\Tables\Columns\TextColumn;
 
TextColumn::make('description')
    ->words(10)
use Filament\Tables\Columns\TextColumn;

TextColumn::make('description')
    ->words(10)

#Wrapping content

If you'd like your column's content to wrap if it's too long, you may use the wrap() method:

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

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

#Listing multiple values

By default, 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()
use Filament\Tables\Columns\TextColumn;

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

#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')
    ->listWithLineBreaks()
    ->bulleted()
use Filament\Tables\Columns\TextColumn;

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

#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)
use Filament\Tables\Columns\TextColumn;

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

#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()
use Filament\Tables\Columns\TextColumn;

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

Please note that this is only a feature for listWithLineBreaks() or bulleted(), where each item is on its own line.

#Using a list separator

If you want to "explode" a text string from your model into multiple list items, you can do so with the separator() method. This is useful for displaying comma-separated tags as badges, for example:

use Filament\Tables\Columns\TextColumn;
 
TextColumn::make('tags')
    ->badge()
    ->separator(',')
use Filament\Tables\Columns\TextColumn;

TextColumn::make('tags')
    ->badge()
    ->separator(',')

#Rendering HTML

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

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

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

#Rendering Markdown as HTML

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

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

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

#Custom formatting

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}"))
use Filament\Tables\Columns\TextColumn;

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

#Customizing the color

You may set a color for the text, either danger, gray, info, primary, success or warning:

use Filament\Tables\Columns\TextColumn;
 
TextColumn::make('status')
    ->color('primary')
use Filament\Tables\Columns\TextColumn;

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

#Adding an icon

Text columns may also have an icon:

use Filament\Tables\Columns\TextColumn;
 
TextColumn::make('email')
    ->icon('heroicon-m-envelope')
use Filament\Tables\Columns\TextColumn;

TextColumn::make('email')
    ->icon('heroicon-m-envelope')

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

use Filament\Support\Enums\IconPosition;
use Filament\Tables\Columns\TextColumn;
 
TextColumn::make('email')
    ->icon('heroicon-m-envelope')
    ->iconPosition(IconPosition::After) // `IconPosition::Before` or `IconPosition::After`
use Filament\Support\Enums\IconPosition;
use Filament\Tables\Columns\TextColumn;

TextColumn::make('email')
    ->icon('heroicon-m-envelope')
    ->iconPosition(IconPosition::After) // `IconPosition::Before` or `IconPosition::After`

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

use Filament\Tables\Columns\TextColumn;
 
TextColumn::make('email')
    ->icon('heroicon-m-envelope')
    ->iconColor('primary')
use Filament\Tables\Columns\TextColumn;

TextColumn::make('email')
    ->icon('heroicon-m-envelope')
    ->iconColor('primary')

#Customizing the text size

Text columns have small font size by default, but you may change this to TextColumnSize::ExtraSmall, TextColumnSize::Medium, or TextColumnSize::Large.

For instance, you may make the text larger using size(TextColumnSize::Large):

use Filament\Tables\Columns\TextColumn;
 
TextColumn::make('title')
    ->size(TextColumn\TextColumnSize::Large)
use Filament\Tables\Columns\TextColumn;

TextColumn::make('title')
    ->size(TextColumn\TextColumnSize::Large)

#Customizing the font weight

Text columns have regular font weight by default, but you may change this to any of the following options: FontWeight::Thin, FontWeight::ExtraLight, FontWeight::Light, FontWeight::Medium, FontWeight::SemiBold, FontWeight::Bold, FontWeight::ExtraBold or FontWeight::Black.

For instance, you may make the font bold using weight(FontWeight::Bold):

use Filament\Support\Enums\FontWeight;
use Filament\Tables\Columns\TextColumn;
 
TextColumn::make('title')
    ->weight(FontWeight::Bold)
use Filament\Support\Enums\FontWeight;
use Filament\Tables\Columns\TextColumn;

TextColumn::make('title')
    ->weight(FontWeight::Bold)

#Customizing the font family

You can change the text font family to any of the following options: FontFamily::Sans, FontFamily::Serif or FontFamily::Mono.

For instance, you may make the font mono using fontFamily(FontFamily::Mono):

use Filament\Support\Enums\FontFamily;
use Filament\Tables\Columns\TextColumn;
 
TextColumn::make('email')
    ->fontFamily(FontFamily::Mono)
use Filament\Support\Enums\FontFamily;
use Filament\Tables\Columns\TextColumn;

TextColumn::make('email')
    ->fontFamily(FontFamily::Mono)

#Allowing the text to be copied to the clipboard

You may make the text copyable, such that clicking on the cell copies the text to the clipboard, and optionally specify a custom confirmation message and duration in milliseconds. This feature only works when SSL is enabled for the app.

use Filament\Tables\Columns\TextColumn;
 
TextColumn::make('email')
    ->copyable()
    ->copyMessage('Email address copied')
    ->copyMessageDuration(1500)
use Filament\Tables\Columns\TextColumn;

TextColumn::make('email')
    ->copyable()
    ->copyMessage('Email address copied')
    ->copyMessageDuration(1500)

#Customizing the text that is copied to the clipboard

You can customize the text that gets copied to the clipboard using the `copyableState() method:

use Filament\Tables\Columns\TextColumn;
 
TextColumn::make('url')
    ->copyable()
    ->copyableState(fn (string $state): string => "URL: {$state}")
use Filament\Tables\Columns\TextColumn;

TextColumn::make('url')
    ->copyable()
    ->copyableState(fn (string $state): string => "URL: {$state}")

In this function, you can access the whole table row with $record:

use App\Models\Post;
use Filament\Tables\Columns\TextColumn;
 
TextColumn::make('url')
    ->copyable()
    ->copyableState(fn (Post $record): string => "URL: {$record->url}")
use App\Models\Post;
use Filament\Tables\Columns\TextColumn;

TextColumn::make('url')
    ->copyable()
    ->copyableState(fn (Post $record): string => "URL: {$record->url}")

#Displaying the row index

You may want a column to contain the number of the current row in the table:

use Filament\Tables\Columns\TextColumn;
use Filament\Tables\Contracts\HasTable;
 
TextColumn::make('index')->state(
    static function (HasTable $livewire, stdClass $rowLoop): string {
        return (string) (
            $rowLoop->iteration +
            ($livewire->getTableRecordsPerPage() * (
                $livewire->getTablePage() - 1
            ))
        );
    }
),
use Filament\Tables\Columns\TextColumn;
use Filament\Tables\Contracts\HasTable;

TextColumn::make('index')->state(
    static function (HasTable $livewire, stdClass $rowLoop): string {
        return (string) (
            $rowLoop->iteration +
            ($livewire->getTableRecordsPerPage() * (
                $livewire->getTablePage() - 1
            ))
        );
    }
),

As $rowLoop is Laravel Blade's $loop object, you can reference all other $loop properties.

As a shortcut, you may use the rowIndex() method:

use Filament\Tables\Columns\TextColumn;
 
TextColumn::make('index')
    ->rowIndex()
use Filament\Tables\Columns\TextColumn;

TextColumn::make('index')
    ->rowIndex()

To start counting from 0 instead of 1, use isFromZero: true:

use Filament\Tables\Columns\TextColumn;
 
TextColumn::make('index')
    ->rowIndex(isFromZero: true)
use Filament\Tables\Columns\TextColumn;

TextColumn::make('index')
    ->rowIndex(isFromZero: true)

Edit on GitHub

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