Table in tab

Can I show table in tab?How to do it?

6 Replies

DrByte•14mo ago

While it might be a little different because it's nested, RelationManagers do have tables inside tabs. eg: https://demo.filamentphp.com/shop/customers/2/edit?activeRelationManager=1

Mis TsuOP•14mo ago

My problem is that I have a custom page, and I want to change the resource displayed with tabs. For example, I have two tabs: the 'user' tab and the 'project' tab. When I click on the 'user' tab, it will display user resources, and when I click on the 'project' tab, it will display project resources.Is this possible?

Dennis Koch•14mo ago

It can be done, but isn't that convenient. You need your custom page, and use the tab component inside the view file. Then put both tables in a separate Livewire component and use those in the view file. Check the list-records.blade.php for reference.

Mis TsuOP•14mo ago

I am not clear about what you mean, so please explain further or provide a reference. Thanks, Dennis.

Dennis Koch•14mo ago

- You already have a custom page with a view. - You can reuse the Tab Blade component (see list-records.blade.php for reference) - Create a Livewire component for every table you need (See the Table Docs, https://filamentphp.com/docs/3.x/tables/adding-a-table-to-a-livewire-component) - Inlcude that Livewire components on your custom page inside the tabs

Installation - Panel Builder - Filament

Anish•7mo ago

Could you please give an example of where to include the tab contents for Livewire components. I am just trying out :

<x-filament::tabs x-data="{ activeTab: 'tab1' }">


    <x-filament::tabs.item
        alpine-active="activeTab === 'tab1'"
        x-on:click="activeTab = 'tab1'"
    >
        Tab 1 Title
    </x-filament::tabs.item>


    <x-filament::tabs.item
        alpine-active="activeTab === 'tab2'"
        x-on:click="activeTab = 'tab2'"
    >
        Tab 2
    </x-filament::tabs.item>


</x-filament::tabs>

<x-filament::tabs x-data="{ activeTab: 'tab1' }">


    <x-filament::tabs.item
        alpine-active="activeTab === 'tab1'"
        x-on:click="activeTab = 'tab1'"
    >
        Tab 1 Title
    </x-filament::tabs.item>


    <x-filament::tabs.item
        alpine-active="activeTab === 'tab2'"
        x-on:click="activeTab = 'tab2'"
    >
        Tab 2
    </x-filament::tabs.item>


</x-filament::tabs>

Thanks in advance. OK! Got it

<div x-data="{ activeTab: 'tab1' }"> 

  <x-filament::tabs x-data="{ activeTab: 'tab1' }">


    <x-filament::tabs.item
        alpine-active="activeTab === 'tab1'"
        x-on:click="activeTab = 'tab1'"
    >
        Tab 1 Title
    </x-filament::tabs.item>


    <x-filament::tabs.item
        alpine-active="activeTab === 'tab2'"
        x-on:click="activeTab = 'tab2'"
    >
        Tab 2
    </x-filament::tabs.item>


</x-filament::tabs>
 
<div>
    <div x-show="activeTab === 'tab1'>Tab 1 Content</div>
    <div x-show="activeTab === 'tab2'>Tab 2 Content</div>
</div>
</div>
</div>

<div x-data="{ activeTab: 'tab1' }"> 

  <x-filament::tabs x-data="{ activeTab: 'tab1' }">


    <x-filament::tabs.item
        alpine-active="activeTab === 'tab1'"
        x-on:click="activeTab = 'tab1'"
    >
        Tab 1 Title
    </x-filament::tabs.item>


    <x-filament::tabs.item
        alpine-active="activeTab === 'tab2'"
        x-on:click="activeTab = 'tab2'"
    >
        Tab 2
    </x-filament::tabs.item>


</x-filament::tabs>
 
<div>
    <div x-show="activeTab === 'tab1'>Tab 1 Content</div>
    <div x-show="activeTab === 'tab2'>Tab 2 Content</div>
</div>
</div>
</div>

Gaming

Programming

Table in tab