How to Make a Filament Table Column Both Clickable and Copyable

In Filament, TextColumn is one of the most powerful table column types. You can make it clickable with ->url() or copyable with ->copyable(). But what if you want both behaviors in the same column?

• Clicking the text → navigate to the order page.
• Clicking the icon → copy the order number.

By default, copyable() overrides url(), so you can’t use them together.

Here’s a neat hack I used recently to solve this.

The Problem

Tables\Columns\TextColumn::make('id')
    ->url(fn (Order $record) => url("/orders/{$record->id}"))
    ->icon('heroicon-m-clipboard')
    ->copyable();

Looks good, but in practice:

• If you add copyable(), the whole column becomes copy-only.
• If you keep url(), the icon is just decorative.

We need a way to tell Filament:
 👉 Text = link
👉 Icon = copy

The Hack with extraAttributes()

TextColumn has an extraAttributes() method that lets you attach AlpineJS to the rendered column. We can use event delegation:

• Detect if the click is on the <svg> icon → copy to clipboard.
• Otherwise, fall back to navigating to the URL.

Here’s the working code:

Tables\Columns\TextColumn::make('id')
    ->label('Order')
    ->formatStateUsing(fn ($state, Order $record) => $record->number)
    ->description(fn (Order $record) => $record->user->number)
    ->sortable()
    ->url(fn (Order $record) => url("/orders/{$record->id}"))
    ->icon('heroicon-m-clipboard')
    ->iconPosition(\Filament\Tables\Columns\TextColumn\IconPosition::After)
    ->iconColor('gray')
    ->extraAttributes(fn (Order $record) => [
        'x-data' => '{}',
        'x-on:click.prevent' => "
            if (\$event.target.closest('svg')) {
                navigator.clipboard.writeText('{$record->number}');
                \$tooltip('Copied to clipboard', { timeout: 1500 });
            } else {
                window.location.href = '/orders/{$record->id}';
            }
        ",
    ]);

The Result

• ✅ Clicking the order number takes you to the order page.
• ✅ Clicking the clipboard icon copies the order number and shows a tooltip: “Copied to clipboard”.
• ✅ Keeps all the benefits of TextColumn — sortable, searchable, description, etc.