svelte-tably 1.0.0-next.1 → 1.0.0-next.4

package/README.md

@@ -11,8 +11,9 @@ A high performant dynamic table
 - [x] Re-order columns
 - [x] Resize columns
 - [x] Statusbar
-- [x] Virtual data (for sorting/filtering)
+- [x] "Virtual" data (for sorting/filtering)
 - [x] Panels
+- [x] Virtual elements
 - [ ] sorting
 - [ ] select
 - [ ] filtering
@@ -22,52 +23,48 @@ A high performant dynamic table
 
 ### Usage Notes
 
-Simple example.
-
-Create a state for your data and a state for your active panel:
-
-```markdown
+```html
 <script lang='ts'>
-  import { Table } from '$lib/index.js'
+    import Table from 'svelte-tably'
 
-  const data = $state([
-    { name: 'John Doe', age: 30, email: 'johndoe@example.com' },
-    { name: 'Jane Doe', age: 25, email: 'janedoe@example.com' },
-  ])
-</script>
+    const data = $state([
+        { name: 'John Doe', age: 30, email: 'johndoe@example.com' },
+        { name: 'Jane Doe', age: 25, email: 'janedoe@example.com' },
+    ])
 
-<Table {data}>
-  <Table.Name>
-    {#snippet header()}
-      Name
-    {/snippet}
-    {#snippet row(item)}
-      {item.name}
-    {/snippet}
-  </Table.Name>
-  <Table.Age>
-    {#snippet header()}
-      Age
-    {/snippet}
-    {#snippet row(item)}
-      {item.age}
-    {/snippet}
-  </Table.Age>
-  <Table.Email>
-    {#snippet header()}
-      Email
-    {/snippet}
-    {#snippet row(item)}
-      {item.email}
-    {/snippet}
-  </Table.Email>
-</Table>
-```
+	let activePanel = $state('columns') as string | undefined
+</script>
 
-To create a column, simply add a new `<Table.ColumnName>` component inside the `<Table>` component. Replace `ColumnName` with the actual name of the column you want to create.
+<Table {data} panel={activePanel}>
+    {#snippet content({ Column, Panel, state, data })}
+        <Column id='name' sticky>
+		    {#snippet header()}
+			    Name
+			{/snippet}
+		    {#snippet row(row)}
+			    {row.name}
+			{/snippet}
 
-Inside the column component, you need to define three snippets:
+			<!-- Optional per column. -->
+		    {#snippet statusbar()}
+			    {data.length}
+			{/snippet}
+		</Column>
+		<Column ...>
+		   ...
+		</Column>
+		<!-- If you want to sort/filter a virtual value, that does not exist in the data -->
+		<Column id='virtual' value={row => row.age > 18}>
+			...
+			{#snippet row(row, virtual)}
+			    {virtual ? 'Adult' : 'Adolescent'}
+			{/snippet}
+			...
+		</Column>
 
-* `header`: the content of the column header
-* `row`: the content of each row in the column
-* `statusbar`: (optional) the content of the status bar for the column
+		<Panel id='columns'>
+			<!-- Anything you might like -->
+		</Panel>
+    {/snippet}
+</Table>
+```

package/dist/Table/Column.svelte

@@ -30,7 +30,7 @@
 
 </script>
 
-<script lang='ts' generics='T extends Record<PropertyKey, any>, V'>
+<script lang='ts' generics='T extends Record<PropertyKey, any>, V = unknown'>
 
 	import { onDestroy, type Snippet } from 'svelte'
 	import { getTableState } from './Table.svelte'
@@ -40,6 +40,8 @@
 		row: Column<T, V>['row']
 		statusbar?: Column<T, V>['statusbar']
 
+		id: string
+
 		// options
 		sticky?: boolean
 		sort?: boolean
@@ -49,17 +51,14 @@
 	}
 
 	let { 
-		header, row, statusbar, 
+		header, row, statusbar, id,
 		
 		sticky = false,
 		sort = false, 
 		show = true,
 
-		value, sorting,
-
-		...rest
+		value, sorting
 	}: Props = $props()
-	const key = (rest as unknown as { __key: string }).__key
 
 	const column: Column<T, V> = $state({
 		header,
@@ -77,10 +76,10 @@
 	})
 
 	const table = getTableState()
-	table.addColumn(key, column as Column)
+	table.addColumn(id, column as Column)
 
 	onDestroy(() => {
-		table.removeColumn(key)
+		table.removeColumn(id)
 	})
 
 </script>

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

@@ -15,11 +15,12 @@ export interface Column<T = unknown, V = unknown> {
     };
 }
 import { type Snippet } from 'svelte';
-declare class __sveltets_Render<T extends Record<PropertyKey, any>, V> {
+declare class __sveltets_Render<T extends Record<PropertyKey, any>, V = unknown> {
     props(): {
         header: Column<T_1, V_1>["header"];
         row: Column<T_1, V_1>["row"];
         statusbar?: Column<T_1, V_1>["statusbar"];
+        id: string;
         sticky?: boolean;
         sort?: boolean;
         show?: boolean;
@@ -32,10 +33,10 @@ declare class __sveltets_Render<T extends Record<PropertyKey, any>, V> {
     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']>> & {
+    new <T extends Record<PropertyKey, any>, V = unknown>(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']>;
+    <T extends Record<PropertyKey, any>, V = unknown>(internal: unknown, props: ReturnType<__sveltets_Render<T, V>['props']> & {}): ReturnType<__sveltets_Render<T, V>['exports']>;
     z_$$bindings?: ReturnType<__sveltets_Render<any, any>['bindings']>;
 }
 /**
@@ -46,5 +47,5 @@ interface $$IsomorphicComponent {
  * <Component />
  */
 declare const Column: $$IsomorphicComponent;
-type Column<T extends Record<PropertyKey, any>, V> = InstanceType<typeof Column<T, V>>;
+type Column<T extends Record<PropertyKey, any>, V = unknown> = InstanceType<typeof Column<T, V>>;
 export default Column;

package/dist/Table/Panel.svelte

@@ -46,6 +46,8 @@
 	import { sineInOut } from 'svelte/easing'
 
 	interface Props {
+		id: string
+
 		/** A darkened backdrop? */
 		backdrop?: boolean
 		children: Snippet<[table: TableState]>
@@ -54,20 +56,19 @@
 	let {
 		backdrop = true,
 		children,
-		...rest
+		id
 	}: 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
+	table.panels[id] = panel
 
 	onDestroy(() => {
-		delete table.panels[key]
+		delete table.panels[id]
 	})
 
 </script>

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

@@ -15,6 +15,7 @@ export declare class PanelTween {
 import { type Snippet } from 'svelte';
 import { type TableState } from './Table.svelte';
 interface Props {
+    id: string;
     /** A darkened backdrop? */
     backdrop?: boolean;
     children: Snippet<[table: TableState]>;

package/dist/Table/Table.svelte

@@ -11,8 +11,8 @@
 <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>
+		columns: Record<string, TColumn<T, unknown>>
+		panels: Record<string, TPanel>
 		sortby?: string
 		positions: {
 			sticky: string[]
@@ -21,7 +21,7 @@
 			toggle(key: string): void
 		}
 		readonly data: T[]
-		addColumn(key: string, options: Column<T, unknown>): void
+		addColumn(key: string, options: TColumn<T, unknown>): void
 		removeColumn(key: string): void
 	}
 
@@ -33,21 +33,23 @@
 
 <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 { getContext, setContext, untrack, type Snippet } from 'svelte'
+	import Column, { type Column as TColumn } from './Column.svelte'
+	import Panel, { PanelTween, type Panel as TPanel } from './Panel.svelte'
 	import { fly } from 'svelte/transition'
 	import { sineInOut } from 'svelte/easing'
 
 	interface Props {
-		children?: Snippet
+		content: Snippet<[context: { Column: typeof Column<T>, Panel: typeof Panel, state: TableState<T> }]>
+
 		panel?: string
 		data?: T[]
 		id?: string
 	}
 
 	let {
-		children,
+		content,
+
 		panel,
 		data: _data = [],
 		id = Array.from({length: 12}, () => String.fromCharCode(Math.floor(Math.random() * 26) + 97)).join('')
@@ -55,6 +57,48 @@
 	
 	const data = $derived(_data.toSorted())
 
+	const elements = $state({}) as Record<'headers' | 'statusbar' | 'rows', HTMLElement>
+
+
+	// * --- Virtualization --- *
+	let scrollTop = $state(0)
+	let viewportHeight = $state(0)
+
+	let _heightPerItem = 24
+	let renderItemLength = $derived(Math.ceil(Math.max(30, viewportHeight / (_heightPerItem / 3))))
+
+	let heightPerItem = $derived.by(() => {
+		data
+		if(!elements.rows)
+			return 8
+		const result = elements.rows.scrollHeight / elements.rows.childNodes.length
+		_heightPerItem = result
+		return result
+	})
+
+	let virtualTop = $derived.by(() => {
+		let spacing = untrack(() => (renderItemLength/3)) * heightPerItem
+		let scroll = scrollTop - spacing
+		let virtualTop = Math.max(scroll, 0)
+		virtualTop -= virtualTop % heightPerItem
+		return virtualTop
+	})
+	let virtualBottom = $derived.by(() => {
+		const virtualBottom = (heightPerItem * data.length) - virtualTop
+		return virtualBottom
+	})
+
+	/** The area of data that is rendered */
+	const area = $derived.by(() => {
+		const index = (virtualTop / heightPerItem) || 0
+		return data.slice(
+			index, 
+			index + untrack(() => renderItemLength)
+		)
+	})
+	// * --- Virtualization --- *
+
+
 	const table: TableState<T> = $state({
 		columns: {},
 		panels: {},
@@ -99,7 +143,6 @@
 	// * --- *
 	
 	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)))
@@ -109,7 +152,7 @@
 
 	/** grid-template-columns for widths */
 	const style = $derived(`
-		#${id} > .headers, #${id} > .rows > .row, #${id} > .statusbar {
+		#${id} > .headers, #${id} > .content > .rows > .row, #${id} > .statusbar, #${id} > .content > .virtual.bottom {
 			grid-template-columns: ${columns.map((key, i, arr) => i === arr.length - 1 ? `minmax(${widths[key] || 150}px, 1fr)` : `${widths[key] || 150}px`).join(' ')};
 		}
 	`)
@@ -119,13 +162,19 @@
 		widths[target.getAttribute('data-column')!] = parseFloat(target.style.width)
 	})
 
-	function observe(node: HTMLDivElement, column: string) {
+	function observe(node: HTMLDivElement, isHeader = false) {
+		if(!isHeader) return
 		observer?.observe(node, {attributes: true})
 		return { destroy: () => observer?.disconnect() }
 	}
 
 	function onscroll(event: Event) {
 		const target = event.target as HTMLDivElement
+		if(target.scrollTop !== scrollTop) {
+			scrollTop = target.scrollTop || 0
+		}
+		
+		if(!elements.headers) return
 		elements.headers.scrollLeft = target.scrollLeft
 		elements.statusbar.scrollLeft = target.scrollLeft
 	}
@@ -137,69 +186,66 @@
 	{@html `<style>${style}</style>`}
 </svelte:head>
 
+{#snippet columnsSnippet(
+	renderable: (column: string) => Snippet<[arg0?: any, arg1?: any, arg2?: any, arg3?: any]> | undefined, 
+	arg: null | ((column: string) => any[]) = null,
+	isHeader = false
+)}
+	{#each table.positions.sticky as column, i (column)}
+		{#if !table.positions.hidden.includes(column)}
+			{@const args = arg ? arg(column) : []}
+			{@const props = isHeader ? { 'data-column': column } : {}}
+			<div class='column sticky' {...props} use:observe={isHeader} class:border={i == table.positions.sticky.length - 1}>
+				{@render renderable(column)?.(args[0], args[1], args[2], args[3])}
+			</div>
+		{/if}
+	{/each}
+	{#each table.positions.scroll as column, i (column)}
+		{#if !table.positions.hidden.includes(column)}
+			{@const args = arg ? arg(column) : []}
+			{@const props = isHeader ? { 'data-column': column } : {}}
+			<div class='column' {...props} use:observe={isHeader}>
+				{@render renderable(column)?.(args[0], args[1], args[2], args[3])}
+			</div>
+		{/if}
+	{/each}
+{/snippet}
+
 <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}
+		{@render columnsSnippet((column) => table.columns[column]?.header, null, true)}
 	</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 class='content' {onscroll} bind:clientHeight={viewportHeight}>
+		<div class='virtual top' style='height: {virtualTop}px'></div>
+		
+		<div class='rows' bind:this={elements.rows}>
+			{#each area as item, i (item)}
+				<div class='row'>
+					{@render columnsSnippet(
+						(column) => table.columns[column]!.row,
+						(column) => {
+							const col = table.columns[column]!
+							return [item, col.options.value ? col.options.value(item) : undefined]
+						}
+					)}
+				</div>
+			{/each}
+		</div>
+		<div class='virtual bottom' style='height: {virtualBottom}px'>
+			{@render columnsSnippet(() => undefined)}
+		</div>
 	</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}
+		{@render columnsSnippet((column) => table.columns[column]?.statusbar, () => [data])}
 	</div>
 
-	<div class='panel' style='width: {panelTween.current}px;' style:overflow={panelTween.transitioning ? 'hidden' : 'auto'}>
+	<div class='panel' style='width: {panelTween.current + 30}px;' style:overflow={panelTween.transitioning ? 'hidden' : 'auto'}>
 		{#if panel && panel in table.panels}
 			<div 
-				class="panel-content"
+				class='panel-content'
 				bind:clientWidth={panelTween.width}
 				in:fly={{ x: 100, easing: sineInOut, duration:300 }}
 				out:fly={{ x:100, duration:200, easing: sineInOut }}
@@ -211,7 +257,7 @@
 </div>
 
 
-{@render children?.()}
+{@render content?.({ Column, Panel, state: table })}
 
 
 
@@ -226,16 +272,16 @@
 		position: sticky;
 		left: 0px;
 		/* right: 100px; */
-		background-color: white;
+		background-color: var(--tably-bg, hsl(0, 0%, 100%));
 		z-index: 1;
 	}
 
 	.sticky.border {
-		border-right: 1px solid hsla(0, 0%, 90%);
+		border-right: 1px solid var(--tably-border, hsl(0, 0%, 90%));
 	}
 
 	.headers > .column {
-		border-right: 1px solid hsla(0, 0%, 90%);
+		border-right: 1px solid var(--tably-border, hsl(0, 0%, 90%));
 		resize: horizontal;
 		overflow: hidden;
 		padding: var(--padding-y) 0;
@@ -249,17 +295,18 @@
 		--header-height: 2.5rem;
 
 		display: grid;
+		height: 100%;
 
 		grid-template-areas: 
-			"headers     panel"
-			"rows        panel"
-			"statusbar   panel"
+			'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: 1px solid var(--tably-border, hsl(0, 0%, 90%));
 		border-radius: .25rem;
 
 		max-height: 100%;
@@ -269,32 +316,38 @@
 		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%);
+		background-color: var(--tably-bg, hsl(0, 0%, 100%));
+		border-bottom: 1px solid var(--tably-border, hsl(0, 0%, 90%));
 	}
 
-	.rows {
+	.content {
 		grid-area: rows;
 		display: grid;
-		overflow: auto;
 		scrollbar-width: thin;
-		background-color: hsla(0, 0%, 100%);
+		overflow: auto;
+		height: 100%;
+		grid-template-rows: auto auto 1fr;
+
+		> .rows, > .virtual.bottom {
+			display: grid;
+		}
+		> .virtual.bottom {
+			min-height: 100%;
+		}
 	}
 
 	.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%);
+		background-color: var(--tably-bg-statusbar, hsl(0, 0%, 99%));
+		border-top: 1px solid var(--tably-border, hsl(0, 0%, 90%));
 		padding: calc(var(--padding-y) / 2) 0;
 	}
 
@@ -315,12 +368,12 @@
 		}
 	}
 
-	.row:nth-child(1) > * {
+	/* .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;
@@ -329,19 +382,20 @@
 	.panel {
 		position: relative;
 		grid-area: panel;
-		width: var(--panel);
 		height: 100%;
-		background-color: white;
+		background-color: var(--tably-bg, hsl(0, 0%, 100%));
 
-		border-left: 1px solid hsla(0, 0%, 90%);
+		border-left: 1px solid var(--tably-border, hsl(0, 0%, 90%));
+		scrollbar-gutter: stable both-edges;
+		scrollbar-width: thin;
 
 		> .panel-content {
 			position: absolute;
 			top: 0;
 			right: 0;
 			width: min-content;
-			overflow: hidden;
-			padding: var(--padding-y) var(--padding-x);
+			overflow: auto;
+			padding: var(--padding-y) 0;
 		}
 	}
 

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

@@ -1,6 +1,7 @@
+import { SvelteComponent } from "svelte";
 export interface TableState<T extends Record<PropertyKey, any> = Record<PropertyKey, any>> {
-    columns: Record<string, Column<T, unknown>>;
-    panels: Record<string, Panel>;
+    columns: Record<string, TColumn<T, unknown>>;
+    panels: Record<string, TPanel>;
     sortby?: string;
     positions: {
         sticky: string[];
@@ -9,16 +10,56 @@ export interface TableState<T extends Record<PropertyKey, any> = Record<Property
         toggle(key: string): void;
     };
     readonly data: T[];
-    addColumn(key: string, options: Column<T, unknown>): void;
+    addColumn(key: string, options: TColumn<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';
+import Column, { type Column as TColumn } from './Column.svelte';
+import Panel, { type Panel as TPanel } from './Panel.svelte';
 declare class __sveltets_Render<T extends Record<PropertyKey, unknown>> {
     props(): {
-        children?: Snippet;
+        content: Snippet<[context: {
+            Column: {
+                (internal: unknown, props: {
+                    header: Column<T_1, V>["header"];
+                    row: Column<T_1, V>["row"];
+                    statusbar?: Column<T_1, V>["statusbar"];
+                    id: string;
+                    sticky?: boolean;
+                    sort?: boolean;
+                    show?: boolean;
+                    value?: Column<T_1, V>["options"]["value"];
+                    sorting?: Column<T_1, V>["options"]["sorting"];
+                }): {};
+                new (options: import("svelte").ComponentConstructorOptions<{
+                    header: Column<T_1, V>["header"];
+                    row: Column<T_1, V>["row"];
+                    statusbar?: Column<T_1, V>["statusbar"];
+                    id: string;
+                    sticky?: boolean;
+                    sort?: boolean;
+                    show?: boolean;
+                    value?: Column<T_1, V>["options"]["value"];
+                    sorting?: Column<T_1, V>["options"]["sorting"];
+                }>): SvelteComponent<{
+                    header: Column<T_1, V>["header"];
+                    row: Column<T_1, V>["row"];
+                    statusbar?: Column<T_1, V>["statusbar"];
+                    id: string;
+                    sticky?: boolean;
+                    sort?: boolean;
+                    show?: boolean;
+                    value?: Column<T_1, V>["options"]["value"];
+                    sorting?: Column<T_1, V>["options"]["sorting"];
+                }, {}, {}> & {
+                    $$bindings?: ReturnType<() => "">;
+                };
+                z_$$bindings?: ReturnType<() => "">;
+            };
+            Panel: typeof Panel;
+            state: TableState<T>;
+        }]>;
         panel?: string;
         data?: T[] | undefined;
         id?: string;

package/dist/Table/index.d.ts

@@ -1,12 +1 @@
-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 };
+export { default as Table } from './Table.svelte';

package/dist/Table/index.js

@@ -1,31 +1 @@
-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 };
+export { default as Table } from './Table.svelte';

package/dist/index.d.ts

@@ -1 +1,2 @@
-export * from './Table/index.js';
+import { Table } from './Table/index.js';
+export default Table;

package/dist/index.js

@@ -1 +1,2 @@
-export * from './Table/index.js';
+import { Table } from './Table/index.js';
+export default Table;

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "svelte-tably",
-	"version": "1.0.0-next.1",
+	"version": "1.0.0-next.4",
 	"repository": "github:refzlund/svelte-tably",
 	"homepage": "https://github.com/Refzlund/svelte-tably",
 	"bugs": {