add generic components for table sorting

src/lib/components/Table/SortableTh.svelte

@@ -0,0 +1,35 @@
+<script lang="ts">
+	import { createEventDispatcher, getContext, onDestroy } from 'svelte';
+	import type { Writable } from 'svelte/store';
+	import { IconSolid } from 'svelte-heros-v2';
+
+	let id = crypto.randomUUID();
+	let asc = false;
+	let { ascHeader } = getContext('sortableTr') as { ascHeader: Writable<null | string> };
+	ascHeader.subscribe((v) => {
+		if (v !== id) asc = false;
+	});
+
+	let dispatch = createEventDispatcher();
+
+	onDestroy(() => {
+		if ($ascHeader === id) $ascHeader = null;
+	});
+</script>
+
+<th>
+	<button
+		class="flex flex-center"
+		on:click={() => {
+			dispatch('sort', { asc: (asc = !asc) });
+			$ascHeader = id;
+		}}
+	>
+		<span class="mr-1"><slot /></span>
+		<IconSolid
+			name={$ascHeader === id && asc ? 'chevron-up-solid' : 'chevron-down-solid'}
+			width="12"
+			height="12"
+		/>
+	</button>
+</th>

src/lib/components/Table/SortableTr.svelte

@@ -0,0 +1,12 @@
+<script lang="ts">
+	import { setContext } from 'svelte';
+	import { writable } from 'svelte/store';
+
+	setContext('sortableTr', {
+		ascHeader: writable(null)
+	});
+</script>
+
+<tr {...$$restProps}>
+	<slot />
+</tr>