Preselect Table records on page load

[BradnDodd]

Package

Table builder

Package Version

v3.2.110

How can we help you?

I want to select some table records when the table is first loaded. There is a bulk action against the table that I've tried to use replaceMountedTableBulkAction but that didn't work. I've also tried to update the selectedTableRecords property against the component but it doesn't appear to be read from. Any ideas?

[BradnDodd]

After a lot of trail and error I have finally got a working solution for this that I can share;

1. In your livewire component that has HasTable add the following method which will dispatch the event to handle the front end

public function rendered()
    {
        $this->dispatch('trigger-select-records', [
            'records' => [1], // The IDs of your selected rows
            'livewireId' => $this->id(), // Required to link to this specific component incase you need to have multiple of the same component or multiple components supporting preselected rows
        ]);
    }

2. In your blade template for your component add the following which will select your rows in the backend by triggering your bulk action

@script
    <script>
        $wire.mountTableBulkAction('Action Name', [1,2]) // The IDs of your selected rows 
    </script>
@endscript

3. In that same blade template add the following OUTSIDE the @script tag. This will handle the actual selecting of the rows in the front end

<script>
    document.addEventListener('trigger-select-records', function(event) {
        event.detail[0].records.forEach(record => {
            const checkbox = document.querySelector('tr[wire\\:key="' + event.detail[0].livewireId + '.table.records.' + record + '"] input[type="checkbox"]')
            checkbox.click()
        });
    })
</script>

This is just a starting point and would likely need tweaking and further testing but it should give you an idea of how to achieve each part.

[elmudometal]

Hi, I think what you did is excellent. I've been trying to do it in a "filament" way for a while now but I haven't been able to do it. By trying what you did, I managed to do points 1 and 3, but I get an error on point 2. Do you have an example?

[BradnDodd]

I don't have an example I can share as it was for work so is covered by NDA; If you message me with what you're struggling on I'll do my best to help.

[elmudometal]

this is my component https://github.com/elmudometal/filament-select-table
I uploaded what you mentioned (branch: dev) and looking at logs I see that it does it but then filament overwrites it, I understand that step 2 should solve that problem but it doesn't work for me or I don't know where to put it

Any help would be appreciated, I've been thinking about it too much.

[BradnDodd]

public function render()
    {
        return <<<'HTML'
        <div>
            {{ $this->table }}
            @script
                <script>
                    $wire.mountTableBulkAction('filament-select-add-relationship',[1]) // The IDs of your selected rows
                </script>
            @endscript

            <script>
                document.addEventListener('trigger-select-records', function(event) {
                    event.detail[0].records.forEach(record => {
                        const checkbox = document.querySelector('tr[wire\\:key="' + event.detail[0].livewireId + '.table.records.' + record + '"] input[type="checkbox"]')
                        checkbox.click()
                        console.log(1);
                    });
                })
            </script>
        </div>
        HTML;
    }

    public function rendered()
    {
        $this->renderedCount++;
        // Page load has 2 renders before its actually ready, dispatching the event any other time won't have it work
        if ($this->renderedCount === 2) {
            $this->dispatch('trigger-select-records', [
                'records' => [1], // The IDs of your selected rows
                'livewireId' => $this->id(), // Required to link to this specific component incase you need to have multiple of the same component or multiple components supporting preselected rows
            ]);
        }
    }

This is a very rough attempt at a fix without testing but from what I've encountered in my own work;

1. Adding in a variable for counting how many times the component has been rendered and only firing the trigger event on the second load; Filament causes 2 renders of the component on initial page load so without this you'll find your event works but filament comes along and overwrites it and you pull your hair out.
2. You had the @script block using the wrong script; the one in the tag handles performing your action in the backend on page load and the one outside the @script block will tick the checkboxes on the front end.

If that still doesn't work I would try using a <<<BLADE template for the render() as this might help with some of the tags.

[elmudometal]

After a long time I was able to solve the problem, it didn't work the way you had it but I understood how to make it work

`public function mountSelectTableBulkAction(string $name, ?array $selectedRecords = null): mixed
{
$this->mountedTableBulkAction = $name;

    if ($selectedRecords !== null) {
        $this->selectedTableRecords = $selectedRecords;
    }

    $action = $this->getMountedTableBulkAction();

    if (! $action) {
        return null;
    }

    if ($action->isDisabled()) {
        return null;
    }

    $this->cacheMountedTableBulkActionForm(mountedBulkAction: $action);

    return null;
}

public function render()
{
    return <<<'HTML'
    <div>

        {{ $this->table }}

        @script
            <script>
                $wire.mountSelectTableBulkAction('filament-select-add-relationship', @js($this->selectedRecords)) /* The IDs of your selected rows */
            </script>
        @endscript

        @script
        <script>

            document.addEventListener('trigger-select-records', function(event) {

                event.detail[0].records.forEach(record => {

                    const checkbox = document.querySelector('tr[wire\\:key="' + event.detail[0].livewireId + '.table.records.' + record + '"] input[type="checkbox"]')

                    if (checkbox && !checkbox.checked) {
                        checkbox.click();
                    }
                });

            });

        </script>

        @endscript

    </div>

    HTML;

}

public function rendered()
{
    $this->dispatch('trigger-select-records', [
        'records' => $this->selectedRecords, // The IDs of your selected rows
        'livewireId' => $this->id(), // Required to link to this specific component incase you need to have multiple of the same component or multiple components supporting preselected rows
    ]);
}`

PS: the comments('//') generated an error when they were injected into the <<<'HTML' and the view cache generated another error

Thank you very much for your help