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

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/column/column.svelte.js

@@ -40,6 +40,9 @@ export class ColumnState {
         filter: this.#props.filter,
         value: this.#props.value,
         resizeable: this.#props.resizeable ?? true,
+        style: this.#props.style,
+        class: this.#props.class,
+        onclick: this.#props.onclick
     });
     toggleVisiblity() {
         const index = this.table.positions.hidden.indexOf(this);

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,27 @@
+import { TableState } from '../table/table.svelte.js';
+import { sineInOut } from 'svelte/easing';
+export class ExpandableState {
+    #table;
+    #props = {};
+    snippets = $derived({
+        content: this.#props.content
+    });
+    options = $derived({
+        slide: {
+            duration: this.#props.slide?.duration ?? 150,
+            easing: this.#props.slide?.easing ?? sineInOut
+        },
+        click: this.#props.click ?? true,
+        chevron: this.#props.chevron ?? 'hover',
+        multiple: this.#props.multiple ?? false
+    });
+    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,16 @@
+import type { EasingFunction } from 'svelte/transition';
+interface SizeOptions {
+    min?: number;
+    duration?: number;
+    easing?: EasingFunction;
+}
+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,33 @@
+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;
+        }
+        if ('easing' in opts) {
+            this.#tweenOptions.easing = opts.easing;
+        }
+        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

@@ -18,12 +18,15 @@
 	import { sineInOut } from 'svelte/easing'
 	import reorder, { type ItemState } from 'runic-reorder'
 	import { Virtualization } from './virtualization.svelte.js'
-	import { TableState, type HeaderSelectCtx, type RowSelectCtx, type TableProps } from './table.svelte.js'
+	import { TableState, type HeaderSelectCtx, type RowCtx, type RowSelectCtx, type TableProps } from './table.svelte.js'
 	import Panel, { PanelTween } from '../panel/Panel.svelte'
 	import Column from '../column/Column.svelte'
-	import { fromProps, mounted } from '../utility.svelte.js'
+	import { assignDescriptors, fromProps, mounted } from '../utility.svelte.js'
 	import { conditional } from '../conditional.svelte.js'
-	import { ColumnState } from '../column/column.svelte.js'
+	import { ColumnState, type RowColumnCtx } from '../column/column.svelte.js'
+	import Expandable from '../expandable/Expandable.svelte'
+	import { SizeTween } from '../size-tween.svelte.js'
+	import { on } from 'svelte/events'
 
 	type T = $$Generic<Record<PropertyKey, unknown>>
 
@@ -35,7 +38,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 +74,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 +115,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;
 		}
@@ -118,7 +123,13 @@
 			})
 			.join('')
 
-		return templateColumns + stickyLeft
+		const columnStyling = columns.map(column => !column.options.style ? '' : `
+		#${table.id} .column[data-column='${column.id}'] {
+			${column.options.style}
+		}
+		`).join('')
+
+		return templateColumns + stickyLeft + columnStyling
 	})
 
 	function observeColumnWidth(node: HTMLDivElement, isHeader = false) {
@@ -147,6 +158,9 @@
 		return { destroy: () => observer.disconnect() }
 	}
 
+	let tbody = $state({
+		width: 0
+	})
 	async function onscroll() {
 		const target = virtualization.viewport.element!
 		if (target.scrollTop !== virtualization.scrollTop) {
@@ -161,27 +175,126 @@
 		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 --- *
+
+
+	let expandedRow = $state([]) as T[]
+
+	function addRowColumnEvents(
+		node: HTMLTableColElement, 
+		opts: ['header' | 'row' | 'statusbar', ColumnState, () => RowColumnCtx<T, any>]
+	) {
+		const [where, column, value] = opts
+		if(where !== 'row') return
+		if(column.options.onclick) {
+			$effect(() => on(node, 'click', e => column.options.onclick!(e, value())))
+		}
+	}
+
 </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,
+									expanded: false
+								})}
+							</td>
+						{/each}
+					</tr>
+				{/if}
+			{/each}
+		</tbody>
+	</table>
+{/if}
+
 <svelte:head>
 	{@html `<style>${style}</style>`}
 </svelte:head>
 
-{#snippet chevronSnippet(reversed: boolean)}
+{#snippet chevronSnippet(rotation: number = 0)}
 	<svg
-		class="sorting-icon"
-		class:reversed
 		xmlns="http://www.w3.org/2000/svg"
 		width="16"
 		height="16"
 		viewBox="0 0 16 16"
-		style="margin: auto; margin-right: var(--tably-padding-x, 1rem);"
+		style="transform: rotate({rotation}deg)"
 	>
 		<path
 			fill="currentColor"
-			d="M3.2 5.74a.75.75 0 0 1 1.06-.04L8 9.227L11.74 5.7a.75.75 0 1 1 1.02 1.1l-4.25 4a.75.75 0 0 1-1.02 0l-4.25-4a.75.75 0 0 1-.04-1.06"
+			d="M3.2 10.26a.75.75 0 0 0 1.06.04L8 6.773l3.74 3.527a.75.75 0 1 0 1.02-1.1l-4.25-4a.75.75 0 0 0-1.02 0l-4.25 4a.75.75 0 0 0-.04 1.06"
 		></path>
 	</svg>
 {/snippet}
@@ -198,15 +311,20 @@
 {#snippet columnsSnippet(
 	renderable: (column: ColumnState) => Snippet<[arg0?: any, arg1?: any]> | undefined,
 	arg: null | ((column: ColumnState) => any[]) = null,
-	isHeader = false
+	where: 'header' | 'row' | 'statusbar'
 )}
+	{@const isHeader = where === 'header'}
 	{#each fixed as column, i (column)}
 		{#if !hidden.includes(column)}
 			{@const args = arg ? arg(column) : []}
 			{@const sortable = isHeader && column.options.sort && !table.options.reorderable}
 			<svelte:element
 				this={isHeader ? 'th' : 'td'}
-				class="column sticky fixed"
+				class={column.options.class ?? ''}
+				class:column={true}
+				class:sticky={true}
+				class:fixed={true}
+				use:addRowColumnEvents={[where, column, () => args[1]]}
 				data-column={column.id}
 				class:header={isHeader}
 				class:sortable
@@ -214,7 +332,9 @@
 			>
 				{@render renderable(column)?.(args[0], args[1])}
 				{#if isHeader && data.sortby === column.id && sortable}
-					{@render chevronSnippet(data.sortReverse)}
+					<span class='sorting-icon'>
+						{@render chevronSnippet(data.sortReverse ? 0 : 180)}
+					</span>
 				{/if}
 			</svelte:element>
 		{/if}
@@ -225,7 +345,10 @@
 			{@const sortable = isHeader && column.options.sort && !table.options.reorderable}
 			<svelte:element
 				this={isHeader ? 'th' : 'td'}
-				class="column sticky"
+				class={column.options.class ?? ''}
+				class:column={true}
+				class:sticky={true}
+				use:addRowColumnEvents={[where, column, () => args[1]]}
 				use:observeColumnWidth={isHeader}
 				data-column={column.id}
 				class:header={isHeader}
@@ -236,7 +359,9 @@
 			>
 				{@render renderable(column)?.(args[0], args[1])}
 				{#if isHeader && data.sortby === column.id && sortable}
-					{@render chevronSnippet(data.sortReverse)}
+					<span class='sorting-icon'>
+						{@render chevronSnippet(data.sortReverse ? 0 : 180)}
+					</span>
 				{/if}
 			</svelte:element>
 		{/if}
@@ -247,8 +372,10 @@
 			{@const sortable = isHeader && column!.options.sort && !table.options.reorderable}
 			<svelte:element
 				this={isHeader ? 'th' : 'td'}
-				class="column"
+				class={column.options.class ?? ''}
+				class:column={true}
 				data-column={column.id}
+				use:addRowColumnEvents={[where, column, () => args[1]]}
 				use:observeColumnWidth={isHeader}
 				class:resizeable={isHeader && column.options.resizeable && table.options.resizeable}
 				class:sortable
@@ -256,7 +383,9 @@
 			>
 				{@render renderable(column)?.(args[0], args[1])}
 				{#if isHeader && data.sortby === column.id && sortable}
-					{@render chevronSnippet(data.sortReverse)}
+					<span class='sorting-icon'>
+						{@render chevronSnippet(data.sortReverse ? 0 : 180)}
+					</span>
 				{/if}
 			</svelte:element>
 		{/if}
@@ -264,80 +393,137 @@
 {/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'}
+	{@const index = itemState?.index ?? 0}
+	{@const toggleExpand = (value?: boolean) => {
+		let indexOf = expandedRow.indexOf(item)
+		if(value !== undefined) {
+			value = indexOf === -1
+		}
+		
+		if(!value) {
+			expandedRow.splice(indexOf, 1)
+			return
+		}
+		if(table.expandable?.options.multiple === true) {
+			expandedRow.push(item)
+		}
+		else {
+			expandedRow[0] = item
+		}
+	}}
+
+	{@const ctx: RowCtx<T> = {
+		get index() {
+			return index
+		},
+		get isHovered() {
+			return hoveredRow === item
+		},
+		get selected() {
+			return table.selected?.includes(item)
+		},
+		set selected(value) {
+			value ?
+				table.selected!.push(item)
+			:	table.selected!.splice(table.selected!.indexOf(item), 1)
+		},
+		get itemState() {
+			return itemState
+		},
+		get expanded() {
+			return expandedRow.includes(item)
+		},
+		set expanded(value) {
+			toggleExpand(value)
+		}
+	}}
+
+	<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}
+		class:first={index === 0}
+		class:last={index === virtualization.area.length - 1}
+		{...(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?.options.click === true) {
+				let target = e.target as HTMLElement
+				if(['INPUT', 'TEXTAREA', 'BUTTON', 'A'].includes(target.tagName)) {
+					return
+				}
+				toggleExpand()
+			}
+		}}
 	>
 		{@render columnsSnippet(
 			(column) => column.snippets.row,
 			(column) => {
 				return [
 					item,
-					{
-						get index() {
-							return index
-						},
+					assignDescriptors({
 						get value() {
 							return column.options.value ? column.options.value(item) : undefined
-						},
-						get isHovered() {
-							return hoveredRow === item
-						},
-						get selected() {
-							return table.selected?.includes(item)
-						},
-						set selected(value) {
-							value ?
-								table.selected!.push(item)
-							:	table.selected!.splice(table.selected!.indexOf(item), 1)
-						},
-						get itemState() {
-							return itemState
 						}
-					}
+					}, ctx)
 				]
-			}
+			},
+			'row'
 		)}
-	</svelte:element>
+	</tr>
+
+	{@const expandableTween = new SizeTween(
+		() => table.expandable && expandedRow.includes(item), 
+		{ min: 1, duration: table.expandable?.options.slide.duration, easing: table.expandable?.options.slide.easing })}
+	{#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 - 3}px'
+				>
+					{@render table.expandable!.snippets.content?.(item, ctx)}
+				</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}>
-		{@render columnsSnippet(
-			(column) => column.snippets.header,
-			() => [{ 
-				get header() { return true } ,
-				get data() { return data.current }
-			}],
-			true
-		)}
-	</thead>
+	{#if columns.some(v => v.snippets.header)}
+		<thead class='headers' bind:this={elements.headers}>
+			{@render columnsSnippet(
+				(column) => column.snippets.header,
+				() => [{ 
+					get header() { return true },
+					get data() { return data.current }
+				}],
+				'header'
+			)}
+		</thead>
+	{/if}
 
 	<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({
@@ -352,32 +538,34 @@
 				}
 			})}
 		{:else}
-		{#each virtualization.area as item, i (item)}
-			{@render rowSnippet(item, { index: i + virtualization.topIndex } as ItemState)}
-		{/each}
+			{#each virtualization.area as item, i (item)}
+				{@render rowSnippet(item, { index: i + virtualization.topIndex } as ItemState)}
+			{/each}
 		{/if}
 	</tbody>
 
-	<tfoot class="statusbar" bind:this={elements.statusbar}>
-		<tr>
-			{@render columnsSnippet(
-				(column) => column.snippets.statusbar,
-				() => [{
-					get data() { return data.current }
-				}]
-			)}
-		</tr>
-	</tfoot>
+	{#if columns.some(v => v.snippets.statusbar)}
+		<tfoot class='statusbar' bind:this={elements.statusbar}>
+			<tr>
+				{@render columnsSnippet(
+					(column) => column.snippets.statusbar,
+					() => [{
+						get data() { return data.current }
+					}],
+					'statusbar'
+				)}
+			</tr>
+		</tfoot>
+	{/if}
 
 	<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,40 +580,45 @@
 			</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}
+{#if table.options.select || table.options.reorderable || table.expandable}
 	{@const { select, reorderable } = table.options}
+	{@const expandable = table.expandable}
 	{@const {
 		show = 'hover',
 		style = 'column',
 		rowSnippet = rowSelected,
 		headerSnippet = headerSelected
 	} = typeof select === 'boolean' ? {} : select}
-	{#if show !== 'never' || reorderable}
+	{#if show !== 'never' || reorderable || expandable?.options.chevron !== 'never'}
 		<Column
-			id="__fixed"
+			id='__fixed'
 			{table}
 			fixed
-			width={Math.max(56, (select && show !== 'never' ? 34 : 0) + (reorderable ? 34 : 0))}
+			width={Math.max(56, 0
+				+ (select && show !== 'never' ? 34 : 0) 
+				+ (reorderable ? 34 : 0)
+				+ (expandable?.options.chevron !== 'never' ? 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,15 +646,15 @@
 				</div>
 			{/snippet}
 			{#snippet row(item, row)}
-				<div class="__fixed">
-					{#if reorderable}
-						<span style="width: 16px; display: flex; align-items: center;" use:row.itemState.handle>
-							{#if (row.isHovered && !row.itemState?.area.isTarget) || row.itemState.dragging}
+				<div class='__fixed'>
+					{#if reorderable && row.itemState}
+						<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}
 						</span>
 					{/if}
-					{#if select && (row.selected || show === 'always' || (row.isHovered && show === 'hover'))}
+					{#if select && (row.selected || show === 'always' || (row.isHovered && show === 'hover') || row.expanded)}
 						{@render rowSnippet({
 							get isSelected() {
 								return row.selected
@@ -480,6 +673,11 @@
 							}
 						})}
 					{/if}
+					{#if expandable && (row.expanded || expandable.options.chevron === 'always' || (row.isHovered && expandable.options.chevron === 'hover'))}
+						<button class='expand-row' onclick={() => row.expanded = !row.expanded}>
+							{@render chevronSnippet(row.expanded ? 180 : 90)}
+						</button>
+					{/if}
 				</div>
 			{/snippet}
 		</Column>
@@ -489,6 +687,7 @@
 {@render content?.({
 	Column,
 	Panel,
+	Expandable,
 	get table() {
 		return table
 	},
@@ -510,6 +709,39 @@
 		overflow: visible;
 	}
 
+	.expandable {
+		position: relative;
+		
+		& > td {
+			position: sticky;
+			left: 1px;
+			> div {
+				position: absolute;
+				overflow: auto;
+				top: -1.5px;
+				left: 0;
+			}
+		}
+	}
+
+	.expand-row {
+		display: flex;
+		justify-content: center;
+		align-items: center;
+		padding: 0;
+		outline: none;
+		border: none;
+		cursor: pointer;
+		background-color: transparent;
+		color: inherit;
+		width: 22px;
+		height: 100%;
+
+		> svg {
+			transition: transform 0.15s ease;
+		}
+	}
+
 	caption {
 		all: unset;
 	}
@@ -527,10 +759,13 @@
 	}
 
 	.sorting-icon {
-		transition: transform 0.15s ease;
-		transform: rotateZ(0deg);
-		&.reversed {
-			transform: rotateZ(-180deg);
+		align-items: center;
+		justify-items: end;
+		margin: 0;
+		margin-left: auto;
+		margin-right: var(--tably-padding-x, 1rem);
+		> svg {
+			transition: transform 0.15s ease;
 		}
 	}
 
@@ -572,7 +807,7 @@
 		height: var(--b);
 	}
 
-	a.row {
+	.row:global(:is(a)) {
 		color: inherit;
 		text-decoration: inherit;
 	}
@@ -728,18 +963,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/dist/utility.svelte.d.ts

@@ -13,4 +13,5 @@ export declare function getters<T extends AnyRecord>(obj: T): { readonly [K in k
 type SetterRecord = Record<PropertyKey, [() => any, (v: any) => void]>;
 export declare function withSetters<T extends SetterRecord>(obj: T): T;
 export declare function fromProps<T extends AnyRecord, B extends SetterRecord>(props: T, boundProps?: B): Simplify<{ [K in keyof B]: ReturnType<B[K][0]>; } & { readonly [K in keyof T]: T[K]; }>;
+export declare function assignDescriptors<T extends AnyRecord, B extends AnyRecord>(target: T, source: B): T & B;
 export {};

package/dist/utility.svelte.js

@@ -66,3 +66,15 @@ export function fromProps(props, boundProps) {
         ...withSetters(boundProps ?? {})
     });
 }
+export function assignDescriptors(target, source) {
+    for (const key of Object.keys(source)) {
+        const descriptor = Object.getOwnPropertyDescriptor(source, key);
+        if (descriptor) {
+            Object.defineProperty(target, key, descriptor);
+        }
+        else {
+            target[key] = source[key]; // Copy regular values if descriptor is missing
+        }
+    }
+    return target;
+}

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "svelte-tably",
-	"version": "1.0.0-next.12",
+	"version": "1.0.0-next.14",
 	"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",