javascriptcsslaravel-livewiremaryui

Why `expandable` block in table definition of mary ui is broken?


In laravel 11 / livewire 3.5 I use mary-ui ^1.40.3 app and I try to use table row-expansion functionality from manuals https://mary-ui.com/docs/components/table#row-expansion

I currencies table I added expandable to table definition and @scope('expansion' block in the end of the table block:

<x-mary-table :headers="$headers" :rows="$currencies" striped expandable
              :sort-by="$sortBy" with-pagination  show-empty-text empty-text="No currencies found. Try to change filter criteria"
              :per-page-values="[10, 25, 50, 100]" >

    @scope('actions', $currency)
        <div class="flex w-32 max-h-8">
            <div class="w-16 px-2">
                <x-mary-button :icon="IconEnum::Edit->value" wire:click="edit({{ $currency->id }})" spinner
                              class="btn-sm btn-primary max-h-6"
                />
            </div>
            <div class="w-16 align-items-end justify-end align-top">
                <x-mary-button :icon="IconEnum::Delete->value" wire:click="delete({{ $currency->id }})" spinner
                           class="btn-sm btn-error max-h-6"
                           wire:confirm="Are you sure you want to delete this currency?"
                />
            </div>
        </div>
    @endscope

    @scope('cell_name', $currency)
    <span class="whitespace-nowrap">
            {{ $currency->name }}
        </span>
    @endscope

    @scope('header_id', $header)
    <h2 class="text-xl font-bold text-grey-100">
        {{ $header['label'] }}
        <x-mary-icon :name="IconEnum::KeyField->value"/>
    </h2>
    @endscope

    @scope('cell_active', $currency)
    @if($currency->active === CurrencyActiveEnum::ACTIVE)
        <span class="whitespace-nowrap">
            <x-mary-badge :value="CurrencyActiveEnum::getLabel($currency->active)" class="badge-primary"/>
        </span>
    @else
        <span class="whitespace-nowrap">
            {{ CurrencyActiveEnum::getLabel($currency->active) }}
        </span>
    @endif
    @endscope

    @scope('cell_description', $currency)
    <span class="whitespace-nowrap">
            <x-mary-popover>
                <x-slot:trigger>
                    <x-mary-badge :value="Str::limit(strip_tags($currency->description), 20)"/>
                </x-slot:trigger>
                <x-slot:content>
                    {{strip_tags($currency->description) }}
                </x-slot:content>
            </x-mary-popover>
        </span>
    @endscope

    @scope('cell_created_at', $currency)
        <span class="whitespace-nowrap">
            {{ DateConv::getFormattedDateTime($currency->created_at) }}
        </span>
    @endscope

    {{-- Special `expansion` slot --}}
    @scope('expansion', $currency)
    <div class="bg-base-200 p-8 font-bold">
        currency_histories_count::{{ $currency->currency_histories_count }}<hr>
        user_currency_subscriptions_count::{{ $currency->user_currency_subscriptions_count }}<hr>
    </div>
    @endscope
</x-mary-table>

But in console of my chrome browser I see errors(1 such error for one row of the table) :

livewire.js?id=ec3a716b:1120 Alpine Expression Error: this.selection.includes is not a function

Expression: "isExpanded(27) || '-rotate-90 !text-current'"


livewire.js?id=ec3a716b:1120 Alpine Expression Error: this.selection.includes is not a function

Expression: "isExpanded(27) || 'hidden'"


livewire.js?id=ec3a716b:1120 Alpine Expression Error: this.selection.includes is not a function

I see expanded switcher image - but it is opened and does not switch the block :

enter image description here

What can be wrong in my expansion code ?


Solution

  • You need wire:model="expanded" in your table

    <x-table wire:model="expanded" expandable ...
    

    and in you livewire component

    public array $expanded = [];