svelte-tably 1.0.0-next.8 → 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
+- [x] sorting
 - [x] select
 - [ ] filtering
 - [ ] orderable table
 - [ ] row context-menu
 - [ ] dropout section
+- [ ] csv export
 
 ### Usage Notes
 

package/dist/Column.svelte

@@ -8,8 +8,7 @@
 
 -->
 
-<script module lang='ts'>
-	
+<script module lang="ts">
 	export type RowCtx<V> = {
 		readonly value: V
 		readonly isHovered: boolean
@@ -17,20 +16,84 @@
 		selected: boolean
 	}
 
-	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
-		]>
+	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
@@ -40,58 +103,41 @@
 		}
 		/** 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, type TableState } from './Table.svelte'
 
-	interface Props {
-		header?: Column<T, V>['header']
-		row: Column<T, V>['row']
-		statusbar?: Column<T, V>['statusbar']
+	type T = $$Generic<Record<PropertyKey, any>>
+	type V = $$Generic
 
-		id: string
-
-		// options
-		sticky?: boolean
-		/** Fixed is like sticky, but in its own category — meant to not be moved/hidden ex. select-boxes */
-		fixed?: boolean
-		sort?: boolean
-		show?: boolean
-		width?: number
-		value?: Column<T, V>['options']['value']
-		sorting?: Column<T, V>['options']['sorting']
-		/** @default true */
-		resizeable?: boolean
-
-		/** Optional: Provide the table it is a part of */
-		table?: TableState
-	}
+	let {
+		header,
+		row,
+		statusbar,
+		id,
 
-	let { 
-		header, row, statusbar, id,
-		
 		sticky = false,
 		fixed = false,
-		sort = false, 
+		sort = false,
 		show = true,
 		width,
-		
+
 		resizeable = true,
-		value, sorting,
+		value,
+		sorting,
 
 		table
-	}: Props = $props()
+	}: ColumnProps<T, V> = $props()
 
-	const column: Column<T, V> = $state({
+	const column: ColumnState<T, V> = $state({
+		id,
 		header,
 		row,
 		statusbar,
@@ -110,10 +156,9 @@
 	})
 
 	table ??= getTableState()
-	table.addColumn(id, column as Column)
+	table.addColumn(id, column as ColumnState)
 
 	onDestroy(() => {
 		table.removeColumn(id)
 	})
-
-</script>
+</script>

package/dist/Column.svelte.d.ts

@@ -4,17 +4,74 @@ export type RowCtx<V> = {
     readonly index: number;
     selected: boolean;
 };
-export interface Column<T = unknown, V = unknown> {
+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
+    */
+    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: {
@@ -25,42 +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';
 import { type TableState } from './Table.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;
-        /** Fixed is like sticky, but in its own category — meant to not be moved/hidden ex. select-boxes */
-        fixed?: 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;
-        /** Optional: Provide the table it is a part of */
-        table?: TableState;
-    };
+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']>;
 }
 /**
@@ -71,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;