Tuto's Laravel Corner•10mo ago

Sortable() and Searchable() not behaving as expected

Hello, Not sure why this Filament table is not behaving as expected when clicking the arrow to sort or typing into the search field. Suggestions? https://gist.github.com/wrperin/e6181516c7606e1e352bc0d424cca6ad

Gist

Livewire component with Filament table - Filament sortable() and se...

Livewire component with Filament table - Filament sortable() and searchable() not behaving as expected - ListMembers.php

Solution:

Well, I've made some progress! I used a bit of Povilas' alpine.js conflict article, and I added

use Livewire\Attributes\Layout;
#[Layout('layouts.app')]

use Livewire\Attributes\Layout;
#[Layout('layouts.app')]

in my livewire component class. This fixed my sortable and searchable problem!...

Jump to solution

12 Replies

tuto1902•10mo ago

Can you also share the layout template? My gut tells me you might be missing the @filamentScripts directive. Also, when using a full page component like this, livewire looks for resources/views/components/layouts/app.blade.php as the layout file, unless you changed the global layout inside config/livewire.php

Route::get('/directory', ListMembers::class)->name('directory');

Route::get('/directory', ListMembers::class)->name('directory');

This means that you shouldn't have to inherit the global layout in your component's view. (<x-app-layout> is not needed) Also, to be safe, try using composer update to bump filament/filament to v3.2

ErinOP•10mo ago

Thanks Tuto, I haven't changed the global layout inside config/livewire.php (I don't have that file). And it is confusing to me which app.blade.php layout is being used; there is more than one of them and one does have the @filamentScripts and the other doesn't. I'll play around with that.

tuto1902•10mo ago

I think by using <x-app-layout> you are using the one that doesn't.

tuto1902•10mo ago

Try using this approach to use the correct layout and still have access to extra slots, like header https://livewire.laravel.com/docs/components#setting-additional-layout-file-slots

Laravel

Components | Laravel

A full-stack framework for Laravel that takes the pain out of building dynamic UIs.

tuto1902•10mo ago

Let me know how it goes 👍

ErinOP•10mo ago

Thanks Tuto; I haven't attempted to update the layout file per the article you sent yet; however, I removed all the code except

<div class="p-6 text-gray-900 dark:text-gray-100">
  {{ $this->table }}
</div>

<div class="p-6 text-gray-900 dark:text-gray-100">
  {{ $this->table }}
</div>

in the

list-members.blade.php

list-members.blade.php

file. When I view the source in the browser, the correct layout with the @filamentScripts directive seems to be loaded because the last few lines of the page are

<!-- Livewire Scripts -->
<script src="/livewire/livewire.js?id=8ed4c109"   data-csrf="Lsz1EVMw9bH2VpcSoumUGJfBF9YYjn3x9GIUII9S" data-update-uri="/livewire/update" data-navigate-once="true"></script>

<!-- Livewire Scripts -->
<script src="/livewire/livewire.js?id=8ed4c109"   data-csrf="Lsz1EVMw9bH2VpcSoumUGJfBF9YYjn3x9GIUII9S" data-update-uri="/livewire/update" data-navigate-once="true"></script>

and yet the sorting and searching behaviors are not working.

tuto1902•10mo ago

can you share the contents of resources/views/components/layouts/app.blade.php Also, are there any errors in the browser's console or network tab?

ErinOP•10mo ago

Thank you for looking at this for me Tuto! The gist has been updated with the layout file https://gist.github.com/wrperin/e6181516c7606e1e352bc0d424cca6ad And yes, there are 8 console errors, may of the same error, thanks for having me check that! The console errors are about alpine js.

Alpine Expression Error: async-alpine.js?v=3.2.16.0:1 Cannot read properties of undefined (reading '$on')

Alpine Expression Error: async-alpine.js?v=3.2.16.0:1 Cannot read properties of undefined (reading '$on')

Alpine Warning: You async-alpine.js?v=3.2.16.0:1 can't use [x-trap] without first installing the "Focus" plugin here: https://alpinejs.dev/plugins/focus

Alpine Warning: You async-alpine.js?v=3.2.16.0:1 can't use [x-trap] without first installing the "Focus" plugin here: https://alpinejs.dev/plugins/focus

Uncaught TypeError: Cannot alpinejs.js?v=55c169fd:518 read properties of undefined (reading '$on')

Uncaught TypeError: Cannot alpinejs.js?v=55c169fd:518 read properties of undefined (reading '$on')

Gist

Livewire component with Filament table - Filament sortable() and se...

Livewire component with Filament table - Filament sortable() and searchable() not behaving as expected - ListMembers.php

ErinOP•10mo ago

I found this article and am trying this out https://laraveldaily.com/post/livewire-3-laravel-breeze-error-alpine-js-conflict

Laravel Daily

Livewire 3 and Laravel Breeze Error: Alpine.js Conflict

Solution

Erin•10mo ago

Well, I've made some progress! I used a bit of Povilas' alpine.js conflict article, and I added

use Livewire\Attributes\Layout;
#[Layout('layouts.app')]

use Livewire\Attributes\Layout;
#[Layout('layouts.app')]

in my livewire component class. This fixed my sortable and searchable problem!

ErinOP•10mo ago

I still am working on the layout issue with more than one slot, but that's less of a concern for my project. Thanks for all your help Tuto!

tuto1902•10mo ago

I'm glad you were able to move forward. If there's anything else I can help you with, don't hesitate to ask

Gaming

Programming

Sortable() and Searchable() not behaving as expected