Skip to main content

Table Actions: Row / Bulk / Header

Premium
6:15

Text Version of the Lesson

In the process of while we're building simple tables, you got already familiar with three types of actions:

  • Edit/Delete buttons in a column
  • Create a button on top
  • Multi-checkbox Bulk Actions on top-left

In this lesson, we will look at how to create custom actions for all those cases and more.

Edit/Delete + Extra Buttons

Let's try to add another button to the Orders table, like "Mark as Complete," which would require confirmation and would change the status of the order.

Migration:

Schema::table('orders', function (Blueprint $table) {
    $table->boolean('is_completed')->default(false);
});

Also, we make it fillable:

app/Models/Order.php:

class Order extends Model
{
    use HasFactory;
 
    protected $fillable = [
        'user_id',
        'product_id',
        'price',
        'is_completed', 
    ];

Now, here's what action we can add to the table:

app/Filament/Resources/OrderResource.php:

return $table
    ->columns([
        // ...
    ])
    ->actions([
        Tables\Actions\EditAction::make(),
        Tables\Actions\Action::make('Mark Completed') 
            ->requiresConfirmation()
            ->icon('heroicon-o-check-badge')
            ->hidden(fn (Order $record) => $record->is_completed)
            ->action(fn (Order $record) => $record->update(['is_completed' => true])), 
    ])

Here's the visual result:

Pretty sure that the code above is self-explanatory, but here are...

The Full Lesson is Only for Premium Members

Want to access all of our courses? (30 h 09 min)

You also get:

55 courses
Premium tutorials
Access to repositories
Private Discord
Get Premium for $129/year or $29/month

Already a member? Login here

Comments & Discussion

D
dengguansheng ✓ Link copied!

So, How to HIDE the default "New order" button on the top-right corner?

D
dengguansheng ✓ Link copied!

I get it！Comment out the line of method "getHeaderActions" in file ListOrders.php.

PK
Povilas Korop ✓ Link copied!

Yes, I cover that in the later lesson :)

A
alin ✓ Link copied!

How to position the New order button, from headerActions, to the left? I did exactly like in the tutorial but i get it on the right.

T
Tobe ✓ Link copied!

Hi Povilas,

I get the following error when I perform the bulk action: App\Filament\Resources\OrderResource::App\Filament\Resources{closure}(): Argument #1 ($records) must be of type App\Filament\Resources\Collection, Illuminate\Database\Eloquent\Collection given, called in /Users/tobias/Sites/filament-

even when I manually reference: App\Filament\Resources\Collection,

what could it cause ?

N
Nerijus ✓ Link copied!

Without code can't help

MS
Mike Scott ✓ Link copied!

Actually you can help without seeing the code, because the clues are right there in the exception message ;)

Look at what it says: a Collection of type Illuminate\Database\Eloquent\Collection has been passed to the closure, but the closure's first argument is required to be a Collection of type App\Filament\Resources\Collection.

So the most likely explanation is that you've defined the closure parameter as Collection $record and in your uses clause at the top of your resource, Collection is defined as use App\Filament\Resources\Collection;.

Therefore, either change this to use Illuminate\Database\Eloquent\Collection or specify the fully-qualified name in the closure parameter definition: Illuminate\Database\Eloquent\Collection $record.

If you choose to change the use clause, you may find that the other Collection type is used elsewhere in your resource. In that case, you can alias the Eloquent collection by: use App\Filament\Resources\Collection as EloquentCollection; then use EloquentCollection $record as the closure parameter.

J
Joe ✓ Link copied!

I'm sure there's a perfectly good explanation for this, but if the error just said (paraphrasing) that it had been given App\Filament\Resources\Collection but that it really wanted Illuminate\Database\Eloquent\Collection then it'd be a lot easier to debug.

Perhaps it's just me, but the way that error reads, it seems like it's received Illuminate\Database\Eloquent\Collection but wants App\Filament\Resources\Collection

Putting aside for the moment that there's actually no such thing as App\Filament\Resources\Collection it is still quite confusing.

But as I said above, I suspect there's a very sensible explanation as to why it has to be like this. So any additional pointers you can provide about how to properly read and understand this type of error message in the future would be really useful. Perhaps there's a key point or concept that one needs to grasp first to make it obvious?

R
RicLeP ✓ Link copied!

Can I make a model action load PayPal or Braintree’s (that’s all that is supported where I live) JS API to take a payment.

Or to simplify the request - can the modal load some JS which returns a response that performs the action and closes the modal?

J
Joe ✓ Link copied!

I suppose this would be as good a place as any to ask this question: When following these instructions and making the "Mark Completed" button, why is there such a long delay between pressing the button and the confirmation dialogue appearing?

From pressing the button to seeing the confirmation dialog, I'm waiting about 1-2 seconds. Yet when the confirmation dialogue finally appears, debugbar shows just 120ms.

PK
Povilas Korop ✓ Link copied!

Debugbar actually IS the reason of slowness.

Watch this video for more details.

J
Joe ✓ Link copied!

Ahhh.... yes, that's funny. And, also, makes perfect sense :-)

We'd Love Your Feedback

Tell us what you like or what we can improve

Feel free to share anything you like or dislike about this page or the platform in general.