Layout Question
Hi Guys
I would appreciate any assistance with this layout issue I am having.
I have a table that I am making mobile friendly.
I was able to do this quite well with a combination of splits and stacks, and I can use the >visibleFrom() and ->hiddenFrom() to hide/display certain stacks when using tablets etc. to only show the most important info on mobile
However I would still like the ability to show a normal table with headers etc if the user is on a size xl/2xl screen.
It seems that as soon as there is a Stack in the columns, it automatically hides the header, and just displays the row content.
Maybe for other users/applications its immediately obvious what the piece of info is, but in my case I might display 3 different date and times, and the user cant really determine which one is which, and a table header solves this.
Is there any way to be able to switch between layouts when there is some button trigger?
return $table
->query(PodResource::getEloquentQuery()
->myAgent(Auth::user()->getAgentAccnum())
)
->defaultSort('PODDATE', 'desc')
->columns(
//$normalTable
$tableSplit
)
->filters($filters, layout: FiltersLayout::AboveContentCollapsible)
->actions([
Tables\Actions\EditAction::make(),
Tables\Actions\ViewAction::make(),
], position: ActionsPosition::AfterColumns)
->bulkActions([
ExportBulkAction::make(),
Tables\Actions\BulkActionGroup::make([
]),
]);
I have tried this on the column in the table format:
->extraAttributes(['class' => 'hidden lg:table-cell'])
But sadly this only hides the value, and the header still shows.
I would appreciate any assistance with this layout issue I am having.
I have a table that I am making mobile friendly.
I was able to do this quite well with a combination of splits and stacks, and I can use the >visibleFrom() and ->hiddenFrom() to hide/display certain stacks when using tablets etc. to only show the most important info on mobile
However I would still like the ability to show a normal table with headers etc if the user is on a size xl/2xl screen.
It seems that as soon as there is a Stack in the columns, it automatically hides the header, and just displays the row content.
Maybe for other users/applications its immediately obvious what the piece of info is, but in my case I might display 3 different date and times, and the user cant really determine which one is which, and a table header solves this.
Is there any way to be able to switch between layouts when there is some button trigger?
return $table
->query(PodResource::getEloquentQuery()
->myAgent(Auth::user()->getAgentAccnum())
)
->defaultSort('PODDATE', 'desc')
->columns(
//$normalTable
$tableSplit
)
->filters($filters, layout: FiltersLayout::AboveContentCollapsible)
->actions([
Tables\Actions\EditAction::make(),
Tables\Actions\ViewAction::make(),
], position: ActionsPosition::AfterColumns)
->bulkActions([
ExportBulkAction::make(),
Tables\Actions\BulkActionGroup::make([
]),
]);
I have tried this on the column in the table format:
->extraAttributes(['class' => 'hidden lg:table-cell'])
But sadly this only hides the value, and the header still shows.
Solution
This is almost impossible. You can certainly switch the layout with an action, but that will never be fully responsive out of the box based on media queries.
Stacks / splits can’t work with headers, because stacks and spits are no longer actual html tables.
Stacks / splits can’t work with headers, because stacks and spits are no longer actual html tables.
