Fixed binding issue

exceptionless · Sep 19, 2023 · 97ea5dd · 97ea5dd
1 parent 1b6340a
commit 97ea5dd
Show file tree

Hide file tree

Showing 7 changed files with 79 additions and 72 deletions.
diff --git a/src/Exceptionless.Web/ClientApp/package-lock.json b/src/Exceptionless.Web/ClientApp/package-lock.json
diff --git a/src/Exceptionless.Web/ClientApp/package.json b/src/Exceptionless.Web/ClientApp/package.json
@@ -23,14 +23,14 @@
 		"@sveltejs/adapter-static": "^2.0.3",
 		"@sveltejs/kit": "^1.25.0",
 		"@sveltejs/vite-plugin-svelte": "^2.4.6",
-		"@typescript-eslint/eslint-plugin": "^6.7.0",
-		"@typescript-eslint/parser": "^6.7.0",
+		"@typescript-eslint/eslint-plugin": "^6.7.2",
+		"@typescript-eslint/parser": "^6.7.2",
 		"autoprefixer": "^10.4.15",
 		"cross-env": "^7.0.3",
 		"eslint": "^8.49.0",
 		"eslint-config-prettier": "^9.0.0",
 		"eslint-plugin-svelte": "^2.33.1",
-		"postcss": "^8.4.29",
+		"postcss": "^8.4.30",
 		"prettier": "^3.0.3",
 		"prettier-plugin-svelte": "^3.0.3",
 		"prettier-plugin-tailwindcss": "^0.5.4",
@@ -45,10 +45,10 @@
 	"dependencies": {
 		"@exceptionless/browser": "^3.0.3",
 		"@iconify-json/mdi": "^1.1.54",
-		"@tanstack/svelte-table": "^8.9.11",
+		"@tanstack/svelte-table": "^8.10.0",
 		"@web3-storage/parse-link-header": "^3.1.0",
 		"class-validator": "^0.14.0",
-		"daisyui": "^3.7.4",
+		"daisyui": "^3.7.5",
 		"oidc-client-ts": "^2.2.5",
 		"svelte-local-storage-store": "^0.6.0",
 		"svelte-time": "^0.8.0",

diff --git a/src/Exceptionless.Web/ClientApp/resources.md b/src/Exceptionless.Web/ClientApp/resources.md
@@ -21,6 +21,10 @@
 -   <https://tanstack.com/table/v8/docs/examples/svelte/basic>
 -   <https://codesandbox.io/examples/package/@tanstack/svelte-table>
 -   <https://codesandbox.io/s/tanstack-table-example-svelte-basic-4jif2l?file=/src/App.svelte>
+-   <https://tailwindcomponents.com/component/free-tailwind-css-advance-table-component>
+-   <https://tailwindcomponents.com/component/table-1>
+-   <https://tuk.dev/components/webapp/table/advance_table>
+-   <https://github.dev/phartenfeller/sveltekit-1.0-sqlite-demo-app/tree/tut-13-tanstack-table-edit-row>
 
 ## State
 

diff --git a/src/Exceptionless.Web/ClientApp/src/lib/components/events/EventsTable.svelte b/src/Exceptionless.Web/ClientApp/src/lib/components/events/EventsTable.svelte
@@ -232,7 +232,7 @@
 
 	const dispatch = createEventDispatcher();
 	onMount(() => {
-		dispatch('table', $table);
+		dispatch('table', table);
 	});
 </script>
 

diff --git a/src/Exceptionless.Web/ClientApp/src/lib/components/events/EventsTailLogTable.svelte b/src/Exceptionless.Web/ClientApp/src/lib/components/events/EventsTailLogTable.svelte
@@ -141,7 +141,7 @@
 
 	const dispatch = createEventDispatcher();
 	onMount(() => {
-		dispatch('table', $table);
+		dispatch('table', table);
 	});
 </script>
 

diff --git a/src/Exceptionless.Web/ClientApp/src/lib/components/table/TableColumnPicker.svelte b/src/Exceptionless.Web/ClientApp/src/lib/components/table/TableColumnPicker.svelte
@@ -1,9 +1,11 @@
 <script lang="ts">
+	import type { Readable } from "svelte/store";
+
 	import ViewColumnIcon from '~icons/mdi/view-column';
 	import type { Table } from '@tanstack/svelte-table';
 
 	type TData = $$Generic;
-	export let table: Table<TData>;
+	export let table: Readable<Table<TData>>;
 </script>
 
 <div class="dropdown dropdown-bottom dropdown-end">
@@ -15,15 +17,15 @@
 				<span class="label-text">Toggle All</span>
 				<input
 					type="checkbox"
-					checked={table.getIsAllColumnsVisible()}
-					on:change={(e) => table.getToggleAllColumnsVisibilityHandler()(e)}
+					checked={$table.getIsAllColumnsVisible()}
+					on:change={(e) => $table.getToggleAllColumnsVisibilityHandler()(e)}
 					class="checkbox checkbox-xs"
 				/>
 			</label>
 		</div>
 
 		<div class="divider m-0"></div>
-		{#each table.getAllLeafColumns() as column}
+		{#each $table.getAllLeafColumns() as column}
 			{#if column.getCanHide()}
 				<div class="form-control">
 					<label class="cursor-pointer label">

diff --git a/src/Exceptionless.Web/ClientApp/src/routes/(app)/+page.svelte b/src/Exceptionless.Web/ClientApp/src/routes/(app)/+page.svelte
@@ -4,11 +4,12 @@
 	import TableColumnPicker from '$comp/table/TableColumnPicker.svelte';
 	import type { SummaryModel, SummaryTemplateKeys } from '$lib/models/api';
 	import type { Table } from '@tanstack/svelte-table';
+	import type { Readable } from "svelte/store";
 
 	let liveMode = true;
 	let showDrawer = false;
 	let currentSummary: SummaryModel<SummaryTemplateKeys>;
-	let currentTable: Table<SummaryModel<SummaryTemplateKeys>>;
+	let currentTable: Readable<Table<SummaryModel<SummaryTemplateKeys>>>;
 
 	function onRowClick({ detail }: CustomEvent<SummaryModel<SummaryTemplateKeys>>) {
 		currentSummary = detail;