svelte-tably 1.1.2 → 1.3.0

package/dist/table/Table.svelte

@@ -8,12 +8,8 @@
 
 -->
 
-<script lang="ts">
-	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'
+<script module lang="ts">
+	import type { Snippet } from 'svelte'
 	import {
 		TableState,
 		type HeaderSelectCtx,
@@ -21,36 +17,43 @@
 		type RowSelectCtx,
 		type TableProps
 	} from './table-state.svelte.js'
-	import Panel from '../panel/Panel.svelte'
 	import Column from '../column/Column.svelte'
-	import { assignDescriptors, capitalize, fromProps, mounted, segmentize } from '../utility.svelte.js'
-	import { conditional } from '../conditional.svelte.js'
-	import { ColumnState, type RowColumnCtx } from '../column/column-state.svelte.js'
+	import Panel from '../panel/Panel.svelte'
 	import Expandable from '../expandable/Expandable.svelte'
-	import { SizeTween } from '../size-tween.svelte.js'
-	import { on } from 'svelte/events'
 	import Row from '../row/Row.svelte'
-	import type { CSVOptions } from './csv.js'
 
-	type T = $$Generic<Record<PropertyKey, unknown>>
+	type ConstructorReturnType<C extends new (...args: any[]) => any> =
+		C extends new (...args: any[]) => infer K ? K : never
+	type ConstructorParams<C extends new (...args: any[]) => any> =
+		C extends new (...args: infer K) => any ? K : never
 
-	type ConstructorReturnType<T extends new (...args: any[]) => any> =
-		T extends new (...args: any[]) => infer K ? K : never
-	type ConstructorParams<T extends new (...args: any[]) => any> =
-		T extends new (...args: infer K) => any ? K : never
-
-	type ContentCtx<T extends Record<PropertyKey, unknown>> = {
+	export type ContentCtx<Item = any> = {
 		Column: {
-			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>>
+			new <V>(...args: ConstructorParams<typeof Column<Item, V>>): ConstructorReturnType<typeof Column<Item, V>>
+			<V>(...args: Parameters<typeof Column<Item, V>>): ReturnType<typeof Column<Item, V>>
 		}
-		Panel: typeof Panel<T>
-		Expandable: typeof Expandable<T>
-		Row: typeof Row<T>
-		readonly table: TableState<T>
+		Panel: typeof Panel<Item>
+		Expandable: typeof Expandable<Item>
+		Row: typeof Row<Item>
+		readonly table: TableState<Item>
 	}
 
-	type ContentSnippet = Snippet<[context: ContentCtx<T>]>
+	export type ContentSnippet<Item = any> = Snippet<[context: ContentCtx<Item>]>
+</script>
+
+<script lang="ts">
+	import { fly } from 'svelte/transition'
+	import { sineInOut } from 'svelte/easing'
+	import reorder, { type ItemState } from 'runic-reorder'
+	import { Virtualization } from './virtualization.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-state.svelte.js'
+	import { SizeTween } from '../size-tween.svelte.js'
+	import { on } from 'svelte/events'
+	import type { CSVOptions } from './csv.js'
+
+	type T = $$Generic
 
 	let {
 		content,
@@ -59,7 +62,7 @@
 		data: _data = $bindable([]),
 		table: _table = $bindable(),
 		...restProps
-	}: TableProps<T> & { content?: ContentSnippet } = $props()
+	}: TableProps<T> & { content?: ContentSnippet<T> } = $props()
 
 	const properties = fromProps(restProps, {
 		selected: [() => _selected, (v) => (_selected = v)],
@@ -69,14 +72,39 @@
 
 	const mount = mounted()
 
+
+	const getRowLabel = (item: T, index: number) => {
+		const labelColumn = columns.find((c) => c.id !== '__fixed')
+		const raw = labelColumn?.options.value?.(item)
+
+		if (raw === null || raw === undefined) return `Row ${index + 1}`
+		if (typeof raw === 'string' || typeof raw === 'number' || typeof raw === 'boolean') {
+			const text = String(raw).trim()
+			return text ? text : `Row ${index + 1}`
+		}
+
+		return `Row ${index + 1}`
+	}
+
 	const reorderArea = reorder(rowSnippet)
 
-	const elements = $state({}) as Record<
-		'headers' | 'statusbar' | 'rows' | 'virtualTop' | 'virtualBottom' | 'selects',
-		HTMLElement
-	>
+	const elements = $state({}) as Record<'headers' | 'statusbar', HTMLElement>
 
 	const table = new TableState<T>(properties) as TableState<T>
+	const uid = table.cssId
+	let expandIdCounter = 0
+	const expandIds = new WeakMap<object, string>()
+	const getExpandId = (item: T) => {
+		if (item && typeof item === 'object') {
+			let id = expandIds.get(item)
+			if (!id) {
+				id = `${uid}-expand-${++expandIdCounter}`
+				expandIds.set(item, id)
+			}
+			return id
+		}
+		return `${uid}-expand-${String(item)}`
+	}
 
 	const virtualization = new Virtualization(table)
 
@@ -86,16 +114,100 @@
 	let hoveredColumn: ColumnState | null = $state(null)
 
 	/** Order of columns */
-	const fixed = $derived(table.positions.fixed)
-	const hidden = $derived(table.positions.hidden)
-	const notHidden = (column: ColumnState) => !table.positions.hidden.includes(column)
+	const isColumn = (value: unknown): value is ColumnState =>
+		value instanceof ColumnState
+	const fixed = $derived(table.positions.fixed.filter(isColumn))
+	const hidden = $derived(table.positions.hidden.filter(isColumn))
+	const notHidden = (column: ColumnState | undefined) =>
+		!!column && !table.positions.hidden.includes(column)
 	const sticky = $derived(table.positions.sticky.filter(notHidden))
 	const scrolled = $derived(table.positions.scroll.filter(notHidden))
 	const columns = $derived([...fixed, ...sticky, ...scrolled])
 
+	const autoSchema = $derived.by(() => {
+		const rows = table.dataState.origin as any[]
+		const keys = [] as string[]
+		const seen = new Set<string>()
+		const sample = {} as Record<string, unknown>
+
+		for (const row of rows.slice(0, 50)) {
+			if (!row || typeof row !== 'object') continue
+			for (const key of Object.keys(row)) {
+				if (!seen.has(key)) {
+					seen.add(key)
+					keys.push(key)
+				}
+				if (sample[key] === undefined && row[key] !== undefined) {
+					sample[key] = row[key]
+				}
+			}
+		}
+
+		return { keys, sample }
+	})
+
 	const getWidth = (key: string, def: number = 150) =>
 		table.columnWidths[key] ??= table.columns[key]?.defaults.width ?? def
 
+	const measureContextCellWidth = (cell: HTMLElement | null) => {
+		if (!cell) return 0
+		const inner = cell.querySelector(':scope > .context-inner') as HTMLElement | null
+		const content = inner?.firstElementChild as HTMLElement | null
+		const candidates = [cell, inner, content].filter(Boolean) as HTMLElement[]
+		let width = 0
+		for (const el of candidates) {
+			width = Math.max(
+				width,
+				Math.ceil(el.getBoundingClientRect().width),
+				Math.ceil(el.scrollWidth)
+			)
+		}
+		return width
+	}
+
+	let contextWidth = $state(0)
+	let contextWidthRaf = 0
+	$effect(() => {
+		if (!mount.isMounted) {
+			contextWidth = 0
+			if (contextWidthRaf) cancelAnimationFrame(contextWidthRaf)
+			return
+		}
+		if (!table.row?.snippets.context) {
+			contextWidth = 0
+			if (contextWidthRaf) cancelAnimationFrame(contextWidthRaf)
+			return
+		}
+		if (!table.row?.options.context.alignHeaderToRows) {
+			contextWidth = 0
+			if (contextWidthRaf) cancelAnimationFrame(contextWidthRaf)
+			return
+		}
+
+		virtualization.topIndex
+		if (contextWidthRaf) cancelAnimationFrame(contextWidthRaf)
+		contextWidthRaf = requestAnimationFrame(() => {
+			const headerCell = elements.headers?.querySelector(
+				'[data-tably-context-measure="header"]'
+			) as HTMLElement | null
+			const rowCell = virtualization.viewport.element?.querySelector(
+				'[data-tably-context-measure="row"]'
+			) as HTMLElement | null
+
+			const width = Math.max(
+				measureContextCellWidth(headerCell),
+				measureContextCellWidth(rowCell)
+			)
+			if (width > 0 && width !== contextWidth) {
+				contextWidth = width
+			}
+		})
+
+		return () => {
+			if (contextWidthRaf) cancelAnimationFrame(contextWidthRaf)
+		}
+	})
+
 	/** grid-template-columns for widths */
 	let style = $state('')
 	$effect(() => {
@@ -104,7 +216,7 @@
 			return
 		}
 
-		const context = table.row?.snippets.context ? table.row?.options.context.width : ''
+		const context = table.row?.snippets.context ? ' var(--tably-context-width)' : ''
 
 		const templateColumns =
 			columns
@@ -115,7 +227,7 @@
 				})
 				.join(' ') + context
 
-		const theadTempla3teColumns = `
+		const theadTemplateColumns = `
 	[data-svelte-tably="${table.cssId}"] > thead > tr,
 	[data-svelte-tably="${table.cssId}"] > tfoot > tr {
 		grid-template-columns: ${templateColumns};
@@ -124,6 +236,8 @@
 
 		const tbodyTemplateColumns = `
 	[data-area-class='${table.cssId}'] tr.row,
+	[data-area-class='${table.cssId}'] tr.expandable,
+	[data-area-class='${table.cssId}'] tr.filler,
 	[data-svelte-tably="${table.cssId}"] > tbody::after {
 		grid-template-columns: ${templateColumns};
 	}
@@ -154,7 +268,7 @@
 			)
 			.join('')
 
-		style = theadTempla3teColumns + tbodyTemplateColumns + stickyLeft + columnStyling
+		style = theadTemplateColumns + tbodyTemplateColumns + stickyLeft + columnStyling
 	})
 
 	function observeColumnWidth(node: HTMLDivElement, isHeader = false) {
@@ -188,16 +302,34 @@
 	}
 
 	let tbody = $state({
-		width: 0
+		scrollbar: 0,
+		viewportWidth: 0
 	})
-	async function onscroll() {
-		const target = virtualization.viewport.element!
-		if (target.scrollTop !== virtualization.scrollTop) {
-			virtualization.scrollTop = target?.scrollTop ?? virtualization.scrollTop
+
+	function observeScrollbar(node: HTMLElement) {
+		if (typeof ResizeObserver === 'undefined') return
+
+		const update = () => {
+			// Reserve the same gutter in header/footer as the scrollable body
+			tbody.scrollbar = Math.max(0, node.offsetWidth - node.clientWidth)
+			tbody.viewportWidth = node.clientWidth
 		}
 
-		if (elements.selects) {
-			elements.selects.scrollTop = target?.scrollTop
+		update()
+		const observer = new ResizeObserver(update)
+		observer.observe(node)
+
+		return {
+			destroy() {
+				observer.disconnect()
+			}
+		}
+	}
+	function onscroll() {
+		const target = virtualization.viewport.element
+		if (!target) return
+		if (target.scrollTop !== virtualization.scrollTop) {
+			virtualization.scrollTop = target?.scrollTop ?? virtualization.scrollTop
 		}
 
 		if (elements.headers) {
@@ -415,7 +547,11 @@
 				class:fixed={true}
 				use:addRowColumnEvents={[where, column, () => args[1]]}
 				data-column={column.id}
-				class:pad={(isHeader && column.options.padHeader) || (!isHeader && column.options.padRow)}
+				class:pad={
+					(where === 'header' && column.options.padHeader) ||
+					(where === 'row' && column.options.padRow) ||
+					(where === 'statusbar' && column.options.padStatusbar)
+				}
 				class:header={isHeader}
 				class:sortable
 				use:conditional={[isHeader, (node) => table.dataState.sortAction(node, column.id)]}
@@ -443,7 +579,11 @@
 				use:addRowColumnEvents={[where, column, () => args[1]]}
 				use:observeColumnWidth={isHeader}
 				data-column={column.id}
-				class:pad={(isHeader && column.options.padHeader) || (!isHeader && column.options.padRow)}
+				class:pad={
+					(where === 'header' && column.options.padHeader) ||
+					(where === 'row' && column.options.padRow) ||
+					(where === 'statusbar' && column.options.padStatusbar)
+				}
 				class:header={isHeader}
 				class:resizeable={isHeader && column.options.resizeable && table.options.resizeable}
 				class:border={i == sticky.length - 1}
@@ -470,7 +610,11 @@
 				class={column.options.class ?? ''}
 				class:column={true}
 				data-column={column.id}
-				class:pad={(isHeader && column.options.padHeader) || (!isHeader && column.options.padRow)}
+				class:pad={
+					(where === 'header' && column.options.padHeader) ||
+					(where === 'row' && column.options.padRow) ||
+					(where === 'statusbar' && column.options.padStatusbar)
+				}
 				use:addRowColumnEvents={[where, column, () => args[1]]}
 				use:observeColumnWidth={isHeader}
 				class:resizeable={isHeader && column.options.resizeable && table.options.resizeable}
@@ -490,7 +634,7 @@
 	{/each}
 {/snippet}
 
-{#snippet defaultRow(item: T, ctx: RowColumnCtx<T, any>)}
+{#snippet defaultRow(item: any, ctx: RowColumnCtx<any, any>)}
 	{ctx.value}
 {/snippet}
 
@@ -508,9 +652,16 @@
 			return table.selected?.includes(item)
 		},
 		set selected(value) {
-			value ?
-				table.selected!.push(item)
-			:	table.selected!.splice(table.selected!.indexOf(item), 1)
+			const current = table.selected
+			if (value) {
+				if (!current.includes(item)) {
+					table.selected = [...current, item]
+				}
+				return
+			}
+			if (current.includes(item)) {
+				table.selected = current.filter((v) => v !== item)
+			}
 		},
 		get itemState() {
 			return itemState
@@ -537,10 +688,8 @@
 		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
-				}
+				const target = e.target
+				if (target instanceof Element && target.closest('input, textarea, button, a')) return
 				ctx.expanded = !ctx.expanded
 			}
 		}}
@@ -566,30 +715,57 @@
 			'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}
-				>
+			<td
+				class="context-col"
+				class:hidden={table.row?.options.context.hover && hoveredRow !== item}
+				data-tably-context-measure={
+					table.row?.options.context.alignHeaderToRows &&
+					index === virtualization.topIndex ?
+						'row'
+					:	undefined
+				}
+			>
+				<div class="context-inner">
 					{@render table.row?.snippets.context?.(item, ctx)}
-				</td>
-			{/if}
+				</div>
+			</td>
 		{/if}
 	</tr>
 
-	{@const expandableTween = new SizeTween(() => table.expandable && expandedRow.includes(item), {
-		min: 1,
+	{@const expandableTween = new SizeTween(() => !!table.expandable && expandedRow.includes(item), {
+		min: 0,
 		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)}
+	{@const expanded = !!table.expandable && expandedRow.includes(item)}
+	{#if table.expandable && (expanded || expandableTween.current > 0 || expandableTween.transitioning)}
+		{@const expandId = getExpandId(item)}
+		{@const expandLabelId = `${expandId}-label`}
+		<tr class="expandable">
+			<td
+				class="expandable-cell"
+				colspan={columns.length + (table.row?.snippets.context ? 1 : 0)}
+				style="padding: 0"
+			>
+				<div class="expandable-sticky">
+					<div
+						class="expandable-clip"
+						style="height: {Math.round(expandableTween.current)}px"
+						id={expandId}
+						role="region"
+						aria-labelledby={expandLabelId}
+						aria-hidden={!expanded}
+					>
+						<span class="sr-only" id={expandLabelId}>
+							Expanded content for {getRowLabel(item, index)}
+						</span>
+						<div
+							class="expandable-content"
+							bind:offsetHeight={expandableTween.size}
+						>
+							{@render table.expandable?.snippets.content?.(item, ctx)}
+						</div>
+					</div>
 				</div>
 			</td>
 		</tr>
@@ -600,7 +776,7 @@
 	id={table.id}
 	data-svelte-tably={table.cssId}
 	class="table svelte-tably"
-	style="--t: {virtualization.virtualTop}px; --b: {virtualization.virtualBottom}px;"
+	style="--t: {virtualization.virtualTop}px; --b: {virtualization.virtualBottom}px; --scrollbar: {tbody.scrollbar}px; --viewport-width: {tbody.viewportWidth}px; --tably-context-width: {table.row?.options.context.alignHeaderToRows && contextWidth > 0 ? `${contextWidth}px` : (table.row?.options.context.width ?? 'max-content')};"
 	aria-rowcount={table.data.length}
 >
 	{#if columns.some((v) => v.snippets.header)}
@@ -620,23 +796,31 @@
 					],
 					'header'
 				)}
-				{#if table.row?.snippets.contextHeader}
-					<th class="context-col">
-						{@render table.row?.snippets.contextHeader()}
+				{#if table.row?.snippets.context}
+					<th
+						class="context-col"
+						data-tably-context-measure={table.row?.options.context.alignHeaderToRows ? 'header' : undefined}
+						aria-hidden={table.row?.snippets.contextHeader ? undefined : true}
+						role={table.row?.snippets.contextHeader ? undefined : 'presentation'}
+					>
+						{#if table.row?.snippets.contextHeader}
+							<div class="context-inner">
+								{@render table.row?.snippets.contextHeader()}
+							</div>
+						{/if}
 					</th>
 				{/if}
 			</tr>
-			<tr style="width:400px;background:none;pointer-events:none;"></tr>
 		</thead>
 	{/if}
 
 	<tbody
 		class="content"
 		use:reorderArea={{ axis: 'y', class: table.cssId }}
+		use:observeScrollbar
 		bind:this={virtualization.viewport.element}
 		onscrollcapture={onscroll}
 		bind:clientHeight={virtualization.viewport.height}
-		bind:clientWidth={tbody.width}
 	>
 		{#if table.options.reorderable}
 			{@render reorderArea({
@@ -655,6 +839,39 @@
 				{@render rowSnippet(item, { index: i + virtualization.topIndex } as ItemState)}
 			{/each}
 		{/if}
+
+		{#if columns.length > 0 && virtualization.virtualTop === 0 && virtualization.virtualBottom === 0}
+			<tr class="filler" aria-hidden="true">
+				{#each fixed as column (column)}
+					{#if !hidden.includes(column)}
+						<td
+							class={`column sticky fixed ${column.options.class ?? ''}`}
+							data-column={column.id}
+						></td>
+					{/if}
+				{/each}
+				{#each sticky as column, i (column)}
+					{#if !hidden.includes(column)}
+						<td
+							class={`column sticky ${column.options.class ?? ''}`}
+							class:border={i == sticky.length - 1}
+							data-column={column.id}
+						></td>
+					{/if}
+				{/each}
+				{#each scrolled as column (column)}
+					{#if !hidden.includes(column)}
+						<td
+							class={`column ${column.options.class ?? ''}`}
+							data-column={column.id}
+						></td>
+					{/if}
+				{/each}
+				{#if table.row?.snippets.context}
+					<td class="context-col" aria-hidden="true"></td>
+				{/if}
+			</tr>
+		{/if}
 	</tbody>
 
 	{#if columns.some((v) => v.snippets.statusbar)}
@@ -671,8 +888,10 @@
 					],
 					'statusbar'
 				)}
+				{#if table.row?.snippets.context}
+					<td class="context-col" aria-hidden="true"></td>
+				{/if}
 			</tr>
-			<tr style="width:400px;background:none;pointer-events:none;"></tr>
 		</tfoot>
 	{/if}
 
@@ -708,11 +927,11 @@
 	</caption>
 </table>
 
-{#snippet headerSelected(ctx: HeaderSelectCtx<T>)}
+{#snippet headerSelected(ctx: HeaderSelectCtx<any>)}
 	<input type="checkbox" indeterminate={ctx.indeterminate} bind:checked={ctx.isSelected} />
 {/snippet}
 
-{#snippet rowSelected(ctx: RowSelectCtx<T>)}
+{#snippet rowSelected(ctx: RowSelectCtx<any>)}
 	<input type="checkbox" bind:checked={ctx.isSelected} tabindex="-1" />
 {/snippet}
 
@@ -798,9 +1017,20 @@
 						})}
 					{/if}
 					{#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.rowHovered && expandable.options.chevron === 'hover')}
-								{@render chevronSnippet(row.expanded ? 180 : 90)}
+						{@const expandId = getExpandId(item)}
+						{@const expanded = row.expanded}
+						{@const label = expanded ? 'Collapse row' : 'Expand row'}
+						<button
+							class="expand-row"
+							tabindex="-1"
+							type="button"
+							aria-label={label}
+							aria-expanded={expanded}
+							aria-controls={expandId}
+							onclick={() => (row.expanded = !row.expanded)}
+						>
+							{#if expanded || expandable.options.chevron === 'always' || (row.rowHovered && expandable.options.chevron === 'hover')}
+								{@render chevronSnippet(expanded ? 180 : 90)}
 							{/if}
 						</button>
 					{/if}
@@ -811,12 +1041,12 @@
 {/if}
 
 {#if table.options.auto}
-	{#each Object.keys(table.data[0] || {}) as key}
+	{#each autoSchema.keys as key}
 		<Column
 			id={key}
-			value={(r) => r[key]}
+			value={(r) => (r as any)?.[key]}
 			header={capitalize(segmentize(key))}
-			sort={typeof table.data[0]?.[key] === 'number' ?
+			sort={typeof autoSchema.sample?.[key] === 'number' ?
 				(a, b) => a - b
 			:	(a, b) => String(a).localeCompare(String(b))}
 		/>
@@ -847,24 +1077,57 @@
 		justify-content: center;
 		position: sticky;
 		right: 0;
-		height: 100%;
 		z-index: 3;
 		padding: 0;
-
-		&.hover {
-			position: absolute;
-		}
+		border-left: 1px solid var(--tably-border);
 		&.hidden {
 			pointer-events: none;
 			user-select: none;
 			border-left: none;
-			background: none;
-			> :global(*) {
-				opacity: 0;
+			> .context-inner {
+				visibility: hidden;
 			}
 		}
 	}
 
+	.context-inner {
+		display: flex;
+		align-items: center;
+		justify-content: center;
+		padding: calc(var(--tably-padding-y) / 2) 0;
+		overflow: clip;
+		width: 100%;
+	}
+
+	.table::before {
+		content: '';
+		grid-area: headers;
+		justify-self: end;
+		align-self: stretch;
+		width: var(--scrollbar, 0px);
+		background-color: var(--tably-bg);
+		border-bottom: 1px solid var(--tably-border);
+		border-right: 1px solid var(--tably-border);
+		margin-right: -1px;
+		pointer-events: none;
+		position: relative;
+		z-index: 4;
+	}
+
+	.table::after {
+		content: '';
+		grid-area: statusbar;
+		justify-self: end;
+		align-self: stretch;
+		width: var(--scrollbar, 0px);
+		background-color: var(--tably-statusbar);
+		border-right: 1px solid var(--tably-border);
+		margin-right: -1px;
+		pointer-events: none;
+		position: relative;
+		z-index: 4;
+	}
+
 	:global(:root) {
 		--tably-color: hsl(0, 0%, 0%);
 		--tably-bg: hsl(0, 0%, 100%);
@@ -881,24 +1144,50 @@
 
 	.svelte-tably {
 		position: relative;
-		overflow: visible;
+		overflow: hidden;
+		border-collapse: collapse;
+		border-spacing: 0;
 	}
 
 	.expandable {
-		position: relative;
-
 		& > td {
-			position: sticky;
-			left: 1px;
-			> div {
-				position: absolute;
-				overflow: auto;
-				top: -1.5px;
-				left: 0;
-			}
+			padding: 0;
+			border: none;
 		}
 	}
 
+	.expandable-cell {
+		grid-column: 1 / -1;
+		display: block;
+		min-width: 0;
+		width: 100%;
+	}
+
+	.expandable-sticky {
+		position: sticky;
+		left: 0;
+		width: var(--viewport-width, 100%);
+		min-width: 0;
+		display: block;
+		background-color: var(--tably-bg);
+		z-index: 1;
+	}
+
+	.expandable-clip {
+		overflow: hidden;
+		width: 100%;
+		background-color: var(--tably-bg);
+		border-bottom: 1px solid var(--tably-border-grid);
+	}
+
+	.expandable-content {
+		overflow: auto;
+		width: 100%;
+		background-color: var(--tably-bg);
+		box-sizing: border-box;
+		min-width: 0;
+	}
+
 	.expand-row {
 		display: flex;
 		justify-content: center;
@@ -952,6 +1241,7 @@
 		align-items: center;
 		justify-content: center;
 		gap: 0.25rem;
+		background-color: transparent;
 		position: absolute;
 		top: 0;
 		left: 0;
@@ -960,25 +1250,25 @@
 		width: 100%;
 	}
 
+	.__fixed > * {
+		background-color: transparent;
+	}
+
 	thead {
 		position: relative;
 	}
 
 	tbody::before,
-	tbody::after,
-	selects::before,
-	selects::after {
+	tbody::after {
 		content: '';
-		display: grid;
-		min-height: 100%;
+		display: block;
+		flex: 0 0 auto;
 	}
 
-	tbody::before,
-	selects::before {
+	tbody::before {
 		height: var(--t);
 	}
-	tbody::after,
-	selects::after {
+	tbody::after {
 		height: var(--b);
 	}
 
@@ -1046,7 +1336,10 @@
 
 	.table {
 		display: grid;
-		height: auto;
+		width: 100%;
+		min-width: 0;
+		min-height: 0;
+		height: 100%;
 		max-height: 100%;
 		position: relative;
 
@@ -1058,8 +1351,8 @@
 			'rows       panel'
 			'statusbar  panel';
 
-		grid-template-columns: auto min-content;
-		grid-template-rows: auto 1fr auto;
+		grid-template-columns: 1fr min-content;
+		grid-template-rows: auto minmax(0, 1fr) auto;
 
 		border: 1px solid var(--tably-border);
 		border-radius: var(--tably-radius);
@@ -1070,25 +1363,43 @@
 		grid-area: headers;
 		z-index: 2;
 		overflow: hidden;
+		min-width: 0;
+		padding-right: var(--scrollbar, 0px);
+		border-bottom: 1px solid var(--tably-border);
 	}
 
 	.headers > tr > .column {
 		width: auto !important;
-		border-bottom: 1px solid var(--tably-border);
 	}
-	.headers > tr > .column,
-	.headers > tr > .context-col {
-		border-bottom: 1px solid var(--tably-border);
+	.headers > tr > .column:not(:first-child) {
 		border-left: 1px solid var(--tably-border-grid);
 	}
 
+	.headers > tr > .context-col {
+		border-left: 1px solid var(--tably-border);
+		background-color: var(--tably-bg);
+	}
+
 	.content {
-		display: grid;
-		grid-auto-rows: max-content;
+		display: flex;
+		flex-direction: column;
+		min-width: 0;
+		min-height: 0;
 
 		grid-area: rows;
 		scrollbar-width: thin;
-		overflow: auto;
+		overflow-x: auto;
+		overflow-y: scroll;
+	}
+
+	.content > tr.row,
+	.content > tr.expandable {
+		flex: 0 0 auto;
+	}
+
+	.content > tr.filler {
+		flex: 1 0 0px;
+		min-height: 0;
 	}
 
 	.statusbar {
@@ -1096,19 +1407,30 @@
 		grid-area: statusbar;
 		overflow: hidden;
 		background-color: var(--tably-statusbar);
+		min-width: 0;
+		padding-right: var(--scrollbar, 0px);
 	}
 
 	.statusbar > tr > .column {
 		border-top: 1px solid var(--tably-border);
 		padding: calc(var(--tably-padding-y) / 2) 0;
 	}
+	.statusbar > tr > .context-col {
+		border-top: 1px solid var(--tably-border);
+		border-left: 1px solid var(--tably-border);
+	}
+
+	.statusbar > tr > .context-col {
+		background-color: var(--tably-statusbar);
+	}
 
 	.headers > tr,
 	.row,
+	.expandable,
+	.filler,
 	.statusbar > tr {
 		display: grid;
 		width: 100%;
-		height: 100%;
 		min-width: max-content;
 
 		& > .column {
@@ -1140,16 +1462,49 @@
 		}
 	}
 
+	.row > .context-col {
+		background-color: var(--tably-bg);
+	}
+
+	.row > .context-col.hidden {
+		background-color: transparent;
+	}
+
 	:global(#runic-drag .row) {
 		border: 1px solid var(--tably-border-grid);
 		border-top: 2px solid var(--tably-border-grid);
 	}
 
-	.row > * {
+	.headers > tr > .column:not(:first-child),
+	.row > .column:not(:first-child),
+	.filler > .column:not(:first-child),
+	.statusbar > tr > .column:not(:first-child) {
 		border-left: 1px solid var(--tably-border-grid);
+	}
+
+	.row,
+	.filler {
 		border-bottom: 1px solid var(--tably-border-grid);
 	}
 
+	.filler {
+		pointer-events: none;
+		user-select: none;
+		background: none;
+	}
+
+	.sr-only {
+		position: absolute;
+		width: 1px;
+		height: 1px;
+		padding: 0;
+		margin: -1px;
+		overflow: hidden;
+		clip: rect(0, 0, 0, 0);
+		white-space: nowrap;
+		border: 0;
+	}
+
 	.panel {
 		position: relative;
 		grid-area: panel;