canonical / canonical/vanilla-framework

[Bug]: Table sorting broken for numerical cell values

Open
#5,742 3 comments 0 reactions 0 assignees View on GitHub

Nobody has claimed this yet.

Bug 🐛
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**

Image

Contributor guide

Open the contributing guide

First steps

  1. Read the whole issue, then the project's contributing guide.
  2. Comment on the issue to say you are picking it up — it saves two people doing the same work.
  3. Fork the repository and make your change on a branch.
  4. 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

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.