@shotleybuilder/svelte-table-kit 0.12.0 → 0.13.1

package/README.md

@@ -160,6 +160,8 @@ Customize initial table state programmatically:
     defaultSorting: [
       { columnId: 'name', direction: 'asc' }
     ],
+    defaultGrouping: ['role'],
+    defaultExpanded: true,
     filterLogic: 'and'
   }}
   features={{
@@ -361,6 +363,8 @@ interface TableConfig {
   defaultVisibleColumns?: string[];        // Visible column IDs (others hidden)
   defaultFilters?: FilterCondition[];      // Initial filter conditions
   defaultSorting?: SortConfig[];           // Initial sort configuration
+  defaultGrouping?: string[];              // Initial grouping column IDs (up to 3)
+  defaultExpanded?: boolean;               // Initial expanded state for groups (default: true)
   filterLogic?: 'and' | 'or';              // Filter combination logic
   pagination?: {
     pageSize: number;

package/dist/TableKit.svelte

@@ -18,6 +18,10 @@ import {
   saveColumnFilters,
   loadColumnOrder,
   saveColumnOrder,
+  loadGrouping,
+  saveGrouping,
+  loadExpanded,
+  saveExpanded,
   isBrowser
 } from "./stores/persistence";
 import { applyFilters } from "./utils/filters";
@@ -105,6 +109,12 @@ $: {
     if (config.defaultColumnSizing) {
       columnSizing.set(config.defaultColumnSizing);
     }
+    if (config.defaultGrouping) {
+      grouping.set(config.defaultGrouping);
+    }
+    if (config.defaultExpanded !== void 0) {
+      expanded.set(config.defaultExpanded);
+    }
     previousConfigId = config.id;
     configInitialized = true;
   } else if (!hasConfig && persistState && storageKey && !configInitialized) {
@@ -112,6 +122,8 @@ $: {
     columnVisibility.set(loadColumnVisibility(storageKey) || {});
     columnSizing.set(loadColumnSizing(storageKey) || {});
     columnFilters.set(loadColumnFilters(storageKey) || []);
+    grouping.set(loadGrouping(storageKey) || []);
+    expanded.set(loadExpanded(storageKey) ?? true);
     configInitialized = true;
   } else if (!hasConfig && !configInitialized) {
     configInitialized = true;
@@ -128,6 +140,8 @@ $: {
     saveColumnSizing(storageKey, $columnSizing);
     saveColumnFilters(storageKey, $columnFilters);
     saveColumnOrder(storageKey, $columnOrder);
+    saveGrouping(storageKey, $grouping);
+    saveExpanded(storageKey, $expanded);
   }
 }
 let showColumnPicker = false;
@@ -810,6 +824,8 @@ $: if (onStateChange) {
 										</slot>
 									{:else if cell.getIsPlaceholder()}
 										<!-- Placeholder cell - empty -->
+									{:else if row.getIsGrouped()}
+										<!-- Non-grouped column on a group row - render empty -->
 									{:else}
 										<!-- Normal cell -->
 										<!-- svelte-ignore a11y-no-static-element-interactions -->

package/dist/stores/persistence.d.ts

@@ -1,4 +1,4 @@
-import type { VisibilityState, ColumnSizingState, ColumnFiltersState, ColumnOrderState, SortingState, PaginationState } from '@tanstack/svelte-table';
+import type { VisibilityState, ColumnSizingState, ColumnFiltersState, ColumnOrderState, SortingState, PaginationState, GroupingState, ExpandedState } from '@tanstack/svelte-table';
 import type { ColumnOrderMode } from '../types';
 /**
  * Check if we're in a browser environment
@@ -53,6 +53,22 @@ export declare function loadPagination(storageKey: string, defaultPageSize?: num
  * Save pagination state to localStorage
  */
 export declare function savePagination(storageKey: string, state: PaginationState): void;
+/**
+ * Load grouping state from localStorage
+ */
+export declare function loadGrouping(storageKey: string): GroupingState;
+/**
+ * Save grouping state to localStorage
+ */
+export declare function saveGrouping(storageKey: string, state: GroupingState): void;
+/**
+ * Load expanded state from localStorage
+ */
+export declare function loadExpanded(storageKey: string): ExpandedState;
+/**
+ * Save expanded state to localStorage
+ */
+export declare function saveExpanded(storageKey: string, state: ExpandedState): void;
 /**
  * Load filter column order mode from localStorage
  */

package/dist/stores/persistence.js

@@ -107,6 +107,30 @@ export function loadPagination(storageKey, defaultPageSize = 10) {
 export function savePagination(storageKey, state) {
     saveToStorage(`${storageKey}_pagination`, state);
 }
+/**
+ * Load grouping state from localStorage
+ */
+export function loadGrouping(storageKey) {
+    return loadFromStorage(`${storageKey}_grouping`, []);
+}
+/**
+ * Save grouping state to localStorage
+ */
+export function saveGrouping(storageKey, state) {
+    saveToStorage(`${storageKey}_grouping`, state);
+}
+/**
+ * Load expanded state from localStorage
+ */
+export function loadExpanded(storageKey) {
+    return loadFromStorage(`${storageKey}_expanded`, true);
+}
+/**
+ * Save expanded state to localStorage
+ */
+export function saveExpanded(storageKey, state) {
+    saveToStorage(`${storageKey}_expanded`, state);
+}
 /**
  * Load filter column order mode from localStorage
  */
@@ -132,6 +156,8 @@ export function clearTableState(storageKey) {
         localStorage.removeItem(`${storageKey}_column_order`);
         localStorage.removeItem(`${storageKey}_sorting`);
         localStorage.removeItem(`${storageKey}_pagination`);
+        localStorage.removeItem(`${storageKey}_grouping`);
+        localStorage.removeItem(`${storageKey}_expanded`);
         localStorage.removeItem(`${storageKey}_filter_column_order_mode`);
     }
     catch (error) {

package/dist/types.d.ts

@@ -40,6 +40,8 @@ export interface TableConfig {
     defaultFilters?: FilterCondition[];
     filterLogic?: FilterLogic;
     defaultSorting?: SortConfig[];
+    defaultGrouping?: string[];
+    defaultExpanded?: boolean;
     pagination?: {
         pageSize: number;
         pageSizeOptions?: number[];

package/package.json

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