Filament•10mo ago

Filament Table Livewire only loads a cross when opened

What I am trying to do: Create a public table that does not require a panel and login using livewire compoenent What I did: I followed the guide on documentation https://filamentphp.com/docs/3.x/tables/adding-a-table-to-a-livewire-component#setting-up-the-livewire-component My issue/the error: When I open it the page, it just shows a cross, I thought maybe a wrong URL but I changed it to something else and shows the same result of a cross, I know its kind of working since if its actually the wrong URL I get the 404 not found Code: the route Route::get('equipments', ListEquipments::class); the livewire

<?php
 
namespace App\Livewire;
 
use App\Models\Equipment;
use Filament\Forms\Concerns\InteractsWithForms;
use Filament\Forms\Contracts\HasForms;
use Filament\Tables\Columns\TextColumn;
use Filament\Tables\Concerns\InteractsWithTable;
use Filament\Tables\Contracts\HasTable;
use Filament\Tables\Table;
use Illuminate\Contracts\View\View;
use Livewire\Component;
 
class ListEquipment extends Component implements HasForms, HasTable
{
    use InteractsWithTable;
    use InteractsWithForms;
    
    public function table(Table $table): Table
    {
        return $table
            ->query(Equipment::query())
            ->columns([
                TextColumn::make('name'),
            ])
            ->filters([
                // ...
            ])
            ->actions([
                // ...
            ])
            ->bulkActions([
                // ...
            ]);
    }
    
    public function render(): View
    {
        return view('livewire.list-equipments');
    }
}

<?php
 
namespace App\Livewire;
 
use App\Models\Equipment;
use Filament\Forms\Concerns\InteractsWithForms;
use Filament\Forms\Contracts\HasForms;
use Filament\Tables\Columns\TextColumn;
use Filament\Tables\Concerns\InteractsWithTable;
use Filament\Tables\Contracts\HasTable;
use Filament\Tables\Table;
use Illuminate\Contracts\View\View;
use Livewire\Component;
 
class ListEquipment extends Component implements HasForms, HasTable
{
    use InteractsWithTable;
    use InteractsWithForms;
    
    public function table(Table $table): Table
    {
        return $table
            ->query(Equipment::query())
            ->columns([
                TextColumn::make('name'),
            ])
            ->filters([
                // ...
            ])
            ->actions([
                // ...
            ])
            ->bulkActions([
                // ...
            ]);
    }
    
    public function render(): View
    {
        return view('livewire.list-equipments');
    }
}

Adding a table to a Livewire component - Table Builder - Filament

Solution:

Check the DevTools network tab and console. I guess you are missing the stylesheets.

Jump to solution

2 Replies

Solution

Dennis Koch•10mo ago

Check the DevTools network tab and console. I guess you are missing the stylesheets.

pr3slaff•10mo ago

Try "npm run build" in terminal?

Gaming

Programming

Filament Table Livewire only loads a cross when opened