How to load different table columns based on screen size?
Hi all,
I'm trying to create a table where the number or type of columns adjusts automatically based on the screen size. Is there a way to detect the screen size when the Livewire component loads, and then conditionally call either function1() or function2() inside the ->columns() definition of the table?
In short: I want to load different sets of columns (normal or stacked) depending on whether the user is on a small or large screen. What would be the best approach to achieve this? I am not using panels.
Thanks in advance!
6 Replies
There's a
->visibleFrom() method on the columns. eg visibleFrom('lg')Does that also work with different layout types?
For example, on mobile screen i want:
Split::make([
ImageColumn::make('avatar')
->circular(),
TextColumn::make('name')
->weight(FontWeight::Bold)
->searchable()
->sortable(),
Stack::make([
TextColumn::make('phone')
->icon('heroicon-m-phone'),
TextColumn::make('email')
->icon('heroicon-m-envelope'),
]),
])
But for deskop normal columns:
ImageColumn::make('avatar')
->circular(),
TextColumn::make('name')
->weight(FontWeight::Bold)
->searchable()
->sortable(),
TextColumn::make('phone')
->icon('heroicon-m-phone'),
TextColumn::make('email')
->icon('heroicon-m-envelope'),
Excuse me, can I resize the table to fit larger screens and remove these spaces?
I think this one set to Full like example
Thank you very much
bump