Color column

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.

Allowing the color to be copied to the clipboard

You may make the color copyable, such that clicking on the preview copies the CSS value 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\ColorColumn;

ColorColumn::make('color')
    ->copyable()
    ->copyMessage('Color code 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\ColorColumn;

ColorColumn::make('color')
    ->copyable()
    ->copyableState(fn (string $state): string => "Color: {$state}")

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

use App\Models\Post;
use Filament\Tables\Columns\ColorColumn;

ColorColumn::make('color')
    ->copyable()
    ->copyableState(fn (Post $record): string => "Color: {$record->color}")

Wrapping multiple color blocks

Color blocks can be set to wrap if they can’t fit on one line, by setting wrap():

use Filament\Tables\Columns\ColorColumn;

ColorColumn::make('color')
    ->wrap()

Note: 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.

Panels

Tables

Forms

Infolists

Actions

Notifications

Widgets

Core concepts

Overview

Allowing the color to be copied to the clipboard

Customizing the text that is copied to the clipboard

Wrapping multiple color blocks

​Overview

​Allowing the color to be copied to the clipboard

​Customizing the text that is copied to the clipboard

​Wrapping multiple color blocks

Overview

Allowing the color to be copied to the clipboard

Customizing the text that is copied to the clipboard

Wrapping multiple color blocks