From 3db3be1d06578d45661f30e5fe84340072bb25be Mon Sep 17 00:00:00 2001
From: Julian Lobbes <julian.lobbes@protonmail.com>
Date: Tue, 23 May 2023 17:06:04 +0200
Subject: [PATCH] feat(frontend): create sortable data-table component

---
 backend/todo/crud/todos.py                    |   1 +
 backend/todo/routes/todos.py                  |   2 +-
 frontend/package-lock.json                    | 103 ++++---
 frontend/src/lib/data-table/Table.svelte      | 270 ++++++++++++++++++
 frontend/src/lib/data-table/Td.svelte         |  24 ++
 frontend/src/lib/data-table/Th.svelte         |  39 +++
 frontend/src/lib/utils/utils.ts               |   7 +
 frontend/src/routes/+layout.svelte            |   2 +-
 frontend/src/routes/+page.svelte              |   2 +-
 frontend/src/routes/[user]/+page.svelte       |   5 +
 frontend/src/routes/[user]/todos/+page.svelte |  52 ++++
 frontend/src/routes/[user]/todos/+page.ts     |  15 +
 frontend/src/routes/users/+page.svelte        | 260 +++--------------
 frontend/vite.config.ts                       |  24 +-
 14 files changed, 530 insertions(+), 276 deletions(-)
 create mode 100644 frontend/src/lib/data-table/Table.svelte
 create mode 100644 frontend/src/lib/data-table/Td.svelte
 create mode 100644 frontend/src/lib/data-table/Th.svelte
 create mode 100644 frontend/src/lib/utils/utils.ts
 create mode 100644 frontend/src/routes/[user]/+page.svelte
 create mode 100644 frontend/src/routes/[user]/todos/+page.svelte
 create mode 100644 frontend/src/routes/[user]/todos/+page.ts

diff --git a/backend/todo/crud/todos.py b/backend/todo/crud/todos.py
index 2fab703..03f1bdf 100644
--- a/backend/todo/crud/todos.py
+++ b/backend/todo/crud/todos.py
@@ -60,6 +60,7 @@ def read_todos_for_user(
         raise NotFoundException(f"User with id '{user_id}' not found.")
 
     db_todos = db.query(todomodel.TodoItem).filter(todomodel.TodoItem.user_id == user_id).order_by(sortorder.call(sortby.field)).offset(skip).limit(limit).all()
+
     return [todoschema.TodoItem.from_orm(db_todo) for db_todo in db_todos]
 
 
diff --git a/backend/todo/routes/todos.py b/backend/todo/routes/todos.py
index 2d21580..79e872d 100644
--- a/backend/todo/routes/todos.py
+++ b/backend/todo/routes/todos.py
@@ -48,7 +48,7 @@ def read_todos(
         db: Session = Depends(get_db)
     ):
     try:
-        return todocrud.read_todos_for_user(db=db, user_id=user_id, skip=skip, limit=limit)
+        return todocrud.read_todos_for_user(db=db, user_id=user_id, skip=skip, limit=limit, sortby=sortby, sortorder=sortorder)
     except InvalidFilterParameterException as e:
         raise HTTPException(400, fmt(str(e)))
     except NotFoundException as e:
diff --git a/frontend/package-lock.json b/frontend/package-lock.json
index 964f7d9..5729702 100644
--- a/frontend/package-lock.json
+++ b/frontend/package-lock.json
@@ -1971,11 +1971,12 @@
 			}
 		},
 		"node_modules/@sveltejs/vite-plugin-svelte": {
-			"version": "2.2.0",
-			"resolved": "https://registry.npmjs.org/@sveltejs/vite-plugin-svelte/-/vite-plugin-svelte-2.2.0.tgz",
-			"integrity": "sha512-KDtdva+FZrZlyug15KlbXuubntAPKcBau0K7QhAIqC5SAy0uDbjZwoexDRx0L0J2T4niEfC6FnA9GuQQJKg+Aw==",
+			"version": "2.3.0",
+			"resolved": "https://registry.npmjs.org/@sveltejs/vite-plugin-svelte/-/vite-plugin-svelte-2.3.0.tgz",
+			"integrity": "sha512-NbgDn5/auWfGYFip7DheDj49/JLE6VugdtdLJjnQASYxXqrQjl81xaZzQsoSAxWk+j2mOkmPFy56gV2i63FUnA==",
 			"dev": true,
 			"dependencies": {
+				"@sveltejs/vite-plugin-svelte-inspector": "^1.0.1",
 				"debug": "^4.3.4",
 				"deepmerge": "^4.3.1",
 				"kleur": "^4.1.5",
@@ -1991,6 +1992,23 @@
 				"vite": "^4.0.0"
 			}
 		},
+		"node_modules/@sveltejs/vite-plugin-svelte-inspector": {
+			"version": "1.0.1",
+			"resolved": "https://registry.npmjs.org/@sveltejs/vite-plugin-svelte-inspector/-/vite-plugin-svelte-inspector-1.0.1.tgz",
+			"integrity": "sha512-8ZXgDbAL1b2o7WHxnPsbkxTzZiZhMwOsCI/GFti3zFlh8unqJtUsgwRQV/XSULFcqkbZXz5v6MqMLSUpl3VKaA==",
+			"dev": true,
+			"dependencies": {
+				"debug": "^4.3.4"
+			},
+			"engines": {
+				"node": "^14.18.0 || >= 16"
+			},
+			"peerDependencies": {
+				"@sveltejs/vite-plugin-svelte": "^2.2.0",
+				"svelte": "^3.54.0",
+				"vite": "^4.0.0"
+			}
+		},
 		"node_modules/@sveltejs/vite-plugin-svelte/node_modules/magic-string": {
 			"version": "0.30.0",
 			"resolved": "https://registry.npmjs.org/magic-string/-/magic-string-0.30.0.tgz",
@@ -2201,9 +2219,9 @@
 			}
 		},
 		"node_modules/caniuse-lite": {
-			"version": "1.0.30001488",
-			"resolved": "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001488.tgz",
-			"integrity": "sha512-NORIQuuL4xGpIy6iCCQGN4iFjlBXtfKWIenlUuyZJumLRIindLb7wXM+GO8erEhb7vXfcnf4BAg2PrSDN5TNLQ==",
+			"version": "1.0.30001489",
+			"resolved": "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001489.tgz",
+			"integrity": "sha512-x1mgZEXK8jHIfAxm+xgdpHpk50IN3z3q3zP261/WS+uvePxW8izXuCu6AHz0lkuYTlATDehiZ/tNyYBdSQsOUQ==",
 			"dev": true,
 			"funding": [
 				{
@@ -2331,9 +2349,9 @@
 			}
 		},
 		"node_modules/devalue": {
-			"version": "4.3.1",
-			"resolved": "https://registry.npmjs.org/devalue/-/devalue-4.3.1.tgz",
-			"integrity": "sha512-Kc0TSP9IUU9eg55au5Q3YtqaYI2cgntVpunJV9Exbm9nvlBeTE5p2NqYHfpuXK6+VF2hF5PI+BPFPUti7e2N1g==",
+			"version": "4.3.2",
+			"resolved": "https://registry.npmjs.org/devalue/-/devalue-4.3.2.tgz",
+			"integrity": "sha512-KqFl6pOgOW+Y6wJgu80rHpo2/3H07vr8ntR9rkkFIRETewbf5GaYYcakYfiKz89K+sLsuPkQIZaXDMjUObZwWg==",
 			"dev": true
 		},
 		"node_modules/didyoumean": {
@@ -2357,9 +2375,9 @@
 			}
 		},
 		"node_modules/electron-to-chromium": {
-			"version": "1.4.402",
-			"resolved": "https://registry.npmjs.org/electron-to-chromium/-/electron-to-chromium-1.4.402.tgz",
-			"integrity": "sha512-gWYvJSkohOiBE6ecVYXkrDgNaUjo47QEKK0kQzmWyhkH+yoYiG44bwuicTGNSIQRG3WDMsWVZJLRnJnLNkbWvA==",
+			"version": "1.4.405",
+			"resolved": "https://registry.npmjs.org/electron-to-chromium/-/electron-to-chromium-1.4.405.tgz",
+			"integrity": "sha512-JdDgnwU69FMZURoesf9gNOej2Cms1XJFfLk24y1IBtnAdhTcJY/mXnokmpmxHN59PcykBP4bgUU98vLY44Lhuw==",
 			"dev": true
 		},
 		"node_modules/es6-promise": {
@@ -3265,9 +3283,9 @@
 			}
 		},
 		"node_modules/rollup": {
-			"version": "3.22.0",
-			"resolved": "https://registry.npmjs.org/rollup/-/rollup-3.22.0.tgz",
-			"integrity": "sha512-imsigcWor5Y/dC0rz2q0bBt9PabcL3TORry2hAa6O6BuMvY71bqHyfReAz5qyAqiQATD1m70qdntqBfBQjVWpQ==",
+			"version": "3.23.0",
+			"resolved": "https://registry.npmjs.org/rollup/-/rollup-3.23.0.tgz",
+			"integrity": "sha512-h31UlwEi7FHihLe1zbk+3Q7z1k/84rb9BSwmBSr/XjOCEaBJ2YyedQDuM0t/kfOS0IxM+vk1/zI9XxYj9V+NJQ==",
 			"dev": true,
 			"bin": {
 				"rollup": "dist/bin/rollup"
@@ -3910,12 +3928,13 @@
 			"dev": true
 		},
 		"node_modules/yaml": {
-			"version": "2.2.2",
-			"resolved": "https://registry.npmjs.org/yaml/-/yaml-2.2.2.tgz",
-			"integrity": "sha512-CBKFWExMn46Foo4cldiChEzn7S7SRV+wqiluAb6xmueD/fGyRHIhX8m14vVGgeFWjN540nKCNVj6P21eQjgTuA==",
+			"version": "2.3.0",
+			"resolved": "https://registry.npmjs.org/yaml/-/yaml-2.3.0.tgz",
+			"integrity": "sha512-8/1wgzdKc7bc9E6my5wZjmdavHLvO/QOmLG1FBugblEvY4IXrLjlViIOmL24HthU042lWTDRO90Fz1Yp66UnMw==",
 			"dev": true,
 			"engines": {
-				"node": ">= 14"
+				"node": ">= 14",
+				"npm": ">= 7"
 			}
 		}
 	},
@@ -5586,11 +5605,12 @@
 			}
 		},
 		"@sveltejs/vite-plugin-svelte": {
-			"version": "2.2.0",
-			"resolved": "https://registry.npmjs.org/@sveltejs/vite-plugin-svelte/-/vite-plugin-svelte-2.2.0.tgz",
-			"integrity": "sha512-KDtdva+FZrZlyug15KlbXuubntAPKcBau0K7QhAIqC5SAy0uDbjZwoexDRx0L0J2T4niEfC6FnA9GuQQJKg+Aw==",
+			"version": "2.3.0",
+			"resolved": "https://registry.npmjs.org/@sveltejs/vite-plugin-svelte/-/vite-plugin-svelte-2.3.0.tgz",
+			"integrity": "sha512-NbgDn5/auWfGYFip7DheDj49/JLE6VugdtdLJjnQASYxXqrQjl81xaZzQsoSAxWk+j2mOkmPFy56gV2i63FUnA==",
 			"dev": true,
 			"requires": {
+				"@sveltejs/vite-plugin-svelte-inspector": "^1.0.1",
 				"debug": "^4.3.4",
 				"deepmerge": "^4.3.1",
 				"kleur": "^4.1.5",
@@ -5610,6 +5630,15 @@
 				}
 			}
 		},
+		"@sveltejs/vite-plugin-svelte-inspector": {
+			"version": "1.0.1",
+			"resolved": "https://registry.npmjs.org/@sveltejs/vite-plugin-svelte-inspector/-/vite-plugin-svelte-inspector-1.0.1.tgz",
+			"integrity": "sha512-8ZXgDbAL1b2o7WHxnPsbkxTzZiZhMwOsCI/GFti3zFlh8unqJtUsgwRQV/XSULFcqkbZXz5v6MqMLSUpl3VKaA==",
+			"dev": true,
+			"requires": {
+				"debug": "^4.3.4"
+			}
+		},
 		"@types/cookie": {
 			"version": "0.5.1",
 			"resolved": "https://registry.npmjs.org/@types/cookie/-/cookie-0.5.1.tgz",
@@ -5746,9 +5775,9 @@
 			"dev": true
 		},
 		"caniuse-lite": {
-			"version": "1.0.30001488",
-			"resolved": "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001488.tgz",
-			"integrity": "sha512-NORIQuuL4xGpIy6iCCQGN4iFjlBXtfKWIenlUuyZJumLRIindLb7wXM+GO8erEhb7vXfcnf4BAg2PrSDN5TNLQ==",
+			"version": "1.0.30001489",
+			"resolved": "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001489.tgz",
+			"integrity": "sha512-x1mgZEXK8jHIfAxm+xgdpHpk50IN3z3q3zP261/WS+uvePxW8izXuCu6AHz0lkuYTlATDehiZ/tNyYBdSQsOUQ==",
 			"dev": true
 		},
 		"chokidar": {
@@ -5825,9 +5854,9 @@
 			"dev": true
 		},
 		"devalue": {
-			"version": "4.3.1",
-			"resolved": "https://registry.npmjs.org/devalue/-/devalue-4.3.1.tgz",
-			"integrity": "sha512-Kc0TSP9IUU9eg55au5Q3YtqaYI2cgntVpunJV9Exbm9nvlBeTE5p2NqYHfpuXK6+VF2hF5PI+BPFPUti7e2N1g==",
+			"version": "4.3.2",
+			"resolved": "https://registry.npmjs.org/devalue/-/devalue-4.3.2.tgz",
+			"integrity": "sha512-KqFl6pOgOW+Y6wJgu80rHpo2/3H07vr8ntR9rkkFIRETewbf5GaYYcakYfiKz89K+sLsuPkQIZaXDMjUObZwWg==",
 			"dev": true
 		},
 		"didyoumean": {
@@ -5848,9 +5877,9 @@
 			"integrity": "sha512-7GO6HghkA5fYG9TYnNxi14/7K9f5occMlp3zXAuSxn7CKCxt9xbNWG7yF8hTCSUchlfWSe3uLmlPfigevRItzQ=="
 		},
 		"electron-to-chromium": {
-			"version": "1.4.402",
-			"resolved": "https://registry.npmjs.org/electron-to-chromium/-/electron-to-chromium-1.4.402.tgz",
-			"integrity": "sha512-gWYvJSkohOiBE6ecVYXkrDgNaUjo47QEKK0kQzmWyhkH+yoYiG44bwuicTGNSIQRG3WDMsWVZJLRnJnLNkbWvA==",
+			"version": "1.4.405",
+			"resolved": "https://registry.npmjs.org/electron-to-chromium/-/electron-to-chromium-1.4.405.tgz",
+			"integrity": "sha512-JdDgnwU69FMZURoesf9gNOej2Cms1XJFfLk24y1IBtnAdhTcJY/mXnokmpmxHN59PcykBP4bgUU98vLY44Lhuw==",
 			"dev": true
 		},
 		"es6-promise": {
@@ -6498,9 +6527,9 @@
 			}
 		},
 		"rollup": {
-			"version": "3.22.0",
-			"resolved": "https://registry.npmjs.org/rollup/-/rollup-3.22.0.tgz",
-			"integrity": "sha512-imsigcWor5Y/dC0rz2q0bBt9PabcL3TORry2hAa6O6BuMvY71bqHyfReAz5qyAqiQATD1m70qdntqBfBQjVWpQ==",
+			"version": "3.23.0",
+			"resolved": "https://registry.npmjs.org/rollup/-/rollup-3.23.0.tgz",
+			"integrity": "sha512-h31UlwEi7FHihLe1zbk+3Q7z1k/84rb9BSwmBSr/XjOCEaBJ2YyedQDuM0t/kfOS0IxM+vk1/zI9XxYj9V+NJQ==",
 			"dev": true,
 			"requires": {
 				"fsevents": "~2.3.2"
@@ -6918,9 +6947,9 @@
 			"dev": true
 		},
 		"yaml": {
-			"version": "2.2.2",
-			"resolved": "https://registry.npmjs.org/yaml/-/yaml-2.2.2.tgz",
-			"integrity": "sha512-CBKFWExMn46Foo4cldiChEzn7S7SRV+wqiluAb6xmueD/fGyRHIhX8m14vVGgeFWjN540nKCNVj6P21eQjgTuA==",
+			"version": "2.3.0",
+			"resolved": "https://registry.npmjs.org/yaml/-/yaml-2.3.0.tgz",
+			"integrity": "sha512-8/1wgzdKc7bc9E6my5wZjmdavHLvO/QOmLG1FBugblEvY4IXrLjlViIOmL24HthU042lWTDRO90Fz1Yp66UnMw==",
 			"dev": true
 		}
 	}
diff --git a/frontend/src/lib/data-table/Table.svelte b/frontend/src/lib/data-table/Table.svelte
new file mode 100644
index 0000000..9adcf21
--- /dev/null
+++ b/frontend/src/lib/data-table/Table.svelte
@@ -0,0 +1,270 @@
+<script lang='ts'>
+  import { onMount } from 'svelte';
+  import { Icon, ChevronRight, ChevronLeft, ChevronDoubleRight, ChevronDoubleLeft } from 'svelte-hero-icons';
+  import Th from '$lib/data-table/Th.svelte';
+  import Td from '$lib/data-table/Td.svelte';
+
+  export let caption: string | null = null;
+  export let columns: Column[];
+
+  export let itemCountEndpoint: string;
+  export let itemsEndpoint: string;
+
+  type Column = {
+    field: string,
+    heading: string,
+    type?: string,
+    sortable?: boolean,
+  };
+
+  type TotalItemCountApiResponse = {
+    total: number
+  };
+
+  // API error message bodies are expected to be in one of the following formats:
+  interface ApiErrorMessage {
+    detail: string
+  };
+  interface ApiErrorList {
+    detail: { msg: string; loc?: string[]; type?: string }[]
+  };
+
+  type SortEvent = {
+    detail: {
+      order: null | 'asc' | 'desc',
+      field: string,
+    }
+  }
+  let currentSortField: string = columns[0].field;
+  let currentSortOrder: 'asc' | 'desc' = 'asc';
+
+  let currentState: 'finished' | 'loading' | 'error' = 'finished';
+  let errorMessages: string[] = [];
+
+  let currentItems: any[] = []; // TODO apply generics here
+  let totalItemCount: number | null = null;
+
+  const itemsPerPageOptions = [10, 25, 50, 100];
+  let currentItemsPerPage: number = itemsPerPageOptions[0];
+
+  let currentPage: number = 0;
+  let lastPage: number;
+  $: lastPage = totalItemCount === null ? 0 : Math.floor(totalItemCount / currentItemsPerPage);
+  $: currentItemsOffset = currentPage * currentItemsPerPage;
+
+  // The <select> field value is not bound directly to 'currentItemsPerPage', because we need to know
+  // its previous value to stay on the right page.
+  let selectedItemsPerPage: number;
+  async function handleItemsPerPageChange() {
+    currentPage = Math.floor(currentItemsOffset / selectedItemsPerPage);
+    currentItemsPerPage = selectedItemsPerPage;
+    await updateTable();
+  }
+
+  function handleCurrentPageInputFocussed(this: HTMLInputElement) {
+    this.select();
+  }
+
+  $: selectedCurrentPage = typeof currentPage === 'number' ? currentPage + 1 : 1;
+  async function handleCurrentPageInputChanged() {
+    if (selectedCurrentPage === currentPage + 1) {
+      return;
+    } else if (selectedCurrentPage < 1) {
+      // TODO show error message
+      console.warn(`Selected page number ${selectedCurrentPage} is smaller than 1.`);
+      selectedCurrentPage = currentPage + 1;
+      return;
+    } else if (selectedCurrentPage > lastPage + 1) {
+      // TODO show error message
+      console.warn(`Selected page number ${selectedCurrentPage} is greater than ${lastPage + 1}.`);
+      selectedCurrentPage = currentPage + 1;
+      return;
+    }
+
+    currentPage = selectedCurrentPage - 1;
+    await updateTable();
+  }
+
+  $: gotoPrevPageDisabled = currentState !== 'finished' || currentPage === 0 || lastPage === 0;
+  async function handleGotoPrevPage() {
+    if (gotoPrevPageDisabled) return;
+
+    currentPage -= 1;
+    await updateTable();
+  }
+
+  $: gotoNextPageDisabled = currentState !== 'finished' || currentPage === lastPage || lastPage === 0;
+  async function handleGotoNextPage() {
+    if (gotoNextPageDisabled) return;
+
+    currentPage += 1;
+    await updateTable();
+  }
+
+  $: gotoFirstPageDisabled = currentState !== 'finished' || currentPage === 0 || lastPage === 0;
+  async function handleGotoFirstPage() {
+    if (gotoFirstPageDisabled) return;
+
+    currentPage = 0;
+    await updateTable();
+  }
+
+  $: gotoLastPageDisabled = currentState !== 'finished' || currentPage === lastPage || lastPage === 0;
+  async function handleGotoLastPage() {
+    if (gotoLastPageDisabled) return;
+
+    currentPage = lastPage;
+    await updateTable();
+  }
+
+  async function getTotalItemCount(): Promise<number> {
+    const response = await fetch(itemCountEndpoint);
+    const json = await response.json();
+
+    if (!response.ok) {
+      // Try to parse error body as a known format
+      if ('detail' in json) {
+        if (typeof json.detail === 'string') {
+          const errorBody = json as ApiErrorMessage;
+          errorMessages.push(errorBody.detail);
+        } else {
+          const errorBody = json as ApiErrorList;
+          for (let detail of errorBody.detail) {
+            if (typeof detail.msg === 'string') errorMessages.push(detail.msg);
+          }
+        }
+      }
+      throw new Error(`API request failed with status ${response.status}: ${response.statusText}`);
+    }
+
+    const apiResponse = json as TotalItemCountApiResponse;
+    return apiResponse.total;
+  }
+
+  async function getItems<T>(offset: number = currentItemsOffset, count: number = currentItemsPerPage): Promise<T[]> {
+    const urlParameters = new URLSearchParams({
+      skip: `${offset}`,
+      limit: `${count}`,
+      sortby: `${currentSortField}`,
+      sortorder: `${currentSortOrder}`,
+    });
+
+    const response = await fetch(`${itemsEndpoint}?${urlParameters}`);
+    const json = await response.json();
+
+    if (!response.ok) {
+      // Try to parse error body as a known format
+      if ('detail' in json) {
+        if (typeof json.detail === 'string') {
+          const errorBody = json as ApiErrorMessage;
+          errorMessages.push(errorBody.detail);
+        } else {
+          const errorBody = json as ApiErrorList;
+          for (let detail of errorBody.detail) {
+            if (typeof detail.msg === 'string') errorMessages.push(detail.msg);
+          }
+        }
+      }
+      throw new Error(`API request failed with status ${response.status}: ${response.statusText}`);
+    }
+
+    const apiResponse = json as T[];
+    return apiResponse;
+  }
+
+  async function updateTable() {
+    try {
+      currentState = 'loading';
+      totalItemCount = await getTotalItemCount();
+      currentItems = await getItems();
+      currentState = 'finished';
+    } catch (error: any) {
+      if (!errorMessages.length) {
+        // Make sure we have an error message to show to the user
+        if (typeof error.message === 'string') {
+          errorMessages.push(error.message);
+        } else {
+          errorMessages.push("An unknown error occurred.");
+        }
+      }
+
+      currentState = 'error';
+    }
+  }
+
+  async function handleSortEvent(sortEvent: SortEvent) {
+    currentSortField = sortEvent.detail.field;
+    currentSortOrder = sortEvent.detail.order === null ? 'asc' : sortEvent.detail.order;
+    currentPage = 0;
+    await updateTable();
+  }
+
+  onMount(async () => {
+    await updateTable();
+  });
+</script>
+
+<table>
+  {#if caption !== null}
+    <caption>{caption}</caption>
+  {/if}
+  <thead>
+    <tr>
+      {#each columns as column}
+        <Th
+          on:sortEvent={handleSortEvent}
+          field={column.field}
+          heading={column.heading}
+          order={currentSortField === column.field ? currentSortOrder : null}
+          sortable={column.sortable ?? true}
+        />
+      {/each}
+    </tr>
+  </thead>
+  <tbody>
+    {#if currentState === 'finished'}
+      {#each currentItems as item}
+        <tr>
+          {#each columns as column}
+            <Td
+              data={item[column.field]}
+              type={column.type ?? 'string'}
+            />
+          {/each}
+        </tr>
+      {/each}
+    {:else if currentState === 'loading'}
+      <tr>
+        <td colspan={columns.length}>Loading...</td>
+      </tr>
+    {:else if currentState === 'error'}
+      {#each errorMessages as message}
+        <tr>
+          <td colspan={columns.length} class="text-center text-red-500">{message}</td>
+        </tr>
+      {/each}
+    {/if}
+  </tbody>
+</table>
+<button on:click={handleGotoFirstPage} disabled={gotoFirstPageDisabled}>
+  <Icon src={ChevronDoubleLeft} mini class="w-6 h-6" />
+</button>
+<button on:click={handleGotoPrevPage} disabled={gotoPrevPageDisabled}>
+  <Icon src={ChevronLeft} mini class="w-6 h-6" />
+</button>
+<input
+  type=number bind:value={selectedCurrentPage} min=0 max={lastPage} disabled={lastPage === 0}
+  on:change={handleCurrentPageInputChanged} on:focus={handleCurrentPageInputFocussed}
+>
+<span>of {lastPage + 1}</span>
+<button on:click={handleGotoNextPage} disabled={gotoNextPageDisabled}>
+  <Icon src={ChevronRight} mini class="w-6 h-6" />
+</button>
+<button on:click={handleGotoLastPage} disabled={gotoLastPageDisabled}>
+  <Icon src={ChevronDoubleRight} mini class="w-6 h-6" />
+</button>
+<select bind:value={selectedItemsPerPage} on:change={handleItemsPerPageChange}>
+  {#each itemsPerPageOptions as option}
+    <option selected={option === currentItemsPerPage} value={option}>{option}</option>
+  {/each}
+</select>
diff --git a/frontend/src/lib/data-table/Td.svelte b/frontend/src/lib/data-table/Td.svelte
new file mode 100644
index 0000000..93ad19f
--- /dev/null
+++ b/frontend/src/lib/data-table/Td.svelte
@@ -0,0 +1,24 @@
+<script lang="ts">
+  import { Icon, Check, XMark } from 'svelte-hero-icons';
+
+  export let data: any;
+  export let type: 'string' | 'date' | 'boolean' = 'string';
+</script>
+
+<td>
+  {#if type === 'date'}
+    {#if data !== null && data !== undefined}
+      {new Date(data).toLocaleDateString()}
+    {:else}
+      <!-- date undefined -->
+    {/if}
+  {:else if type === 'boolean'}
+    {#if data}
+      <Icon src={Check} mini class="w-6 h-6" />
+    {:else}
+      <Icon src={XMark} mini class="w-6 h-6" />
+    {/if}
+  {:else}
+    {data}
+  {/if}
+</td>
diff --git a/frontend/src/lib/data-table/Th.svelte b/frontend/src/lib/data-table/Th.svelte
new file mode 100644
index 0000000..0aeafb1
--- /dev/null
+++ b/frontend/src/lib/data-table/Th.svelte
@@ -0,0 +1,39 @@
+<script lang="ts">
+  import { createEventDispatcher } from 'svelte';
+  import { Icon, ArrowSmallDown, ArrowSmallUp } from 'svelte-hero-icons';
+
+  export let field: string;
+  export let heading: any = field;
+  export let order: null | 'asc' | 'desc' = null;
+  export let sortable: boolean = true;
+
+  function getNextSortOrder(): string | null {
+    if (order === null) {
+      return 'asc';
+    } else if (order === 'asc') {
+      return 'desc';
+    } else {
+      return null;
+    }
+  };
+
+  const eventDispatcher = createEventDispatcher();
+
+  function triggerSort(): void {
+    if (!sortable) return;
+
+    eventDispatcher('sortEvent', {
+      order: getNextSortOrder(),
+      field: field,
+    });
+  }
+</script>
+
+<th on:click={triggerSort} class="select-none" class:hover:cursor-pointer={sortable}>
+  {heading ? heading : ''}
+  {#if order === 'asc' && sortable}
+    <Icon src={ArrowSmallDown} mini class="w-6 h-6 inline" />
+  {:else if order === 'desc' && sortable}
+    <Icon src={ArrowSmallUp} mini class="w-6 h-6 inline" />
+  {/if}
+</th>
diff --git a/frontend/src/lib/utils/utils.ts b/frontend/src/lib/utils/utils.ts
new file mode 100644
index 0000000..096022d
--- /dev/null
+++ b/frontend/src/lib/utils/utils.ts
@@ -0,0 +1,7 @@
+/**
+ * Generates an array containing each number from 0 up to and excluding n in sequence.
+ * Works like Python's range() function when using a single argument.
+ */
+export function range(n: number): number[] {
+  return Array.from(Array(n).keys());
+}
diff --git a/frontend/src/routes/+layout.svelte b/frontend/src/routes/+layout.svelte
index 0e766c1..c18923b 100644
--- a/frontend/src/routes/+layout.svelte
+++ b/frontend/src/routes/+layout.svelte
@@ -21,7 +21,7 @@
   <meta name="theme-color" content="#ffffff">
 </svelte:head>
 
-<script>
+<script lang="ts">
   import "../app.css";
   import { page } from '$app/stores';
 
diff --git a/frontend/src/routes/+page.svelte b/frontend/src/routes/+page.svelte
index 778053c..30224ad 100644
--- a/frontend/src/routes/+page.svelte
+++ b/frontend/src/routes/+page.svelte
@@ -1,4 +1,4 @@
-<script>
+<script lang="ts">
   console.log(import.meta.env.MODE)
 </script>
 
diff --git a/frontend/src/routes/[user]/+page.svelte b/frontend/src/routes/[user]/+page.svelte
new file mode 100644
index 0000000..17068a1
--- /dev/null
+++ b/frontend/src/routes/[user]/+page.svelte
@@ -0,0 +1,5 @@
+<script lang="ts">
+
+</script>
+
+<h1>!</h1>
diff --git a/frontend/src/routes/[user]/todos/+page.svelte b/frontend/src/routes/[user]/todos/+page.svelte
new file mode 100644
index 0000000..90465f4
--- /dev/null
+++ b/frontend/src/routes/[user]/todos/+page.svelte
@@ -0,0 +1,52 @@
+<script lang="ts">
+  import Table from '$lib/data-table/Table.svelte'
+  import type { Column } from '$lib/data-table/Table.svelte';
+  import type { UserPage } from "./+page";
+
+  export let data: UserPage;
+
+  const cols: Column[] = [
+      {
+        field: "id",
+        heading: "ID",
+      },
+      {
+        field: "title",
+        heading: "Title",
+      },
+      {
+        field: "description",
+        heading: "Description",
+        sortable: false,
+      },
+      {
+        field: "done",
+        heading: "Done",
+        type: "boolean",
+      },
+      {
+        field: "created",
+        heading: "Created",
+        type: "date",
+      },
+      {
+        field: "updated",
+        heading: "Updated",
+        type: "date",
+      },
+      {
+        field: "finished",
+        heading: "Finished",
+        type: "date",
+      },
+  ];
+
+  const table = {
+    caption: `List of TODOs for user ${data.userId}`,
+    columns: cols,
+    itemsEndpoint: `/api/todo/user/${data.userId}/`,
+    itemCountEndpoint: `/api/todo/user/${data.userId}/total/`,
+  };
+</script>
+
+<Table {...table} />
diff --git a/frontend/src/routes/[user]/todos/+page.ts b/frontend/src/routes/[user]/todos/+page.ts
new file mode 100644
index 0000000..9a0960d
--- /dev/null
+++ b/frontend/src/routes/[user]/todos/+page.ts
@@ -0,0 +1,15 @@
+import { error } from '@sveltejs/kit';
+import type { PageLoad } from './$types';
+
+export const load: PageLoad = ({ params }) => {
+    // TODO check if user exists
+    return {
+        userId: params.user
+    }
+
+    //throw error(404, 'Not found');
+}
+
+export interface UserPage {
+    userId: number
+}
diff --git a/frontend/src/routes/users/+page.svelte b/frontend/src/routes/users/+page.svelte
index 674068d..f192861 100644
--- a/frontend/src/routes/users/+page.svelte
+++ b/frontend/src/routes/users/+page.svelte
@@ -1,227 +1,39 @@
-<script lang='ts'>
-  import { onMount } from 'svelte';
-  import {
-    Icon,
-    ChevronRight, ChevronLeft, ChevronDoubleRight, ChevronDoubleLeft,
-  } from 'svelte-hero-icons';
+<script lang="ts">
+  import Table from '$lib/data-table/Table.svelte'
 
-  type Item = {
-    id: number;
-    email: string;
-    first_name: string;
-    last_name: string;
-    created: Date;
-    updated: Date;
-  }
-  const _tableColumnCount = 6;
-
-  let currentState: 'finished' | 'loading' | 'error';
-  let errorMessages: string[] = [];
-
-  let currentItems: Item[] = [];
-  let totalItemCount: number | null;
-
-  const itemsPerPageOptions = [10, 25, 50, 100];
-  let currentItemsPerPage: number;
-
-  let currentPage: number;
-  let lastPage: number;
-  $: lastPage = totalItemCount === null ? 0 : Math.floor(totalItemCount / currentItemsPerPage);
-  $: currentItemsOffset = currentPage * currentItemsPerPage;
-
-  // The <select> field value is not bound directly to 'currentItemsPerPage', because we need to know
-  // its previous value to stay on the right page.
-  let selectedItemsPerPage: number;
-  async function handleItemsPerPageChange() {
-    currentPage = Math.floor(currentItemsOffset / selectedItemsPerPage);
-    currentItemsPerPage = selectedItemsPerPage;
-    await updateTable();
-  }
-
-  function handleCurrentPageInputFocussed(this: HTMLInputElement) {
-    this.select();
-  }
-
-  $: selectedCurrentPage = typeof currentPage === 'number' ? currentPage + 1 : 1;
-  async function handleCurrentPageInputChanged() {
-    if (selectedCurrentPage === currentPage + 1) {
-      return;
-    } else if (selectedCurrentPage < 1) {
-      // TODO show error message
-      console.warn(`Selected page number ${selectedCurrentPage} is smaller than 1.`);
-      selectedCurrentPage = currentPage + 1;
-      return;
-    } else if (selectedCurrentPage > lastPage + 1) {
-      // TODO show error message
-      console.warn(`Selected page number ${selectedCurrentPage} is greater than ${lastPage + 1}.`);
-      selectedCurrentPage = currentPage + 1;
-      return;
-    }
-
-    currentPage = selectedCurrentPage - 1;
-    await updateTable();
-  }
-
-  $: gotoPrevPageDisabled = currentState !== 'finished' || currentPage === 0 || lastPage === 0;
-  async function handleGotoPrevPage() {
-    if (gotoPrevPageDisabled) return;
-
-    currentPage -= 1;
-    await updateTable();
-  }
-
-  $: gotoNextPageDisabled = currentState !== 'finished' || currentPage === lastPage || lastPage === 0;
-  async function handleGotoNextPage() {
-    if (gotoNextPageDisabled) return;
-
-    currentPage += 1;
-    await updateTable();
-  }
-
-  $: gotoFirstPageDisabled = currentState !== 'finished' || currentPage === 0 || lastPage === 0;
-  async function handleGotoFirstPage() {
-    if (gotoFirstPageDisabled) return;
-
-    currentPage = 0;
-    await updateTable();
-  }
-
-  $: gotoLastPageDisabled = currentState !== 'finished' || currentPage === lastPage || lastPage === 0;
-  async function handleGotoLastPage() {
-    if (gotoLastPageDisabled) return;
-
-    currentPage = lastPage;
-    await updateTable();
-  }
-
-  interface ApiError {
-    // FIXME error message parsing doesn't work right now
-    detail: { msg: string; loc?: string[]; type?: string }[]
-  }
-
-  async function getTotalItemCount(): Promise<number> {
-    interface ApiResponse {
-      total: number
-    }
-
-    const response = await fetch(`/api/users/total/`);
-    const json = await response.json();
-
-    if (!response.ok) {
-      // Capture error messages from response body
-      const apiError = json as ApiError;
-      for (let detail of apiError.detail) {
-        errorMessages.push(detail.msg);
-      }
-      throw new Error(`API request failed with status ${response.status}: ${response.statusText}`);
-    }
-
-    const apiResponse = json as ApiResponse;
-    return apiResponse.total;
-  }
-
-  async function getItems(offset: number = currentItemsOffset, count: number = currentItemsPerPage): Promise<Item[]> {
-    const urlParameters = new URLSearchParams({
-      skip: `${offset}`,
-      limit: `${count}`,
-    });
-
-    const response = await fetch(`/api/users/?${urlParameters}`);
-    const json = await response.json();
-
-    if (!response.ok) {
-      // Capture error messages from response body
-      const apiError = json as ApiError;
-      for (let detail of apiError.detail) {
-        errorMessages.push(detail.msg);
-      }
-      throw new Error(`API request failed with status ${response.status}: ${response.statusText}`);
-    }
-
-    const apiResponse = json as Item[];
-    return apiResponse;
-  }
-
-  async function updateTable() {
-    try {
-      currentState = 'loading';
-      totalItemCount = await getTotalItemCount();
-      currentItems = await getItems();
-      currentState = 'finished';
-    } catch (error) {
-      console.log(error);
-      currentState = 'error';
-    }
-  }
-
-  onMount(async () => {
-    // Initialize vars
-    currentItems = [];
-    totalItemCount = null;
-    currentItemsPerPage  = itemsPerPageOptions[0];
-    currentPage = 0;
-    currentState = 'finished';
-
-    await updateTable();
-  });
+  const table = {
+    caption: "List of users",
+    columns: [
+      {
+        field: "id",
+        heading: "ID",
+      },
+      {
+        field: "email",
+        heading: "Email",
+      },
+      {
+        field: "first_name",
+        heading: "First Name",
+      },
+      {
+        field: "last_name",
+        heading: "Last Name",
+      },
+      {
+        field: "created",
+        heading: "Created",
+        type: 'date',
+      },
+      {
+        field: "updated",
+        heading: "Updated",
+        type: 'date',
+      },
+    ],
+    itemCountEndpoint: "/api/users/total/",
+    itemsEndpoint: "/api/users/",
+  };
 </script>
 
-<table>
-  <caption>List of users</caption>
-  <thead>
-    <tr>
-      <th>ID</th>
-      <th>Email</th>
-      <th>First Name</th>
-      <th>Last Name</th>
-      <th>Created</th>
-      <th>Updated</th>
-    </tr>
-  </thead>
-  <tbody>
-    {#if currentState === 'finished'}
-      {#each currentItems as user}
-        <tr>
-          <td>{user.id}</td>
-          <td>{user.email}</td>
-          <td>{user.first_name}</td>
-          <td>{user.last_name}</td>
-          <td>{new Date(user.created).toLocaleDateString()}</td>
-          <td>{new Date(user.updated).toLocaleDateString()}</td>
-        </tr>
-      {/each}
-    {:else if currentState === 'loading'}
-      <tr>
-        <td colspan={_tableColumnCount}>Loading...</td>
-      </tr>
-    {:else if currentState === 'error'}
-      <tr>
-        {#each errorMessages as message}
-          <td colspan={_tableColumnCount} class="text-red-500">{message}</td>
-        {/each}
-      </tr>
-    {/if}
-  </tbody>
-</table>
-<button on:click={handleGotoFirstPage} disabled={gotoFirstPageDisabled}>
-  <Icon src={ChevronDoubleLeft} mini class="w-6 h-6" />
-</button>
-<button on:click={handleGotoPrevPage} disabled={gotoPrevPageDisabled}>
-  <Icon src={ChevronLeft} mini class="w-6 h-6" />
-</button>
-<input
-  type=number bind:value={selectedCurrentPage} min=0 max={lastPage} disabled={lastPage === 0}
-  on:change={handleCurrentPageInputChanged} on:focus={handleCurrentPageInputFocussed}
->
-<span>of {lastPage + 1}</span>
-<button on:click={handleGotoNextPage} disabled={gotoNextPageDisabled}>
-  <Icon src={ChevronRight} mini class="w-6 h-6" />
-</button>
-<button on:click={handleGotoLastPage} disabled={gotoLastPageDisabled}>
-  <Icon src={ChevronDoubleRight} mini class="w-6 h-6" />
-</button>
-<select bind:value={selectedItemsPerPage} on:change={handleItemsPerPageChange}>
-  {#each itemsPerPageOptions as option}
-    <option selected={option === currentItemsPerPage} value={option}>{option}</option>
-  {/each}
-</select>
+<Table {...table} />
diff --git a/frontend/vite.config.ts b/frontend/vite.config.ts
index dff31fd..9dbeb72 100644
--- a/frontend/vite.config.ts
+++ b/frontend/vite.config.ts
@@ -2,16 +2,16 @@ import { sveltekit } from '@sveltejs/kit/vite';
 import { defineConfig } from 'vite';
 
 export default defineConfig({
-    envPrefix: 'PUBLIC_',
-	plugins: [sveltekit()],
-    server: {
-        host: '0.0.0.0',
-        port: 3000,
-        strictPort: true,
-    },
-    preview: {
-        host: '0.0.0.0',
-        port: 3000,
-        strictPort: true,
-    },
+  envPrefix: 'PUBLIC_',
+  plugins: [sveltekit()],
+  server: {
+    host: '0.0.0.0',
+    port: 3000,
+    strictPort: true,
+  },
+  preview: {
+    host: '0.0.0.0',
+    port: 3000,
+    strictPort: true,
+  },
 });