@shotleybuilder/svelte-gridlite-kit 0.2.0 → 0.3.0

package/README.md

@@ -156,12 +156,13 @@ The component accepts a **PGLite instance + table name** (or a raw SQL query), n
 | Numeric range hints | Scan all rows for min/max | `SELECT MIN(), MAX()` |
 | Column type detection | Sample rows and guess | Schema introspection |
 | Config persistence | localStorage JSON | PGLite tables with IndexedDB backing |
+| Column labels | Static config only | User-editable, persisted in PGLite |
 | Global search | String matching across columns | `ILIKE` or full-text search |
 
 ### Key Design Decisions
 
 - **No TanStack Table dependency.** The SQL engine IS the table engine.
-- **PGLite is the state store.** Table configs, view presets, column visibility, sort/filter state — all stored in PGLite tables, persisted automatically via IndexedDB.
+- **PGLite is the state store.** Table configs, view presets, column visibility, custom labels, sort/filter state — all stored in PGLite tables, persisted automatically via IndexedDB.
 - **FilterBar emits SQL.** Postgres operators (regex, `ILIKE`, date math, JSON paths, FTS) are available natively.
 - **Live queries drive reactivity.** PGLite `live.query()` replaces Svelte writable stores for data. UI auto-updates when underlying data changes.
 - **Column types come from schema introspection**, not data sampling.

package/dist/GridLite.svelte

@@ -11,6 +11,7 @@ import {
   createLiveQueryStore
 } from "./query/live.js";
 import { runMigrations } from "./state/migrations.js";
+import { loadColumnState, saveColumnState } from "./state/views.js";
 import FilterBar from "./components/FilterBar.svelte";
 import SortBar from "./components/SortBar.svelte";
 import GroupBar from "./components/GroupBar.svelte";
@@ -63,6 +64,9 @@ let resizeStartWidth = 0;
 const COL_MIN_WIDTH = 62;
 const COL_MAX_WIDTH = 1e3;
 const COL_DEFAULT_WIDTH = 180;
+let customLabels = {};
+let editingColumnLabel = null;
+let editingLabelValue = "";
 let groupData = [];
 let expandedGroups = /* @__PURE__ */ new Set();
 let totalGroups = 0;
@@ -110,6 +114,20 @@ $: orderedColumns = (() => {
 $: validGrouping = grouping.filter((g) => g.column !== "");
 $: isGrouped = validGrouping.length > 0;
 $: nonGroupedColumns = isGrouped ? orderedColumns.filter((col) => !validGrouping.some((g) => g.column === col.name)) : orderedColumns;
+$: mergedColumnConfigs = (() => {
+  const base = config?.columns ?? [];
+  if (Object.keys(customLabels).length === 0) return base;
+  const configMap = new Map(base.map((c) => [c.name, c]));
+  for (const [name, label] of Object.entries(customLabels)) {
+    const existing = configMap.get(name);
+    if (existing) {
+      configMap.set(name, { ...existing, label });
+    } else {
+      configMap.set(name, { name, label });
+    }
+  }
+  return [...configMap.values()];
+})();
 function groupKey(group) {
   return Object.entries(group.values).map(([col, val]) => `${col}=${val === null || val === void 0 ? "__null__" : String(val)}`).join("::");
 }
@@ -124,6 +142,14 @@ async function init() {
         return;
       }
     }
+    if (config?.id) {
+      const savedState = await loadColumnState(db, config.id);
+      const labels = {};
+      for (const col of savedState) {
+        if (col.label) labels[col.name] = col.label;
+      }
+      if (Object.keys(labels).length > 0) customLabels = labels;
+    }
     initialized = true;
     await rebuildQuery();
   } catch (err) {
@@ -478,13 +504,12 @@ function clearGlobalSearch() {
 }
 function handleCellContextMenu(event, row, col) {
   event.preventDefault();
-  const colConfig = config?.columns?.find((c) => c.name === col.name);
   contextMenu = {
     x: event.clientX,
     y: event.clientY,
     value: row[col.name],
     columnName: col.name,
-    columnLabel: colConfig?.label ?? col.name,
+    columnLabel: getColumnLabel(col),
     isNumeric: col.dataType === "number"
   };
 }
@@ -559,9 +584,60 @@ function handleColumnOrderChange(newOrder) {
   notifyStateChange();
 }
 function getColumnLabel(col) {
+  if (col.name in customLabels) return customLabels[col.name];
   const cfg = config?.columns?.find((c) => c.name === col.name);
   return cfg?.label ?? col.name;
 }
+function startEditingLabel(columnName) {
+  const col = columns.find((c) => c.name === columnName);
+  if (!col) return;
+  editingColumnLabel = columnName;
+  editingLabelValue = getColumnLabel(col);
+}
+function commitLabelEdit() {
+  if (!editingColumnLabel) return;
+  const columnName = editingColumnLabel;
+  const newLabel = editingLabelValue.trim();
+  const cfg = config?.columns?.find((c) => c.name === columnName);
+  const defaultLabel = cfg?.label ?? columnName;
+  if (newLabel && newLabel !== defaultLabel) {
+    customLabels = { ...customLabels, [columnName]: newLabel };
+  } else {
+    const { [columnName]: _, ...rest } = customLabels;
+    customLabels = rest;
+  }
+  editingColumnLabel = null;
+  editingLabelValue = "";
+  persistColumnLabels();
+  notifyStateChange();
+}
+function cancelLabelEdit() {
+  editingColumnLabel = null;
+  editingLabelValue = "";
+}
+function handleLabelKeydown(event) {
+  if (event.key === "Enter") {
+    event.preventDefault();
+    commitLabelEdit();
+  } else if (event.key === "Escape") {
+    cancelLabelEdit();
+  }
+}
+async function persistColumnLabels() {
+  if (!config?.id) return;
+  try {
+    const colState = columns.map((col, i) => ({
+      name: col.name,
+      visible: isColumnVisible(col.name),
+      width: columnSizing[col.name] ?? void 0,
+      position: columnOrder.indexOf(col.name) >= 0 ? columnOrder.indexOf(col.name) : i,
+      label: customLabels[col.name] ?? null
+    }));
+    await saveColumnState(db, config.id, colState);
+  } catch (err) {
+    console.error("Failed to persist column labels:", err);
+  }
+}
 function isColumnVisible(columnName) {
   if (columnName in columnVisibility) {
     return columnVisibility[columnName];
@@ -744,7 +820,7 @@ onDestroy(() => {
 						</button>
 						<ColumnPicker
 							{columns}
-							columnConfigs={config?.columns ?? []}
+							columnConfigs={mergedColumnConfigs}
 							{columnVisibility}
 							{columnOrder}
 							isOpen={showColumnPicker}
@@ -763,7 +839,7 @@ onDestroy(() => {
 							{db}
 							{table}
 							{columns}
-							columnConfigs={config?.columns ?? []}
+							columnConfigs={mergedColumnConfigs}
 							{allowedColumns}
 							conditions={filters}
 							onConditionsChange={handleFiltersChange}
@@ -780,7 +856,7 @@ onDestroy(() => {
 					<div class="gridlite-toolbar-group">
 						<GroupBar
 							{columns}
-							columnConfigs={config?.columns ?? []}
+							columnConfigs={mergedColumnConfigs}
 							{grouping}
 							onGroupingChange={handleGroupingChange}
 							isExpanded={groupExpanded}
@@ -794,7 +870,7 @@ onDestroy(() => {
 					<div class="gridlite-toolbar-sort">
 						<SortBar
 							{columns}
-							columnConfigs={config?.columns ?? []}
+							columnConfigs={mergedColumnConfigs}
 							{sorting}
 							onSortingChange={handleSortingChange}
 							isExpanded={sortExpanded}
@@ -941,7 +1017,7 @@ onDestroy(() => {
 					<div class="gridlite-toolbar-sort">
 						<SortBar
 							{columns}
-							columnConfigs={config?.columns ?? []}
+							columnConfigs={mergedColumnConfigs}
 							{sorting}
 							onSortingChange={handleSortingChange}
 							isExpanded={sortExpanded}
@@ -953,7 +1029,7 @@ onDestroy(() => {
 					<div class="gridlite-toolbar-group">
 						<GroupBar
 							{columns}
-							columnConfigs={config?.columns ?? []}
+							columnConfigs={mergedColumnConfigs}
 							{grouping}
 							onGroupingChange={handleGroupingChange}
 							isExpanded={groupExpanded}
@@ -1052,14 +1128,27 @@ onDestroy(() => {
 								on:dragend={handleDragEnd}
 								style={features.columnReordering ? 'cursor: grab;' : ''}
 							>
-								<span class="gridlite-th-label">
-									{#if config?.columns}
-										{@const colConfig = config.columns.find((c) => c.name === col.name)}
-										{colConfig?.label ?? col.name}
-									{:else}
-										{col.name}
-									{/if}
-								</span>
+								{#if editingColumnLabel === col.name}
+									<!-- svelte-ignore a11y-autofocus -->
+									<input
+										class="gridlite-th-label-input"
+										type="text"
+										bind:value={editingLabelValue}
+										on:blur={commitLabelEdit}
+										on:keydown={handleLabelKeydown}
+										on:click|stopPropagation
+										autofocus
+									/>
+								{:else}
+									<!-- svelte-ignore a11y-no-static-element-interactions -->
+									<span
+										class="gridlite-th-label"
+										on:dblclick|stopPropagation={() => startEditingLabel(col.name)}
+										title="Double-click to rename"
+									>
+										{getColumnLabel(col)}
+									</span>
+								{/if}
 								{#if table}
 									<button
 										class="gridlite-th-menu-btn"
@@ -1285,7 +1374,7 @@ onDestroy(() => {
 						<div class="gridlite-aggrid-sidebar-header">Columns</div>
 						<ColumnPicker
 							{columns}
-							columnConfigs={config?.columns ?? []}
+							columnConfigs={mergedColumnConfigs}
 							{columnVisibility}
 							{columnOrder}
 							isOpen={true}
@@ -1303,7 +1392,7 @@ onDestroy(() => {
 							{db}
 							table={table ?? ''}
 							{columns}
-							columnConfigs={config?.columns ?? []}
+							columnConfigs={mergedColumnConfigs}
 							{allowedColumns}
 							conditions={filters}
 							onConditionsChange={handleFiltersChange}
@@ -1350,17 +1439,10 @@ onDestroy(() => {
 						<dl class="gridlite-row-detail">
 							{#each orderedColumns as col}
 								<div class="gridlite-row-detail-field">
-									<dt>
-										{#if config?.columns}
-											{@const colConfig = config.columns.find((c) => c.name === col.name)}
-											{colConfig?.label ?? col.name}
-										{:else}
-											{col.name}
-										{/if}
-									</dt>
+									<dt>{getColumnLabel(col)}</dt>
 									<dd>
-										{#if config?.columns}
-											{@const colConfig = config.columns.find((c) => c.name === col.name)}
+										{#if mergedColumnConfigs.length > 0}
+											{@const colConfig = mergedColumnConfigs.find((c) => c.name === col.name)}
 											{#if colConfig?.format}
 												{colConfig.format(rowDetailRow[col.name])}
 											{:else}

package/dist/GridLite.svelte.d.ts

@@ -22,6 +22,8 @@ declare const __propDef: {
         setGlobalFilter?: (search: string) => void;
     };
     events: {
+        click: PointerEvent;
+    } & {
         [evt: string]: CustomEvent<any>;
     };
     slots: {

package/dist/state/migrations.js

@@ -51,6 +51,13 @@ const MIGRATIONS = [
 				ON _gridlite_column_state (grid_id);
 		`,
     },
+    {
+        version: 2,
+        description: "Add label column to column_state for user-editable column names",
+        sql: `
+			ALTER TABLE _gridlite_column_state ADD COLUMN IF NOT EXISTS label TEXT;
+		`,
+    },
 ];
 // ─── Migration Runner ───────────────────────────────────────────────────────
 /**

package/dist/state/views.d.ts

@@ -7,8 +7,8 @@
  *
  * Requires `runMigrations()` to have been called first.
  */
-import type { PGlite } from '@electric-sql/pglite';
-import type { ViewPreset } from '../types.js';
+import type { PGlite } from "@electric-sql/pglite";
+import type { ViewPreset } from "../types.js";
 /**
  * Save a view configuration. Creates or updates (upserts).
  */
@@ -42,6 +42,7 @@ export declare function saveColumnState(db: PGlite, gridId: string, columns: {
     visible?: boolean;
     width?: number;
     position?: number;
+    label?: string | null;
 }[], viewId?: string): Promise<void>;
 /**
  * Load column state for a grid (optionally scoped to a view).
@@ -51,4 +52,5 @@ export declare function loadColumnState(db: PGlite, gridId: string, viewId?: str
     visible: boolean;
     width: number | null;
     position: number | null;
+    label: string | null;
 }[]>;

package/dist/state/views.js

@@ -30,11 +30,11 @@ export async function saveView(db, gridId, view) {
         view.name,
         view.description ?? null,
         JSON.stringify(view.filters ?? []),
-        view.filterLogic ?? 'and',
+        view.filterLogic ?? "and",
         JSON.stringify(view.sorting ?? []),
         JSON.stringify(view.grouping ?? []),
         JSON.stringify(view.columnVisibility ?? {}),
-        JSON.stringify(view.columnOrder ?? [])
+        JSON.stringify(view.columnOrder ?? []),
     ]);
 }
 /**
@@ -76,7 +76,9 @@ export async function setDefaultView(db, gridId, viewId) {
  */
 export async function deleteView(db, viewId) {
     // Also clean up associated column state
-    await db.query(`DELETE FROM _gridlite_column_state WHERE view_id = $1`, [viewId]);
+    await db.query(`DELETE FROM _gridlite_column_state WHERE view_id = $1`, [
+        viewId,
+    ]);
     await db.query(`DELETE FROM _gridlite_views WHERE id = $1`, [viewId]);
 }
 // ─── Column State CRUD ──────────────────────────────────────────────────────
@@ -84,26 +86,27 @@ export async function deleteView(db, viewId) {
  * Save column state for a grid (optionally scoped to a view).
  * Replaces all existing column state for the given grid+view.
  */
-export async function saveColumnState(db, gridId, columns, viewId = '__default__') {
+export async function saveColumnState(db, gridId, columns, viewId = "__default__") {
     // Clear existing state for this grid+view
     await db.query(`DELETE FROM _gridlite_column_state WHERE grid_id = $1 AND view_id = $2`, [gridId, viewId]);
     // Insert new state
     for (const col of columns) {
-        await db.query(`INSERT INTO _gridlite_column_state (grid_id, view_id, column_name, visible, width, position)
-			 VALUES ($1, $2, $3, $4, $5, $6)`, [
+        await db.query(`INSERT INTO _gridlite_column_state (grid_id, view_id, column_name, visible, width, position, label)
+			 VALUES ($1, $2, $3, $4, $5, $6, $7)`, [
             gridId,
             viewId,
             col.name,
             col.visible ?? true,
             col.width ?? null,
-            col.position ?? null
+            col.position ?? null,
+            col.label ?? null,
         ]);
     }
 }
 /**
  * Load column state for a grid (optionally scoped to a view).
  */
-export async function loadColumnState(db, gridId, viewId = '__default__') {
+export async function loadColumnState(db, gridId, viewId = "__default__") {
     const result = await db.query(`SELECT * FROM _gridlite_column_state
 		 WHERE grid_id = $1 AND view_id = $2
 		 ORDER BY position NULLS LAST, column_name`, [gridId, viewId]);
@@ -111,7 +114,8 @@ export async function loadColumnState(db, gridId, viewId = '__default__') {
         name: row.column_name,
         visible: row.visible,
         width: row.width,
-        position: row.position
+        position: row.position,
+        label: row.label,
     }));
 }
 // ─── Helpers ────────────────────────────────────────────────────────────────
@@ -125,6 +129,6 @@ function rowToViewPreset(row) {
         sorting: row.sorting,
         grouping: row.grouping,
         columnVisibility: row.column_visibility,
-        columnOrder: row.column_order
+        columnOrder: row.column_order,
     };
 }

package/dist/styles/gridlite.css

@@ -752,6 +752,21 @@
 
 .gridlite-th-label {
   flex: 1;
+  cursor: default;
+}
+
+.gridlite-th-label-input {
+  flex: 1;
+  font: inherit;
+  font-weight: inherit;
+  font-size: inherit;
+  padding: 0 2px;
+  margin: -1px 0;
+  border: 1px solid #3b82f6;
+  border-radius: 3px;
+  outline: none;
+  background: #fff;
+  min-width: 40px;
 }
 
 .gridlite-th-menu-btn {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@shotleybuilder/svelte-gridlite-kit",
-  "version": "0.2.0",
+  "version": "0.3.0",
   "description": "A SQL-native data grid component for Svelte and SvelteKit, powered by PGLite",
   "author": "Sertantai",
   "license": "MIT",
@@ -51,7 +51,7 @@
   },
   "peerDependencies": {
     "svelte": "^4.0.0 || ^5.0.0",
-    "@electric-sql/pglite": "^0.2.0"
+    "@electric-sql/pglite": ">=0.2.0"
   },
   "devDependencies": {
     "@electric-sql/pglite": "^0.2.0",