From 1d3e8bc79566f58ce92223517f161c954fec04bc Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Fernando=20Lo=CC=81pez=20Guevara?=
 <fernando.lguevara@gmail.com>
Date: Tue, 7 Nov 2023 19:43:13 -0300
Subject: [PATCH 1/6] fix(lib): rename className attr to class

---
 apps/www/src/lib/registry/default/example/button-icon.svelte  | 2 +-
 apps/www/src/lib/registry/new-york/example/button-icon.svelte | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/apps/www/src/lib/registry/default/example/button-icon.svelte b/apps/www/src/lib/registry/default/example/button-icon.svelte
index 858bc0aa1..cb9552d67 100644
--- a/apps/www/src/lib/registry/default/example/button-icon.svelte
+++ b/apps/www/src/lib/registry/default/example/button-icon.svelte
@@ -4,5 +4,5 @@
 </script>
 
 <Button variant="outline" size="icon">
-	<ChevronRight className="h-4 w-4" />
+	<ChevronRight class="h-4 w-4" />
 </Button>
diff --git a/apps/www/src/lib/registry/new-york/example/button-icon.svelte b/apps/www/src/lib/registry/new-york/example/button-icon.svelte
index 74a1f6f2d..28fb63b81 100644
--- a/apps/www/src/lib/registry/new-york/example/button-icon.svelte
+++ b/apps/www/src/lib/registry/new-york/example/button-icon.svelte
@@ -4,5 +4,5 @@
 </script>
 
 <Button variant="outline" size="icon">
-	<ChevronRight className="h-4 w-4" />
+	<ChevronRight class="h-4 w-4" />
 </Button>

From 0b4843f7461d3ed0c5f206dd7d024794ba4ea979 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Fernando=20Lo=CC=81pez=20Guevara?=
 <fernando.lguevara@gmail.com>
Date: Tue, 7 Nov 2023 19:43:32 -0300
Subject: [PATCH 2/6] fix(lib): make table full height

---
 apps/www/src/lib/registry/default/ui/table/table.svelte  | 2 +-
 apps/www/src/lib/registry/new-york/ui/table/table.svelte | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/apps/www/src/lib/registry/default/ui/table/table.svelte b/apps/www/src/lib/registry/default/ui/table/table.svelte
index 99a093b6a..f945a244c 100644
--- a/apps/www/src/lib/registry/default/ui/table/table.svelte
+++ b/apps/www/src/lib/registry/default/ui/table/table.svelte
@@ -8,7 +8,7 @@
 	export { className as class };
 </script>
 
-<div class="w-full overflow-auto">
+<div class="w-full h-full overflow-auto">
 	<table
 		class={cn("w-full caption-bottom text-sm", className)}
 		{...$$restProps}
diff --git a/apps/www/src/lib/registry/new-york/ui/table/table.svelte b/apps/www/src/lib/registry/new-york/ui/table/table.svelte
index 99a093b6a..f945a244c 100644
--- a/apps/www/src/lib/registry/new-york/ui/table/table.svelte
+++ b/apps/www/src/lib/registry/new-york/ui/table/table.svelte
@@ -8,7 +8,7 @@
 	export { className as class };
 </script>
 
-<div class="w-full overflow-auto">
+<div class="w-full h-full overflow-auto">
 	<table
 		class={cn("w-full caption-bottom text-sm", className)}
 		{...$$restProps}

From 2a4dc4438c351f61a36236b032b5d06d6a9a939e Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Fernando=20Lo=CC=81pez=20Guevara?=
 <fernando.lguevara@gmail.com>
Date: Tue, 7 Nov 2023 19:44:13 -0300
Subject: [PATCH 3/6] feat(example): add icons for sort column header

---
 .../(components)/data-table-column-header.svelte   | 14 ++++++++------
 1 file changed, 8 insertions(+), 6 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 48b84e17d..24b149108 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
@@ -53,12 +53,14 @@
 				</Button>
 			</DropdownMenu.Trigger>
 			<DropdownMenu.Content>
-				<DropdownMenu.Item on:click={handleAscSort}
-					>Asc</DropdownMenu.Item
-				>
-				<DropdownMenu.Item on:click={handleDescSort}
-					>Desc</DropdownMenu.Item
-				>
+				<DropdownMenu.Item on:click={handleAscSort}>
+					<ArrowUp class="mr-2 h-4 w-4" />
+					Asc
+				</DropdownMenu.Item>
+				<DropdownMenu.Item on:click={handleDescSort}>
+					<ArrowDown class="mr-2 h-4 w-4" />
+					Desc
+				</DropdownMenu.Item>
 			</DropdownMenu.Content>
 		</DropdownMenu.Root>
 	</div>

From e5375d6ca4998bc71bc58c0dbb07768641cc84f8 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Fernando=20Lo=CC=81pez=20Guevara?=
 <fernando.lguevara@gmail.com>
Date: Tue, 7 Nov 2023 19:56:20 -0300
Subject: [PATCH 4/6] feat(example): add sidebars on tasks examples

---
 .../data-table-faceted-filter.svelte          | 164 +++++++++----
 .../data-table-filter-left-sidebar.svelte     |  69 ++++++
 .../data-table-filter-right-sidebar.svelte    | 100 ++++++++
 .../(components)/data-table-pagination.svelte |   2 +-
 .../(components)/data-table-toolbar.svelte    |  98 +++++---
 .../tasks/(components)/data-table.svelte      | 220 +++++++++++++-----
 .../examples/tasks/(components)/index.ts      |   2 +
 7 files changed, 506 insertions(+), 149 deletions(-)
 create mode 100644 apps/www/src/routes/examples/tasks/(components)/data-table-filter-left-sidebar.svelte
 create mode 100644 apps/www/src/routes/examples/tasks/(components)/data-table-filter-right-sidebar.svelte

diff --git a/apps/www/src/routes/examples/tasks/(components)/data-table-faceted-filter.svelte b/apps/www/src/routes/examples/tasks/(components)/data-table-faceted-filter.svelte
index 42a92f28e..519c52d94 100644
--- a/apps/www/src/routes/examples/tasks/(components)/data-table-faceted-filter.svelte
+++ b/apps/www/src/routes/examples/tasks/(components)/data-table-faceted-filter.svelte
@@ -11,7 +11,7 @@
 	export let filterValues: string[] = [];
 	export let title: string;
 	export let options = [] as typeof statuses;
-
+	export let view: "pill" | "list" = "pill";
 	let open = false;
 
 	const handleSelect = (currentValue: string) => {
@@ -29,48 +29,9 @@
 	};
 </script>
 
-<Popover.Root bind:open positioning={{ placement: "bottom-start" }}>
-	<Popover.Trigger asChild let:builder>
-		<Button
-			builders={[builder]}
-			variant="outline"
-			size="sm"
-			class="h-8 border-dashed"
-		>
-			<PlusCircled class="mr-2 h-4 w-4" />
-			{title}
-
-			{#if filterValues.length > 0}
-				<Separator orientation="vertical" class="mx-2 h-4" />
-				<Badge
-					variant="secondary"
-					class="rounded-sm px-1 font-normal lg:hidden"
-				>
-					{filterValues.length}
-				</Badge>
-				<div class="hidden space-x-1 lg:flex">
-					{#if filterValues.length > 2}
-						<Badge
-							variant="secondary"
-							class="rounded-sm px-1 font-normal"
-						>
-							{filterValues.length} Selected
-						</Badge>
-					{:else}
-						{#each filterValues as option}
-							<Badge
-								variant="secondary"
-								class="rounded-sm px-1 font-normal"
-							>
-								{option}
-							</Badge>
-						{/each}
-					{/if}
-				</div>
-			{/if}
-		</Button>
-	</Popover.Trigger>
-	<Popover.Content class="w-[200px] p-0">
+{#if view === "list"}
+	<div>
+		<span class="text-xs font-medium">{title}</span>
 		<Command.Root>
 			<Command.Input placeholder={title} />
 			<Command.List>
@@ -91,7 +52,7 @@
 										: "opacity-50 [&_svg]:invisible"
 								)}
 							>
-								<Check className={cn("h-4 w-4")} />
+								<Check class={cn("h-4 w-4")} />
 							</div>
 							<span>
 								{option.label}
@@ -99,18 +60,119 @@
 						</Command.Item>
 					{/each}
 				</Command.Group>
+
+				<Command.Separator />
+				<Command.Item
+					class="justify-center text-center"
+					onSelect={() => {
+						filterValues =
+							filterValues.length > 0
+								? []
+								: options.map(({ value }) => value);
+					}}
+				>
+					{#if filterValues.length > 0}
+						Clear filters
+					{:else}
+						Select all
+					{/if}
+				</Command.Item>
+			</Command.List>
+		</Command.Root>
+	</div>
+{:else}
+	<Popover.Root bind:open positioning={{ placement: "bottom-start" }}>
+		<Popover.Trigger asChild let:builder>
+			<Button
+				title={filterValues.length
+					? `${title}: ${filterValues.join(", ")} selected.`
+					: `${title}: not selected.`}
+				builders={[builder]}
+				variant="outline"
+				size="sm"
+				class="h-8 border-dashed"
+			>
+				<PlusCircled class="mr-2 h-4 w-4" />
+				{title}
+
 				{#if filterValues.length > 0}
+					<Separator orientation="vertical" class="mx-2 h-4" />
+					<Badge
+						variant="secondary"
+						class="rounded-sm px-1 font-normal lg:hidden"
+					>
+						{filterValues.length}
+					</Badge>
+					<div class="hidden space-x-1 lg:flex">
+						{#if filterValues.length > 2}
+							<Badge
+								variant="secondary"
+								class="rounded-sm px-1 font-normal"
+							>
+								{filterValues.length} Selected
+							</Badge>
+						{:else}
+							{#each filterValues as option}
+								<Badge
+									variant="secondary"
+									class="rounded-sm px-1 font-normal"
+								>
+									{option}
+								</Badge>
+							{/each}
+						{/if}
+					</div>
+				{/if}
+			</Button>
+		</Popover.Trigger>
+		<Popover.Content class="w-[200px] p-0">
+			<Command.Root>
+				<Command.Input placeholder={title} />
+				<Command.List>
+					<Command.Empty>No results found.</Command.Empty>
+					<Command.Group>
+						{#each options as option}
+							<Command.Item
+								value={option.value}
+								onSelect={(currentValue) => {
+									handleSelect(currentValue);
+								}}
+							>
+								<div
+									class={cn(
+										"mr-2 flex h-4 w-4 items-center justify-center rounded-sm border border-primary",
+										filterValues.includes(option.value)
+											? "bg-primary text-primary-foreground"
+											: "opacity-50 [&_svg]:invisible"
+									)}
+								>
+									<Check class={cn("h-4 w-4")} />
+								</div>
+								<span>
+									{option.label}
+								</span>
+							</Command.Item>
+						{/each}
+					</Command.Group>
+
 					<Command.Separator />
 					<Command.Item
 						class="justify-center text-center"
 						onSelect={() => {
-							filterValues = [];
+							filterValues =
+								filterValues.length > 0
+									? []
+									: options.map(({ value }) => value);
 						}}
 					>
-						Clear filters
+						{#if filterValues.length > 0}
+							Clear filters
+						{:else}
+							Select all
+						{/if}
 					</Command.Item>
-				{/if}
-			</Command.List>
-		</Command.Root>
-	</Popover.Content>
-</Popover.Root>
+				</Command.List>
+			</Command.Root>
+		</Popover.Content>
+	</Popover.Root>
+{/if}
diff --git a/apps/www/src/routes/examples/tasks/(components)/data-table-filter-left-sidebar.svelte b/apps/www/src/routes/examples/tasks/(components)/data-table-filter-left-sidebar.svelte
new file mode 100644
index 000000000..2b3facd99
--- /dev/null
+++ b/apps/www/src/routes/examples/tasks/(components)/data-table-filter-left-sidebar.svelte
@@ -0,0 +1,69 @@
+<script lang="ts">
+	import Input from "@/registry/new-york/ui/input/input.svelte";
+	import type { TableViewModel } from "svelte-headless-table/lib/createViewModel";
+	import type { AnyPlugins } from "svelte-headless-table/lib/types/TablePlugin";
+	import type { Writable } from "svelte/store";
+	import { DataTableFacetedFilter } from ".";
+	import { priorities, statuses } from "../(data)/data";
+	import type { Task } from "../(data)/schemas";
+
+	export let tableModel: TableViewModel<Task, AnyPlugins>;
+
+	const { pluginStates } = tableModel;
+	const {
+		filterValue
+	}: {
+		filterValue: Writable<string>;
+	} = pluginStates.filter;
+
+	const {
+		filterValues
+	}: {
+		filterValues: Writable<{
+			status: string[];
+			priority: string[];
+		}>;
+	} = pluginStates.colFilter;
+</script>
+
+<aside class="relative col-span-2 border-r border-b p-2">
+	<div class="sticky top-12">
+		<div class="flex flex-col space-y-2">
+			<span class="text-sm font-medium">Filters</span>
+			<Input
+				placeholder="Filter tasks..."
+				class="h-8 w-full"
+				type="text"
+				bind:value={$filterValue}
+			/>
+
+			<DataTableFacetedFilter
+				bind:filterValues={$filterValues.status}
+				title="Status"
+				view="list"
+				options={statuses}
+			/>
+
+			<DataTableFacetedFilter
+				bind:filterValues={$filterValues.priority}
+				title="Priority"
+				view="list"
+				options={priorities}
+			/>
+
+			<!-- {#if showReset}
+				<Button
+					on:click={() => {
+						$filterValues.status = [];
+						$filterValues.priority = [];
+					}}
+					variant="ghost"
+					class="h-8 px-2 lg:px-3"
+				>
+					Reset
+					<Cross2 class="ml-2 h-4 w-4" />
+				</Button>
+			{/if} -->
+		</div>
+	</div>
+</aside>
diff --git a/apps/www/src/routes/examples/tasks/(components)/data-table-filter-right-sidebar.svelte b/apps/www/src/routes/examples/tasks/(components)/data-table-filter-right-sidebar.svelte
new file mode 100644
index 000000000..4efa85021
--- /dev/null
+++ b/apps/www/src/routes/examples/tasks/(components)/data-table-filter-right-sidebar.svelte
@@ -0,0 +1,100 @@
+<script lang="ts">
+	import * as Card from "@/registry/default/ui/card";
+	import { Label } from "@/registry/default/ui/label";
+	import * as Select from "@/registry/default/ui/select";
+	import { Textarea } from "@/registry/default/ui/textarea";
+	import Button from "@/registry/new-york/ui/button/button.svelte";
+	import Input from "@/registry/new-york/ui/input/input.svelte";
+	import type { TableViewModel } from "svelte-headless-table/lib/createViewModel";
+	import type { AnyPlugins } from "svelte-headless-table/lib/types/TablePlugin";
+	import { priorities, statuses } from "../(data)/data";
+	import type { Task } from "../(data)/schemas";
+
+	export let tableModel: TableViewModel<Task, AnyPlugins>;
+
+	const { pluginStates } = tableModel;
+
+	const {
+		custom: { taskOnEdition, taskIdOnEdition }
+	} = pluginStates;
+
+	$: task = $taskOnEdition || {};
+	$: selectedStatus = statuses.find(({ value }) => task.status === value);
+	$: selectedPriority = priorities.find(
+		({ value }) => task.priority === value
+	);
+</script>
+
+<aside class="relative col-span-3 border-l border-b p-2">
+	<div class="sticky top-12 flex flex-col h-full">
+		<Card.Header>
+			<Card.Title># {task.id}</Card.Title>
+			<Card.Description>
+				Here you can edit your task information
+			</Card.Description>
+		</Card.Header>
+		<Card.Content class="grow grid gap-2">
+			<div class="grid gap-2">
+				<Label for="title">Title</Label>
+				<Input
+					id="title"
+					placeholder="Task title ..."
+					bind:value={task.title}
+				/>
+			</div>
+			<div class="grid gap-2">
+				<Label for="status">Status</Label>
+				<Select.Root bind:selected={selectedStatus}>
+					<Select.Trigger id="status">
+						<Select.Value placeholder="Select" />
+					</Select.Trigger>
+					<Select.Content>
+						{#each statuses as status}
+							<Select.Item
+								value={status.value}
+								label={status.label}
+							>
+								{status.label}
+							</Select.Item>
+						{/each}
+					</Select.Content>
+				</Select.Root>
+			</div>
+			<div class="grid gap-2">
+				<Label for="priority">Priority</Label>
+				<Select.Root bind:selected={selectedPriority}>
+					<Select.Trigger id="priority">
+						<Select.Value placeholder="Select" />
+					</Select.Trigger>
+					<Select.Content>
+						{#each priorities as priority}
+							<Select.Item
+								value={priority.value}
+								label={priority.label}
+							>
+								{priority.label}
+							</Select.Item>
+						{/each}
+					</Select.Content>
+				</Select.Root>
+			</div>
+			<div class="grid gap-2">
+				<Label for="description">Description</Label>
+				<Textarea
+					id="description"
+					placeholder="Please include all information relevant to your issue."
+					bind:value={task.description}
+				/>
+			</div>
+		</Card.Content>
+		<Card.Footer class="flex flex-1  items-end justify-end space-x-2">
+			<Button
+				on:click={() => taskIdOnEdition.set(null)}
+				variant="secondary"
+			>
+				Cancel
+			</Button>
+			<Button on:click={() => taskIdOnEdition.set(null)}>Submit</Button>
+		</Card.Footer>
+	</div>
+</aside>
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 7586fb595..0efb45403 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
@@ -21,7 +21,7 @@
 	const { selectedDataIds } = pluginStates.select;
 </script>
 
-<div class="flex items-center justify-between px-2">
+<div class="p-2 flex items-center justify-between">
 	<div class="flex-1 text-sm text-muted-foreground">
 		{Object.keys($selectedDataIds).length} of{" "}
 		{$rows.length} row(s) selected.
diff --git a/apps/www/src/routes/examples/tasks/(components)/data-table-toolbar.svelte b/apps/www/src/routes/examples/tasks/(components)/data-table-toolbar.svelte
index dcb3f5604..735bd0204 100644
--- a/apps/www/src/routes/examples/tasks/(components)/data-table-toolbar.svelte
+++ b/apps/www/src/routes/examples/tasks/(components)/data-table-toolbar.svelte
@@ -1,13 +1,15 @@
 <script lang="ts">
+	import { Button } from "@/registry/new-york/ui/button";
 	import { Input } from "@/registry/new-york/ui/input";
-	import { DataTableFacetedFilter, DataTableViewOptions } from ".";
-	import type { AnyPlugins } from "svelte-headless-table/lib/types/TablePlugin";
-	import type { Task } from "../(data)/schemas";
-	import type { TableViewModel } from "svelte-headless-table/lib/createViewModel";
-	import Button from "@/registry/new-york/ui/button/button.svelte";
+	import { Toggle } from "@/registry/new-york/ui/toggle";
+	import { SlidersHorizontal } from "lucide-svelte";
 	import { Cross2 } from "radix-icons-svelte";
-	import { statuses, priorities } from "../(data)/data";
+	import type { TableViewModel } from "svelte-headless-table/lib/createViewModel";
+	import type { AnyPlugins } from "svelte-headless-table/lib/types/TablePlugin";
 	import type { Writable } from "svelte/store";
+	import { DataTableFacetedFilter, DataTableViewOptions } from ".";
+	import { priorities, statuses } from "../(data)/data";
+	import type { Task } from "../(data)/schemas";
 
 	export let tableModel: TableViewModel<Task, AnyPlugins>;
 
@@ -27,40 +29,66 @@
 		}>;
 	} = pluginStates.colFilter;
 
+	const {
+		sidebar
+	}: {
+		sidebar: {
+			left: {
+				visible: Writable<boolean>;
+			};
+			right: {
+				visible: Writable<boolean>;
+			};
+		};
+	} = pluginStates.custom;
+
+	$: leftSidebarVisble = sidebar.left.visible;
+	$: showFiltersAria = $leftSidebarVisble ? "Hide filters" : "Show filters";
 	$: showReset = Object.values($filterValues).some((v) => v.length > 0);
 </script>
 
-<div class="flex items-center justify-between">
+<div class="p-2 flex items-center justify-between space-x-2 border-b">
 	<div class="flex flex-1 items-center space-x-2">
-		<Input
-			placeholder="Filter tasks..."
-			class="h-8 w-[150px] lg:w-[250px]"
-			type="text"
-			bind:value={$filterValue}
-		/>
+		<Toggle
+			size="sm"
+			variant="outline"
+			aria-label={showFiltersAria}
+			title={showFiltersAria}
+			bind:pressed={$leftSidebarVisble}
+		>
+			<SlidersHorizontal class="h-4 w-4" />
+		</Toggle>
+		{#if !$leftSidebarVisble}
+			<Input
+				placeholder="Filter tasks..."
+				class="h-8 w-[150px] lg:w-[250px]"
+				type="text"
+				bind:value={$filterValue}
+			/>
 
-		<DataTableFacetedFilter
-			bind:filterValues={$filterValues.status}
-			title="Status"
-			options={statuses}
-		/>
-		<DataTableFacetedFilter
-			bind:filterValues={$filterValues.priority}
-			title="Priority"
-			options={priorities}
-		/>
-		{#if showReset}
-			<Button
-				on:click={() => {
-					$filterValues.status = [];
-					$filterValues.priority = [];
-				}}
-				variant="ghost"
-				class="h-8 px-2 lg:px-3"
-			>
-				Reset
-				<Cross2 class="ml-2 h-4 w-4" />
-			</Button>
+			<DataTableFacetedFilter
+				bind:filterValues={$filterValues.status}
+				title="Status"
+				options={statuses}
+			/>
+			<DataTableFacetedFilter
+				bind:filterValues={$filterValues.priority}
+				title="Priority"
+				options={priorities}
+			/>
+			{#if showReset}
+				<Button
+					on:click={() => {
+						$filterValues.status = [];
+						$filterValues.priority = [];
+					}}
+					variant="ghost"
+					class="h-8 px-2 lg:px-3"
+				>
+					Reset
+					<Cross2 class="ml-2 h-4 w-4" />
+				</Button>
+			{/if}
 		{/if}
 	</div>
 
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 6158cb796..34beccc32 100644
--- a/apps/www/src/routes/examples/tasks/(components)/data-table.svelte
+++ b/apps/www/src/routes/examples/tasks/(components)/data-table.svelte
@@ -1,12 +1,12 @@
 <script lang="ts">
-	import { get, readable } from "svelte/store";
+	import { Button } from "@/registry/default/ui/button";
+	import * as Table from "@/registry/new-york/ui/table";
 	import {
 		Render,
 		Subscribe,
 		createRender,
 		createTable
 	} from "svelte-headless-table";
-	import * as Table from "@/registry/new-york/ui/table";
 	import {
 		addColumnFilters,
 		addHiddenColumns,
@@ -15,17 +15,19 @@
 		addSortBy,
 		addTableFilter
 	} from "svelte-headless-table/plugins";
+	import { derived, get, readable, writable } from "svelte/store";
 	import {
 		DataTableCheckbox,
-		DataTableTitleCell,
-		DataTableStatusCell,
-		DataTableRowActions,
-		DataTablePriorityCell,
 		DataTableColumnHeader,
-		DataTableToolbar,
-		DataTablePagination
+		DataTableFilterLeftSidebar,
+		DataTableFilterRightSidebar,
+		DataTablePagination,
+		DataTablePriorityCell,
+		DataTableRowActions,
+		DataTableStatusCell,
+		DataTableTitleCell,
+		DataTableToolbar
 	} from ".";
-
 	import type { Task } from "../(data)/schemas";
 
 	export let data: Task[];
@@ -42,7 +44,51 @@
 			}
 		}),
 		colFilter: addColumnFilters(),
-		hide: addHiddenColumns()
+		hide: addHiddenColumns(),
+		custom: ({ tableState }) => {
+			const taskIdOnEdition = writable(null);
+
+			const taskOnEdition = derived(
+				[tableState.data, taskIdOnEdition],
+				([$data, $taskId]) => {
+					const task = $data.find((task) => task.id === $taskId);
+
+					return task;
+				}
+			);
+
+			const leftSidebarVisible = writable(false);
+			const rightSidebarVisible = derived(
+				[tableState.data, taskIdOnEdition],
+				([$data, $taskId]) => {
+					const task = $data.find((task) => task.id === $taskId);
+
+					return !!task;
+				}
+			);
+
+			const pluginState = {
+				taskIdOnEdition,
+				taskOnEdition,
+				sidebar: {
+					left: {
+						visible: leftSidebarVisible
+					},
+					right: {
+						visible: rightSidebarVisible
+					},
+					anyVisible: derived(
+						[leftSidebarVisible, rightSidebarVisible],
+						([$leftVisible, $rightVisible]) => {
+							return $leftVisible || $rightVisible;
+						}
+					)
+				}
+			};
+			return {
+				pluginState
+			};
+		}
 	});
 
 	const columns = table.createColumns([
@@ -175,62 +221,112 @@
 
 	const tableModel = table.createViewModel(columns);
 
-	const { headerRows, pageRows, tableAttrs, tableBodyAttrs } = tableModel;
+	const {
+		headerRows,
+		pageRows,
+		tableAttrs,
+		tableBodyAttrs,
+		pluginStates: {
+			custom: { sidebar, taskIdOnEdition, taskOnEdition }
+		}
+	} = tableModel;
+
+	$: leftSidebarVisible = sidebar.left.visible;
+	$: rightSidebarVisible = sidebar.right.visible;
+	$: anySidebarVisible = sidebar.anyVisible;
+	$: cols =
+		6 +
+		(!$anySidebarVisible
+			? 0
+			: ($leftSidebarVisible ? 2 : 0) + ($rightSidebarVisible ? 3 : 0));
 </script>
 
-<div class="space-y-4">
+<div class="relative rounded-md border">
 	<DataTableToolbar {tableModel} />
-	<div class="rounded-md border">
-		<Table.Root {...$tableAttrs}>
-			<Table.Header>
-				{#each $headerRows as headerRow}
-					<Subscribe rowAttrs={headerRow.attrs()}>
-						<Table.Row>
-							{#each headerRow.cells as cell (cell.id)}
-								<Subscribe
-									attrs={cell.attrs()}
-									let:attrs
-									props={cell.props()}
-									let:props
-								>
-									<Table.Head {...attrs}>
-										{#if cell.id !== "select" && cell.id !== "actions"}
-											<DataTableColumnHeader
-												{props}
-												title={cell.id}
-											/>
-										{:else}
-											<Render of={cell.render()} />
-										{/if}
-									</Table.Head>
-								</Subscribe>
-							{/each}
-						</Table.Row>
-					</Subscribe>
-				{/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]">
+	<div class="relative grid grid-cols-{cols}">
+		{#if $leftSidebarVisible}
+			<DataTableFilterLeftSidebar {tableModel} />
+		{/if}
+		<div class="col-span-6 border-b">
+			<Table.Root {...$tableAttrs}>
+				<Table.Header>
+					{#each $headerRows as headerRow (headerRow.id)}
+						<Subscribe rowAttrs={headerRow.attrs()}>
+							<Table.Row>
+								{#each headerRow.cells as cell (cell.id)}
+									<Subscribe
+										attrs={cell.attrs()}
+										let:attrs
+										props={cell.props()}
+										let:props
+									>
+										<Table.Head {...attrs}>
+											{#if cell.id !== "select" && cell.id !== "actions"}
+												<DataTableColumnHeader
+													{props}
+													title={cell.id}
+												/>
+											{:else}
+												<Render of={cell.render()} />
+											{/if}
+										</Table.Head>
+									</Subscribe>
+								{/each}
+							</Table.Row>
+						</Subscribe>
+					{/each}
+				</Table.Header>
+				<Table.Body {...$tableBodyAttrs}>
+					{#each $pageRows as row (row.id)}
+						<Subscribe
+							rowAttrs={row.attrs()}
+							let:rowAttrs
+							rowProps={row.props()}
+							let:rowProps
+						>
+							<Table.Row
+								{...rowAttrs}
+								class={rowProps.select.selected
+									? "bg-muted"
+									: ""}
+							>
+								{#each row.cells as cell (cell.id)}
+									<Subscribe attrs={cell.attrs()} let:attrs>
+										<Table.Cell {...attrs}>
+											{#if cell.id === "task"}
+												<div class="w-[80px]">
+													<Button
+														variant="link"
+														size="sm"
+														class="underline"
+														on:click={() => {
+															const cells =
+																row.cellForId;
+															taskIdOnEdition.set(
+																cells.task.value
+															);
+														}}
+													>
+														<Render
+															of={cell.render()}
+														/>
+													</Button>
+												</div>
+											{:else}
 												<Render of={cell.render()} />
-											</div>
-										{:else}
-											<Render of={cell.render()} />
-										{/if}
-									</Table.Cell>
-								</Subscribe>
-							{/each}
-						</Table.Row>
-					</Subscribe>
-				{/each}
-			</Table.Body>
-		</Table.Root>
+											{/if}
+										</Table.Cell>
+									</Subscribe>
+								{/each}
+							</Table.Row>
+						</Subscribe>
+					{/each}
+				</Table.Body>
+			</Table.Root>
+		</div>
+		{#if $rightSidebarVisible}
+			<DataTableFilterRightSidebar {tableModel} />
+		{/if}
 	</div>
 	<DataTablePagination {tableModel} />
 </div>
diff --git a/apps/www/src/routes/examples/tasks/(components)/index.ts b/apps/www/src/routes/examples/tasks/(components)/index.ts
index f5021015f..608a4bbaa 100644
--- a/apps/www/src/routes/examples/tasks/(components)/index.ts
+++ b/apps/www/src/routes/examples/tasks/(components)/index.ts
@@ -8,3 +8,5 @@ export { default as DataTableToolbar } from "./data-table-toolbar.svelte";
 export { default as DataTablePagination } from "./data-table-pagination.svelte";
 export { default as DataTableViewOptions } from "./data-table-view-options.svelte";
 export { default as DataTableFacetedFilter } from "./data-table-faceted-filter.svelte";
+export { default as DataTableFilterRightSidebar } from "./data-table-filter-right-sidebar.svelte";
+export { default as DataTableFilterLeftSidebar } from "./data-table-filter-left-sidebar.svelte";

From 336f8d0aac3e2ff4273519994e32dcae96bbd7ab Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Fernando=20Lo=CC=81pez=20Guevara?=
 <fernando.lguevara@gmail.com>
Date: Tue, 7 Nov 2023 20:09:36 -0300
Subject: [PATCH 5/6] fix(examples/tasks): add click handler

---
 .../data-table-filter-left-sidebar.svelte     |  2 +-
 .../data-table-filter-right-sidebar.svelte    |  2 +-
 .../tasks/(components)/data-table.svelte      | 23 +++++++++++--------
 3 files changed, 15 insertions(+), 12 deletions(-)

diff --git a/apps/www/src/routes/examples/tasks/(components)/data-table-filter-left-sidebar.svelte b/apps/www/src/routes/examples/tasks/(components)/data-table-filter-left-sidebar.svelte
index 2b3facd99..ac8a19816 100644
--- a/apps/www/src/routes/examples/tasks/(components)/data-table-filter-left-sidebar.svelte
+++ b/apps/www/src/routes/examples/tasks/(components)/data-table-filter-left-sidebar.svelte
@@ -26,7 +26,7 @@
 	} = pluginStates.colFilter;
 </script>
 
-<aside class="relative col-span-2 border-r border-b p-2">
+<aside class="col-span-2 border-r border-b p-2">
 	<div class="sticky top-12">
 		<div class="flex flex-col space-y-2">
 			<span class="text-sm font-medium">Filters</span>
diff --git a/apps/www/src/routes/examples/tasks/(components)/data-table-filter-right-sidebar.svelte b/apps/www/src/routes/examples/tasks/(components)/data-table-filter-right-sidebar.svelte
index 4efa85021..f7ca45acf 100644
--- a/apps/www/src/routes/examples/tasks/(components)/data-table-filter-right-sidebar.svelte
+++ b/apps/www/src/routes/examples/tasks/(components)/data-table-filter-right-sidebar.svelte
@@ -25,7 +25,7 @@
 	);
 </script>
 
-<aside class="relative col-span-3 border-l border-b p-2">
+<aside class="col-span-3 border-l border-b p-2">
 	<div class="sticky top-12 flex flex-col h-full">
 		<Card.Header>
 			<Card.Title># {task.id}</Card.Title>
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 34beccc32..5471fc2db 100644
--- a/apps/www/src/routes/examples/tasks/(components)/data-table.svelte
+++ b/apps/www/src/routes/examples/tasks/(components)/data-table.svelte
@@ -227,7 +227,7 @@
 		tableAttrs,
 		tableBodyAttrs,
 		pluginStates: {
-			custom: { sidebar, taskIdOnEdition, taskOnEdition }
+			custom: { sidebar, taskIdOnEdition }
 		}
 	} = tableModel;
 
@@ -239,11 +239,17 @@
 		(!$anySidebarVisible
 			? 0
 			: ($leftSidebarVisible ? 2 : 0) + ($rightSidebarVisible ? 3 : 0));
+
+	/* eslint-disable @typescript-eslint/no-explicit-any */
+	function taskCellClicked(row: any) {
+		const cells = row.cellForId;
+		taskIdOnEdition.set(cells.task.value);
+	}
 </script>
 
-<div class="relative rounded-md border">
+<div class="rounded-md border">
 	<DataTableToolbar {tableModel} />
-	<div class="relative grid grid-cols-{cols}">
+	<div class="grid grid-cols-{cols}">
 		{#if $leftSidebarVisible}
 			<DataTableFilterLeftSidebar {tableModel} />
 		{/if}
@@ -299,13 +305,10 @@
 														variant="link"
 														size="sm"
 														class="underline"
-														on:click={() => {
-															const cells =
-																row.cellForId;
-															taskIdOnEdition.set(
-																cells.task.value
-															);
-														}}
+														on:click={() =>
+															taskCellClicked(
+																row
+															)}
 													>
 														<Render
 															of={cell.render()}

From 79d1053e81b909c3e0a49dfa00069b8f4cff3b81 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Fernando=20Lo=CC=81pez=20Guevara?=
 <fernando.lguevara@gmail.com>
Date: Tue, 7 Nov 2023 20:30:49 -0300
Subject: [PATCH 6/6] fix(examples/tasks): add hack to generate dynamic css
 classes

---
 .../routes/examples/tasks/(components)/data-table.svelte  | 8 ++++++++
 1 file changed, 8 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 5471fc2db..b5e9dbd51 100644
--- a/apps/www/src/routes/examples/tasks/(components)/data-table.svelte
+++ b/apps/www/src/routes/examples/tasks/(components)/data-table.svelte
@@ -247,6 +247,14 @@
 	}
 </script>
 
+<!-- HACK: we need to investigate why all tailwind css classes needs to be generated ahead of render -->
+<span class="hidden col-span-2" />
+<span class="hidden col-span-3" />
+<span class="hidden grid-cols-6" />
+<span class="hidden grid-cols-8" />
+<span class="hidden grid-cols-9" />
+<span class="hidden grid-cols-11" />
+
 <div class="rounded-md border">
 	<DataTableToolbar {tableModel} />
 	<div class="grid grid-cols-{cols}">