Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

docs: Update tasks example to be 1:1 with original #925

Merged
merged 9 commits into from
Mar 22, 2024
Original file line number Diff line number Diff line change
@@ -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 };
Expand All @@ -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") {
Expand All @@ -30,7 +37,20 @@
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() {
hiddenColumnIds.update((ids: string[]) => {
if (ids.includes(cellId)) {
return ids;
}
return [...ids, cellId];
});
}
</script>

Expand All @@ -42,6 +62,7 @@
variant="ghost"
builders={[builder]}
class="-ml-3 h-8 data-[state=open]:bg-accent"
size="sm"
>
<slot />
{#if props.sort.order === "desc"}
Expand All @@ -54,8 +75,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="mr-2 h-3.5 w-3.5 text-muted-foreground/70" />
Asc
</DropdownMenu.Item>
<DropdownMenu.Item on:click={handleDescSort}>
<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="mr-2 h-3.5 w-3.5 text-muted-foreground/70" />
Hide
</DropdownMenu.Item>
</DropdownMenu.Content>
</DropdownMenu.Root>
</div>
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -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>
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -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>
Expand All @@ -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}
Expand Down
54 changes: 32 additions & 22 deletions apps/www/src/routes/examples/tasks/(components)/data-table.svelte
Original file line number Diff line number Diff line change
Expand Up @@ -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()} />
Expand All @@ -196,25 +198,33 @@
{/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}
</Table.Cell>
</Subscribe>
{/each}
</Table.Row>
</Subscribe>
{/each}
{:else}
<Table.Row>
<Table.Cell colspan={columns.length} class="h-24 text-center">
No results.
</Table.Cell>
</Table.Row>
{/if}
</Table.Body>
</Table.Root>
</div>
Expand Down
Loading