Filament•7mo ago

Using Resource table in custom livewire component

What am I doing - created a custom page - added infolist with tabs inside the livwire component - each tab has a livewire component with a filament table

3 Replies

JakubOP•7mo ago

ActiveTasksTable the lviewire component

class ActiveTasksTable extends Component implements HasForms, HasTable
{
    use InteractsWithTable;
    use InteractsWithForms;

    public function table(Table $table): Table
    {
        $activeTasks = Task::where('status', EStatus::ACTIVE)
                            ->where('is_reconciled', false)
                            ->where('is_approved', false);

        return TaskResource::table($table->query($activeTasks));
    }

}

// blade part
<div>
    {{ $this->table }}
</div>

class ActiveTasksTable extends Component implements HasForms, HasTable
{
    use InteractsWithTable;
    use InteractsWithForms;

    public function table(Table $table): Table
    {
        $activeTasks = Task::where('status', EStatus::ACTIVE)
                            ->where('is_reconciled', false)
                            ->where('is_approved', false);

        return TaskResource::table($table->query($activeTasks));
    }

}

// blade part
<div>
    {{ $this->table }}
</div>

JakubOP•7mo ago

Inbox filament page

<?php

class Inbox extends Page
{
    protected static ?string $navigationIcon = 'heroicon-o-inbox';

    protected static string $view = 'filament.pages.inbox';

    public function getTabs(): array
    {
        return [
            'All' => Tab::make('All')->schema([
                        Livewire::make(ActiveTasksTable::class)->key('active-tasks-table')
                ]),
        ];
    }

    public function infolist(Infolist $infolist): Infolist
    {
        return $infolist
            ->schema([
                Tabs::make('Tabs')->contained(false)
                    ->tabs([
                        Tabs\Tab::make('active-tasks')->label('Active Tasks')
                            ->schema([
                                Livewire::make(ActiveTasksTable::class)->key('active-tasks-table')
                            ]),
                        Tabs\Tab::make('Tab 2')
                            ->schema([
                                Livewire::make(ActiveTasksTable::class)->key('active-tasks-table-2')->lazy()
                            ]),
                        Tabs\Tab::make('Tab 3')
                            ->schema([
                                Livewire::make(ActiveTasksTable::class)->key('active-tasks-table-3')->lazy()
                            ]),
                    ]),
            ]);
    }
}

<?php

class Inbox extends Page
{
    protected static ?string $navigationIcon = 'heroicon-o-inbox';

    protected static string $view = 'filament.pages.inbox';

    public function getTabs(): array
    {
        return [
            'All' => Tab::make('All')->schema([
                        Livewire::make(ActiveTasksTable::class)->key('active-tasks-table')
                ]),
        ];
    }

    public function infolist(Infolist $infolist): Infolist
    {
        return $infolist
            ->schema([
                Tabs::make('Tabs')->contained(false)
                    ->tabs([
                        Tabs\Tab::make('active-tasks')->label('Active Tasks')
                            ->schema([
                                Livewire::make(ActiveTasksTable::class)->key('active-tasks-table')
                            ]),
                        Tabs\Tab::make('Tab 2')
                            ->schema([
                                Livewire::make(ActiveTasksTable::class)->key('active-tasks-table-2')->lazy()
                            ]),
                        Tabs\Tab::make('Tab 3')
                            ->schema([
                                Livewire::make(ActiveTasksTable::class)->key('active-tasks-table-3')->lazy()
                            ]),
                    ]),
            ]);
    }
}

Issue When I am on the custom page and i click on the edit button, it shows a blank modal. I can't click on the rows either. But when I go on the tasks resource , everything works as intended. Question Is this is a limitation in general with https://filamentphp.com/docs/3.x/tables/adding-a-table-to-a-livewire-component Or am I missing some trait that would solve this?

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

JakubOP•7mo ago

video of what im referring too

Gaming

Programming

Using Resource table in custom livewire component