Documentation

• A Toggle Icon Column for Filament
  • Installation
  • Usage
    • Customizing the icon
    • Customizing the size
    • Customizing the color
    • Customizing the hover color
    • Other options
  • Other Filament Plugins

#A Toggle Icon Column for Filament

While developing Filament Filter Sets, a premium plugin that lets you save your existing filters into one easily accessible filter set, I needed a toggleable icon column to give users an easy way to see the status of their filter sets and interact with them as well. Out of this, Toggle Icon Column was born.

Toggle Icon Column is a mashup of Filament's interactive Toggle Column and the Icon Column allowing an icon to be toggled on or off in a table, with different icons and colors representing its different states.

It should be noted that Filament's current Toggle Column is a more obvious and intuitive UX for most people and even supports icons in the toggle button. However, for some, like myself, Toggle Icon Column will give you a great way to add some visual distinction to your tables.

#Installation

You can install the package via composer:

composer require archilex/filament-toggle-icon-column

Optionally, you can publish the views using

php artisan vendor:publish --tag="filament-toggle-icon-column-views"

#Usage

use Archilex\ToggleIconColumn\Columns\ToggleIconColumn;
 
return $table
    ->columns([
        ToggleIconColumn::make('is_active'),
    ]);

#Customizing the icon

You may customize the icon representing each state. Icons are the name of a Blade component present. By default, Heroicons v1 are installed:

use Archilex\ToggleIconColumn\Columns\ToggleIconColumn;
 
ToggleIconColumn::make('is_locked')
    ->onIcon('heroicon-s-lock-open')
    ->offIcon('heroicon-o-lock-closed')

#Customizing the size

The default icon size is lg, but you may customize the size to be either xs, sm, md, lg or xl:

use Archilex\ToggleIconColumn\Columns\ToggleIconColumn;
 
ToggleIconColumn::make('is_locked')
    ->size('xl')

#Customizing the color

You may customize the icon color representing the on or off state. These may be either primary, secondary, success, warning, danger, or secondary:

use Archilex\ToggleIconColumn\Columns\ToggleIconColumn;
 
ToggleIconColumn::make('is_locked')
    ->onColor('primary')
    ->offColor('secondary')

#Customizing the hover color

By default the hover color will be the inverse of the on/off colors. These may also be either primary, secondary, success, warning, danger, or secondary.

use Archilex\ToggleIconColumn\Columns\ToggleIconColumn;
 
ToggleIconColumn::make('is_locked')
    ->hoverColor('success')

For further customization you can call a Closure.

use Archilex\ToggleIconColumn\Columns\ToggleIconColumn;
 
ToggleIconColumn::make('is_locked')
    ->hoverColor(fn (Model $record) => $record->is_locked ? 'text-gray-300' : 'text-success-500'),

#Other options

As ToggleIconColumn extends Filament's Column class, most other methods are available as well such as:

use Archilex\ToggleIconColumn\Columns\ToggleIconColumn;
 
ToggleIconColumn::make('is_bookmarked')
    ->label('Bookmark status')
    ->translateLabel()
    ->alignCenter()
    ->disabled(fn () => ! auth()->user()->isAdmin())
    ->tooltip(fn (Model $record) => $record->is_bookmarked ? 'Unbookmark' : 'Bookmark')
    ->sortable()

#Other Filament Plugins

Check out my other Filament Plugins:

• Filter Sets: Save your filters, search query, column order, and column search queries into easily accessible filter sets
• Stacked Image Column: Display multiple images as a stack in your Filament tables.