Add icon indicating that there is no active sorting #14972
Conversation
|
Hi, thanks for the PR! However, I personally am not a fan of how this looks (I find the two arrows too distracting and not consistent with the single arrows on active sorts), so I am going to close this. I also have not had many complaints about this UI before. |
|
Hi @danharrin I received feedback from our tester that this behavior is confusing for our end users. Combined with the linked discussion, that makes two instances of "complaints" about this issue. Looking at more examples of data tables, most of them have a (better) "not sorted" state indicator. Here are some examples: The last example is more similar to the Filament sorting table, but its "no active sort" indication is much clearer due to the color change. In contrast, the color change in the Filament table for active/inactive sort states is too subtle to serve as a clear indicator. Currently, it looks as though all columns are sorted in descending order by default. Only upon clicking and closely observing the column header color does the minimal visual change become apparent. How about removing the icon entirely in the "not sorted" state and displaying the chevron-down icon when hovering over the table header to indicate that sorting is possible? When sorting is active, the corresponding icon (e.g., chevron-up or chevron-down) would appear. This approach would maintain the current icon style while providing a clear indication of whether sorting is active, inactive, or possible. |
| @@ -53,7 +53,13 @@ class="fi-ta-header-cell-label text-sm font-semibold text-gray-950 dark:text-whi | |||
| @if ($sortable) | |||
| <x-filament::icon | |||
| :alias="$activelySorted && $sortDirection === 'asc' ? 'tables::header-cell.sort-asc-button' : 'tables::header-cell.sort-desc-button'" | |||
There was a problem hiding this comment.
I don't want to remove the icon, as then I do not think it would be clear which columns are sortable.
One idea you could PR is a new alias here: tables::header-cell.sort-button, and then you can register your own icon for the "not sorted" state: https://filamentphp.com/docs/3.x/support/icons#replacing-the-default-icons
There was a problem hiding this comment.
This seems to be the best of both worlds! I didn't know of this feature. Awesome! I'll implement this in the PR
Description
Add visible indication that the table is not being sorted on initial state. This fixes #9627
Visual changes
Before (initial not sorted state)
After (initial not sorted state)
Functional changes
composer cscommand.