Skip to content

Commit 35d68aa

Browse files
kyle-wannacottkyle-wannacott
committed
NPM 1.13.0; implemented th classes (inferred dates-dym-sort and optional dates-mdy-sort).
1 parent b33d3c3 commit 35d68aa

File tree

7 files changed

+184
-29
lines changed

7 files changed

+184
-29
lines changed

‎README.md

+5-5
Original file line numberDiff line numberDiff line change
@@ -44,7 +44,7 @@ Refer to the documenation for examples on how to use table-sort-js with [HTML](h
4444

4545
| <table> classes | Description |
4646
| --------------------- | ------------------------------------------------------------------------------------------------------------- |
47-
| "table-sort" | Make the table sortable! (Words, numbers, dates, file sizes)... |
47+
| "table-sort" | Make the table sortable! (Words, numbers, dates, file sizes)... |
4848
| "table-arrows" | Display ascending or descending triangles. |
4949
| "no-class-infer" | Turns off inference for adding sort classes automatically i.e (file-size-sort, runtime-sort, dates-dmy-sort). |
5050
| "remember-sort" | If clicking on different columns remembers sort of the original column. |
@@ -57,10 +57,10 @@ Refer to the documenation for examples on how to use table-sort-js with [HTML](h
5757
| "dates-mdy-sort" | Sorts dates in mm/dd/yyyy format. e.g (12/28/2023). Can use "/" or "-" or "." as separator. Overides inferred "dates-dmy-sort" class. |
5858

5959
| <th> Inferred Classes. | Description |
60-
| --------------------------------------------------- | --------------------------------------------------------------------------------------------------------------------- |
61-
| "dates-dmy-sort" | Sorts dates in dd/mm/yyyy format. e.g (18/10/1995). Can use "/" or "-" or "." as separator. |
62-
| "runtime-sort" | Sorts runtime in hours minutes and seconds e.g (10h 1m 20s). Useful for sorting the GitHub actions Run time column... |
63-
| "file-size-sort" | Sorts file sizes(B->TiB) uses the binary prefix. (e.g KiB). Input data ideally in Bytes e.g (10b or 10B) |
60+
| ---------------------------- | --------------------------------------------------------------------------------------------------------------------- |
61+
| "dates-dmy-sort" | Sorts dates in dd/mm/yyyy format. e.g (18/10/1995). Can use "/" or "-" or "." as separator. |
62+
| "runtime-sort" | Sorts runtime in hours minutes and seconds e.g (10h 1m 20s). Useful for sorting the GitHub actions Run time column... |
63+
| "file-size-sort" | Sorts file sizes(B->TiB) uses the binary prefix. (e.g KiB). Input data ideally in Bytes e.g (10b or 10B) |
6464

6565
| <th> Classes that change defaults. | Description |
6666
| ---------------------------------------- | ------------------------------------------------------------------------------------------------------------------- |

‎browser-extension/manifest.json

+1-1
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,7 @@
22
"manifest_version": 2,
33
"author": "Lee Wannacott",
44
"name": "table-sort-js",
5-
"version": "1.12.1",
5+
"version": "1.13.0",
66
"description": "Makes tables sortable using table-sort-js: https://github.com/LeeWannacott/table-sort-js",
77
"icons": { "48": "icons/t.png" },
88
"browser_action": {

‎browser-extension/table-sort.js

+76-5
Original file line numberDiff line numberDiff line change
@@ -70,25 +70,30 @@ function tableSortJs(testingTableSortJS = false, domDocumentWindow = document) {
7070
for (let [columnIndex, th] of tableHeadHeaders.entries()) {
7171
const regexMinutesAndSeconds = /^(\d+h)?\s?(\d+m)?\s?(\d+s)?$/i;
7272
const regexFileSizeSort = /^([.0-9]+)\s?(B|KB|KiB|MB|MiB|GB|GiB|TB|TiB)/i;
73+
const regexDates = /^(\d\d?)[\/\.-](\d\d?)[\/\.-]((\d\d)?\d\d)$/;
7374
let runtimeSortCounter = 0,
74-
fileSizeSortCounter = 0;
75-
75+
fileSizeSortCounter = 0,
76+
datesSortCounter = 0;
7677
let tableColumnLength = th.parentElement.childElementCount;
7778
for (let tr of tableRows) {
78-
let runtimeSortMatch, fileSizeSortMatch;
79+
let runtimeSortMatch, fileSizeSortMatch, datesSortMatch;
7980
const tableColumn = tr.querySelectorAll("td").item(columnIndex);
8081
if (tableColumn.innerText) {
8182
runtimeSortMatch = tableColumn.innerText.match(
8283
regexMinutesAndSeconds
8384
);
8485
fileSizeSortMatch = tableColumn.innerText.match(regexFileSizeSort);
86+
datesSortMatch = tableColumn.innerText.match(regexDates);
8587
}
8688
if (runtimeSortMatch) {
8789
runtimeSortCounter++;
8890
}
8991
if (fileSizeSortMatch) {
9092
fileSizeSortCounter++;
9193
}
94+
if (datesSortMatch) {
95+
datesSortCounter++;
96+
}
9297
}
9398
// TODO: refactor this into one function called addInferredClasses that loops over sort classes and counters
9499
addInferredClass(
@@ -103,6 +108,12 @@ function tableSortJs(testingTableSortJS = false, domDocumentWindow = document) {
103108
fileSizeSortCounter,
104109
"file-size-sort"
105110
);
111+
addInferredClass(
112+
th,
113+
tableColumnLength,
114+
datesSortCounter,
115+
"dates-dmy-sort"
116+
);
106117
}
107118
}
108119

@@ -190,7 +201,8 @@ function tableSortJs(testingTableSortJS = false, domDocumentWindow = document) {
190201
columnOfTd = tr.querySelectorAll("td").item(columnIndex).innerText;
191202
}
192203
let match = columnOfTd.match(regexMinutesAndSeconds);
193-
let [minutesInSeconds, hours, seconds, timeinSeconds] = [0, 0, 0, 0];
204+
let [minutesInSeconds, hours, seconds] = [0, 0, 0];
205+
let timeinSeconds = columnOfTd;
194206
if (match) {
195207
const regexHours = match[1];
196208
if (regexHours) {
@@ -214,6 +226,45 @@ function tableSortJs(testingTableSortJS = false, domDocumentWindow = document) {
214226
}
215227
}
216228

229+
function sortDates(dateFormat, tableRows, columnData) {
230+
try {
231+
for (let [i, tr] of tableRows.entries()) {
232+
let columnOfTd;
233+
const regexDate = /^(\d\d?)[./-](\d\d?)[./-]((\d\d)?\d\d)$/;
234+
columnOfTd = tr.querySelectorAll("td").item(columnIndex).textContent;
235+
let match = columnOfTd.match(regexDate);
236+
let [years, days, months] = [0, 0, 0];
237+
let numberToSort = columnOfTd;
238+
if (match) {
239+
const regexFirstNumber = match[1];
240+
const regexSecondNumber = match[2];
241+
const regexYears = match[3];
242+
if (regexFirstNumber && regexSecondNumber) {
243+
if (dateFormat === "mdy") {
244+
days = regexSecondNumber;
245+
months = regexFirstNumber;
246+
} else {
247+
days = regexFirstNumber;
248+
months = regexSecondNumber;
249+
}
250+
}
251+
if (regexYears) {
252+
years = regexYears;
253+
}
254+
numberToSort = Number(
255+
years +
256+
String(months).padStart(2, "0") +
257+
String(days).padStart(2, "0")
258+
);
259+
}
260+
columnData.push(`${numberToSort}#${i}`);
261+
columnIndexAndTableRow[columnData[i]] = tr.innerHTML;
262+
}
263+
} catch (e) {
264+
console.log(e);
265+
}
266+
}
267+
217268
let [timesClickedColumn, columnIndexesClicked] = [0, []];
218269

219270
function rememberSort(timesClickedColumn, columnIndexesClicked) {
@@ -245,6 +296,8 @@ function tableSortJs(testingTableSortJS = false, domDocumentWindow = document) {
245296
columnData,
246297
isFileSize,
247298
isTimeSort,
299+
isSortDateDayMonthYear,
300+
isSortDateMonthDayYear,
248301
isDataAttribute,
249302
colSpanData,
250303
colSpanSum,
@@ -264,7 +317,14 @@ function tableSortJs(testingTableSortJS = false, domDocumentWindow = document) {
264317
if (isFileSize) {
265318
fileSizeColumnTextAndRow[columnData[i]] = tr.innerHTML;
266319
}
267-
if (!isFileSize && !isDataAttribute && !isTimeSort) {
320+
// These classes already handle pushing to column and setting the tr html.
321+
if (
322+
!isFileSize &&
323+
!isDataAttribute &&
324+
!isTimeSort &&
325+
!isSortDateDayMonthYear &&
326+
!isSortDateMonthDayYear
327+
) {
268328
columnData.push(`${tdTextContent}#${i}`);
269329
columnIndexAndTableRow[`${tdTextContent}#${i}`] = tr.innerHTML;
270330
}
@@ -405,6 +465,15 @@ function tableSortJs(testingTableSortJS = false, domDocumentWindow = document) {
405465
sortByRuntime(visibleTableRows, columnData);
406466
}
407467

468+
const isSortDateDayMonthYear = th.classList.contains("dates-dmy-sort");
469+
const isSortDateMonthDayYear = th.classList.contains("dates-mdy-sort");
470+
// pick mdy first to override the inferred default class which is dmy.
471+
if (isSortDateMonthDayYear) {
472+
sortDates("mdy", visibleTableRows, columnData);
473+
} else if (isSortDateDayMonthYear) {
474+
sortDates("dmy", visibleTableRows, columnData);
475+
}
476+
408477
const isRememberSort = sortableTable.classList.contains("remember-sort");
409478
if (!isRememberSort) {
410479
rememberSort(timesClickedColumn, columnIndexesClicked);
@@ -417,6 +486,8 @@ function tableSortJs(testingTableSortJS = false, domDocumentWindow = document) {
417486
tableRows: visibleTableRows,
418487
columnData,
419488
isFileSize,
489+
isSortDateDayMonthYear,
490+
isSortDateMonthDayYear,
420491
isDataAttribute,
421492
isTimeSort,
422493
colSpanData,

‎npm/README.md

+20-11
Original file line numberDiff line numberDiff line change
@@ -12,6 +12,7 @@
1212
- [Documentation.](https://leewannacott.github.io/table-sort-js/docs/about.html)
1313
(work in progress)
1414
- [npm package.](https://www.npmjs.com/package/table-sort-js)
15+
- [firefox browser extension](https://addons.mozilla.org/en-US/firefox/addon/table-sort-js/)
1516

1617
## Install instructions.
1718

@@ -41,23 +42,31 @@ Refer to the documenation for examples on how to use table-sort-js with [HTML](h
4142

4243
#### Classes:
4344

44-
| <table> classes | Description |
45-
| --------------------- | -------------------------------------------------------------------------------------------- |
46-
| "table-sort" | Make the table sortable! (Words, numbers)... |
47-
| "table-arrows" | Display ascending or descending triangles. |
48-
| "no-class-infer" | Turns off inference for adding sort classes automatically (file-size-sort and runtime-sort). |
49-
| "remember-sort" | If clicking on different columns remembers sort of the original column. |
45+
| <table> classes | Description |
46+
| --------------------- | ------------------------------------------------------------------------------------------------------------- |
47+
| "table-sort" | Make the table sortable! (Words, numbers, dates, file sizes)... |
48+
| "table-arrows" | Display ascending or descending triangles. |
49+
| "no-class-infer" | Turns off inference for adding sort classes automatically i.e (file-size-sort, runtime-sort, dates-dmy-sort). |
50+
| "remember-sort" | If clicking on different columns remembers sort of the original column. |
5051

5152
| <th> classes | Description |
5253
| ------------------ | --------------------------------------------------------------------------------------------------------------------------------------- |
53-
| "order-by-desc" | Order by descending on first click. (default is aescending) |
5454
| "data-sort" | Sort by [data attributes](https://developer.mozilla.org/en-US/docs/Learn/HTML/Howto/Use_data_attributes), e.g <td data-sort="42"> |
5555
| "onload-sort" | Sort column on loading of the page. Simulates a click from the user. (can only sort onload for one column) |
56-
| "file-size-sort" | Sort file sizes(B->TiB) uses the binary prefix. (e.g KiB) |
57-
| "runtime-sort" | Sorts runtime in minutes and seconds e.g (1m 20s). Useful for sorting the GitHub actions Run time column... |
5856
| "disable-sort" | Disallow sorting the table by this specific column. |
59-
| "alpha-sort" | Sort alphabetically (z11,z2); default is [natural sort](https://en.wikipedia.org/wiki/Natural_sort_order) (z2,z11). |
60-
| "punct-sort" | Sort punctuation; default ignores punctuation. |
57+
| "dates-mdy-sort" | Sorts dates in mm/dd/yyyy format. e.g (12/28/2023). Can use "/" or "-" or "." as separator. Overides inferred "dates-dmy-sort" class. |
58+
59+
| <th> Inferred Classes. | Description |
60+
| ---------------------------- | --------------------------------------------------------------------------------------------------------------------- |
61+
| "dates-dmy-sort" | Sorts dates in dd/mm/yyyy format. e.g (18/10/1995). Can use "/" or "-" or "." as separator. |
62+
| "runtime-sort" | Sorts runtime in hours minutes and seconds e.g (10h 1m 20s). Useful for sorting the GitHub actions Run time column... |
63+
| "file-size-sort" | Sorts file sizes(B->TiB) uses the binary prefix. (e.g KiB). Input data ideally in Bytes e.g (10b or 10B) |
64+
65+
| <th> Classes that change defaults. | Description |
66+
| ---------------------------------------- | ------------------------------------------------------------------------------------------------------------------- |
67+
| "order-by-desc" | Order by descending on first click. (default is aescending) |
68+
| "alpha-sort" | Sort alphabetically (z11,z2); default is [natural sort](https://en.wikipedia.org/wiki/Natural_sort_order) (z2,z11). |
69+
| "punct-sort" | Sort punctuation; default ignores punctuation. |
6170

6271
#### Development:
6372

‎npm/package.json

+1-1
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
{
22
"name": "table-sort-js",
3-
"version": "1.12.1",
3+
"version": "1.13.0",
44
"description": "A JavaScript client-side HTML table sorting library with no dependencies required.",
55
"license": "MIT",
66
"repository": "LeeWannacott/table-sort-js",

0 commit comments

Comments
 (0)