@ui-organized/svelte-table 0.0.0-stage → 6.0.0

package/dist/DataTable/DataTable.test.svelte.js

@@ -0,0 +1,360 @@
+import { describe, it, expect } from "vitest";
+import { createRawSnippet, mount, unmount, flushSync } from "svelte";
+import DataTable from "./DataTable.svelte";
+const DATA = Array.from({ length: 8 }, (_, index) => ({
+    id: `m-${index}`,
+    name: `Name ${index}`,
+}));
+const COLUMNS = [
+    { accessorKey: "name", header: "Name", meta: { primary: true } },
+];
+function render(props = {}) {
+    const target = document.createElement("div");
+    document.body.appendChild(target);
+    const app = mount(DataTable, {
+        target,
+        props: { data: DATA, columns: COLUMNS, label: "Members", getRowId: (r) => r.id, ...props },
+    });
+    flushSync();
+    return {
+        target,
+        destroy: () => {
+            unmount(app);
+            target.remove();
+        },
+        rowIds: () => [...target.querySelectorAll("tbody tr[data-row-id]")].map((row) => row.getAttribute("data-row-id")),
+    };
+}
+describe("<DataTable>", () => {
+    it("renders a table with a caption, a header and every row", () => {
+        const view = render();
+        expect(view.target.querySelector("caption")?.textContent).toBe("Members");
+        expect(view.target.querySelectorAll("thead th")).toHaveLength(1);
+        expect(view.rowIds()).toHaveLength(8);
+        view.destroy();
+    });
+    it("pages forward when the next control is used", () => {
+        const view = render({ paginated: true, pageSize: 3 });
+        expect(view.rowIds()).toEqual(["m-0", "m-1", "m-2"]);
+        const next = view.target.querySelector('.data-table__pagination button[aria-label="Next page"]');
+        expect(next, "the next-page control is rendered").not.toBeNull();
+        next.click();
+        flushSync();
+        expect(view.rowIds()).toEqual(["m-3", "m-4", "m-5"]);
+        view.destroy();
+    });
+});
+/**
+ * While rows are selected, the bulk actions take the place of the toolbar's
+ * own controls: deciding what to do with the selection comes before sorting or
+ * filtering further. Asserted structurally — which element holds what — because
+ * that is the part a stylesheet cannot recover from.
+ */
+describe("the selection's bulk actions", () => {
+    const withBulk = (defaultFilters) => render({
+        // Filterable, so the toolbar has an "Add filter" control to give way.
+        columns: [{ accessorKey: "name", header: "Name", meta: { primary: true, filter: true } }],
+        selection: "multiple",
+        defaultFilters,
+        bulkActions: [{ id: "export", label: "Export", onRun: () => { } }],
+    });
+    const select = (target) => {
+        target
+            .querySelector('[data-cell="0:1"]')
+            ?.dispatchEvent(new KeyboardEvent("keydown", { key: " ", bubbles: true }));
+        flushSync();
+    };
+    const toolbar = (target) => target.querySelector(".data-table__toolbar");
+    it("are absent, and the sub-bar too, while nothing is filtered or selected", () => {
+        const view = withBulk();
+        expect(view.target.querySelector(".data-table__selection-bar")).toBeNull();
+        expect(view.target.querySelector(".data-table__subbar")).toBeNull();
+        expect(toolbar(view.target)?.querySelector('[aria-label="Add filter"]')).not.toBeNull();
+        view.destroy();
+    });
+    it("replace the sort, filter and table actions in the toolbar row", () => {
+        const view = withBulk();
+        select(view.target);
+        const bar = toolbar(view.target)?.querySelector(".data-table__selection-bar");
+        expect(bar).not.toBeNull();
+        // A plain labelled group, not a `role="toolbar"` with its own surface.
+        expect(bar?.getAttribute("role")).toBe("group");
+        expect(bar?.classList.contains("toolbar")).toBe(false);
+        expect(toolbar(view.target)?.querySelector('[aria-label="Add filter"]')).toBeNull();
+        // Search stays: it narrows what is on screen, not what is selected.
+        expect(toolbar(view.target)?.querySelector('input[type="search"]')).not.toBeNull();
+        expect(view.target.querySelectorAll(".data-table__selection-bar")).toHaveLength(1);
+        view.destroy();
+    });
+    it("leave the filter chips on the line below", () => {
+        const view = withBulk([{ columnId: "name", operator: "contains", values: ["Name"] }]);
+        select(view.target);
+        const subbar = view.target.querySelector(".data-table__subbar");
+        expect(subbar?.querySelector(".data-table__filters")).not.toBeNull();
+        expect(subbar?.querySelector(".data-table__selection-bar")).toBeNull();
+        view.destroy();
+    });
+});
+/**
+ * Column reordering: header move buttons, a toolbar-switched mode, and
+ * Alt+Arrow on a focused header. Mirrors React's "column reordering"; dragging
+ * is native drag and drop, which jsdom does not implement.
+ */
+describe("column reordering", () => {
+    const COLS = [
+        { accessorKey: "name", header: "Name", meta: { primary: true } },
+        { accessorKey: "role", header: "Role" },
+        { accessorKey: "seats", header: "Seats" },
+    ];
+    const ROWS = [
+        { id: "a", name: "Ada", role: "Engineer", seats: 3 },
+        { id: "b", name: "Grace", role: "Admin", seats: 1 },
+    ];
+    const reorderable = (setting, extra = {}) => render({ data: ROWS, columns: COLS, label: "Team", reorderable: setting, ...extra });
+    const headers = (target) => [...target.querySelectorAll("thead th")]
+        .map((cell) => cell.textContent?.replace(/\s+/g, " ").trim())
+        .filter(Boolean);
+    const button = (target, label) => target.querySelector(`button[aria-label="${label}"]`);
+    const click = (element) => {
+        element?.click();
+        flushSync();
+    };
+    it("moves a column one place with its header buttons, disabled at the ends", () => {
+        const view = reorderable("always");
+        expect(headers(view.target)).toEqual(["Name", "Role", "Seats"]);
+        expect(button(view.target, "Move Name left")?.disabled).toBe(true);
+        expect(button(view.target, "Move Seats right")?.disabled).toBe(true);
+        click(button(view.target, "Move Name right"));
+        expect(headers(view.target)).toEqual(["Role", "Name", "Seats"]);
+        click(button(view.target, "Move Seats left"));
+        expect(headers(view.target)).toEqual(["Role", "Seats", "Name"]);
+        view.destroy();
+    });
+    it("in toggle mode, offers moving only inside reorder mode", () => {
+        const view = reorderable("toggle");
+        expect(button(view.target, "Move Name right")).toBeNull();
+        expect(view.target.querySelector('.data-table__head-inner[draggable="true"]')).toBeNull();
+        click(button(view.target, "Reorder columns"));
+        expect(button(view.target, "Move Name right")).not.toBeNull();
+        expect(view.target.querySelectorAll('.data-table__head-inner[draggable="true"]')).toHaveLength(3);
+        click(button(view.target, "Done reordering columns"));
+        expect(button(view.target, "Move Name right")).toBeNull();
+        view.destroy();
+    });
+    it("leaves the table's own columns where they are", () => {
+        const view = reorderable("always", { selection: "multiple" });
+        const select = view.target.querySelector("th.data-table__select-cell");
+        expect(select?.querySelector('[draggable="true"]')).toBeNull();
+        expect(select?.querySelector(".data-table__move")).toBeNull();
+        expect(button(view.target, "Move Name left")?.disabled).toBe(true);
+        view.destroy();
+    });
+    it("moves the focused header's column with Alt+Arrow, and focus goes with it", () => {
+        const view = reorderable("always", { selection: "multiple" });
+        const name = view.target.querySelector('[data-cell="-1:1"]');
+        name?.focus();
+        flushSync();
+        name?.dispatchEvent(new KeyboardEvent("keydown", { key: "ArrowRight", altKey: true, bubbles: true }));
+        flushSync();
+        expect(headers(view.target)).toEqual(["Role", "Name", "Seats"]);
+        expect(view.target.querySelector('[data-cell][tabindex="0"]')?.getAttribute("data-cell")).toBe("-1:2");
+        view.destroy();
+    });
+});
+/**
+ * `meta.date`: US-formatted strings in, the column's own format out, sorted as
+ * dates. Mirrors React's "date columns".
+ */
+describe("date columns", () => {
+    const parseUs = (value) => {
+        const [m, d, y] = String(value).split("/").map(Number);
+        return y && m && d ? new Date(y, m - 1, d) : null;
+    };
+    const dmy = (date) => `${date.getDate()}.${date.getMonth() + 1}.${date.getFullYear()}`;
+    it("shows each date in the column's format, sorted as dates rather than strings", () => {
+        const view = render({
+            data: [
+                { id: "a", name: "Ada", joined: "2/1/2026" },
+                { id: "b", name: "Grace", joined: "11/10/2025" },
+                { id: "c", name: "Alan", joined: "12/31/2025" },
+            ],
+            columns: [
+                { accessorKey: "name", header: "Name", meta: { primary: true } },
+                { accessorKey: "joined", header: "Joined", meta: { date: { parse: parseUs, format: dmy } } },
+            ],
+            defaultSorting: [{ id: "joined", desc: false }],
+        });
+        const joined = [...view.target.querySelectorAll("tbody tr")].map((row) => row.lastElementChild?.textContent?.trim());
+        expect(joined).toEqual(["10.11.2025", "31.12.2025", "1.2.2026"]);
+        view.destroy();
+    });
+});
+/**
+ * How many rows are selected, and the offer to reach the ones off screen, sit
+ * under the rows rather than in the toolbar. Mirrors React's "the selection
+ * footer".
+ */
+describe("the selection footer", () => {
+    const paged = () => render({ selection: "multiple", paginated: true, pageSize: 4 });
+    const key = (target, init) => {
+        target
+            .querySelector('[data-cell="0:1"]')
+            ?.dispatchEvent(new KeyboardEvent("keydown", { bubbles: true, ...init }));
+        flushSync();
+    };
+    const footer = (target) => target.querySelector(".data-table__selection-footer");
+    it("is absent while nothing is selected", () => {
+        const view = paged();
+        expect(footer(view.target)).toBeNull();
+        view.destroy();
+    });
+    it("rides inside the viewport, after the table, and holds the count", () => {
+        const view = paged();
+        key(view.target, { key: " " });
+        const bar = footer(view.target);
+        expect(bar?.parentElement?.classList.contains("data-table__viewport")).toBe(true);
+        expect(bar?.previousElementSibling?.tagName).toBe("TABLE");
+        expect(footer(view.target)?.querySelector(".data-table__selection-count")?.textContent?.trim()).toBe("1 row selected");
+        expect(view.target.querySelectorAll(".data-table__selection-count")).toHaveLength(1);
+        expect(footer(view.target)?.querySelector("button")).toBeNull();
+        view.destroy();
+    });
+    it("offers the hidden rows as a real button once the page is fully selected", () => {
+        const view = paged();
+        key(view.target, { key: " " });
+        for (let i = 0; i < 3; i++)
+            key(view.target, { key: "ArrowDown", shiftKey: true });
+        const offer = footer(view.target)?.querySelector("button");
+        expect(offer?.classList.contains("btn")).toBe(true);
+        // Four of eight on the page are selected, so four are hidden.
+        expect(offer?.textContent?.trim()).toBe("Select 4 hidden rows");
+        offer?.click();
+        flushSync();
+        expect(footer(view.target)?.querySelector(".data-table__selection-count")?.textContent?.trim()).toBe("8 rows selected");
+        expect(footer(view.target)?.querySelector("button")).toBeNull();
+        view.destroy();
+    });
+});
+/**
+ * Card mode is the phone layout. Sort and filter open sheets from labelled
+ * buttons that count what is applied, the chips row goes away, and each card
+ * puts its controls in the top-right corner, checkbox last.
+ */
+describe("card mode", () => {
+    const FILTERABLE = [
+        { accessorKey: "name", header: "Name", meta: { primary: true, filter: true } },
+    ];
+    const cards = (defaultFilters) => render({
+        columns: FILTERABLE,
+        selection: "multiple",
+        responsive: { mode: "cards" },
+        defaultFilters,
+        defaultSorting: [{ id: "name", desc: false }],
+        rowActions: [{ id: "edit", label: "Edit", onRun: () => { } }],
+    });
+    const button = (target, name) => [...target.querySelectorAll(".data-table__toolbar button")].find((b) => name.test(b.textContent?.trim() ?? ""));
+    const ONE = [{ columnId: "name", operator: "contains", values: ["Name"] }];
+    it("swaps the sort and filter menus for sheet buttons, counted by badges", () => {
+        const view = cards(ONE);
+        const filter = button(view.target, /^Filter/);
+        const sort = button(view.target, /^Sort/);
+        expect(filter?.querySelector(".data-table__badge")?.textContent).toBe("1");
+        expect(filter?.textContent).toContain(", 1 applied");
+        expect(sort?.querySelector(".data-table__badge")?.textContent).toBe("1");
+        // The desktop funnel is gone.
+        expect(view.target.querySelector('.data-table__toolbar [aria-label="Add filter"]')).toBeNull();
+        view.destroy();
+    });
+    it("shows no badge while nothing is applied", () => {
+        const view = render({ columns: FILTERABLE, responsive: { mode: "cards" } });
+        expect(button(view.target, /^Filter/)?.querySelector(".data-table__badge")).toBeNull();
+        view.destroy();
+    });
+    it("counts only complete conditions: a draft with no value is not applied", () => {
+        const view = cards([{ columnId: "name", operator: "contains", values: [] }]);
+        expect(button(view.target, /^Filter/)?.querySelector(".data-table__badge")).toBeNull();
+        view.destroy();
+    });
+    it("keeps filters out of the chips row, which the sheet replaces", () => {
+        const view = cards(ONE);
+        expect(view.target.querySelector(".data-table__subbar")).toBeNull();
+        expect(view.target.querySelector(".data-table__filter-chip")).toBeNull();
+        view.destroy();
+    });
+    it("puts the row actions and then the checkbox at the card's top-right", () => {
+        const view = cards();
+        const header = view.target.querySelector(".data-table__card-header");
+        const children = [...(header?.children ?? [])];
+        expect(children[0]?.classList.contains("data-table__card-title")).toBe(true);
+        const controls = header?.querySelector(".data-table__card-controls");
+        expect(controls).toBe(children[children.length - 1]);
+        const last = controls?.lastElementChild;
+        expect(last?.querySelector('input[type="checkbox"]') ?? last).not.toBeNull();
+        expect(controls?.querySelector('[aria-label^="Actions for"]')).not.toBeNull();
+        view.destroy();
+    });
+});
+describe("inline editing", () => {
+    // The editor is a raw snippet: a plain <input> wired to the edit context.
+    const editable = (onEdit = () => { }) => render({
+        columns: [
+            { accessorKey: "name", header: "Name", meta: { primary: true } },
+            {
+                id: "seats",
+                accessorFn: (_row, index) => index + 1,
+                header: "Seats",
+                meta: {
+                    edit: {
+                        render: (ctx) => createRawSnippet(() => ({
+                            render: () => '<input aria-label="Seats" />',
+                            setup: (input) => {
+                                input.value = String(ctx.value ?? "");
+                                input.addEventListener("input", () => ctx.setValue(Number(input.value)));
+                                input.addEventListener("change", () => ctx.commit());
+                            },
+                        })),
+                    },
+                },
+            },
+        ],
+        onEdit,
+    });
+    it("marks the editable column's header, and only that one", () => {
+        const view = editable();
+        const seats = view.target.querySelector('thead th[data-column-id="seats"]');
+        expect(seats?.classList.contains("data-table__head-cell--editable")).toBe(true);
+        expect(seats?.querySelector(".data-table__edit-icon")).not.toBeNull();
+        expect(seats?.textContent).toContain(", editable");
+        expect(view.target.querySelectorAll("thead .data-table__edit-icon")).toHaveLength(1);
+        expect(view.target
+            .querySelector('[data-cell="0:1"]')
+            ?.classList.contains("data-table__cell--editable")).toBe(true);
+        expect(view.target
+            .querySelector('[data-cell="0:0"]')
+            ?.classList.contains("data-table__cell--editable")).toBe(false);
+        view.destroy();
+    });
+    it("opens with one click, and a click inside the editor keeps the draft", async () => {
+        const committed = [];
+        const view = editable((patch) => committed.push(patch.value));
+        view.target.querySelector('[data-cell="0:1"]')?.click();
+        flushSync();
+        const input = view.target.querySelector(".data-table__editor input");
+        expect(input).not.toBeNull();
+        flushSync();
+        expect(document.activeElement).toBe(input);
+        input.value = "9";
+        input.dispatchEvent(new Event("input", { bubbles: true }));
+        flushSync();
+        // Each draft change re-renders the editor snippet, so query the live input.
+        const live = () => view.target.querySelector(".data-table__editor input");
+        live().click();
+        flushSync();
+        // Had the click restarted the edit, the draft would be back to 1.
+        live().dispatchEvent(new Event("change", { bubbles: true }));
+        flushSync();
+        await Promise.resolve();
+        expect(committed).toEqual([9]);
+        view.destroy();
+    });
+});

package/dist/DataTable/index.d.ts

@@ -0,0 +1,2 @@
+export { default as DataTable } from "./DataTable.svelte";
+//# sourceMappingURL=index.d.ts.map

package/dist/DataTable/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/lib/DataTable/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,IAAI,SAAS,EAAE,MAAM,oBAAoB,CAAC"}

package/dist/DataTable/index.js

@@ -0,0 +1 @@
+export { default as DataTable } from "./DataTable.svelte";

package/dist/components/Table/CellEditor.svelte

@@ -0,0 +1,29 @@
+<!--
+  The editor's wrapper, and the thing that puts focus inside it.
+
+  Focus is the package's job, not the consumer's: `meta.edit.render` returns
+  whatever control the consumer likes, and most of the library's controls do not
+  expose their inner `<input>` — so a consumer trying to do this themselves would
+  reach for `autofocus`, which is unreliable for an element mounting
+  mid-interaction.
+
+  A component rather than an effect inside `TableCell` so the mount hook exists
+  only while something is being edited, instead of once per rendered cell.
+-->
+<script lang="ts">
+  import type { Snippet } from "svelte";
+  import { onMount } from "svelte";
+
+  let { children }: { children?: Snippet } = $props();
+  let host = $state<HTMLElement | null>(null);
+
+  onMount(() => {
+    const focusable = host?.querySelector<HTMLElement>(
+      'input:not([type="hidden"]), textarea, select, [contenteditable="true"], [tabindex]:not([tabindex="-1"])',
+    );
+    focusable?.focus();
+    if (focusable instanceof HTMLInputElement) focusable.select();
+  });
+</script>
+
+<span bind:this={host} class="data-table__editor">{@render children?.()}</span>

package/dist/components/Table/CellEditor.svelte.d.ts

@@ -0,0 +1,8 @@
+import type { Snippet } from "svelte";
+type $$ComponentProps = {
+    children?: Snippet;
+};
+declare const CellEditor: import("svelte").Component<$$ComponentProps, {}, "">;
+type CellEditor = ReturnType<typeof CellEditor>;
+export default CellEditor;
+//# sourceMappingURL=CellEditor.svelte.d.ts.map

package/dist/components/Table/CellEditor.svelte.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"CellEditor.svelte.d.ts","sourceRoot":"","sources":["../../../src/lib/components/Table/CellEditor.svelte.ts"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAE,OAAO,EAAE,MAAM,QAAQ,CAAC;AAGrC,KAAK,gBAAgB,GAAI;IAAE,QAAQ,CAAC,EAAE,OAAO,CAAA;CAAE,CAAC;AAsBjD,QAAA,MAAM,UAAU,sDAAwC,CAAC;AACzD,KAAK,UAAU,GAAG,UAAU,CAAC,OAAO,UAAU,CAAC,CAAC;AAChD,eAAe,UAAU,CAAC"}

package/dist/components/Table/MoveButtons.svelte

@@ -0,0 +1,60 @@
+<!--
+  Left and right, for a column that can be moved — the click-and-keyboard half
+  of dragging the header. Over the header's end rather than in its flow, so
+  showing them does not shove the label. In `"always"` mode the stylesheet
+  shows them on hover and focus; in `"toggle"` mode they are up for as long as
+  reorder mode is.
+
+  In an interactive grid they are not tab stops, like every control inside a
+  cell; Alt+Arrow on the focused header is the keyboard route there.
+-->
+<script lang="ts">
+  import { Icon } from "@ui-organized/svelte";
+  import { internalGlyph as glyph } from "@ui-organized/svelte";
+  import { getTable } from "../../core/tableContext.js";
+
+  let { columnId, name }: { columnId: string; name: string } = $props();
+  const table = getTable();
+
+  let left = $state<HTMLButtonElement | null>(null);
+  let right = $state<HTMLButtonElement | null>(null);
+
+  const press = (direction: -1 | 1, event: MouseEvent) => {
+    const hadFocus = document.activeElement === event.currentTarget;
+    table.reorder.move(columnId, direction);
+    if (!hadFocus) return;
+    // Re-rendering in the new order moves this header's DOM node, and a moved
+    // node drops focus. Put it back on the same button — or on the other one,
+    // when this move took the column to the end it pointed at.
+    requestAnimationFrame(() => {
+      const own = direction === -1 ? left : right;
+      const other = direction === -1 ? right : left;
+      (own && !own.disabled ? own : other)?.focus();
+    });
+  };
+</script>
+
+<span class="data-table__move" data-mode={table.reorder.mode}>
+  <button
+    bind:this={left}
+    type="button"
+    class="data-table__move-button"
+    aria-label={`Move ${name} left`}
+    disabled={!table.reorder.canMove(columnId, -1)}
+    tabindex={table.interactive ? -1 : undefined}
+    onclick={(event) => press(-1, event)}
+  >
+    <Icon name={glyph("chevron-left")} size={16} />
+  </button>
+  <button
+    bind:this={right}
+    type="button"
+    class="data-table__move-button"
+    aria-label={`Move ${name} right`}
+    disabled={!table.reorder.canMove(columnId, 1)}
+    tabindex={table.interactive ? -1 : undefined}
+    onclick={(event) => press(1, event)}
+  >
+    <Icon name={glyph("chevron-right")} size={16} />
+  </button>
+</span>

package/dist/components/Table/MoveButtons.svelte.d.ts

@@ -0,0 +1,8 @@
+type $$ComponentProps = {
+    columnId: string;
+    name: string;
+};
+declare const MoveButtons: import("svelte").Component<$$ComponentProps, {}, "">;
+type MoveButtons = ReturnType<typeof MoveButtons>;
+export default MoveButtons;
+//# sourceMappingURL=MoveButtons.svelte.d.ts.map

package/dist/components/Table/MoveButtons.svelte.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"MoveButtons.svelte.d.ts","sourceRoot":"","sources":["../../../src/lib/components/Table/MoveButtons.svelte.ts"],"names":[],"mappings":"AAOC,KAAK,gBAAgB,GAAI;IAAE,QAAQ,EAAE,MAAM,CAAC;IAAC,IAAI,EAAE,MAAM,CAAA;CAAE,CAAC;AAuC7D,QAAA,MAAM,WAAW,sDAAwC,CAAC;AAC1D,KAAK,WAAW,GAAG,UAAU,CAAC,OAAO,WAAW,CAAC,CAAC;AAClD,eAAe,WAAW,CAAC"}

package/dist/components/Table/ResizeHandle.svelte

@@ -0,0 +1,82 @@
+<!--
+  Pointer drag and keyboard, on one control.
+
+  The drag is TanStack's own handler; the keyboard is core's `resizeKeyDown`, so
+  the two cannot drift. It is a `role="separator"` with `aria-valuenow`, which is
+  what makes the column width something a screen reader can report rather than
+  something only a mouse can discover.
+-->
+<script lang="ts" generics="T extends RowData">
+  import {
+    getResizeHandleProps,
+    resizeKeyDown,
+    type RowData,
+    type TableHeaderInstance,
+  } from "@ui-organized/table-core";
+  import { getTable } from "../../core/tableContext.js";
+  import { svelteProps } from "../../core/props.js";
+
+  let { header }: { header: TableHeaderInstance<T> } = $props();
+  const table = getTable<T>();
+
+  const column = $derived(header.column);
+  const bounds = $derived.by(() => {
+    const width = column.getSize();
+    return {
+      width,
+      min: column.columnDef.minSize ?? 0,
+      max: column.columnDef.maxSize ?? width,
+    };
+  });
+
+  const handleProps = $derived.by(() => {
+    const headerDef = column.columnDef.header;
+    return getResizeHandleProps({
+      columnId: column.id,
+      columnLabel: typeof headerDef === "string" ? headerDef : column.id,
+      width: bounds.width,
+      min: bounds.min,
+      max: bounds.max,
+      active: column.getIsResizing(),
+    });
+  });
+
+  /** Stops the header's sort button from firing on the same press. */
+  function startResize(event: MouseEvent | TouchEvent) {
+    event.stopPropagation();
+    header.getResizeHandler()(event);
+  }
+
+  function onKeyDown(event: KeyboardEvent) {
+    const action = resizeKeyDown(bounds, {
+      key: event.key,
+      shift: event.shiftKey,
+      ctrl: event.ctrlKey,
+      meta: event.metaKey,
+    });
+    if (action.type === "none") return;
+    event.preventDefault();
+    event.stopPropagation();
+    if (action.type === "reset") {
+      table.table.setColumnSizing((old: Record<string, number>) => {
+        const next = { ...old };
+        delete next[column.id];
+        return next;
+      });
+      return;
+    }
+    table.table.setColumnSizing((old: Record<string, number>) => ({
+      ...old,
+      [column.id]: action.width,
+    }));
+  }
+</script>
+
+<button
+  type="button"
+  {...svelteProps(handleProps)}
+  onmousedown={startResize}
+  ontouchstart={startResize}
+  onclick={(event) => event.stopPropagation()}
+  onkeydown={onKeyDown}
+></button>

package/dist/components/Table/ResizeHandle.svelte.d.ts

@@ -0,0 +1,28 @@
+import { type RowData, type TableHeaderInstance } from "@ui-organized/table-core";
+declare function $$render<T extends RowData>(): {
+    props: {
+        header: TableHeaderInstance<T>;
+    };
+    exports: {};
+    bindings: "";
+    slots: {};
+    events: {};
+};
+declare class __sveltets_Render<T extends RowData> {
+    props(): ReturnType<typeof $$render<T>>['props'];
+    events(): ReturnType<typeof $$render<T>>['events'];
+    slots(): ReturnType<typeof $$render<T>>['slots'];
+    bindings(): "";
+    exports(): {};
+}
+interface $$IsomorphicComponent {
+    new <T extends RowData>(options: import('svelte').ComponentConstructorOptions<ReturnType<__sveltets_Render<T>['props']>>): import('svelte').SvelteComponent<ReturnType<__sveltets_Render<T>['props']>, ReturnType<__sveltets_Render<T>['events']>, ReturnType<__sveltets_Render<T>['slots']>> & {
+        $$bindings?: ReturnType<__sveltets_Render<T>['bindings']>;
+    } & ReturnType<__sveltets_Render<T>['exports']>;
+    <T extends RowData>(internal: unknown, props: ReturnType<__sveltets_Render<T>['props']> & {}): ReturnType<__sveltets_Render<T>['exports']>;
+    z_$$bindings?: ReturnType<__sveltets_Render<any>['bindings']>;
+}
+declare const ResizeHandle: $$IsomorphicComponent;
+type ResizeHandle<T extends RowData> = InstanceType<typeof ResizeHandle<T>>;
+export default ResizeHandle;
+//# sourceMappingURL=ResizeHandle.svelte.d.ts.map

package/dist/components/Table/ResizeHandle.svelte.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ResizeHandle.svelte.d.ts","sourceRoot":"","sources":["../../../src/lib/components/Table/ResizeHandle.svelte.ts"],"names":[],"mappings":"AAGA,OAAO,EAGH,KAAK,OAAO,EACZ,KAAK,mBAAmB,EACzB,MAAM,0BAA0B,CAAC;AAGpC,iBAAS,QAAQ,CAAC,CAAC,SAAS,OAAO;;gBAIG,mBAAmB,CAAC,CAAC,CAAC;;;;;;EA8D6D;AACzH,cAAM,iBAAiB,CAAC,CAAC,SAAS,OAAO;IACrC,KAAK,IAAI,UAAU,CAAC,OAAO,QAAQ,CAAC,CAAC,CAAC,CAAC,CAAC,OAAO,CAAC;IAChD,MAAM,IAAI,UAAU,CAAC,OAAO,QAAQ,CAAC,CAAC,CAAC,CAAC,CAAC,QAAQ,CAAC;IAClD,KAAK,IAAI,UAAU,CAAC,OAAO,QAAQ,CAAC,CAAC,CAAC,CAAC,CAAC,OAAO,CAAC;IAChD,QAAQ;IACR,OAAO;CACV;AAED,UAAU,qBAAqB;IAC3B,KAAK,CAAC,SAAS,OAAO,EAAE,OAAO,EAAE,OAAO,QAAQ,EAAE,2BAA2B,CAAC,UAAU,CAAC,iBAAiB,CAAC,CAAC,CAAC,CAAC,OAAO,CAAC,CAAC,CAAC,GAAG,OAAO,QAAQ,EAAE,eAAe,CAAC,UAAU,CAAC,iBAAiB,CAAC,CAAC,CAAC,CAAC,OAAO,CAAC,CAAC,EAAE,UAAU,CAAC,iBAAiB,CAAC,CAAC,CAAC,CAAC,QAAQ,CAAC,CAAC,EAAE,UAAU,CAAC,iBAAiB,CAAC,CAAC,CAAC,CAAC,OAAO,CAAC,CAAC,CAAC,GAAG;QAAE,UAAU,CAAC,EAAE,UAAU,CAAC,iBAAiB,CAAC,CAAC,CAAC,CAAC,UAAU,CAAC,CAAC,CAAA;KAAE,GAAG,UAAU,CAAC,iBAAiB,CAAC,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC;IAC5Y,CAAC,CAAC,SAAS,OAAO,EAAE,QAAQ,EAAE,OAAO,EAAE,KAAK,EAAE,UAAU,CAAC,iBAAiB,CAAC,CAAC,CAAC,CAAC,OAAO,CAAC,CAAC,GAAG,EAAE,GAAG,UAAU,CAAC,iBAAiB,CAAC,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC;IAC3I,YAAY,CAAC,EAAE,UAAU,CAAC,iBAAiB,CAAC,GAAG,CAAC,CAAC,UAAU,CAAC,CAAC,CAAC;CACjE;AACD,QAAA,MAAM,YAAY,EAAE,qBAAmC,CAAC;AACtC,KAAK,YAAY,CAAC,CAAC,SAAS,OAAO,IAAI,YAAY,CAAC,OAAO,YAAY,CAAC,CAAC,CAAC,CAAC,CAAC;AAC9E,eAAe,YAAY,CAAC"}

package/dist/components/Table/Table.svelte

@@ -0,0 +1,17 @@
+<!-- The root: size, variant, and the element every part measures itself against. -->
+<script lang="ts">
+  import type { Snippet } from "svelte";
+  import { clsx } from "clsx";
+  import { getRootProps } from "@ui-organized/table-core";
+  import { getTable } from "../../core/tableContext.js";
+  import { elementRef } from "../../core/elementRef.js";
+  import { svelteProps } from "../../core/props.js";
+
+  let { class: className, children }: { class?: string; children?: Snippet } = $props();
+  const table = getTable();
+  const root = $derived(getRootProps(table.chrome));
+</script>
+
+<div {...svelteProps(root)} class={clsx(root.className, className)} use:elementRef={table.rootRef}>
+  {@render children?.()}
+</div>

package/dist/components/Table/Table.svelte.d.ts

@@ -0,0 +1,9 @@
+import type { Snippet } from "svelte";
+type $$ComponentProps = {
+    class?: string;
+    children?: Snippet;
+};
+declare const Table: import("svelte").Component<$$ComponentProps, {}, "">;
+type Table = ReturnType<typeof Table>;
+export default Table;
+//# sourceMappingURL=Table.svelte.d.ts.map

package/dist/components/Table/Table.svelte.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Table.svelte.d.ts","sourceRoot":"","sources":["../../../src/lib/components/Table/Table.svelte.ts"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAE,OAAO,EAAE,MAAM,QAAQ,CAAC;AAOrC,KAAK,gBAAgB,GAAI;IAAE,KAAK,CAAC,EAAE,MAAM,CAAC;IAAC,QAAQ,CAAC,EAAE,OAAO,CAAA;CAAE,CAAC;AAqBjE,QAAA,MAAM,KAAK,sDAAwC,CAAC;AACpD,KAAK,KAAK,GAAG,UAAU,CAAC,OAAO,KAAK,CAAC,CAAC;AACtC,eAAe,KAAK,CAAC"}