@smartnet360/svelte-components 0.0.109 → 0.0.111

package/dist/core/CellTable/CellTableDemo.svelte

@@ -9,6 +9,7 @@
 	
 	let groupBy: CellTableGroupField = $state('none');
 	let columnPreset: ColumnPreset = $state('default');
+	let searchTerm = $state('');
 
 	function handleSelectionChange(event: RowSelectionEvent) {
 		console.log('Selection changed:', event.ids);
@@ -17,6 +18,28 @@
 	function regenerateData() {
 		demoCells = generateCellsFromPreset(datasetSize);
 	}
+
+	function handleSearch() {
+		const term = searchTerm.trim().toLowerCase();
+		if (!term) {
+			// Reset to full dataset
+			demoCells = generateCellsFromPreset(datasetSize);
+			return;
+		}
+		// Filter by siteId (case-insensitive, partial match)
+		const allCells = generateCellsFromPreset(datasetSize);
+		demoCells = allCells.filter(cell => 
+			cell.siteId.toLowerCase().includes(term) ||
+			cell.cellName.toLowerCase().includes(term)
+		);
+		console.log(`Search "${term}": found ${demoCells.length} cells`);
+	}
+
+	function handleSearchKeydown(event: KeyboardEvent) {
+		if (event.key === 'Enter') {
+			handleSearch();
+		}
+	}
 </script>
 
 <div class="cell-table-page vh-100 d-flex flex-column">
@@ -55,6 +78,27 @@
 			title="Cell Data"
 			onselectionchange={handleSelectionChange}
 		>
+			{#snippet headerSearch()}
+				<div class="input-group input-group-sm" style="width: 180px;">
+					<input 
+						type="text" 
+						class="form-control" 
+						placeholder="Search site or cell..."
+						bind:value={searchTerm}
+						onkeydown={handleSearchKeydown}
+					/>
+					<button 
+						class="btn btn-outline-primary" 
+						type="button"
+						onclick={handleSearch}
+						title="Search"
+						aria-label="Search"
+					>
+						<i class="bi bi-search"></i>
+					</button>
+				</div>
+			{/snippet}
+
 			{#snippet footer({ selectedRows, selectedCount })}
 				<div class="d-flex align-items-center justify-content-between">
 					<span class="text-muted small">

package/dist/core/CellTable/CellTablePanel.svelte

@@ -2,7 +2,7 @@
 	import type { Snippet } from 'svelte';
 	import CellTable from './CellTable.svelte';
 	import CellTableToolbar from './CellTableToolbar.svelte';
-	import { getColumnMetadata, getPresetVisibleFields } from './column-config';
+	import { getColumnMetadata, getPresetVisibleFields, DEFAULT_TECH_COLORS, DEFAULT_STATUS_COLORS, FBAND_COLORS } from './column-config';
 	import type {
 		CellData,
 		CellTableGroupField,
@@ -44,6 +44,10 @@
 		showDetailsSidebar?: boolean;
 		/** Sidebar width in pixels */
 		sidebarWidth?: number;
+		/** Persist settings (groupBy, visibleColumns) to localStorage */
+		persistSettings?: boolean;
+		/** Storage key prefix for persisted settings */
+		storageKey?: string;
 		/** Bindable reference to table methods */
 		tableRef?: { redraw: () => void } | null;
 		/** Row selection change event */
@@ -52,6 +56,8 @@
 		onrowclick?: (event: RowClickEvent) => void;
 		/** Row double-click event */
 		onrowdblclick?: (event: RowDblClickEvent) => void;
+		/** Custom header search slot (appears next to title) */
+		headerSearch?: Snippet;
 		/** Custom header actions slot */
 		headerActions?: Snippet;
 		/** Custom footer slot */
@@ -75,15 +81,81 @@
 		title = 'Cell Data',
 		showDetailsSidebar = false,
 		sidebarWidth = 320,
+		persistSettings = true,
+		storageKey = 'cell-table',
 		tableRef = $bindable(null),
 		onselectionchange,
 		onrowclick,
 		onrowdblclick,
+		headerSearch,
 		headerActions,
 		footer,
 		detailsContent
 	}: Props = $props();
 
+	// Storage keys
+	const STORAGE_KEY_GROUP = `${storageKey}-groupBy`;
+	const STORAGE_KEY_COLUMNS = `${storageKey}-visibleColumns`;
+	const STORAGE_KEY_FILTERS = `${storageKey}-filtersVisible`;
+
+	// Load persisted settings
+	function loadPersistedSettings() {
+		if (!persistSettings || typeof localStorage === 'undefined') return { columns: null, filtersVisible: true };
+		
+		let columns: string[] | null = null;
+		let filters = true;
+		
+		try {
+			const savedGroup = localStorage.getItem(STORAGE_KEY_GROUP);
+			if (savedGroup) {
+				groupBy = savedGroup as CellTableGroupField;
+			}
+			
+			const savedColumns = localStorage.getItem(STORAGE_KEY_COLUMNS);
+			if (savedColumns) {
+				columns = JSON.parse(savedColumns) as string[];
+			}
+			
+			const savedFilters = localStorage.getItem(STORAGE_KEY_FILTERS);
+			if (savedFilters !== null) {
+				filters = savedFilters === 'true';
+			}
+		} catch (e) {
+			console.warn('Failed to load CellTable settings:', e);
+		}
+		return { columns, filtersVisible: filters };
+	}
+
+	// Save group setting
+	function saveGroupSetting(group: CellTableGroupField) {
+		if (!persistSettings || typeof localStorage === 'undefined') return;
+		try {
+			localStorage.setItem(STORAGE_KEY_GROUP, group);
+		} catch (e) {
+			console.warn('Failed to save group setting:', e);
+		}
+	}
+
+	// Save column visibility
+	function saveColumnVisibility(columns: string[]) {
+		if (!persistSettings || typeof localStorage === 'undefined') return;
+		try {
+			localStorage.setItem(STORAGE_KEY_COLUMNS, JSON.stringify(columns));
+		} catch (e) {
+			console.warn('Failed to save column visibility:', e);
+		}
+	}
+
+	// Save filter visibility
+	function saveFilterVisibility(visible: boolean) {
+		if (!persistSettings || typeof localStorage === 'undefined') return;
+		try {
+			localStorage.setItem(STORAGE_KEY_FILTERS, String(visible));
+		} catch (e) {
+			console.warn('Failed to save filter visibility:', e);
+		}
+	}
+
 	let cellTable: CellTable;
 	let selectedCount = $state(0);
 	let selectedRows = $state<CellData[]>([]);
@@ -91,13 +163,16 @@
 	let sidebarOpen = $state(false);
 	let clickedCell: CellData | null = $state(null);
 	let tableRefSet = false;
-	let filtersVisible = $state(true);
 
 	// Column visibility management
 	const columnMeta = getColumnMetadata();
-	let visibleColumns = $state<string[]>(getPresetVisibleFields(columnPreset));
+	
+	// Initialize from storage or defaults
+	const persistedSettings = loadPersistedSettings();
+	let filtersVisible = $state(persistedSettings.filtersVisible);
+	let visibleColumns = $state<string[]>(persistedSettings.columns ?? getPresetVisibleFields(columnPreset));
 
-	// Update visible columns when preset changes
+	// Update visible columns when preset changes (but not from storage load)
 	$effect(() => {
 		visibleColumns = getPresetVisibleFields(columnPreset);
 	});
@@ -109,6 +184,10 @@
 			tableRef = {
 				redraw: () => cellTable?.redraw()
 			};
+			// Apply persisted filter visibility after table is ready
+			if (!filtersVisible) {
+				setTimeout(() => cellTable?.toggleHeaderFilters(false), 100);
+			}
 		}
 	});
 
@@ -133,6 +212,7 @@
 
 	function handleGroupChange(group: CellTableGroupField) {
 		groupBy = group;
+		saveGroupSetting(group);
 	}
 
 	function handlePresetChange(preset: ColumnPreset) {
@@ -162,6 +242,7 @@
 	function handleToggleFilters() {
 		filtersVisible = !filtersVisible;
 		cellTable?.toggleHeaderFilters(filtersVisible);
+		saveFilterVisibility(filtersVisible);
 	}
 
 	function handleColumnVisibilityChange(field: string, visible: boolean) {
@@ -174,6 +255,7 @@
 			visibleColumns = visibleColumns.filter(f => f !== field);
 			cellTable?.hideColumn(field);
 		}
+		saveColumnVisibility(visibleColumns);
 	}
 
 	function handleResetColumns() {
@@ -187,6 +269,14 @@
 				cellTable?.hideColumn(col.field);
 			}
 		});
+		// Clear persisted column visibility (use preset defaults)
+		if (persistSettings && typeof localStorage !== 'undefined') {
+			try {
+				localStorage.removeItem(STORAGE_KEY_COLUMNS);
+			} catch (e) {
+				console.warn('Failed to clear column visibility:', e);
+			}
+		}
 	}
 
 	function toggleSidebar() {
@@ -225,10 +315,15 @@
 <div class="cell-table-panel d-flex flex-column" style:height>
 	<!-- Header -->
 	<div class="panel-header d-flex align-items-center justify-content-between px-3 py-2 bg-body-secondary border-bottom">
-		<h6 class="mb-0 d-flex align-items-center gap-2">
-			<i class="bi bi-table text-primary"></i>
-			{title}
-		</h6>
+		<div class="d-flex align-items-center gap-3">
+			<h6 class="mb-0 d-flex align-items-center gap-2">
+				<i class="bi bi-table text-primary"></i>
+				{title}
+			</h6>
+			{#if headerSearch}
+				{@render headerSearch()}
+			{/if}
+		</div>
 		<div class="d-flex align-items-center gap-2">
 			{#if headerActions}
 				<div class="header-actions">
@@ -334,12 +429,12 @@
 
 								<dt class="col-5 text-muted">Technology</dt>
 								<dd class="col-7">
-									<span class="badge bg-secondary">{clickedCell.tech}</span>
+									<span class="badge" style="background-color: {techColors?.[clickedCell.tech] ?? DEFAULT_TECH_COLORS[clickedCell.tech] ?? '#6c757d'}; color: white;">{clickedCell.tech}</span>
 								</dd>
 
 								<dt class="col-5 text-muted">Band</dt>
 								<dd class="col-7">
-									<span class="badge bg-info">{clickedCell.fband}</span>
+									<span class="badge" style="background-color: {FBAND_COLORS[clickedCell.fband] ?? '#6c757d'}; color: white;">{clickedCell.fband}</span>
 								</dd>
 
 								<dt class="col-5 text-muted">Frequency</dt>
@@ -347,7 +442,7 @@
 
 								<dt class="col-5 text-muted">Status</dt>
 								<dd class="col-7">
-									<span class="badge bg-success">{clickedCell.status.replace(/_/g, ' ')}</span>
+									<span class="badge" style="background-color: {statusColors?.[clickedCell.status] ?? DEFAULT_STATUS_COLORS[clickedCell.status] ?? '#6c757d'}; color: white;">{clickedCell.status.replace(/_/g, ' ')}</span>
 								</dd>
 
 								<dt class="col-12 text-muted mt-2 mb-1 border-top pt-2">Physical</dt>

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

@@ -29,6 +29,10 @@ interface Props {
     showDetailsSidebar?: boolean;
     /** Sidebar width in pixels */
     sidebarWidth?: number;
+    /** Persist settings (groupBy, visibleColumns) to localStorage */
+    persistSettings?: boolean;
+    /** Storage key prefix for persisted settings */
+    storageKey?: string;
     /** Bindable reference to table methods */
     tableRef?: {
         redraw: () => void;
@@ -39,6 +43,8 @@ interface Props {
     onrowclick?: (event: RowClickEvent) => void;
     /** Row double-click event */
     onrowdblclick?: (event: RowDblClickEvent) => void;
+    /** Custom header search slot (appears next to title) */
+    headerSearch?: Snippet;
     /** Custom header actions slot */
     headerActions?: Snippet;
     /** Custom footer slot */

package/dist/core/CellTable/CellTableToolbar.svelte

@@ -87,7 +87,8 @@
 		{ value: 'full', label: 'All Columns' },
 		{ value: 'physical', label: 'Physical' },
 		{ value: 'network', label: 'Network' },
-		{ value: 'planning', label: 'Planning' }
+		{ value: 'planning', label: 'Planning' },
+		{ value: 'compare', label: 'Compare (Atoll/Nwt)' }
 	];
 
 	function handleGroupChange(e: Event) {

package/dist/core/CellTable/column-config.d.ts

@@ -7,6 +7,7 @@ import type { ColumnDefinition, CellComponent } from 'tabulator-tables';
 import type { CellTableColumn, ColumnPreset, TechColorMap, StatusColorMap, ColumnGroups } from './types';
 /**
  * Default technology colors (Bootstrap-aligned)
+ * 2G: Yellow, 4G: Purple, 5G: Green
  */
 export declare const DEFAULT_TECH_COLORS: TechColorMap;
 /**
@@ -15,6 +16,9 @@ export declare const DEFAULT_TECH_COLORS: TechColorMap;
 export declare const DEFAULT_STATUS_COLORS: StatusColorMap;
 /**
  * Frequency band colors
+ * GSM: Yellow shades (darker = higher freq)
+ * LTE: Purple shades (darker = higher freq)
+ * 5G: Green shades (stronger = higher freq)
  */
 export declare const FBAND_COLORS: Record<string, string>;
 /**
@@ -49,6 +53,14 @@ export declare function azimuthFormatter(cell: CellComponent): string;
  * Height formatter with meter unit
  */
 export declare function heightFormatter(cell: CellComponent): string;
+/**
+ * Comparison formatter for Atoll vs Network values
+ * Shows both values side by side with color coding:
+ * - Green: values match exactly
+ * - Red: values don't match
+ * - Gray: one or both values missing
+ */
+export declare function createCompareFormatter(atollField: string, nwtField: string): (cell: CellComponent) => string;
 /**
  * Custom sorter for fband - extracts numeric portion and sorts numerically
  * Examples: LTE700 → 700, GSM900 → 900, LTE1800 → 1800, 5G-3500 → 3500

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

@@ -5,52 +5,61 @@
  */
 /**
  * Default technology colors (Bootstrap-aligned)
+ * 2G: Yellow, 4G: Purple, 5G: Green
  */
 export const DEFAULT_TECH_COLORS = {
-    '2G': '#6c757d', // secondary gray
+    '2G': '#ffc107', // Yellow
     '3G': '#0d6efd', // primary blue
-    '4G': '#198754', // success green
-    '5G': '#6f42c1', // purple
-    'LTE': '#198754', // success green
-    'NR': '#6f42c1', // purple
+    '4G': '#9333ea', // Purple
+    '5G': '#22c55e', // Green
+    'LTE': '#9333ea', // Purple (same as 4G)
+    'NR': '#22c55e', // Green (same as 5G)
 };
 /**
  * Default status colors (Bootstrap-aligned)
  */
 export const DEFAULT_STATUS_COLORS = {
     'On_Air': '#198754', // success green
-    'On_Air_UNDER_CONSTRUCTION': '#ffc107', // warning yellow
-    'On_Air_Locked': '#0dcaf0', // info cyan
-    'RF_Plan_Ready': '#0d6efd', // primary blue
-    'Re-Planned_RF_Plan_Ready': '#6f42c1', // purple
-    'Tavlati_RF_Plan_Ready': '#fd7e14', // orange
+    'On_Air_UNDER_CONSTRUCTION': '#4ce207ff', // warning yellow
+    'On_Air_Locked': '#e04001ff', // info cyan
+    'RF_Plan_Ready': '#e69603ff', // primary blue
+    'Re-Planned_RF_Plan_Ready': '#c1a342ff', // purple
+    'Tavlati_RF_Plan_Ready': '#25ddfdff', // orange
 };
 /**
  * Frequency band colors
+ * GSM: Yellow shades (darker = higher freq)
+ * LTE: Purple shades (darker = higher freq)
+ * 5G: Green shades (stronger = higher freq)
  */
 export const FBAND_COLORS = {
-    'GSM900': '#6c757d',
-    'GSM1800': '#495057',
-    'LTE700': '#dc3545',
-    'LTE800': '#e35d6a',
-    'LTE900': '#fd7e14',
-    'LTE1800': '#198754',
-    'LTE2100': '#20c997',
-    'LTE2600': '#0dcaf0',
-    '5G-700': '#6f42c1',
-    '5G-3500': '#d63384',
-    'NR3500': '#d63384',
+    // GSM - Yellow shades (900 lighter, 1800 darker)
+    'GSM900': '#ffc107', // Light yellow
+    'GSM1800': '#cc9a06', // Darker yellow/gold
+    // LTE - Purple shades (700 lightest → 2600 darkest)
+    'LTE700': '#d8b4fe', // Light purple
+    'LTE800': '#c084fc', // 
+    'LTE900': '#a855f7', // 
+    'LTE1800': '#9333ea', // 
+    'LTE2100': '#7e22ce', // 
+    'LTE2600': '#6b21a8', // Dark purple
+    // 5G - Green shades (700 lighter → 3500 stronger)
+    '5G-700': '#86efac', // Light green
+    '5G-2100': '#22c55e', // Medium green
+    '5G-3500': '#15803d', // Strong/dark green
+    'NR3500': '#15803d', // Same as 5G-3500
 };
 /**
  * Column groups for different presets
  */
 export const COLUMN_GROUPS = {
-    core: ['id', 'cellName', 'siteId', 'tech', 'fband', 'status'],
+    core: ['siteId', 'txId', 'cellName', 'tech', 'fband', 'status'],
     physical: ['antenna', 'azimuth', 'height', 'electricalTilt', 'beamwidth'],
-    network: ['dlEarfn', 'bcch', 'pci1', 'cellId3', 'nwtP1', 'nwtP2', 'nwtRS', 'nwtBW'],
+    network: ['dlEarfn', 'bcch', 'pci1', 'cellId3', 'nwtET', 'nwtPW', 'nwtRS', 'nwtBW'],
     planning: ['planner', 'comment', 'onAirDate', 'type'],
-    atoll: ['atollETP', 'atollPW', 'atollRS', 'atollBW'],
+    atoll: ['atollET', 'atollPW', 'atollRS', 'atollBW'],
     position: ['latitude', 'longitude', 'siteLatitude', 'siteLongitude', 'dx', 'dy'],
+    compare: ['compareET', 'comparePW', 'compareRS', 'compareBW'],
 };
 /**
  * Create a technology badge formatter
@@ -123,6 +132,40 @@ export function heightFormatter(cell) {
         return '';
     return `${value}m`;
 }
+/**
+ * Comparison formatter for Atoll vs Network values
+ * Shows both values side by side with color coding:
+ * - Green: values match exactly
+ * - Red: values don't match
+ * - Gray: one or both values missing
+ */
+export function createCompareFormatter(atollField, nwtField) {
+    return (cell) => {
+        const row = cell.getRow().getData();
+        const atollVal = row[atollField];
+        const nwtVal = row[nwtField];
+        const atollStr = atollVal !== null && atollVal !== undefined ? String(atollVal) : '-';
+        const nwtStr = nwtVal !== null && nwtVal !== undefined ? String(nwtVal) : '-';
+        // Determine match status
+        const atollMissing = atollVal === null || atollVal === undefined;
+        const nwtMissing = nwtVal === null || nwtVal === undefined;
+        let bgColor;
+        let textColor = 'white';
+        if (atollMissing || nwtMissing) {
+            // One or both missing - gray
+            bgColor = '#6c757d';
+        }
+        else if (atollVal === nwtVal) {
+            // Exact match - green
+            bgColor = '#198754';
+        }
+        else {
+            // Mismatch - red
+            bgColor = '#dc3545';
+        }
+        return `<span class="badge" style="background-color: ${bgColor}; color: ${textColor}; font-size: 0.75rem; font-weight: normal;">${atollStr} | ${nwtStr}</span>`;
+    };
+}
 /**
  * Custom sorter for fband - extracts numeric portion and sorts numerically
  * Examples: LTE700 → 700, GSM900 → 900, LTE1800 → 1800, 5G-3500 → 3500
@@ -170,24 +213,26 @@ export function getAllColumns(techColors = DEFAULT_TECH_COLORS, statusColors = D
     const headerFilterParams = headerFilters ? { headerFilter: 'input' } : {};
     const selectHeaderFilter = headerFilters ? { headerFilter: 'list', headerFilterParams: { valuesLookup: true } } : {};
     return [
-        // Core columns
+        // Core columns - siteId, txId, cellName first (frozen)
         {
-            title: 'ID',
-            field: 'id',
+            title: 'Site ID',
+            field: 'siteId',
             width: 120,
             frozen: true,
             ...headerFilterParams,
         },
         {
-            title: 'Cell Name',
-            field: 'cellName',
-            width: 150,
+            title: 'TX ID',
+            field: 'txId',
+            width: 100,
+            frozen: true,
             ...headerFilterParams,
         },
         {
-            title: 'Site ID',
-            field: 'siteId',
-            width: 120,
+            title: 'Cell Name',
+            field: 'cellName',
+            width: 150,
+            frozen: true,
             ...headerFilterParams,
         },
         {
@@ -310,12 +355,6 @@ export function getAllColumns(techColors = DEFAULT_TECH_COLORS, statusColors = D
             width: 100,
             ...headerFilterParams,
         },
-        {
-            title: 'TX ID',
-            field: 'txId',
-            width: 100,
-            ...headerFilterParams,
-        },
         {
             title: 'Ctrl ID',
             field: 'ctrlid',
@@ -352,8 +391,8 @@ export function getAllColumns(techColors = DEFAULT_TECH_COLORS, statusColors = D
         },
         // Atoll columns
         {
-            title: 'Atoll ETP',
-            field: 'atollETP',
+            title: 'Atoll ET',
+            field: 'atollET',
             width: 90,
             hozAlign: 'right',
             formatter: numberFormatter(1),
@@ -383,6 +422,39 @@ export function getAllColumns(techColors = DEFAULT_TECH_COLORS, statusColors = D
             formatter: numberFormatter(1),
             ...headerFilterParams,
         },
+        // Compare columns (Atoll vs Network)
+        {
+            title: 'Δ ET',
+            field: 'compareET',
+            width: 110,
+            hozAlign: 'center',
+            formatter: createCompareFormatter('atollET', 'nwtET'),
+            headerTooltip: 'Atoll ET | Network ET',
+        },
+        {
+            title: 'Δ PW',
+            field: 'comparePW',
+            width: 110,
+            hozAlign: 'center',
+            formatter: createCompareFormatter('atollPW', 'nwtPW'),
+            headerTooltip: 'Atoll PW | Network PW',
+        },
+        {
+            title: 'Δ RS',
+            field: 'compareRS',
+            width: 110,
+            hozAlign: 'center',
+            formatter: createCompareFormatter('atollRS', 'nwtRS'),
+            headerTooltip: 'Atoll RS | Network RS',
+        },
+        {
+            title: 'Δ BW',
+            field: 'compareBW',
+            width: 110,
+            hozAlign: 'center',
+            formatter: createCompareFormatter('atollBW', 'nwtBW'),
+            headerTooltip: 'Atoll BW | Network BW',
+        },
         // Position columns
         {
             title: 'Latitude',
@@ -461,7 +533,7 @@ export function getColumnsForPreset(preset, techColors = DEFAULT_TECH_COLORS, st
     let visibleFields;
     switch (preset) {
         case 'compact':
-            visibleFields = ['cellName', 'siteId', 'tech', 'fband', 'status'];
+            visibleFields = ['siteId', 'txId', 'cellName', 'tech', 'fband', 'status'];
             break;
         case 'full':
             return allColumns;
@@ -474,10 +546,13 @@ export function getColumnsForPreset(preset, techColors = DEFAULT_TECH_COLORS, st
         case 'planning':
             visibleFields = [...COLUMN_GROUPS.core, ...COLUMN_GROUPS.planning];
             break;
+        case 'compare':
+            visibleFields = [...COLUMN_GROUPS.core, ...COLUMN_GROUPS.compare];
+            break;
         case 'default':
         default:
             visibleFields = [
-                'id', 'cellName', 'siteId', 'tech', 'fband', 'frq', 'status',
+                'siteId', 'txId', 'cellName', 'tech', 'fband', 'frq', 'status',
                 'azimuth', 'height', 'antenna'
             ];
     }
@@ -509,9 +584,9 @@ export function getGroupHeaderFormatter(groupField) {
 export function getColumnMetadata() {
     return [
         // Core
-        { field: 'id', title: 'ID', group: 'Core' },
-        { field: 'cellName', title: 'Cell Name', group: 'Core' },
         { field: 'siteId', title: 'Site ID', group: 'Core' },
+        { field: 'txId', title: 'TX ID', group: 'Core' },
+        { field: 'cellName', title: 'Cell Name', group: 'Core' },
         { field: 'tech', title: 'Technology', group: 'Core' },
         { field: 'fband', title: 'Band', group: 'Core' },
         { field: 'frq', title: 'Frequency', group: 'Core' },
@@ -531,7 +606,6 @@ export function getColumnMetadata() {
         { field: 'rru', title: 'RRU', group: 'Network' },
         { field: 'cellID', title: 'Cell ID', group: 'Network' },
         { field: 'cellId2G', title: 'Cell ID 2G', group: 'Network' },
-        { field: 'txId', title: 'TX ID', group: 'Network' },
         { field: 'ctrlid', title: 'Ctrl ID', group: 'Network' },
         { field: 'nwtET', title: 'NWT ET', group: 'Network' },
         { field: 'nwtPW', title: 'NWT PW', group: 'Network' },
@@ -542,6 +616,11 @@ export function getColumnMetadata() {
         { field: 'atollPW', title: 'Atoll PW', group: 'Atoll' },
         { field: 'atollRS', title: 'Atoll RS', group: 'Atoll' },
         { field: 'atollBW', title: 'Atoll BW', group: 'Atoll' },
+        // 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' },
         // Position
         { field: 'latitude', title: 'Latitude', group: 'Position' },
         { field: 'longitude', title: 'Longitude', group: 'Position' },
@@ -561,7 +640,7 @@ export function getColumnMetadata() {
 export function getPresetVisibleFields(preset) {
     switch (preset) {
         case 'compact':
-            return ['cellName', 'siteId', 'tech', 'fband', 'status'];
+            return ['siteId', 'txId', 'cellName', 'tech', 'fband', 'status'];
         case 'full':
             return getColumnMetadata().map(c => c.field);
         case 'physical':
@@ -570,8 +649,10 @@ export function getPresetVisibleFields(preset) {
             return [...COLUMN_GROUPS.core, ...COLUMN_GROUPS.network];
         case 'planning':
             return [...COLUMN_GROUPS.core, ...COLUMN_GROUPS.planning];
+        case 'compare':
+            return [...COLUMN_GROUPS.core, ...COLUMN_GROUPS.compare];
         case 'default':
         default:
-            return ['id', 'cellName', 'siteId', 'tech', 'fband', 'frq', 'status', 'azimuth', 'height', 'antenna'];
+            return ['siteId', 'txId', 'cellName', 'tech', 'fband', 'frq', 'status', 'azimuth', 'height', 'antenna'];
     }
 }

package/dist/core/CellTable/types.d.ts

@@ -16,7 +16,7 @@ export type CellTableGroupField = CellGroupingField | 'none';
 /**
  * Column preset configurations
  */
-export type ColumnPreset = 'default' | 'compact' | 'full' | 'physical' | 'network' | 'planning';
+export type ColumnPreset = 'default' | 'compact' | 'full' | 'physical' | 'network' | 'planning' | 'compare';
 /**
  * Column visibility configuration
  */
@@ -122,4 +122,5 @@ export interface ColumnGroups {
     planning: string[];
     atoll: string[];
     position: string[];
+    compare: string[];
 }

package/dist/shared/demo/cell-types.d.ts

@@ -39,12 +39,12 @@ export interface Cell {
     atollPW?: number;
     atollRS?: number;
     atollBW?: number;
-    rru: string;
     nwtET?: number;
     nwtPW?: number;
-    pci?: number;
     nwtRS?: number;
     nwtBW?: number;
+    pci?: number;
+    rru: string;
     other?: Record<string, unknown>;
     customSubgroup: string;
 }

package/package.json

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