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 :
What can be wrong in my expansion code ?
You need wire:model="expanded" in your table
<x-table wire:model="expanded" expandable ...
and in you livewire component
public array $expanded = [];