Level 8
Did you manage to resolve your issue?
Feb 14, 2024
3
Level 5
Cannot interact with Filament Table on a custom Livewire Component
Any help/advice would be much appreciated :bowing-emoji:
What I want:
- Be able to open my filters dropdown/modal on a Filament table (onclick does nothing)
- Be able to sort columns (onclick does nothing)
My code:
I followed Filament's official guide to the best of my ability https://filamentphp.com/docs/3.x/tables/adding-a-table-to-a-livewire-component
The table loads without errors (modal content included), but JS/Alpine/Livewire-related functionality seems to be disabled for some reason
In native Filament Dashboard all tables work just fine
Livewire Component is nested in home.blade.php
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
@vite(['resources/css/app.css', 'resources/js/app.js'])
@livewireStyles
// ...
<livewire:company-search :companies="$companies" />
</footer>
@livewireScripts
</body>
</html>
company-search.blade.php
<section class="m-10">
{{ $this->table }}
</section>
CompanySearch.php
class CompanySearch extends Component implements HasForms, HasTable
{
use InteractsWithTable;
use InteractsWithForms;
public function render(): View
{
return view('livewire.company-search');
}
protected function table(Table $table): Table
{
->query(Company::query()
->with(['general', 'achievements', 'member', 'interior', 'regions', 'cities', 'prefectures'])
->where('created_at', '!=', NULL)
->orderBy('created_at', 'desc')
)
->columns([
TextColumn::make('name')
->searchable()
->sortable(),
// ...
->filters([
SelectFilter::make('cities')
->multiple()
->options([
'draft' => 'Draft',
'reviewing' => 'Reviewing',
'published' => 'Published',
]),
->filtersFormWidth(MaxWidth::FourExtraLarge)
->actions([
ActionGroup::make([
ViewAction::make(),
EditAction::make(),
]),
])
What I tried:
- https://codingwisely.com/blog/enhancing-laravel-filament-v3-development-with-vite-and-livewire-hot-reload
- adding
@livewireScriptsto company-search.blade.php
Upon trying 2. every single element on the page became triggered (including modals) and icons got replaced with loading spinners, absolutely have no idea what's going on and how to fix this
Level 5
@squashjedi Yes, I resolved the issue by adding
<style>
[x-cloak] {
display: none !important;
}
</style>
Reference:
1 like
Level 1
@Pawooo Thank you
Please or to participate in this conversation.