Skip to content

Commit

Permalink
Handle percentages with numeric-sort class (#133)
Browse files Browse the repository at this point in the history
* Support for percentages in numeric-sort.

* Format readme and swap cdn scripts.
  • Loading branch information
kyle-wannacott authored Mar 30, 2024
1 parent 8f38e5f commit f30d496
Show file tree
Hide file tree
Showing 4 changed files with 71 additions and 16 deletions.
9 changes: 5 additions & 4 deletions README.md
Original file line number Diff line number Diff line change
Expand Up @@ -21,13 +21,13 @@
- <b>Option 1</b>: Load as script from a Content Delivery Network (CDN):

```javascript
<script src="https://cdn.jsdelivr.net/npm/table-sort-js/table-sort.js"></script>
<script src="https://cdn.jsdelivr.net/npm/table-sort-js/table-sort.min.js"></script>
```

Or Minified (smaller size, but harder to debug!):
Or non-minified version (larger size, but easier to debug!):

```javascript
<script src="https://cdn.jsdelivr.net/npm/table-sort-js/table-sort.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/table-sort-js/table-sort.js"></script>
```

Example on how to use table-sort-js with [HTML](https://leewannacott.github.io/table-sort-js/docs/html5.html)
Expand Down Expand Up @@ -72,7 +72,8 @@ Examples on using table-sort-js with frontend frameworks such as [React.js](http

| &lt;th&gt; Inferred Classes. | Description |
| ---------------------------- | ----------------------------------------------------------------------------------------------------------------------------------- |
| "numeric-sort" | Sorts numbers including decimals - Positive, Negative (in both minus and parenthesis representations). Supports for common currencies e.g ($£€¥) |
| "numeric-sort" | Sorts numbers including decimals - Positive, Negative (in both minus and parenthesis representations). |
| | Supports common currencies e.g ($£€¥) and percentage signs e.g (0.39%) |
| "dates-dmy-sort" | Sorts dates in dd/mm/yyyy format. e.g (18/10/1995). Can use "/" or "-" as separator. |
| "dates-ymd-sort" | Sorts dates in [ISO 8601](https://en.wikipedia.org/wiki/ISO_8601) yyyy/mm/dd format. e.g (2021/10/28). Use "/" or "-" as separator. |
| "file-size-sort" | Sorts file sizes(B->TiB) uses the binary prefix. (e.g 10 B, 100 KiB, 1 MiB); optional space between number and prefix. |
Expand Down
25 changes: 13 additions & 12 deletions public/table-sort.js
Original file line number Diff line number Diff line change
Expand Up @@ -65,8 +65,7 @@ function tableSortJs(testingTableSortJS = false, domDocumentWindow = document) {
const dmyRegex = /^(\d\d?)[/-](\d\d?)[/-]((\d\d)?\d\d)/;
const ymdRegex = /^(\d\d\d\d)[/-](\d\d?)[/-](\d\d?)/;
const numericRegex =
/^-?(?:[$£¥฿Ξξ¤¿\u20A1\uFFE0]\d{1,3}(?:[',]\d{3})*(?:\.\d+)?|\d+(?:\.\d+)?(?:[',]\d{3})*?)$/;

/^-?(?:[$£¥฿Ξξ¤¿\u20A1\uFFE0]\d{1,3}(?:[',]\d{3})*(?:\.\d+)?|\d+(?:\.\d+)?(?:[',]\d{3})*?)(?:%?)$/;

const inferableClasses = {
runtime: { regexp: runtimeRegex, class: "runtime-sort", count: 0 },
Expand All @@ -93,11 +92,11 @@ function tableSortJs(testingTableSortJS = false, domDocumentWindow = document) {
for (let key of Object.keys(inferableClasses)) {
let classRegexp = inferableClasses[key].regexp;
let columnOfTd = testingTableSortJS
? tableColumn.textContent
: tableColumn.innerText;
if (columnOfTd !== undefined && columnOfTd.match(classRegexp) ) {
foundMatch = true;
inferableClasses[key].count++;
? tableColumn.textContent
: tableColumn.innerText;
if (columnOfTd !== undefined && columnOfTd.match(classRegexp)) {
foundMatch = true;
inferableClasses[key].count++;
}
if (inferableClasses[key].count >= threshold) {
th.classList.add(inferableClasses[key].class);
Expand Down Expand Up @@ -360,10 +359,13 @@ function tableSortJs(testingTableSortJS = false, domDocumentWindow = document) {
}

function handleNumbers(str1, str2) {
const currencyAndComma = /[$£¥฿Ξξ¤¿\u20A1\uFFE0, ]/g
str1 = str1.replace(currencyAndComma, "");
str2 = str2.replace(currencyAndComma, "");
const [num1, num2] = [parseNumberFromString(str1),parseNumberFromString(str2)];
const matchCurrencyCommaAndPercent = /[$£¥฿Ξξ¤¿\u20A1\uFFE0,% ]/g;
str1 = str1.replace(matchCurrencyCommaAndPercent, "");
str2 = str2.replace(matchCurrencyCommaAndPercent, "");
const [num1, num2] = [
parseNumberFromString(str1),
parseNumberFromString(str2),
];

if (!isNaN(num1) && !isNaN(num2)) {
return num1 - num2;
Expand Down Expand Up @@ -564,7 +566,6 @@ function tableSortJs(testingTableSortJS = false, domDocumentWindow = document) {
}
timesClickedColumn += 1;


const hasThClass = {
dataSort: th.classList.contains("data-sort"),
fileSize: th.classList.contains("file-size-sort"),
Expand Down
49 changes: 49 additions & 0 deletions test/table.test.js
Original file line number Diff line number Diff line change
Expand Up @@ -617,6 +617,55 @@ test("Sort all combination of negative and positive integers and decimal numbers
});
});

test("numeric-sort - percentages including negative", () => {
expect(
createTestTable(
{
col0: {
td: [
"0.88%",
"-0.98%",
"0.22%",
"-0.28%",
"0.27%",
"0.273%",
"(0.273%)",
"(0.893%)",
"22.273%",
"100.273%",
"10.273%",
"-10.273%",
"-81.273%",
"-82.273%",
"11.823%",
"11.803%",
],
},
},
{ classTags: "numeric-sort" }
)
).toStrictEqual({
col0: [
"-82.273%",
"-81.273%",
"-10.273%",
"-0.98%",
"(0.893%)",
"-0.28%",
"(0.273%)",
"0.22%",
"0.27%",
"0.273%",
"0.88%",
"10.273%",
"11.803%",
"11.823%",
"22.273%",
"100.273%",
],
});
});

test("numeric-sort - various currency", () => {
expect(
createTestTable(
Expand Down
4 changes: 4 additions & 0 deletions test/tagsInferenceTable.test.js
Original file line number Diff line number Diff line change
Expand Up @@ -150,12 +150,16 @@ test("InferSortClassesOnTH - NUMERIC", () => {
"-£755,905",
],
},
col5: {
td: ["0.88%", "-0.98%", "0.22%", "0.28%", "0.57%"],
},
})
).toStrictEqual([
"numeric-sort",
"numeric-sort",
"numeric-sort",
"numeric-sort",
"numeric-sort",
"numeric-sort",
]);
});

0 comments on commit f30d496

Please sign in to comment.