svelte-tably 1.0.0-next.0 → 1.0.0-next.10

package/README.md

@@ -1,6 +1,8 @@
 # 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!
+Work in progress. I needed a break from my primary project, so here's a little side-project exploring the amazing capabilities of Svelte 5 with a Dynamic table!
+
+Example on [Svelte 5 Playground](https://svelte.dev/playground/a16d71c97445455e80a55b77ec1cf915?version=5)
 
 A high performant dynamic table
 
@@ -9,11 +11,83 @@ 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
-- [ ] sorting
-- [ ] select
+- [x] Virtual elements
+- [x] sorting
+- [x] select
 - [ ] filtering
 - [ ] orderable table
 - [ ] row context-menu
-- [ ] dropout section
+- [ ] dropout section
+- [ ] csv export
+
+### Usage Notes
+
+```html
+<script lang='ts'>
+    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' },
+    ])
+
+    let activePanel = $state('columns') as string | undefined
+	let selected = $state([]) as typeof data
+</script>
+
+<Table {data} panel={activePanel} select bind:selected>
+    {#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 ... backdrop={false}>
+            ...
+        </Panel>
+    {/snippet}
+</Table>
+```
+
+#### 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-statusbar | background-color for the statusbar | `hsl(0, 0%, 98%)` |
+| --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`
+
+

package/dist/Column.svelte

@@ -0,0 +1,164 @@
+<!-- @component
+
+	This is a description, \
+	on how to use this.
+
+@example
+<Component />
+
+-->
+
+<script module lang="ts">
+	export type RowCtx<V> = {
+		readonly value: V
+		readonly isHovered: boolean
+		readonly index: number
+		selected: boolean
+	}
+
+	export interface ColumnProps<T, V> {
+		header?: Snippet<
+			[
+				/**
+				 * Is true when displaying in the header,
+				 * so additional content can be shown if desired,
+				 * so the header snippet can be re-used.
+				 */
+				header?: boolean
+			]
+		>
+		row: Snippet<[item: T, row: RowCtx<V>]>
+		statusbar?: Snippet
+
+		id: string
+
+		// options
+		/**
+		 * Is this column sticky by default?
+		 * @default false
+		*/
+		sticky?: boolean
+		/** 
+		 * Fixed is like sticky, but in its own category — meant to not be moved/hidden ex. select-boxes
+		 * @default false
+		*/
+		fixed?: boolean
+		/**
+		 * Is this column sorted by default?
+		 * @default false
+		*/
+		sortby?: boolean
+		/**
+		 * Is this column visible by default?
+		 * @default true
+		 */
+		show?: boolean
+		/**
+		 * The width of the column in pixels by default
+		 * @default 150
+		 */
+		width?: number
+		/**
+		 * 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
+
+		/**
+		 * Optional: Provide the table it is a part of
+		*/
+		table?: TableState
+	}
+
+	export interface ColumnState<T = unknown, V = unknown, C extends ColumnProps<T, V> = ColumnProps<T, V>> {
+		id: C['id']
+		header?: C['header']
+		row: C['row']
+		statusbar?: C['statusbar']
+
+		fixed?: boolean
+
+		/** Default options for initial table */
+		defaults: {
+			sticky?: boolean
+			sort?: boolean
+			show?: boolean
+			width?: number
+		}
+		/** More options */
+		options: {
+			value?: C['value']
+			sorting?: boolean | ((a: any, b: any) => number)
+			resizeable: boolean
+		}
+	}
+</script>
+
+<script lang="ts">
+	import { onDestroy, type Snippet } from 'svelte'
+	import { getTableState, type TableState } from './Table.svelte'
+
+	type T = $$Generic<Record<PropertyKey, any>>
+	type V = $$Generic
+
+	let {
+		header,
+		row,
+		statusbar,
+		id,
+
+		sticky = false,
+		fixed = false,
+		sortby = false,
+		show = true,
+		width,
+
+		resizeable = true,
+		value,
+		sort,
+
+		table
+	}: ColumnProps<T, V> = $props()
+
+	const column: ColumnState<T, V> = $state({
+		id,
+		header,
+		row,
+		statusbar,
+		fixed,
+		defaults: {
+			sticky,
+			sort: sortby,
+			show,
+			width
+		},
+		options: {
+			value,
+			sorting: sort,
+			resizeable
+		}
+	})
+
+	table ??= getTableState()
+	table.addColumn(id, column as ColumnState)
+
+	onDestroy(() => {
+		table.removeColumn(id)
+	})
+</script>

package/dist/Column.svelte.d.ts

@@ -0,0 +1,115 @@
+export type RowCtx<V> = {
+    readonly value: V;
+    readonly isHovered: boolean;
+    readonly index: number;
+    selected: boolean;
+};
+export interface ColumnProps<T, V> {
+    header?: Snippet<[
+        /**
+         * Is true when displaying in the header,
+         * so additional content can be shown if desired,
+         * so the header snippet can be re-used.
+         */
+        header?: boolean
+    ]>;
+    row: Snippet<[item: T, row: RowCtx<V>]>;
+    statusbar?: Snippet;
+    id: string;
+    /**
+     * Is this column sticky by default?
+     * @default false
+    */
+    sticky?: boolean;
+    /**
+     * Fixed is like sticky, but in its own category — meant to not be moved/hidden ex. select-boxes
+     * @default false
+    */
+    fixed?: boolean;
+    /**
+     * Is this column sorted by default?
+     * @default false
+    */
+    sortby?: boolean;
+    /**
+     * Is this column visible by default?
+     * @default true
+     */
+    show?: boolean;
+    /**
+     * The width of the column in pixels by default
+     * @default 150
+     */
+    width?: number;
+    /**
+     * 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;
+    /**
+     * Optional: Provide the table it is a part of
+    */
+    table?: TableState;
+}
+export interface ColumnState<T = unknown, V = unknown, C extends ColumnProps<T, V> = ColumnProps<T, V>> {
+    id: C['id'];
+    header?: C['header'];
+    row: C['row'];
+    statusbar?: C['statusbar'];
+    fixed?: boolean;
+    /** Default options for initial table */
+    defaults: {
+        sticky?: boolean;
+        sort?: boolean;
+        show?: boolean;
+        width?: number;
+    };
+    /** More options */
+    options: {
+        value?: C['value'];
+        sorting?: boolean | ((a: any, b: any) => number);
+        resizeable: boolean;
+    };
+}
+import { type Snippet } from 'svelte';
+import { type TableState } from './Table.svelte';
+declare class __sveltets_Render<T extends Record<PropertyKey, any>, V> {
+    props(): ColumnProps<T, V>;
+    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 → Panel.svelte}

@@ -10,10 +10,10 @@
 
 <script module lang='ts'>
 	
-	export interface Panel {
+	export interface Panel<T extends Record<PropertyKey, unknown> = Record<PropertyKey, unknown>> {
 		/** A darkened backdrop? */
 		backdrop: boolean
-		content: Snippet<[table: TableState]>
+		content: Snippet<[context: { readonly table: TableState<T>, readonly data: T[] }]>
 	}
 
 	export class PanelTween {
@@ -29,45 +29,46 @@
 			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
 			})
 		}
 	}
 
 </script>
 
-<script lang='ts'>
+<script lang='ts' generics='T extends Record<PropertyKey, unknown>'>
 
 	import { onDestroy, type Snippet } from 'svelte'
-	import { getTableState, type TableState } from './Table.svelte'
+	import Table, { getTableState, type TableState } from './Table.svelte'
 	import { Tween } from 'svelte/motion'
 	import { sineInOut } from 'svelte/easing'
 
 	interface Props {
+		id: string
+
 		/** A darkened backdrop? */
 		backdrop?: boolean
-		children: Snippet<[table: TableState]>
+		children: Snippet<[context: { readonly table: TableState<T>, readonly data: T[] }]>
 	}
 
 	let {
 		backdrop = true,
 		children,
-		...rest
+		id
 	}: Props = $props()
-	const key = (rest as unknown as { __key: string }).__key
-	
-	const panel: Panel = $state({
+
+	const panel: Panel<T> = $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/Table.svelte.d.ts → Panel.svelte.d.ts}

@@ -1,27 +1,31 @@
-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 interface Panel<T extends Record<PropertyKey, unknown> = Record<PropertyKey, unknown>> {
+    /** A darkened backdrop? */
+    backdrop: boolean;
+    content: Snippet<[context: {
+        readonly table: TableState<T>;
+        readonly data: T[];
+    }]>;
+}
+export declare class PanelTween {
+    #private;
+    current: number;
+    transitioning: boolean;
+    /** bind:clientWidth */
+    width: number;
+    set target(value: number);
+    constructor(cb: () => string | undefined, added?: number);
 }
-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 { type TableState } from './Table.svelte';
 declare class __sveltets_Render<T extends Record<PropertyKey, unknown>> {
     props(): {
-        children?: Snippet;
-        panel?: string;
-        data?: T[] | undefined;
-        id?: string;
+        id: string;
+        /** A darkened backdrop? */
+        backdrop?: boolean;
+        children: Snippet<[context: {
+            readonly table: TableState<T>;
+            readonly data: T[];
+        }]>;
     };
     events(): {};
     slots(): {};
@@ -42,6 +46,6 @@ interface $$IsomorphicComponent {
  * @example
  * <Component />
  */
-declare const Table: $$IsomorphicComponent;
-type Table<T extends Record<PropertyKey, unknown>> = InstanceType<typeof Table<T>>;
-export default Table;
+declare const Panel: $$IsomorphicComponent;
+type Panel<T extends Record<PropertyKey, unknown>> = InstanceType<typeof Panel<T>>;
+export default Panel;