Filament•14mo ago

Using Table + Tabs in custom Livewire component

Is it possible to use tabs like the ones in the demo (https://github.com/filamentphp/demo/blob/main/app/Filament/Resources/Shop/OrderResource/Pages/ListOrders.php#L28) to get a similar result when using a table in a custom Livewire component?

GitHub

demo/app/Filament/Resources/Shop/OrderResource/Pages/ListOrders.php...

Source code for the demo.filamentphp.com website. Contribute to filamentphp/demo development by creating an account on GitHub.

8 Replies

Saade•14mo ago

#kenneth-sese-advanced-tables

Saade•14mo ago

or use the tabs component https://filamentphp.com/docs/3.x/support/blade-components/tabs

Tabs Blade component - Core Concepts - Filament

lazydog•14mo ago

The "Tabs" feature is located within the Form Builder, "Listing" is found in the Table Builder and "Viewing" is in Infolist. To integrate these builders, you'll need to create a custom Livewire component and implement the HasTable and custom infolist (where you put your listing).

Hasith•10mo ago

Can anyone explain more, please?

Andrew Wallo•10mo ago

https://discord.com/channels/883083792112300104/956270111176679516/1207482131534585897

Andrew Wallo•10mo ago

I referenced my message in #👹┊off-topic just because I mentioned the answer to this there, not for you to ask in off-topic channel. But I will say again what I said in the message here for people in the future. Yes you can create tabs for Tables like you would in a Resource. You would have to implement a custom solution using the Tabs blade component https://filamentphp.com/docs/3.x/support/blade-components/tabs. There isn't the same type of support as there is for a ListRecords page, but it is definitely doable and it is pretty easy in my opinion. I have a few examples of doing this in my open-source application https://github.com/andrewdwallo/erpsaas. Specifically, you can look at this page as an example: https://github.com/andrewdwallo/erpsaas/blob/4068df7494b7b9ea4c597f0f5ab67996e58a0b01/app/Filament/Company/Pages/Accounting/AccountChart.php. Even though it is a Filament page, it is still a Livewire component and the implementation would pretty much be the same. There are other examples in the repository as well such as the LiveCurrency page and its associated Livewire components.

Installation - Panel Builder - Filament

Hasith•10mo ago

Thank You @Andrew Wallo. I implement Something Like this.

<div class="wrapper w-full md:max-w-6xl mx-auto pt-20 px-4">

    <div class="mx-auto w-fit mb-5">
        <x-filament::tabs>
            <x-filament::tabs.item icon="heroicon-m-users" :active="$activeTab === 'all'"
        wire:click="$set('activeTab', 'all')">
                All
                <x-slot name="badge">
                    {{$allCount}}
                </x-slot>
            </x-filament::tabs.item>

            <x-filament::tabs.item icon="heroicon-m-trash" :active="$activeTab === 'archived'"
        wire:click="$set('activeTab', 'archived')">
                Archived
                <x-slot name="badge">
                    {{$trashedCount}}
                </x-slot>
            </x-filament::tabs.item>
        </x-filament::tabs>
    </div>
    <div>
        {{ $this->table }}
    </div>
</div>

<div class="wrapper w-full md:max-w-6xl mx-auto pt-20 px-4">

    <div class="mx-auto w-fit mb-5">
        <x-filament::tabs>
            <x-filament::tabs.item icon="heroicon-m-users" :active="$activeTab === 'all'"
        wire:click="$set('activeTab', 'all')">
                All
                <x-slot name="badge">
                    {{$allCount}}
                </x-slot>
            </x-filament::tabs.item>

            <x-filament::tabs.item icon="heroicon-m-trash" :active="$activeTab === 'archived'"
        wire:click="$set('activeTab', 'archived')">
                Archived
                <x-slot name="badge">
                    {{$trashedCount}}
                </x-slot>
            </x-filament::tabs.item>
        </x-filament::tabs>
    </div>
    <div>
        {{ $this->table }}
    </div>
</div>

 public $activeTab = 'all', $allCount = 0, $trashedCount = 0;

    public function mount(){
        $this->allCount = Customer::query()->count();
        $this->trashedCount =Customer::onlyTrashed()->count();
    }

    public function updated(){
        $this->resetTable();
    }

    public function table(Table $table): Table
    {
        if($this->activeTab == 'all'){
            $query = Customer::query();
        }else{
            $query = Customer::onlyTrashed();
        }


        return $table
            ->query($query)
            ...... Rest CODE /////

 public $activeTab = 'all', $allCount = 0, $trashedCount = 0;

    public function mount(){
        $this->allCount = Customer::query()->count();
        $this->trashedCount =Customer::onlyTrashed()->count();
    }

    public function updated(){
        $this->resetTable();
    }

    public function table(Table $table): Table
    {
        if($this->activeTab == 'all'){
            $query = Customer::query();
        }else{
            $query = Customer::onlyTrashed();
        }


        return $table
            ->query($query)
            ...... Rest CODE /////

Is there a better way ? Appriciate if you review this code for me ? @Andrew Wallo

Andrew Wallo•10mo ago

I mean if it works how you want it to, then no, not necessarily. Other than that, it is generally recommended to declare each property on its own separate line, but that isn't really relevant here because I don't think that is what you are asking..

Gaming

Programming

Using Table + Tabs in custom Livewire component