- Page {page + 1} of {totalPages} · {metrics.length} total
+ Page {pagination.pageIndex + 1} of {table.getPageCount()} · {metrics.length} total
-
-
diff --git a/ui-svelte/src/components/activity-table/HeaderLabel.svelte b/ui-svelte/src/components/activity-table/HeaderLabel.svelte
new file mode 100644
index 00000000..6b66918f
--- /dev/null
+++ b/ui-svelte/src/components/activity-table/HeaderLabel.svelte
@@ -0,0 +1,17 @@
+
+
+{label}{#if tooltip}
+
+ ⓘ
+ {tooltip}
+
+{/if}
diff --git a/ui-svelte/src/components/activity-table/MetaCell.svelte b/ui-svelte/src/components/activity-table/MetaCell.svelte
new file mode 100644
index 00000000..7ef414f7
--- /dev/null
+++ b/ui-svelte/src/components/activity-table/MetaCell.svelte
@@ -0,0 +1,33 @@
+
+
+{#if entries.length > 0}
+
+
+ ...
+
+
+
+
+ {#each entries as [key, value]}
+
+ | {key} |
+ {value} |
+
+ {/each}
+
+
+
+
+{:else}
+
-
+{/if}
diff --git a/ui-svelte/src/components/activity-table/ViewCaptureButton.svelte b/ui-svelte/src/components/activity-table/ViewCaptureButton.svelte
new file mode 100644
index 00000000..9d9ba033
--- /dev/null
+++ b/ui-svelte/src/components/activity-table/ViewCaptureButton.svelte
@@ -0,0 +1,19 @@
+
+
+{#if hasCapture}
+
+{:else}
+
-
+{/if}
diff --git a/ui-svelte/src/lib/components/ui/data-table/data-table.svelte.ts b/ui-svelte/src/lib/components/ui/data-table/data-table.svelte.ts
new file mode 100644
index 00000000..f3c30a7f
--- /dev/null
+++ b/ui-svelte/src/lib/components/ui/data-table/data-table.svelte.ts
@@ -0,0 +1,142 @@
+import {
+ type RowData,
+ type TableOptions,
+ type TableOptionsResolved,
+ type TableState,
+ type Updater,
+ createTable,
+} from "@tanstack/table-core";
+
+/**
+ * Creates a reactive TanStack table object for Svelte.
+ * @param options Table options to create the table with.
+ * @returns A reactive table object.
+ * @example
+ * ```svelte
+ *
+ *
+ *
+ *
+ * {#each table.getHeaderGroups() as headerGroup}
+ *
+ * {#each headerGroup.headers as header}
+ * |
+ *
+ * |
+ * {/each}
+ *
+ * {/each}
+ *
+ *
+ *
+ * ```
+ */
+export function createSvelteTable
(options: TableOptions) {
+ const resolvedOptions: TableOptionsResolved = mergeObjects(
+ {
+ state: {},
+ onStateChange() {},
+ renderFallbackValue: null,
+ mergeOptions: (
+ defaultOptions: TableOptions,
+ options: Partial>
+ ) => {
+ return mergeObjects(defaultOptions, options);
+ },
+ },
+ options
+ );
+
+ const table = createTable(resolvedOptions);
+ let state = $state(table.initialState);
+
+ function updateOptions() {
+ table.setOptions(() => {
+ return mergeObjects(resolvedOptions, options, {
+ state: mergeObjects(state, options.state || {}),
+
+ onStateChange: (updater: Updater) => {
+ if (updater instanceof Function) state = updater(state);
+ else state = mergeObjects(state, updater);
+
+ options.onStateChange?.(updater);
+ },
+ });
+ });
+ }
+
+ updateOptions();
+
+ $effect.pre(() => {
+ updateOptions();
+ });
+
+ return table;
+}
+
+type MaybeThunk = T | (() => T | null | undefined);
+type Intersection = (T extends [infer H, ...infer R]
+ ? H & Intersection
+ : unknown) & {};
+
+/**
+ * Lazily merges several objects (or thunks) while preserving
+ * getter semantics from every source.
+ *
+ * Proxy-based to avoid known WebKit recursion issue.
+ */
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
+export function mergeObjects[]>(
+ ...sources: Sources
+): Intersection<{ [K in keyof Sources]: Sources[K] }> {
+ const resolve = (src: MaybeThunk): T | undefined =>
+ typeof src === "function" ? (src() ?? undefined) : src;
+
+ const findSourceWithKey = (key: PropertyKey) => {
+ for (let i = sources.length - 1; i >= 0; i--) {
+ const obj = resolve(sources[i]);
+ if (obj && key in obj) return obj;
+ }
+ return undefined;
+ };
+
+ return new Proxy(Object.create(null), {
+ get(_, key) {
+ const src = findSourceWithKey(key);
+
+ return src?.[key as never];
+ },
+
+ has(_, key) {
+ return !!findSourceWithKey(key);
+ },
+
+ ownKeys(): (string | symbol)[] {
+ // eslint-disable-next-line svelte/prefer-svelte-reactivity
+ const all = new Set();
+ for (const s of sources) {
+ const obj = resolve(s);
+ if (obj) {
+ for (const k of Reflect.ownKeys(obj) as (string | symbol)[]) {
+ all.add(k);
+ }
+ }
+ }
+ return [...all];
+ },
+
+ getOwnPropertyDescriptor(_, key) {
+ const src = findSourceWithKey(key);
+ if (!src) return undefined;
+ return {
+ configurable: true,
+ enumerable: true,
+ // eslint-disable-next-line @typescript-eslint/no-explicit-any
+ value: (src as any)[key],
+ writable: true,
+ };
+ },
+ }) as Intersection<{ [K in keyof Sources]: Sources[K] }>;
+}
diff --git a/ui-svelte/src/lib/components/ui/data-table/flex-render.svelte b/ui-svelte/src/lib/components/ui/data-table/flex-render.svelte
new file mode 100644
index 00000000..ac82a581
--- /dev/null
+++ b/ui-svelte/src/lib/components/ui/data-table/flex-render.svelte
@@ -0,0 +1,40 @@
+
+
+{#if typeof content === "string"}
+ {content}
+{:else if content instanceof Function}
+
+
+ {@const result = content(context as any)}
+ {#if result instanceof RenderComponentConfig}
+ {@const { component: Component, props } = result}
+
+ {:else if result instanceof RenderSnippetConfig}
+ {@const { snippet, params } = result}
+ {@render snippet({ ...params, attach })}
+ {:else}
+ {result}
+ {/if}
+{/if}
diff --git a/ui-svelte/src/lib/components/ui/data-table/index.ts b/ui-svelte/src/lib/components/ui/data-table/index.ts
new file mode 100644
index 00000000..5f4e77ea
--- /dev/null
+++ b/ui-svelte/src/lib/components/ui/data-table/index.ts
@@ -0,0 +1,3 @@
+export { default as FlexRender } from "./flex-render.svelte";
+export { renderComponent, renderSnippet } from "./render-helpers.js";
+export { createSvelteTable } from "./data-table.svelte.js";
diff --git a/ui-svelte/src/lib/components/ui/data-table/render-helpers.ts b/ui-svelte/src/lib/components/ui/data-table/render-helpers.ts
new file mode 100644
index 00000000..fa036d62
--- /dev/null
+++ b/ui-svelte/src/lib/components/ui/data-table/render-helpers.ts
@@ -0,0 +1,111 @@
+import type { Component, ComponentProps, Snippet } from "svelte";
+
+/**
+ * A helper class to make it easy to identify Svelte components in
+ * `columnDef.cell` and `columnDef.header` properties.
+ *
+ * > NOTE: This class should only be used internally by the adapter. If you're
+ * reading this and you don't know what this is for, you probably don't need it.
+ *
+ * @example
+ * ```svelte
+ * {@const result = content(context as any)}
+ * {#if result instanceof RenderComponentConfig}
+ * {@const { component: Component, props } = result}
+ *
+ * {/if}
+ * ```
+ */
+export class RenderComponentConfig {
+ component: TComponent;
+ props: ComponentProps | Record;
+ constructor(
+ component: TComponent,
+ props: ComponentProps | Record = {}
+ ) {
+ this.component = component;
+ this.props = props;
+ }
+}
+
+/**
+ * A helper class to make it easy to identify Svelte Snippets in `columnDef.cell` and `columnDef.header` properties.
+ *
+ * > NOTE: This class should only be used internally by the adapter. If you're
+ * reading this and you don't know what this is for, you probably don't need it.
+ *
+ * @example
+ * ```svelte
+ * {@const result = content(context as any)}
+ * {#if result instanceof RenderSnippetConfig}
+ * {@const { snippet, params } = result}
+ * {@render snippet(params)}
+ * {/if}
+ * ```
+ */
+export class RenderSnippetConfig {
+ snippet: Snippet<[TProps]>;
+ params: TProps;
+ constructor(snippet: Snippet<[TProps]>, params: TProps) {
+ this.snippet = snippet;
+ this.params = params;
+ }
+}
+
+/**
+ * A helper function to help create cells from Svelte components through ColumnDef's `cell` and `header` properties.
+ *
+ * This is only to be used with Svelte Components - use `renderSnippet` for Svelte Snippets.
+ *
+ * @param component A Svelte component
+ * @param props The props to pass to `component`
+ * @returns A `RenderComponentConfig` object that helps svelte-table know how to render the header/cell component.
+ * @example
+ * ```ts
+ * // +page.svelte
+ * const defaultColumns = [
+ * columnHelper.accessor('name', {
+ * header: header => renderComponent(SortHeader, { label: 'Name', header }),
+ * }),
+ * columnHelper.accessor('state', {
+ * header: header => renderComponent(SortHeader, { label: 'State', header }),
+ * }),
+ * ]
+ * ```
+ * @see {@link https://tanstack.com/table/latest/docs/guide/column-defs}
+ */
+export function renderComponent<
+ // eslint-disable-next-line @typescript-eslint/no-explicit-any
+ T extends Component,
+ Props extends ComponentProps,
+>(component: T, props: Props = {} as Props) {
+ return new RenderComponentConfig(component, props);
+}
+
+/**
+ * A helper function to help create cells from Svelte Snippets through ColumnDef's `cell` and `header` properties.
+ *
+ * The snippet must only take one parameter.
+ *
+ * This is only to be used with Snippets - use `renderComponent` for Svelte Components.
+ *
+ * @param snippet
+ * @param params
+ * @returns - A `RenderSnippetConfig` object that helps svelte-table know how to render the header/cell snippet.
+ * @example
+ * ```ts
+ * // +page.svelte
+ * const defaultColumns = [
+ * columnHelper.accessor('name', {
+ * cell: cell => renderSnippet(nameSnippet, { name: cell.row.name }),
+ * }),
+ * columnHelper.accessor('state', {
+ * cell: cell => renderSnippet(stateSnippet, { state: cell.row.state }),
+ * }),
+ * ]
+ * ```
+ * @see {@link https://tanstack.com/table/latest/docs/guide/column-defs}
+ */
+export function renderSnippet(snippet: Snippet<[TProps]>, params: TProps = {} as TProps) {
+ return new RenderSnippetConfig(snippet, params);
+}