Skip to content

Commit

Permalink
Feature: dates-ymd-sort iso 8061 yyyy/mm/dd sort! :=) (#85)
Browse files Browse the repository at this point in the history 
* Implemented iso 8061 yyyy/mm/dd sort! :=)

* Refactor: dateSort to be less verbose.

* Remove iso date inference with . delim as could be decimal etc...

* Update docs for yyyy/mm/dd ISO date.
  • Loading branch information
@LeeWannacott
LeeWannacott committed May 12, 2023
1 parent 9bb6870 commit 2e93b27
Show file tree
Hide file tree
Showing 4 changed files with 71 additions and 50 deletions.
27 changes: 14 additions & 13 deletions README.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -45,22 +45,23 @@ Refer to the documenation for examples on how to use table-sort-js with [HTML](h
| <table> classes | Description |
| --------------------- | ------------------------------------------------------------------------------------------------------------- |
| "table-sort" | Make the table sortable! (Words, numbers, dates, file sizes)... |
| "table-arrows" | Display ascending or descending triangles. |
| "no-class-infer" | Turns off inference for adding sort classes automatically i.e (file-size-sort, runtime-sort, dates-dmy-sort). |
| "table-arrows" | Display ascending or descending triangles. |
| "remember-sort" | If clicking on different columns remembers sort of the original column. |

| <th> classes | Description |
| ------------------ | --------------------------------------------------------------------------------------------------------------------------------------- |
| "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"> |
| "onload-sort" | Sort column on loading of the page. Simulates a click from the user. (can only sort onload for one column) |
| "disable-sort" | Disallow sorting the table by this specific column. |
| "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. |

| <th> Inferred Classes. | Description |
| ---------------------------- | --------------------------------------------------------------------------------------------------------------------- |
| "dates-dmy-sort" | Sorts dates in dd/mm/yyyy format. e.g (18/10/1995). Can use "/" or "-" or "." as separator. |
| "runtime-sort" | Sorts runtime in hours minutes and seconds e.g (10h 1m 20s). Useful for sorting the GitHub actions Run time column... |
| "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) |
| <th> classes | Description |
| ------------------ | ---------------------------------------------------------------------------------------------------------------------------------------- |
| "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"> |
| "dates-mdy-sort" | Sorts dates in US style mm/dd/yyyy format;. e.g (12/28/2023). Can use "/" or "-" as separator. Overides inferred "dates-dmy-sort" class. |
| "onload-sort" | Sort column on loading of the page. Simulates a click from the user. (can only sort onload for one column) |
| "disable-sort" | Disallow sorting the table by this specific column. |

| <th> Inferred Classes. | Description |
| ---------------------------- | ----------------------------------------------------------------------------------------------------------------------------------- |
| "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 KiB). Input data ideally in Bytes e.g (10b or 10B) |
| "runtime-sort" | Sorts runtime in hours minutes and seconds e.g (10h 1m 20s). Useful for sorting the GitHub actions Run time column... |

| <th> Classes that change defaults. | Description |
| ---------------------------------------- | ------------------------------------------------------------------------------------------------------------------- |
Expand Down
4 changes: 2 additions & 2 deletions public/index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -23,7 +23,7 @@ <h1>Manual testing of table sort js</h1>
<tr>
<td>Franklin</td>
<td>Benjamin</td>
<td>1706,1,17</td>
<td>1706/1/17</td>
<td>1</td>
<td>k-level</td>
<td>1h 1m 17s</td>
Expand All @@ -33,7 +33,7 @@ <h1>Manual testing of table sort js</h1>
<tr>
<td>da Vinci</td>
<td>Zarlo</td>
<td>1452.4.15</td>
<td>1452-4-15</td>
<td>13000</td>
<td></td>
<td>1m 45s</td>
Expand Down
77 changes: 42 additions & 35 deletions public/table-sort.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -71,49 +71,51 @@ function tableSortJs(testingTableSortJS = false, domDocumentWindow = document) {
const regexMinutesAndSeconds = /^(\d+h)?\s?(\d+m)?\s?(\d+s)?$/i;
const regexFileSizeSort = /^([.0-9]+)\s?(B|KB|KiB|MB|MiB|GB|GiB|TB|TiB)/i;
// Doesn't infer dates with delimiter "."; as could capture semantic version numbers.
const regexDates = /^(\d\d?)[/-](\d\d?)[/-]((\d\d)?\d\d)$/;
let runtimeSortCounter = 0,
fileSizeSortCounter = 0,
datesSortCounter = 0;
const datesRegex = /^(\d\d?)[/-](\d\d?)[/-]((\d\d)?\d\d)/;
const regexISODates = /^(\d\d\d\d)[/-](\d\d?)[/-](\d\d?)/;
let runtimeCounter = 0,
fileSizeCounter = 0,
datesCounter = 0,
isoDatesCounter = 0;
let tableColumnLength = th.parentElement.childElementCount;
for (let tr of tableRows) {
let runtimeSortMatch, fileSizeSortMatch, datesSortMatch;
let runtimeSortMatch, fileSizeSortMatch, datesMatch, isoDatesMatch;
const tableColumn = tr.querySelectorAll("td").item(columnIndex);
if (tableColumn.innerText) {
runtimeSortMatch = tableColumn.innerText.match(
regexMinutesAndSeconds
);
fileSizeSortMatch = tableColumn.innerText.match(regexFileSizeSort);
datesSortMatch = tableColumn.innerText.match(regexDates);
datesMatch = tableColumn.innerText.match(datesRegex);
isoDatesMatch = tableColumn.innerText.match(regexISODates);
}
if (runtimeSortMatch) {
runtimeSortCounter++;
runtimeCounter++;
}
if (fileSizeSortMatch) {
fileSizeSortCounter++;
fileSizeCounter++;
}
if (datesSortMatch) {
datesSortCounter++;
if (datesMatch) {
datesCounter++;
}
if (isoDatesMatch) {
isoDatesCounter++;
}
}
// TODO: refactor this into one function called addInferredClasses that loops over sort classes and counters
addInferredClass(th, tableColumnLength, runtimeCounter, "runtime-sort");
addInferredClass(
th,
tableColumnLength,
runtimeSortCounter,
"runtime-sort"
);
addInferredClass(
th,
tableColumnLength,
fileSizeSortCounter,
fileSizeCounter,
"file-size-sort"
);
addInferredClass(th, tableColumnLength, datesCounter, "dates-dmy-sort");
addInferredClass(
th,
tableColumnLength,
datesSortCounter,
"dates-dmy-sort"
isoDatesCounter,
"dates-ymd-sort"
);
}
}
Expand Down Expand Up @@ -227,31 +229,30 @@ function tableSortJs(testingTableSortJS = false, domDocumentWindow = document) {
}
}

function sortDates(dateFormat, tableRows, columnData) {
function sortDates(datesFormat, tableRows, columnData) {
try {
for (let [i, tr] of tableRows.entries()) {
let columnOfTd;
const regexDates = /^(\d\d?)[./-](\d\d?)[./-]((\d\d)?\d\d)$/;
let columnOfTd, datesRegex;
if (datesFormat === "mdy" || datesFormat === "dmy") {
datesRegex = /^(\d\d?)[./-](\d\d?)[./-]((\d\d)?\d\d)/;
} else if (datesFormat === "ymd") {
datesRegex = /^(\d\d\d\d)[./-](\d\d?)[./-](\d\d?)/;
}
columnOfTd = tr.querySelectorAll("td").item(columnIndex).textContent;
let match = columnOfTd.match(regexDates);
let match = columnOfTd.match(datesRegex);
let [years, days, months] = [0, 0, 0];
let numberToSort = columnOfTd;
if (match) {
const regexFirstNumber = match[1];
const regexSecondNumber = match[2];
const regexYears = match[3];
if (regexFirstNumber && regexSecondNumber) {
if (dateFormat === "mdy") {
days = regexSecondNumber;
months = regexFirstNumber;
const [regPos1, regPos2, regPos3] = [match[1], match[2], match[3]];
if (regPos1 && regPos2 && regPos3) {
if (datesFormat === "mdy") {
[months, days, years] = [regPos1, regPos2, regPos3];
} else if (datesFormat === "ymd") {
[years, months, days] = [regPos1, regPos2, regPos3];
} else {
days = regexFirstNumber;
months = regexSecondNumber;
[days, months, years] = [regPos1, regPos2, regPos3];
}
}
if (regexYears) {
years = regexYears;
}
numberToSort = Number(
years +
String(months).padStart(2, "0") +
Expand Down Expand Up @@ -299,6 +300,7 @@ function tableSortJs(testingTableSortJS = false, domDocumentWindow = document) {
isTimeSort,
isSortDateDayMonthYear,
isSortDateMonthDayYear,
isSortDateYearMonthDay,
isDataAttribute,
colSpanData,
colSpanSum,
Expand All @@ -324,6 +326,7 @@ function tableSortJs(testingTableSortJS = false, domDocumentWindow = document) {
!isDataAttribute &&
!isTimeSort &&
!isSortDateDayMonthYear &&
!isSortDateYearMonthDay &&
!isSortDateMonthDayYear
) {
columnData.push(`${tdTextContent}#${i}`);
Expand Down Expand Up @@ -468,9 +471,12 @@ function tableSortJs(testingTableSortJS = false, domDocumentWindow = document) {

const isSortDateDayMonthYear = th.classList.contains("dates-dmy-sort");
const isSortDateMonthDayYear = th.classList.contains("dates-mdy-sort");
const isSortDateYearMonthDay = th.classList.contains("dates-ymd-sort");
// pick mdy first to override the inferred default class which is dmy.
if (isSortDateMonthDayYear) {
sortDates("mdy", visibleTableRows, columnData);
} else if (isSortDateYearMonthDay) {
sortDates("ymd", visibleTableRows, columnData);
} else if (isSortDateDayMonthYear) {
sortDates("dmy", visibleTableRows, columnData);
}
Expand All @@ -489,6 +495,7 @@ function tableSortJs(testingTableSortJS = false, domDocumentWindow = document) {
isFileSize,
isSortDateDayMonthYear,
isSortDateMonthDayYear,
isSortDateYearMonthDay,
isDataAttribute,
isTimeSort,
colSpanData,
Expand Down
13 changes: 13 additions & 0 deletions test/table.test.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -352,3 +352,16 @@ test("dates-mdy-sort: US style mm/dd/yyyy; delim . or / or -", () => {
],
});
});

test("dates-ymd-sort: ISO 8601 style yyyy/mm/dd; delim . or / or -", () => {
expect(
createTestTable(
{
col0: ["2023/09/6", "2023-03-9", "2023.12.16", "2023/4/6", "2023/4/32"],
},
{ classTags: "dates-ymd-sort" }
)
).toStrictEqual({
col0: ["2023-03-9", "2023/4/6", "2023/4/32", "2023/09/6", "2023.12.16"],
});
});

0 comments on commit 2e93b27

Please sign in to comment.