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
tuto19026mo 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
Erin
Erin6mo 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
tuto19026mo ago
I think by using <x-app-layout> you are using the one that doesn't.
tuto1902
tuto19026mo 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
tuto19026mo ago
Let me know how it goes 👍
Erin
Erin6mo 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
tuto19026mo 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?
Erin
Erin6mo 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
Solution
Erin
Erin6mo 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!
Erin
Erin6mo 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
tuto19026mo 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