51 lines
1.6 KiB
JavaScript
51 lines
1.6 KiB
JavaScript
function data() {
|
|
return {
|
|
sortBy: "",
|
|
sortAsc: false,
|
|
sortByColumn($event) {
|
|
if (this.sortBy === $event.target.innerText) {
|
|
if (this.sortAsc) {
|
|
this.sortBy = "";
|
|
this.sortAsc = false;
|
|
} else {
|
|
this.sortAsc = !this.sortAsc;
|
|
}
|
|
} else {
|
|
this.sortBy = $event.target.innerText;
|
|
}
|
|
|
|
let rows = this.getTableRows()
|
|
.sort(
|
|
this.sortCallback(
|
|
Array.from($event.target.parentNode.children).indexOf(
|
|
$event.target
|
|
)
|
|
)
|
|
)
|
|
.forEach((tr) => {
|
|
this.$refs.tbody.appendChild(tr);
|
|
});
|
|
},
|
|
getTableRows() {
|
|
return Array.from(this.$refs.tbody.querySelectorAll("tr"));
|
|
},
|
|
getCellValue(row, index) {
|
|
return row.children[index].innerText;
|
|
},
|
|
sortCallback(index) {
|
|
return (a, b) =>
|
|
((row1, row2) => {
|
|
return row1 !== "" &&
|
|
row2 !== "" &&
|
|
!isNaN(row1) &&
|
|
!isNaN(row2)
|
|
? row1 - row2
|
|
: row1.toString().localeCompare(row2);
|
|
})(
|
|
this.getCellValue(this.sortAsc ? a : b, index),
|
|
this.getCellValue(this.sortAsc ? b : a, index)
|
|
);
|
|
}
|
|
};
|
|
}
|