Filament•4mo ago

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?

1 Reply

pepperoni dogfartOP•3mo ago

updated it a bit to handle the 'select all' in the bulk column. Dispatched to livewire directly. Still very hacky -- wish filamentphp fired off an event when something is selected instead.

custom.js

Gaming

Programming

Clickable row add to bulk select