Clickable row add to bulk select

Alright this is super hacky but I haven't found a better way yet (feel free to point and laugh

). Looking for some advise cause eventually I'd like to reference the selected rows to update a widget values. (I opened a separate help post about that one)

My goal was to change the default behavior on a table row so that when clicked, it simply selects it to be used for a bulk action instead of opening view/edit, etc.

$table
  ->recordClasses('clickable-row')
  ->recordAction(null)

$table
  ->recordClasses('clickable-row')
  ->recordAction(null)

Here's where it runs a bit astray. I'm sure there's some method to do this with alpine/livewire, what have you - direct in the Resource, but I wasn't able to figure it out. I instead created a new JS asset, imported in a provider as follows:

FilamentAsset::register([
            \Filament\Support\Assets\Js::make('custom-script', __DIR__.'/../../resources/js/custom.js'),
        ]);

FilamentAsset::register([
            \Filament\Support\Assets\Js::make('custom-script', __DIR__.'/../../resources/js/custom.js'),
        ]);

custom.js

document.addEventListener('DOMContentLoaded', function () {
    document.querySelectorAll('.clickable-row').forEach(function (row) {
        row.addEventListener('click', function (event) {
            if (event.target.closest('button') || event.target.closest('a') || event.target.closest('.action-buttons')) {
                return;
            }

            let checkbox = row.querySelector('input[type="checkbox"]');
            if (checkbox) {
                checkbox.checked = !checkbox.checked;
                checkbox.dispatchEvent(new Event('change', { bubbles: true }));
            }
        });
    });
});

document.addEventListener('DOMContentLoaded', function () {
    document.querySelectorAll('.clickable-row').forEach(function (row) {
        row.addEventListener('click', function (event) {
            if (event.target.closest('button') || event.target.closest('a') || event.target.closest('.action-buttons')) {
                return;
            }

            let checkbox = row.querySelector('input[type="checkbox"]');
            if (checkbox) {
                checkbox.checked = !checkbox.checked;
                checkbox.dispatchEvent(new Event('change', { bubbles: true }));
            }
        });
    });
});

It does work, mostly. Sometimes I'm not able to click them anymore when using table search for example, suspecting the DOM is updated and not reattaching this. Either way, this doesn't feel ideal - any suggestions or insight on a better way to obtain this same behavior?

Clickable row add to bulk select

Alright this is super hacky but I haven't found a better way yet (feel free to point and laugh

$table
  ->recordClasses('clickable-row')
  ->recordAction(null)

$table
  ->recordClasses('clickable-row')
  ->recordAction(null)

FilamentAsset::register([
            \Filament\Support\Assets\Js::make('custom-script', __DIR__.'/../../resources/js/custom.js'),
        ]);

FilamentAsset::register([
            \Filament\Support\Assets\Js::make('custom-script', __DIR__.'/../../resources/js/custom.js'),
        ]);

custom.js

document.addEventListener('DOMContentLoaded', function () {
    document.querySelectorAll('.clickable-row').forEach(function (row) {
        row.addEventListener('click', function (event) {
            if (event.target.closest('button') || event.target.closest('a') || event.target.closest('.action-buttons')) {
                return;
            }

            let checkbox = row.querySelector('input[type="checkbox"]');
            if (checkbox) {
                checkbox.checked = !checkbox.checked;
                checkbox.dispatchEvent(new Event('change', { bubbles: true }));
            }
        });
    });
});

document.addEventListener('DOMContentLoaded', function () {
    document.querySelectorAll('.clickable-row').forEach(function (row) {
        row.addEventListener('click', function (event) {
            if (event.target.closest('button') || event.target.closest('a') || event.target.closest('.action-buttons')) {
                return;
            }

            let checkbox = row.querySelector('input[type="checkbox"]');
            if (checkbox) {
                checkbox.checked = !checkbox.checked;
                checkbox.dispatchEvent(new Event('change', { bubbles: true }));
            }
        });
    });
});

Clickable row add to bulk select

Clickable row add to bulk select

Similar Threads

Similar Threads

Similar Threads