How to display the sum of total amount for selected records with bulk action?

Hello,
I am struggling to find a way to show the sum from the amounts column when I select the rows using the bulkaction.
I want to show the total sum: $1000 like this besides the text 10 records selected just above the table.
Please let me know how can I do that?
Thank you so much.

Solution

@98.dev I got it to work

I added these values in the amounts column

TextColumn::make("amount")
                    ->prefix("$")

                    ->extraAttributes(function ($record) {
                        return [
                            'data-record-id' => $record->id,
                            'data-amount' => $record->amount, // or the column you want to sum
                        ];
                    })
                    ->sortable(),

TextColumn::make("amount")
                    ->prefix("$")

                    ->extraAttributes(function ($record) {
                        return [
                            'data-record-id' => $record->id,
                            'data-amount' => $record->amount, // or the column you want to sum
                        ];
                    })
                    ->sortable(),

TextColumn::make("amount")
                    ->prefix("$")

                    ->extraAttributes(function ($record) {
                        return [
                            'data-record-id' => $record->id,
                            'data-amount' => $record->amount, // or the column you want to sum
                        ];
                    })
                    ->sortable(),

TextColumn::make("amount")
                    ->prefix("$")

                    ->extraAttributes(function ($record) {
                        return [
                            'data-record-id' => $record->id,
                            'data-amount' => $record->amount, // or the column you want to sum
                        ];
                    })
                    ->sortable(),

then added thsi in ManageDriverPayments.php file

public function booted(): void
    {
        FilamentView::registerRenderHook(
            TablesRenderHook::SELECTION_INDICATOR_ACTIONS_BEFORE,
            fn() => view('components.driver-payment-selected-total-sum'),
            scopes: static::class
        );
    }

public function booted(): void
    {
        FilamentView::registerRenderHook(
            TablesRenderHook::SELECTION_INDICATOR_ACTIONS_BEFORE,
            fn() => view('components.driver-payment-selected-total-sum'),
            scopes: static::class
        );
    }

public function booted(): void
    {
        FilamentView::registerRenderHook(
            TablesRenderHook::SELECTION_INDICATOR_ACTIONS_BEFORE,
            fn() => view('components.driver-payment-selected-total-sum'),
            scopes: static::class
        );
    }

public function booted(): void
    {
        FilamentView::registerRenderHook(
            TablesRenderHook::SELECTION_INDICATOR_ACTIONS_BEFORE,
            fn() => view('components.driver-payment-selected-total-sum'),
            scopes: static::class
        );
    }

and then finally added this in driver-payment-selected-total-sum.php

<div
    x-data="{
        sum: 0,
        updateSum() {
            this.sum = selectedRecords.reduce((total, id) => {
                const row = document.querySelector(`[data-record-id='${id}']`);
                return total + (row ? Number(row.dataset.amount) : 0);
            }, 0);
        }
    }"
    x-effect="updateSum()"
    x-show="selectedRecords.length > 0"
    class="px-4 py-2 bg-gray-100 rounded-md dark:bg-gray-800">
    <p class="text-sm text-gray-700 dark:text-gray-300" style="color:green; font-weight:bold;">
        Total Sum: $<span x-text="sum.toFixed(2)"></span>
    </p>
</div>

<div
    x-data="{
        sum: 0,
        updateSum() {
            this.sum = selectedRecords.reduce((total, id) => {
                const row = document.querySelector(`[data-record-id='${id}']`);
                return total + (row ? Number(row.dataset.amount) : 0);
            }, 0);
        }
    }"
    x-effect="updateSum()"
    x-show="selectedRecords.length > 0"
    class="px-4 py-2 bg-gray-100 rounded-md dark:bg-gray-800">
    <p class="text-sm text-gray-700 dark:text-gray-300" style="color:green; font-weight:bold;">
        Total Sum: $<span x-text="sum.toFixed(2)"></span>
    </p>
</div>

<div
    x-data="{
        sum: 0,
        updateSum() {
            this.sum = selectedRecords.reduce((total, id) => {
                const row = document.querySelector(`[data-record-id='${id}']`);
                return total + (row ? Number(row.dataset.amount) : 0);
            }, 0);
        }
    }"
    x-effect="updateSum()"
    x-show="selectedRecords.length > 0"
    class="px-4 py-2 bg-gray-100 rounded-md dark:bg-gray-800">
    <p class="text-sm text-gray-700 dark:text-gray-300" style="color:green; font-weight:bold;">
        Total Sum: $<span x-text="sum.toFixed(2)"></span>
    </p>
</div>

<div
    x-data="{
        sum: 0,
        updateSum() {
            this.sum = selectedRecords.reduce((total, id) => {
                const row = document.querySelector(`[data-record-id='${id}']`);
                return total + (row ? Number(row.dataset.amount) : 0);
            }, 0);
        }
    }"
    x-effect="updateSum()"
    x-show="selectedRecords.length > 0"
    class="px-4 py-2 bg-gray-100 rounded-md dark:bg-gray-800">
    <p class="text-sm text-gray-700 dark:text-gray-300" style="color:green; font-weight:bold;">
        Total Sum: $<span x-text="sum.toFixed(2)"></span>
    </p>
</div>

and it works great.

Jump to solution

How to display the sum of total amount for selected records with bulk action?

Similar Threads

Similar Threads

Similar Threads