Table Column Header/Label Action issues with Sortable

I am trying to add an Action Group in a Column Label and wondering if that is possible? I have got a prototype but it's buggy. - Pass Blade View to Column Label - Blade view has $label + Livewire component - Livewire component has action group. - It works fine, triggers the action except: When I add sortable on that column as well. Then I run into issues: 1) Clicking the ActionGroup Icon doesn't open action group dropdown 2) I can no longer sort on that column 3) If I sort on any other column, the action goes away Anyone has any thoughts on this? Would really love if I can add action here and have it work smoothly P.S I am looking for action group in column heading (aka Column Label), not in table header, page header, cell action, record action, or bulk actions. Update 1: The problem is because when sortable is enabled, the parent tag of label is a button otherwise span <{{ $sortable ? 'span' : 'span' }} which means my actions group is inside a button when sortable is enabled which messes up events. When I change it to span in hard code, it works perfectly. I'm investigating more to find better solutions than having to override header-cell blade file
No description
No description
No description
No description
No description
11 Replies
robi
robi5mo ago
hi
PassionateDreamer
PassionateDreamerOP5mo ago
Hey
robi
robi5mo ago
hi nice to meet u can I help u?/ a u having any problems still ?
AnasGets
AnasGets5mo ago
interested of knowing how to do that same thing too ? adding actions in column headers
PassionateDreamer
PassionateDreamerOP5mo ago
My screenshots show the solution.
PassionateDreamer
PassionateDreamerOP5mo ago
Update: Colleague opened a PR for this https://github.com/filamentphp/filament/pull/16429
GitHub
Replace button with span for sortable column headers by anasgets111...
Description Improve table header semantics: Replace button with span for sortable columns What &amp;amp; Why: Replaces &amp;lt;button&amp;gt; wrapper with &amp;lt;span&amp;gt; + cursor-pointer for...
Hasan Tahseen
Hasan Tahseen5mo ago
I think we need some feature in filament so that we can implement this.
PassionateDreamer
PassionateDreamerOP5mo ago
The solution is pretty simple, take a look at the PR
Hasan Tahseen
Hasan Tahseen5mo ago
So after the PR is merged we should have the ability to customize the t the column header without breaking anything that filament provide right?
awcodes
awcodes5mo ago
Unfortunately, the solution isn't that simple. We can't just change that button to a span, since then it would violate accessibility.
PassionateDreamer
PassionateDreamerOP4mo ago
Yes In the comments, there's a comment mentioned that hopefully takes care of accessibility

Did you find this page helpful?