From 8c8572c9c28de1d63801b578cfd42a7532fc6504 Mon Sep 17 00:00:00 2001
From: Philipp Viereck <philipp@mailbean.io>
Date: Mon, 25 Sep 2023 13:32:02 +0200
Subject: [PATCH] update components

---
 .../default/example/cards/data-table.svelte   | 32 +++++++++--------
 .../default/example/data-table-demo.svelte    | 32 +++++++++--------
 .../data-table/data-table-actions.svelte      |  6 ++--
 .../new-york/example/cards/data-table.svelte  | 32 +++++++++--------
 .../new-york/example/data-table-demo.svelte   | 32 +++++++++--------
 .../data-table/data-table-actions.svelte      |  8 +++--
 .../data-table/data-table-actions.svelte      | 10 +++---
 .../examples/data-table/data-table.svelte     | 34 ++++++++++---------
 8 files changed, 101 insertions(+), 85 deletions(-)

diff --git a/apps/www/src/lib/registry/default/example/cards/data-table.svelte b/apps/www/src/lib/registry/default/example/cards/data-table.svelte
index 346804e1f..1c5fe595b 100644
--- a/apps/www/src/lib/registry/default/example/cards/data-table.svelte
+++ b/apps/www/src/lib/registry/default/example/cards/data-table.svelte
@@ -1,3 +1,12 @@
+<script lang="ts" context="module">
+	export type Payment = {
+		id: string;
+		amount: number;
+		status: "Pending" | "Processing" | "Success" | "Failed";
+		email: string;
+	};
+</script>
+
 <script lang="ts">
 	import {
 		createTable,
@@ -12,7 +21,7 @@
 		addSelectedRows,
 		addHiddenColumns
 	} from "svelte-headless-table/plugins";
-	import { readable } from "svelte/store";
+	import { derived, readable } from "svelte/store";
 	import * as Table from "@/registry/default/ui/table";
 	import Actions from "../data-table/data-table-actions.svelte";
 	import { Button } from "@/registry/default/ui/button";
@@ -23,13 +32,6 @@
 	import { ArrowUpDown, ChevronDown } from "lucide-svelte";
 	import * as Card from "@/registry/default/ui/card";
 
-	type Payment = {
-		id: string;
-		amount: number;
-		status: "Pending" | "Processing" | "Success" | "Failed";
-		email: string;
-	};
-
 	const data: Payment[] = [
 		{
 			id: "m5gr84i9",
@@ -74,18 +76,16 @@
 	});
 
 	const columns = table.createColumns([
-		table.column({
+		table.display({
 			header: (_, { pluginStates }) => {
 				const { allPageRowsSelected } = pluginStates.select;
 				return createRender(DataTableCheckbox, {
 					checked: allPageRowsSelected
 				});
 			},
-			accessor: "id",
 			cell: ({ row }, { pluginStates }) => {
 				const { getRowState } = pluginStates.select;
 				const { isSelected } = getRowState(row);
-
 				return createRender(DataTableCheckbox, {
 					checked: isSelected
 				});
@@ -128,11 +128,13 @@
 				}
 			}
 		}),
-		table.column({
+		table.display({
 			header: "",
-			accessor: ({ id }) => id,
-			cell: (item) => {
-				return createRender(Actions, { id: item.value });
+			cell: ({ row }, { data }) => {
+				const payment = derived(data, ($data) => $data[Number(row.id)]);
+				return createRender(Actions, {
+					payment
+				});
 			},
 			plugins: {
 				sort: {
diff --git a/apps/www/src/lib/registry/default/example/data-table-demo.svelte b/apps/www/src/lib/registry/default/example/data-table-demo.svelte
index 53cdaf5d5..08e3d546d 100644
--- a/apps/www/src/lib/registry/default/example/data-table-demo.svelte
+++ b/apps/www/src/lib/registry/default/example/data-table-demo.svelte
@@ -1,3 +1,12 @@
+<script lang="ts" context="module">
+	export type Payment = {
+		id: string;
+		amount: number;
+		status: "Pending" | "Processing" | "Success" | "Failed";
+		email: string;
+	};
+</script>
+
 <script lang="ts">
 	import {
 		createTable,
@@ -12,7 +21,7 @@
 		addSelectedRows,
 		addHiddenColumns
 	} from "svelte-headless-table/plugins";
-	import { readable } from "svelte/store";
+	import { derived, readable } from "svelte/store";
 	import * as Table from "@/registry/default/ui/table";
 	import Actions from "./data-table/data-table-actions.svelte";
 	import { Button } from "@/registry/default/ui/button";
@@ -22,13 +31,6 @@
 	import DataTableCheckbox from "./data-table/data-table-checkbox.svelte";
 	import { ArrowUpDown, ChevronDown } from "lucide-svelte";
 
-	type Payment = {
-		id: string;
-		amount: number;
-		status: "Pending" | "Processing" | "Success" | "Failed";
-		email: string;
-	};
-
 	const data: Payment[] = [
 		{
 			id: "m5gr84i9",
@@ -73,18 +75,16 @@
 	});
 
 	const columns = table.createColumns([
-		table.column({
+		table.display({
 			header: (_, { pluginStates }) => {
 				const { allPageRowsSelected } = pluginStates.select;
 				return createRender(DataTableCheckbox, {
 					checked: allPageRowsSelected
 				});
 			},
-			accessor: "id",
 			cell: ({ row }, { pluginStates }) => {
 				const { getRowState } = pluginStates.select;
 				const { isSelected } = getRowState(row);
-
 				return createRender(DataTableCheckbox, {
 					checked: isSelected
 				});
@@ -134,11 +134,13 @@
 				}
 			}
 		}),
-		table.column({
+		table.display({
 			header: "",
-			accessor: ({ id }) => id,
-			cell: (item) => {
-				return createRender(Actions, { id: item.value });
+			cell: ({ row }, { data }) => {
+				const payment = derived(data, ($data) => $data[Number(row.id)]);
+				return createRender(Actions, {
+					payment
+				});
 			},
 			plugins: {
 				sort: {
diff --git a/apps/www/src/lib/registry/default/example/data-table/data-table-actions.svelte b/apps/www/src/lib/registry/default/example/data-table/data-table-actions.svelte
index 2e8888744..a1415c8b2 100644
--- a/apps/www/src/lib/registry/default/example/data-table/data-table-actions.svelte
+++ b/apps/www/src/lib/registry/default/example/data-table/data-table-actions.svelte
@@ -3,7 +3,9 @@
 	import { Button } from "@/registry/default/ui/button";
 	import { MoreHorizontal } from "lucide-svelte";
 
-	export let id: string;
+	import type { Readable } from "svelte/store";
+	import type { Payment } from "../data-table-demo.svelte";
+	export let payment: Readable<Payment>;
 </script>
 
 <DropdownMenu.Root>
@@ -22,7 +24,7 @@
 		<DropdownMenu.Group>
 			<DropdownMenu.Label>Actions</DropdownMenu.Label>
 			<DropdownMenu.Item
-				on:click={() => navigator.clipboard.writeText(id)}
+				on:click={() => navigator.clipboard.writeText($payment.id)}
 			>
 				Copy payment ID
 			</DropdownMenu.Item>
diff --git a/apps/www/src/lib/registry/new-york/example/cards/data-table.svelte b/apps/www/src/lib/registry/new-york/example/cards/data-table.svelte
index 8dc3dd2cf..ce42add1c 100644
--- a/apps/www/src/lib/registry/new-york/example/cards/data-table.svelte
+++ b/apps/www/src/lib/registry/new-york/example/cards/data-table.svelte
@@ -1,3 +1,12 @@
+<script lang="ts" context="module">
+	export type Payment = {
+		id: string;
+		amount: number;
+		status: "Pending" | "Processing" | "Success" | "Failed";
+		email: string;
+	};
+</script>
+
 <script lang="ts">
 	import {
 		createTable,
@@ -12,7 +21,7 @@
 		addSelectedRows,
 		addHiddenColumns
 	} from "svelte-headless-table/plugins";
-	import { readable } from "svelte/store";
+	import { derived, readable } from "svelte/store";
 	import * as Table from "@/registry/new-york/ui/table";
 	import Actions from "../data-table/data-table-actions.svelte";
 	import { Button } from "@/registry/new-york/ui/button";
@@ -23,13 +32,6 @@
 	import { ArrowUpDown, ChevronDown } from "lucide-svelte";
 	import * as Card from "@/registry/new-york/ui/card";
 
-	type Payment = {
-		id: string;
-		amount: number;
-		status: "Pending" | "Processing" | "Success" | "Failed";
-		email: string;
-	};
-
 	const data: Payment[] = [
 		{
 			id: "m5gr84i9",
@@ -74,18 +76,16 @@
 	});
 
 	const columns = table.createColumns([
-		table.column({
+		table.display({
 			header: (_, { pluginStates }) => {
 				const { allPageRowsSelected } = pluginStates.select;
 				return createRender(DataTableCheckbox, {
 					checked: allPageRowsSelected
 				});
 			},
-			accessor: "id",
 			cell: ({ row }, { pluginStates }) => {
 				const { getRowState } = pluginStates.select;
 				const { isSelected } = getRowState(row);
-
 				return createRender(DataTableCheckbox, {
 					checked: isSelected
 				});
@@ -128,11 +128,13 @@
 				}
 			}
 		}),
-		table.column({
+		table.display({
 			header: "",
-			accessor: ({ id }) => id,
-			cell: (item) => {
-				return createRender(Actions, { id: item.value });
+			cell: ({ row }, { data }) => {
+				const payment = derived(data, ($data) => $data[Number(row.id)]);
+				return createRender(Actions, {
+					payment
+				});
 			},
 			plugins: {
 				sort: {
diff --git a/apps/www/src/lib/registry/new-york/example/data-table-demo.svelte b/apps/www/src/lib/registry/new-york/example/data-table-demo.svelte
index bd3b72b66..8b6ab935a 100644
--- a/apps/www/src/lib/registry/new-york/example/data-table-demo.svelte
+++ b/apps/www/src/lib/registry/new-york/example/data-table-demo.svelte
@@ -1,3 +1,12 @@
+<script lang="ts" context="module">
+	export type Payment = {
+		id: string;
+		amount: number;
+		status: "Pending" | "Processing" | "Success" | "Failed";
+		email: string;
+	};
+</script>
+
 <script lang="ts">
 	import {
 		createTable,
@@ -12,7 +21,7 @@
 		addSelectedRows,
 		addHiddenColumns
 	} from "svelte-headless-table/plugins";
-	import { readable } from "svelte/store";
+	import { derived, readable } from "svelte/store";
 	import * as Table from "@/registry/new-york/ui/table";
 	import Actions from "./data-table/data-table-actions.svelte";
 	import { Button } from "@/registry/new-york/ui/button";
@@ -22,13 +31,6 @@
 	import { Input } from "@/registry/new-york/ui/input";
 	import DataTableCheckbox from "./data-table/data-table-checkbox.svelte";
 
-	type Payment = {
-		id: string;
-		amount: number;
-		status: "Pending" | "Processing" | "Success" | "Failed";
-		email: string;
-	};
-
 	const data: Payment[] = [
 		{
 			id: "m5gr84i9",
@@ -73,18 +75,16 @@
 	});
 
 	const columns = table.createColumns([
-		table.column({
+		table.display({
 			header: (_, { pluginStates }) => {
 				const { allPageRowsSelected } = pluginStates.select;
 				return createRender(DataTableCheckbox, {
 					checked: allPageRowsSelected
 				});
 			},
-			accessor: "id",
 			cell: ({ row }, { pluginStates }) => {
 				const { getRowState } = pluginStates.select;
 				const { isSelected } = getRowState(row);
-
 				return createRender(DataTableCheckbox, {
 					checked: isSelected
 				});
@@ -134,11 +134,13 @@
 				}
 			}
 		}),
-		table.column({
+		table.display({
 			header: "",
-			accessor: ({ id }) => id,
-			cell: (item) => {
-				return createRender(Actions, { id: item.value });
+			cell: ({ row }, { data }) => {
+				const payment = derived(data, ($data) => $data[Number(row.id)]);
+				return createRender(Actions, {
+					payment
+				});
 			},
 			plugins: {
 				sort: {
diff --git a/apps/www/src/lib/registry/new-york/example/data-table/data-table-actions.svelte b/apps/www/src/lib/registry/new-york/example/data-table/data-table-actions.svelte
index 89b406c78..01ad4332e 100644
--- a/apps/www/src/lib/registry/new-york/example/data-table/data-table-actions.svelte
+++ b/apps/www/src/lib/registry/new-york/example/data-table/data-table-actions.svelte
@@ -2,8 +2,9 @@
 	import * as DropdownMenu from "@/registry/new-york/ui/dropdown-menu";
 	import { Button } from "@/registry/new-york/ui/button";
 	import { DotsHorizontal } from "radix-icons-svelte";
-
-	export let id: string;
+	import type { Readable } from "svelte/store";
+	import type { Payment } from "../data-table-demo.svelte";
+	export let payment: Readable<Payment>;
 </script>
 
 <DropdownMenu.Root>
@@ -11,6 +12,7 @@
 		<Button
 			variant="ghost"
 			builders={[builder]}
+			size="icon"
 			class="relative w-8 h-8 p-0"
 		>
 			<span class="sr-only">Open menu</span>
@@ -21,7 +23,7 @@
 		<DropdownMenu.Group>
 			<DropdownMenu.Label>Actions</DropdownMenu.Label>
 			<DropdownMenu.Item
-				on:click={() => navigator.clipboard.writeText(id)}
+				on:click={() => navigator.clipboard.writeText($payment.id)}
 			>
 				Copy payment ID
 			</DropdownMenu.Item>
diff --git a/apps/www/src/routes/examples/data-table/data-table-actions.svelte b/apps/www/src/routes/examples/data-table/data-table-actions.svelte
index 0713a35f9..2b6e633b8 100644
--- a/apps/www/src/routes/examples/data-table/data-table-actions.svelte
+++ b/apps/www/src/routes/examples/data-table/data-table-actions.svelte
@@ -2,8 +2,9 @@
 	import * as DropdownMenu from "@/registry/new-york/ui/dropdown-menu";
 	import { Button } from "@/registry/new-york/ui/button";
 	import { DotsHorizontal } from "radix-icons-svelte";
-
-	export let id: string;
+	import type { Payment } from "./data-table.svelte";
+	import type { Readable } from "svelte/store";
+	export let payment: Readable<Payment>;
 </script>
 
 <DropdownMenu.Root>
@@ -11,7 +12,8 @@
 		<Button
 			variant="ghost"
 			builders={[builder]}
-			class="w-8 h-8 p- relative"
+			size="icon"
+			class="relative w-8 h-8 p-0"
 		>
 			<span class="sr-only">Open menu</span>
 			<DotsHorizontal class="w-4 h-4" />
@@ -21,7 +23,7 @@
 		<DropdownMenu.Group>
 			<DropdownMenu.Label>Actions</DropdownMenu.Label>
 			<DropdownMenu.Item
-				on:click={() => navigator.clipboard.writeText(id)}
+				on:click={() => navigator.clipboard.writeText($payment.id)}
 			>
 				Copy payment ID
 			</DropdownMenu.Item>
diff --git a/apps/www/src/routes/examples/data-table/data-table.svelte b/apps/www/src/routes/examples/data-table/data-table.svelte
index 39a922bc3..0028159a2 100644
--- a/apps/www/src/routes/examples/data-table/data-table.svelte
+++ b/apps/www/src/routes/examples/data-table/data-table.svelte
@@ -1,3 +1,12 @@
+<script lang="ts" context="module">
+	export type Payment = {
+		id: string;
+		amount: number;
+		status: "Pending" | "Processing" | "Success" | "Failed";
+		email: string;
+	};
+</script>
+
 <script lang="ts">
 	import {
 		createTable,
@@ -12,7 +21,7 @@
 		addSelectedRows,
 		addHiddenColumns
 	} from "svelte-headless-table/plugins";
-	import { readable } from "svelte/store";
+	import { derived, readable } from "svelte/store";
 	import * as Table from "@/registry/new-york/ui/table";
 	import Actions from "./data-table-actions.svelte";
 	import { Button } from "@/registry/new-york/ui/button";
@@ -22,13 +31,6 @@
 	import { Input } from "@/registry/new-york/ui/input";
 	import DataTableCheckbox from "./data-table-checkbox.svelte";
 
-	type Payment = {
-		id: string;
-		amount: number;
-		status: "Pending" | "Processing" | "Success" | "Failed";
-		email: string;
-	};
-
 	const data: Payment[] = [
 		{
 			id: "m5gr84i9",
@@ -73,18 +75,16 @@
 	});
 
 	const columns = table.createColumns([
-		table.column({
+		table.display({
 			header: (_, { pluginStates }) => {
 				const { allPageRowsSelected } = pluginStates.select;
 				return createRender(DataTableCheckbox, {
 					checked: allPageRowsSelected
 				});
 			},
-			accessor: "id",
 			cell: ({ row }, { pluginStates }) => {
 				const { getRowState } = pluginStates.select;
 				const { isSelected } = getRowState(row);
-
 				return createRender(DataTableCheckbox, {
 					checked: isSelected
 				});
@@ -123,11 +123,13 @@
 				}
 			}
 		}),
-		table.column({
-			header: "Actions",
-			accessor: ({ id }) => id,
-			cell: (item) => {
-				return createRender(Actions, { id: item.value });
+		table.display({
+			header: "",
+			cell: ({ row }, { data }) => {
+				const payment = derived(data, ($data) => $data[Number(row.id)]);
+				return createRender(Actions, {
+					payment
+				});
 			},
 			plugins: {
 				sort: {