Selectable

[cooffeeRequired]

maryUI version

1.34.1

daisyUI version

4.12.10

Livewire version

3.5.1

What browsers are affected?

Firefox, Chrome, Safari, Microsoft Edge

What happened?

✅ For sure you can paste screenshots.

❌ Please, don't paste code as screenshot. Paste as formatted markdown code.

ERROR

VM12988:19 Uncaught TypeError: this.selection is not iterable
    at Proxy.isPageFullSelected (eval at safeAsyncFunction (livewire.js?id=87e1046f:1176:21), <anonymous>:19:41)
    at eval (eval at safeAsyncFunction (livewire.js?id=87e1046f:1176:21), <anonymous>:44:38)
    at livewire.js?id=87e1046f:1521:9
    at releaseNextTicks (livewire.js?id=87e1046f:1529:24)
    at livewire.js?id=87e1046f:1516:9

PHP

<?php

namespace App\Livewire;

use App\Http\Controllers\AuthController;
use App\Models\User;
use Illuminate\Contracts\View\Factory;
use Illuminate\Contracts\View\View;
use Illuminate\Foundation\Application;
use Illuminate\Http\Request;
use Illuminate\Support\Collection;
use Illuminate\Support\Str;
use Livewire\Component;
use Mary\Traits\Toast;

class Users extends Component
{
    use Toast;

    public bool $modal_register = false;
    public bool $modal_register_post = false;
    public string $search = '';
    public bool $drawer = false;

    public array $sortBy = ['column' => 'name', 'direction' => 'asc'];

    public string $username = '';
    public string $password = '';
    public string $email = '';
    public string $permissions = '';
    public bool $randomPassword = false;
    public array $user = ['username' => '', 'password' => '', 'email' => '', 'permissions' => 0];

    public function save(bool $random = false): void
    {

        $request = Request::create('/auth/register', 'POST', $this->user = ($random ? User::random() : [
            'email' => $this->email,
            'password' => $this->password,
            'username' => $this->username,
            'permissions' => $this->permissions
        ]));

        $request->setLaravelSession(app('session')->driver());
        $authController = new AuthController();
        $response = $authController->register($request);

        $content = json_decode($response->content());

        if( $response -> status() === 201) {
            $this->success($content->message, position: 'top-end');
        } else {
            $this->error($content->message, position: 'top-end');
        }

        $this->modal_register_post = true;
    }

    public function clear(): void
    {
        $this->reset();
        $this->success('Filters cleared.', position: 'top-end');
    }

    public function delete($id): void
    {
        try {
            $user = User::where('id', $id);

            if(isset($user)) {
                $toid = $user->get()->value('toid');
                $this->success('Uživatel ' . $toid, 'byl odstraněn', position: 'top-end');
            } else {
                $this->error('Uživatel ' . $id, 'nebyl nalezen', position: 'top-end');
            }
            $user->delete();
        } catch (\Exception $e) {
            $this->error($e->getMessage(), position: 'top-end');
        }
    }

    public function headers(): array
    {
        return [
            ['key' => 'id', 'label' => '#', 'class' => 'w-1'],
            ['key' => 'toid', 'label' => 'Id uživatele', 'class' => 'w-1'],
            ['key' => 'name', 'label' => 'Jméno', 'class' => 'w-64'],
            ['key' => 'email', 'label' => 'E-mail'],
        ];
    }

    public function users(): Collection
    {
        $query = User::query();

        foreach ($this->sortBy as $column) {
            $query->orderBy($column);
        }

        $users = $query->get();

        if ($this->search) {
            $users = $users->filter(function (User $item) {
                return Str::contains(strtolower($item->name), strtolower($this->search)) ||
                    Str::contains(strtolower($item->email), strtolower($this->search)) ||
                    Str::contains(strtolower($item->toid), strtolower($this->search));
            });
        }

        return $users;
    }

    public function render(): Factory|Application|View|\Illuminate\View\View|\Illuminate\Contracts\Foundation\Application
    {
        return view('livewire.users', [
            'users' => $this->users(),
            'headers' => $this->headers()
        ]);
    }
}

HTML/Blade

    <!-- TABLE  -->
    <x-card>
        <x-table :headers="$headers" :rows="$users" :sort-by="$sortBy" selectable>
            @scope('actions', $user)
            <x-button icon="o-trash" wire:click="delete({{ $user['id'] }})" wire:confirm="Are you sure?" spinner class="btn-ghost btn-sm text-red-500" />
            @endscope
        </x-table>
    </x-card>

When i wanna select something, its goes selected all with that error.

[cooffeeRequired]

https://github.com/robsontenorio/mary/issues/513#issue-2382034869

url: https://crm.coffeerequired.info/users your account:

• mail: w90E8onxpP@example.com
• name: GoOjKX JiTBg2
• pass: 60y*}<{wsJ>?L<>z

[joaoclobocar]

Please check for missed wire:model to bind the selection.

https://mary-ui.com/docs/components/table#row-selection

[cooffeeRequired]

i did it.