Table reload in custom livewire tab by updating in another tab table record.

I have a resource page with Tab implementation. First tab for draft items loaded through livewire page. The second tab is with published items. I wants to refresh the second table when ever I am publishing a record in First tab. Below is the main page

public function getTabs(): array
    {return [
       'All' => Tab::make('All')->schema([
       Livewire::make(ActiveListingTable::class)->key('active-listing-table')
       ]),
       ];
    }
    public function infolist(Infolist $infolist): Infolist
    {return $infolist
     ->schema([
     Tabs::make('Tabs')->contained(false)
     ->tabs([
        Tabs\Tab::make('Draft')
                            ->schema([
                                Livewire::make(DraftListingTable::class)->key('dradt-listing-table')->lazy()
                            ])->extraAttributes([
                                'x-data' => '{ isActive: false }',
                                'x-init' => 'isActive = ($el.closest("[role=\'tablist\']").querySelector("[aria-selected=\'true\']") === $el)',
                                'x-effect' => 'if(isActive) { window.Livewire.emit(\'refreshDraftTable\') }',
                                'x-on:click' => 'isActive = true',
                            ]),
                        Tabs\Tab::make('active-tasks')->label('Published')
                            ->schema([
                                Livewire::make(ActiveListingTable::class)->key('active-listing-table')->lazy()
                            ])->extraAttributes([
                                'x-data' => '{ isActive: false }',
                                'x-init' => 'isActive = ($el.closest("[role=\'tablist\']").querySelector("[aria-selected=\'true\']") === $el)',
                                'x-effect' => 'if(isActive) { window.Livewire.emit(\'refreshActiveTable\') }',
                                'x-on:click' => 'isActive = true',
                            ]),
    ]),
    ]);
    }

public function getTabs(): array
    {return [
       'All' => Tab::make('All')->schema([
       Livewire::make(ActiveListingTable::class)->key('active-listing-table')
       ]),
       ];
    }
    public function infolist(Infolist $infolist): Infolist
    {return $infolist
     ->schema([
     Tabs::make('Tabs')->contained(false)
     ->tabs([
        Tabs\Tab::make('Draft')
                            ->schema([
                                Livewire::make(DraftListingTable::class)->key('dradt-listing-table')->lazy()
                            ])->extraAttributes([
                                'x-data' => '{ isActive: false }',
                                'x-init' => 'isActive = ($el.closest("[role=\'tablist\']").querySelector("[aria-selected=\'true\']") === $el)',
                                'x-effect' => 'if(isActive) { window.Livewire.emit(\'refreshDraftTable\') }',
                                'x-on:click' => 'isActive = true',
                            ]),
                        Tabs\Tab::make('active-tasks')->label('Published')
                            ->schema([
                                Livewire::make(ActiveListingTable::class)->key('active-listing-table')->lazy()
                            ])->extraAttributes([
                                'x-data' => '{ isActive: false }',
                                'x-init' => 'isActive = ($el.closest("[role=\'tablist\']").querySelector("[aria-selected=\'true\']") === $el)',
                                'x-effect' => 'if(isActive) { window.Livewire.emit(\'refreshActiveTable\') }',
                                'x-on:click' => 'isActive = true',
                            ]),
    ]),
    ]);
    }

VenkyOP•10/26/24, 5:54 AM

DraftListingTable:

VenkyOP•10/26/24, 5:54 AM

Active Listing Table:

VenkyOP•10/27/24, 6:27 AM

@Jakub I took this logic from your post only. Can you please help me in this. I just wants to reload the table in one tab by update record in another tab table.

VenkyOP•10/27/24, 6:27 AM

Thank in advance for your help

VVenky I have a resource page with Tab implementation. First tab for draft items loaded...

Jakub•10/27/24, 6:37 AM

From my understanding you are doing the following

created info list that has tabs , so you can swtich and show different tables
you click on a tab Draft, and it shows listings with status of draft
click on tab of published, shows active listings
you are passing in a custom livewire component for each one

### What you should do in this situation

create a new page or go on the ListListings page
create the getTabs function and setup filters on that
you can pass in fitlers directly onto the tabs
so wheenver yo uswitch between tabs, the table updates
creating new records will also refresh the table

Here is example of some tabs i have

The table on the same page is like this

I could be misunderstanding the whole thing too lol

Jakub•10/27/24, 6:37 AM

This is how it looks

Jakub•10/27/24, 6:38 AM

Full code for the page if that ehlps

message.txt6.59KB

Jakub•10/27/24, 6:39 AM

I think you made it more complex than it needs to be with the custom livewire stuff, to get the same result

Jakub•10/27/24, 6:39 AM

if you can share screenshots of how the view looks, and what you want to do with it. Might be able to help more.

I am not that great at filament yet, to fully visualize how everythings works just from code =/

VenkyOP•10/28/24, 2:03 PM

@Jakub Let me try and give you the full code earliest. Thank you for your prompt response