Filament•7mo 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•7mo 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)

lkucharski•7mo ago

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

lkucharski•7mo ago

lkucharski•7mo ago

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

ChesterS•7mo 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

lkucharski•7mo ago

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

lkucharski•7mo ago

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

ChesterS•7mo ago

What's your getTabs code?

lkucharski•7mo ago

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

ChesterS•7mo 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

lkucharski•7mo ago

Same

ChesterS•7mo ago

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

lkucharski•7mo ago

yes Updated today

ChesterS•7mo 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?

lkucharski•7mo 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•7mo ago

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

lkucharski•7mo ago

🙂

ChesterS•7mo ago

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

lkucharski•7mo 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•7mo ago

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

lkucharski•7mo ago

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

ChesterS•7mo 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

lkucharski•7mo 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•7mo 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 />

lkucharski•7mo ago

ChesterS•7mo 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

lkucharski•7mo ago

ChesterS•7mo 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();
    }

lkucharski•7mo ago

❤️

ChesterS•7mo ago

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

lkucharski•7mo ago

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

ChesterS•7mo 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

lkucharski•7mo 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•7mo 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

lkucharski•7mo 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

lkucharski•7mo 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.