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




11 Replies
hi
Hey
hi
nice to meet u
can I help u?/
a u having any problems still ?
interested of knowing how to do that same thing too ? adding actions in column headers
My screenshots show the solution.
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; Why:
Replaces &lt;button&gt; wrapper with &lt;span&gt; + cursor-pointer for...
I think we need some feature in filament so that we can implement this.
The solution is pretty simple, take a look at the PR
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?
Unfortunately, the solution isn't that simple. We can't just change that button to a span, since then it would violate accessibility.
Yes
In the comments, there's a comment mentioned that hopefully takes care of accessibility