riyyi/website-vue
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

Components: Implement multiple column sorting on data-grid

Browse Source
This commit is contained in:
Riyyi
2024-11-26 00:08:51 +01:00
parent 431fd91017
commit d7b0ab97bc
2 changed files with 22 additions and 10 deletions
Download Patch File Download Diff File Expand all files Collapse all files
README.org
+2 -2
View File
@@ -26,8 +26,8 @@ $ bun run dev -o # automatically open in the browser
Build for production: Build for production:
#+BEGIN_SRC sh #+BEGIN_SRC sh
$ bun nuxi build # for server-side rendering or hybrid $ bun run build # for server-side rendering or hybrid
$ bun nuxi generate # for static site generation $ bun run generate # for static site generation
#+END_SRC #+END_SRC
Locally preview production build: Locally preview production build:
src/components/Todo/Browse.vue
+20 -8
View File
@@ -2,7 +2,7 @@
<div class="card"> <div class="card">
<ConfirmDialog></ConfirmDialog> <ConfirmDialog></ConfirmDialog>
<DataTable :value="computedTodos" :lazy="true" tableStyle="min-width: 50rem" removableSort <DataTable :value="computedTodos" :lazy="true" tableStyle="min-width: 50rem" removableSort
v-model:sortField="sortField" v-model:sortOrder="sortOrder"> :sortMode="'multiple'" v-model:multiSortMeta="multiSortMeta">
<Column field="number" header="#" /> <Column field="number" header="#" />
<Column field="id" header="ID" sortable /> <Column field="id" header="ID" sortable />
<Column field="title" header="Title" sortable /> <Column field="title" header="Title" sortable />
@@ -22,6 +22,7 @@ import { useConfirm } from "primevue/useconfirm";
import { useToast } from "primevue/usetoast"; import { useToast } from "primevue/usetoast";
import { useTodoStore } from "@/stores/todoStore"; import { useTodoStore } from "@/stores/todoStore";
import type { DataTableSortMeta } from "primevue/datatable";
import type { Todo } from "@/schemas/todo"; import type { Todo } from "@/schemas/todo";
const confirm = useConfirm(); const confirm = useConfirm();
@@ -29,16 +30,27 @@ const store = useTodoStore();
const toast = useToast(); const toast = useToast();
// Reactive bindings for sorting // Reactive bindings for sorting
const sortField = ref<string>(""); const multiSortMeta = ref<DataTableSortMeta[]>([]);
const sortOrder = ref<number>();
function sortTodos(): Todo[] { function sortTodos(): Todo[] {
let todos: Todo[] = JSON.parse(JSON.stringify(store.todos)); // deep copy let todos: Todo[] = JSON.parse(JSON.stringify(store.todos)); // deep copy
if (sortField.value) { // string or null // Loop in reverse order to apply the sorting correctly
todos = (sortOrder.value == 1) // 1 or -1 for (let i = multiSortMeta.value.length - 1; i >= 0; i--) {
? todos.sort((a, b) => a[sortField.value as keyof Todo]?.localeCompare(b[sortField.value as keyof Todo] || "") || 0)
: todos.sort((a, b) => b[sortField.value as keyof Todo]?.localeCompare(a[sortField.value as keyof Todo] || "") || 0); const sort: DataTableSortMeta = multiSortMeta.value[i];
const value = (item: Todo): string => {
if (typeof sort.field === "string") {
return item[sort.field as keyof Todo] || "";
}
else if (typeof sort.field === "function") {
return sort.field(item) || "";
}
return "";
};
todos.sort((a, b) => sort.order! * value(a).localeCompare(value(b)));
} }
return todos; return todos;
@@ -75,7 +87,7 @@ const removeTodo = (id: String) => {
}; };
</script> </script>
<style> <style scoped>
.pointer { .pointer {
cursor: pointer; cursor: pointer;
} }