Actionable Column Laravel Package

Getting Started

Minimal Setup

1. Install the package:

   composer require shreejan/actionable-column
   

2. Publish assets (if customizing CSS):

   php artisan vendor:publish --provider="Shreejan\ActionableColumn\ActionableColumnServiceProvider" --tag="actionable-column-assets"
   

   (Optional: Create resources/css/actionable-column-custom.css for overrides without publishing.)

3. First use case: Replace a static TextColumn or BadgeColumn with an actionable column in a Filament table:

   use Shreejan\ActionableColumn\Tables\Columns\ActionableColumn;
   use Filament\Actions\Action;
   
   ActionableColumn::make('status')
       ->badge()
       ->color('success')
       ->tapAction(
           Action::make('approve')
               ->label('Approve')
               ->action(fn ($record) => $record->update(['status' => 'approved']))
       )
   

Where to Look First

• README.md: Focus on the Usage section for method signatures and examples.
• Configuration Options: Reference the table for available methods (e.g., clickableColumn(), actionIconColor()).
• Filament Docs: Review Filament Actions for action-specific configurations (e.g., modal, requiresConfirmation).

Implementation Patterns

Core Workflows

1. Basic Actionable Badge

ActionableColumn::make('priority')
    ->badge()
    ->color('danger') // Red for high priority
    ->tapAction(
        Action::make('markUrgent')
            ->label('Mark as Urgent')
            ->action(fn ($record) => $record->update(['priority' => 'high']))
    );

Use when: You need a visual indicator (badge) with a single action (e.g., status, priority).

2. Text with Side-by-Side Action

ActionableColumn::make('name')
    ->actionIcon(Heroicon::PencilSquare)
    ->actionIconColor('primary')
    ->tapAction(
        Action::make('editName')
            ->label('Rename')
            ->modalContent(fn ($record) => view('filament.tables.actions.edit-name', ['record' => $record]))
    );

Use when: The column displays text (e.g., name, title) and needs an action button alongside it.

3. Clickable Column

ActionableColumn::make('title')
    ->clickableColumn()
    ->color('info')
    ->tapAction(
        Action::make('viewDetails')
            ->label('View Details')
            ->url(fn ($record) => route('records.show', $record))
    );

Use when: The entire column should trigger an action (e.g., row-level navigation).

4. Empty State "+ Add" Button

ActionableColumn::make('tags')
    ->actionLabel('Add Tag')
    ->tapAction(
        Action::make('addTag')
            ->label('Add Tag')
            ->form([
                TextInput::make('name')->required(),
            ])
            ->action(fn ($record, array $data) => $record->tags()->attach($data['name']))
    );

Use when: The column is empty, and you want to enable creation directly from the table.

Integration Tips

With Filament Actions

Leverage Filament’s built-in actions for consistency:

use Filament\Actions\DeleteAction;

ActionableColumn::make('status')
    ->badge()
    ->tapAction(
        DeleteAction::make()
            ->label('Deactivate')
            ->action(fn ($record) => $record->update(['active' => false]))
    );

Dynamic Actions

Use closures for dynamic action configurations:

ActionableColumn::make('created_at')
    ->formatStateUsing(fn ($state) => $state->diffForHumans())
    ->tapAction(
        Action::make('revert')
            ->label('Revert Changes')
            ->visible(fn ($record) => $record->revisions_count > 0)
            ->action(fn ($record) => $record->revert())
    );

Combining with Other Columns

Mix ActionableColumn with standard columns in a table:

Table::make(Post::class, [
    Columns\IdColumn::make(),
    ActionableColumn::make('published_at')
        ->badge()
        ->color('success')
        ->tapAction(Action::make('unpublish')),
    Columns\TextColumn::make('title'),
]);

Custom CSS Overrides

Extend styles without modifying published assets:

/* resources/css/actionable-column-custom.css */
.actionable-column-badge {
    @apply bg-indigo-600 text-white;
}
.actionable-column-button {
    @apply text-sm font-medium;
}

Gotchas and Tips

Pitfalls

1. Filament Version Mismatch:

   • The package supports v4 and v5, but action method signatures may differ between versions.
   • Fix: Check the release notes for version-specific changes.

2. CSS Overrides Not Applying:

   • Custom CSS in resources/css/ may not load if Filament’s asset pipeline doesn’t include it.
   • Fix: Ensure the file is referenced in resources/css/app.css:

     @import 'actionable-column-custom';
     

   • Alternatively, set ACTIONABLE_COLUMN_CUSTOM_CSS_PATH in .env:

     ACTIONABLE_COLUMN_CUSTOM_CSS_PATH=resources/css/actionable-column-custom.css
     

3. Action Button Not Showing:

   • If showActionIcon(false) is set or the action is hidden, the button may disappear.
   • Debug: Check ->visible() or ->can() conditions on the action.

4. Clickable Column Conflicts:

   • Using clickableColumn() with other interactive columns (e.g., checkboxes) may cause unintended triggers.
   • Fix: Test row-level interactions or use ->clickableColumn(false) for specific cases.

5. Empty State Logic:

   • The "+ Add" button appears when the column’s value is null or empty. Customize this with:

     ->emptyStateActionLabel(fn ($record) => $record->id ? 'Add Related' : 'Create First')
     

Debugging Tips

1. Inspect Rendered HTML:

   • Use browser dev tools to verify the column structure. Look for:

     <div class="actionable-column">
         <span class="actionable-column-badge">Approved</span>
         <button class="actionable-column-button">...</button>
     </div>
     

2. Check Action Registration:

   • Ensure actions are properly registered in the table’s getActions() method:

     public static function getActions(): array {
         return [
             Action::make('approve')->label('Approve'),
         ];
     }
     

3. Log Action Execution:

   • Add debug logs to action closures to verify data flow:

     ->action(fn ($record, array $data) => {
         \Log::info('Action triggered for record ID:', [$record->id, $data]);
         $record->update($data);
     })
     

4. Clear Cached Views:

   • If styles/actions aren’t updating, clear Filament’s view cache:

     php artisan view:clear
     

Extension Points

1. Custom Action Types:

   • Extend the package to support non-Filament actions by creating a wrapper class:

     class CustomActionableColumn extends ActionableColumn {
         public function tapCustomAction(CustomAction $action) { ... }
     }
     

2. Additional Badge/Text Modes:

   • Add a pill() method for rounded pill-style badges:

     // In ActionableColumn.php
     public function pill(): static {
         $this->view = 'actionable-column::columns.pill';
         return $this;
     }
     

3. Dynamic Icons/Colors:

   • Use a formatActionIconUsing() method to dynamically set icons based on record data:

     ActionableColumn::make('status')
         ->formatActionIconUsing(fn ($record) => match($record->status) {
             'pending' => Heroicon::Clock,
             default => Heroicon::CheckCircle,
         })
     

4. Bulk Action Integration:

   • Extend to support bulk actions by adding a bulkAction() method:

     ActionableColumn::make('status')
         ->bulkAction(
             Action::make('bulkApprove')
                 ->action(fn (Collection $records) => $records->update(['status' => 'approved']))
         )
     

Configuration Quirks

1. Default Values:
   • If no color() is set, the badge/text uses Filament’s default colors (e.g., gray-500 for text).
   • The default action icon is heroicon-o-pencil-square