From 6e01b52e7af8387527598e92d06595602b5bd12c Mon Sep 17 00:00:00 2001
From: Scooter1337 <lucav007@hotmail.com>
Date: Thu, 21 Mar 2024 00:32:14 +0100
Subject: [PATCH 1/8] Add 'no tasks found' if there are 0 rows being displayed
 by the table.

---
 .../routes/examples/tasks/(components)/data-table.svelte   | 7 +++++++
 1 file changed, 7 insertions(+)

diff --git a/apps/www/src/routes/examples/tasks/(components)/data-table.svelte b/apps/www/src/routes/examples/tasks/(components)/data-table.svelte
index 32df16a9b..4616f5cdc 100644
--- a/apps/www/src/routes/examples/tasks/(components)/data-table.svelte
+++ b/apps/www/src/routes/examples/tasks/(components)/data-table.svelte
@@ -215,6 +215,13 @@
 						</Table.Row>
 					</Subscribe>
 				{/each}
+				{#if $pageRows.length === 0}
+					<Table.Row>
+						<Table.Cell colspan={columns.length} class="h-24 text-center">
+							No tasks found.
+						</Table.Cell>
+					</Table.Row>
+				{/if}
 			</Table.Body>
 		</Table.Root>
 	</div>

From c1d6b0a8dc6837de384382687c063bb363d67ad0 Mon Sep 17 00:00:00 2001
From: Scooter1337 <lucav007@hotmail.com>
Date: Thu, 21 Mar 2024 01:28:12 +0100
Subject: [PATCH 2/8] Now aligns with the original, and recreated the original
 ternary statement in react-shadcn with an if statement.

---
 .../tasks/(components)/data-table.svelte      | 41 ++++++++++---------
 1 file changed, 21 insertions(+), 20 deletions(-)

diff --git a/apps/www/src/routes/examples/tasks/(components)/data-table.svelte b/apps/www/src/routes/examples/tasks/(components)/data-table.svelte
index 4616f5cdc..3fbe4ab1b 100644
--- a/apps/www/src/routes/examples/tasks/(components)/data-table.svelte
+++ b/apps/www/src/routes/examples/tasks/(components)/data-table.svelte
@@ -196,29 +196,30 @@
 				{/each}
 			</Table.Header>
 			<Table.Body {...$tableBodyAttrs}>
-				{#each $pageRows as row (row.id)}
-					<Subscribe rowAttrs={row.attrs()} let:rowAttrs>
-						<Table.Row {...rowAttrs}>
-							{#each row.cells as cell (cell.id)}
-								<Subscribe attrs={cell.attrs()} let:attrs>
-									<Table.Cell {...attrs}>
-										{#if cell.id === "task"}
-											<div class="w-[80px]">
+				{#if $pageRows.length > 0}
+					{#each $pageRows as row (row.id)}
+						<Subscribe rowAttrs={row.attrs()} let:rowAttrs>
+							<Table.Row {...rowAttrs}>
+								{#each row.cells as cell (cell.id)}
+									<Subscribe attrs={cell.attrs()} let:attrs>
+										<Table.Cell {...attrs}>
+											{#if cell.id === "task"}
+												<div class="w-[80px]">
+													<Render of={cell.render()} />
+												</div>
+											{:else}
 												<Render of={cell.render()} />
-											</div>
-										{:else}
-											<Render of={cell.render()} />
-										{/if}
-									</Table.Cell>
-								</Subscribe>
-							{/each}
-						</Table.Row>
-					</Subscribe>
-				{/each}
-				{#if $pageRows.length === 0}
+											{/if}
+										</Table.Cell>
+									</Subscribe>
+								{/each}
+							</Table.Row>
+						</Subscribe>
+					{/each}
+				{:else}
 					<Table.Row>
 						<Table.Cell colspan={columns.length} class="h-24 text-center">
-							No tasks found.
+							No results.
 						</Table.Cell>
 					</Table.Row>
 				{/if}

From e166b668ad06db64e2adc6a4522ad3ca923430c6 Mon Sep 17 00:00:00 2001
From: Scooter1337 <lucav007@hotmail.com>
Date: Thu, 21 Mar 2024 01:28:12 +0100
Subject: [PATCH 3/8] Now aligns with the original, and recreated the original
 ternary statement in react-shadcn with an if statement.

---
 .../tasks/(components)/data-table.svelte      | 41 ++++++++++---------
 1 file changed, 21 insertions(+), 20 deletions(-)

diff --git a/apps/www/src/routes/examples/tasks/(components)/data-table.svelte b/apps/www/src/routes/examples/tasks/(components)/data-table.svelte
index 4616f5cdc..ed6073fa7 100644
--- a/apps/www/src/routes/examples/tasks/(components)/data-table.svelte
+++ b/apps/www/src/routes/examples/tasks/(components)/data-table.svelte
@@ -196,29 +196,30 @@
 				{/each}
 			</Table.Header>
 			<Table.Body {...$tableBodyAttrs}>
-				{#each $pageRows as row (row.id)}
-					<Subscribe rowAttrs={row.attrs()} let:rowAttrs>
-						<Table.Row {...rowAttrs}>
-							{#each row.cells as cell (cell.id)}
-								<Subscribe attrs={cell.attrs()} let:attrs>
-									<Table.Cell {...attrs}>
-										{#if cell.id === "task"}
-											<div class="w-[80px]">
+				{#if $pageRows.length}
+					{#each $pageRows as row (row.id)}
+						<Subscribe rowAttrs={row.attrs()} let:rowAttrs>
+							<Table.Row {...rowAttrs}>
+								{#each row.cells as cell (cell.id)}
+									<Subscribe attrs={cell.attrs()} let:attrs>
+										<Table.Cell {...attrs}>
+											{#if cell.id === "task"}
+												<div class="w-[80px]">
+													<Render of={cell.render()} />
+												</div>
+											{:else}
 												<Render of={cell.render()} />
-											</div>
-										{:else}
-											<Render of={cell.render()} />
-										{/if}
-									</Table.Cell>
-								</Subscribe>
-							{/each}
-						</Table.Row>
-					</Subscribe>
-				{/each}
-				{#if $pageRows.length === 0}
+											{/if}
+										</Table.Cell>
+									</Subscribe>
+								{/each}
+							</Table.Row>
+						</Subscribe>
+					{/each}
+				{:else}
 					<Table.Row>
 						<Table.Cell colspan={columns.length} class="h-24 text-center">
-							No tasks found.
+							No results.
 						</Table.Cell>
 					</Table.Row>
 				{/if}

From aaa18ae16df37923e4c95dca737aaaa570f63e02 Mon Sep 17 00:00:00 2001
From: Scooter1337 <lucav007@hotmail.com>
Date: Thu, 21 Mar 2024 01:31:58 +0100
Subject: [PATCH 4/8] Fix: i'm terrible at merging

---
 .../src/routes/examples/tasks/(components)/data-table.svelte    | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/apps/www/src/routes/examples/tasks/(components)/data-table.svelte b/apps/www/src/routes/examples/tasks/(components)/data-table.svelte
index 99416c523..ed6073fa7 100644
--- a/apps/www/src/routes/examples/tasks/(components)/data-table.svelte
+++ b/apps/www/src/routes/examples/tasks/(components)/data-table.svelte
@@ -219,7 +219,7 @@
 				{:else}
 					<Table.Row>
 						<Table.Cell colspan={columns.length} class="h-24 text-center">
-							No results. No results.
+							No results.
 						</Table.Cell>
 					</Table.Row>
 				{/if}

From aaae93b37c740aa855b8ef7db72d75df66944463 Mon Sep 17 00:00:00 2001
From: Scooter1337 <lucav007@hotmail.com>
Date: Thu, 21 Mar 2024 01:39:31 +0100
Subject: [PATCH 5/8] rows per page 1:1 original

---
 .../examples/tasks/(components)/data-table-pagination.svelte  | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/apps/www/src/routes/examples/tasks/(components)/data-table-pagination.svelte b/apps/www/src/routes/examples/tasks/(components)/data-table-pagination.svelte
index 864558e95..7b283c184 100644
--- a/apps/www/src/routes/examples/tasks/(components)/data-table-pagination.svelte
+++ b/apps/www/src/routes/examples/tasks/(components)/data-table-pagination.svelte
@@ -18,7 +18,7 @@
 </script>
 
 <div class="flex items-center justify-between px-2">
-	<div class="flex-1 text-sm text-muted-foreground">
+	<div class="text-muted-foreground flex-1 text-sm">
 		{Object.keys($selectedDataIds).length} of{" "}
 		{$rows.length} row(s) selected.
 	</div>
@@ -29,7 +29,7 @@
 				onSelectedChange={(selected) => pageSize.set(Number(selected?.value))}
 				selected={{ value: 10, label: "10" }}
 			>
-				<Select.Trigger class="w-[180px]">
+				<Select.Trigger class="h-8 w-[70px]">
 					<Select.Value placeholder="Select page size" />
 				</Select.Trigger>
 				<Select.Content>

From 3bd267fd834126e29da4cc40b6e859a1d1e9e9f4 Mon Sep 17 00:00:00 2001
From: Scooter1337 <lucav007@hotmail.com>
Date: Thu, 21 Mar 2024 02:17:13 +0100
Subject: [PATCH 6/8] Hidable columns

---
 .../data-table-column-header.svelte           | 34 +++++++++++++++++--
 .../data-table-view-options.svelte            | 20 ++++++-----
 .../tasks/(components)/data-table.svelte      | 10 +++---
 3 files changed, 49 insertions(+), 15 deletions(-)

diff --git a/apps/www/src/routes/examples/tasks/(components)/data-table-column-header.svelte b/apps/www/src/routes/examples/tasks/(components)/data-table-column-header.svelte
index 314dfd0e2..1eb465673 100644
--- a/apps/www/src/routes/examples/tasks/(components)/data-table-column-header.svelte
+++ b/apps/www/src/routes/examples/tasks/(components)/data-table-column-header.svelte
@@ -1,10 +1,13 @@
 <script lang="ts">
+	import EyeNone from "svelte-radix/EyeNone.svelte";
 	import ArrowDown from "svelte-radix/ArrowDown.svelte";
 	import ArrowUp from "svelte-radix/ArrowUp.svelte";
 	import CaretSort from "svelte-radix/CaretSort.svelte";
 	import { cn } from "$lib/utils.js";
 	import { Button } from "$lib/registry/new-york/ui/button/index.js";
 	import * as DropdownMenu from "$lib/registry/new-york/ui/dropdown-menu/index.js";
+	import type { TableViewModel } from "svelte-headless-table";
+	import type { Task } from "../(data)/schemas.js";
 
 	let className: string | undefined | null = undefined;
 	export { className as class };
@@ -18,6 +21,10 @@
 		};
 		filter: never;
 	};
+	export let tableModel: TableViewModel<Task>;
+	export let cellId: string;
+
+	const { hiddenColumnIds } = tableModel.pluginStates.hide;
 
 	function handleAscSort(e: Event) {
 		if (props.sort.order === "asc") {
@@ -32,6 +39,15 @@
 		}
 		props.sort.toggle(e);
 	}
+
+	function handleHide() {
+		hiddenColumnIds.update((ids: string[]) => {
+			if (ids.includes(cellId)) {
+				return ids;
+			}
+			return [...ids, cellId];
+		});
+	}
 </script>
 
 {#if !props.sort.disabled}
@@ -41,7 +57,8 @@
 				<Button
 					variant="ghost"
 					builders={[builder]}
-					class="-ml-3 h-8 data-[state=open]:bg-accent"
+					class="data-[state=open]:bg-accent -ml-3 h-8"
+					size="sm"
 				>
 					<slot />
 					{#if props.sort.order === "desc"}
@@ -54,8 +71,19 @@
 				</Button>
 			</DropdownMenu.Trigger>
 			<DropdownMenu.Content align="start">
-				<DropdownMenu.Item on:click={handleAscSort}>Asc</DropdownMenu.Item>
-				<DropdownMenu.Item on:click={handleDescSort}>Desc</DropdownMenu.Item>
+				<DropdownMenu.Item on:click={handleAscSort}>
+					<ArrowUp class="text-muted-foreground/70 mr-2 h-3.5 w-3.5" />
+					Asc
+				</DropdownMenu.Item>
+				<DropdownMenu.Item on:click={handleDescSort}>
+					<ArrowDown class="text-muted-foreground/70 mr-2 h-3.5 w-3.5" />
+					Desc
+				</DropdownMenu.Item>
+				<DropdownMenu.Separator />
+				<DropdownMenu.Item on:click={handleHide}>
+					<EyeNone class="text-muted-foreground/70 mr-2 h-3.5 w-3.5" />
+					Hide
+				</DropdownMenu.Item>
 			</DropdownMenu.Content>
 		</DropdownMenu.Root>
 	</div>
diff --git a/apps/www/src/routes/examples/tasks/(components)/data-table-view-options.svelte b/apps/www/src/routes/examples/tasks/(components)/data-table-view-options.svelte
index 57d9b3eda..0ac6a2011 100644
--- a/apps/www/src/routes/examples/tasks/(components)/data-table-view-options.svelte
+++ b/apps/www/src/routes/examples/tasks/(components)/data-table-view-options.svelte
@@ -9,13 +9,14 @@
 	const { pluginStates, flatColumns } = tableModel;
 	const { hiddenColumnIds } = pluginStates.hide;
 
-	const ids = flatColumns.map((col: { id: string }) => col.id);
-
-	let hideForId = Object.fromEntries(ids.map((id: string) => [id, true]));
-
-	$: $hiddenColumnIds = Object.entries(hideForId)
-		.filter(([, hide]) => !hide)
-		.map(([id]) => id);
+	function handleHide(id: string) {
+		hiddenColumnIds.update((ids: string[]) => {
+			if (ids.includes(id)) {
+				return ids.filter((i) => i !== id);
+			}
+			return [...ids, id];
+		});
+	}
 
 	const hidableCols = ["title", "status", "priority"];
 </script>
@@ -32,7 +33,10 @@
 		<DropdownMenu.Separator />
 		{#each flatColumns as col}
 			{#if hidableCols.includes(col.id)}
-				<DropdownMenu.CheckboxItem bind:checked={hideForId[col.id]}>
+				<DropdownMenu.CheckboxItem
+					checked={!$hiddenColumnIds.includes(col.id)}
+					on:click={() => handleHide(col.id)}
+				>
 					{col.header}
 				</DropdownMenu.CheckboxItem>
 			{/if}
diff --git a/apps/www/src/routes/examples/tasks/(components)/data-table.svelte b/apps/www/src/routes/examples/tasks/(components)/data-table.svelte
index ed6073fa7..b85c94554 100644
--- a/apps/www/src/routes/examples/tasks/(components)/data-table.svelte
+++ b/apps/www/src/routes/examples/tasks/(components)/data-table.svelte
@@ -180,10 +180,12 @@
 								>
 									<Table.Head {...attrs}>
 										{#if cell.id !== "select" && cell.id !== "actions"}
-											<DataTableColumnHeader {props}
-												><Render
-													of={cell.render()}
-												/></DataTableColumnHeader
+											<DataTableColumnHeader
+												{props}
+												{tableModel}
+												cellId={cell.id}
+											>
+												<Render of={cell.render()} /></DataTableColumnHeader
 											>
 										{:else}
 											<Render of={cell.render()} />

From 9a9d484c1e4bb9e68e98e5e6bb39a4a439c24467 Mon Sep 17 00:00:00 2001
From: Scooter1337 <lucav007@hotmail.com>
Date: Thu, 21 Mar 2024 02:19:30 +0100
Subject: [PATCH 7/8] format

---
 .../tasks/(components)/data-table-column-header.svelte    | 8 ++++----
 .../tasks/(components)/data-table-pagination.svelte       | 2 +-
 2 files changed, 5 insertions(+), 5 deletions(-)

diff --git a/apps/www/src/routes/examples/tasks/(components)/data-table-column-header.svelte b/apps/www/src/routes/examples/tasks/(components)/data-table-column-header.svelte
index 1eb465673..e8268cc2d 100644
--- a/apps/www/src/routes/examples/tasks/(components)/data-table-column-header.svelte
+++ b/apps/www/src/routes/examples/tasks/(components)/data-table-column-header.svelte
@@ -57,7 +57,7 @@
 				<Button
 					variant="ghost"
 					builders={[builder]}
-					class="data-[state=open]:bg-accent -ml-3 h-8"
+					class="-ml-3 h-8 data-[state=open]:bg-accent"
 					size="sm"
 				>
 					<slot />
@@ -72,16 +72,16 @@
 			</DropdownMenu.Trigger>
 			<DropdownMenu.Content align="start">
 				<DropdownMenu.Item on:click={handleAscSort}>
-					<ArrowUp class="text-muted-foreground/70 mr-2 h-3.5 w-3.5" />
+					<ArrowUp class="mr-2 h-3.5 w-3.5 text-muted-foreground/70" />
 					Asc
 				</DropdownMenu.Item>
 				<DropdownMenu.Item on:click={handleDescSort}>
-					<ArrowDown class="text-muted-foreground/70 mr-2 h-3.5 w-3.5" />
+					<ArrowDown class="mr-2 h-3.5 w-3.5 text-muted-foreground/70" />
 					Desc
 				</DropdownMenu.Item>
 				<DropdownMenu.Separator />
 				<DropdownMenu.Item on:click={handleHide}>
-					<EyeNone class="text-muted-foreground/70 mr-2 h-3.5 w-3.5" />
+					<EyeNone class="mr-2 h-3.5 w-3.5 text-muted-foreground/70" />
 					Hide
 				</DropdownMenu.Item>
 			</DropdownMenu.Content>
diff --git a/apps/www/src/routes/examples/tasks/(components)/data-table-pagination.svelte b/apps/www/src/routes/examples/tasks/(components)/data-table-pagination.svelte
index 7b283c184..dd0665397 100644
--- a/apps/www/src/routes/examples/tasks/(components)/data-table-pagination.svelte
+++ b/apps/www/src/routes/examples/tasks/(components)/data-table-pagination.svelte
@@ -18,7 +18,7 @@
 </script>
 
 <div class="flex items-center justify-between px-2">
-	<div class="text-muted-foreground flex-1 text-sm">
+	<div class="flex-1 text-sm text-muted-foreground">
 		{Object.keys($selectedDataIds).length} of{" "}
 		{$rows.length} row(s) selected.
 	</div>

From 2c7dc3f6b6d13ecf9decad326694a6c8789dc392 Mon Sep 17 00:00:00 2001
From: Scooter1337 <lucav007@hotmail.com>
Date: Thu, 21 Mar 2024 15:41:34 +0100
Subject: [PATCH 8/8] Fix: descending button always toggled ascend if sort
 order was undefined.

---
 .../tasks/(components)/data-table-column-header.svelte      | 6 +++++-
 1 file changed, 5 insertions(+), 1 deletion(-)

diff --git a/apps/www/src/routes/examples/tasks/(components)/data-table-column-header.svelte b/apps/www/src/routes/examples/tasks/(components)/data-table-column-header.svelte
index e8268cc2d..d244efcca 100644
--- a/apps/www/src/routes/examples/tasks/(components)/data-table-column-header.svelte
+++ b/apps/www/src/routes/examples/tasks/(components)/data-table-column-header.svelte
@@ -37,7 +37,11 @@
 		if (props.sort.order === "desc") {
 			return;
 		}
-		props.sort.toggle(e);
+		if (props.sort.order === undefined) {
+			// We can only toggle, so we toggle from undefined to 'asc' first
+			props.sort.toggle(e);
+		}
+		props.sort.toggle(e); // Then we toggle from 'asc' to 'desc'
 	}
 
 	function handleHide() {