I have a custom page, which I’ve created called “CompanyOverview”. It’s a simple page, with a blade view like so:
<x-filament-panels::page>
<div class="flex flex-col gap-4" x-data="{ tab: 'shipments' }">
<x-filament::tabs label="Content tabs">
<x-filament::tabs.item @click="tab = 'shipments'" :alpine-active="'tab === 'shipments''">
Shipments
</x-filament::tabs.item>
<x-filament::tabs.item @click="tab = 'summary'" :alpine-active="'tab === 'summary''">
Summary
</x-filament::tabs.item>
</x-filament::tabs>
<div>
<div x-show="tab === 'shipments'" x-cloak>
<livewire:intercompany.table-shipment :filters="$filters" />
</div>
<div x-show="tab === 'summary'" x-cloak>
</div>
</div>
</div>
</x-filament-panels::page>
As you can see, on this page, I simply include a Livewire component in my first tab. This component just renders a standard Filament table:
//table-shipments.blade.php
<div>
{{ $this->table }}
</div>
Now, I want to add some other content under the Summary
tab. Under here, I would like to render a lot of different widgets (it’s basically an analytics page). So, I was thinking that it would be nice to be able to utilize just another custom page (or dashboard even), so I could just add the widgets using the getHeaderWidgets()
method, and don’t worry about the Blade / HTML part.
I have tried to create a custom page CompanySummary.php
:
use FilamentPagesPage;
class CompanySummary extends Page
{
protected static ?string $navigationIcon = 'heroicon-o-document-text';
protected static string $view = 'filament.app.pages.company-summary';
protected function getHeaderWidgets(): array
{
return [
//I will place my widgets here.
];
}
}
<div x-show="tab === 'summary'" x-cloak>
@include('filament.app.pages.company-summary')
</div>
It renders the new page, however, it includes it as a new page within my existing page (e.g., two titles and filter actions) – where I essentially, would also like to use my original page filters’.
Is this possible?