svelte-tably 1.0.0-next.0

package/README.md

@@ -0,0 +1,19 @@
+# svelte-tably
+
+Work in progress. I needed a break from my primary project, so here's a little side-project exploring that amazing capabilities of Svelte 5 with a Dynamic table!
+
+A high performant dynamic table
+
+- [x] Sticky columns
+- [x] Show/hide columns
+- [x] Re-order columns
+- [x] Resize columns
+- [x] Statusbar
+- [x] Virtual data (for sorting/filtering)
+- [x] Panels
+- [ ] sorting
+- [ ] select
+- [ ] filtering
+- [ ] orderable table
+- [ ] row context-menu
+- [ ] dropout section

package/dist/Table/Column.svelte

@@ -0,0 +1,98 @@
+<!-- @component
+
+	This is a description, \
+	on how to use this.
+
+@example
+<Component />
+
+-->
+
+<script module lang='ts'>
+	
+	export interface Column<T = unknown, V = unknown> {
+		header: Snippet
+		row: Snippet<[item: T, value?: V]>
+		statusbar?: Snippet<[data: T[]]>
+		
+		/** Default options for initial table */
+		defaults: {
+			sticky?: boolean
+			sort?: boolean
+			show?: boolean
+		}
+		/** More options */
+		options: {
+			value?: (item: T) => V
+			sorting?: unknown extends V ? (a: T, b: T) => number : (a: V, b: V) => number
+		}
+	}
+
+</script>
+
+<script lang='ts' generics='T extends Record<PropertyKey, any>, V'>
+
+	import { onDestroy, type Snippet } from 'svelte'
+	import { getTableState } from './Table.svelte'
+
+	interface Props {
+		header: Column<T, V>['header']
+		row: Column<T, V>['row']
+		statusbar?: Column<T, V>['statusbar']
+
+		// options
+		sticky?: boolean
+		sort?: boolean
+		show?: boolean
+		value?: Column<T, V>['options']['value']
+		sorting?: Column<T, V>['options']['sorting']
+	}
+
+	let { 
+		header, row, statusbar, 
+		
+		sticky = false,
+		sort = false, 
+		show = true,
+
+		value, sorting,
+
+		...rest
+	}: Props = $props()
+	const key = (rest as unknown as { __key: string }).__key
+
+	const column: Column<T, V> = $state({
+		header,
+		row,
+		statusbar,
+		defaults: {
+			sticky,
+			sort,
+			show
+		},
+		options: {
+			value,
+			sorting
+		}
+	})
+
+	const table = getTableState()
+	table.addColumn(key, column as Column)
+
+	onDestroy(() => {
+		table.removeColumn(key)
+	})
+
+</script>
+<!---------------------------------------------------->
+
+
+
+
+
+<!---------------------------------------------------->
+<style>
+	
+	
+
+</style>

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

@@ -0,0 +1,50 @@
+export interface Column<T = unknown, V = unknown> {
+    header: Snippet;
+    row: Snippet<[item: T, value?: V]>;
+    statusbar?: Snippet<[data: T[]]>;
+    /** Default options for initial table */
+    defaults: {
+        sticky?: boolean;
+        sort?: boolean;
+        show?: boolean;
+    };
+    /** More options */
+    options: {
+        value?: (item: T) => V;
+        sorting?: unknown extends V ? (a: T, b: T) => number : (a: V, b: V) => number;
+    };
+}
+import { type Snippet } from 'svelte';
+declare class __sveltets_Render<T extends Record<PropertyKey, any>, V> {
+    props(): {
+        header: Column<T_1, V_1>["header"];
+        row: Column<T_1, V_1>["row"];
+        statusbar?: Column<T_1, V_1>["statusbar"];
+        sticky?: boolean;
+        sort?: boolean;
+        show?: boolean;
+        value?: Column<T_1, V_1>["options"]["value"];
+        sorting?: Column<T_1, V_1>["options"]["sorting"];
+    };
+    events(): {};
+    slots(): {};
+    bindings(): "";
+    exports(): {};
+}
+interface $$IsomorphicComponent {
+    new <T extends Record<PropertyKey, any>, V>(options: import('svelte').ComponentConstructorOptions<ReturnType<__sveltets_Render<T, V>['props']>>): import('svelte').SvelteComponent<ReturnType<__sveltets_Render<T, V>['props']>, ReturnType<__sveltets_Render<T, V>['events']>, ReturnType<__sveltets_Render<T, V>['slots']>> & {
+        $$bindings?: ReturnType<__sveltets_Render<T, V>['bindings']>;
+    } & ReturnType<__sveltets_Render<T, V>['exports']>;
+    <T extends Record<PropertyKey, any>, V>(internal: unknown, props: ReturnType<__sveltets_Render<T, V>['props']> & {}): ReturnType<__sveltets_Render<T, V>['exports']>;
+    z_$$bindings?: ReturnType<__sveltets_Render<any, any>['bindings']>;
+}
+/**
+ * This is a description, \
+ * on how to use this.
+ *
+ * @example
+ * <Component />
+ */
+declare const Column: $$IsomorphicComponent;
+type Column<T extends Record<PropertyKey, any>, V> = InstanceType<typeof Column<T, V>>;
+export default Column;

package/dist/Table/Panel.svelte

@@ -0,0 +1,73 @@
+<!-- @component
+
+	This is a description, \
+	on how to use this.
+
+@example
+<Component />
+
+-->
+
+<script module lang='ts'>
+	
+	export interface Panel {
+		/** A darkened backdrop? */
+		backdrop: boolean
+		content: Snippet<[table: TableState]>
+	}
+
+	export class PanelTween {
+		#tween = new Tween(0, { duration: 300, easing: sineInOut })
+		current = $derived(this.#tween.current)
+		transitioning = $state(false)
+
+		/** bind:clientWidth */
+		width = $state(0)
+
+		set target(value: number) {
+			this.transitioning = true
+			this.#tween.set(value).then(() => this.transitioning = false)
+		}
+
+		constructor(cb: () => string | undefined) {
+			$effect.pre(() => {
+				this.target = cb() ? this.width : 0
+			})
+		}
+	}
+
+</script>
+
+<script lang='ts'>
+
+	import { onDestroy, type Snippet } from 'svelte'
+	import { getTableState, type TableState } from './Table.svelte'
+	import { Tween } from 'svelte/motion'
+	import { sineInOut } from 'svelte/easing'
+
+	interface Props {
+		/** A darkened backdrop? */
+		backdrop?: boolean
+		children: Snippet<[table: TableState]>
+	}
+
+	let {
+		backdrop = true,
+		children,
+		...rest
+	}: Props = $props()
+	const key = (rest as unknown as { __key: string }).__key
+	
+	const panel: Panel = $state({
+		backdrop,
+		content: children
+	})
+
+	const table = getTableState()
+	table.panels[key] = panel
+
+	onDestroy(() => {
+		delete table.panels[key]
+	})
+
+</script>

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

@@ -0,0 +1,31 @@
+export interface Panel {
+    /** A darkened backdrop? */
+    backdrop: boolean;
+    content: Snippet<[table: TableState]>;
+}
+export declare class PanelTween {
+    #private;
+    current: number;
+    transitioning: boolean;
+    /** bind:clientWidth */
+    width: number;
+    set target(value: number);
+    constructor(cb: () => string | undefined);
+}
+import { type Snippet } from 'svelte';
+import { type TableState } from './Table.svelte';
+interface Props {
+    /** A darkened backdrop? */
+    backdrop?: boolean;
+    children: Snippet<[table: TableState]>;
+}
+/**
+ * This is a description, \
+ * on how to use this.
+ *
+ * @example
+ * <Component />
+ */
+declare const Panel: import("svelte").Component<Props, {}, "">;
+type Panel = ReturnType<typeof Panel>;
+export default Panel;

package/dist/Table/Table.svelte

@@ -0,0 +1,349 @@
+<!-- @component
+
+	This is a description, \
+	on how to use this.
+
+@example
+<Component />
+
+-->
+
+<script module lang='ts'>
+	
+	export interface TableState<T extends Record<PropertyKey, any> = Record<PropertyKey, any>> {
+		columns: Record<string, Column<T, unknown>>
+		panels: Record<string, Panel>
+		sortby?: string
+		positions: {
+			sticky: string[]
+			scroll: string[]
+			hidden: string[]
+			toggle(key: string): void
+		}
+		readonly data: T[]
+		addColumn(key: string, options: Column<T, unknown>): void
+		removeColumn(key: string): void
+	}
+
+	export function getTableState<T extends Record<PropertyKey, any> = Record<PropertyKey, any>>() {
+		return getContext<TableState<T>>('svelte5-table')
+	}
+
+</script>
+
+<script lang='ts' generics='T extends Record<PropertyKey, unknown>'>
+
+	import { getContext, setContext, type Snippet } from 'svelte'
+	import { type Column } from './Column.svelte'
+	import { PanelTween, type Panel } from './Panel.svelte'
+	import { fly } from 'svelte/transition'
+	import { sineInOut } from 'svelte/easing'
+
+	interface Props {
+		children?: Snippet
+		panel?: string
+		data?: T[]
+		id?: string
+	}
+
+	let {
+		children,
+		panel,
+		data = [],
+		id = Array.from({length: 12}, () => String.fromCharCode(Math.floor(Math.random() * 26) + 97)).join('')
+	}: Props = $props()
+	
+	const table: TableState<T> = $state({
+		columns: {},
+		panels: {},
+		positions: {
+			sticky: [],
+			scroll: [],
+			hidden: [],
+			toggle(key) {
+				if(table.positions.hidden.includes(key))
+					table.positions.hidden = table.positions.hidden.filter(column => column !== key)
+				else
+					table.positions.hidden.push(key)
+			}
+		},
+		get data() {
+			return data
+		},
+		addColumn(key, column) {
+			table.columns[key] = column
+
+			if(column.defaults.sort)
+				table.sortby = key
+			
+			if(!column.defaults.show)
+				table.positions.hidden.push(key)
+			
+			if(column.defaults.sticky) 
+				table.positions.sticky.push(key)
+			else
+				table.positions.scroll.push(key)
+		},
+		removeColumn(key) {
+			delete table.columns[key]
+			table.positions.sticky = table.positions.sticky.filter(column => column !== key)
+			table.positions.scroll = table.positions.scroll.filter(column => column !== key)
+			table.positions.hidden = table.positions.hidden.filter(column => column !== key)
+		}
+	})
+
+	setContext('svelte5-table', table)
+
+	// * --- *
+	
+	const panelTween = new PanelTween(() => panel)
+	const elements = $state({}) as Record<'headers' | 'statusbar', HTMLElement>
+
+	/** Order of columns */
+	const columns = $derived([...table.positions.sticky, ...table.positions.scroll].filter(key => !table.positions.hidden.includes(key)))
+
+	/** Width of each column */
+	const widths = $state({}) as Record<string, number>
+
+	/** grid-template-columns for widths */
+	const style = $derived(`
+		#${id} > .headers, #${id} > .rows > .row, #${id} > .statusbar {
+			grid-template-columns: ${columns.map((key, i, arr) => i === arr.length - 1 ? `minmax(${widths[key] || 150}px, 1fr)` : `${widths[key] || 150}px`).join(' ')};
+		}
+	`)
+
+	const observer = typeof MutationObserver === 'undefined' ? undefined : new MutationObserver(mutations => {
+		const target = mutations[0].target as HTMLDivElement
+		widths[target.getAttribute('data-column')!] = parseFloat(target.style.width)
+	})
+
+	function observe(node: HTMLDivElement, column: string) {
+		observer?.observe(node, {attributes: true})
+		return { destroy: () => observer?.disconnect() }
+	}
+
+	function onscroll(event: Event) {
+		const target = event.target as HTMLDivElement
+		elements.headers.scrollLeft = target.scrollLeft
+		elements.statusbar.scrollLeft = target.scrollLeft
+	}
+
+</script>
+<!---------------------------------------------------->
+
+<svelte:head>
+	{@html `<style>${style}</style>`}
+</svelte:head>
+
+<div id={id} class='table'>
+
+	<div class='headers' bind:this={elements.headers}>
+		{#each table.positions.sticky as column, i (column)}
+			{#if !table.positions.hidden.includes(column)}
+				<div class='column sticky' data-column="{column}" use:observe={column}>
+					{@render table.columns[column]?.header()}
+				</div>
+			{/if}
+		{/each}
+		{#each table.positions.scroll as column, i (column)}
+			{#if !table.positions.hidden.includes(column)}
+				<div class='column' use:observe={column}>
+					{@render table.columns[column]?.header()}
+				</div>
+			{/if}
+		{/each}
+	</div>
+
+	<div class="rows" {onscroll}>
+		{#each data as item}
+			<div class='row'>
+				{#each table.positions.sticky as column, i (column)}
+					{#if !table.positions.hidden.includes(column)}
+						{@const col = table.columns[column]}
+						<div class='column sticky' class:border={i == table.positions.sticky.length - 1}>
+							{@render col.row(item, col.options.value ? col.options.value(item) : undefined)}
+						</div>
+					{/if}
+				{/each}
+				{#each table.positions.scroll as column, i (column)}
+					{#if !table.positions.hidden.includes(column)}
+						{@const col = table.columns[column]}
+						<div class='column'>
+							{@render col.row(item, col.options.value ? col.options.value(item) : undefined)}
+						</div>
+					{/if}
+				{/each}
+			</div>
+		{/each}
+	</div>
+	
+	<div class='statusbar' bind:this={elements.statusbar}>
+		{#each table.positions.sticky as column, i (column)}
+			{#if !table.positions.hidden.includes(column)}
+				<div class='column sticky' class:border={i == table.positions.sticky.length - 1}>
+					{@render table.columns[column]?.statusbar?.(data)}
+				</div>
+			{/if}
+		{/each}
+		{#each table.positions.scroll as column, i (column)}
+			{#if !table.positions.hidden.includes(column)}
+				<div class='column'>
+					{@render table.columns[column]?.statusbar?.(data)}
+				</div>
+			{/if}
+		{/each}
+	</div>
+
+	<div class='panel' style='width: {panelTween.current}px;' style:overflow={panelTween.transitioning ? 'hidden' : 'auto'}>
+		{#if panel && panel in table.panels}
+			<div 
+				class="panel-content"
+				bind:clientWidth={panelTween.width}
+				in:fly={{ x: 100, easing: sineInOut, duration:300 }}
+				out:fly={{ x:100, duration:200, easing: sineInOut }}
+			>
+				{@render table.panels[panel].content(table as TableState)}
+			</div>
+		{/if}
+	</div>
+</div>
+
+
+{@render children?.()}
+
+
+
+<!---------------------------------------------------->
+<style>
+	
+	.table, .table * {
+		box-sizing: border-box;
+	}
+
+	.sticky {
+		position: sticky;
+		left: 0px;
+		/* right: 100px; */
+		background-color: white;
+		z-index: 1;
+	}
+
+	.sticky.border {
+		border-right: 1px solid hsla(0, 0%, 90%);
+	}
+
+	.headers > .column {
+		border-right: 1px solid hsla(0, 0%, 90%);
+		resize: horizontal;
+		overflow: hidden;
+		padding: var(--padding-y) 0;
+	}
+	
+	.table {
+		--panel: 250px;
+		--padding-x: 1rem;
+		--padding-y: .5rem;
+		--gap: .25rem;
+		--header-height: 2.5rem;
+
+		display: grid;
+
+		grid-template-areas: 
+			"headers     panel"
+			"rows        panel"
+			"statusbar   panel"
+		;
+
+		grid-template-columns: auto min-content;
+		grid-template-rows: auto 1fr auto;
+
+		border: 1px solid hsla(0, 0%, 90%);
+		border-radius: .25rem;
+
+		max-height: 100%;
+	}
+
+	.headers {
+		grid-area: headers;
+		z-index: 2;
+		overflow: hidden;
+		padding-right: 1rem;
+	}
+
+	.headers > .column {
+		width: auto !important;
+		background-color: hsla(0, 0%, 100%);
+		border-bottom: 1px solid hsla(0, 0%, 90%);
+	}
+
+	.rows {
+		grid-area: rows;
+		display: grid;
+		overflow: auto;
+		scrollbar-width: thin;
+	}
+
+	.statusbar {
+		grid-area: statusbar;
+		overflow: hidden;
+		padding-right: 1rem;
+	}
+
+	.statusbar > .column {
+		background-color: hsla(0, 0%, 99%);
+		border-top: 1px solid hsla(0, 0%, 90%);
+		padding: calc(var(--padding-y) / 2) 0;
+	}
+
+	.headers, .row, .statusbar {
+		display: grid;
+		width: 100%;
+		height: 100%;
+
+		& > .column {
+			display: flex;
+			padding-left: var(--padding-x);
+			overflow: hidden;
+		}
+
+		& > *:last-child {
+			width: 100%;
+			padding-right: var(--padding-x);
+		}
+	}
+
+	.row:nth-child(1) > * {
+		padding-top: calc(var(--padding-y) + var(--gap));
+	}
+	.row:nth-last-child(1) > * {
+		padding-bottom: calc(var(--padding-y) + var(--gap));
+	}
+
+	.row > * {
+		padding: var(--gap) 0;
+	}
+
+	.panel {
+		position: relative;
+		grid-area: panel;
+		width: var(--panel);
+		height: 100%;
+		background-color: white;
+
+		border-left: 1px solid hsla(0, 0%, 90%);
+
+		> .panel-content {
+			position: absolute;
+			top: 0;
+			right: 0;
+			width: min-content;
+			overflow: hidden;
+			padding: var(--padding-y) var(--padding-x);
+		}
+	}
+
+	.statusbar {
+		grid-area: statusbar;
+	}
+
+</style>

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

@@ -0,0 +1,47 @@
+export interface TableState<T extends Record<PropertyKey, any> = Record<PropertyKey, any>> {
+    columns: Record<string, Column<T, unknown>>;
+    panels: Record<string, Panel>;
+    sortby?: string;
+    positions: {
+        sticky: string[];
+        scroll: string[];
+        hidden: string[];
+        toggle(key: string): void;
+    };
+    readonly data: T[];
+    addColumn(key: string, options: Column<T, unknown>): void;
+    removeColumn(key: string): void;
+}
+export declare function getTableState<T extends Record<PropertyKey, any> = Record<PropertyKey, any>>(): TableState<T>;
+import { type Snippet } from 'svelte';
+import { type Column } from './Column.svelte';
+import { type Panel } from './Panel.svelte';
+declare class __sveltets_Render<T extends Record<PropertyKey, unknown>> {
+    props(): {
+        children?: Snippet;
+        panel?: string;
+        data?: T[] | undefined;
+        id?: string;
+    };
+    events(): {};
+    slots(): {};
+    bindings(): "";
+    exports(): {};
+}
+interface $$IsomorphicComponent {
+    new <T extends Record<PropertyKey, unknown>>(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 Record<PropertyKey, unknown>>(internal: unknown, props: ReturnType<__sveltets_Render<T>['props']> & {}): ReturnType<__sveltets_Render<T>['exports']>;
+    z_$$bindings?: ReturnType<__sveltets_Render<any>['bindings']>;
+}
+/**
+ * This is a description, \
+ * on how to use this.
+ *
+ * @example
+ * <Component />
+ */
+declare const Table: $$IsomorphicComponent;
+type Table<T extends Record<PropertyKey, unknown>> = InstanceType<typeof Table<T>>;
+export default Table;

package/dist/Table/index.d.ts

@@ -0,0 +1,12 @@
+import { default as _Table } from './Table.svelte';
+import Column from './Column.svelte';
+import { default as _Panel } from './Panel.svelte';
+declare const LATIN: readonly ["A", "B", "C", "D", "E", "F", "G", "H", "I", "J", "K", "L", "M", "N", "O", "P", "Q", "R", "S", "T", "U", "V", "W", "X", "Y", "Z"];
+type Capital = typeof LATIN[number];
+declare const Table: typeof _Table & {
+    [key: `${Capital}${string}`]: typeof Column;
+};
+declare const Panel: {
+    [key: `${Capital}${string}`]: typeof _Panel;
+};
+export { Table, Panel };

package/dist/Table/index.js

@@ -0,0 +1,31 @@
+import { default as _Table } from './Table.svelte';
+import Column from './Column.svelte';
+import { default as _Panel } from './Panel.svelte';
+const LATIN = ['A', 'B', 'C', 'D', 'E', 'F', 'G', 'H', 'I', 'J', 'K', 'L', 'M', 'N', 'O', 'P', 'Q', 'R', 'S', 'T', 'U', 'V', 'W', 'X', 'Y', 'Z'];
+const Table = new Proxy(_Table, {
+    get(target, p, receiver) {
+        if (typeof p !== 'string' || !LATIN.includes(p[0])) {
+            return Reflect.get(target, p, receiver);
+        }
+        return new Proxy(Column, {
+            apply(_, __, [anchor, props]) {
+                Object.assign(props, { __key: p });
+                return Column(anchor, props);
+            },
+        });
+    }
+});
+const Panel = new Proxy(_Panel, {
+    get(target, p, receiver) {
+        if (typeof p !== 'string' || !LATIN.includes(p[0])) {
+            return Reflect.get(target, p, receiver);
+        }
+        return new Proxy(_Panel, {
+            apply(_, __, [anchor, props]) {
+                Object.assign(props, { __key: p });
+                return _Panel(anchor, props);
+            },
+        });
+    },
+});
+export { Table, Panel };

package/dist/index.d.ts

@@ -0,0 +1 @@
+export * from './Table/index.js';

package/dist/index.js

@@ -0,0 +1 @@
+export * from './Table/index.js';

package/dist/prototype/Headers.svelte

@@ -0,0 +1,33 @@
+<!-- @component
+
+	This is a description, \
+	on how to use this.
+
+@example
+<Component />
+
+-->
+
+<script lang="ts">
+	import type { Snippet } from 'svelte'
+	import { getTableState, type ColumnOptions } from '../Table.svelte'
+
+	interface Props {
+		[key: string]: Snippet<[options: ColumnOptions]>
+	}
+
+	let headers: Props = $props()
+	const table = getTableState()
+
+	let keys = [] as string[]
+
+	$effect.pre(() => {
+		keys.forEach((key) => delete table.columns[key].header)
+		keys = []
+
+		for (const [key, value] of Object.entries(headers)) {
+			table.updateColumn(key, { header: value })
+			keys.push(key)
+		}
+	})
+</script>

package/dist/prototype/Headers.svelte.d.ts

@@ -0,0 +1,15 @@
+import type { Snippet } from 'svelte';
+import { type ColumnOptions } from '../Table.svelte';
+interface Props {
+    [key: string]: Snippet<[options: ColumnOptions]>;
+}
+/**
+ * This is a description, \
+ * on how to use this.
+ *
+ * @example
+ * <Component />
+ */
+declare const Headers: import("svelte").Component<Props, {}, "">;
+type Headers = ReturnType<typeof Headers>;
+export default Headers;

package/dist/prototype/Panels.svelte

@@ -0,0 +1,25 @@
+<!-- @component
+
+	This is a description, \
+	on how to use this.
+
+@example
+<Component />
+
+-->
+
+<script lang='ts'>
+
+	import type { Snippet } from 'svelte'
+	import { getTableState, type TableState } from './Table.svelte'
+
+	interface Props {
+		[key: string]: Snippet<[table: TableState]>
+	}
+
+	let panels: Props = $props()
+
+	getTableState().panels = panels
+
+</script>
+<!---------------------------------------------------->

package/dist/prototype/Panels.svelte.d.ts

@@ -0,0 +1,15 @@
+import type { Snippet } from 'svelte';
+import { type TableState } from './Table.svelte';
+interface Props {
+    [key: string]: Snippet<[table: TableState]>;
+}
+/**
+ * This is a description, \
+ * on how to use this.
+ *
+ * @example
+ * <Component />
+ */
+declare const Panels: import("svelte").Component<Props, {}, "">;
+type Panels = ReturnType<typeof Panels>;
+export default Panels;

package/dist/prototype/Rows.svelte

@@ -0,0 +1,35 @@
+<!-- @component
+
+	This is a description, \
+	on how to use this.
+
+@example
+<Component />
+
+-->
+
+<script lang='ts' generics='T extends Record<PropertyKey, unknown>'>
+
+	import type { Snippet } from 'svelte'
+	import { getTableState } from './Table.svelte'
+
+	interface Props {
+		[key: string]: Snippet<[data: T]>
+	}
+
+	let rows: Props = $props()
+	const table = getTableState<T>()
+	
+	let keys = [] as string[]
+
+	$effect.pre(() => {
+		keys.forEach(key => delete table.columns[key].row)
+		keys = []
+
+		for(const [key, value] of Object.entries(rows)) {
+			table.updateColumn(key, { row: value })
+			keys.push(key)
+		}
+	})
+
+</script>

package/dist/prototype/Rows.svelte.d.ts

@@ -0,0 +1,27 @@
+import type { Snippet } from 'svelte';
+declare class __sveltets_Render<T extends Record<PropertyKey, unknown>> {
+    props(): {
+        [key: string]: Snippet<[data: T]>;
+    };
+    events(): {};
+    slots(): {};
+    bindings(): "";
+    exports(): {};
+}
+interface $$IsomorphicComponent {
+    new <T extends Record<PropertyKey, unknown>>(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 Record<PropertyKey, unknown>>(internal: unknown, props: ReturnType<__sveltets_Render<T>['props']> & {}): ReturnType<__sveltets_Render<T>['exports']>;
+    z_$$bindings?: ReturnType<__sveltets_Render<any>['bindings']>;
+}
+/**
+ * This is a description, \
+ * on how to use this.
+ *
+ * @example
+ * <Component />
+ */
+declare const Rows: $$IsomorphicComponent;
+type Rows<T extends Record<PropertyKey, unknown>> = InstanceType<typeof Rows<T>>;
+export default Rows;

package/dist/prototype/Statusbar.svelte

@@ -0,0 +1,35 @@
+<!-- @component
+
+	This is a description, \
+	on how to use this.
+
+@example
+<Component />
+
+-->
+
+<script lang='ts'>
+
+	import type { Snippet } from 'svelte'
+	import { getTableState, type TableState } from './Table.svelte'
+
+	interface Props {
+		[key: string]: Snippet<[data: T[]]>
+	}
+
+	let statusbars: Props = $props()
+	const table = getTableState()
+	
+	let keys = [] as string[]
+
+	$effect.pre(() => {
+		keys.forEach(key => delete table.columns[key].statusbar)
+		keys = []
+		for(const [key, value] of Object.entries(statusbars)) {
+			table.updateColumn(key, { statusbar: value })
+			keys.push(key)
+		}
+	})
+
+</script>
+<!---------------------------------------------------->

package/dist/prototype/Statusbar.svelte.d.ts

@@ -0,0 +1,13 @@
+import type { Snippet } from 'svelte';
+/**
+ * This is a description, \
+ * on how to use this.
+ *
+ * @example
+ * <Component />
+ */
+declare const Statusbar: import("svelte").Component<{
+    [key: string]: Snippet<[data: T[]]>;
+}, {}, "">;
+type Statusbar = ReturnType<typeof Statusbar>;
+export default Statusbar;

package/dist/prototype/Table.svelte

@@ -0,0 +1,336 @@
+<!-- @component
+
+	This is a description, \
+	on how to use this.
+
+@example
+<Component />
+
+-->
+
+<script module lang='ts'>
+	
+	export interface ColumnOptions {
+		sticky(): ColumnOptions
+	}
+
+	interface Column<T = unknown> {
+		header?: Snippet<[options: ColumnOptions]>
+		row?: Snippet<[data: T]>
+		statusbar?: Snippet<[data: T[]]>
+		defaults?: {
+			sticky?: boolean
+		}
+	}
+
+	export interface TableState<T = unknown> {
+		columns: Record<string, Column<T>>
+		order: {
+			sticky: string[]
+			scroll: string[]
+		}
+		panels: Record<string, Snippet<[table: TableState]>>
+		readonly data: T[]
+		updateColumn(key: string, options: Column<T>): void
+	}
+
+	export function getTableState<T>() {
+		return getContext('svelte-dynamic-table') as TableState<T>
+	}
+
+</script>
+
+<script lang='ts' generics='T extends Record<PropertyKey, unknown>'>
+
+	import { getContext, setContext, type Snippet } from 'svelte'
+	import { sineInOut } from 'svelte/easing'
+	import { Spring, Tween } from 'svelte/motion'
+	import { fly } from 'svelte/transition'
+
+	interface Props {
+		children?: Snippet
+		data: T[]
+		panel?: string
+	}
+
+	let {
+		children,
+		data,
+		panel = $bindable()
+	}: Props = $props()
+
+	const table: TableState<T> = $state({
+		columns: {},
+		order: {
+			sticky: [],
+			scroll: []
+		},
+		panels: {},
+		get data() {
+			return data
+		},
+		updateColumn(key, options) {
+			if(!(key in table.columns)) {
+				const column = $state({})
+				table.columns[key] = column
+			}
+			Object.assign(table.columns[key], options)
+		}
+	})
+
+	const columns = $derived([...table.order.sticky, ...table.order.scroll])
+
+	/** Passed to header */
+	function columnOptions(key: string) {
+		const options = $state({}) as NonNullable<Column['defaults']>
+		table.updateColumn(key, { defaults: options })
+		return {
+			sticky() {
+				options.sticky = true
+				return this
+			}
+		} as ColumnOptions
+	}
+
+	setContext('svelte-dynamic-table', table)
+
+	const widths = $state({}) as Record<string, number>
+	const headers = new WeakMap<HTMLDivElement, string>()
+
+	const tableId = Array.from({length: 12}, () => String.fromCharCode(Math.floor(Math.random() * 26) + 97)).join('')
+
+	const style = $derived(`
+		#${tableId} > .headers, #${tableId} > .rows > .row, #${tableId} > .statusbar {
+			grid-template-columns: ${columns.map((key, i, arr) => i === arr.length - 1 ? `minmax(${widths[key] || 150}px, 1fr)` : `${widths[key] || 150}px`).join(' ')};
+		}
+	`)
+
+	const observer = typeof MutationObserver === 'undefined' ? undefined : new MutationObserver(mutations => {
+		const target = mutations[0].target as HTMLDivElement
+		const column = headers.get(target)
+		if (!column) return
+		widths[column] = parseFloat(target.style.width)
+	})
+
+	function observe(node: HTMLDivElement, column: string) {
+		observer?.observe(node, {attributes: true})
+		headers.set(node, column)
+		return {
+			destroy: () => observer?.disconnect()
+		}
+	}
+
+	let elements = $state({}) as Record<string, HTMLElement>
+	function onscroll(event: Event) {
+		const target = event.target as HTMLDivElement
+		elements.headers.scrollLeft = target.scrollLeft
+		elements.statusbar.scrollLeft = target.scrollLeft
+	}
+
+	const panelTween = new Tween(0, { duration: 300, easing: sineInOut })
+	let panelWidth = $state(0)
+	let panelTransitioning = $state(false)
+	$effect(() => {
+		panelTransitioning = true
+		panelTween.set(panel ? panelWidth : 0).then(() => panelTransitioning = false)
+	})
+
+</script>
+<!---------------------------------------------------->
+
+<svelte:head>
+	{@html `<style>${style}</style>`}
+</svelte:head>
+
+<div id={tableId} class='table'>
+
+	<div class='headers' bind:this={elements.headers}>
+		{#each table.order.sticky as column, i (column)}
+			<div class='column sticky' use:observe={column}>
+				{@render table.columns[column]?.header?.({ sticky() {} } as ColumnOptions)}
+			</div>
+		{/each}
+		{#each table.order.scroll as column, i (column)}
+			<div class='column' use:observe={column}>
+				{@render table.columns[column]?.header?.({ sticky() {} } as ColumnOptions)}
+			</div>
+		{/each}
+
+	</div>
+
+	<div class="rows" {onscroll}>
+		{#each data as item}
+			<div class='row'>
+				{#each table.order.sticky as column, i (column)}
+					<div class='column sticky' class:border={i == table.order.sticky.length - 1}>
+						{@render table.columns[column]?.row?.(item)}
+					</div>
+				{/each}
+				{#each table.order.scroll as column, i (column)}
+					<div class='column'>
+						{@render table.columns[column]?.row?.(item)}
+					</div>
+				{/each}
+			</div>
+		{/each}
+	</div>
+	
+	<div class='statusbar' bind:this={elements.statusbar}>
+		{#each table.order.sticky as column, i (column)}
+			<div class='column sticky' class:border={i == table.order.sticky.length - 1}>
+				{@render table.columns[column]?.statusbar?.(data)}
+			</div>
+		{/each}
+		{#each table.order.scroll as column, i (column)}
+			<div class='column'>
+				{@render table.columns[column]?.statusbar?.(data)}
+			</div>
+		{/each}
+	</div>
+
+	<div class='panel' style='width: {panelTween.current}px;' style:overflow={panelTransitioning ? 'hidden' : 'auto'}>
+		{#if panel && table.panels[panel]}
+			<div class="panel-content" bind:clientWidth={panelWidth} in:fly={{ x: 100, easing: sineInOut, duration:300 }} out:fly={{ x:100, duration:200, easing: sineInOut }}>
+				{@render table.panels[panel](table as TableState)}
+			</div>
+		{/if}
+	</div>
+</div>
+
+
+
+{@render children?.()}
+
+
+
+<!---------------------------------------------------->
+<style>
+
+	.table, .table * {
+		box-sizing: border-box;
+	}
+
+	.sticky {
+		position: sticky;
+		left: 0px;
+		/* right: 100px; */
+		background-color: white;
+		z-index: 1;
+		&.border {
+			border-right: 1px solid hsla(0, 0%, 90%);
+		}
+	}
+
+	.headers > .column {
+		border-right: 1px solid hsla(0, 0%, 90%);
+		resize: horizontal;
+		overflow: hidden;
+		padding: var(--padding-y) 0;
+	}
+	
+	.table {
+		--panel: 250px;
+		--padding-x: 1rem;
+		--padding-y: .5rem;
+		--gap: .25rem;
+		--header-height: 2.5rem;
+
+		display: grid;
+
+		grid-template-areas: 
+			"headers     panel"
+			"rows        panel"
+			"statusbar   panel"
+		;
+
+		grid-template-columns: auto min-content;
+		grid-template-rows: auto 1fr auto;
+
+		border: 1px solid hsla(0, 0%, 90%);
+		border-radius: .25rem;
+
+		max-height: 100%;
+	}
+
+	.headers {
+		grid-area: headers;
+		z-index: 2;
+		overflow: hidden;
+		padding-right: 1rem;
+		> .column {
+			width: auto !important;
+			background-color: white;
+			border-bottom: 1px solid hsla(0, 0%, 90%);
+		}
+	}
+
+	.rows {
+		grid-area: rows;
+		display: grid;
+		overflow: auto;
+		scrollbar-width: thin;
+	}
+
+	.statusbar {
+		grid-area: statusbar;
+		overflow: hidden;
+		padding-right: 1rem;
+		> .column {
+			background-color: hsla(0, 0%, 99%);
+			border-top: 1px solid hsla(0, 0%, 90%);
+			padding: calc(var(--padding-y) / 2) 0;
+		}
+	}
+
+	.headers, .row, .statusbar {
+		display: grid;
+		width: 100%;
+		height: 100%;
+
+		& > .column {
+			display: flex;
+			padding-left: var(--padding-x);
+			overflow: hidden;
+		}
+
+		& > *:last-child {
+			width: 100%;
+			padding-right: var(--padding-x);
+		}
+	}
+
+	.row:nth-child(1) > * {
+		padding-top: calc(var(--padding-y) + var(--gap));
+	}
+	.row:nth-last-child(1) > * {
+		padding-bottom: calc(var(--padding-y) + var(--gap));
+	}
+
+	.row > * {
+		padding: var(--gap) 0;
+	}
+
+	.panel {
+		position: relative;
+		grid-area: panel;
+		width: var(--panel);
+		height: 100%;
+		background-color: white;
+
+		border-left: 1px solid hsla(0, 0%, 90%);
+
+		> .panel-content {
+			position: absolute;
+			top: 0;
+			right: 0;
+			width: min-content;
+			overflow: hidden;
+			padding: var(--padding-y) var(--padding-x);
+		}
+	}
+
+	.statusbar {
+		grid-area: statusbar;
+	}
+
+</style>

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

@@ -0,0 +1,51 @@
+export interface ColumnOptions {
+    sticky(): ColumnOptions;
+}
+interface Column<T = unknown> {
+    header?: Snippet<[options: ColumnOptions]>;
+    row?: Snippet<[data: T]>;
+    statusbar?: Snippet<[data: T[]]>;
+    defaults?: {
+        sticky?: boolean;
+    };
+}
+export interface TableState<T = unknown> {
+    columns: Record<string, Column<T>>;
+    order: {
+        sticky: string[];
+        scroll: string[];
+    };
+    panels: Record<string, Snippet<[table: TableState]>>;
+    readonly data: T[];
+    updateColumn(key: string, options: Column<T>): void;
+}
+export declare function getTableState<T>(): TableState<T>;
+import { type Snippet } from 'svelte';
+declare class __sveltets_Render<T extends Record<PropertyKey, unknown>> {
+    props(): {
+        children?: Snippet;
+        data: T[];
+        panel?: string;
+    };
+    events(): {};
+    slots(): {};
+    bindings(): "panel";
+    exports(): {};
+}
+interface $$IsomorphicComponent {
+    new <T extends Record<PropertyKey, unknown>>(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 Record<PropertyKey, unknown>>(internal: unknown, props: ReturnType<__sveltets_Render<T>['props']> & {}): ReturnType<__sveltets_Render<T>['exports']>;
+    z_$$bindings?: ReturnType<__sveltets_Render<any>['bindings']>;
+}
+/**
+ * This is a description, \
+ * on how to use this.
+ *
+ * @example
+ * <Component />
+ */
+declare const Table: $$IsomorphicComponent;
+type Table<T extends Record<PropertyKey, unknown>> = InstanceType<typeof Table<T>>;
+export default Table;

package/package.json

@@ -0,0 +1,47 @@
+{
+	"name": "svelte-tably",
+	"version": "1.0.0-next.0",
+	"devDependencies": {
+		"@sveltejs/adapter-auto": "^3.0.0",
+		"@sveltejs/kit": "^2.9.0",
+		"@sveltejs/package": "^2.0.0",
+		"@sveltejs/vite-plugin-svelte": "^5.0.0",
+		"publint": "^0.2.0",
+		"svelte": "^5.0.0",
+		"svelte-check": "^4.0.0",
+		"typescript": "^5.0.0",
+		"vite": "^6.0.0"
+	},
+	"peerDependencies": {
+		"svelte": "^5.0.0"
+	},
+	"exports": {
+		".": {
+			"types": "./dist/index.d.ts",
+			"svelte": "./dist/index.js"
+		}
+	},
+	"files": [
+		"dist",
+		"!dist/**/*.test.*",
+		"!dist/**/*.spec.*"
+	],
+	"scripts": {
+		"dev": "vite dev",
+		"build": "vite build && npm run package",
+		"preview": "vite preview",
+		"package": "svelte-kit sync && svelte-package && publint",
+		"prepublishOnly": "npm run package",
+		"check": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json",
+		"check:watch": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json --watch"
+	},
+	"sideEffects": [
+		"**/*.css"
+	],
+	"svelte": "./dist/index.js",
+	"type": "module",
+	"types": "./dist/index.d.ts",
+	"dependencies": {
+		"@faker-js/faker": "^9.3.0"
+	}
+}