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

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.js

@@ -1,12 +1,19 @@
 import { TableState } from '../table/table.svelte.js';
+import { sineInOut } from 'svelte/easing';
 export class ExpandableState {
     #table;
-    #props = $state({});
+    #props = {};
     snippets = $derived({
         content: this.#props.content
     });
     options = $derived({
-        slide: this.#props.slide ?? 200
+        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;

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

@@ -1,6 +1,8 @@
+import type { EasingFunction } from 'svelte/transition';
 interface SizeOptions {
     min?: number;
     duration?: number;
+    easing?: EasingFunction;
 }
 export declare class SizeTween {
     #private;

package/dist/size-tween.svelte.js

@@ -16,6 +16,9 @@ export class SizeTween {
         if ('duration' in opts) {
             this.#tweenOptions.duration = opts.duration;
         }
+        if ('easing' in opts) {
+            this.#tweenOptions.easing = opts.easing;
+        }
         untrack(() => {
             if (cb()) {
                 requestAnimationFrame(() => {

package/dist/table/Table.svelte

@@ -13,19 +13,20 @@
 </script>
 
 <script lang="ts">
-	import { untrack, type Snippet } from 'svelte'
+	import { tick, untrack, type Snippet } from 'svelte'
 	import { fly } from 'svelte/transition'
 	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>>
 
@@ -122,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) {
@@ -223,8 +230,39 @@
 	// * --- CSV --- *
 
 
-	// * --- Expandable --- *
-	let expandedRow = $state() as undefined | T
+	let expandedRow = $state([]) as T[]
+	let expandTick = false
+	function toggleExpand(item: T, value?: boolean) {
+		if(expandTick) return
+		expandTick = true
+		requestAnimationFrame(() => expandTick = false)
+
+		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
+		}
+	}
+
+	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>
 
@@ -251,7 +289,8 @@
 									value: column.options.value?.(row),
 									isHovered: false,
 									itemState: { index: i, dragging: false, positioning: false } as ItemState<any>,
-									selected: false
+									selected: false,
+									expanded: false
 								})}
 							</td>
 						{/each}
@@ -266,19 +305,17 @@
 	{@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}
@@ -295,15 +332,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
@@ -311,7 +353,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}
@@ -322,7 +366,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}
@@ -333,7 +380,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}
@@ -344,8 +393,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
@@ -353,7 +404,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}
@@ -361,8 +414,34 @@
 {/snippet}
 
 {#snippet rowSnippet(item: T, itemState?: ItemState<T>)}
-	{@const i = itemState?.index ?? 0}
-	{@const index = (itemState?.index ?? 0)}
+	{@const index = itemState?.index ?? 0}
+
+	{@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(item, value)
+		}
+	}}
+
 	<tr
 		aria-rowindex={index + 1}
 		data-svelte-tably={table.id}
@@ -371,19 +450,19 @@
 		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}
+		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) {
+			if (table.expandable?.options.click === true) {
 				let target = e.target as HTMLElement
 				if(['INPUT', 'TEXTAREA', 'BUTTON', 'A'].includes(target.tagName)) {
 					return
 				}
-				expandedRow = expandedRow === item ? undefined : item
+				ctx.expanded = !ctx.expanded
 			}
 		}}
 	>
@@ -392,34 +471,20 @@
 			(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'
 		)}
 	</tr>
 
-	{@const expandableTween = new SizeTween(() => table.expandable && expandedRow === item, { min: 1, duration: 150 })}
+	{@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
@@ -428,13 +493,9 @@
 			>
 				<div
 					bind:offsetHeight={expandableTween.size}
-					style='width: {tbody.width - 2}px'
+					style='width: {tbody.width - 3}px'
 				>
-					{@render table.expandable!.snippets.content?.(item, {
-						close() {
-							expandedRow = undefined
-						}
-					})}
+					{@render table.expandable!.snippets.content?.(item, ctx)}
 				</div>
 			</td>
 		</tr>
@@ -447,16 +508,18 @@
 	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'
@@ -479,22 +542,25 @@
 				}
 			})}
 		{: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'
@@ -532,20 +598,25 @@
 	<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'
 			{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()}
@@ -580,14 +651,14 @@
 			{/snippet}
 			{#snippet row(item, row)}
 				<div class='__fixed'>
-					{#if reorderable}
+					{#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}
+							{#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
@@ -606,6 +677,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>
@@ -646,12 +722,30 @@
 			> div {
 				position: absolute;
 				overflow: auto;
-				top: 0;
+				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;
 	}
@@ -669,10 +763,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;
 		}
 	}
 

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.13",
+	"version": "1.0.0-next.15",
 	"repository": "github:refzlund/svelte-tably",
 	"homepage": "https://github.com/Refzlund/svelte-tably",
 	"bugs": {