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

package/README.md

@@ -18,9 +18,10 @@ A high performant, feature rich, dynamic table
 - [x] select
 - [x] filtering
 - [x] reorderable table
-- [ ] row context-menu
+- [x] Row context menus
 - [x] Expandable rows
 - [x] to CSV
+- [x] Auto: Table based on data, sortable
 
 ### Usage Notes
 
@@ -37,9 +38,12 @@ A high performant, feature rich, dynamic table
     let selected = $state([]) as typeof data
 </script>
 
+<!-- Auto: Generate Columns for you -->
+<Table auto {data} resizeable={false} filters=[...] />
+
 <Table {data} panel={activePanel} select bind:selected>
-    {#snippet content({ Column, Panel, state, data })}
-        <Column id='name' sticky>
+    {#snippet content({ Column, Panel, Expandable, Row, state, data })}
+        <Column id='name' sticky sort>
             {#snippet header()}
                 Name
             {/snippet}
@@ -52,9 +56,10 @@ A high performant, feature rich, dynamic table
                 {data.length}
             {/snippet}
         </Column>
-        <Column ...>
-           ...
-        </Column>
+		
+		<!-- Simplified -->
+        <Column id='age' header='Age' value={r => r.age} sort={(a,b) => a - b} />
+
         <!-- If you want to sort/filter a virtual value, that does not exist in the data -->
         <Column id='virtual' value={row => row.age > 18}>
             ...
@@ -64,6 +69,21 @@ A high performant, feature rich, dynamic table
             ...
         </Column>
 
+		<Expandable click={false}>
+			{#snippet content(item, ctx)}
+				...
+			{/snippet}
+		</Expandable>
+
+		<Row onclick={...} oncontextmenu={...}>
+			{#snippet contextHeader()}
+				...
+			{/snippet}
+			{#snippet context(item, ctx)}
+				...
+			{/snippet}
+		</Row>
+
         <Panel id='columns'>
             <!-- Anything you might like -->
         </Panel>
@@ -80,14 +100,15 @@ For quick styling
 
 | CSS Variable | Description | Default |
 | - | - | - |
-| --tably-bg | background-color | `hsl(0, 0%, 100%)` |
-| --tably-color | color | `hsl(0, 0%, 0%)` |
-| --tably-border | border | `hsl(0, 0%, 90%)` |
+| --tably-bg | Background color | `hsl(0, 0%, 100%)` |
+| --tably-color | Text color | `hsl(0, 0%, 0%)` |
+| --tably-border | Border for sticky columns and header | `hsl(0, 0%, 90%)` |
+| --tably-border-grid | Border for the table-grid | `hsl(0, 0%, 98%)` |
 | --tably-statusbar | background-color for the statusbar | `hsl(0, 0%, 98%)` |
 | --tably-padding-y | Padding above/below each column | `.5rem` |
 | --tably-padding-x | Padding left of each column | `1rem` |
 | --tably-radius | Table radius | `.25rem` |
 
-Advanced styling can be done via `:global .svelte-tably`
-
-
+> [!NOTE]  
+> Advanced styling can be done via `:global(.svelte-tably)`  
+> `table > thead > tr > th, table > tbody > tr > td, table > tfoot > tr > td`

package/dist/column/Column.svelte

@@ -10,8 +10,9 @@
 
 <script lang="ts">
 
-	import { fromProps } from '../utility.svelte.js'
-	import { ColumnState, type ColumnProps } from './column.svelte.js'
+	import { fromProps, type AnyRecord } from '../utility.svelte.js'
+	import type { Snippet } from 'svelte'
+	import { ColumnState, type ColumnProps, type HeaderCtx, type ColumnSnippets } from './column.svelte.js'
 
 	type T = $$Generic<Record<PropertyKey, any>>
 	type V = $$Generic
@@ -21,4 +22,20 @@
 	
 	new ColumnState<T, V>(properties)
 	
-</script>
+</script>
+
+<script module lang='ts'>
+	
+	declare const defaultHeader: <T extends AnyRecord>(anchor: unknown, title: () => string, ctx: HeaderCtx<T>) => ReturnType<Snippet>
+	
+	export function getDefaultHeader<T extends AnyRecord,V>(title: string) {
+		return (
+			(anchor: unknown, ctx: HeaderCtx<T>) => defaultHeader<T>(anchor, () => title, ctx)
+		) as Exclude<ColumnSnippets<T, V>['header'], string>
+	}
+
+</script>
+
+{#snippet defaultHeader(title: string, ctx: HeaderCtx<T>)}
+	{title}
+{/snippet}

package/dist/column/Column.svelte.d.ts

@@ -1,3 +1,6 @@
+export declare function getDefaultHeader<T extends AnyRecord, V>(title: string): Exclude<ColumnSnippets<T, V>["header"], string>;
+import { type AnyRecord } from '../utility.svelte.js';
+import { type ColumnSnippets } from './column.svelte.js';
 declare class __sveltets_Render<T extends Record<PropertyKey, any>, V> {
     props(): ColumnProps<T_1, V_1>;
     events(): {};

package/dist/column/column.svelte.js

@@ -1,6 +1,7 @@
 import {} from 'svelte';
 import { TableState } from '../table/table.svelte.js';
 import { assign, pick } from '../utility.svelte.js';
+import { getDefaultHeader } from './Column.svelte';
 export class ColumnState {
     #props = {};
     id = $derived(this.#props.id);
@@ -9,11 +10,11 @@ export class ColumnState {
     */
     table;
     snippets = $derived({
-        header: this.#props.header,
+        header: typeof this.#props.header === 'string' ? getDefaultHeader(this.#props.header) : this.#props.header,
         /** Title is the header-snippet, with header-ctx: `{ header: false }` */
         title: (...args) => {
             const getData = () => this.table.data.current;
-            return this.#props.header?.(...[args[0], () => ({
+            return this.snippets.header?.(...[args[0], () => ({
                     get header() { return false; },
                     get data() {
                         return getData();

package/dist/panel/Panel.svelte

@@ -8,30 +8,6 @@
 
 -->
 
-<script module lang='ts'>
-
-	export class PanelTween {
-		#tween = new Tween(0, { duration: 300, easing: sineInOut })
-		current = $derived(this.#tween.current)
-		transitioning = $state(false)
-
-		/** bind:clientWidth */
-		width = $state(0)
-
-		set target(value: number) {
-			this.transitioning = true
-			this.#tween.set(value).then(() => this.transitioning = false)
-		}
-
-		constructor(cb: () => string | undefined, added = 0) {
-			$effect.pre(() => {
-				this.target = cb() ? this.width + added : 0
-			})
-		}
-	}
-
-</script>
-
 <script lang='ts' generics='T extends Record<PropertyKey, unknown>'>
 
 	import { Tween } from 'svelte/motion'

package/dist/panel/Panel.svelte.d.ts

@@ -1,12 +1,3 @@
-export declare class PanelTween {
-    #private;
-    current: number;
-    transitioning: boolean;
-    /** bind:clientWidth */
-    width: number;
-    set target(value: number);
-    constructor(cb: () => string | undefined, added?: number);
-}
 declare class __sveltets_Render<T extends Record<PropertyKey, unknown>> {
     props(): PanelProps<T_1>;
     events(): {};

package/dist/row/Row.svelte

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

package/dist/row/Row.svelte.d.ts

@@ -0,0 +1,25 @@
+import type { AnyRecord } from '../utility.svelte.js';
+declare class __sveltets_Render<T extends AnyRecord> {
+    props(): RowProps<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 Row: $$IsomorphicComponent;
+type Row<T extends AnyRecord> = InstanceType<typeof Row<T>>;
+export default Row;

package/dist/row/row.svelte.js

@@ -0,0 +1,28 @@
+import { TableState } from '../table/table.svelte.js';
+export class RowState {
+    #table;
+    #props = {};
+    snippets = $derived({
+        context: this.#props.context,
+        contextHeader: this.#props.contextHeader
+    });
+    events = $derived({
+        onclick: this.#props.onclick,
+        oncontextmenu: this.#props.oncontextmenu
+    });
+    options = $derived({
+        context: {
+            hover: this.#props.contextOptions?.hover ?? true,
+            width: this.#props.contextOptions?.width ?? 'max-content'
+        }
+    });
+    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.row = this;
+        $effect(() => () => this.#table.row === this && (this.#table.row = undefined));
+    }
+}

package/dist/table/Table.svelte

@@ -13,20 +13,22 @@
 </script>
 
 <script lang="ts">
-	import { tick, untrack, type Snippet } from 'svelte'
+	import { 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 RowCtx, type RowSelectCtx, type TableProps } from './table.svelte.js'
-	import Panel, { PanelTween } from '../panel/Panel.svelte'
+	import Panel from '../panel/Panel.svelte'
 	import Column from '../column/Column.svelte'
-	import { assignDescriptors, fromProps, mounted } from '../utility.svelte.js'
+	import { assignDescriptors, capitalize, fromProps, mounted, segmentize } from '../utility.svelte.js'
 	import { conditional } from '../conditional.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'
+	import Row from '../row/Row.svelte'
+	
 
 	type T = $$Generic<Record<PropertyKey, unknown>>
 
@@ -40,6 +42,7 @@
 		}
 		Panel: typeof Panel<T>
 		Expandable: typeof Expandable<T>
+		Row: typeof Row<T>
 		readonly table: TableState<T>
 		readonly data: T[]
 	}
@@ -52,7 +55,7 @@
 		panel: _panel = $bindable(),
 		data: _data = $bindable([]),
 		...restProps
-	}: TableProps<T> & { content: ContentSnippet } = $props()
+	}: TableProps<T> & { content?: ContentSnippet } = $props()
 
 	const properties = fromProps(restProps, {
 		selected: [() => _selected, v => _selected = v],
@@ -95,18 +98,28 @@
 	/** grid-template-columns for widths */
 	const style = $derived.by(() => {
 		if (!mount.isMounted) return ''
-		const templateColumns = `
-	#${table.id} > .headers,
-	tr.row[data-svelte-tably='${table.id}'],
-	#${table.id} > tfoot > tr,
-	#${table.id} > .content > .virtual.bottom {
-		grid-template-columns: ${columns
+
+		const context = table.row?.snippets.context ? table.row?.options.context.width : '' 
+
+		const templateColumns = columns
 			.map((column, i, arr) => {
 				const width = getWidth(column.id)
 				if (i === arr.length - 1) return `minmax(${width}px, 1fr)`
 				return `${width}px`
 			})
-			.join(' ')};
+			.join(' ') + context
+
+		const theadTempla3teColumns = `
+	#${table.id} > thead > tr,
+	#${table.id} > tfoot > tr {
+		grid-template-columns: ${templateColumns};
+	}
+		`
+
+		const tbodyTemplateColumns = `
+	[data-area-class='${table.id}'] tr.row,
+	#${table.id} > tbody::after {
+		grid-template-columns: ${templateColumns};
 	}
 		`
 
@@ -124,12 +137,12 @@
 			.join('')
 
 		const columnStyling = columns.map(column => !column.options.style ? '' : `
-		#${table.id} .column[data-column='${column.id}'] {
+		[data-area-class='${table.id}'] .column[data-column='${column.id}'] {
 			${column.options.style}
 		}
 		`).join('')
 
-		return templateColumns + stickyLeft + columnStyling
+		return theadTempla3teColumns + tbodyTemplateColumns + stickyLeft + columnStyling
 	})
 
 	function observeColumnWidth(node: HTMLDivElement, isHeader = false) {
@@ -264,6 +277,18 @@
 		}
 	}
 
+	function addRowEvents(
+		node: HTMLTableRowElement,
+		ctx: RowCtx<T>
+	) {
+		if(table.row?.events.onclick) {
+			$effect(() => on(node, 'click', e => table.row?.events.onclick!(e, ctx)))
+		}
+		if(table.row?.events.oncontextmenu) {
+			$effect(() => on(node, 'contextmenu', e => table.row?.events.oncontextmenu!(e, ctx)))
+		}
+	}
+
 </script>
 
 <!---------------------------------------------------->
@@ -284,14 +309,18 @@
 					<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
-								})}
+								{#if column.snippets.row}
+									{@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
+									})}
+								{:else}
+									{column.options.value?.(row)}
+								{/if}
 							</td>
 						{/each}
 					</tr>
@@ -321,7 +350,7 @@
 {/snippet}
 
 {#snippet dragSnippet()}
-	<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16">
+	<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16" style='opacity: .3'>
 		<path
 			fill="currentColor"
 			d="M5.5 5a1.5 1.5 0 1 0 0-3a1.5 1.5 0 0 0 0 3m0 4.5a1.5 1.5 0 1 0 0-3a1.5 1.5 0 0 0 0 3m1.5 3a1.5 1.5 0 1 1-3 0a1.5 1.5 0 0 1 3 0M10.5 5a1.5 1.5 0 1 0 0-3a1.5 1.5 0 0 0 0 3M12 8a1.5 1.5 0 1 1-3 0a1.5 1.5 0 0 1 3 0m-1.5 6a1.5 1.5 0 1 0 0-3a1.5 1.5 0 0 0 0 3"
@@ -413,6 +442,10 @@
 	{/each}
 {/snippet}
 
+{#snippet defaultRow(item: T, ctx: RowColumnCtx<T, any>)}
+	{ctx.value}
+{/snippet}
+
 {#snippet rowSnippet(item: T, itemState?: ItemState<T>)}
 	{@const index = itemState?.index ?? 0}
 
@@ -444,10 +477,8 @@
 
 	<tr
 		aria-rowindex={index + 1}
-		data-svelte-tably={table.id}
 		style:opacity={itemState?.positioning ? 0 : 1}
 		class='row'
-		class:hover={hoveredRow === item}
 		class:dragging={itemState?.dragging}
 		class:selected={table.selected?.includes(item)}
 		class:first={index === 0}
@@ -456,6 +487,7 @@
 		{...(itemState?.dragging ? { 'data-svelte-tably': table.id } : {})}
 		onpointerenter={() => (hoveredRow = item)}
 		onpointerleave={() => (hoveredRow = null)}
+		use:addRowEvents={ctx}
 		onclick={(e) => {
 			if (table.expandable?.options.click === true) {
 				let target = e.target as HTMLElement
@@ -467,7 +499,7 @@
 		}}
 	>
 		{@render columnsSnippet(
-			(column) => column.snippets.row,
+			(column) => column.snippets.row ?? defaultRow,
 			(column) => {
 				return [
 					item,
@@ -480,6 +512,17 @@
 			},
 			'row'
 		)}
+		{#if table.row?.snippets.context}
+			{#if table.row?.snippets.contextHeader || !table.row?.options.context.hover || hoveredRow === item}
+				<td
+					class='context-col'
+					class:hover={!table.row?.snippets.contextHeader && table.row?.options.context.hover}
+					class:hidden={table.row?.options.context.hover && table.row?.snippets.contextHeader && hoveredRow !== item}
+				>
+					{@render table.row?.snippets.context?.(item, ctx)}
+				</td>
+			{/if}
+		{/if}
 	</tr>
 
 	{@const expandableTween = new SizeTween(
@@ -510,20 +553,30 @@
 >
 	{#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'
-			)}
+			<tr style='min-width: {tbody.width}px'>
+				{@render columnsSnippet(
+					(column) => column.snippets.header,
+					() => [{ 
+						get header() { return true },
+						get data() { return data.current }
+					}],
+					'header'
+				)}
+				{#if table.row?.snippets.contextHeader}
+					<th
+						class='context-col'
+					>
+						{@render table.row?.snippets.contextHeader()}
+					</th>
+				{/if}
+			</tr>
+			<tr style='width:400px;background:none;pointer-events:none;'></tr>
 		</thead>
 	{/if}
 
 	<tbody
 		class='content'
-		use:reorderArea={{ axis: 'y' }}
+		use:reorderArea={{ axis: 'y', class: table.id }}
 		bind:this={virtualization.viewport.element}
 		onscrollcapture={onscroll}
 		bind:clientHeight={virtualization.viewport.height}
@@ -559,6 +612,7 @@
 					'statusbar'
 				)}
 			</tr>
+			<tr style='width:400px;background:none;pointer-events:none;'></tr>
 		</tfoot>
 	{/if}
 
@@ -595,7 +649,7 @@
 {/snippet}
 
 {#snippet rowSelected(ctx: RowSelectCtx<T>)}
-	<input type='checkbox' bind:checked={ctx.isSelected} />
+	<input type='checkbox' bind:checked={ctx.isSelected} tabindex='-1' />
 {/snippet}
 
 {#if table.options.select || table.options.reorderable || table.expandable}
@@ -612,10 +666,10 @@
 			id='__fixed'
 			{table}
 			fixed
-			width={Math.max(56, 0
+			width={Math.max(48, 0
 				+ (select && show !== 'never' ? 34 : 0) 
 				+ (reorderable ? 34 : 0)
-				+ (expandable?.options.chevron !== 'never' ? 34 : 0)
+				+ (expandable && expandable?.options.chevron !== 'never' ? 34 : 0)
 			)}
 			resizeable={false}
 		>
@@ -677,9 +731,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)}
+					{#if expandable && expandable?.options.chevron !== 'never'}
+						<button class='expand-row' tabindex='-1' onclick={() => row.expanded = !row.expanded}>
+							{#if row.expanded || expandable.options.chevron === 'always' || (row.isHovered && expandable.options.chevron === 'hover')}
+								{@render chevronSnippet(row.expanded ? 180 : 90)}
+							{/if}
 						</button>
 					{/if}
 				</div>
@@ -688,10 +744,26 @@
 	{/if}
 {/if}
 
+{#if table.options.auto}
+	{#each Object.keys(data.current[0] || {}) as key}
+		<Column
+			id={key}
+			value={r => r[key]}
+			header={capitalize(segmentize(key))}
+			sort={
+				typeof data.current[0]?.[key] === 'number'
+					? (a, b) => a - b
+					: (a, b) => String(a).localeCompare(String(b))
+			}
+		/>
+	{/each}
+{/if}
+
 {@render content?.({
 	Column,
 	Panel,
 	Expandable,
+	Row,
 	get table() {
 		return table
 	},
@@ -708,11 +780,49 @@
 		background-color: inherit;
 	}
 
+	.context-col {
+		display: flex;
+		align-items: center;
+		justify-content: center;
+		position: sticky;
+		right: 0;
+		height: 100%;
+		z-index: 3;
+		padding: 0;
+
+		&.hover {
+			position: absolute;
+		}
+		&.hidden {
+			pointer-events: none;
+			user-select: none;
+			border-left: none;
+			background: none;
+			> :global(*) {
+				opacity: 0;
+			}
+		}
+	}
+
+	:global(:root) {
+		--tably-color: hsl(0, 0%, 0%);
+		--tably-bg: hsl(0, 0%, 100%);
+		--tably-statusbar: hsl(0, 0%, 98%);
+
+		--tably-border: hsl(0, 0%, 90%);
+		--tably-border-grid: hsl(0, 0%, 98%);
+
+		--tably-padding-x: 1rem;
+		--tably-padding-y: 0.5rem;
+
+		--tably-radius: 0.25rem;
+	}
+
 	.svelte-tably {
 		position: relative;
 		overflow: visible;
 	}
-
+	
 	.expandable {
 		position: relative;
 		
@@ -738,7 +848,7 @@
 		cursor: pointer;
 		background-color: transparent;
 		color: inherit;
-		width: 22px;
+		width: 20px;
 		height: 100%;
 
 		> svg {
@@ -767,12 +877,15 @@
 		justify-items: end;
 		margin: 0;
 		margin-left: auto;
-		margin-right: var(--tably-padding-x, 1rem);
 		> svg {
 			transition: transform 0.15s ease;
 		}
 	}
 
+	th:not(:last-child) .sorting-icon {
+		margin-right: var(--tably-padding-x);
+	}
+
 	.__fixed {
 		display: flex;
 		align-items: center;
@@ -786,13 +899,6 @@
 		width: 100%;
 	}
 
-	.first .__fixed {
-		top: var(--tably-padding-y, 0.5rem);
-	}
-	.last .__fixed {
-		bottom: var(--tably-padding-y, 0.5rem);
-	}
-
 	tbody::before,
 	tbody::after,
 	selects::before,
@@ -844,17 +950,6 @@
 		}
 	}
 
-	.headers,
-	.statusbar {
-		/* So that the scrollbar doesn't cause the headers/statusbar to shift */
-		padding-right: 11px;
-	}
-
-	.table {
-		color: var(--tably-color, hsl(0, 0%, 0%));
-		background-color: var(--tably-bg, hsl(0, 0%, 100%));
-	}
-
 	.sticky {
 		position: sticky;
 		/* right: 100px; */
@@ -862,16 +957,23 @@
 	}
 
 	.sticky.border {
-		border-right: 1px solid var(--tably-border, hsl(0, 0%, 90%));
+		border-right: 1px solid var(--tably-border);
 	}
 
-	.headers > .column {
-		border-right: 1px solid var(--tably-border, hsl(0, 0%, 90%));
+	.headers > tr > .column {
 		overflow: hidden;
-		padding: var(--tably-padding-y, 0.5rem) 0;
+		padding: var(--tably-padding-y) 0;
 		cursor: default;
 		user-select: none;
 
+		&.sticky.border {
+			border-right-color: var(--tably-border);
+		}
+
+		&:last-child {
+			border-right: none;
+		}
+
 		&.sortable {
 			cursor: pointer;
 		}
@@ -883,32 +985,41 @@
 
 	.table {
 		display: grid;
-		height: 100%;
+		height: auto;
+		max-height: 100%;
 		position: relative;
 
+		color: var(--tably-color);
+		background-color: var(--tably-bg);
+
 		grid-template-areas:
-			'headers     panel'
-			'rows        panel'
-			'statusbar   panel';
+			'headers    panel'
+			'rows       panel'
+			'statusbar  panel';
 
 		grid-template-columns: auto min-content;
 		grid-template-rows: auto 1fr auto;
 
-		border: 1px solid var(--tably-border, hsl(0, 0%, 90%));
-		border-radius: var(--tably-radius, 0.25rem);
-
-		max-height: 100%;
+		border: 1px solid var(--tably-border);
+		border-radius: var(--tably-radius);
 	}
 
 	.headers {
+		display: flex;
 		grid-area: headers;
 		z-index: 2;
 		overflow: hidden;
 	}
 
-	.headers > .column {
+	.headers > tr > .column {
 		width: auto !important;
-		border-bottom: 1px solid var(--tably-border, hsl(0, 0%, 90%));
+		border-bottom: 1px solid var(--tably-border);
+	}
+	.headers > tr {
+		> .column, > .context-col {
+			border-bottom: 1px solid var(--tably-border);
+			border-left: 1px solid var(--tably-border-grid);
+		}
 	}
 
 	.content {
@@ -918,21 +1029,21 @@
 		grid-area: rows;
 		scrollbar-width: thin;
 		overflow: auto;
-		/* height: 100%; */
 	}
 
 	.statusbar {
+		display: flex;
 		grid-area: statusbar;
 		overflow: hidden;
-		background-color: var(--tably-statusbar, hsl(0, 0%, 98%));
+		background-color: var(--tably-statusbar);
 	}
 
 	.statusbar > tr > .column {
-		border-top: 1px solid var(--tably-border, hsl(0, 0%, 90%));
-		padding: calc(var(--tably-padding-y, 0.5rem) / 2) 0;
+		border-top: 1px solid var(--tably-border);
+		padding: calc(var(--tably-padding-y) / 2) 0;
 	}
 
-	.headers,
+	.headers > tr,
 	.row,
 	.statusbar > tr {
 		position: relative;
@@ -942,25 +1053,29 @@
 
 		& > .column {
 			display: flex;
-			padding-left: var(--tably-padding-x, 1rem);
+			padding-left: var(--tably-padding-x);
 			overflow: hidden;
 		}
 
-		& > *:last-child {
+		& > *:last-child:not(.context-col) {
 			width: 100%;
-			padding-right: var(--tably-padding-x, 1rem);
+			padding-right: var(--tably-padding-x);
 		}
 	}
 
-	.row:first-child:not(.dragging) > * {
-		padding-top: calc(var(--tably-padding-y, 0.5rem) + calc(var(--tably-padding-y, 0.5rem) / 2));
+	.row > .column {
+		background-color: var(--tably-bg);
+		padding: var(--tably-padding-y) 0;
 	}
-	.row:last-child:not(.dragging) > * {
-		padding-bottom: calc(var(--tably-padding-y, 0.5rem) + calc(var(--tably-padding-y, 0.5rem) / 2));
+
+	:global(#runic-drag .row) {
+		border: 1px solid var(--tably-border-grid);
+		border-top: 2px solid var(--tably-border-grid);
 	}
 
 	.row > * {
-		padding: calc(var(--tably-padding-y, 0.5rem) / 2) 0;
+		border-left: 1px solid var(--tably-border-grid);
+		border-bottom: 1px solid var(--tably-border-grid);
 	}
 
 	.panel {
@@ -968,7 +1083,7 @@
 		grid-area: panel;
 		height: 100%;
 		overflow: hidden;
-		border-left: 1px solid var(--tably-border, hsl(0, 0%, 90%));
+		border-left: 1px solid var(--tably-border);
 		
 		z-index: 4;
 
@@ -980,7 +1095,7 @@
 			width: min-content;
 			overflow: auto;
 			scrollbar-width: thin;
-			padding: var(--tably-padding-y, 0.5rem) 0;
+			padding: var(--tably-padding-y) 0;
 		}
 	}
 </style>

package/dist/table/table.svelte.js

@@ -10,6 +10,7 @@ export class TableState {
     columns = $state({});
     panels = $state({});
     expandable = $state();
+    row = $state();
     /** Currently selected items */
     get selected() { return this.#props.selected ??= []; }
     set selected(items) { this.#props.selected = items; }
@@ -27,7 +28,8 @@ export class TableState {
         resizeable: this.#props.resizeable ?? true,
         reorderable: this.#props.reorderable ?? false,
         href: this.#props.href,
-        select: this.#props.select ?? false
+        select: this.#props.select ?? false,
+        auto: this.#props.auto ?? false
     });
     add(state) {
         if (state instanceof ColumnState) {

package/dist/utility.svelte.d.ts

@@ -14,4 +14,8 @@ 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;
+/** Capitalize by space */
+export declare function capitalize(str: string): string;
+/** Split words when going from lower case to uppercase; `someWords-split` -> `some Word Split...` */
+export declare function segmentize(str: string): string;
 export {};

package/dist/utility.svelte.js

@@ -78,3 +78,27 @@ export function assignDescriptors(target, source) {
     }
     return target;
 }
+/** Capitalize by space */
+export function capitalize(str) {
+    let parts = str.split(' ');
+    let result = '';
+    for (let part of parts) {
+        result += part.charAt(0).toUpperCase() + part.slice(1) + ' ';
+    }
+    return result;
+}
+/** Split words when going from lower case to uppercase; `someWords-split` -> `some Word Split...` */
+export function segmentize(str) {
+    let result = '';
+    for (let i = 0; i < str.length; i++) {
+        const char = str[i];
+        const prevChar = i > 0 ? str[i - 1] : '';
+        if ((char === '-' || char === char.toUpperCase()) && prevChar !== ' ' && prevChar !== prevChar.toUpperCase()) {
+            result += ' ';
+            if (char === '-')
+                continue;
+        }
+        result += char;
+    }
+    return result.trim();
+}

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "svelte-tably",
-	"version": "1.0.0-next.15",
+	"version": "1.0.0-next.17",
 	"repository": "github:refzlund/svelte-tably",
 	"homepage": "https://github.com/Refzlund/svelte-tably",
 	"bugs": {