Filament v3 Custom Table Columns Deep Dive | Mohamed Said [ ![Mohamed Said](https://cdn.msaied.com/01KT78WE565VEMM3PSNQAAB0MH.png) Mohamed Said Laravel Backend Engineer ](https://msaied.com) [ Home ](https://msaied.com) [ Projects ](https://msaied.com/projects) [ Articles ](https://msaied.com/articles) [ Certificates ](https://msaied.com/certificates) [ Contact ](https://msaied.com#contact-section) [ ](https://github.com/EG-Mohamed) [ Home ](https://msaied.com) [ Projects ](https://msaied.com/projects) [ Articles ](https://msaied.com/articles) [ Certificates ](https://msaied.com/certificates) [ Contact ](https://msaied.com#contact-section) [ home ](https://msaied.com) [ articles ](https://msaied.com/articles) Filament v3 Custom Table Columns: Rendering Complex UI Without Hacks On this page 1. [ Why Custom Columns Exist ](#why-custom-columns-exist) 2. [ Anatomy of a Custom Column ](#anatomy-of-a-custom-column) 3. [ The Blade View ](#the-blade-view) 4. [ Registering and Using the Column ](#registering-and-using-the-column) 5. [ Sortable and Searchable Support ](#sortable-and-searchable-support) 6. [ Testing the Column ](#testing-the-column) 7. [ Key Takeaways ](#key-takeaways) ![Filament v3 Custom Table Columns: Rendering Complex UI Without Hacks](https://cdn.msaied.com/611/05db05ad084cfdd9a407ff7707dcfaf7.png) #filament #laravel #livewire #alpine Filament v3 Custom Table Columns: Rendering Complex UI Without Hacks ====================================================================== 30 Aug 2026 3 min read ![Mohamed Said](https://cdn.msaied.com/01KT78WE565VEMM3PSNQAAB0MJ.jpg) Mohamed Said Table of contents 1. [ 01 Why Custom Columns Exist ](#why-custom-columns-exist) 2. [ 02 Anatomy of a Custom Column ](#anatomy-of-a-custom-column) 3. [ 03 The Blade View ](#the-blade-view) 4. [ 04 Registering and Using the Column ](#registering-and-using-the-column) 5. [ 05 Sortable and Searchable Support ](#sortable-and-searchable-support) 6. [ 06 Testing the Column ](#testing-the-column) 7. [ 07 Key Takeaways ](#key-takeaways) Why Custom Columns Exist ------------------------ Filament ships with `TextColumn`, `BadgeColumn`, `ImageColumn`, and a handful of others. They cover 80% of cases. The remaining 20% — sparklines, inline progress bars, multi-line compound cells, real-time status indicators — require you to either abuse `TextColumn::make()->html()` or build a proper custom column. Abusing `->html()` works until it doesn't: no Alpine state, no scoped CSS, no reusability, and a security surface you have to sanitise manually. Building a real column takes about 30 minutes and pays dividends across every resource that needs it. Anatomy of a Custom Column -------------------------- A Filament table column is a PHP class that extends `Filament\Tables\Columns\Column` and pairs with a Blade view. The framework calls `->render()` on each column per row, passing a `$state` variable derived from the record. ```php // app/Tables/Columns/StatusBadgeColumn.php namespace App\Tables\Columns; use Filament\Tables\Columns\Column; class StatusBadgeColumn extends Column { protected string $view = 'tables.columns.status-badge'; protected \Closure|string|null $colorCallback = null; public function color(\Closure|string $color): static { $this->colorCallback = $color; return $this; } public function getColor(): string { $state = $this->getState(); return $this->evaluate($this->colorCallback, [ 'state' => $state, 'record' => $this->getRecord(), ]) ?? 'gray'; } } ``` The `evaluate()` helper is inherited from `Filament\Support\Concerns\EvaluatesClosures`. It resolves both plain values and closures, injecting named parameters from the array you pass — exactly how core columns work internally. The Blade View -------------- ```blade {{-- resources/views/tables/columns/status-badge.blade.php --}} @php $color = $getColumn()->getColor(); $state = $getState(); @endphp {{ $state }} Status: {{ $state }} ``` Filament injects `$getColumn()`, `$getState()`, `$getRecord()`, and `$livewire` into every column view automatically. You never need to pass them manually. Registering and Using the Column -------------------------------- No service provider registration is needed. Import and use directly: ```php use App\Tables\Columns\StatusBadgeColumn; public static function table(Table $table): Table { return $table->columns([ TextColumn::make('name'), StatusBadgeColumn::make('status') ->color(fn (string $state): string => match ($state) { 'active' => 'green', 'banned' => 'red', 'pending' => 'yellow', default => 'gray', }), ]); } ``` Sortable and Searchable Support ------------------------------- Custom columns inherit `->sortable()` and `->searchable()` for free because those traits operate on the underlying database column name, not the view. If your column name maps 1:1 to a database column, they just work. For computed or joined columns, pass an explicit sort callback: ```php StatusBadgeColumn::make('status') ->sortable(query: fn ($query, $direction) => $query->orderBy('status', $direction) ) ``` Testing the Column ------------------ ```php it('renders the correct badge color for banned users', function () { $user = User::factory()->create(['status' => 'banned']); livewire(UserResource\Pages\ListUsers::class) ->assertCanSeeTableRecords([$user]) ->assertTableColumnStateSet('status', 'banned', record: $user); }); ``` Filament's Pest helpers assert on state, not rendered HTML, which keeps tests resilient to styling changes. Key Takeaways ------------- - Extend `Column`, declare `$view`, and use `evaluate()` for closure-or-value properties. - Blade views receive `$getColumn()`, `$getState()`, and `$getRecord()` automatically. - Alpine.js works inside column views without any extra wiring. - `->sortable()` and `->searchable()` are inherited; override with callbacks for computed columns. - Test column state, not rendered markup, for durable assertions. Found this useful? [ ](https://twitter.com/intent/tweet?url=https%3A%2F%2Fmsaied.com%2Farticles%2Ffilament-v3-custom-table-columns-rendering-complex-ui-without-hacks&text=Filament+v3+Custom+Table+Columns%3A+Rendering+Complex+UI+Without+Hacks) [ ](https://www.linkedin.com/sharing/share-offsite/?url=https%3A%2F%2Fmsaied.com%2Farticles%2Ffilament-v3-custom-table-columns-rendering-complex-ui-without-hacks) Frequently Asked Questions ---------------------------- 3 questions Q01 Can I use Livewire actions inside a custom column view? Not directly — column views are rendered per-row inside a Livewire component but are not themselves Livewire components. Use Alpine.js for client-side interactivity, or wire up a Filament table action triggered from a button inside the column view using `wire:click` pointing to the parent Livewire component's action. Q02 How do I pass additional data from the record to the column view? Add a method to your column class that calls `$this->getRecord()` or accepts a closure via `evaluate()`. Expose it as a public method and call `$getColumn()->yourMethod()` inside the Blade view. This keeps logic in PHP and the view purely presentational. Q03 Does this approach work in Filament v4? The class-based extension model is similar in v4, but v4 introduces the unified Schema API and some view variable names have changed. The patterns here are specific to v3. For v4, check the official upgrade guide before migrating custom columns. Continue reading More Articles --------------- [ View all ](https://msaied.com/articles) [ ![CQRS Without Event Sourcing: Practical Read/Write Model Separation in Laravel](https://cdn.msaied.com/610/ed0ccf7bb832d7b82f057cb14f506e65.png) laravel cqrs architecture ### CQRS Without Event Sourcing: Practical Read/Write Model Separation in Laravel You don't need event sourcing to benefit from CQRS. This article shows how to split read and write models in a... ![Mohamed Said](https://cdn.msaied.com/01KT78WE565VEMM3PSNQAAB0MJ.jpg) Mohamed Said 30 Aug 2026 4 min read Read ](https://msaied.com/articles/cqrs-without-event-sourcing-practical-readwrite-model-separation-in-laravel) [ ![Laravel AI SDK: Tool-Calling Agents and Conversation Persistence](https://cdn.msaied.com/609/675722df30f32b9b1d547c9b86dce00b.png) laravel ai agents ### Laravel AI SDK: Tool-Calling Agents and Conversation Persistence Build reliable tool-calling AI agents in Laravel using the Prism package, with typed tool definitions, convers... ![Mohamed Said](https://cdn.msaied.com/01KT78WE565VEMM3PSNQAAB0MJ.jpg) Mohamed Said 30 Aug 2026 4 min read Read ](https://msaied.com/articles/laravel-ai-sdk-tool-calling-agents-and-conversation-persistence-3) [ ![Blackfire & Xdebug Profiling in Laravel: Finding Real Bottlenecks](https://cdn.msaied.com/608/26a2b1fe183034ea35445954544f68f1.png) laravel performance profiling ### Blackfire & Xdebug Profiling in Laravel: Finding Real Bottlenecks Stop guessing where your Laravel app is slow. Learn how to use Blackfire and Xdebug profiling together to pinp... ![Mohamed Said](https://cdn.msaied.com/01KT78WE565VEMM3PSNQAAB0MJ.jpg) Mohamed Said 30 Aug 2026 3 min read Read ](https://msaied.com/articles/blackfire-xdebug-profiling-in-laravel-finding-real-bottlenecks-2) [ ![Mohamed Said](https://cdn.msaied.com/01KT78WE565VEMM3PSNQAAB0MH.png) Mohamed Said Laravel Backend Engineer ](https://msaied.com)Senior Backend Engineer specializing in Laravel, scalable SaaS platforms, APIs, and cloud infrastructure. I build secure, high-performance web applications that help businesses grow. Explore - [Home](https://msaied.com) - [Projects](https://msaied.com/projects) - [Articles](https://msaied.com/articles) - [Certificates](https://msaied.com/certificates) - [Contact](https://msaied.com#contact-section) Connect - [ hello@msaied.com ](mailto:hello@msaied.com) - [ +20 109 461 9204 ](tel:+201094619204) © 2026 Mohamed Said. All rights reserved. [ ](https://github.com/EG-Mohamed) [ ](https://www.linkedin.com/in/msaiedm/) [ ](https://wa.me/201094619204) [ ](mailto:hello@msaied.com) [ ](https://drive.google.com/file/u/0/d/1MF20IPRJyzfy32mhEutjL5EpSls0w2Q8/view)