@smartnet360/svelte-grid 0.1.0

package/dist/components/GridBody.svelte

@@ -0,0 +1,194 @@
+<script lang="ts" generics="T">
+	import type { Snippet } from 'svelte';
+	import type { ColumnDefinition, CellContext, GridEvents, DisplayRow, GroupInfo } from '../types.js';
+	import Row from './Row.svelte';
+	import GroupHeader from './GroupHeader.svelte';
+
+	interface Props {
+		/** Display rows (grouped mode) - takes precedence if provided */
+		displayRows?: DisplayRow<T>[];
+		/** Legacy: data rows (non-grouped mode) */
+		rows?: T[];
+		columns: ColumnDefinition<T>[];
+		rowKey: string;
+		startIndex: number;
+		totalHeight: number;
+		offsetY: number;
+		rowHeight: number;
+		/** Height of group header rows */
+		groupHeaderHeight?: number;
+		onrowclick?: GridEvents<T>['rowclick'];
+		onrowdblclick?: GridEvents<T>['rowdblclick'];
+		oncellclick?: GridEvents<T>['cellclick'];
+		onscroll?: (scrollTop: number, scrollLeft: number) => void;
+		cell?: Snippet<[CellContext<T>]>;
+		/** Custom group header snippet */
+		groupHeader?: Snippet<[GroupInfo<T>]>;
+		frozenRows?: T[];
+		frozenRowCount?: number;
+		onrowcontextmenu?: (row: T, rowIndex: number, event: MouseEvent) => void;
+	}
+
+	let {
+		displayRows,
+		rows,
+		columns,
+		rowKey,
+		startIndex,
+		totalHeight,
+		offsetY,
+		rowHeight,
+		groupHeaderHeight = 36,
+		onrowclick,
+		onrowdblclick,
+		oncellclick,
+		onscroll,
+		cell,
+		groupHeader,
+		frozenRows = [],
+		frozenRowCount = 0,
+		onrowcontextmenu
+	}: Props = $props();
+
+	// Determine if we're in grouped mode
+	const isGrouped = $derived(displayRows !== undefined && displayRows.length > 0);
+
+	// Effective display rows - use displayRows if provided, otherwise convert rows
+	const effectiveDisplayRows = $derived.by((): DisplayRow<T>[] => {
+		if (displayRows) {
+			return displayRows;
+		}
+		if (rows) {
+			return rows.map((data, index) => ({
+				type: 'row' as const,
+				data,
+				index: startIndex + index
+			}));
+		}
+		return [];
+	});
+
+	const frozenRowsHeight = $derived(frozenRowCount * rowHeight);
+
+	// ============================================
+	// Scroll Handling
+	// ============================================
+
+	let scrollContainer: HTMLDivElement | undefined = $state();
+
+	function handleScroll(event: Event) {
+		const target = event.target as HTMLDivElement;
+		onscroll?.(target.scrollTop, target.scrollLeft);
+	}
+
+	// ============================================
+	// Helper to get row key
+	// ============================================
+
+	function getRowKey(row: T, index: number, isFrozen = false): string | number {
+		if (rowKey && typeof row === 'object' && row !== null && rowKey in row) {
+			return (row as Record<string, unknown>)[rowKey] as string | number;
+		}
+		return isFrozen ? `frozen-${index}` : startIndex + index;
+	}
+
+	function getDisplayRowKey(displayRow: DisplayRow<T>, index: number): string {
+		if (displayRow.type === 'group') {
+			return `group-${displayRow.group.field}-${displayRow.group.key}-${displayRow.group.level}`;
+		}
+		const row = displayRow.data;
+		if (rowKey && typeof row === 'object' && row !== null && rowKey in row) {
+			return `row-${(row as Record<string, unknown>)[rowKey]}`;
+		}
+		return `row-${displayRow.index}`;
+	}
+
+	function getDisplayRowHeight(displayRow: DisplayRow<T>): number {
+		return displayRow.type === 'group' ? groupHeaderHeight : rowHeight;
+	}
+</script>
+
+<div
+	bind:this={scrollContainer}
+	class="sg-body"
+	role="rowgroup"
+	onscroll={handleScroll}
+>
+	<!-- Frozen rows at the top (only in non-grouped mode) -->
+	{#if !isGrouped && frozenRowCount > 0 && frozenRows.length > 0}
+		<div class="sg-frozen-rows" style="height: {frozenRowsHeight}px;">
+			{#each frozenRows as row, index (getRowKey(row, index, true))}
+				<Row
+					{row}
+					{columns}
+					rowIndex={index}
+					{rowHeight}
+					{onrowclick}
+					{onrowdblclick}
+					{oncellclick}
+					{cell}
+					{onrowcontextmenu}
+				/>
+			{/each}
+		</div>
+	{/if}
+
+	<!-- Spacer for total scroll height -->
+	<div class="sg-scroll-spacer" style="height: {totalHeight}px;">
+		<!-- Positioned container for visible rows -->
+		<div class="sg-rows-container" style="transform: translateY({offsetY}px);">
+			{#each effectiveDisplayRows as displayRow, index (getDisplayRowKey(displayRow, index))}
+				{#if displayRow.type === 'group'}
+					<GroupHeader
+						group={displayRow.group}
+						height={groupHeaderHeight}
+						{groupHeader}
+						{rowHeight}
+					/>
+				{:else}
+					<Row
+						row={displayRow.data}
+						{columns}
+						rowIndex={displayRow.index + frozenRowCount}
+						{rowHeight}
+						{onrowclick}
+						{onrowdblclick}
+						{oncellclick}
+						{cell}
+						{onrowcontextmenu}
+					/>
+				{/if}
+			{/each}
+		</div>
+	</div>
+</div>
+
+<style>
+	.sg-body {
+		flex: 1;
+		overflow: auto;
+		position: relative;
+	}
+
+	.sg-frozen-rows {
+		position: sticky;
+		top: 0;
+		z-index: 3;
+		background: var(--sg-row-bg, #ffffff);
+		border-bottom: 2px solid var(--sg-frozen-border-color, #cbd5e1);
+		box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
+	}
+
+	.sg-scroll-spacer {
+		position: relative;
+		width: 100%;
+	}
+
+	.sg-rows-container {
+		position: absolute;
+		top: 0;
+		left: 0;
+		right: 0;
+		will-change: transform;
+	}
+</style>

package/dist/components/GridBody.svelte.d.ts

@@ -0,0 +1,49 @@
+import type { Snippet } from 'svelte';
+import type { ColumnDefinition, CellContext, GridEvents, DisplayRow, GroupInfo } from '../types.js';
+declare function $$render<T>(): {
+    props: {
+        /** Display rows (grouped mode) - takes precedence if provided */
+        displayRows?: DisplayRow<T>[];
+        /** Legacy: data rows (non-grouped mode) */
+        rows?: T[];
+        columns: ColumnDefinition<T>[];
+        rowKey: string;
+        startIndex: number;
+        totalHeight: number;
+        offsetY: number;
+        rowHeight: number;
+        /** Height of group header rows */
+        groupHeaderHeight?: number;
+        onrowclick?: GridEvents<T>["rowclick"];
+        onrowdblclick?: GridEvents<T>["rowdblclick"];
+        oncellclick?: GridEvents<T>["cellclick"];
+        onscroll?: (scrollTop: number, scrollLeft: number) => void;
+        cell?: Snippet<[CellContext<T>]>;
+        /** Custom group header snippet */
+        groupHeader?: Snippet<[GroupInfo<T>]>;
+        frozenRows?: T[];
+        frozenRowCount?: number;
+        onrowcontextmenu?: (row: T, rowIndex: number, event: MouseEvent) => void;
+    };
+    exports: {};
+    bindings: "";
+    slots: {};
+    events: {};
+};
+declare class __sveltets_Render<T> {
+    props(): ReturnType<typeof $$render<T>>['props'];
+    events(): ReturnType<typeof $$render<T>>['events'];
+    slots(): ReturnType<typeof $$render<T>>['slots'];
+    bindings(): "";
+    exports(): {};
+}
+interface $$IsomorphicComponent {
+    new <T>(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>(internal: unknown, props: ReturnType<__sveltets_Render<T>['props']> & {}): ReturnType<__sveltets_Render<T>['exports']>;
+    z_$$bindings?: ReturnType<__sveltets_Render<any>['bindings']>;
+}
+declare const GridBody: $$IsomorphicComponent;
+type GridBody<T> = InstanceType<typeof GridBody<T>>;
+export default GridBody;

package/dist/components/GridHeader.svelte

@@ -0,0 +1,99 @@
+<script lang="ts" generics="T">
+	import { getContext } from 'svelte';
+	import type { Snippet } from 'svelte';
+	import type { ColumnDefinition, GridEvents, SortDirection } from '../types.js';
+	import { GRID_CONTEXT_KEY, type GridStateManager } from '../state/gridState.svelte.js';
+	import HeaderCell from './HeaderCell.svelte';
+
+	interface Props {
+		columns: ColumnDefinition<T>[];
+		onheaderclick?: GridEvents<T>['headerclick'];
+		headerCell?: Snippet<[ColumnDefinition<T>]>;
+		resizable?: boolean;
+	}
+
+	let { columns, onheaderclick, headerCell, resizable = false }: Props = $props();
+
+	// Get grid state from context
+	const gridState = getContext<GridStateManager<T>>(GRID_CONTEXT_KEY);
+
+	// ============================================
+	// Sort Handler
+	// ============================================
+
+	function handleSort(field: string, currentDirection: SortDirection, multiSort: boolean) {
+		gridState.toggleSort(field, multiSort);
+	}
+
+	// ============================================
+	// Resize State & Handlers
+	// ============================================
+
+	let resizing = $state<{
+		field: string;
+		startX: number;
+		startWidth: number;
+	} | null>(null);
+
+	function handleResizeStart(field: string, startX: number, startWidth: number) {
+		resizing = { field, startX, startWidth };
+
+		// Add global listeners for resize
+		document.addEventListener('mousemove', handleResizeMove);
+		document.addEventListener('mouseup', handleResizeEnd);
+	}
+
+	function handleResizeMove(event: MouseEvent) {
+		if (!resizing) return;
+
+		const delta = event.clientX - resizing.startX;
+		const newWidth = Math.max(50, resizing.startWidth + delta);
+		gridState.setColumnWidth(resizing.field, newWidth);
+	}
+
+	function handleResizeEnd() {
+		resizing = null;
+		document.removeEventListener('mousemove', handleResizeMove);
+		document.removeEventListener('mouseup', handleResizeEnd);
+	}
+</script>
+
+<div class="sg-header" role="rowgroup">
+	<div class="sg-header-row" role="row">
+		{#each columns as column, index (column.field)}
+			{@const frozenLeft = column.frozen === true || column.frozen === 'left'}
+			{@const frozenRight = column.frozen === 'right'}
+			{@const frozenPosition = frozenLeft
+				? { side: 'left' as const, offset: gridState.getFrozenLeftPosition(column.field) }
+				: frozenRight
+					? { side: 'right' as const, offset: gridState.getFrozenRightPosition(column.field) }
+					: undefined}
+			<HeaderCell
+				{column}
+				{index}
+				columnWidth={gridState.getColumnWidth(column.field)}
+				{onheaderclick}
+				{headerCell}
+				onsort={column.sortable ? handleSort : undefined}
+				sortDirection={gridState.getSortDirection(column.field)}
+				sortIndex={gridState.getSortIndex(column.field)}
+				onresizestart={resizable ? handleResizeStart : undefined}
+				{frozenPosition}
+			/>
+		{/each}
+	</div>
+</div>
+
+<style>
+	.sg-header {
+		flex-shrink: 0;
+		background: var(--sg-header-bg, linear-gradient(to bottom, #f8fafc, #f1f5f9));
+		border-bottom: 1px solid var(--sg-header-border, #cbd5e1);
+		box-shadow: var(--sg-header-shadow, 0 1px 2px rgba(0, 0, 0, 0.05));
+	}
+
+	.sg-header-row {
+		display: flex;
+		min-width: 100%;
+	}
+</style>

package/dist/components/GridHeader.svelte.d.ts

@@ -0,0 +1,31 @@
+import type { Snippet } from 'svelte';
+import type { ColumnDefinition, GridEvents } from '../types.js';
+declare function $$render<T>(): {
+    props: {
+        columns: ColumnDefinition<T>[];
+        onheaderclick?: GridEvents<T>["headerclick"];
+        headerCell?: Snippet<[ColumnDefinition<T>]>;
+        resizable?: boolean;
+    };
+    exports: {};
+    bindings: "";
+    slots: {};
+    events: {};
+};
+declare class __sveltets_Render<T> {
+    props(): ReturnType<typeof $$render<T>>['props'];
+    events(): ReturnType<typeof $$render<T>>['events'];
+    slots(): ReturnType<typeof $$render<T>>['slots'];
+    bindings(): "";
+    exports(): {};
+}
+interface $$IsomorphicComponent {
+    new <T>(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>(internal: unknown, props: ReturnType<__sveltets_Render<T>['props']> & {}): ReturnType<__sveltets_Render<T>['exports']>;
+    z_$$bindings?: ReturnType<__sveltets_Render<any>['bindings']>;
+}
+declare const GridHeader: $$IsomorphicComponent;
+type GridHeader<T> = InstanceType<typeof GridHeader<T>>;
+export default GridHeader;

package/dist/components/GroupHeader.svelte

@@ -0,0 +1,192 @@
+<script lang="ts" generics="T">
+	import type { Snippet } from 'svelte';
+	import type { GroupInfo } from '../types.js';
+
+	interface Props {
+		/** Group information */
+		group: GroupInfo<T>;
+		/** Height of the group header row */
+		height: number;
+		/** Custom header content snippet */
+		groupHeader?: Snippet<[GroupInfo<T>]>;
+		/** Row height (for calculating indent) */
+		rowHeight?: number;
+	}
+
+	let { group, height, groupHeader, rowHeight = 40 }: Props = $props();
+
+	// ============================================
+	// Event Handlers
+	// ============================================
+
+	function handleClick(event: MouseEvent) {
+		event.stopPropagation();
+		group.toggle();
+	}
+
+	function handleKeydown(event: KeyboardEvent) {
+		if (event.key === 'Enter' || event.key === ' ') {
+			event.preventDefault();
+			group.toggle();
+		} else if (event.key === 'ArrowRight' && !group.isOpen) {
+			event.preventDefault();
+			group.toggle();
+		} else if (event.key === 'ArrowLeft' && group.isOpen) {
+			event.preventDefault();
+			group.toggle();
+		}
+	}
+
+	// ============================================
+	// Computed
+	// ============================================
+
+	const indentPx = $derived(group.level * 20);
+
+	const toggleIcon = $derived(group.isOpen ? '▼' : '▶');
+
+	// Default header text
+	const defaultHeaderText = $derived(`${group.key} (${group.count})`);
+</script>
+
+<div
+	class="sg-group-header"
+	class:sg-group-header-open={group.isOpen}
+	class:sg-group-header-collapsed={!group.isOpen}
+	role="row"
+	aria-expanded={group.isOpen}
+	tabindex="0"
+	style="height: {height}px; padding-left: {indentPx}px;"
+	onclick={handleClick}
+	onkeydown={handleKeydown}
+>
+	<button
+		class="sg-group-toggle"
+		type="button"
+		aria-label={group.isOpen ? 'Collapse group' : 'Expand group'}
+		tabindex="-1"
+	>
+		<span class="sg-group-toggle-icon">{toggleIcon}</span>
+	</button>
+
+	<div class="sg-group-header-content">
+		{#if groupHeader}
+			{@render groupHeader(group)}
+		{:else}
+			<span class="sg-group-field">{group.field}:</span>
+			<span class="sg-group-key">{group.key}</span>
+			<span class="sg-group-count">({group.count})</span>
+		{/if}
+	</div>
+
+	{#if group.aggregates && Object.keys(group.aggregates).length > 0}
+		<div class="sg-group-aggregates">
+			{#each Object.entries(group.aggregates) as [field, agg]}
+				{#if agg.sum !== undefined}
+					<span class="sg-group-agg" title="{field}: sum">
+						Σ {agg.sum.toLocaleString()}
+					</span>
+				{/if}
+			{/each}
+		</div>
+	{/if}
+</div>
+
+<style>
+	.sg-group-header {
+		display: flex;
+		align-items: center;
+		gap: 8px;
+		background: var(--sg-group-header-bg, #f1f5f9);
+		border-bottom: 1px solid var(--sg-border-color, #e2e8f0);
+		font-weight: 600;
+		font-size: 13px;
+		color: var(--sg-group-header-text, #334155);
+		cursor: pointer;
+		user-select: none;
+		transition: background-color 0.15s ease;
+		box-sizing: border-box;
+		min-width: 100%;
+	}
+
+	.sg-group-header:hover {
+		background: var(--sg-group-header-hover-bg, #e2e8f0);
+	}
+
+	.sg-group-header:focus {
+		outline: 2px solid var(--sg-primary-color, #3b82f6);
+		outline-offset: -2px;
+	}
+
+	.sg-group-header-collapsed {
+		background: var(--sg-group-header-collapsed-bg, #f8fafc);
+	}
+
+	.sg-group-toggle {
+		display: flex;
+		align-items: center;
+		justify-content: center;
+		width: 20px;
+		height: 20px;
+		padding: 0;
+		margin-left: 8px;
+		border: none;
+		background: transparent;
+		cursor: pointer;
+		color: var(--sg-group-toggle-color, #64748b);
+		font-size: 10px;
+		transition: transform 0.15s ease, color 0.15s ease;
+		flex-shrink: 0;
+	}
+
+	.sg-group-toggle:hover {
+		color: var(--sg-group-toggle-hover-color, #334155);
+	}
+
+	.sg-group-toggle-icon {
+		transition: transform 0.15s ease;
+	}
+
+	.sg-group-header-content {
+		display: flex;
+		align-items: center;
+		gap: 6px;
+		flex: 1;
+		overflow: hidden;
+	}
+
+	.sg-group-field {
+		color: var(--sg-group-field-color, #64748b);
+		font-weight: 500;
+		font-size: 12px;
+	}
+
+	.sg-group-key {
+		font-weight: 600;
+		color: var(--sg-group-key-color, #1e293b);
+		white-space: nowrap;
+		overflow: hidden;
+		text-overflow: ellipsis;
+	}
+
+	.sg-group-count {
+		color: var(--sg-group-count-color, #94a3b8);
+		font-weight: 400;
+		font-size: 12px;
+		flex-shrink: 0;
+	}
+
+	.sg-group-aggregates {
+		display: flex;
+		align-items: center;
+		gap: 12px;
+		margin-right: 12px;
+		font-size: 12px;
+		color: var(--sg-group-agg-color, #64748b);
+	}
+
+	.sg-group-agg {
+		font-weight: 500;
+		font-variant-numeric: tabular-nums;
+	}
+</style>

package/dist/components/GroupHeader.svelte.d.ts

@@ -0,0 +1,35 @@
+import type { Snippet } from 'svelte';
+import type { GroupInfo } from '../types.js';
+declare function $$render<T>(): {
+    props: {
+        /** Group information */
+        group: GroupInfo<T>;
+        /** Height of the group header row */
+        height: number;
+        /** Custom header content snippet */
+        groupHeader?: Snippet<[GroupInfo<T>]>;
+        /** Row height (for calculating indent) */
+        rowHeight?: number;
+    };
+    exports: {};
+    bindings: "";
+    slots: {};
+    events: {};
+};
+declare class __sveltets_Render<T> {
+    props(): ReturnType<typeof $$render<T>>['props'];
+    events(): ReturnType<typeof $$render<T>>['events'];
+    slots(): ReturnType<typeof $$render<T>>['slots'];
+    bindings(): "";
+    exports(): {};
+}
+interface $$IsomorphicComponent {
+    new <T>(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>(internal: unknown, props: ReturnType<__sveltets_Render<T>['props']> & {}): ReturnType<__sveltets_Render<T>['exports']>;
+    z_$$bindings?: ReturnType<__sveltets_Render<any>['bindings']>;
+}
+declare const GroupHeader: $$IsomorphicComponent;
+type GroupHeader<T> = InstanceType<typeof GroupHeader<T>>;
+export default GroupHeader;