Tabs and tables together. Request for help. | Filament | Page 1

fervent drift Dec 4, 2023, 2:25 PM

#

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.

torpid hollyBOT Dec 4, 2023, 2:25 PM

#

To help others find answers, you can mark your question as solved via Right click solution message -> Apps -> ✅ Mark Solution

coral garnet Dec 4, 2023, 3:14 PM

#

fervent drift Please help. I have an application that does not use Panel Builder. Uses tables ...

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)

fervent drift Dec 4, 2023, 3:16 PM

#

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

#

#

How and where should I define them?

#

https://filamentphp.com/docs/3.x/tables/adding-a-table-to-a-livewire-component

coral garnet Dec 4, 2023, 3:25 PM

#

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)),
            ...
        ];
    }
}

In your template, add this above your 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

fervent drift Dec 4, 2023, 3:28 PM

#

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

fervent drift Dec 4, 2023, 4:31 PM

#

#

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

coral garnet Dec 4, 2023, 4:45 PM

#

What's your getTabs code?

fervent drift Dec 4, 2023, 4:45 PM

#

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

coral garnet Dec 4, 2023, 4:46 PM

#

fervent drift

Also, is that the whole file? Put the <x-filament-panels::resources.tabs /> code inside the parent div

coral garnet Dec 4, 2023, 4:47 PM

#

fervent drift public function getTabs(): array { return [ 'all' => Tab...

btw that will probably throw an error anyway. You can remove the anotherTab part for now

fervent drift Dec 4, 2023, 4:47 PM

#

Same

coral garnet Dec 4, 2023, 4:48 PM

#

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

fervent drift Dec 4, 2023, 4:48 PM

#

yes

#

Updated today

coral garnet Dec 4, 2023, 4:56 PM

#

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?

fervent drift Dec 4, 2023, 5:13 PM

#

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

coral garnet Dec 4, 2023, 5:19 PM

#

fervent drift I have now prepared a clean file containing the table example from the documenta...

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

fervent drift Dec 4, 2023, 5:20 PM

#

#

🙂

coral garnet Dec 4, 2023, 5:22 PM

#

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

fervent drift Dec 4, 2023, 5:22 PM

#

coral garnet This works? You have some unclosed elements (eg `<x-filament-panels::page` needs...

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.

coral garnet Dec 4, 2023, 5:23 PM

#

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

fervent drift Dec 4, 2023, 5:24 PM

#

coral garnet This looks unrelated 🤔 Can you run regular cleanup step (clean cache/npm build ...

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

coral garnet Dec 4, 2023, 5:24 PM

#

leave something simple like

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

coral garnet Dec 4, 2023, 5:25 PM

#

fervent drift Gosh. This is a large, working project. Forms, notifications, tables and actions...

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

fervent drift Dec 4, 2023, 5:26 PM

#

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

Without the "page" tag there is no error, the table is displayed, without tabs. There is an error with "page" that I pasted above.

fervent drift Dec 4, 2023, 5:28 PM

#

coral garnet leave something simple like ```html <div> <div class="flex flex-col gap-y-6"...

Table works, no tabs. They are not found in the sources in the DOM tree either.

coral garnet Dec 4, 2023, 5:32 PM

#

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 />

fervent drift Dec 4, 2023, 5:40 PM

#

#

coral garnet Dec 4, 2023, 6:54 PM

#

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

fervent drift Dec 4, 2023, 6:57 PM

#

coral garnet Dec 4, 2023, 7:02 PM

#

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

fervent drift Dec 4, 2023, 7:03 PM

#

#

❤️

coral garnet Dec 4, 2023, 7:04 PM

#

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

fervent drift Dec 4, 2023, 7:04 PM

#

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

coral garnet Dec 4, 2023, 7:05 PM

#

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()))

returns false and doesn't show anything

fervent drift Dec 4, 2023, 7:08 PM

#

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 😃 )

coral garnet Dec 4, 2023, 7:13 PM

#

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

fervent drift Dec 4, 2023, 9:45 PM

#

@coral garnet 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

#Tabs and tables together. Request for help.