svelte-tably 1.0.0-next.7 → 1.0.0-next.9

package/README.md

@@ -14,12 +14,13 @@ A high performant dynamic table
 - [x] "Virtual" data (for sorting/filtering)
 - [x] Panels
 - [x] Virtual elements
-- [ ] sorting
-- [ ] select
+- [x] sorting
+- [x] select
 - [ ] filtering
 - [ ] orderable table
 - [ ] row context-menu
 - [ ] dropout section
+- [ ] csv export
 
 ### Usage Notes
 
@@ -33,9 +34,10 @@ A high performant dynamic table
     ])
 
     let activePanel = $state('columns') as string | undefined
+	let selected = $state([]) as typeof data
 </script>
 
-<Table {data} panel={activePanel}>
+<Table {data} panel={activePanel} select bind:selected>
     {#snippet content({ Column, Panel, state, data })}
         <Column id='name' sticky>
             {#snippet header()}

package/dist/Column.svelte

@@ -8,24 +8,92 @@
 
 -->
 
-<script module lang='ts'>
-	
-	export interface Column<T = unknown, V = unknown> {
-		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: {
-			readonly value: V
-			readonly isHovered: boolean
-			readonly index: number
-		}]>
+<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
+		*/
+		sort?: 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
+		*/
+		sorting?: 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
@@ -35,53 +103,45 @@
 		}
 		/** More options */
 		options: {
-			value?: (item: T) => V
-			sorting?: unknown extends V ? (a: T, b: T) => number : (a: V, b: V) => number
+			value?: C['value']
+			sorting?: boolean | ((a: any, b: any) => number)
 			resizeable: boolean
 		}
 	}
-
 </script>
 
-<script lang='ts' generics='T extends Record<PropertyKey, any>, V = unknown'>
-
+<script lang="ts">
 	import { onDestroy, type Snippet } from 'svelte'
-	import { getTableState } from './Table.svelte'
-
-	interface Props {
-		header?: Column<T, V>['header']
-		row: Column<T, V>['row']
-		statusbar?: Column<T, V>['statusbar']
+	import { getTableState, type TableState } from './Table.svelte'
 
-		id: string
+	type T = $$Generic<Record<PropertyKey, any>>
+	type V = $$Generic
 
-		// options
-		sticky?: boolean
-		sort?: boolean
-		show?: boolean
-		width?: number
-		value?: Column<T, V>['options']['value']
-		sorting?: Column<T, V>['options']['sorting']
-		/** @default true */
-		resizeable?: boolean
-	}
+	let {
+		header,
+		row,
+		statusbar,
+		id,
 
-	let { 
-		header, row, statusbar, id,
-		
 		sticky = false,
-		sort = false, 
+		fixed = false,
+		sort = false,
 		show = true,
 		width,
-		
+
 		resizeable = true,
-		value, sorting
-	}: Props = $props()
+		value,
+		sorting,
+
+		table
+	}: ColumnProps<T, V> = $props()
 
-	const column: Column<T, V> = $state({
+	const column: ColumnState<T, V> = $state({
+		id,
 		header,
 		row,
 		statusbar,
+		fixed,
 		defaults: {
 			sticky,
 			sort,
@@ -95,11 +155,10 @@
 		}
 	})
 
-	const table = getTableState()
-	table.addColumn(id, column as Column)
+	table ??= getTableState()
+	table.addColumn(id, column as ColumnState)
 
 	onDestroy(() => {
 		table.removeColumn(id)
 	})
-
-</script>
+</script>

package/dist/Column.svelte.d.ts

@@ -1,21 +1,78 @@
-export interface Column<T = unknown, V = unknown> {
+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: {
-            readonly value: V;
-            readonly isHovered: boolean;
-            readonly index: number;
-        }
-    ]>;
+    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
+    */
+    sort?: 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
+    */
+    sorting?: 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;
@@ -25,37 +82,25 @@ export interface Column<T = unknown, V = unknown> {
     };
     /** More options */
     options: {
-        value?: (item: T) => V;
-        sorting?: unknown extends V ? (a: T, b: T) => number : (a: V, b: V) => number;
+        value?: C['value'];
+        sorting?: boolean | ((a: any, b: any) => number);
         resizeable: boolean;
     };
 }
 import { type Snippet } from 'svelte';
-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;
-        width?: number;
-        value?: Column<T_1, V_1>["options"]["value"];
-        sorting?: Column<T_1, V_1>["options"]["sorting"];
-        /** @default true */
-        resizeable?: boolean;
-    };
+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 = 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']>> & {
+    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 = unknown>(internal: unknown, props: ReturnType<__sveltets_Render<T, V>['props']> & {}): 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']>;
 }
 /**
@@ -66,5 +111,5 @@ interface $$IsomorphicComponent {
  * <Component />
  */
 declare const Column: $$IsomorphicComponent;
-type Column<T extends Record<PropertyKey, any>, V = unknown> = InstanceType<typeof Column<T, V>>;
+type Column<T extends Record<PropertyKey, any>, V> = InstanceType<typeof Column<T, V>>;
 export default Column;