@shotleybuilder/svelte-table-kit 0.2.0 → 0.4.0

package/README.md

@@ -19,10 +19,11 @@ Svelte Table Kit brings Airtable-like functionality to your Svelte applications
 - ↔️ **Column spacing control** - 3 sizes: narrow, normal, wide
 - 🔍 **Advanced filtering** - 12 operators with AND/OR logic
 - 📊 **Multi-level grouping** - Up to 3 nested levels (like Airtable)
-- ⬆️ Multi-column sorting with visual indicators
+- ⬆️ **Flexible sorting** - Column header or Airtable-style sort control
 - 📄 Pagination with customizable page sizes
 - 💾 LocalStorage persistence for all user preferences
 - ✂️ Text truncation with ellipsis for long content
+- 📋 **Column context menu** - Quick access to sort, filter, group, and hide actions
 
 **Advanced Filtering:**
 - 12 filter operators: equals, contains, starts with, greater than, etc.
@@ -31,6 +32,13 @@ Svelte Table Kit brings Airtable-like functionality to your Svelte applications
 - Active filter count badge
 - Real-time filtering as you type
 
+**Sorting Options:**
+- **Column header mode** (default) - Click headers to sort with ↑↓↕ indicators
+- **Airtable-style control** - Dedicated sort dropdown with multi-level sorting
+- Choose column and direction (A → Z or Z → A)
+- Multiple sort levels applied top to bottom
+- Collapsible SortBar UI
+
 **Grouping & Hierarchy:**
 - Group by up to 3 columns simultaneously
 - Expand/collapse groups with chevron buttons
@@ -38,6 +46,15 @@ Svelte Table Kit brings Airtable-like functionality to your Svelte applications
 - Item count per group
 - Collapsible GroupBar UI
 
+**Column Context Menu:**
+- Hover over column headers to reveal menu trigger (chevron icon)
+- **Sort A → Z / Sort Z → A** - Quick sort with active state indication
+- **Filter by this field** - Creates pre-filled filter condition
+- **Group by this field** - Adds column to grouping configuration
+- **Hide field** - Remove column from view
+- Actions conditionally shown based on feature flags
+- Seamlessly integrates with existing controls
+
 **Developer Experience:**
 - 🎨 Headless design - style it your way
 - 📦 Built on TanStack Table v8 (battle-tested, powerful)
@@ -107,19 +124,21 @@ The simplest way to use TableKit:
 
 ### With Configuration
 
-Use AI-generated or predefined configurations:
+Customize initial table state programmatically:
 
 ```svelte
 <script>
-  import { TableKit, presets } from '@shotleybuilder/svelte-table-kit';
-
-  const config = presets.dashboard; // or generate with AI
+  import { TableKit } from '@shotleybuilder/svelte-table-kit';
 </script>
 
 <TableKit
   {data}
   {columns}
-  {config}
+  config={{
+    defaultColumnOrder: ['name', 'role', 'age', 'id'],  // Set initial column order
+    defaultColumnSizing: { name: 200, role: 150 },      // Set initial column widths
+    defaultVisibleColumns: ['name', 'role', 'age']      // Hide 'id' column initially
+  }}
   features={{
     columnVisibility: true,
     filtering: true,
@@ -143,6 +162,7 @@ Control which features are enabled:
     columnReordering: true,
     filtering: true,
     sorting: true,
+    sortingMode: 'control',  // 'header' (default) or 'control' (Airtable-style)
     pagination: true,
     rowSelection: false,
     grouping: false
@@ -150,6 +170,10 @@ Control which features are enabled:
 />
 ```
 
+**Sorting Modes:**
+- `sortingMode: 'header'` - Click column headers to sort (default behavior)
+- `sortingMode: 'control'` - Use Airtable-style sort dropdown with multi-level support
+
 ### Event Handlers
 
 Listen to table events:

package/dist/TableKit.svelte

@@ -23,8 +23,11 @@ import {
 import { applyFilters } from "./utils/filters";
 import FilterBar from "./components/FilterBar.svelte";
 import GroupBar from "./components/GroupBar.svelte";
+import SortBar from "./components/SortBar.svelte";
+import ColumnMenu from "./components/ColumnMenu.svelte";
 export let data = [];
 export let columns = [];
+export let config = void 0;
 export let storageKey = "table-kit";
 export let persistState = true;
 export let align = "left";
@@ -36,6 +39,8 @@ export let features = {
   columnReordering: true,
   filtering: true,
   sorting: true,
+  sortingMode: "header",
+  // 'header' or 'control'
   pagination: true
 };
 export let onRowClick = void 0;
@@ -52,12 +57,14 @@ let columnFilters = writable(
   persistState && storageKey ? loadColumnFilters(storageKey) : []
 );
 let columnOrder = writable(
-  persistState && storageKey ? loadColumnOrder(storageKey) : []
+  persistState && storageKey ? loadColumnOrder(storageKey) : config?.defaultColumnOrder || []
 );
 let filterConditions = writable([]);
 let filterLogic = writable("and");
+let filterBarExpanded = false;
 let grouping = writable([]);
 let expanded = writable(true);
+let groupBarExpanded = false;
 $: horizontalPadding = columnSpacing === "narrow" ? 0.5 : columnSpacing === "wide" ? 2 : 1;
 $: verticalPadding = rowHeight === "short" ? 0.375 : rowHeight === "tall" ? 1 : rowHeight === "extra_tall" ? 1.5 : 0.75;
 $: filteredData = applyFilters(data, $filterConditions, $filterLogic);
@@ -68,6 +75,48 @@ $: if (persistState && storageKey && isBrowser) {
   saveColumnOrder(storageKey, $columnOrder);
 }
 let showColumnPicker = false;
+let columnPickerButton = null;
+let columnPickerPosition = { top: 0, left: 0 };
+let openColumnMenuId = null;
+function generateFilterId() {
+  return `filter-${Date.now()}-${Math.random().toString(36).substr(2, 9)}`;
+}
+function addFilterForColumn(columnId) {
+  const newCondition = {
+    id: generateFilterId(),
+    field: columnId,
+    operator: "equals",
+    value: ""
+  };
+  filterConditions.update((conditions) => [...conditions, newCondition]);
+  filterBarExpanded = true;
+}
+function addGroupForColumn(columnId) {
+  grouping.update((groups) => {
+    if (groups.includes(columnId)) {
+      return groups;
+    }
+    if (groups.length >= 3) {
+      return groups;
+    }
+    return [...groups, columnId];
+  });
+  groupBarExpanded = true;
+}
+function updateColumnPickerPosition() {
+  if (columnPickerButton && showColumnPicker) {
+    const rect = columnPickerButton.getBoundingClientRect();
+    columnPickerPosition = {
+      top: rect.bottom + 8,
+      // 8px margin (0.5rem)
+      left: rect.right - 224
+      // 224px = 14rem dropdown width
+    };
+  }
+}
+$: if (showColumnPicker) {
+  updateColumnPickerPosition();
+}
 let showRowHeightMenu = false;
 let showColumnSpacingMenu = false;
 let draggedColumnId = null;
@@ -194,6 +243,7 @@ $: if ($columnOrder.length === 0 && columns.length > 0) {
   columnOrder.set(columns.map((col) => col.accessorKey || col.id));
 }
 $: hasActiveFilters = $filterConditions.length > 0;
+$: totalTableWidth = $table.getVisibleLeafColumns().reduce((sum, col) => sum + col.getSize(), 0);
 $: if (onStateChange) {
   onStateChange({
     columnVisibility: $columnVisibility,
@@ -208,7 +258,7 @@ $: if (onStateChange) {
 
 <div class="table-kit-container align-{align}">
 	<!-- Filters and Controls -->
-	{#if features.filtering !== false || features.grouping !== false || features.columnVisibility !== false}
+	{#if features.filtering !== false || features.grouping !== false || features.columnVisibility !== false || (features.sorting !== false && features.sortingMode === 'control')}
 		<div class="table-kit-toolbar">
 			<!-- Filter Controls -->
 			{#if features.filtering !== false}
@@ -219,6 +269,19 @@ $: if (onStateChange) {
 						onConditionsChange={(newConditions) => filterConditions.set(newConditions)}
 						logic={$filterLogic}
 						onLogicChange={(newLogic) => filterLogic.set(newLogic)}
+						isExpanded={filterBarExpanded}
+						onExpandedChange={(expanded) => (filterBarExpanded = expanded)}
+					/>
+				</div>
+			{/if}
+
+			<!-- Sort Controls (when sortingMode is 'control') -->
+			{#if features.sorting !== false && features.sortingMode === 'control'}
+				<div class="table-kit-sorts">
+					<SortBar
+						{columns}
+						sorting={$sorting}
+						onSortingChange={(newSorting) => sorting.set(newSorting)}
 					/>
 				</div>
 			{/if}
@@ -230,6 +293,8 @@ $: if (onStateChange) {
 						{columns}
 						grouping={$grouping}
 						onGroupingChange={(newGrouping) => grouping.set(newGrouping)}
+						isExpanded={groupBarExpanded}
+						onExpandedChange={(expanded) => (groupBarExpanded = expanded)}
 					/>
 				</div>
 			{/if}
@@ -405,6 +470,7 @@ $: if (onStateChange) {
 				<div class="table-kit-column-picker">
 					<div class="relative">
 						<button
+							bind:this={columnPickerButton}
 							on:click={() => (showColumnPicker = !showColumnPicker)}
 							class="column-picker-btn"
 						>
@@ -423,7 +489,10 @@ $: if (onStateChange) {
 							<!-- svelte-ignore a11y-click-events-have-key-events -->
 							<!-- svelte-ignore a11y-no-static-element-interactions -->
 							<div class="backdrop" on:click={() => (showColumnPicker = false)} />
-							<div class="column-picker-dropdown">
+							<div
+								class="column-picker-dropdown"
+								style="top: {columnPickerPosition.top}px; left: {columnPickerPosition.left}px;"
+							>
 								<div class="dropdown-header">
 									<span>Toggle Columns</span>
 									<div class="header-actions">
@@ -465,7 +534,7 @@ $: if (onStateChange) {
 		</div>
 	{:else}
 		<div class="table-kit-scroll">
-			<table class="table-kit-table">
+			<table class="table-kit-table" style="width: {totalTableWidth}px;">
 				<thead>
 					{#each $table.getHeaderGroups() as headerGroup}
 						<tr>
@@ -477,34 +546,97 @@ $: if (onStateChange) {
 									style="width: {header.getSize()}px;"
 								>
 									{#if !header.isPlaceholder}
-										<div
-											class="th-content"
-											style="padding: {verticalPadding}rem {horizontalPadding}rem; cursor: {features.columnReordering !==
-											false
-												? 'grab'
-												: 'default'};"
-											draggable={features.columnReordering !== false}
-											on:dragstart={() => handleDragStart(header.column.id)}
-										>
-											<button
-												class="sort-btn"
-												class:sortable={header.column.getCanSort()}
-												on:click={header.column.getToggleSortingHandler()}
+										<div class="th-wrapper">
+											<div
+												class="th-content"
+												style="padding: {verticalPadding}rem {horizontalPadding}rem; cursor: {features.columnReordering !==
+												false
+													? 'grab'
+													: 'default'};"
+												draggable={features.columnReordering !== false}
+												on:dragstart={() => handleDragStart(header.column.id)}
 											>
-												<span class="header-text">
-													<svelte:component
-														this={flexRender(header.column.columnDef.header, header.getContext())}
-													/>
-												</span>
-												{#if features.sorting !== false && header.column.getCanSort()}
-													<span class="sort-icon">
-														{{
-															asc: '↑',
-															desc: '↓'
-														}[header.column.getIsSorted()] ?? '↕'}
+												{#if features.sorting !== false && features.sortingMode !== 'control' && header.column.getCanSort()}
+													<button
+														class="sort-btn"
+														class:sortable={header.column.getCanSort()}
+														on:click={header.column.getToggleSortingHandler()}
+													>
+														<span class="header-text">
+															<svelte:component
+																this={flexRender(header.column.columnDef.header, header.getContext())}
+															/>
+														</span>
+														<span class="sort-icon">
+															{{
+																asc: '↑',
+																desc: '↓'
+															}[header.column.getIsSorted()] ?? '↕'}
+														</span>
+													</button>
+												{:else}
+													<span class="header-text">
+														<svelte:component
+															this={flexRender(header.column.columnDef.header, header.getContext())}
+														/>
 													</span>
 												{/if}
-											</button>
+
+												<!-- Column Menu Trigger -->
+												<button
+													class="column-menu-trigger"
+													on:click|stopPropagation={() => {
+														openColumnMenuId =
+															openColumnMenuId === header.column.id ? null : header.column.id;
+													}}
+													aria-label="Column options"
+												>
+													<svg
+														width="12"
+														height="12"
+														viewBox="0 0 12 12"
+														fill="none"
+														xmlns="http://www.w3.org/2000/svg"
+													>
+														<path
+															d="M3 5L6 8L9 5"
+															stroke="currentColor"
+															stroke-width="1.5"
+															stroke-linecap="round"
+															stroke-linejoin="round"
+														/>
+													</svg>
+												</button>
+											</div>
+
+											<!-- Column Menu -->
+											<ColumnMenu
+												column={header.column}
+												isOpen={openColumnMenuId === header.column.id}
+												canSort={features.sorting !== false}
+												canFilter={features.filtering !== false}
+												canGroup={features.grouping !== false}
+												on:sort={(e) => {
+													const direction = e.detail.direction;
+													header.column.toggleSorting(direction === 'desc');
+													openColumnMenuId = null;
+												}}
+												on:filter={() => {
+													addFilterForColumn(header.column.id);
+													openColumnMenuId = null;
+												}}
+												on:group={() => {
+													addGroupForColumn(header.column.id);
+													openColumnMenuId = null;
+												}}
+												on:hide={() => {
+													header.column.toggleVisibility(false);
+													openColumnMenuId = null;
+												}}
+												on:close={() => {
+													openColumnMenuId = null;
+												}}
+											/>
 										</div>
 										<!-- Resize Handle -->
 										{#if features.columnResizing !== false && header.column.getCanResize()}
@@ -822,9 +954,9 @@ $: if (onStateChange) {
 	}
 
 	.column-picker-dropdown {
-		position: absolute;
-		right: 0;
-		z-index: 20;
+		position: fixed; /* Use fixed to break out of container constraints */
+		right: auto;
+		z-index: 30;
 		margin-top: 0.5rem;
 		width: 14rem;
 		border-radius: 0.375rem;
@@ -871,7 +1003,8 @@ $: if (onStateChange) {
 	}
 
 	.column-list {
-		max-height: 16rem;
+		min-height: 12rem; /* Ensure picker stays usable even when all columns hidden */
+		max-height: 20rem;
 		overflow-y: auto;
 	}
 
@@ -910,9 +1043,9 @@ $: if (onStateChange) {
 	}
 
 	.table-kit-table {
-		width: auto;
 		border-collapse: collapse;
 		table-layout: fixed;
+		min-width: 100%; /* Ensure table is at least full container width */
 	}
 
 	thead {
@@ -1006,6 +1139,39 @@ $: if (onStateChange) {
 		color: #9ca3af;
 	}
 
+	.th-wrapper {
+		position: relative;
+		display: flex;
+		align-items: center;
+		width: 100%;
+	}
+
+	.column-menu-trigger {
+		flex-shrink: 0;
+		display: flex;
+		align-items: center;
+		justify-content: center;
+		padding: 0.25rem;
+		margin-left: 0.25rem;
+		background: transparent;
+		border: none;
+		border-radius: 0.25rem;
+		cursor: pointer;
+		color: #9ca3af;
+		transition: all 0.15s;
+		opacity: 0;
+	}
+
+	.th-wrapper:hover .column-menu-trigger,
+	.column-menu-trigger:focus {
+		opacity: 1;
+	}
+
+	.column-menu-trigger:hover {
+		background-color: #f3f4f6;
+		color: #374151;
+	}
+
 	.resize-handle {
 		position: absolute;
 		top: 0;

package/dist/TableKit.svelte.d.ts

@@ -5,6 +5,7 @@ declare class __sveltets_Render<T> {
     props(): {
         data?: T[] | undefined;
         columns?: ColumnDef<T>[] | undefined;
+        config?: TableKitProps<T_1>["config"];
         storageKey?: TableKitProps<T_1>["storageKey"];
         persistState?: TableKitProps<T_1>["persistState"];
         align?: TableKitProps<T_1>["align"];

package/dist/components/ColumnMenu.svelte

@@ -0,0 +1,271 @@
+<script>import { createEventDispatcher, onDestroy, onMount } from "svelte";
+import { browser } from "$app/environment";
+export let column;
+export let isOpen = false;
+export let canSort = true;
+export let canFilter = true;
+export let canGroup = true;
+const dispatch = createEventDispatcher();
+let menuElement;
+$: currentSort = column.getIsSorted();
+$: canSortColumn = canSort && column.getCanSort();
+$: canFilterColumn = canFilter;
+$: canGroupColumn = canGroup;
+function handleSortAsc() {
+  dispatch("sort", { direction: "asc" });
+  dispatch("close");
+}
+function handleSortDesc() {
+  dispatch("sort", { direction: "desc" });
+  dispatch("close");
+}
+function handleFilter() {
+  dispatch("filter");
+  dispatch("close");
+}
+function handleGroup() {
+  dispatch("group");
+  dispatch("close");
+}
+function handleHideColumn() {
+  dispatch("hide");
+  dispatch("close");
+}
+function handleClickOutside(event) {
+  if (menuElement && !menuElement.contains(event.target)) {
+    dispatch("close");
+  }
+}
+function handleKeydown(event) {
+  if (event.key === "Escape") {
+    dispatch("close");
+  }
+}
+$: {
+  if (browser) {
+    if (isOpen) {
+      setTimeout(() => {
+        document.addEventListener("mousedown", handleClickOutside);
+        document.addEventListener("keydown", handleKeydown);
+      }, 0);
+    } else {
+      document.removeEventListener("mousedown", handleClickOutside);
+      document.removeEventListener("keydown", handleKeydown);
+    }
+  }
+}
+onDestroy(() => {
+  if (browser) {
+    document.removeEventListener("mousedown", handleClickOutside);
+    document.removeEventListener("keydown", handleKeydown);
+  }
+});
+</script>
+
+{#if isOpen}
+	<div class="column-menu" bind:this={menuElement}>
+		<!-- Sort Actions -->
+		{#if canSortColumn}
+			<button
+				class="menu-item"
+				class:active={currentSort === 'asc'}
+				on:click={handleSortAsc}
+			>
+				<svg
+					class="menu-icon"
+					width="16"
+					height="16"
+					viewBox="0 0 16 16"
+					fill="none"
+					xmlns="http://www.w3.org/2000/svg"
+				>
+					<path
+						d="M8 12V4M8 4L5 7M8 4L11 7"
+						stroke="currentColor"
+						stroke-width="1.5"
+						stroke-linecap="round"
+						stroke-linejoin="round"
+					/>
+				</svg>
+				<span>Sort A → Z</span>
+				{#if currentSort === 'asc'}
+					<span class="check-icon">✓</span>
+				{/if}
+			</button>
+
+			<button
+				class="menu-item"
+				class:active={currentSort === 'desc'}
+				on:click={handleSortDesc}
+			>
+				<svg
+					class="menu-icon"
+					width="16"
+					height="16"
+					viewBox="0 0 16 16"
+					fill="none"
+					xmlns="http://www.w3.org/2000/svg"
+				>
+					<path
+						d="M8 4V12M8 12L11 9M8 12L5 9"
+						stroke="currentColor"
+						stroke-width="1.5"
+						stroke-linecap="round"
+						stroke-linejoin="round"
+					/>
+				</svg>
+				<span>Sort Z → A</span>
+				{#if currentSort === 'desc'}
+					<span class="check-icon">✓</span>
+				{/if}
+			</button>
+
+			<div class="menu-divider"></div>
+		{/if}
+
+		<!-- Filter by this field -->
+		{#if canFilterColumn}
+			<button class="menu-item" on:click={handleFilter}>
+				<svg
+					class="menu-icon"
+					width="16"
+					height="16"
+					viewBox="0 0 16 16"
+					fill="none"
+					xmlns="http://www.w3.org/2000/svg"
+				>
+					<path
+						d="M2 3h12M4 6h8M6 9h4M7 12h2"
+						stroke="currentColor"
+						stroke-width="1.5"
+						stroke-linecap="round"
+						stroke-linejoin="round"
+					/>
+				</svg>
+				<span>Filter by this field</span>
+			</button>
+
+			<div class="menu-divider"></div>
+		{/if}
+
+		<!-- Group by this field -->
+		{#if canGroupColumn}
+			<button class="menu-item" on:click={handleGroup}>
+				<svg
+					class="menu-icon"
+					width="16"
+					height="16"
+					viewBox="0 0 16 16"
+					fill="none"
+					xmlns="http://www.w3.org/2000/svg"
+				>
+					<path
+						d="M2 4h12M4 8h8M6 12h4"
+						stroke="currentColor"
+						stroke-width="1.5"
+						stroke-linecap="round"
+						stroke-linejoin="round"
+					/>
+				</svg>
+				<span>Group by this field</span>
+			</button>
+
+			<div class="menu-divider"></div>
+		{/if}
+
+		<!-- Hide Field -->
+		<button class="menu-item" on:click={handleHideColumn}>
+			<svg
+				class="menu-icon"
+				width="16"
+				height="16"
+				viewBox="0 0 16 16"
+				fill="none"
+				xmlns="http://www.w3.org/2000/svg"
+			>
+				<path
+					d="M2 8C2 8 4.5 3 8 3C11.5 3 14 8 14 8C14 8 11.5 13 8 13C4.5 13 2 8 2 8Z"
+					stroke="currentColor"
+					stroke-width="1.5"
+					stroke-linecap="round"
+					stroke-linejoin="round"
+				/>
+				<circle cx="8" cy="8" r="2" stroke="currentColor" stroke-width="1.5" />
+				<line x1="2" y1="2" x2="14" y2="14" stroke="currentColor" stroke-width="1.5" />
+			</svg>
+			<span>Hide field</span>
+		</button>
+	</div>
+{/if}
+
+<style>
+	.column-menu {
+		position: absolute;
+		top: 100%;
+		right: 0;
+		margin-top: 0.25rem;
+		min-width: 12rem;
+		background: white;
+		border: 1px solid rgba(0, 0, 0, 0.1);
+		border-radius: 0.375rem;
+		box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
+		padding: 0.25rem;
+		z-index: 50;
+	}
+
+	.menu-item {
+		display: flex;
+		align-items: center;
+		gap: 0.75rem;
+		width: 100%;
+		padding: 0.5rem 0.75rem;
+		border: none;
+		background: transparent;
+		text-align: left;
+		font-size: 0.875rem;
+		cursor: pointer;
+		border-radius: 0.25rem;
+		transition: background-color 0.15s;
+		color: #374151;
+		position: relative;
+	}
+
+	.menu-item:hover {
+		background-color: #f3f4f6;
+	}
+
+	.menu-item.active {
+		background-color: #eff6ff;
+		color: #1e40af;
+	}
+
+	.menu-item.active:hover {
+		background-color: #dbeafe;
+	}
+
+	.menu-icon {
+		flex-shrink: 0;
+		color: #6b7280;
+	}
+
+	.menu-item:hover .menu-icon {
+		color: #374151;
+	}
+
+	.menu-item.active .menu-icon {
+		color: #3b82f6;
+	}
+
+	.check-icon {
+		margin-left: auto;
+		color: #3b82f6;
+		font-weight: bold;
+		font-size: 1rem;
+	}
+
+	.menu-divider {
+		height: 1px;
+		background-color: #e5e7eb;
+		margin: 0.25rem 0;
+	}
+</style>

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

@@ -0,0 +1,29 @@
+import { SvelteComponent } from "svelte";
+import type { Column } from '@tanstack/svelte-table';
+declare const __propDef: {
+    props: {
+        column: Column<any>;
+        isOpen?: boolean;
+        canSort?: boolean;
+        canFilter?: boolean;
+        canGroup?: boolean;
+    };
+    events: {
+        sort: CustomEvent<any>;
+        close: CustomEvent<any>;
+        filter: CustomEvent<any>;
+        group: CustomEvent<any>;
+        hide: CustomEvent<any>;
+    } & {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+    exports?: {} | undefined;
+    bindings?: string | undefined;
+};
+export type ColumnMenuProps = typeof __propDef.props;
+export type ColumnMenuEvents = typeof __propDef.events;
+export type ColumnMenuSlots = typeof __propDef.slots;
+export default class ColumnMenu extends SvelteComponent<ColumnMenuProps, ColumnMenuEvents, ColumnMenuSlots> {
+}
+export {};

package/dist/components/FilterBar.svelte

@@ -4,7 +4,8 @@ export let conditions = [];
 export let onConditionsChange;
 export let logic = "and";
 export let onLogicChange;
-let isExpanded = false;
+export let isExpanded = false;
+export let onExpandedChange = void 0;
 function generateId() {
   return `filter-${Date.now()}-${Math.random().toString(36).substr(2, 9)}`;
 }
@@ -16,7 +17,13 @@ function addCondition() {
     value: ""
   };
   onConditionsChange([...conditions, newCondition]);
-  isExpanded = true;
+  setExpanded(true);
+}
+function setExpanded(value) {
+  isExpanded = value;
+  if (onExpandedChange) {
+    onExpandedChange(value);
+  }
 }
 function updateCondition(index, updated) {
   const newConditions = [...conditions];
@@ -27,12 +34,12 @@ function removeCondition(index) {
   const newConditions = conditions.filter((_, i) => i !== index);
   onConditionsChange(newConditions);
   if (newConditions.length === 0) {
-    isExpanded = false;
+    setExpanded(false);
   }
 }
 function clearAllConditions() {
   onConditionsChange([]);
-  isExpanded = false;
+  setExpanded(false);
 }
 $: hasConditions = conditions.length > 0;
 $: filterCount = conditions.filter(
@@ -42,7 +49,7 @@ $: filterCount = conditions.filter(
 
 <div class="filter-bar">
 	<!-- Compact Filter Button -->
-	<button class="filter-toggle-btn" on:click={() => (isExpanded = !isExpanded)}>
+	<button class="filter-toggle-btn" on:click={() => setExpanded(!isExpanded)}>
 		<svg class="icon" fill="none" stroke="currentColor" viewBox="0 0 24 24">
 			<path
 				stroke-linecap="round"

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

@@ -8,6 +8,8 @@ declare const __propDef: {
         onConditionsChange: (conditions: FilterCondition[]) => void;
         logic?: FilterLogic;
         onLogicChange: (logic: FilterLogic) => void;
+        isExpanded?: boolean;
+        onExpandedChange?: ((expanded: boolean) => void) | undefined;
     };
     events: {
         [evt: string]: CustomEvent<any>;

package/dist/components/GroupBar.svelte

@@ -1,12 +1,19 @@
 <script>export let columns;
 export let grouping = [];
 export let onGroupingChange;
+export let isExpanded = false;
+export let onExpandedChange = void 0;
 const MAX_LEVELS = 3;
-let isExpanded = false;
+function setExpanded(value) {
+  isExpanded = value;
+  if (onExpandedChange) {
+    onExpandedChange(value);
+  }
+}
 function addGroup() {
   if (grouping.length >= MAX_LEVELS) return;
   onGroupingChange([...grouping, ""]);
-  isExpanded = true;
+  setExpanded(true);
 }
 function updateGroup(index, columnId) {
   const newGrouping = [...grouping];
@@ -17,12 +24,12 @@ function removeGroup(index) {
   const newGrouping = grouping.filter((_, i) => i !== index);
   onGroupingChange(newGrouping);
   if (newGrouping.length === 0) {
-    isExpanded = false;
+    setExpanded(false);
   }
 }
 function clearAllGroups() {
   onGroupingChange([]);
-  isExpanded = false;
+  setExpanded(false);
 }
 $: availableColumns = columns.filter((col) => {
   const columnId = col.accessorKey || col.id;
@@ -35,7 +42,7 @@ $: canAddMore = grouping.length < MAX_LEVELS;
 
 <div class="group-bar">
 	<!-- Compact Group Button -->
-	<button class="group-toggle-btn" on:click={() => (isExpanded = !isExpanded)}>
+	<button class="group-toggle-btn" on:click={() => setExpanded(!isExpanded)}>
 		<svg class="icon" fill="none" stroke="currentColor" viewBox="0 0 24 24">
 			<path
 				stroke-linecap="round"

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

@@ -5,6 +5,8 @@ declare const __propDef: {
         columns: ColumnDef<any>[];
         grouping?: string[];
         onGroupingChange: (grouping: string[]) => void;
+        isExpanded?: boolean;
+        onExpandedChange?: ((expanded: boolean) => void) | undefined;
     };
     events: {
         [evt: string]: CustomEvent<any>;

package/dist/components/SortBar.svelte

@@ -0,0 +1,239 @@
+<script>import SortConditionComponent from "./SortCondition.svelte";
+export let columns;
+export let sorting = [];
+export let onSortingChange;
+let isExpanded = false;
+function addSort() {
+  const newSort = { id: "", desc: false };
+  onSortingChange([...sorting, newSort]);
+  isExpanded = true;
+}
+function updateSort(index, columnId, desc) {
+  const newSorting = [...sorting];
+  newSorting[index] = { id: columnId, desc };
+  onSortingChange(newSorting);
+}
+function removeSort(index) {
+  const newSorting = sorting.filter((_, i) => i !== index);
+  onSortingChange(newSorting);
+  if (newSorting.length === 0) {
+    isExpanded = false;
+  }
+}
+function clearAllSorts() {
+  onSortingChange([]);
+  isExpanded = false;
+}
+function createUpdateHandler(index) {
+  return (columnId, desc) => updateSort(index, columnId, desc);
+}
+function createRemoveHandler(index) {
+  return () => removeSort(index);
+}
+$: availableColumns = columns.filter((col) => {
+  const columnId = col.accessorKey || col.id;
+  return columnId && col.enableSorting !== false;
+});
+$: availableColumnsForNew = availableColumns.filter((col) => {
+  const columnId = col.accessorKey || col.id;
+  return !sorting.some((s) => s.id === columnId);
+});
+$: hasSorts = sorting.length > 0;
+$: validSortCount = sorting.filter((s) => s.id !== "").length;
+$: canAddMore = availableColumnsForNew.length > 0;
+</script>
+
+<div class="sort-bar">
+	<!-- Compact Sort Button -->
+	<button class="sort-toggle-btn" on:click={() => (isExpanded = !isExpanded)}>
+		<svg class="icon" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+			<path
+				stroke-linecap="round"
+				stroke-linejoin="round"
+				stroke-width="2"
+				d="M3 4h13M3 8h9m-9 4h6m4 0l4-4m0 0l4 4m-4-4v12"
+			/>
+		</svg>
+		Sort
+		{#if validSortCount > 0}
+			<span class="sort-badge">{validSortCount}</span>
+		{/if}
+		<svg
+			class="chevron"
+			class:expanded={isExpanded}
+			fill="none"
+			stroke="currentColor"
+			viewBox="0 0 24 24"
+		>
+			<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7" />
+		</svg>
+	</button>
+
+	<!-- Expandable Sort Panel -->
+	{#if isExpanded}
+		<div class="sort-panel">
+			{#if hasSorts}
+				<div class="sort-header">
+					<span class="sort-label">Sort by</span>
+					<button class="clear-all-btn" on:click={clearAllSorts}> Clear all </button>
+				</div>
+
+				<div class="sort-levels">
+					{#each sorting as sort, index (index)}
+						<SortConditionComponent
+							columnId={sort.id}
+							desc={sort.desc}
+							{columns}
+							{sorting}
+							onUpdate={createUpdateHandler(index)}
+							onRemove={createRemoveHandler(index)}
+						/>
+					{/each}
+				</div>
+			{/if}
+
+			<button class="add-sort-btn" on:click={addSort} disabled={!canAddMore}>
+				<svg class="icon" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+					<path
+						stroke-linecap="round"
+						stroke-linejoin="round"
+						stroke-width="2"
+						d="M12 6v6m0 0v6m0-6h6m-6 0H6"
+					/>
+				</svg>
+				{hasSorts ? 'Add another sort' : 'Add a sort'}
+			</button>
+		</div>
+	{/if}
+</div>
+
+<style>
+	.sort-bar {
+		position: relative;
+	}
+
+	/* Compact Sort Toggle Button */
+	.sort-toggle-btn {
+		display: inline-flex;
+		align-items: center;
+		gap: 0.5rem;
+		padding: 0.5rem 1rem;
+		font-size: 0.875rem;
+		font-weight: 500;
+		color: #374151;
+		background: white;
+		border: 1px solid #d1d5db;
+		border-radius: 0.375rem;
+		cursor: pointer;
+		transition: all 0.2s;
+	}
+
+	.sort-toggle-btn:hover {
+		background: #f9fafb;
+		border-color: #9ca3af;
+	}
+
+	.sort-badge {
+		display: inline-flex;
+		align-items: center;
+		justify-content: center;
+		min-width: 1.25rem;
+		height: 1.25rem;
+		padding: 0 0.375rem;
+		font-size: 0.75rem;
+		font-weight: 600;
+		color: white;
+		background: #f59e0b;
+		border-radius: 0.75rem;
+	}
+
+	.chevron {
+		width: 1rem;
+		height: 1rem;
+		transition: transform 0.2s;
+	}
+
+	.chevron.expanded {
+		transform: rotate(180deg);
+	}
+
+	/* Expandable Sort Panel */
+	.sort-panel {
+		position: absolute;
+		top: calc(100% + 0.5rem);
+		left: 0;
+		z-index: 20;
+		min-width: 400px;
+		padding: 1rem;
+		background: white;
+		border: 1px solid #e5e7eb;
+		border-radius: 0.5rem;
+		box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1);
+	}
+
+	.sort-header {
+		display: flex;
+		justify-content: space-between;
+		align-items: center;
+		margin-bottom: 0.75rem;
+	}
+
+	.sort-label {
+		font-size: 0.875rem;
+		font-weight: 600;
+		color: #374151;
+	}
+
+	.clear-all-btn {
+		font-size: 0.75rem;
+		color: #6b7280;
+		background: none;
+		border: none;
+		cursor: pointer;
+		padding: 0.25rem 0.5rem;
+		border-radius: 0.25rem;
+		transition: all 0.2s;
+	}
+
+	.clear-all-btn:hover {
+		color: #dc2626;
+		background: #fee2e2;
+	}
+
+	.sort-levels {
+		display: flex;
+		flex-direction: column;
+		gap: 0.5rem;
+		margin-bottom: 0.75rem;
+	}
+
+	.add-sort-btn {
+		display: inline-flex;
+		align-items: center;
+		gap: 0.5rem;
+		padding: 0.5rem 0.75rem;
+		font-size: 0.875rem;
+		font-weight: 500;
+		color: #f59e0b;
+		background: white;
+		border: 1px dashed #f59e0b;
+		border-radius: 0.375rem;
+		cursor: pointer;
+		transition: all 0.2s;
+	}
+
+	.add-sort-btn:hover:not(:disabled) {
+		background: #fef3c7;
+		border-style: solid;
+	}
+
+	.add-sort-btn:disabled {
+		opacity: 0.5;
+		cursor: not-allowed;
+	}
+
+	.icon {
+		width: 1rem;
+		height: 1rem;
+	}
+</style>

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

@@ -0,0 +1,22 @@
+import { SvelteComponent } from "svelte";
+import type { ColumnDef } from '@tanstack/svelte-table';
+import type { SortingState } from '@tanstack/svelte-table';
+declare const __propDef: {
+    props: {
+        columns: ColumnDef<any>[];
+        sorting?: SortingState;
+        onSortingChange: (sorting: SortingState) => void;
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+    exports?: {} | undefined;
+    bindings?: string | undefined;
+};
+export type SortBarProps = typeof __propDef.props;
+export type SortBarEvents = typeof __propDef.events;
+export type SortBarSlots = typeof __propDef.slots;
+export default class SortBar extends SvelteComponent<SortBarProps, SortBarEvents, SortBarSlots> {
+}
+export {};

package/dist/components/SortCondition.svelte

@@ -0,0 +1,131 @@
+<script>export let columnId;
+export let desc;
+export let columns;
+export let sorting;
+export let onUpdate;
+export let onRemove;
+const directionOptions = [
+  { value: "asc", label: "A \u2192 Z", icon: "\u2191" },
+  { value: "desc", label: "Z \u2192 A", icon: "\u2193" }
+];
+function handleColumnChange(event) {
+  const newColumnId = event.target.value;
+  onUpdate(newColumnId, desc);
+}
+function handleDirectionChange(event) {
+  const direction = event.target.value;
+  onUpdate(columnId, direction === "desc");
+}
+function getColumnId(col) {
+  return col.accessorKey || col.id;
+}
+$: availableColumns = columns.filter((col) => {
+  const colId = getColumnId(col);
+  if (!colId || col.enableSorting === false) return false;
+  return colId === columnId || !sorting.some((s) => s.id === colId);
+});
+$: columnOptions = availableColumns.map((col) => ({
+  id: getColumnId(col) || "",
+  label: col.header || getColumnId(col) || ""
+}));
+$: currentDirection = desc ? "desc" : "asc";
+</script>
+
+<div class="sort-condition">
+	<select class="field-select" value={columnId} on:change={handleColumnChange}>
+		<option value="">Select field...</option>
+		{#each columnOptions as option}
+			<option value={option.id}>
+				{option.label}
+			</option>
+		{/each}
+	</select>
+
+	<select
+		class="direction-select"
+		value={currentDirection}
+		on:change={handleDirectionChange}
+		disabled={!columnId}
+	>
+		{#each directionOptions as option}
+			<option value={option.value}>
+				{option.icon} {option.label}
+			</option>
+		{/each}
+	</select>
+
+	<button class="remove-btn" on:click={onRemove} title="Remove sort">
+		<svg class="icon" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+			<path
+				stroke-linecap="round"
+				stroke-linejoin="round"
+				stroke-width="2"
+				d="M6 18L18 6M6 6l12 12"
+			/>
+		</svg>
+	</button>
+</div>
+
+<style>
+	.sort-condition {
+		display: flex;
+		align-items: center;
+		gap: 0.5rem;
+		padding: 0.5rem;
+		background: #f9fafb;
+		border-radius: 0.375rem;
+	}
+
+	.field-select,
+	.direction-select {
+		padding: 0.375rem 0.75rem;
+		font-size: 0.875rem;
+		border: 1px solid #d1d5db;
+		border-radius: 0.375rem;
+		background: white;
+	}
+
+	.field-select {
+		flex: 1;
+		min-width: 150px;
+	}
+
+	.direction-select {
+		flex: 0.7;
+		min-width: 120px;
+	}
+
+	.direction-select:disabled {
+		background: #f3f4f6;
+		color: #9ca3af;
+		cursor: not-allowed;
+	}
+
+	.field-select:focus,
+	.direction-select:focus {
+		outline: none;
+		border-color: #f59e0b;
+		box-shadow: 0 0 0 3px rgba(245, 158, 11, 0.1);
+	}
+
+	.remove-btn {
+		flex-shrink: 0;
+		padding: 0.375rem;
+		background: none;
+		border: none;
+		color: #6b7280;
+		cursor: pointer;
+		border-radius: 0.25rem;
+		transition: all 0.2s;
+	}
+
+	.remove-btn:hover {
+		background: #fee2e2;
+		color: #dc2626;
+	}
+
+	.icon {
+		width: 1rem;
+		height: 1rem;
+	}
+</style>

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

@@ -0,0 +1,25 @@
+import { SvelteComponent } from "svelte";
+import type { ColumnDef } from '@tanstack/svelte-table';
+import type { SortingState } from '@tanstack/svelte-table';
+declare const __propDef: {
+    props: {
+        columnId: string;
+        desc: boolean;
+        columns: ColumnDef<any>[];
+        sorting: SortingState;
+        onUpdate: (columnId: string, desc: boolean) => void;
+        onRemove: () => void;
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+    exports?: {} | undefined;
+    bindings?: string | undefined;
+};
+export type SortConditionProps = typeof __propDef.props;
+export type SortConditionEvents = typeof __propDef.events;
+export type SortConditionSlots = typeof __propDef.slots;
+export default class SortCondition extends SvelteComponent<SortConditionProps, SortConditionEvents, SortConditionSlots> {
+}
+export {};

package/dist/types.d.ts

@@ -21,6 +21,7 @@ export interface TableFeatures {
     columnReordering?: boolean;
     filtering?: boolean;
     sorting?: boolean;
+    sortingMode?: 'header' | 'control';
     pagination?: boolean;
     rowSelection?: boolean;
     grouping?: boolean;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@shotleybuilder/svelte-table-kit",
-  "version": "0.2.0",
+  "version": "0.4.0",
   "description": "A comprehensive, AI-configurable data table component for Svelte and SvelteKit, built on TanStack Table v8",
   "author": "Sertantai",
   "license": "MIT",