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

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
+- [ ] Auto: Table based on data, sortable
 
 ### Usage Notes
 
@@ -38,8 +39,8 @@ A high performant, feature rich, dynamic table
 </script>
 
 <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 +53,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 +66,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>

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,13 +13,13 @@
 </script>
 
 <script lang="ts">
-	import { 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 { conditional } from '../conditional.svelte.js'
@@ -27,6 +27,8 @@
 	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[]
 	}
@@ -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) {
@@ -231,6 +244,27 @@
 
 
 	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, 
@@ -243,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>
 
 <!---------------------------------------------------->
@@ -392,25 +438,12 @@
 	{/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}
-	{@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() {
@@ -434,16 +467,14 @@
 			return expandedRow.includes(item)
 		},
 		set expanded(value) {
-			toggleExpand(value)
+			toggleExpand(item, value)
 		}
 	}}
 
 	<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}
@@ -452,18 +483,19 @@
 		{...(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
 				if(['INPUT', 'TEXTAREA', 'BUTTON', 'A'].includes(target.tagName)) {
 					return
 				}
-				toggleExpand()
+				ctx.expanded = !ctx.expanded
 			}
 		}}
 	>
 		{@render columnsSnippet(
-			(column) => column.snippets.row,
+			(column) => column.snippets.row ?? defaultRow,
 			(column) => {
 				return [
 					item,
@@ -476,6 +508,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(
@@ -506,20 +549,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}
@@ -555,6 +608,7 @@
 					'statusbar'
 				)}
 			</tr>
+			<tr style='width:400px;background:none;pointer-events:none;'></tr>
 		</tfoot>
 	{/if}
 
@@ -591,7 +645,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}
@@ -673,9 +727,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,6 +744,7 @@
 	Column,
 	Panel,
 	Expandable,
+	Row,
 	get table() {
 		return table
 	},
@@ -704,11 +761,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;
 		
@@ -734,7 +829,7 @@
 		cursor: pointer;
 		background-color: transparent;
 		color: inherit;
-		width: 22px;
+		width: 20px;
 		height: 100%;
 
 		> svg {
@@ -763,12 +858,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;
@@ -782,13 +880,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,
@@ -840,17 +931,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; */
@@ -858,16 +938,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;
 		}
@@ -879,32 +966,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 {
@@ -914,21 +1010,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;
@@ -938,25 +1034,22 @@
 
 		& > .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:last-child:not(.dragging) > * {
-		padding-bottom: calc(var(--tably-padding-y, 0.5rem) + calc(var(--tably-padding-y, 0.5rem) / 2));
+	.row > .column {
+		padding: var(--tably-padding-y) 0;
 	}
-
 	.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 {
@@ -964,7 +1057,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;
 
@@ -976,7 +1069,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; }

package/package.json

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