canonical / canonical/vanilla-framework

Allow links in table headers

Open
#5,362 5 comments 0 reactions 0 assignees View on GitHub
P3 Triaged Triaged: Pragma
Dominant language
HTML
Stars
983
Forks
216
Avg merge
3d 13h
Merged PRs (30d)
3

Description

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:
```html

Cores

```
does work but has the following problem: The th styles set the pointer to cursor: https://github.com/canonical/vanilla-framework/blob/564d150ebcb19faf1654fbc248b8182f24f59e49/scss/_patterns_table-sortable.scss#L30 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.

Contributor guide

Open the contributing guide

Research direction

Start with scss/_patterns_table-sortable.scss around line 30 and review how sortable table headers set the cursor and related styles. Check the supplied HTML link pattern, then verify that the link provides server-side sorting while the header's clickable-area styling no longer suggests that the entire cell is linked.

Written by the indexing model from the issue text.

Assessment

Tech stack
css, html, sass
Domain
design, frontend
Issue type
Feature
Difficulty
2/5
Estimated time
1-3 hours
Activity status
Stale
Clarity
Mostly clear
Newbie friendliness
42/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.