svelte-tably 1.0.0-next.3 → 1.0.0-next.5

package/README.md

@@ -23,52 +23,68 @@ 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' },
-  ])
+    const data = $state([
+        { name: 'John Doe', age: 30, email: 'johndoe@example.com' },
+        { name: 'Jane Doe', age: 25, email: 'janedoe@example.com' },
+    ])
+
+    let activePanel = $state('columns') as string | undefined
 </script>
 
-<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}
+<Table {data} panel={activePanel}>
+    {#snippet content({ Column, Panel, state, data })}
+        <Column id='name' sticky>
+            {#snippet header()}
+                Name
+            {/snippet}
+            {#snippet row(row)}
+                {row.name}
+            {/snippet}
+
+            <!-- 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>
+
+        <Panel id='columns'>
+            <!-- Anything you might like -->
+        </Panel>
+        <Panel ...>
+            ...
+        </Panel>
     {/snippet}
-  </Table.Email>
 </Table>
 ```
 
-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.
+#### Styling
+
+For quick styling
+
+| CSS Variable | Description | Default |
+| - | - | - |
+| --tably-bg | background-color | `hsl(0, 0%, 100%)` |
+| --tably-color | color | `hsl(0, 0%, 0%)` |
+| --tably-border | border | `hsl(0, 0%, 90%)` |
+| --tably-padding-y | Padding above/below each column | `.5rem` |
+| --tably-padding-x | Padding left of each column | `1rem` |
+| --tably-radius | Table radius | `.25rem` |
+
+Advanced styling can be done via `:global .svelte-tably`
 
-Inside the column component, you need to define three snippets:
 
-* `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

package/dist/Table/Column.svelte

@@ -13,7 +13,7 @@
 	export interface Column<T = unknown, V = unknown> {
 		header: Snippet
 		row: Snippet<[item: T, value?: V]>
-		statusbar?: Snippet<[data: T[]]>
+		statusbar?: Snippet
 		
 		/** Default options for initial table */
 		defaults: {
@@ -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

@@ -1,7 +1,7 @@
 export interface Column<T = unknown, V = unknown> {
     header: Snippet;
     row: Snippet<[item: T, value?: V]>;
-    statusbar?: Snippet<[data: T[]]>;
+    statusbar?: Snippet;
     /** Default options for initial table */
     defaults: {
         sticky?: boolean;
@@ -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

@@ -13,7 +13,7 @@
 	export interface Panel {
 		/** A darkened backdrop? */
 		backdrop: boolean
-		content: Snippet<[table: TableState]>
+		content: Snippet
 	}
 
 	export class PanelTween {
@@ -29,9 +29,9 @@
 			this.#tween.set(value).then(() => this.transitioning = false)
 		}
 
-		constructor(cb: () => string | undefined) {
+		constructor(cb: () => string | undefined, added = 0) {
 			$effect.pre(() => {
-				this.target = cb() ? this.width : 0
+				this.target = cb() ? this.width + added : 0
 			})
 		}
 	}
@@ -46,28 +46,29 @@
 	import { sineInOut } from 'svelte/easing'
 
 	interface Props {
+		id: string
+
 		/** A darkened backdrop? */
 		backdrop?: boolean
-		children: Snippet<[table: TableState]>
+		children: Snippet
 	}
 
 	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

@@ -1,7 +1,7 @@
 export interface Panel {
     /** A darkened backdrop? */
     backdrop: boolean;
-    content: Snippet<[table: TableState]>;
+    content: Snippet;
 }
 export declare class PanelTween {
     #private;
@@ -10,14 +10,14 @@ export declare class PanelTween {
     /** bind:clientWidth */
     width: number;
     set target(value: number);
-    constructor(cb: () => string | undefined);
+    constructor(cb: () => string | undefined, added?: number);
 }
 import { type Snippet } from 'svelte';
-import { type TableState } from './Table.svelte';
 interface Props {
+    id: string;
     /** A darkened backdrop? */
     backdrop?: boolean;
-    children: Snippet<[table: TableState]>;
+    children: Snippet;
 }
 /**
  * This is a description, \

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
 	}
 
@@ -34,28 +34,30 @@
 <script lang='ts' generics='T extends Record<PropertyKey, unknown>'>
 
 	import { getContext, setContext, untrack, type Snippet } from 'svelte'
-	import { type Column } from './Column.svelte'
-	import { PanelTween, type Panel } from './Panel.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, readonly state: TableState<T>, readonly data: T[] }]>
+
 		panel?: string
 		data?: T[]
 		id?: string
 	}
 
 	let {
-		children,
-		panel,
+		content,
+
+		panel = $bindable(),
 		data: _data = [],
 		id = Array.from({length: 12}, () => String.fromCharCode(Math.floor(Math.random() * 26) + 97)).join('')
 	}: Props = $props()
 	
 	const data = $derived(_data.toSorted())
 
-	const elements = $state({}) as Record<'headers' | 'statusbar' | 'content', HTMLElement>
+	const elements = $state({}) as Record<'headers' | 'statusbar' | 'rows', HTMLElement>
 
 
 	// * --- Virtualization --- *
@@ -66,12 +68,10 @@
 	let renderItemLength = $derived(Math.ceil(Math.max(30, viewportHeight / (_heightPerItem / 3))))
 
 	let heightPerItem = $derived.by(() => {
-		if(!elements.content)
+		data
+		if(!elements.rows)
 			return 8
-		const rows = elements.content.querySelectorAll('.row') as NodeListOf<HTMLDivElement>
-		const result = ((
-			rows[rows.length - 1].offsetTop - rows[0].offsetTop
-		) / rows.length)
+		const result = elements.rows.scrollHeight / elements.rows.childNodes.length
 		_heightPerItem = result
 		return result
 	})
@@ -80,17 +80,17 @@
 		let spacing = untrack(() => (renderItemLength/3)) * heightPerItem
 		let scroll = scrollTop - spacing
 		let virtualTop = Math.max(scroll, 0)
-		virtualTop -= virtualTop % untrack(() => heightPerItem)
+		virtualTop -= virtualTop % heightPerItem
 		return virtualTop
 	})
 	let virtualBottom = $derived.by(() => {
-		const virtualBottom = (untrack(() => heightPerItem) * data.length) - virtualTop
+		const virtualBottom = (heightPerItem * data.length) - virtualTop
 		return virtualBottom
 	})
 
 	/** The area of data that is rendered */
 	const area = $derived.by(() => {
-		const index = (virtualTop / untrack(() => heightPerItem)) || 0
+		const index = (virtualTop / heightPerItem) || 0
 		return data.slice(
 			index, 
 			index + untrack(() => renderItemLength)
@@ -142,7 +142,7 @@
 
 	// * --- *
 	
-	const panelTween = new PanelTween(() => panel)
+	const panelTween = new PanelTween(() => panel, 24)
 
 	/** Order of columns */
 	const columns = $derived([...table.positions.sticky, ...table.positions.scroll].filter(key => !table.positions.hidden.includes(key)))
@@ -187,7 +187,7 @@
 </svelte:head>
 
 {#snippet columnsSnippet(
-	renderable: (column: string) => Snippet<[arg0?: any, arg1?: any, arg2?: any, arg3?: any]> | undefined, 
+	renderable: (column: string) => Snippet<[arg0?: any, arg1?: any]> | undefined, 
 	arg: null | ((column: string) => any[]) = null,
 	isHeader = false
 )}
@@ -196,7 +196,7 @@
 			{@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])}
+				{@render renderable(column)?.(args[0], args[1])}
 			</div>
 		{/if}
 	{/each}
@@ -205,22 +205,22 @@
 			{@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])}
+				{@render renderable(column)?.(args[0], args[1])}
 			</div>
 		{/if}
 	{/each}
 {/snippet}
 
-<div id={id} class='table'>
+<div id={id} class='table svelte-tably'>
 
 	<div class='headers' bind:this={elements.headers}>
 		{@render columnsSnippet((column) => table.columns[column]?.header, null, true)}
 	</div>
 
-	<div class='content' {onscroll} bind:clientHeight={viewportHeight} bind:this={elements.content}>
+	<div class='content' {onscroll} bind:clientHeight={viewportHeight}>
 		<div class='virtual top' style='height: {virtualTop}px'></div>
 		
-		<div class="rows">
+		<div class='rows' bind:this={elements.rows}>
 			{#each area as item, i (item)}
 				<div class='row'>
 					{@render columnsSnippet(
@@ -239,25 +239,32 @@
 	</div>
 	
 	<div class='statusbar' bind:this={elements.statusbar}>
-		{@render columnsSnippet((column) => table.columns[column]?.statusbar, () => [data])}
+		{@render columnsSnippet((column) => table.columns[column]?.statusbar)}
 	</div>
 
-	<div class='panel' style='width: {panelTween.current + 30}px;' style:overflow={panelTween.transitioning ? 'hidden' : 'auto'}>
+	<div class='panel' style='width: {(panelTween.current)}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 }}
 			>
-				{@render table.panels[panel].content(table as TableState)}
+				{@render table.panels[panel].content()}
 			</div>
 		{/if}
 	</div>
+	<button 
+		class='backdrop' 
+		aria-label='Panel backdrop'
+		tabindex='-1'
+		aria-hidden={panel && table.panels[panel]?.backdrop ? false : true}
+		onclick={() => panel = undefined}
+	></button>
 </div>
 
 
-{@render children?.()}
+{@render content?.({ Column, Panel, get state() { return table }, get data() { return data } })}
 
 
 
@@ -266,13 +273,47 @@
 	
 	.table, .table * {
 		box-sizing: border-box;
+		background-color: inherit;
+	}
+
+	.backdrop {
+		position: absolute;
+		left: 0px;
+		top: 0px;
+		bottom: 0px;
+		right: 0px;
+		background-color: hsla(0, 0%, 0%, .3);
+		z-index: 3;
+		opacity: 1;
+		transition: .15s ease;
+		border: none;
+		outline: none;
+		cursor: pointer;
+
+		&[aria-hidden='true'] {
+			opacity: 0;
+			pointer-events: none;
+		}
+	}
+
+	.headers, .statusbar {
+		/* So that the scrollbar doesn't cause the headers/statusbar to shift */
+		padding-right: 11px;
+	}
+
+	.table {
+		color: var(--tably-color, hsl(0, 0%, 0%));
+		background-color: var(--tably-bg, hsl(0, 0%, 100%));
+
+		--tably-padding-x: 1rem;
+		--tably-padding-y: .5rem;
+		--tably-radius: .25rem;
 	}
 
 	.sticky {
 		position: sticky;
 		left: 0px;
 		/* right: 100px; */
-		background-color: var(--tably-bg, hsl(0, 0%, 100%));
 		z-index: 1;
 	}
 
@@ -284,30 +325,25 @@
 		border-right: 1px solid var(--tably-border, hsl(0, 0%, 90%));
 		resize: horizontal;
 		overflow: hidden;
-		padding: var(--padding-y) 0;
+		padding: var(--tably-padding-y) 0;
 	}
 	
 	.table {
-		--panel: 250px;
-		--padding-x: 1rem;
-		--padding-y: .5rem;
-		--gap: .25rem;
-		--header-height: 2.5rem;
-
 		display: grid;
 		height: 100%;
+		position: relative;
 
 		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 var(--tably-border, hsl(0, 0%, 90%));
-		border-radius: .25rem;
+		border-radius: var(--tably-radius, .25rem);
 
 		max-height: 100%;
 	}
@@ -320,7 +356,6 @@
 
 	.headers > .column {
 		width: auto !important;
-		background-color: var(--tably-bg, hsl(0, 0%, 100%));
 		border-bottom: 1px solid var(--tably-border, hsl(0, 0%, 90%));
 	}
 
@@ -346,9 +381,8 @@
 	}
 
 	.statusbar > .column {
-		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;
+		padding: calc(var(--tably-padding-y) / 2) 0;
 	}
 
 	.headers, .row, .statusbar {
@@ -358,36 +392,36 @@
 
 		& > .column {
 			display: flex;
-			padding-left: var(--padding-x);
+			padding-left: var(--tably-padding-x);
 			overflow: hidden;
 		}
 
 		& > *:last-child {
 			width: 100%;
-			padding-right: var(--padding-x);
+			padding-right: var(--tably-padding-x);
 		}
 	}
 
-	/* .row:nth-child(1) > * {
-		padding-top: calc(var(--padding-y) + var(--gap));
+	.row:first-child > * {
+		padding-top: calc(var(--tably-padding-y) + calc(var(--tably-padding-y) / 2));
+	}
+	.row:last-child > * {
+		padding-bottom: calc(var(--tably-padding-y) + calc(var(--tably-padding-y) / 2));
 	}
-	.row:nth-last-child(1) > * {
-		padding-bottom: calc(var(--padding-y) + var(--gap));
-	} */
 
 	.row > * {
-		padding: var(--gap) 0;
+		padding: calc(var(--tably-padding-y) / 2) 0;
 	}
 
 	.panel {
 		position: relative;
 		grid-area: panel;
 		height: 100%;
-		background-color: var(--tably-bg, hsl(0, 0%, 100%));
 
 		border-left: 1px solid var(--tably-border, hsl(0, 0%, 90%));
 		scrollbar-gutter: stable both-edges;
 		scrollbar-width: thin;
+		z-index: 4;
 
 		> .panel-content {
 			position: absolute;
@@ -395,7 +429,7 @@
 			right: 0;
 			width: min-content;
 			overflow: auto;
-			padding: var(--padding-y) 0;
+			padding: var(--tably-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,23 +10,64 @@ 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;
+            readonly state: TableState<T>;
+            readonly data: T[];
+        }]>;
         panel?: string;
         data?: T[] | undefined;
         id?: string;
     };
     events(): {};
     slots(): {};
-    bindings(): "";
+    bindings(): "panel";
     exports(): {};
 }
 interface $$IsomorphicComponent {

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.3",
+	"version": "1.0.0-next.5",
 	"repository": "github:refzlund/svelte-tably",
 	"homepage": "https://github.com/Refzlund/svelte-tably",
 	"bugs": {