svelte-tably 1.0.0 → 1.0.1-next.0

package/dist/column/Column.svelte

@@ -8,11 +8,20 @@
 
 -->
 
-<script lang="ts">
+<script module lang='ts'>
+
+	export function getDefaultHeader<T extends AnyRecord,V>(title: string) {
+		return (
+			(anchor: Comment) => snippetLiteral(defaultHeader)(anchor, () => title)
+		) as unknown as () => any
+	}
+
+</script>
+
+<script lang='ts'>
 
-	import { fromProps, type AnyRecord } from '../utility.svelte.js'
-	import type { Snippet } from 'svelte'
-	import { ColumnState, type ColumnProps, type HeaderCtx, type ColumnSnippets } from './column.svelte.js'
+	import { fromProps, snippetLiteral, type AnyRecord } from '../utility.svelte.js'
+	import { ColumnState, type ColumnProps, type HeaderCtx, type ColumnSnippets } from './column-state.svelte.js'
 
 	type T = $$Generic<Record<PropertyKey, any>>
 	type V = $$Generic
@@ -24,18 +33,7 @@
 	
 </script>
 
-<script module lang='ts'>
-	
-	declare const defaultHeader: <T extends AnyRecord>(anchor: unknown, title: () => string, ctx: HeaderCtx<T>) => ReturnType<Snippet>
-	
-	export function getDefaultHeader<T extends AnyRecord,V>(title: string) {
-		return (
-			(anchor: unknown, ctx: HeaderCtx<T>) => defaultHeader<T>(anchor, () => title, ctx)
-		) as Exclude<ColumnSnippets<T, V>['header'], string>
-	}
-
-</script>
 
-{#snippet defaultHeader(title: string, ctx: HeaderCtx<T>)}
+{#snippet defaultHeader(title: string)}
 	{title}
 {/snippet}

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

@@ -1,8 +1,27 @@
-export declare function getDefaultHeader<T extends AnyRecord, V>(title: string): Exclude<ColumnSnippets<T, V>["header"], string>;
+export declare function getDefaultHeader<T extends AnyRecord, V>(title: string): () => any;
 import { type AnyRecord } from '../utility.svelte.js';
-import { type ColumnSnippets } from './column.svelte.js';
+import { type HeaderCtx } from './column-state.svelte.js';
 declare class __sveltets_Render<T extends Record<PropertyKey, any>, V> {
-    props(): ColumnProps<T_1, V_1>;
+    props(): {
+        id: string;
+        table?: import("../index.js").TableState<T> | undefined;
+        header?: string | import("svelte").Snippet<[ctx: HeaderCtx<T>]> | undefined;
+        row?: import("svelte").Snippet<[item: T, ctx: import("./column-state.svelte.js").RowColumnCtx<T, V>]> | undefined;
+        statusbar?: import("svelte").Snippet<[ctx: import("./column-state.svelte.js").StatusbarCtx<T>]> | undefined;
+        sticky?: boolean | undefined;
+        show?: boolean | undefined;
+        sortby?: boolean | undefined;
+        width?: number | undefined;
+        fixed?: boolean | undefined;
+        value?: ((item: T) => V) | undefined;
+        sort?: boolean | ((a: V, b: V) => number) | undefined;
+        resizeable?: boolean | undefined;
+        filter?: ((value: V) => boolean) | undefined;
+        style?: string | undefined;
+        class?: string | undefined;
+        onclick?: ((event: MouseEvent, rowColumnCtx: import("./column-state.svelte.js").RowColumnCtx<T, V>) => void) | undefined;
+        pad?: "row" | "header" | "both" | undefined;
+    };
     events(): {};
     slots(): {};
     bindings(): "";

package/dist/column/column-state.svelte.d.ts

@@ -0,0 +1,138 @@
+import { type Snippet } from 'svelte';
+import { TableState, type RowCtx } from '../table/table-state.svelte.js';
+import { type AnyRecord } from '../utility.svelte.js';
+export type ColumnProps<T extends AnyRecord, V> = ({
+    id: string;
+    table?: TableState<T>;
+} & ColumnSnippets<T, V> & ColumnDefaults<T> & ColumnOptions<T, V>) extends infer K ? {
+    [P in keyof K]: K[P];
+} : never;
+export interface HeaderCtx<T> {
+    readonly data: T[];
+    /**
+     * Is true when displaying in the header,
+     * so additional content can be shown if desired,
+     * so the header snippet can be re-used.
+     */
+    readonly header?: boolean;
+}
+export interface RowColumnCtx<T extends AnyRecord, V> extends RowCtx<T> {
+    readonly value: V;
+    readonly columnHovered: boolean;
+}
+export type StatusbarCtx<T extends AnyRecord> = {
+    readonly data: T[];
+};
+export type ColumnSnippets<T extends AnyRecord, V> = {
+    header?: Snippet<[ctx: HeaderCtx<T>]> | string;
+    row?: Snippet<[item: T, ctx: RowColumnCtx<T, V>]>;
+    statusbar?: Snippet<[ctx: StatusbarCtx<T>]>;
+};
+type ColumnDefaults<T> = {
+    /**
+     * Is this column sticky by default?
+     * @default false
+    */
+    sticky?: boolean;
+    /**
+     * Is this column visible by default?
+     * @default true
+     */
+    show?: boolean;
+    /**
+     * Is this column sorted by default?
+     * @default false
+    */
+    sortby?: boolean;
+    /**
+     * The width of the column in pixels by default
+     * @default 150
+     */
+    width?: number;
+};
+type ColumnOptions<T extends AnyRecord, V> = {
+    /**
+     * Fixed is like sticky, but in its own category — meant to not be moved/hidden ex. select-boxes
+     * @default false
+    */
+    fixed?: boolean;
+    /**
+     * The value of the row. Required for sorting/filtering
+     * @example row => row.name
+    */
+    value?: (item: T) => V;
+    /**
+     * Makes the column sortable. Sorts based of a sorting function.
+     *
+     * **Important**   `value`-attribute is required adjacent to this.
+     *
+     * If `true` uses the default `.sort()` algorithm.
+     *
+     * @default false
+    */
+    sort?: boolean | ((a: V, b: V) => number);
+    /**
+     * Is this column resizeable?
+     * Can not be resized if Table is marked as `resizeable={false}`
+     * @default true
+    */
+    resizeable?: boolean;
+    /**
+     *
+     * @example (value) => value.includes(search)
+    */
+    filter?: (value: V) => boolean;
+    /** Styling for the column element (td) */
+    style?: string;
+    /** Class for the column element (td) */
+    class?: string;
+    /** Event when the row-column is clicked */
+    onclick?: (event: MouseEvent, rowColumnCtx: RowColumnCtx<T, V>) => void;
+    /**
+     * Pad child element of `td`/`th` instead of the column element itself.
+     * This ensures the child element "fills" the whole column.
+     * Ex. good if you want to make the column an anchor link; `<a href='...'>`
+    */
+    pad?: 'row' | 'header' | 'both';
+};
+export declare class ColumnState<T extends AnyRecord = any, V = any> {
+    #private;
+    id: string;
+    /**
+     * Associated table
+    */
+    table: TableState<T>;
+    snippets: {
+        header: Snippet<[ctx: HeaderCtx<T>]> | (() => any) | undefined;
+        /** Title is the header-snippet, with header-ctx: `{ header: false }` */
+        title: (...args: any[]) => any;
+        row: Snippet<[item: T, ctx: RowColumnCtx<T, V>]> | undefined;
+        statusbar: Snippet<[ctx: StatusbarCtx<T>]> | undefined;
+    };
+    /**
+     * Variables that can be saved (e.g. localStorage)
+     * and re-provided, where these are default-fallbacks
+    */
+    defaults: {
+        sticky: boolean;
+        show: boolean;
+        sortby: boolean;
+        width: number;
+    };
+    /** Static options */
+    options: {
+        fixed: boolean;
+        sort: boolean | ((a: V, b: V) => number);
+        filter: ((value: V) => boolean) | undefined;
+        value: ((item: T) => V) | undefined;
+        resizeable: boolean;
+        style: string | undefined;
+        class: string | undefined;
+        onclick: ((event: MouseEvent, rowColumnCtx: RowColumnCtx<T, V>) => void) | undefined;
+        padRow: boolean;
+        padHeader: boolean;
+    };
+    toggleVisiblity(): void;
+    constructor(props: ColumnProps<T, V>);
+}
+export {};

package/dist/column/{column.svelte.js → column-state.svelte.js}

@@ -1,4 +1,4 @@
-import { TableState } from '../table/table.svelte.js';
+import { TableState } from '../table/table-state.svelte.js';
 import { getDefaultHeader } from './Column.svelte';
 export class ColumnState {
     #props = {};

package/dist/expandable/Expandable.svelte

@@ -10,7 +10,7 @@
 
 <script lang='ts'>
 
-	import { ExpandableState, type ExpandableProps } from './expandable.svelte.js'
+	import { ExpandableState, type ExpandableProps } from './expandable-state.svelte.js'
 	import type { AnyRecord } from '../utility.svelte.js'
 	import { fromProps } from '../utility.svelte.js'
 

package/dist/expandable/Expandable.svelte.d.ts

@@ -1,6 +1,7 @@
+import { type ExpandableProps } from './expandable-state.svelte.js';
 import type { AnyRecord } from '../utility.svelte.js';
 declare class __sveltets_Render<T extends AnyRecord> {
-    props(): ExpandableProps<T_1>;
+    props(): ExpandableProps<T>;
     events(): {};
     slots(): {};
     bindings(): "";

package/dist/expandable/expandable-state.svelte.d.ts

@@ -0,0 +1,48 @@
+import { type RowCtx } from '../table/table-state.svelte.js';
+import type { AnyRecord } from '../utility.svelte.js';
+import type { Snippet } from 'svelte';
+import type { EasingFunction } from 'svelte/transition';
+export interface ExpandableProps<T extends AnyRecord> {
+    content: Snippet<[item: T, ctx: RowCtx<T>]>;
+    /**
+     * How many ms to slide open?
+     * @default { duration: 200, easing: sineInOut }
+    */
+    slide?: {
+        /** In milliseconds @default 150 */
+        duration?: number;
+        /** @default sineInOut */
+        easing?: EasingFunction;
+    };
+    /**
+     * Whether you can click on a row to expand/collapse it
+     * @default true
+    */
+    click?: boolean;
+    /**
+     * Whether to show the chevron on the left?
+     * @default 'hover'
+     */
+    chevron?: 'always' | 'hover' | 'never';
+    /**
+     * Whether multiple can be open at a time?
+     * @default false
+    */
+    multiple?: boolean;
+}
+export declare class ExpandableState<T extends AnyRecord> {
+    #private;
+    snippets: {
+        content: Snippet<[item: T, ctx: RowCtx<T>]>;
+    };
+    options: {
+        slide: {
+            duration: number;
+            easing: EasingFunction;
+        };
+        click: boolean;
+        chevron: "hover" | "always" | "never";
+        multiple: boolean;
+    };
+    constructor(props: ExpandableProps<T>);
+}

package/dist/expandable/{expandable.svelte.js → expandable-state.svelte.js}

@@ -1,4 +1,4 @@
-import { TableState } from '../table/table.svelte.js';
+import { TableState } from '../table/table-state.svelte.js';
 import { sineInOut } from 'svelte/easing';
 export class ExpandableState {
     #table;

package/dist/index.d.ts

@@ -3,8 +3,8 @@ export { default as Panel } from './panel/Panel.svelte';
 export { default as Column } from './column/Column.svelte';
 export { default as Row } from './row/Row.svelte';
 export { default as Expandable } from './expandable/Expandable.svelte';
-export type { TableState, TableProps } from './table/table.svelte.js';
-export type { RowState, RowProps } from './row/row.svelte.js';
-export type { ColumnState, ColumnProps } from './column/column.svelte.js';
-export type { ExpandableState, ExpandableProps } from './expandable/expandable.svelte.js';
-export type { PanelState, PanelProps } from './panel/panel.svelte.js';
+export type { TableState, TableProps } from './table/table-state.svelte.js';
+export type { RowState, RowProps } from './row/row-state.svelte.js';
+export type { ColumnState, ColumnProps } from './column/column-state.svelte.js';
+export type { ExpandableState, ExpandableProps } from './expandable/expandable-state.svelte.js';
+export type { PanelState, PanelProps } from './panel/panel-state.svelte.js';

package/dist/panel/Panel.svelte

@@ -10,7 +10,7 @@
 
 <script lang='ts' generics='T extends Record<PropertyKey, unknown>'>
 
-	import { PanelState, type PanelProps } from './panel.svelte.js'
+	import { PanelState, type PanelProps } from './panel-state.svelte.js'
 	import { fromProps } from '../utility.svelte.js'
 
 	let {...props}: PanelProps<T> = $props()

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

@@ -1,5 +1,6 @@
+import { type PanelProps } from './panel-state.svelte.js';
 declare class __sveltets_Render<T extends Record<PropertyKey, unknown>> {
-    props(): PanelProps<T_1>;
+    props(): PanelProps<T>;
     events(): {};
     slots(): {};
     bindings(): "";

package/dist/panel/panel-state.svelte.d.ts

@@ -0,0 +1,25 @@
+import { TableState } from '../table/table-state.svelte.js';
+import { type AnyRecord } from '../utility.svelte.js';
+import type { Snippet } from 'svelte';
+export type PanelProps<T extends AnyRecord> = {
+    id: string;
+    /**
+     * A darkened backdrop?
+     * @default true
+    */
+    backdrop?: boolean;
+    table?: TableState<T>;
+    children: Snippet<[ctx: PanelCtx<T>]>;
+};
+export type PanelCtx<T extends AnyRecord> = {
+    readonly table: TableState<T>;
+    readonly data: T[];
+};
+export declare class PanelState<T extends AnyRecord> {
+    #private;
+    table: TableState<T>;
+    id: string;
+    backdrop: boolean;
+    children: Snippet<[ctx: PanelCtx<T>]>;
+    constructor(props: PanelProps<T>);
+}

package/dist/panel/{panel.svelte.js → panel-state.svelte.js}

@@ -1,4 +1,4 @@
-import { TableState } from '../table/table.svelte.js';
+import { TableState } from '../table/table-state.svelte.js';
 export class PanelState {
     #props = {};
     table;

package/dist/row/Row.svelte

@@ -10,7 +10,7 @@
 
 <script lang='ts'>
 
-	import { RowState, type RowProps } from './row.svelte.js'
+	import { RowState, type RowProps } from './row-state.svelte.js'
 	import type { AnyRecord } from '../utility.svelte.js'
 	import { fromProps } from '../utility.svelte.js'
 

package/dist/row/Row.svelte.d.ts

@@ -1,6 +1,7 @@
+import { type RowProps } from './row-state.svelte.js';
 import type { AnyRecord } from '../utility.svelte.js';
 declare class __sveltets_Render<T extends AnyRecord> {
-    props(): RowProps<T_1>;
+    props(): RowProps<T>;
     events(): {};
     slots(): {};
     bindings(): "";

package/dist/row/row-state.svelte.d.ts

@@ -0,0 +1,43 @@
+import { type RowCtx } from '../table/table-state.svelte.js';
+import type { AnyRecord } from '../utility.svelte.js';
+import type { Snippet } from 'svelte';
+type ContextOptions<T extends AnyRecord> = {
+    /**
+     * Only show when hovering the row?
+     * @default true
+    */
+    hover?: boolean;
+    /**
+     * @defualt 'max-content'
+     */
+    width?: string;
+};
+export interface RowProps<T extends AnyRecord> {
+    /**
+     * A sticky context column on the right of each table
+    */
+    context?: Snippet<[item: T, ctx: RowCtx<T>]>;
+    contextOptions?: ContextOptions<T>;
+    contextHeader?: Snippet;
+    onclick?: (event: MouseEvent, ctx: RowCtx<T>) => void;
+    oncontextmenu?: (event: MouseEvent, ctx: RowCtx<T>) => void;
+}
+export declare class RowState<T extends AnyRecord> {
+    #private;
+    snippets: {
+        context: Snippet<[item: T, ctx: RowCtx<T>]> | undefined;
+        contextHeader: Snippet<[]> | undefined;
+    };
+    events: {
+        onclick: ((event: MouseEvent, ctx: RowCtx<T>) => void) | undefined;
+        oncontextmenu: ((event: MouseEvent, ctx: RowCtx<T>) => void) | undefined;
+    };
+    options: {
+        context: {
+            hover: boolean;
+            width: string;
+        };
+    };
+    constructor(props: RowProps<T>);
+}
+export {};

package/dist/row/{row.svelte.js → row-state.svelte.js}

@@ -1,4 +1,4 @@
-import { TableState } from '../table/table.svelte.js';
+import { TableState } from '../table/table-state.svelte.js';
 export class RowState {
     #table;
     #props = {};

package/dist/table/Table.svelte

@@ -8,9 +8,6 @@
 
 -->
 
-<script module lang="ts">
-</script>
-
 <script lang="ts">
 	import { type Snippet } from 'svelte'
 	import { fly } from 'svelte/transition'
@@ -23,12 +20,12 @@
 		type RowCtx,
 		type RowSelectCtx,
 		type TableProps
-	} from './table.svelte.js'
+	} from './table-state.svelte.js'
 	import Panel from '../panel/Panel.svelte'
 	import Column from '../column/Column.svelte'
 	import { assignDescriptors, capitalize, fromProps, mounted, segmentize } from '../utility.svelte.js'
 	import { conditional } from '../conditional.svelte.js'
-	import { ColumnState, type RowColumnCtx } from '../column/column.svelte.js'
+	import { ColumnState, type RowColumnCtx } from '../column/column-state.svelte.js'
 	import Expandable from '../expandable/Expandable.svelte'
 	import { SizeTween } from '../size-tween.svelte.js'
 	import { on } from 'svelte/events'
@@ -330,7 +327,7 @@
 											positioning: false
 										} as ItemState<any>,
 										selected: false,
-										expanded: false,
+										expanded: false
 									})}
 								{:else}
 									{column.options.value?.(row)}
@@ -345,7 +342,7 @@
 {/if}
 
 <svelte:head>
-	{@html `<style>${style}</style>`}
+	{@html `<`+`style>${style}</style>`}
 </svelte:head>
 
 {#snippet chevronSnippet(rotation: number = 0)}
@@ -399,7 +396,7 @@
 			>
 				{@render renderable(column)?.(args[0], args[1])}
 				{#if isHeader && table.dataState.sortby === column.id && sortable}
-					<span class='sorting-icon'>
+					<span class="sorting-icon">
 						{@render chevronSnippet(table.dataState.sortReverse ? 0 : 180)}
 					</span>
 				{/if}
@@ -429,7 +426,7 @@
 			>
 				{@render renderable(column)?.(args[0], args[1])}
 				{#if isHeader && table.dataState.sortby === column.id && sortable}
-					<span class='sorting-icon'>
+					<span class="sorting-icon">
 						{@render chevronSnippet(table.dataState.sortReverse ? 0 : 180)}
 					</span>
 				{/if}
@@ -456,7 +453,7 @@
 			>
 				{@render renderable(column)?.(args[0], args[1])}
 				{#if isHeader && table.dataState.sortby === column.id && sortable}
-					<span class='sorting-icon'>
+					<span class="sorting-icon">
 						{@render chevronSnippet(table.dataState.sortReverse ? 0 : 180)}
 					</span>
 				{/if}
@@ -1046,7 +1043,8 @@
 		width: auto !important;
 		border-bottom: 1px solid var(--tably-border);
 	}
-	.headers > tr > .column, .headers > tr > .context-col {
+	.headers > tr > .column,
+	.headers > tr > .context-col {
 		border-bottom: 1px solid var(--tably-border);
 		border-left: 1px solid var(--tably-border-grid);
 	}
@@ -1084,7 +1082,8 @@
 			display: flex;
 			overflow: hidden;
 
-			&:not(.pad), &.pad > :global(*:first-child) {
+			&:not(.pad),
+			&.pad > :global(*:first-child) {
 				padding-left: var(--tably-padding-x);
 			}
 		}
@@ -1092,7 +1091,8 @@
 		& > *:last-child:not(.context-col) {
 			width: 100%;
 
-			&:not(.pad), &.pad > :global(*:first-child) {
+			&:not(.pad),
+			&.pad > :global(*:first-child) {
 				padding-right: var(--tably-padding-x);
 			}
 		}
@@ -1100,7 +1100,8 @@
 
 	.row > .column {
 		background-color: var(--tably-bg);
-		&:not(.pad), &.pad > :global(*:first-child)  {
+		&:not(.pad),
+		&.pad > :global(*:first-child) {
 			padding-top: var(--tably-padding-y);
 			padding-bottom: var(--tably-padding-y);
 		}

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

@@ -1,8 +1,100 @@
+import { SvelteComponent } from "svelte";
+import { type Snippet } from 'svelte';
+import { TableState, type TableProps } from './table-state.svelte.js';
+import { type RowColumnCtx } from '../column/column-state.svelte.js';
 declare class __sveltets_Render<T extends Record<PropertyKey, unknown>> {
-    props(): any;
+    props(): TableProps<T> & {
+        content?: Snippet<[context: {
+            Column: {
+                <V>(internal: unknown, props: {
+                    id: string;
+                    table?: TableState<T> | undefined;
+                    header?: string | Snippet<[ctx: import("../column/column-state.svelte.js").HeaderCtx<T>]> | undefined;
+                    row?: Snippet<[item: T, ctx: RowColumnCtx<T, V>]> | undefined;
+                    statusbar?: Snippet<[ctx: import("../column/column-state.svelte.js").StatusbarCtx<T>]> | undefined;
+                    sticky?: boolean | undefined;
+                    show?: boolean | undefined;
+                    sortby?: boolean | undefined;
+                    width?: number | undefined;
+                    fixed?: boolean | undefined;
+                    value?: ((item: T) => V) | undefined;
+                    sort?: boolean | ((a: V, b: V) => number) | undefined;
+                    resizeable?: boolean | undefined;
+                    filter?: ((value: V) => boolean) | undefined;
+                    style?: string | undefined;
+                    class?: string | undefined;
+                    onclick?: ((event: MouseEvent, rowColumnCtx: RowColumnCtx<T, V>) => void) | undefined;
+                    pad?: "row" | "header" | "both" | undefined;
+                }): {};
+                new <V>(options: import("svelte").ComponentConstructorOptions<{
+                    id: string;
+                    table?: TableState<T> | undefined;
+                    header?: string | Snippet<[ctx: import("../column/column-state.svelte.js").HeaderCtx<T>]> | undefined;
+                    row?: Snippet<[item: T, ctx: RowColumnCtx<T, V>]> | undefined;
+                    statusbar?: Snippet<[ctx: import("../column/column-state.svelte.js").StatusbarCtx<T>]> | undefined;
+                    sticky?: boolean | undefined;
+                    show?: boolean | undefined;
+                    sortby?: boolean | undefined;
+                    width?: number | undefined;
+                    fixed?: boolean | undefined;
+                    value?: ((item: T) => V) | undefined;
+                    sort?: boolean | ((a: V, b: V) => number) | undefined;
+                    resizeable?: boolean | undefined;
+                    filter?: ((value: V) => boolean) | undefined;
+                    style?: string | undefined;
+                    class?: string | undefined;
+                    onclick?: ((event: MouseEvent, rowColumnCtx: RowColumnCtx<T, V>) => void) | undefined;
+                    pad?: "row" | "header" | "both" | undefined;
+                }>): SvelteComponent<{
+                    id: string;
+                    table?: TableState<T> | undefined;
+                    header?: string | Snippet<[ctx: import("../column/column-state.svelte.js").HeaderCtx<T>]> | undefined;
+                    row?: Snippet<[item: T, ctx: RowColumnCtx<T, V>]> | undefined;
+                    statusbar?: Snippet<[ctx: import("../column/column-state.svelte.js").StatusbarCtx<T>]> | undefined;
+                    sticky?: boolean | undefined;
+                    show?: boolean | undefined;
+                    sortby?: boolean | undefined;
+                    width?: number | undefined;
+                    fixed?: boolean | undefined;
+                    value?: ((item: T) => V) | undefined;
+                    sort?: boolean | ((a: V, b: V) => number) | undefined;
+                    resizeable?: boolean | undefined;
+                    filter?: ((value: V) => boolean) | undefined;
+                    style?: string | undefined;
+                    class?: string | undefined;
+                    onclick?: ((event: MouseEvent, rowColumnCtx: RowColumnCtx<T, V>) => void) | undefined;
+                    pad?: "row" | "header" | "both" | undefined;
+                }, {}, {}> & {
+                    $$bindings?: ReturnType<() => "">;
+                } & {};
+            };
+            Panel: {
+                (internal: unknown, props: import("../index.js").PanelProps<T>): {};
+                new (options: import("svelte").ComponentConstructorOptions<import("../index.js").PanelProps<T>>): SvelteComponent<import("../index.js").PanelProps<T>, {}, {}> & {
+                    $$bindings?: ReturnType<() => "">;
+                };
+                z_$$bindings?: ReturnType<() => "">;
+            };
+            Expandable: {
+                (internal: unknown, props: import("../index.js").ExpandableProps<T>): {};
+                new (options: import("svelte").ComponentConstructorOptions<import("../index.js").ExpandableProps<T>>): SvelteComponent<import("../index.js").ExpandableProps<T>, {}, {}> & {
+                    $$bindings?: ReturnType<() => "">;
+                };
+                z_$$bindings?: ReturnType<() => "">;
+            };
+            Row: {
+                (internal: unknown, props: import("../index.js").RowProps<T>): {};
+                new (options: import("svelte").ComponentConstructorOptions<import("../index.js").RowProps<T>>): SvelteComponent<import("../index.js").RowProps<T>, {}, {}> & {
+                    $$bindings?: ReturnType<() => "">;
+                };
+                z_$$bindings?: ReturnType<() => "">;
+            };
+            readonly table: TableState<T>;
+        }]> | undefined;
+    };
     events(): {};
     slots(): {};
-    bindings(): "data" | "selected" | "panel";
+    bindings(): "selected" | "panel" | "data";
     exports(): {
         toCSV: (opts?: {
             /** Semi-colons as separator? */

package/dist/table/data.svelte.d.ts

@@ -1,4 +1,4 @@
-import type { TableProps, TableState } from './table.svelte.js';
+import type { TableProps, TableState } from './table-state.svelte.js';
 export declare class Data<T extends Record<PropertyKey, unknown>> {
     #private;
     origin: T[];

package/dist/table/table-state.svelte.d.ts

@@ -0,0 +1,107 @@
+import { type Snippet } from 'svelte';
+import { ColumnState, type RowColumnCtx } from '../column/column-state.svelte.js';
+import { PanelState } from '../panel/panel-state.svelte.js';
+import { Data } from './data.svelte.js';
+import { type AnyRecord } from '../utility.svelte.js';
+import type { ExpandableState } from '../expandable/expandable-state.svelte.js';
+import type { ItemState } from 'runic-reorder';
+import type { RowState } from '../row/row-state.svelte.js';
+export type HeaderSelectCtx<T extends AnyRecord = any> = {
+    isSelected: boolean;
+    /** The list of selected items */
+    readonly selected: T[];
+    /**
+     * See [MDN :indeterminate](https://developer.mozilla.org/en-US/docs/Web/CSS/:indeterminate)
+     */
+    readonly indeterminate: boolean;
+};
+export type RowSelectCtx<T extends AnyRecord = any> = {
+    readonly item: T;
+    readonly row: RowColumnCtx<T, unknown>;
+    data: T[];
+    isSelected: boolean;
+};
+export interface RowCtx<T extends AnyRecord> {
+    readonly rowHovered: boolean;
+    readonly index: number;
+    readonly itemState: ItemState<T> | undefined;
+    selected: boolean;
+    expanded: boolean;
+}
+type SelectOptions<T extends AnyRecord> = {
+    /**
+     * The style, in which the selection is shown
+     *
+     * NOTE: If using `edge` | 'side', "show" will always be `hover`. This is due to
+     * an inconsistency/limitation of matching the scroll between the selection div and the rows.
+     *
+     * @default 'column'
+     */
+    style?: 'column';
+    /**
+     * When to show the row-select, when not selected?
+     * @default 'hover'
+     */
+    show?: 'hover' | 'always' | 'never';
+    /**
+     * Custom snippet
+     */
+    headerSnippet?: Snippet<[context: HeaderSelectCtx]>;
+    rowSnippet?: Snippet<[context: RowSelectCtx<T>]>;
+};
+export type TableProps<T extends AnyRecord> = {
+    id?: string;
+    data: T[];
+    selected?: T[];
+    /** Current visible panel */
+    panel?: string;
+    filters?: ((item: T) => boolean)[];
+    /**
+     * **For a reorderable table, the data is mutated when reordered.**
+     *
+     * Reorderable tables cannot
+     * - Be filtered
+     * - Be sorted
+     * @default false
+    */
+    reorderable?: boolean;
+    /** Whether columns in this table can be resized */
+    resizeable?: boolean;
+    /** Whether to enable selection */
+    select?: boolean | SelectOptions<T>;
+    /** Create missing columns automatically. */
+    auto?: boolean;
+};
+export declare class TableState<T extends AnyRecord> {
+    #private;
+    id: string;
+    dataState: Data<T>;
+    data: T[];
+    columns: Record<string, ColumnState<T, any>>;
+    panels: Record<string, PanelState<T>>;
+    expandable: undefined | ExpandableState<T>;
+    row: undefined | RowState<T>;
+    /** Currently selected items */
+    get selected(): T[];
+    set selected(items: T[]);
+    /** Column positions based on column ids */
+    positions: {
+        fixed: ColumnState<T, any>[];
+        sticky: ColumnState<T, any>[];
+        scroll: ColumnState<T, any>[];
+        hidden: ColumnState<T, any>[];
+    };
+    /** Primarily externally managed options */
+    options: {
+        panel: string | undefined;
+        filters: boolean | ((item: T) => boolean)[];
+        resizeable: boolean;
+        reorderable: boolean;
+        select: boolean | SelectOptions<T>;
+        auto: boolean;
+    };
+    add(state: ColumnState<T, any> | PanelState<T>): (() => void) | undefined;
+    static getContext<T extends AnyRecord>(): TableState<T> | undefined;
+    constructor(tableProps: TableProps<T>);
+}
+export {};

package/dist/table/{table.svelte.js → table-state.svelte.js}

@@ -1,6 +1,6 @@
 import { getContext, setContext } from 'svelte';
-import { ColumnState } from '../column/column.svelte.js';
-import { PanelState } from '../panel/panel.svelte.js';
+import { ColumnState } from '../column/column-state.svelte.js';
+import { PanelState } from '../panel/panel-state.svelte.js';
 import { Data } from './data.svelte.js';
 export class TableState {
     #props = {};

package/dist/table/virtualization.svelte.d.ts

@@ -1,4 +1,4 @@
-import type { TableState } from './table.svelte.js';
+import type { TableState } from './table-state.svelte.js';
 export declare class Virtualization<T extends Record<PropertyKey, unknown>> {
     #private;
     scrollTop: number;

package/dist/utility.svelte.d.ts

@@ -1,3 +1,4 @@
+import { Snippet } from 'svelte';
 export type Simplify<T> = T extends infer V ? {
     [K in keyof V]: V[K];
 } : never;
@@ -18,4 +19,6 @@ export declare function assignDescriptors<T extends AnyRecord, B extends AnyReco
 export declare function capitalize(str: string): string;
 /** Split words when going from lower case to uppercase; `someWords-split` -> `some Word Split...` */
 export declare function segmentize(str: string): string;
+type SnippetLiteralProperties<K extends unknown[], Result extends (() => unknown)[] = []> = K extends [infer First, ...infer Rest] ? SnippetLiteralProperties<Rest, [...Result, () => First]> : Result;
+export declare function snippetLiteral<K extends unknown[]>(snippet: Snippet<K>): ((anchor: Comment, ...args: SnippetLiteralProperties<K>) => ReturnType<typeof snippet>);
 export {};

package/dist/utility.svelte.js

@@ -102,3 +102,6 @@ export function segmentize(str) {
     }
     return result.trim();
 }
+export function snippetLiteral(snippet) {
+    return snippet;
+}

package/package.json

@@ -1,6 +1,7 @@
 {
     "name": "svelte-tably",
-    "version": "1.0.0",
+    "description": "A high performant dynamic table for Svelte 5",
+    "version": "1.0.1-next.0",
     "repository": {
         "type": "git",
         "url": "git+https://github.com/Refzlund/svelte-tably.git"
@@ -10,26 +11,20 @@
         "url": "https://github.com/Refzlund/svelte-tably/issues"
     },
     "files": [
-        "dist",
-        "!dist/**/*.test.*",
-        "!dist/**/*.spec.*"
+        "dist"
     ],
-    "sideEffects": [
-        "**/*.css"
-    ],
-    "svelte": "./dist/index.js",
-    "types": "./dist/index.d.ts",
     "type": "module",
     "exports": {
         ".": {
             "types": "./dist/index.d.ts",
-            "default": "./dist/index.js"
+            "default": "./dist/index.js",
+            "svelte": "./dist/index.js"
         }
     },
     "dependencies": {
-        "runic-reorder": "^1.0.0"
+        "runic-reorder": "^1"
     },
     "peerDependencies": {
-        "svelte": "^5.0.0"
+        "svelte": "^5"
     }
 }