How to Create A Custom Table Action Modal In Laravel Filament?

We already know Laravel Filament provides out of the box actions for view, edit and delete as below:

What if we want to add another custom action modal like below:

Follow the below steps to achieve this:

(Note: Here I am taking an example to create Payment History view modal for a student.)

First, create a blade view file paymentTransactions.blade.php inside the folder resources/views
Place the below content inside the view: (you write your own blade template)
Here in the below blade file the tailwind CSS template is copied from (https://flowbite.com/docs/components/tables/)

@if($studentFeePayment === null)
   <div>No payment record found.</div>
@else
<div class="relative overflow-x-auto">
   <table class="w-full text-sm text-left rtl:text-right text-gray-500 dark:text-gray-400">
       <thead class="text-xs text-gray-700 uppercase bg-gray-50 dark:bg-gray-700 dark:text-gray-400">
       <tr>
           <th scope="col" class="px-6 py-2 rounded-e-lg">
               Date
           </th>
           <th scope="col" class="px-6 py-2">
               Payable Amt.(₹)
           </th>
           <th scope="col" class="px-6 py-2 rounded-e-lg">
               Paid Amt.(₹)
           </th>
           <th scope="col" class="px-6 py-2 rounded-e-lg">
               Due Amt.(₹)
           </th>
           <th scope="col" class="px-6 py-2 rounded-e-lg">
               Pay Mode
           </th>
           <th scope="col" class="px-6 py-2 rounded-e-lg">
               Next Due Date
           </th>
       </tr>
       </thead>
       <tbody>
       @foreach($studentFeePayment->studentFeePaymentTransactions as $paymentTransaction)
           <tr class="bg-white border-b dark:bg-gray-800 dark:border-gray-700">
               <td scope="row" class="px-6 py-2">
                   {{\Carbon\Carbon::parse($paymentTransaction->date)->format('d-M-Y')}}
               </td>
               <td scope="row" class="px-6 py-2">
                   {{$paymentTransaction->payable_amount}}
               </td>
               <td scope="row" class="px-6 py-2">
                   {{$paymentTransaction->paid_amount}}
               </td>
               <td scope="row" class="px-6 py-2">
                   {{$paymentTransaction->due_amount}}
               </td>
               <td scope="row" class="px-6 py-2">
                   {{$paymentTransaction->pay_channel}}
               </td>
               <td scope="row" class="px-6 py-2">
                   {{$paymentTransaction->next_due_date ? \Carbon\Carbon::parse($paymentTransaction->next_due_date)->format('d-M-Y') : null}}
               </td>
           </tr>
       @endforeach

       </tbody>
       <tfoot>
       <tr class="font-semibold text-gray-900 dark:text-white">
           <th scope="row" class="px-6 py-3 text-base">Overall</th>
           <td class="px-6 py-3">{{$studentFeePayment->total_payable_amount}}</td>
           <td class="px-6 py-3">{{$studentFeePayment->paid_amount}}</td>
           <td class="px-6 py-3">{{$studentFeePayment->total_due_amount}}</td>
       </tr>
       </tfoot>
   </table>
</div>
@endif

Now Add the action Payments inside the function table() of StudentResource class.

Here observe that the blade file paymentTransactions.blade.php is calling inside the function modalContent()

public static function table(Table $table): Table
{
   return $table
       ->columns([
           TextColumn::make('code')->label('Student ID')->searchable()->sortable(),
           TextColumn::make('name')->searchable(query: fn(Builder $query, string $search) => $query->where('first_name','like','%'.$search.'%')->orWhere('last_name','like','%'.$search.'%'))->sortable(), // This has problem while searching
       ])->defaultSort('created_at','desc')
       ->actions([\Filament\Tables\Actions\Action::make('Payments')
           ->modalHeading('Payment History')
           ->modalContent(fn(Student $student): View => view('paymentTransactions',['studentFeePayment'=>$student->studentFeePayment]))
           ->modalWidth(MaxWidth::FourExtraLarge)
           ->modalSubmitAction(false),ViewAction::make()->iconButton()->modalWidth(MaxWidth::FourExtraLarge),
           EditAction::make()->iconButton()->modalWidth(MaxWidth::FiveExtraLarge),
           DeleteAction::make()->iconButton()])

How to Create A Custom Table Action Modal In Laravel Filament?

Comments

Leave a Reply Cancel reply