Filament•12mo ago

Tabs and tables together. Request for help.

Please help. I have an application that does not use Panel Builder. Uses tables and forms as livewire components. Is there any way for me to add infolist tabs above the table? This topic is very urgent for me. Please advise.

40 Replies

ChesterS•12mo ago

Can you clarify what you mean 'infolist tabs above the table'? You can add tabs above a table that change the table data (if that's what you want)

lkucharskiOP•12mo ago

Thank you. How to add tabs above a table in the livewire component?

lkucharskiOP•12mo ago

lkucharskiOP•12mo ago

How and where should I define them? https://filamentphp.com/docs/3.x/tables/adding-a-table-to-a-livewire-component

ChesterS•12mo ago

Update your component and add anything that's missing from the example bellow

class ReminderModal extends Component implements HasActions, HasForms, HasTable
{
    use HasTabs;
    use InteractsWithActions; // Might not need this
    use InteractsWithForms;
    use InteractsWithTable {
        makeTable as makeBaseTable;
    }

    public function mount(): void
    {
        $this->activeTab = 'all';
    }

    public function getRenderHookScopes(): array // This is only needed because it complains
    {
        return [static::class];
    }

    public function getTabs(): array
    {
        return [
            'all' => Tab::make(__('All')),
            'anotherTab' => Tab::make(__('Another tab'))
                ->modifyQueryUsing(fn (Builder $query) => $query->where('something', '=', true)),
            ...
        ];
    }
}

class ReminderModal extends Component implements HasActions, HasForms, HasTable
{
    use HasTabs;
    use InteractsWithActions; // Might not need this
    use InteractsWithForms;
    use InteractsWithTable {
        makeTable as makeBaseTable;
    }

    public function mount(): void
    {
        $this->activeTab = 'all';
    }

    public function getRenderHookScopes(): array // This is only needed because it complains
    {
        return [static::class];
    }

    public function getTabs(): array
    {
        return [
            'all' => Tab::make(__('All')),
            'anotherTab' => Tab::make(__('Another tab'))
                ->modifyQueryUsing(fn (Builder $query) => $query->where('something', '=', true)),
            ...
        ];
    }
}

In your template, add this above your table

<x-filament-panels::resources.tabs /> 

{{ $this->table }}

<x-filament-panels::resources.tabs /> 

{{ $this->table }}

There are probably other ways. Give it a try You can probably replace <x-filament-panels::resources.tabs /> with something else that renders tabs - or render them manually. This is just the simplest way I've found

lkucharskiOP•12mo ago

If it works, that would be great 🙂 I'll let you know. Thank you good man 🙂

lkucharskiOP•12mo ago

The above error appears. I will be grateful for your help 🙂

ChesterS•12mo ago

What's your getTabs code?

lkucharskiOP•12mo ago

public function getTabs(): array { return [ 'all' => Tab::make(('All')), 'anotherTab' => Tab::make(('Another tab')) ->modifyQueryUsing(fn (Builder $query) => $query->where('something', '=', true)), ]; }

ChesterS•12mo ago

Also, is that the whole file? Put the <x-filament-panels::resources.tabs /> code inside the parent div btw that will probably throw an error anyway. You can remove the anotherTab part for now

lkucharskiOP•12mo ago

Same

ChesterS•12mo ago

Is everything up to date? Filament 3, laravel etc?

lkucharskiOP•12mo ago

yes Updated today

ChesterS•12mo ago

Hmm that's weird. Can you remove the other livewire stuff from the page and see how it works ? (livewire:layout that are below the table etc) also, can you share the rest of the component code?

lkucharskiOP•12mo ago

I have now prepared a clean file containing the table example from the documentation. I added the code for bookmarks. There are no errors in this release, but the table is displayed but the tabs are not.

message.txt

ChesterS•12mo ago

This works? You have some unclosed elements (eg <x-filament-panels::page needs to be <x-filament-panels::page> )

lkucharskiOP•12mo ago

🙂

ChesterS•12mo ago

This looks unrelated 🤔 Can you run regular cleanup step (clean cache/npm build etc/filament update etc)

lkucharskiOP•12mo ago

The table was displayed. I added the "page" tag because I noticed it in the sources on github (I don't know why I didn't close the tag), but it doesn't change anything.

ChesterS•12mo ago

can you remove the <x-filament-panels::page stuff too?

lkucharskiOP•12mo ago

Gosh. This is a large, working project. Forms, notifications, tables and actions work. I just wanted to tabs 🙂

ChesterS•12mo ago

leave something simple like

<div>
    <div class="flex flex-col gap-y-6">
        <x-filament-panels::resources.tabs />
  
        {{ $this->table }}
    </div>
</div>

<div>
    <div class="flex flex-col gap-y-6">
        <x-filament-panels::resources.tabs />
  
        {{ $this->table }}
    </div>
</div>

yeah lot's of moving parts. most of it is boilerplate and you might not need everything

lkucharskiOP•12mo ago

Without the "page" tag there is no error, the table is displayed, without tabs. There is an error with "page" that I pasted above. Table works, no tabs. They are not found in the sources in the DOM tree either.

ChesterS•12mo ago

This is weird. This is pretty much the code I use and it works. How do you render the component? I have something like @livewire('my-table-with-tabs') can you add something like

    @dump($this->getTabs())
    <x-filament-panels::resources.tabs />

    @dump($this->getTabs())
    <x-filament-panels::resources.tabs />

lkucharskiOP•12mo ago

ChesterS•12mo ago

what about this @dump($this->getCachedTabs()) ? Either way, I dunno mate. Try to copy the code from vendor/filament/filament/resources/views/components/resources/tabs.blade.php and see if it works for you. You can render the tabs manually but it's a bit more code to do so

lkucharskiOP•12mo ago

ChesterS•12mo ago

Ok that's probably why nothing shows 🤔 Can you add this method just to see if it works

    public function getCachedTabs(): array
    {
        return $this->getTabs();
    }

    public function getCachedTabs(): array
    {
        return $this->getTabs();
    }

lkucharskiOP•12mo ago

❤️

ChesterS•12mo ago

This is weird. It should work without it. Maybe you have something that conflicts 🤔

lkucharskiOP•12mo ago

It worked. Great thanks for your help. Should I somehow fix the code or leave this "workaround" (I guess)?

ChesterS•12mo ago

Anyway, up to you if you want to dig deeper. There's nothing crazy. If you check the file I mentioned (vendor/filament/filament/resources/views/components/resources/tabs.blade.php and the HasTabs concern you'll see what's going on For some reason this return $this->cachedTabs ??= $this->getTabs(); doesn't work as expected for you and as a result, this code in the template

@if (count($tabs = $this->getCachedTabs()))

@if (count($tabs = $this->getCachedTabs()))

returns false and doesn't show anything

lkucharskiOP•12mo ago

I'll leave with this workaround for now. I will test whether these tabs will also work in my Abstract classes. Could I call you sometime if I have any other problems in the future? 🙂 (Sorry for my bad English 😃 )

ChesterS•12mo ago

Just open another issue here and someone smarter might be around to help. Either way, I don't mind if you ping me - but I might be busy. Good luck

lkucharskiOP•12mo ago

@ChesterS Hi. Would you have any idea why modifyQueryUsing doesn't modify the query in the table? Or how should I do it? Thanks in advance for your help 🙂

message.txt

lkucharskiOP•12mo ago

$query = $this->modifyQueryWithActiveTab($query); I did it and it works, but I don't know if it's state-of-the-art.

Gaming

Programming

Tabs and tables together. Request for help.