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

package/dist/components/Table/TableBody.svelte

@@ -0,0 +1,78 @@
+<!--
+  The body, and the four states it decides between on its own.
+
+  Explicit content wins: layer-2 composition is the point of these parts.
+  Otherwise `<TableBody />` alone is a complete table body — the error, the
+  loading skeleton, the empty state and the rows are all its business.
+-->
+<script lang="ts" generics="T extends RowData">
+  import type { Snippet } from "svelte";
+  import { getSpacerProps, type RowData } from "@ui-organized/table-core";
+  import { getTable } from "../../core/tableContext.js";
+  import { svelteProps } from "../../core/props.js";
+  import { TableEmpty, TableError, TableLoading } from "../TableStates/index.js";
+  import TableRow from "./TableRow.svelte";
+
+  let { children }: { children?: Snippet } = $props();
+  const table = getTable<T>();
+
+  const spacers = $derived(
+    table.virtual.enabled ? table.virtual.spacers : { top: 0, bottom: 0 },
+  );
+  const renderRows = $derived(table.renderRows);
+  const editTarget = $derived(table.edit.state.target);
+
+  const state = $derived(
+    children
+      ? "slot"
+      : table.options.error
+        ? "error"
+        : table.loading && renderRows.length === 0
+          ? "loading"
+          : renderRows.length === 0
+            ? "empty"
+            : "rows",
+  );
+
+  const spacerProps = (height: number) => getSpacerProps(height, table.chrome.colCount);
+  const focusedColFor = (index: number) =>
+    table.focus.cursor.row === index ? table.focus.cursor.col : null;
+  const editContextFor = (row: (typeof renderRows)[number]["row"]) =>
+    editTarget?.rowId === row.id ? table.edit.contextFor(row, editTarget.columnId) : null;
+</script>
+
+<tbody class="data-table__body">
+  {#if state === "slot"}
+    {@render children?.()}
+  {:else if state === "error"}
+    <TableError>
+      {#if typeof table.options.error === "function"}
+        {@render table.options.error()}
+      {:else}
+        {table.options.error}
+      {/if}
+    </TableError>
+  {:else if state === "loading"}
+    <TableLoading />
+  {:else if state === "empty"}
+    <TableEmpty />
+  {:else}
+    {#if spacers.top > 0}
+      {@const props = spacerProps(spacers.top)}
+      <tr {...svelteProps(props.row)}><td {...svelteProps(props.cell)}></td></tr>
+    {/if}
+    {#each renderRows as entry (entry.row.id)}
+      <TableRow
+        row={entry.row}
+        index={entry.index}
+        absoluteIndex={entry.absoluteIndex}
+        focusedCol={focusedColFor(entry.index)}
+        editContext={editContextFor(entry.row)}
+      />
+    {/each}
+    {#if spacers.bottom > 0}
+      {@const props = spacerProps(spacers.bottom)}
+      <tr {...svelteProps(props.row)}><td {...svelteProps(props.cell)}></td></tr>
+    {/if}
+  {/if}
+</tbody>

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

@@ -0,0 +1,30 @@
+import type { Snippet } from "svelte";
+import { type RowData } from "@ui-organized/table-core";
+type $$ComponentProps = {
+    children?: Snippet;
+};
+declare function $$render<T extends RowData>(): {
+    props: $$ComponentProps;
+    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 TableBody: $$IsomorphicComponent;
+type TableBody<T extends RowData> = InstanceType<typeof TableBody<T>>;
+export default TableBody;
+//# sourceMappingURL=TableBody.svelte.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"TableBody.svelte.d.ts","sourceRoot":"","sources":["../../../src/lib/components/Table/TableBody.svelte.ts"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAE,OAAO,EAAE,MAAM,QAAQ,CAAC;AACtC,OAAO,EAAkB,KAAK,OAAO,EAAE,MAAM,0BAA0B,CAAC;AAMvE,KAAK,gBAAgB,GAAI;IAAE,QAAQ,CAAC,EAAE,OAAO,CAAA;CAAE,CAAC;AAAA,iBAAS,QAAQ,CAAC,CAAC,SAAS,OAAO;WAqEvD,gBAAgB;;;;;EAA4E;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,SAAS,EAAE,qBAAmC,CAAC;AACnC,KAAK,SAAS,CAAC,CAAC,SAAS,OAAO,IAAI,YAAY,CAAC,OAAO,SAAS,CAAC,CAAC,CAAC,CAAC,CAAC;AACxE,eAAe,SAAS,CAAC"}

package/dist/components/Table/TableCell.svelte

@@ -0,0 +1,106 @@
+<script lang="ts" generics="T extends RowData">
+  import { FlexRender } from "@tanstack/svelte-table";
+  import {
+    alignOf,
+    getCellProps,
+    metaOf,
+    stickyPositionOf,
+    type RowData,
+    type TableCellInstance,
+    type TableEditContext,
+    type TableInstance,
+    type TableRowModel,
+  } from "@ui-organized/table-core";
+  import { getTable } from "../../core/tableContext.js";
+  import { svelteProps } from "../../core/props.js";
+  import CellEditor from "./CellEditor.svelte";
+
+  let {
+    cell,
+    row,
+    index,
+    rowIndex,
+    primary,
+    focused,
+    editContext,
+  }: {
+    cell: TableCellInstance<T>;
+    row: TableRowModel<T>;
+    index: number;
+    rowIndex: number;
+    primary: boolean;
+    focused: boolean;
+    editContext: TableEditContext<T> | null;
+  } = $props();
+
+  const table = getTable<T>();
+  const column = $derived(cell.column);
+  const meta = $derived(metaOf<T>(column.columnDef));
+  const editing = $derived(editContext?.columnId === column.id ? editContext : null);
+  const interactive = $derived(table.interactive);
+  const editable = $derived(Boolean(meta?.edit));
+
+  const cellProps = $derived(
+    getCellProps({
+      columnId: column.id,
+      index,
+      align: alignOf(column.columnDef),
+      primary,
+      sticky: stickyPositionOf(table.table as unknown as TableInstance<T>, column),
+      focused,
+      editable,
+      editing: Boolean(editing),
+      invalid: Boolean(editing?.invalid),
+      interactive,
+    }),
+  );
+
+  const onFocus = () => {
+    if (interactive) table.focus.setCursor({ row: rowIndex, col: index });
+  };
+  // One click opens the editor. The click stops here either way: it must not
+  // also activate the row (open its detail sheet), and a click *inside* the
+  // open editor must not restart the edit and throw the draft away.
+  const onClick = (event: MouseEvent) => {
+    if (!editable) return;
+    event.stopPropagation();
+    if (!editing) table.edit.start(row, column.id);
+  };
+</script>
+
+<!--
+  The identifying column is a real row header, which is what makes a screen
+  reader announce "Ada Lovelace, Role, Engineer" instead of just "Engineer".
+  Svelte has no dynamic element by name, so the two tags are written out; the
+  props and the content are shared.
+-->
+{#snippet content()}
+  {#if editing}
+    <CellEditor>
+      {@const rendered = meta?.edit?.render(editing)}
+      {#if typeof rendered === "function"}{@render rendered()}{:else}{rendered}{/if}
+    </CellEditor>
+  {:else}
+    <FlexRender {cell} />
+  {/if}
+{/snippet}
+
+{#if primary}
+  <th
+    {...svelteProps(cellProps)}
+    data-cell={`${rowIndex}:${index}`}
+    onfocus={onFocus}
+    onclick={editable ? onClick : undefined}
+  >
+    {@render content()}
+  </th>
+{:else}
+  <td
+    {...svelteProps(cellProps)}
+    data-cell={`${rowIndex}:${index}`}
+    onfocus={onFocus}
+    onclick={editable ? onClick : undefined}
+  >
+    {@render content()}
+  </td>
+{/if}

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

@@ -0,0 +1,34 @@
+import { type RowData, type TableCellInstance, type TableEditContext, type TableRowModel } from "@ui-organized/table-core";
+declare function $$render<T extends RowData>(): {
+    props: {
+        cell: TableCellInstance<T>;
+        row: TableRowModel<T>;
+        index: number;
+        rowIndex: number;
+        primary: boolean;
+        focused: boolean;
+        editContext: TableEditContext<T> | null;
+    };
+    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 TableCell: $$IsomorphicComponent;
+type TableCell<T extends RowData> = InstanceType<typeof TableCell<T>>;
+export default TableCell;
+//# sourceMappingURL=TableCell.svelte.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"TableCell.svelte.d.ts","sourceRoot":"","sources":["../../../src/lib/components/Table/TableCell.svelte.ts"],"names":[],"mappings":"AAIA,OAAO,EAKH,KAAK,OAAO,EACZ,KAAK,iBAAiB,EACtB,KAAK,gBAAgB,EAErB,KAAK,aAAa,EACnB,MAAM,0BAA0B,CAAC;AAIpC,iBAAS,QAAQ,CAAC,CAAC,SAAS,OAAO;;cAgBzB,iBAAiB,CAAC,CAAC,CAAC;aACrB,aAAa,CAAC,CAAC,CAAC;eACd,MAAM;kBACH,MAAM;iBACP,OAAO;iBACP,OAAO;qBACH,gBAAgB,CAAC,CAAC,CAAC,GAAG,IAAI;;;;;;EA8D8E;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,SAAS,EAAE,qBAAmC,CAAC;AACnC,KAAK,SAAS,CAAC,CAAC,SAAS,OAAO,IAAI,YAAY,CAAC,OAAO,SAAS,CAAC,CAAC,CAAC,CAAC,CAAC;AACxE,eAAe,SAAS,CAAC"}

package/dist/components/Table/TableFooter.svelte

@@ -0,0 +1,34 @@
+<script lang="ts">
+  import type { Snippet } from "svelte";
+  import { clsx } from "clsx";
+  import { FlexRender } from "@tanstack/svelte-table";
+  import { getTable } from "../../core/tableContext.js";
+
+  let { class: className, children }: { class?: string; children?: Snippet } = $props();
+  const table = getTable();
+
+  const groups = $derived(table.table.getFooterGroups());
+  const hasFooter = $derived(
+    groups.some((group) =>
+      group.headers.some((header) => header.column.columnDef.footer !== undefined),
+    ),
+  );
+</script>
+
+{#if children || hasFooter}
+  <tfoot class={clsx("data-table__foot", className)}>
+    {#if children}
+      {@render children()}
+    {:else}
+      {#each groups as group (group.id)}
+        <tr class="data-table__row">
+          {#each group.headers as header (header.id)}
+            <td class="data-table__cell">
+              {#if !header.isPlaceholder}<FlexRender footer={header} />{/if}
+            </td>
+          {/each}
+        </tr>
+      {/each}
+    {/if}
+  </tfoot>
+{/if}

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

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

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

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

package/dist/components/Table/TableHeadCell.svelte

@@ -0,0 +1,157 @@
+<!-- One header cell: the sort control, the roving tab stop, and the resize grip. -->
+<script lang="ts" generics="T extends RowData">
+  import { FlexRender } from "@tanstack/svelte-table";
+  import { Icon } from "@ui-organized/svelte";
+  import {
+    alignOf,
+    dropSideAt,
+    getHeadCellProps,
+    metaOf,
+    stickyPositionOf,
+    type RowData,
+    type TableHeaderInstance,
+    type TableInstance,
+  } from "@ui-organized/table-core";
+  import { getTable } from "../../core/tableContext.js";
+  import { svelteProps } from "../../core/props.js";
+  import ResizeHandle from "./ResizeHandle.svelte";
+  import MoveButtons from "./MoveButtons.svelte";
+  import { internalGlyph as glyph } from "@ui-organized/svelte";
+
+  let { header, index }: { header: TableHeaderInstance<T>; index: number } = $props();
+  const table = getTable<T>();
+
+  const column = $derived(header.column);
+  const sortable = $derived(column.getCanSort());
+  const sorted = $derived(column.getIsSorted());
+  const interactive = $derived(table.interactive);
+  const focused = $derived(
+    interactive && table.focus.cursor.row === -1 && table.focus.cursor.col === index,
+  );
+
+  const editable = $derived(Boolean(metaOf<T>(column.columnDef)?.edit));
+
+  const movable = $derived(table.reorder.active && table.reorder.isMovable(column.id));
+  const drag = $derived(table.reorder.drag);
+  const dropSide = $derived(
+    drag && drag.target === column.id && drag.source !== column.id ? drag.side : undefined,
+  );
+  const headerText = $derived(
+    typeof column.columnDef.header === "string" ? column.columnDef.header : column.id,
+  );
+
+  // The drag source is the label area, not the <th>: with the <th>
+  // draggable, pressing the resize handle started a native drag that took the
+  // pointer away from the resize. A drag starting on the move buttons is theirs.
+  const onDragStart = (event: DragEvent) => {
+    if (!movable) return;
+    const origin = event.target as Element;
+    if (origin.closest(".data-table__move")) {
+      event.preventDefault();
+      return;
+    }
+    if (event.dataTransfer) {
+      event.dataTransfer.effectAllowed = "move";
+      event.dataTransfer.setData("text/plain", column.id);
+    }
+    table.reorder.setDrag({ source: column.id, target: null, side: "before" });
+  };
+  const onDragOver = (event: DragEvent) => {
+    if (!movable || !drag) return;
+    event.preventDefault();
+    if (event.dataTransfer) event.dataTransfer.dropEffect = "move";
+    const side = dropSideAt(
+      event.clientX,
+      (event.currentTarget as HTMLElement).getBoundingClientRect(),
+    );
+    if (drag.target !== column.id || drag.side !== side) {
+      table.reorder.setDrag({ ...drag, target: column.id, side });
+    }
+  };
+  const onDrop = (event: DragEvent) => {
+    if (!movable || !drag) return;
+    event.preventDefault();
+    const side = dropSideAt(
+      event.clientX,
+      (event.currentTarget as HTMLElement).getBoundingClientRect(),
+    );
+    table.reorder.drop(drag.source, column.id, side);
+    table.reorder.setDrag(null);
+  };
+  const onDragEnd = () => {
+    if (movable) table.reorder.setDrag(null);
+  };
+
+  const cellProps = $derived(
+    getHeadCellProps({
+      columnId: column.id,
+      index,
+      align: alignOf(column.columnDef),
+      sortable,
+      sortDirection: sorted === false ? false : sorted,
+      sticky: stickyPositionOf(table.table as unknown as TableInstance<T>, column),
+      resizing: column.getIsResizing(),
+      interactive,
+      editable,
+    }),
+  );
+</script>
+
+<!--
+  The pencil on an editable column's header. The words go with it: as part of
+  the column header, ", editable" is announced with every cell in the column,
+  which is where a screen-reader user needs to learn that Enter opens an editor.
+-->
+{#snippet editMark()}
+  <span class="data-table__edit-icon">
+    <Icon name={glyph("edit")} size={14} />
+    <span class="data-table__sr-only">, editable</span>
+  </span>
+{/snippet}
+
+<th
+  {...svelteProps(cellProps)}
+  data-cell={`-1:${index}`}
+  tabindex={interactive ? (focused ? 0 : -1) : undefined}
+  onfocus={() => (interactive ? table.focus.setCursor({ row: -1, col: index }) : undefined)}
+  data-dragging={drag?.source === column.id ? "" : undefined}
+  data-drop={dropSide}
+  ondragover={onDragOver}
+  ondrop={onDrop}
+>
+  <div
+    class="data-table__head-inner"
+    draggable={movable ? "true" : undefined}
+    ondragstart={onDragStart}
+    ondragend={onDragEnd}
+  >
+    <!--
+      The roving tabindex covers the header row too, so ArrowUp out of the first
+      body row lands somewhere focusable and Enter sorts from there. Inner
+      controls are not their own tab stops in a grid; the cell is.
+    -->
+    {#if sortable}
+      <button
+        type="button"
+        class="data-table__sort-button"
+        tabindex={interactive ? -1 : undefined}
+        onclick={(event) => column.getToggleSortingHandler()?.(event)}
+      >
+        <span class="data-table__head-label">
+          {#if !header.isPlaceholder}<FlexRender {header} />{/if}
+        </span>
+        {#if editable}{@render editMark()}{/if}
+        <span class="data-table__sort-icon">
+          <Icon name={glyph(sorted === "desc" ? "sort-desc" : "sort-asc")} size={14} />
+        </span>
+      </button>
+    {:else}
+      <span class="data-table__head-label">
+        {#if !header.isPlaceholder}<FlexRender {header} />{/if}
+      </span>
+      {#if editable}{@render editMark()}{/if}
+    {/if}
+    {#if movable}<MoveButtons columnId={column.id} name={headerText} />{/if}
+  </div>
+  {#if column.getCanResize()}<ResizeHandle {header} />{/if}
+</th>

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

@@ -0,0 +1,29 @@
+import { type RowData, type TableHeaderInstance } from "@ui-organized/table-core";
+declare function $$render<T extends RowData>(): {
+    props: {
+        header: TableHeaderInstance<T>;
+        index: number;
+    };
+    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 TableHeadCell: $$IsomorphicComponent;
+type TableHeadCell<T extends RowData> = InstanceType<typeof TableHeadCell<T>>;
+export default TableHeadCell;
+//# sourceMappingURL=TableHeadCell.svelte.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"TableHeadCell.svelte.d.ts","sourceRoot":"","sources":["../../../src/lib/components/Table/TableHeadCell.svelte.ts"],"names":[],"mappings":"AAKA,OAAO,EAMH,KAAK,OAAO,EACZ,KAAK,mBAAmB,EAEzB,MAAM,0BAA0B,CAAC;AAMpC,iBAAS,QAAQ,CAAC,CAAC,SAAS,OAAO;;gBAcG,mBAAmB,CAAC,CAAC,CAAC;eAAS,MAAM;;;;;;EA8G8C;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,aAAa,EAAE,qBAAmC,CAAC;AACvC,KAAK,aAAa,CAAC,CAAC,SAAS,OAAO,IAAI,YAAY,CAAC,OAAO,aAAa,CAAC,CAAC,CAAC,CAAC,CAAC;AAChF,eAAe,aAAa,CAAC"}

package/dist/components/Table/TableHeader.svelte

@@ -0,0 +1,22 @@
+<script lang="ts">
+  import { clsx } from "clsx";
+  import { getHeaderRowProps } from "@ui-organized/table-core";
+  import { getTable } from "../../core/tableContext.js";
+  import { svelteProps } from "../../core/props.js";
+  import TableHeadCell from "./TableHeadCell.svelte";
+
+  let { class: className }: { class?: string } = $props();
+  const table = getTable();
+  const groups = $derived(table.table.getHeaderGroups());
+  const rowProps = getHeaderRowProps();
+</script>
+
+<thead class={clsx("data-table__head", className)}>
+  {#each groups as group (group.id)}
+    <tr {...svelteProps(rowProps)}>
+      {#each group.headers as header, index (header.id)}
+        <TableHeadCell {header} {index} />
+      {/each}
+    </tr>
+  {/each}
+</thead>

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

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

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

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

package/dist/components/Table/TableRow.svelte

@@ -0,0 +1,84 @@
+<!--
+  One row.
+
+  React memoizes this on a hand-written nine-field comparator, and threads every
+  value it needs through props so the comparator can see them. Svelte needs
+  neither: a component re-renders only what its own reads touch, so the row takes
+  what genuinely *varies per row* as props and reads the rest — the table, the
+  handlers, `interactive` — from context. That is the first of the two places the
+  plan predicted this port would get simpler.
+-->
+<script lang="ts" generics="T extends RowData">
+  import {
+    getRowProps,
+    type RowData,
+    type TableEditContext,
+    type TableRowModel,
+  } from "@ui-organized/table-core";
+  import { getTable } from "../../core/tableContext.js";
+  import { elementRef } from "../../core/elementRef.js";
+  import { svelteProps } from "../../core/props.js";
+  import TableCell from "./TableCell.svelte";
+
+  let {
+    row,
+    index,
+    absoluteIndex,
+    focusedCol,
+    editContext,
+  }: {
+    row: TableRowModel<T>;
+    index: number;
+    absoluteIndex: number;
+    focusedCol: number | null;
+    editContext: TableEditContext<T> | null;
+  } = $props();
+
+  const table = getTable<T>();
+  const clickable = $derived(
+    Boolean(table.options.onRowClick) || Boolean(table.options.detail),
+  );
+  const selected = $derived(table.selection.isSelected(row.id));
+  const editing = $derived(table.edit.state.target?.rowId === row.id);
+
+  const rowProps = $derived(
+    getRowProps({
+      rowId: row.id,
+      index: absoluteIndex,
+      selected,
+      editing,
+      selectable: table.selection.mode !== "none",
+      interactive: table.interactive,
+      clickable,
+    }),
+  );
+
+  const cells = $derived(row.getVisibleCells());
+
+  /**
+   * The virtualizer measures the real row rather than trusting the estimate, so
+   * a re-themed row height corrects itself on the first frame.
+   */
+  const measure = (element: HTMLElement | null) => {
+    if (table.virtual.enabled && element) table.virtual.virtualizer.measureElement(element);
+  };
+</script>
+
+<tr
+  {...svelteProps(rowProps)}
+  data-index={index}
+  use:elementRef={measure}
+  onclick={() => table.activate(row)}
+>
+  {#each cells as cell, colIndex (cell.id)}
+    <TableCell
+      {cell}
+      {row}
+      index={colIndex}
+      rowIndex={index}
+      primary={cell.column.id === table.primaryColumnId}
+      focused={focusedCol === colIndex}
+      {editContext}
+    />
+  {/each}
+</tr>

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

@@ -0,0 +1,32 @@
+import { type RowData, type TableEditContext, type TableRowModel } from "@ui-organized/table-core";
+declare function $$render<T extends RowData>(): {
+    props: {
+        row: TableRowModel<T>;
+        index: number;
+        absoluteIndex: number;
+        focusedCol: number | null;
+        editContext: TableEditContext<T> | null;
+    };
+    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 TableRow: $$IsomorphicComponent;
+type TableRow<T extends RowData> = InstanceType<typeof TableRow<T>>;
+export default TableRow;
+//# sourceMappingURL=TableRow.svelte.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"TableRow.svelte.d.ts","sourceRoot":"","sources":["../../../src/lib/components/Table/TableRow.svelte.ts"],"names":[],"mappings":"AAGA,OAAO,EAEH,KAAK,OAAO,EACZ,KAAK,gBAAgB,EACrB,KAAK,aAAa,EACnB,MAAM,0BAA0B,CAAC;AAKpC,iBAAS,QAAQ,CAAC,CAAC,SAAS,OAAO;;aAO1B,aAAa,CAAC,CAAC,CAAC;eACd,MAAM;uBACE,MAAM;oBACT,MAAM,GAAG,IAAI;qBACZ,gBAAgB,CAAC,CAAC,CAAC,GAAG,IAAI;;;;;;EAiD8E;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,QAAQ,EAAE,qBAAmC,CAAC;AAClC,KAAK,QAAQ,CAAC,CAAC,SAAS,OAAO,IAAI,YAAY,CAAC,OAAO,QAAQ,CAAC,CAAC,CAAC,CAAC,CAAC;AACtE,eAAe,QAAQ,CAAC"}