Tabs with different content
Hello,
I'm new to Filament and I'm stuck with organizing resources. I hope someone can point me into right direction.
I have Company which has Users and Projects. I want to have one page that will have three tabs:
- 1st tab will display company details, address, etc.
- 2nd tab will display all users
- 3rd tab will display all projects
I created CompanyResource with following relations:
public static function getRelations(): array
{
return [
ProjectsRelationManager::class,
UsersRelationManager::class,
];
}
This works as expected - I get two tabs displaying tables. How can I add 1st tab which will display company details? Am I on the right path when doing it with relations? Can relation point to infolist instead of table? Or should I work with tab some other way?10 Replies
You could also make a custom page and add all the livewire components of the tables there. That way you could easily add three tables to the same page
How would I do that? I tried making a custom page for it but without success 😦
Make a filament page
With a custom view
Then use this to add tables to a view
I've tried making custom component with a table. It displays a table and everything looks ok but actions are not working - it doesn't use form from the resource. Am I missing something? I would like to avoid duplicating forms.
Please provide some codes
I've managed to make it work. I re-did everything again from the scratch and actions are working this time. I don't see any difference in current and previous solution. Code is the same, it's just magically works 🙂
This is the working code. I have custom component Company:
class CompanyProperties extends Entry
{
protected string $view = 'filament.admin.pages.company-projects';
}
with a blade:
<x-filament::section>
@livewire('list-projects')
</x-filament::section>
And a livewire component:
class ListProperties extends Component implements HasForms, HasTable
{
use InteractsWithTable;
use InteractsWithForms;
public function render()
{
return view('livewire.list-projects');
}
public function table(Table $table): Table
{
return ProjectResource::table($table)
->query(ProjectResource::getEloquentQuery())
->actions([
EditAction::make()->form(getProjectSchema()),
]);
}
with a following blade:
<div>
{{ $this->table }}
</div>
Then, in my infolist that display the tabs I added this tab:
Tabs\Tab::make("Projects")->schema([
Pages\CompanyProjects::make('projects')
]),Looks good! So weird that it did not work in your v1. Sometimes, re-do or restart is the only way to solve a problem 🙂
Yeah, magic behing it must have got confused 🙂
Now to figure out how to slect only projects for selected company 😛