Is it possible to change table filter icon or trigger with a button?
Users find it very difficult to click on mobile devices, so was wondering if it's possible to maybe trigger filter popup with a button? Also maybe it's possible to open filter modal in a centre of the screen?
21 Replies
Can you explain further please? There is already a button to open filters.
Yes but people complained it's too small on the mobile device to work with, so I was wondering if there is a way to easily replace it with something bigger. 🙂
The touch target for the filter button is the same size as all the other circular buttons on mobile (user profile, navigation, notifications) (40px). The height is also pretty much the same as all the action buttons (41px). So have they complained about ALL the buttons?
No, the thing is we have waiters who just see the Orders table on their tablets, and they also need to filter by sectors sometimes, so the only control that is too small for them is a filter, and I was thinking of how to improve this bit to make them happy. 🙂
a simple button would work if i could trigger the filter modal, or ability to have a select right on the table header would work too but not sure if it's not too much custom coding
Ahhh gotcha...that makes sense...then in that case you can try targeting the
filament-icon-button css class and style it to make it bigger.
That would make ALL your icon buttons bigger though
But if they only see that button then maybe it'd be ok?we have a huge area to serve and waiters sometimes are shifted to more busier areas, so they need to easily filter out to see orders coming on that specific area
well this might work, the ideal would be to have a multi select filter right on the table header but not sure if this is possible without too much custom coding
Well shameless plug, but I do have a plugin that gives easy access to filters: #filter-sets. Have you checked it out?
You could have your areas defined as filtersets and they'd have access to them right above the table with one tap.
Your plugin looks nice but we have 20-30 sectors, and sometimes 1 waiter is serving 3 or 4.
This is something what I am looking for but select would work best in my case if I could move it out of the modal window somehow.
Understandable and see your point. I will say mention however, that if your waiters have user_ids and sign into your app, then they could only have their sectors shown as favorites above the table. They wouldn't have to see all 20-30. And my apologies, I'm really not trying to "sell" you on my plugin. Just want to help you find a good solution.
you can display the filters above or below the table. https://filamentphp.com/docs/2.x/tables/filters#displaying-filters-above-or-below-the-table-content
Filament
Filters - Table Builder - Filament
The elegant TALL stack table builder for Laravel artisans.
nah no apologies you got a really nice plugin that is worth probably more money to time you did put into. The problem is that people are assigned sectors they will serve right before the event, so they need to quickly choose where they will be working at, and if there is a demand to move staff quickly they also need to easily choose another sectors to monitor
Great call @awcodes. I always forget about that!
oh 🙂 let me try this
Be sure to add
->columnSpan(4) (or whatever number) to make it as wide as possibleyeh this makes a difference now, thank you guys 🙂
One more question, is it possible to force to have these in one row all the time, and hide some filters on small resolutions?
I have tried with this but in smaller resolutions it just goes like in my screen.
Good question. There isn't a method you can use since at smaller screens the grid is
grid-cols-1. You might be able to override the filament-forms-component-container with css, but again that will probably change a lot of stuff.
Maybe there’s a way to set a new grid within the filters?Interestingly when I do not override it stacks into two rows for the same resolution but I can't recreate this with the override.
Hm, on the other hand this looks to work