svelte-tably 1.0.0-next.12 → 1.0.0-next.13

package/README.md

@@ -19,8 +19,8 @@ A high performant, feature rich, dynamic table
 - [x] filtering
 - [x] reorderable table
 - [ ] row context-menu
-- [ ] dropout section
-- [ ] csv export
+- [x] Expandable rows
+- [x] to CSV
 
 ### Usage Notes
 
@@ -34,7 +34,7 @@ A high performant, feature rich, dynamic table
     ])
 
     let activePanel = $state('columns') as string | undefined
-	let selected = $state([]) as typeof data
+    let selected = $state([]) as typeof data
 </script>
 
 <Table {data} panel={activePanel} select bind:selected>

package/dist/expandable/Expandable.svelte

@@ -0,0 +1,24 @@
+<!-- @component
+
+	This is a description, \
+	on how to use this.
+
+@example
+<Component />
+
+-->
+
+<script lang='ts'>
+
+	import { ExpandableState, type ExpandableProps } from './expandable.svelte.js'
+	import type { AnyRecord } from '../utility.svelte.js'
+	import { fromProps } from '../utility.svelte.js'
+
+	type T = $$Generic<AnyRecord>
+
+	let { ...restProps }: ExpandableProps<T> = $props()
+	
+	const properties = fromProps(restProps)
+	new ExpandableState<T>(properties)
+
+</script>

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

@@ -0,0 +1,25 @@
+import type { AnyRecord } from '../utility.svelte.js';
+declare class __sveltets_Render<T extends AnyRecord> {
+    props(): ExpandableProps<T_1>;
+    events(): {};
+    slots(): {};
+    bindings(): "";
+    exports(): {};
+}
+interface $$IsomorphicComponent {
+    new <T extends AnyRecord>(options: import('svelte').ComponentConstructorOptions<ReturnType<__sveltets_Render<T>['props']>>): import('svelte').SvelteComponent<ReturnType<__sveltets_Render<T>['props']>, ReturnType<__sveltets_Render<T>['events']>, ReturnType<__sveltets_Render<T>['slots']>> & {
+        $$bindings?: ReturnType<__sveltets_Render<T>['bindings']>;
+    } & ReturnType<__sveltets_Render<T>['exports']>;
+    <T extends AnyRecord>(internal: unknown, props: ReturnType<__sveltets_Render<T>['props']> & {}): ReturnType<__sveltets_Render<T>['exports']>;
+    z_$$bindings?: ReturnType<__sveltets_Render<any>['bindings']>;
+}
+/**
+ * This is a description, \
+ * on how to use this.
+ *
+ * @example
+ * <Component />
+ */
+declare const Expandable: $$IsomorphicComponent;
+type Expandable<T extends AnyRecord> = InstanceType<typeof Expandable<T>>;
+export default Expandable;

package/dist/expandable/expandable.svelte.js

@@ -0,0 +1,20 @@
+import { TableState } from '../table/table.svelte.js';
+export class ExpandableState {
+    #table;
+    #props = $state({});
+    snippets = $derived({
+        content: this.#props.content
+    });
+    options = $derived({
+        slide: this.#props.slide ?? 200
+    });
+    constructor(props) {
+        this.#props = props;
+        this.#table = TableState.getContext();
+        if (!this.#table) {
+            throw new Error('svelte-tably: Expandable must be associated with a Table');
+        }
+        this.#table.expandable = this;
+        $effect(() => () => this.#table.expandable === this && (this.#table.expandable = undefined));
+    }
+}

package/dist/size-tween.svelte.d.ts

@@ -0,0 +1,14 @@
+interface SizeOptions {
+    min?: number;
+    duration?: number;
+}
+export declare class SizeTween {
+    #private;
+    current: number;
+    transitioning: boolean;
+    /** bind:offsetWidth bind:offsetHeight */
+    size: number;
+    set target(value: number);
+    constructor(cb: () => boolean | undefined, opts?: SizeOptions);
+}
+export {};

package/dist/size-tween.svelte.js

@@ -0,0 +1,30 @@
+import { tick, untrack } from 'svelte';
+import { sineInOut } from 'svelte/easing';
+import { Tween } from 'svelte/motion';
+export class SizeTween {
+    #tweenOptions = { duration: 300, easing: sineInOut };
+    #tween = new Tween(0, this.#tweenOptions);
+    current = $derived(this.#tween.current);
+    transitioning = $state(false);
+    /** bind:offsetWidth bind:offsetHeight */
+    size = $state(0);
+    set target(value) {
+        this.transitioning = true;
+        this.#tween.set(value, this.#tweenOptions).then(() => this.transitioning = false);
+    }
+    constructor(cb, opts = {}) {
+        if ('duration' in opts) {
+            this.#tweenOptions.duration = opts.duration;
+        }
+        untrack(() => {
+            if (cb()) {
+                requestAnimationFrame(() => {
+                    this.#tween.set(Math.max(this.size, opts.min ?? 0), { duration: 0 });
+                });
+            }
+        });
+        $effect.pre(() => {
+            this.target = cb() ? Math.max(this.size, opts.min ?? 0) : 0;
+        });
+    }
+}

package/dist/table/Table.svelte

@@ -24,6 +24,8 @@
 	import { fromProps, mounted } from '../utility.svelte.js'
 	import { conditional } from '../conditional.svelte.js'
 	import { ColumnState } from '../column/column.svelte.js'
+	import Expandable from '../expandable/Expandable.svelte'
+	import { SizeTween } from '../size-tween.svelte.js'
 
 	type T = $$Generic<Record<PropertyKey, unknown>>
 
@@ -35,7 +37,8 @@
 			new <V>(...args: ConstructorParams<typeof Column<T, V>>): ConstructorReturnType<typeof Column<T, V>>
 			<V>(...args: Parameters<typeof Column<T, V>>): ReturnType<typeof Column<T, V>>
 		}
-		Panel: typeof Panel
+		Panel: typeof Panel<T>
+		Expandable: typeof Expandable<T>
 		readonly table: TableState<T>
 		readonly data: T[]
 	}
@@ -70,7 +73,7 @@
 	
 	const virtualization = new Virtualization(table)
 	
-	const panelTween = new PanelTween(() => properties.panel, 24)
+	const panelTween = new SizeTween(() => !!properties.panel)
 
 	let hoveredRow: T | null = $state(null)
 
@@ -111,6 +114,7 @@
 			.map((column, i, arr) => {
 				sum += getWidth(arr[i - 1]?.id, i === 0 ? 0 : undefined)
 				return `
+		#${table.id} .column.sticky[data-column='${column.id}'],
 		[data-svelte-tably='${table.id}'] .column.sticky[data-column='${column.id}'] {
 			left: ${sum}px;
 		}
@@ -147,6 +151,9 @@
 		return { destroy: () => observer.disconnect() }
 	}
 
+	let tbody = $state({
+		width: 0
+	})
 	async function onscroll() {
 		const target = virtualization.viewport.element!
 		if (target.scrollTop !== virtualization.scrollTop) {
@@ -161,10 +168,100 @@
 		elements.headers.scrollLeft = target.scrollLeft
 		elements.statusbar.scrollLeft = target.scrollLeft
 	}
+
+
+	// * --- CSV --- *
+	let csv = $state(false) as false | { selected?: boolean }
+	let csvElement = $state() as undefined | HTMLTableElement
+	interface CSVOptions {
+		/** Semi-colons as separator? */
+		semicolon?: boolean
+		/** Only selected rows */
+		selected?: boolean
+	}
+	export async function toCSV(opts: CSVOptions = {}) {
+		csv = { selected: !!opts.selected }
+		let resolve: (value: HTMLTableElement) => void
+		const promise = new Promise<HTMLTableElement>(r => resolve = r)
+
+		const clean = $effect.root(() => {
+			$effect(() => {
+				if(csvElement) {
+					resolve(csvElement)
+				}
+			})
+		})
+
+		let table = await promise
+		clean()
+
+		const separator = opts.semicolon ? ";" : ","
+		const rows = Array.from(table.rows)
+		const csvRows = []
+
+		for (const row of rows) {
+			const cells = Array.from(row.cells)
+			const csvCells = cells.map(cell => {
+				let text = cell.textContent?.trim() || ''
+
+				// Escape double quotes and wrap in quotes if needed
+				if(text.includes('"')) {
+					text = text.replace(/"/g, '""')
+				}
+				if(text.includes(separator) || text.includes('"') || text.includes('\n')) {
+					text = `"${text}"`
+				}
+				
+				return text
+			})
+			csvRows.push(csvCells.join(separator))
+		}
+
+		csv = false
+		return csvRows.join("\n")
+	}
+	// * --- CSV --- *
+
+
+	// * --- Expandable --- *
+	let expandedRow = $state() as undefined | T
+
 </script>
 
 <!---------------------------------------------------->
 
+{#if csv !== false}
+	{@const renderedColumns = columns.filter(v => v.id !== '__fixed')}
+	<table bind:this={csvElement} hidden>
+		<thead>
+			<tr>
+				{#each renderedColumns as column}
+					<th>{@render column.snippets.title()}</th>
+				{/each}
+			</tr>
+		</thead>
+		<tbody>
+			{#each data.current as row, i}
+				{#if (csv.selected && table.selected.includes(row)) || !csv.selected}
+					<tr>
+						{#each renderedColumns as column}
+							<td>
+								{@render column.snippets.row?.(row, {
+									index: i,
+									value: column.options.value?.(row),
+									isHovered: false,
+									itemState: { index: i, dragging: false, positioning: false } as ItemState<any>,
+									selected: false
+								})}
+							</td>
+						{/each}
+					</tr>
+				{/if}
+			{/each}
+		</tbody>
+	</table>
+{/if}
+
 <svelte:head>
 	{@html `<style>${style}</style>`}
 </svelte:head>
@@ -264,23 +361,31 @@
 {/snippet}
 
 {#snippet rowSnippet(item: T, itemState?: ItemState<T>)}
-	{@const props = table.options.href ? { href: table.options.href(item) } : {}}
 	{@const i = itemState?.index ?? 0}
 	{@const index = (itemState?.index ?? 0)}
-	<svelte:element
-		this={table.options.href ? 'a' : 'tr'}
+	<tr
 		aria-rowindex={index + 1}
 		data-svelte-tably={table.id}
 		style:opacity={itemState?.positioning ? 0 : 1}
-		class="row"
+		class='row'
 		class:hover={hoveredRow === item}
 		class:dragging={itemState?.dragging}
 		class:selected={table.selected?.includes(item)}
 		class:first={i === 0}
 		class:last={i === virtualization.area.length - 1}
-		{...props}
+		{...(table.options.href ? { href: table.options.href(item) } : {})}
+		{...(itemState?.dragging ? { 'data-svelte-tably': table.id } : {})}
 		onpointerenter={() => (hoveredRow = item)}
 		onpointerleave={() => (hoveredRow = null)}
+		onclick={(e) => {
+			if (table.expandable) {
+				let target = e.target as HTMLElement
+				if(['INPUT', 'TEXTAREA', 'BUTTON', 'A'].includes(target.tagName)) {
+					return
+				}
+				expandedRow = expandedRow === item ? undefined : item
+			}
+		}}
 	>
 		{@render columnsSnippet(
 			(column) => column.snippets.row,
@@ -312,20 +417,41 @@
 				]
 			}
 		)}
-	</svelte:element>
+	</tr>
+
+	{@const expandableTween = new SizeTween(() => table.expandable && expandedRow === item, { min: 1, duration: 150 })}
+	{#if expandableTween.current > 0}
+		<tr class='expandable' style='height: {expandableTween.current}px'>
+			<td
+				colspan={columns.length}
+				style='height: {expandableTween.current}px'
+			>
+				<div
+					bind:offsetHeight={expandableTween.size}
+					style='width: {tbody.width - 2}px'
+				>
+					{@render table.expandable!.snippets.content?.(item, {
+						close() {
+							expandedRow = undefined
+						}
+					})}
+				</div>
+			</td>
+		</tr>
+	{/if}
 {/snippet}
 
 <table
 	id={table.id}
-	class="table svelte-tably"
-	style="--t: {virtualization.virtualTop}px; --b: {virtualization.virtualBottom}px;"
+	class='table svelte-tably'
+	style='--t: {virtualization.virtualTop}px; --b: {virtualization.virtualBottom}px;'
 	aria-rowcount={data.current.length}
 >
-	<thead class="headers" bind:this={elements.headers}>
+	<thead class='headers' bind:this={elements.headers}>
 		{@render columnsSnippet(
 			(column) => column.snippets.header,
 			() => [{ 
-				get header() { return true } ,
+				get header() { return true },
 				get data() { return data.current }
 			}],
 			true
@@ -333,11 +459,12 @@
 	</thead>
 
 	<tbody
-		class="content"
+		class='content'
 		use:reorderArea={{ axis: 'y' }}
 		bind:this={virtualization.viewport.element}
 		onscrollcapture={onscroll}
 		bind:clientHeight={virtualization.viewport.height}
+		bind:clientWidth={tbody.width}
 	>
 		{#if table.options.reorderable}
 			{@render reorderArea({
@@ -358,7 +485,7 @@
 		{/if}
 	</tbody>
 
-	<tfoot class="statusbar" bind:this={elements.statusbar}>
+	<tfoot class='statusbar' bind:this={elements.statusbar}>
 		<tr>
 			{@render columnsSnippet(
 				(column) => column.snippets.statusbar,
@@ -370,14 +497,13 @@
 	</tfoot>
 
 	<caption
-		class="panel"
-		style="width: {panelTween.current}px;"
-		style:overflow={panelTween.transitioning ? 'hidden' : 'auto'}
+		class='panel'
+		style='width: {panelTween.current}px;'
 	>
 		{#if properties.panel && properties.panel in table.panels}
 			<div
-				class="panel-content"
-				bind:clientWidth={panelTween.width}
+				class='panel-content'
+				bind:offsetWidth={panelTween.size}
 				in:fly={{ x: 100, easing: sineInOut, duration: 300 }}
 				out:fly={{ x: 100, duration: 200, easing: sineInOut }}
 			>
@@ -392,18 +518,18 @@
 			</div>
 		{/if}
 	</caption>
-	<caption class="backdrop" aria-hidden={properties.panel && table.panels[properties.panel]?.backdrop ? false : true}>
-		<button aria-label="Panel backdrop" class="btn-backdrop" tabindex="-1" onclick={() => (properties.panel = undefined)}
+	<caption class='backdrop' aria-hidden={properties.panel && table.panels[properties.panel]?.backdrop ? false : true}>
+		<button aria-label='Panel backdrop' class='btn-backdrop' tabindex='-1' onclick={() => (properties.panel = undefined)}
 		></button>
 	</caption>
 </table>
 
 {#snippet headerSelected(ctx: HeaderSelectCtx<T>)}
-	<input type="checkbox" indeterminate={ctx.indeterminate} bind:checked={ctx.isSelected} />
+	<input type='checkbox' indeterminate={ctx.indeterminate} bind:checked={ctx.isSelected} />
 {/snippet}
 
 {#snippet rowSelected(ctx: RowSelectCtx<T>)}
-	<input type="checkbox" bind:checked={ctx.isSelected} />
+	<input type='checkbox' bind:checked={ctx.isSelected} />
 {/snippet}
 
 {#if table.options.select || table.options.reorderable}
@@ -416,16 +542,16 @@
 	} = typeof select === 'boolean' ? {} : select}
 	{#if show !== 'never' || reorderable}
 		<Column
-			id="__fixed"
+			id='__fixed'
 			{table}
 			fixed
 			width={Math.max(56, (select && show !== 'never' ? 34 : 0) + (reorderable ? 34 : 0))}
 			resizeable={false}
 		>
 			{#snippet header()}
-				<div class="__fixed">
+				<div class='__fixed'>
 					{#if reorderable}
-						<span style="width: 16px; display: flex; align-items: center;"></span>
+						<span style='width: 16px; display: flex; align-items: center;'></span>
 					{/if}
 					{#if select}
 						{@render headerSnippet({
@@ -453,9 +579,9 @@
 				</div>
 			{/snippet}
 			{#snippet row(item, row)}
-				<div class="__fixed">
+				<div class='__fixed'>
 					{#if reorderable}
-						<span style="width: 16px; display: flex; align-items: center;" use:row.itemState.handle>
+						<span style='width: 16px; display: flex; align-items: center;' use:row.itemState.handle>
 							{#if (row.isHovered && !row.itemState?.area.isTarget) || row.itemState.dragging}
 								{@render dragSnippet()}
 							{/if}
@@ -489,6 +615,7 @@
 {@render content?.({
 	Column,
 	Panel,
+	Expandable,
 	get table() {
 		return table
 	},
@@ -510,6 +637,21 @@
 		overflow: visible;
 	}
 
+	.expandable {
+		position: relative;
+		
+		& > td {
+			position: sticky;
+			left: 1px;
+			> div {
+				position: absolute;
+				overflow: auto;
+				top: 0;
+				left: 0;
+			}
+		}
+	}
+
 	caption {
 		all: unset;
 	}
@@ -572,7 +714,7 @@
 		height: var(--b);
 	}
 
-	a.row {
+	.row:global(:is(a)) {
 		color: inherit;
 		text-decoration: inherit;
 	}
@@ -728,18 +870,19 @@
 		position: relative;
 		grid-area: panel;
 		height: 100%;
-
+		overflow: hidden;
 		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;
 			top: 0;
 			right: 0;
+			bottom: 0;
 			width: min-content;
 			overflow: auto;
+			scrollbar-width: thin;
 			padding: var(--tably-padding-y, 0.5rem) 0;
 		}
 	}

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

@@ -3,7 +3,14 @@ declare class __sveltets_Render<T extends Record<PropertyKey, unknown>> {
     events(): {};
     slots(): {};
     bindings(): "selected" | "panel" | "data";
-    exports(): {};
+    exports(): {
+        toCSV: (opts?: {
+            /** Semi-colons as separator? */
+            semicolon?: boolean;
+            /** Only selected rows */
+            selected?: boolean;
+        }) => Promise<string>;
+    };
 }
 interface $$IsomorphicComponent {
     new <T extends Record<PropertyKey, unknown>>(options: import('svelte').ComponentConstructorOptions<ReturnType<__sveltets_Render<T>['props']>>): import('svelte').SvelteComponent<ReturnType<__sveltets_Render<T>['props']>, ReturnType<__sveltets_Render<T>['events']>, ReturnType<__sveltets_Render<T>['slots']>> & {

package/dist/table/table.svelte.js

@@ -9,6 +9,7 @@ export class TableState {
     data;
     columns = $state({});
     panels = $state({});
+    expandable = $state();
     /** Currently selected items */
     get selected() { return this.#props.selected ??= []; }
     set selected(items) { this.#props.selected = items; }

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "svelte-tably",
-	"version": "1.0.0-next.12",
+	"version": "1.0.0-next.13",
 	"repository": "github:refzlund/svelte-tably",
 	"homepage": "https://github.com/Refzlund/svelte-tably",
 	"bugs": {
@@ -13,7 +13,7 @@
 		"@sveltejs/vite-plugin-svelte": "^5.0.0",
 		"floating-runes": "^1.0.0",
 		"publint": "^0.2.0",
-		"runic-reorder": "next",
+		"runic-reorder": "^1.0.0",
 		"svelte": "^5.0.0",
 		"svelte-check": "^4.0.0",
 		"typescript": "^5.0.0",