Allow links in table headers

[apollo13]

Currently when a table header is sortable, the sort functionality is implemented via Javascript. I'd like to sort without javascript via a standard link to the server ala /some_page/?sort=-col3. Adjusting the HTML like this:

<th aria-sort="none" class="u-align--right">
  <a href="/some_page/?sort=-col3">Cores</a>
</th>

does work but has the following problem: The th styles set the pointer to cursor:

vanilla-framework/scss/_patterns_table-sortable.scss

Line 30 in 564d150

&[aria-sort='ascending']::after {

giving the impression that the whole cell is clickable but the link covers only the text leading to a bad UX.

Not sure about how to fix this best.

[syncronize-issues-to-jira]

Thank you for reporting us your feedback!

The internal ticket has been created: https://warthogs.atlassian.net/browse/WD-15546.

This message was autogenerated

[bartaz]

Good catch. Indeed, we make an assumption that the whole cell is clickable (as it is with our JS), so adding a link inside can make it confusing.

It may not be trivial for us to remove this assumption from Vanilla now (as the sortable functionality and styling depends on this currently).
A workaround could be to override the cursor styling on your side, by resetting it back to default:

This would do it for all the tables:

table th[aria-sort] {
    cursor: default;
}

Or you could introduce your own class to target specific tables:

table.p-table--sortable-on-server th[aria-sort] {
    cursor: default;
}

Would that help?

[apollo13]

Hi @bartaz, thank you for the quick reply. That does indeed work, but I'd love to have the whole cell clickable. I fully understand that this is not easy to achieve currently though.

[apollo13]

For others stumbling upon this I am currently fixing this via:

th a:visited {
    color: inherit;
}

table th[aria-sort] {
   cursor: default !important;
}

[bartaz]

Triage: we are not going to address this in current codebase. More flexibility in table header content can be a consideration for new architecture.