Filament: Create Custom Table Column - Progress Bar Example

Filament has many pre-defined Table columns, but what if you want to create your own custom one? This tutorial will show you how.

Let's say we want to show a nice progress bar in a table. So, we have a Model named Level with a progress field with values ranging from 0 to 100 and transform it into this:

Progress Column

Create a custom ProgressColumn component.

php artisan make:table-column ProgressColumn

Update Blade view for this component.


<div class="progress-bar">
<div class="progress-bar-value" style="width: {{ $getState() }}%;">
{{ $getState() }}%

For CSS to work in custom components, create a theme for your project. And follow a few steps.

php artisan make:filament-theme

More information on themes can be found in the official Filament documentation.

Then, add your CSS to the file created by the command.


@import '/vendor/filament/filament/resources/css/theme.css';
@config 'tailwind.config.js';
.progress-bar {
@apply h-4 w-full bg-gray-100 dark:bg-gray-800 rounded-full shadow-inner overflow-hidden
.progress-bar-value {
@apply flex h-full items-center justify-center bg-primary-600 dark:bg-primary-500 rounded-r-full shadow-inner text-xs font-bold text-white;

Now you can use ProgressColumn in all your tables.


use App\Tables\Columns\ProgressColumn;
public static function table(Table $table): Table
return $table

Compile everything by running npm run build and see the result.

Progress Column

If you want more Filament examples, you can find more real-life projects on our

Mehmet Nurullah Sağlam

i think you forgot to add the theme to AdminPanelProvider but hey, great tutorial, thanks!


This tutorial was not really about the creation of Filament theme, rather a custom component. Also, the documentation should have it, which was referenced :)


Thanks! :-)

Like our articles?

Become a Premium Member for $129/year or $29/month
What else you will get:
  • 52 courses (952 lessons, total 46 h 42 min)
  • 77 long-form tutorials (one new every week)
  • access to project repositories
  • access to private Discord

Recent Premium Tutorials