@smartnet360/svelte-components 0.0.133 → 0.0.134

package/dist/core/CellTable/CellHistoryDemo.svelte

@@ -174,6 +174,7 @@
 		<CellTablePanel
 			cells={historyData as unknown as import('./types').CellData[]}
 			groupBy="none"
+			storageKey="cell-history-table"
 			groupOptions={[
 				{ value: 'none', label: 'No Grouping' },
 				{ value: 'antenna', label: 'Antenna Type' },

package/dist/core/CellTable/CellTable.svelte

@@ -56,7 +56,7 @@
 		headerFilters = true,
 		resizableColumns = true,
 		movableColumns = true,
-		persistLayout = false,
+		persistLayout = true,
 		storageKey = 'cell-table-layout',
 		onselectionchange,
 		onrowclick,
@@ -119,11 +119,12 @@
 			selectable: selectable ? (multiSelect ? true : 1) : false,
 			selectableRangeMode: 'click',
 			
-			// Persistence - disable sort persistence to preserve pre-sorted order
+			// Persistence - save column widths, order, visibility and group settings
 			persistence: persistLayout ? {
-				filter: true,
-				columns: ['width', 'visible'],
+				columns: ['width', 'visible', 'order'],
+				group: true,
 			} : false,
+			persistenceMode: persistLayout ? 'local' : undefined,
 			persistenceID: persistLayout ? storageKey : undefined,
 			
 			// Grouping
@@ -230,7 +231,8 @@
 	// Track previous values to avoid unnecessary updates
 	let prevCellsRef: unknown[] | null = null;
 	let prevGroupBy: string | null = null;
-	let prevColumnPreset: string | null = null;
+	// Initialize with current preset to prevent setColumns on first load (which would override persisted layout)
+	let prevColumnPreset: string | null = columnPreset;
 
 	// Update table data when cells change (reference comparison)
 	$effect(() => {

package/dist/core/CellTable/CellTablePanel.svelte

@@ -56,6 +56,8 @@
 		persistSettings?: boolean;
 		/** Storage key prefix for persisted settings */
 		storageKey?: string;
+		/** Enable Tabulator persistence for column widths, order, visibility */
+		persistLayout?: boolean;
 		/** Show scrollspy navigation bar for quick group navigation */
 		showScrollSpy?: boolean;
 		/** Bindable reference to table methods */
@@ -98,6 +100,7 @@
 		sidebarWidth = 320,
 		persistSettings = true,
 		storageKey = 'cell-table',
+		persistLayout = true,
 		showScrollSpy = false,
 		tableRef = $bindable(null),
 		onselectionchange,
@@ -117,17 +120,22 @@
 
 	// Storage keys
 	const STORAGE_KEY_GROUP = `${storageKey}-groupBy`;
-	const STORAGE_KEY_COLUMNS = `${storageKey}-visibleColumns`;
 	const STORAGE_KEY_FILTERS = `${storageKey}-filtersVisible`;
 	const STORAGE_KEY_SCROLLSPY = `${storageKey}-scrollSpyEnabled`;
+	const STORAGE_KEY_PRESET = `${storageKey}-columnPreset`;
+	
+	// Per-preset column visibility storage key
+	function getColumnsStorageKey(preset: ColumnPreset): string {
+		return `${storageKey}-visibleColumns-${preset}`;
+	}
 
 	// Load persisted settings
 	function loadPersistedSettings() {
-		if (!persistSettings || typeof localStorage === 'undefined') return { columns: null, filtersVisible: true, scrollSpyEnabled: showScrollSpy };
+		if (!persistSettings || typeof localStorage === 'undefined') return { filtersVisible: true, scrollSpyEnabled: showScrollSpy, preset: null };
 		
-		let columns: string[] | null = null;
 		let filters = true;
 		let scrollSpy = showScrollSpy;
+		let preset: ColumnPreset | null = null;
 		
 		try {
 			const savedGroup = localStorage.getItem(STORAGE_KEY_GROUP);
@@ -135,9 +143,9 @@
 				groupBy = savedGroup as CellTableGroupField;
 			}
 			
-			const savedColumns = localStorage.getItem(STORAGE_KEY_COLUMNS);
-			if (savedColumns) {
-				columns = JSON.parse(savedColumns) as string[];
+			const savedPreset = localStorage.getItem(STORAGE_KEY_PRESET);
+			if (savedPreset) {
+				preset = savedPreset as ColumnPreset;
 			}
 			
 			const savedFilters = localStorage.getItem(STORAGE_KEY_FILTERS);
@@ -152,7 +160,23 @@
 		} catch (e) {
 			console.warn('Failed to load CellTable settings:', e);
 		}
-		return { columns, filtersVisible: filters, scrollSpyEnabled: scrollSpy };
+		return { filtersVisible: filters, scrollSpyEnabled: scrollSpy, preset };
+	}
+	
+	// Load columns for a specific preset
+	function loadColumnsForPreset(preset: ColumnPreset): string[] {
+		if (!persistSettings || typeof localStorage === 'undefined') {
+			return getPresetVisibleFields(preset);
+		}
+		try {
+			const saved = localStorage.getItem(getColumnsStorageKey(preset));
+			if (saved) {
+				return JSON.parse(saved) as string[];
+			}
+		} catch (e) {
+			console.warn('Failed to load columns for preset:', e);
+		}
+		return getPresetVisibleFields(preset);
 	}
 
 	// Save group setting
@@ -165,11 +189,11 @@
 		}
 	}
 
-	// Save column visibility
+	// Save column visibility for current preset
 	function saveColumnVisibility(columns: string[]) {
 		if (!persistSettings || typeof localStorage === 'undefined') return;
 		try {
-			localStorage.setItem(STORAGE_KEY_COLUMNS, JSON.stringify(columns));
+			localStorage.setItem(getColumnsStorageKey(columnPreset), JSON.stringify(columns));
 		} catch (e) {
 			console.warn('Failed to save column visibility:', e);
 		}
@@ -195,6 +219,16 @@
 		}
 	}
 
+	// Save column preset
+	function savePreset(preset: ColumnPreset) {
+		if (!persistSettings || typeof localStorage === 'undefined') return;
+		try {
+			localStorage.setItem(STORAGE_KEY_PRESET, preset);
+		} catch (e) {
+			console.warn('Failed to save preset:', e);
+		}
+	}
+
 	let cellTable: CellTable;
 	let selectedCount = $state(0);
 	let selectedRows = $state<CellData[]>([]);
@@ -209,15 +243,44 @@
 	// Initialize from storage or defaults
 	const persistedSettings = loadPersistedSettings();
 	let filtersVisible = $state(persistedSettings.filtersVisible);
-	let visibleColumns = $state<string[]>(persistedSettings.columns ?? getPresetVisibleFields(columnPreset));
+	
+	// Apply persisted preset if available
+	if (persistedSettings.preset) {
+		columnPreset = persistedSettings.preset;
+	}
+	
+	// Load columns for the current preset (with any saved customizations)
+	let visibleColumns = $state<string[]>(loadColumnsForPreset(columnPreset));
 	
 	// ScrollSpy state - initialize from persisted settings
 	let scrollSpyGroups = $state<{ key: string; count: number }[]>([]);
 	let scrollSpyEnabled = $state(persistedSettings.scrollSpyEnabled);
 
-	// Update visible columns when preset changes (but not from storage load)
+	// Track preset changes to load per-preset columns
+	let prevPreset: ColumnPreset | null = columnPreset;
+	
+	// Apply column visibility to Tabulator
+	function applyColumnVisibility(columns: string[]) {
+		if (!cellTable) return;
+		columnMeta.forEach(col => {
+			if (columns.includes(col.field)) {
+				cellTable.showColumn(col.field);
+			} else {
+				cellTable.hideColumn(col.field);
+			}
+		});
+	}
+	
+	// Update visible columns when preset changes - load saved customizations for that preset
 	$effect(() => {
-		visibleColumns = getPresetVisibleFields(columnPreset);
+		if (columnPreset !== prevPreset) {
+			prevPreset = columnPreset;
+			// Load saved columns for this preset (or preset defaults if none saved)
+			const newColumns = loadColumnsForPreset(columnPreset);
+			visibleColumns = newColumns;
+			// Apply to Tabulator
+			applyColumnVisibility(newColumns);
+		}
 	});
 
 	// Expose table methods via tableRef - only set once
@@ -227,6 +290,8 @@
 			tableRef = {
 				redraw: () => cellTable?.redraw()
 			};
+			// Apply persisted column visibility after table is ready
+			setTimeout(() => applyColumnVisibility(visibleColumns), 100);
 			// Apply persisted filter visibility after table is ready
 			if (!filtersVisible) {
 				setTimeout(() => cellTable?.toggleHeaderFilters(false), 100);
@@ -311,6 +376,7 @@
 
 	function handlePresetChange(preset: ColumnPreset) {
 		columnPreset = preset;
+		savePreset(preset);
 	}
 
 	function handleExportCSV() {
@@ -363,10 +429,10 @@
 				cellTable?.hideColumn(col.field);
 			}
 		});
-		// Clear persisted column visibility (use preset defaults)
+		// Clear persisted column visibility for this preset (use preset defaults)
 		if (persistSettings && typeof localStorage !== 'undefined') {
 			try {
-				localStorage.removeItem(STORAGE_KEY_COLUMNS);
+				localStorage.removeItem(getColumnsStorageKey(columnPreset));
 			} catch (e) {
 				console.warn('Failed to clear column visibility:', e);
 			}
@@ -512,6 +578,8 @@
 				{techColors}
 				{statusColors}
 				{headerFilters}
+				{persistLayout}
+				storageKey="{storageKey}-tabulator"
 				onselectionchange={handleSelectionChange}
 				ondatachange={handleDataChange}
 				onrowclick={handleRowClick}

package/dist/core/CellTable/CellTablePanel.svelte.d.ts

@@ -39,6 +39,8 @@ interface Props {
     persistSettings?: boolean;
     /** Storage key prefix for persisted settings */
     storageKey?: string;
+    /** Enable Tabulator persistence for column widths, order, visibility */
+    persistLayout?: boolean;
     /** Show scrollspy navigation bar for quick group navigation */
     showScrollSpy?: boolean;
     /** Bindable reference to table methods */

package/dist/core/CellTable/column-config.js

@@ -54,10 +54,10 @@ export const FBAND_COLORS = {
  */
 export const COLUMN_GROUPS = {
     core: ['siteId', 'txId', 'cellName', 'tech', 'fband', 'status'],
-    physical: ['antenna', 'azimuth', 'height', 'electricalTilt', 'beamwidth'],
-    network: ['dlEarfn', 'bcch', 'pci1', 'cellId3', 'nwET', 'nwPW', 'nwRS', 'nwBW'],
-    planning: ['planner', 'comment', 'onAirDate', 'type'],
-    atoll: ['atollET', 'atollPW', 'atollRS', 'atollBW'],
+    physical: ['antenna', 'azimuth', 'height', 'beamwidth'],
+    network: ['nwET', 'nwPW', 'nwRS', 'nwBW', 'dlEarfn', 'bcch', 'pci', 'rru', 'cellID', 'cellId2G', 'ctrlid'],
+    planning: ['planner', 'comment', 'onAirDate'],
+    atoll: ['atollET', 'atollMT', 'atollPW', 'atollRS', 'atollBW'],
     position: ['latitude', 'longitude', 'siteLatitude', 'siteLongitude', 'dx', 'dy'],
     compare: ['compareET', 'comparePW', 'compareRS', 'compareBW'],
     kpi: ['kpiTraffic', 'kpiThroughput', 'kpiAvailability', 'kpiSuccessRate'],
@@ -359,12 +359,6 @@ export function getAllColumns(techColors = DEFAULT_TECH_COLORS, statusColors = D
             formatter: createStatusFormatter(statusColors),
             ...selectHeaderFilter,
         },
-        {
-            title: 'Type',
-            field: 'type',
-            width: 100,
-            ...selectHeaderFilter,
-        },
         {
             title: 'On Air Date',
             field: 'onAirDate',
@@ -437,13 +431,6 @@ export function getAllColumns(techColors = DEFAULT_TECH_COLORS, statusColors = D
             formatter: heightFormatter,
             ...headerFilterParams,
         },
-        {
-            title: 'E-Tilt',
-            field: 'electricalTilt',
-            width: 80,
-            hozAlign: 'right',
-            ...headerFilterParams,
-        },
         {
             title: 'Beamwidth',
             field: 'beamwidth',
@@ -469,17 +456,11 @@ export function getAllColumns(techColors = DEFAULT_TECH_COLORS, statusColors = D
         },
         {
             title: 'PCI',
-            field: 'pci1',
+            field: 'pci',
             width: 80,
             hozAlign: 'right',
             ...headerFilterParams,
         },
-        {
-            title: 'Cell ID 3',
-            field: 'cellId3',
-            width: 100,
-            ...headerFilterParams,
-        },
         {
             title: 'Cell ID',
             field: 'cellID',
@@ -499,17 +480,25 @@ export function getAllColumns(techColors = DEFAULT_TECH_COLORS, statusColors = D
             ...headerFilterParams,
         },
         {
-            title: 'NWT P1',
-            field: 'nwP1',
+            title: 'RRU',
+            field: 'rru',
+            width: 100,
+            ...headerFilterParams,
+        },
+        {
+            title: 'NW ET',
+            field: 'nwET',
             width: 80,
             hozAlign: 'right',
+            formatter: numberFormatter(1),
             ...headerFilterParams,
         },
         {
-            title: 'NWT P2',
-            field: 'nwP2',
+            title: 'NW PW',
+            field: 'nwPW',
             width: 80,
             hozAlign: 'right',
+            formatter: numberFormatter(1),
             ...headerFilterParams,
         },
         {
@@ -798,34 +787,36 @@ export function getColumnMetadata() {
         { field: 'cellName', title: 'Cell Name', group: 'Core' },
         { field: 'tech', title: 'Technology', group: 'Core' },
         { field: 'fband', title: 'Band', group: 'Core' },
+        { field: 'rru', title: 'RRU', group: 'Core' },
         { field: 'frq', title: 'Frequency', group: 'Core' },
         { field: 'status', title: 'Status', group: 'Core' },
-        { field: 'type', title: 'Type', group: 'Core' },
         { field: 'onAirDate', title: 'On Air Date', group: 'Core' },
-        // Physical
-        { field: 'antenna', title: 'Antenna', group: 'Physical' },
-        { field: 'azimuth', title: 'Azimuth', group: 'Physical' },
-        { field: 'height', title: 'Height', group: 'Physical' },
-        { field: 'electricalTilt', title: 'E-Tilt', group: 'Physical' },
-        { field: 'beamwidth', title: 'Beamwidth', group: 'Physical' },
-        // Network
-        { field: 'dlEarfn', title: 'DL EARFCN', group: 'Network' },
-        { field: 'bcch', title: 'BCCH', group: 'Network' },
-        { field: 'pci', title: 'PCI', group: 'Network' },
-        { field: 'rru', title: 'RRU', group: 'Network' },
-        { field: 'cellID', title: 'Cell ID', group: 'Network' },
-        { field: 'cellId2G', title: 'Cell ID 2G', group: 'Network' },
-        { field: 'ctrlid', title: 'Ctrl ID', group: 'Network' },
-        { field: 'nwET', title: 'NW ET', group: 'Network' },
-        { field: 'nwPW', title: 'NW PW', group: 'Network' },
-        { field: 'nwRS', title: 'NW RS', group: 'Network' },
-        { field: 'nwBW', title: 'NW BW', group: 'Network' },
-        // Atoll
-        { field: 'atollET', title: 'Atoll ET', group: 'Atoll' },
+        // Antenna Physical
+        { field: 'antenna', title: 'Antenna', group: 'Antenna Physical' },
+        { field: 'azimuth', title: 'Azimuth', group: 'Antenna Physical' },
+        { field: 'height', title: 'Height', group: 'Antenna Physical' },
+        { field: 'beamwidth', title: 'Beamwidth', group: 'Antenna Physical' },
         { field: 'atollMT', title: 'Atoll MT', group: 'Atoll' },
+        // Atoll antenna settings
+        { field: 'atollET', title: 'Atoll ET', group: 'Atoll' },
         { field: 'atollPW', title: 'Atoll PW', group: 'Atoll' },
         { field: 'atollRS', title: 'Atoll RS', group: 'Atoll' },
         { field: 'atollBW', title: 'Atoll BW', group: 'Atoll' },
+        // Network antena settings
+        { field: 'nwET', title: 'NW ET', group: 'Network' },
+        { field: 'nwPW', title: 'NW PW', group: 'Network' },
+        { field: 'nwRS', title: 'NW RS', group: 'Network' },
+        { field: 'nwBW', title: 'NW BW', group: 'Network' },
+        // Compare (Atoll vs Network)
+        { field: 'compareET', title: 'Δ ET', group: 'Compare' },
+        { field: 'comparePW', title: 'Δ PW', group: 'Compare' },
+        { field: 'compareRS', title: 'Δ RS', group: 'Compare' },
+        { field: 'compareBW', title: 'Δ BW', group: 'Compare' },
+        // Network settings
+        { field: 'dlEarfn', title: 'DL EARFCN', group: 'Network' },
+        { field: 'bcch', title: 'BCCH', group: 'Network' },
+        { field: 'pci', title: 'PCI', group: 'Network' },
+        { field: 'ctrlid', title: 'Ctrl ID', group: 'Network' },
         // History
         { field: 'configDate', title: 'Config Date', group: 'History' },
         { field: 'frequency', title: 'Freq (MHz)', group: 'History' },
@@ -833,27 +824,22 @@ export function getColumnMetadata() {
         { field: 'etiltChange', title: 'E-Tilt (Δ)', group: 'History' },
         { field: 'mtiltChange', title: 'M-Tilt (Δ)', group: 'History' },
         { field: 'powerChange', title: 'Power (Δ)', group: 'History' },
-        // Compare (Atoll vs Network)
-        { field: 'compareET', title: 'Δ ET', group: 'Compare' },
-        { field: 'comparePW', title: 'Δ PW', group: 'Compare' },
-        { field: 'compareRS', title: 'Δ RS', group: 'Compare' },
-        { field: 'compareBW', title: 'Δ BW', group: 'Compare' },
         // KPI Trends
         { field: 'kpiTraffic', title: 'Traffic', group: 'KPI' },
         { field: 'kpiThroughput', title: 'Throughput', group: 'KPI' },
         { field: 'kpiAvailability', title: 'Availability', group: 'KPI' },
         { field: 'kpiSuccessRate', title: 'Success Rate', group: 'KPI' },
         // Position
-        { field: 'latitude', title: 'Latitude', group: 'Position' },
-        { field: 'longitude', title: 'Longitude', group: 'Position' },
-        { field: 'siteLatitude', title: 'Site Latitude', group: 'Position' },
-        { field: 'siteLongitude', title: 'Site Longitude', group: 'Position' },
-        { field: 'dx', title: 'DX', group: 'Position' },
-        { field: 'dy', title: 'DY', group: 'Position' },
+        // { field: 'latitude', title: 'Latitude', group: 'Position' },
+        // { field: 'longitude', title: 'Longitude', group: 'Position' },
+        // { field: 'siteLatitude', title: 'Site Latitude', group: 'Position' },
+        // { field: 'siteLongitude', title: 'Site Longitude', group: 'Position' },
+        // { field: 'dx', title: 'DX', group: 'Position' },
+        // { field: 'dy', title: 'DY', group: 'Position' },
         // Planning
         { field: 'planner', title: 'Planner', group: 'Planning' },
         { field: 'comment', title: 'Comment', group: 'Planning' },
-        { field: 'customSubgroup', title: 'Subgroup', group: 'Planning' },
+        // { field: 'customSubgroup', title: 'Subgroup', group: 'Planning' },
     ];
 }
 /**

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@smartnet360/svelte-components",
-	"version": "0.0.133",
+	"version": "0.0.134",
 	"scripts": {
 		"dev": "vite dev",
 		"build": "vite build && npm run prepack",