canonical / canonical/vanilla-framework
[Bug]: Table sorting broken for numerical cell values
Nobody has claimed this yet.
- Dominant language
- HTML
- Stars
- 984
- Forks
- 216
- Avg merge
- 3d 13h
- Merged PRs (30d)
- 3
Description
**Describe the bug**
Sorting table columns doesn't work as expected for numerical values: given sorting is alphabetical, values like 1, 2, 10, 20 are sorted 1, 10, 2, 20 with the provided javascript. Sorting should be smart enough to account for this, including decimals and negative numbers and ignoring units if the same for all cells, both appended (e.g. GiB) and prepended (currency).
Probably should sort first any figures, then alphabetically, ascending. I wonder though if for numbers descending is a better default (it can be for instance in web analytics).
Split from https://github.com/canonical/vanilla-framework/pull/5736
**To Reproduce**
I edited the _table-sortable .html file, replacing the table code with this for better testing:
```html
Status
Cores
RAM
Disks
Ready
1
1.1 GiB
2
Failed
10
1 GiB
Pending
Pending
8
3.9 GiB
3
Ready
8
10.9 GiB
Unknown
```
Example is available in /docs/examples/patterns/tables/table-sortable
**Expected behavior**
Numeric values are sorted correctly when clicking on the column header.
**Screenshots**
Contributor guide
First steps
- Read the whole issue, then the project's contributing guide.
- Comment on the issue to say you are picking it up — it saves two people doing the same work.
- Fork the repository and make your change on a branch.
- Open a pull request that references the issue number.
Research direction
Start with /docs/examples/patterns/tables/table-sortable and inspect the provided JavaScript and its current sorting behavior using the reproduction table. Clarify the ordering for mixed numeric and text values, decimals, negative numbers, and shared prepended or appended units. Done means clicking a column header sorts numeric values numerically while preserving the expected alphabetical fallback.
Written by the indexing model from the issue text.
Assessment
- Tech stack
- javascript
- Domain
- frontend
- Issue type
- Bug
- Difficulty
- 4/5
- Estimated time
- 3-5 days
- Activity status
- Quiet
- Clarity
- Mostly clear
- Newbie friendliness
- 48/100