@smartnet360/svelte-components 0.0.106 → 0.0.108

package/dist/core/CellTable/CellTable.svelte

@@ -16,7 +16,8 @@
 		getColumnsForPreset,
 		getGroupHeaderFormatter,
 		DEFAULT_TECH_COLORS,
-		DEFAULT_STATUS_COLORS
+		DEFAULT_STATUS_COLORS,
+		cellDataSorter
 	} from './column-config';
 
 	interface Props extends CellTableProps {
@@ -57,13 +58,21 @@
 	let table: Tabulator | null = null;
 	let isInitialized = $state(false);
 
-	// Reactive column configuration
-	let columns = $derived(getColumnsForPreset(columnPreset, techColors, statusColors, headerFilters));
+	// Reactive column configuration - only changes when preset changes
+	let columns = $derived.by(() => {
+		// Only depend on columnPreset to avoid unnecessary recalculations
+		return getColumnsForPreset(columnPreset, techColors, statusColors, headerFilters);
+	});
+
+	// Pre-sort data using our custom multi-level sorter
+	let sortedCells = $derived.by(() => {
+		return [...cells].sort(cellDataSorter);
+	});
 
 	// Build Tabulator options
 	function buildOptions(): Options {
 		const baseOptions: Options = {
-			data: cells,
+			data: sortedCells,
 			columns: columns,
 			layout: 'fitDataFill',
 			height: height,
@@ -76,8 +85,12 @@
 			resizableColumns: resizableColumns,
 			movableColumns: movableColumns,
 			
-			// Sorting
-			initialSort: [{ column: 'siteId', dir: 'asc' }],
+			// No initial sort - data is pre-sorted
+			initialSort: [
+				{ column: 'tech', dir: 'asc' },
+				{ column: 'fband', dir: 'asc' },
+				{ column: 'cellName', dir: 'asc' }
+			],
 			
 			// Row selection
 			selectable: selectable ? (multiSelect ? true : 1) : false,
@@ -171,13 +184,7 @@
 		// Mark as initialized after table is ready
 		table.on('tableBuilt', () => {
 			isInitialized = true;
-		});
-	}
-
-	// Update table data when cells change
-	$effect(() => {
-		if (isInitialized && table && cells) {
-			table.replaceData(cells);
+			// Fire initial data change event
 			if (ondatachange) {
 				ondatachange({
 					type: 'load',
@@ -185,28 +192,52 @@
 					filteredCount: cells.length
 				});
 			}
+		});
+	}
+
+	// Track previous values to avoid unnecessary updates
+	let prevCellsLength = 0;
+	let prevCellsFirstId: string | null = null;
+	let prevGroupBy: string | null = null;
+	let prevColumnPreset: string | null = null;
+
+	// Update table data when cells actually change (not just reference)
+	$effect(() => {
+		const currentLength = sortedCells?.length ?? 0;
+		const currentFirstId = sortedCells?.[0]?.id ?? null;
+		
+		// Only update if length or first item changed (rough equality check)
+		if (isInitialized && table && 
+			(currentLength !== prevCellsLength || currentFirstId !== prevCellsFirstId)) {
+			prevCellsLength = currentLength;
+			prevCellsFirstId = currentFirstId;
+			table.replaceData(sortedCells);
+			ondatachange?.({
+				type: 'load',
+				rowCount: sortedCells.length,
+				filteredCount: sortedCells.length
+			});
 		}
 	});
 
 	// Update grouping when groupBy changes
 	$effect(() => {
-		if (isInitialized && table) {
+		if (isInitialized && table && groupBy !== prevGroupBy) {
+			prevGroupBy = groupBy;
 			if (groupBy === 'none') {
 				table.setGroupBy(false);
 			} else {
 				table.setGroupBy(groupBy);
 				table.setGroupHeader(getGroupHeaderFormatter(groupBy));
 			}
-			// Force redraw after grouping change
-			table.redraw(true);
 		}
 	});
 
 	// Update columns when preset changes
 	$effect(() => {
-		if (isInitialized && table && columns) {
+		if (isInitialized && table && columnPreset !== prevColumnPreset) {
+			prevColumnPreset = columnPreset;
 			table.setColumns(columns);
-			table.redraw(true);
 		}
 	});
 
@@ -256,12 +287,63 @@
 	}
 
 	export function clearFilters(): void {
-		table?.clearFilter();
+		if (!table) return;
+		// Clear programmatic filters
+		table.clearFilter();
+		// Clear header filter inputs
+		// eslint-disable-next-line @typescript-eslint/no-explicit-any
+		(table as any).clearHeaderFilter();
 	}
 
 	export function redraw(): void {
 		table?.redraw(true);
 	}
+
+	export function collapseAll(): void {
+		if (!table) return;
+		// Use setGroupStartOpen to collapse all groups, then refresh data to apply
+		// eslint-disable-next-line @typescript-eslint/no-explicit-any
+		(table as any).setGroupStartOpen(false);
+		table.setData(table.getData());
+	}
+
+	export function expandAll(): void {
+		if (!table) return;
+		// Use setGroupStartOpen to expand all groups, then refresh data to apply
+		// eslint-disable-next-line @typescript-eslint/no-explicit-any
+		(table as any).setGroupStartOpen(true);
+		table.setData(table.getData());
+	}
+
+	export function toggleHeaderFilters(visible: boolean): void {
+		if (!table) return;
+		const headerFiltersElement = tableContainer.querySelector('.tabulator-header-filter');
+		if (headerFiltersElement) {
+			// Toggle all header filter rows
+			const filterRows = tableContainer.querySelectorAll('.tabulator-col .tabulator-header-filter');
+			filterRows.forEach(el => {
+				(el as HTMLElement).style.display = visible ? '' : 'none';
+			});
+			table.redraw();
+		}
+	}
+
+	export function showColumn(field: string): void {
+		table?.showColumn(field);
+	}
+
+	export function hideColumn(field: string): void {
+		table?.hideColumn(field);
+	}
+
+	export function getVisibleColumns(): string[] {
+		if (!table) return [];
+		const columns = table.getColumns();
+		return columns
+			.filter(col => col.isVisible())
+			.map(col => col.getField())
+			.filter((field): field is string => !!field);
+	}
 </script>
 
 <div class="cell-table-container">

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

@@ -22,6 +22,12 @@ declare const CellTable: import("svelte").Component<Props, {
     setFilter: (field: string, type: string, value: unknown) => void;
     clearFilters: () => void;
     redraw: () => void;
+    collapseAll: () => void;
+    expandAll: () => void;
+    toggleHeaderFilters: (visible: boolean) => void;
+    showColumn: (field: string) => void;
+    hideColumn: (field: string) => void;
+    getVisibleColumns: () => string[];
 }, "">;
 type CellTable = ReturnType<typeof CellTable>;
 export default CellTable;

package/dist/core/CellTable/CellTablePanel.svelte

@@ -2,6 +2,7 @@
 	import type { Snippet } from 'svelte';
 	import CellTable from './CellTable.svelte';
 	import CellTableToolbar from './CellTableToolbar.svelte';
+	import { getColumnMetadata, getPresetVisibleFields } from './column-config';
 	import type {
 		CellData,
 		CellTableGroupField,
@@ -89,10 +90,22 @@
 	let filteredCount = $state(cells.length);
 	let sidebarOpen = $state(false);
 	let clickedCell: CellData | null = $state(null);
+	let tableRefSet = false;
+	let filtersVisible = $state(true);
 
-	// Expose table methods via tableRef
+	// Column visibility management
+	const columnMeta = getColumnMetadata();
+	let visibleColumns = $state<string[]>(getPresetVisibleFields(columnPreset));
+
+	// Update visible columns when preset changes
 	$effect(() => {
-		if (cellTable) {
+		visibleColumns = getPresetVisibleFields(columnPreset);
+	});
+
+	// Expose table methods via tableRef - only set once
+	$effect(() => {
+		if (cellTable && !tableRefSet) {
+			tableRefSet = true;
 			tableRef = {
 				redraw: () => cellTable?.redraw()
 			};
@@ -138,6 +151,44 @@
 		cellTable?.clearFilters();
 	}
 
+	function handleCollapseAll() {
+		cellTable?.collapseAll();
+	}
+
+	function handleExpandAll() {
+		cellTable?.expandAll();
+	}
+
+	function handleToggleFilters() {
+		filtersVisible = !filtersVisible;
+		cellTable?.toggleHeaderFilters(filtersVisible);
+	}
+
+	function handleColumnVisibilityChange(field: string, visible: boolean) {
+		if (visible) {
+			if (!visibleColumns.includes(field)) {
+				visibleColumns = [...visibleColumns, field];
+			}
+			cellTable?.showColumn(field);
+		} else {
+			visibleColumns = visibleColumns.filter(f => f !== field);
+			cellTable?.hideColumn(field);
+		}
+	}
+
+	function handleResetColumns() {
+		const defaultFields = getPresetVisibleFields(columnPreset);
+		visibleColumns = defaultFields;
+		// Show/hide columns to match preset
+		columnMeta.forEach(col => {
+			if (defaultFields.includes(col.field)) {
+				cellTable?.showColumn(col.field);
+			} else {
+				cellTable?.hideColumn(col.field);
+			}
+		});
+	}
+
 	function toggleSidebar() {
 		sidebarOpen = !sidebarOpen;
 		setTimeout(() => cellTable?.redraw(), 320);
@@ -212,6 +263,14 @@
 			onexportcsv={handleExportCSV}
 			onexportjson={handleExportJSON}
 			onclearfilters={handleClearFilters}
+			oncollapseall={handleCollapseAll}
+			onexpandall={handleExpandAll}
+			{filtersVisible}
+			ontogglefilters={handleToggleFilters}
+			{columnMeta}
+			{visibleColumns}
+			oncolumnvisibilitychange={handleColumnVisibilityChange}
+			onresetcolumns={handleResetColumns}
 		/>
 	{/if}
 
@@ -330,6 +389,30 @@
 									<dt class="col-5 text-muted">Comment</dt>
 									<dd class="col-7 fst-italic">{clickedCell.comment}</dd>
 								{/if}
+
+								<!-- Dynamic Other Properties -->
+								{#if clickedCell.other && Object.keys(clickedCell.other).length > 0}
+									<dt class="col-12 text-muted mt-2 mb-1 border-top pt-2">Other</dt>
+									
+									{#each Object.entries(clickedCell.other) as [key, value]}
+										<dt class="col-5 text-muted text-capitalize">{key.replace(/_/g, ' ')}</dt>
+										<dd class="col-7">
+											{#if value === null || value === undefined}
+												<span class="text-muted fst-italic">—</span>
+											{:else if typeof value === 'boolean'}
+												<span class="badge" class:bg-success={value} class:bg-secondary={!value}>
+													{value ? 'Yes' : 'No'}
+												</span>
+											{:else if typeof value === 'number'}
+												<code>{value}</code>
+											{:else if typeof value === 'object'}
+												<code class="small text-break">{JSON.stringify(value)}</code>
+											{:else}
+												{String(value)}
+											{/if}
+										</dd>
+									{/each}
+								{/if}
 							</dl>
 						{:else}
 							<div class="text-center text-muted py-5">

package/dist/core/CellTable/CellTableToolbar.svelte

@@ -1,5 +1,7 @@
 <script lang="ts">
 	import type { CellTableGroupField, ColumnPreset } from './types';
+	import type { ColumnMeta } from './column-config';
+	import ColumnPicker from './ColumnPicker.svelte';
 
 	interface Props {
 		/** Current grouping field */
@@ -28,6 +30,22 @@
 		onexportjson?: () => void;
 		/** Clear filters event */
 		onclearfilters?: () => void;
+		/** Collapse all groups event */
+		oncollapseall?: () => void;
+		/** Expand all groups event */
+		onexpandall?: () => void;
+		/** Whether header filters are visible */
+		filtersVisible?: boolean;
+		/** Toggle filters event */
+		ontogglefilters?: () => void;
+		/** All available columns metadata */
+		columnMeta?: ColumnMeta[];
+		/** Currently visible column fields */
+		visibleColumns?: string[];
+		/** Column visibility change event */
+		oncolumnvisibilitychange?: (field: string, visible: boolean) => void;
+		/** Reset columns to preset default */
+		onresetcolumns?: () => void;
 	}
 
 	let {
@@ -43,7 +61,15 @@
 		onpresetchange,
 		onexportcsv,
 		onexportjson,
-		onclearfilters
+		onclearfilters,
+		oncollapseall,
+		onexpandall,
+		filtersVisible = true,
+		ontogglefilters,
+		columnMeta = [],
+		visibleColumns = [],
+		oncolumnvisibilitychange,
+		onresetcolumns
 	}: Props = $props();
 
 	const groupOptions: { value: CellTableGroupField; label: string }[] = [
@@ -107,6 +133,28 @@
 					<option value={option.value}>{option.label}</option>
 				{/each}
 			</select>
+			{#if groupBy !== 'none'}
+				<div class="btn-group ms-2">
+					<button
+						type="button"
+						class="btn btn-sm btn-outline-secondary"
+						onclick={oncollapseall}
+						title="Collapse all groups"
+						aria-label="Collapse all groups"
+					>
+						<i class="bi bi-chevron-contract"></i>
+					</button>
+					<button
+						type="button"
+						class="btn btn-sm btn-outline-secondary"
+						onclick={onexpandall}
+						title="Expand all groups"
+						aria-label="Expand all groups"
+					>
+						<i class="bi bi-chevron-expand"></i>
+					</button>
+				</div>
+			{/if}
 		</div>
 	{/if}
 
@@ -127,6 +175,15 @@
 					<option value={option.value}>{option.label}</option>
 				{/each}
 			</select>
+			{#if columnMeta.length > 0}
+				<ColumnPicker
+					columns={columnMeta}
+					{visibleColumns}
+					presetName={presetOptions.find(p => p.value === columnPreset)?.label ?? 'Default'}
+					onchange={oncolumnvisibilitychange}
+					onreset={onresetcolumns}
+				/>
+			{/if}
 		</div>
 	{/if}
 
@@ -134,6 +191,19 @@
 
 	<!-- Actions -->
 	<div class="toolbar-actions d-flex align-items-center gap-2">
+		{#if ontogglefilters}
+			<button
+				type="button"
+				class="btn btn-sm"
+				class:btn-outline-secondary={!filtersVisible}
+				class:btn-secondary={filtersVisible}
+				onclick={ontogglefilters}
+				title={filtersVisible ? 'Hide filters' : 'Show filters'}
+				aria-label={filtersVisible ? 'Hide filters' : 'Show filters'}
+			>
+				<i class="bi bi-funnel"></i>
+			</button>
+		{/if}
 		{#if onclearfilters}
 			<button
 				type="button"

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

@@ -1,4 +1,5 @@
 import type { CellTableGroupField, ColumnPreset } from './types';
+import type { ColumnMeta } from './column-config';
 interface Props {
     /** Current grouping field */
     groupBy?: CellTableGroupField;
@@ -26,6 +27,22 @@ interface Props {
     onexportjson?: () => void;
     /** Clear filters event */
     onclearfilters?: () => void;
+    /** Collapse all groups event */
+    oncollapseall?: () => void;
+    /** Expand all groups event */
+    onexpandall?: () => void;
+    /** Whether header filters are visible */
+    filtersVisible?: boolean;
+    /** Toggle filters event */
+    ontogglefilters?: () => void;
+    /** All available columns metadata */
+    columnMeta?: ColumnMeta[];
+    /** Currently visible column fields */
+    visibleColumns?: string[];
+    /** Column visibility change event */
+    oncolumnvisibilitychange?: (field: string, visible: boolean) => void;
+    /** Reset columns to preset default */
+    onresetcolumns?: () => void;
 }
 declare const CellTableToolbar: import("svelte").Component<Props, {}, "">;
 type CellTableToolbar = ReturnType<typeof CellTableToolbar>;

package/dist/core/CellTable/ColumnPicker.svelte

@@ -0,0 +1,214 @@
+<script lang="ts">
+	/**
+	 * ColumnPicker - Column visibility customization dropdown
+	 * 
+	 * Shows a dropdown panel with checkboxes to toggle individual column visibility.
+	 * Works alongside presets - user can customize which columns are visible.
+	 */
+
+	interface ColumnInfo {
+		field: string;
+		title: string;
+		group: string;
+	}
+
+	interface Props {
+		/** All available columns with their metadata */
+		columns: ColumnInfo[];
+		/** Currently visible column fields */
+		visibleColumns: string[];
+		/** Callback when column visibility changes */
+		onchange?: (field: string, visible: boolean) => void;
+		/** Callback to reset to preset defaults */
+		onreset?: () => void;
+		/** Current preset name for display */
+		presetName?: string;
+	}
+
+	let {
+		columns = [],
+		visibleColumns = [],
+		onchange,
+		onreset,
+		presetName = 'Default'
+	}: Props = $props();
+
+	let isOpen = $state(false);
+	let dropdownRef: HTMLDivElement;
+
+	// Group columns by category
+	const groupedColumns = $derived.by(() => {
+		const groups: Record<string, ColumnInfo[]> = {};
+		for (const col of columns) {
+			if (!groups[col.group]) {
+				groups[col.group] = [];
+			}
+			groups[col.group].push(col);
+		}
+		return groups;
+	});
+
+	const groupOrder = ['Core', 'Physical', 'Network', 'Atoll', 'Position', 'Planning'];
+
+	function toggleDropdown() {
+		isOpen = !isOpen;
+	}
+
+	function handleCheckboxChange(field: string, event: Event) {
+		const checked = (event.target as HTMLInputElement).checked;
+		onchange?.(field, checked);
+	}
+
+	function handleReset() {
+		onreset?.();
+	}
+
+	function handleSelectAll() {
+		columns.forEach(col => onchange?.(col.field, true));
+	}
+
+	function handleDeselectAll() {
+		// Keep at least core columns visible
+		columns.forEach(col => {
+			const isCore = col.group === 'Core';
+			onchange?.(col.field, isCore);
+		});
+	}
+
+	// Close dropdown when clicking outside
+	function handleClickOutside(event: MouseEvent) {
+		if (dropdownRef && !dropdownRef.contains(event.target as Node)) {
+			isOpen = false;
+		}
+	}
+
+	$effect(() => {
+		if (isOpen) {
+			document.addEventListener('click', handleClickOutside);
+			return () => document.removeEventListener('click', handleClickOutside);
+		}
+	});
+</script>
+
+<div class="column-picker position-relative" bind:this={dropdownRef}>
+	<button
+		type="button"
+		class="btn btn-sm btn-outline-secondary"
+		onclick={toggleDropdown}
+		title="Customize columns"
+		aria-label="Customize columns"
+		aria-expanded={isOpen}
+	>
+		<i class="bi bi-pencil"></i>
+	</button>
+
+	{#if isOpen}
+		<div class="column-picker-dropdown position-absolute end-0 mt-1 bg-white border rounded shadow-sm" 
+			 style="z-index: 1050; width: 280px; max-height: 400px;">
+			
+			<!-- Header -->
+			<div class="d-flex align-items-center justify-content-between p-2 border-bottom bg-light">
+				<span class="small fw-medium">
+					<i class="bi bi-layout-three-columns text-primary"></i>
+					Customize "{presetName}"
+				</span>
+				<button
+					type="button"
+					class="btn-close btn-close-sm"
+					onclick={() => isOpen = false}
+					aria-label="Close"
+				></button>
+			</div>
+
+			<!-- Quick actions -->
+			<div class="d-flex gap-2 p-2 border-bottom">
+				<button
+					type="button"
+					class="btn btn-sm btn-outline-secondary flex-grow-1"
+					onclick={handleSelectAll}
+				>
+					Select All
+				</button>
+				<button
+					type="button"
+					class="btn btn-sm btn-outline-secondary flex-grow-1"
+					onclick={handleDeselectAll}
+				>
+					Core Only
+				</button>
+			</div>
+
+			<!-- Scrollable column list -->
+			<div class="column-list overflow-auto" style="max-height: 280px;">
+				{#each groupOrder as groupName}
+					{#if groupedColumns[groupName]}
+						<div class="column-group">
+							<div class="px-2 py-1 bg-body-tertiary small fw-medium text-muted border-bottom">
+								{groupName}
+							</div>
+							{#each groupedColumns[groupName] as col}
+								<label class="d-flex align-items-center px-2 py-1 column-item">
+									<input
+										type="checkbox"
+										class="form-check-input me-2 mt-0"
+										checked={visibleColumns.includes(col.field)}
+										onchange={(e) => handleCheckboxChange(col.field, e)}
+									/>
+									<span class="small">{col.title}</span>
+									<code class="ms-auto small text-muted">{col.field}</code>
+								</label>
+							{/each}
+						</div>
+					{/if}
+				{/each}
+			</div>
+
+			<!-- Footer with reset -->
+			<div class="p-2 border-top bg-light">
+				<button
+					type="button"
+					class="btn btn-sm btn-outline-primary w-100"
+					onclick={handleReset}
+				>
+					<i class="bi bi-arrow-counterclockwise"></i>
+					Reset to "{presetName}" Default
+				</button>
+			</div>
+		</div>
+	{/if}
+</div>
+
+<style>
+	.column-picker-dropdown {
+		animation: fadeIn 0.15s ease-out;
+	}
+
+	@keyframes fadeIn {
+		from {
+			opacity: 0;
+			transform: translateY(-4px);
+		}
+		to {
+			opacity: 1;
+			transform: translateY(0);
+		}
+	}
+
+	.column-item {
+		cursor: pointer;
+		transition: background-color 0.1s;
+	}
+
+	.column-item:hover {
+		background-color: var(--bs-tertiary-bg, #f8f9fa);
+	}
+
+	.form-check-input {
+		cursor: pointer;
+	}
+
+	.btn-close-sm {
+		font-size: 0.65rem;
+		padding: 0.25rem;
+	}
+</style>

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

@@ -0,0 +1,26 @@
+/**
+ * ColumnPicker - Column visibility customization dropdown
+ *
+ * Shows a dropdown panel with checkboxes to toggle individual column visibility.
+ * Works alongside presets - user can customize which columns are visible.
+ */
+interface ColumnInfo {
+    field: string;
+    title: string;
+    group: string;
+}
+interface Props {
+    /** All available columns with their metadata */
+    columns: ColumnInfo[];
+    /** Currently visible column fields */
+    visibleColumns: string[];
+    /** Callback when column visibility changes */
+    onchange?: (field: string, visible: boolean) => void;
+    /** Callback to reset to preset defaults */
+    onreset?: () => void;
+    /** Current preset name for display */
+    presetName?: string;
+}
+declare const ColumnPicker: import("svelte").Component<Props, {}, "">;
+type ColumnPicker = ReturnType<typeof ColumnPicker>;
+export default ColumnPicker;

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

@@ -49,6 +49,25 @@ export declare function azimuthFormatter(cell: CellComponent): string;
  * Height formatter with meter unit
  */
 export declare function heightFormatter(cell: CellComponent): string;
+/**
+ * Custom sorter for fband - extracts numeric portion and sorts numerically
+ * Examples: LTE700 → 700, GSM900 → 900, LTE1800 → 1800, 5G-3500 → 3500
+ */
+export declare function fbandSorter(a: string, b: string): number;
+/**
+ * Custom sorter for cellName - sorts by the 5th character (sector digit)
+ * Example: 10001 → '1', 10002 → '2', 10003 → '3'
+ */
+export declare function cellNameSectorSorter(a: string, b: string): number;
+/**
+ * Combined multi-level sorter for cell data
+ * Sort order: tech (asc) → fband by numeric value (asc) → cellName by 5th digit (asc)
+ */
+export declare function cellDataSorter<T extends {
+    tech?: string;
+    fband?: string;
+    cellName?: string;
+}>(a: T, b: T): number;
 /**
  * Get all column definitions
  */
@@ -61,3 +80,19 @@ export declare function getColumnsForPreset(preset: ColumnPreset, techColors?: T
  * Get group header formatter for a specific field
  */
 export declare function getGroupHeaderFormatter(groupField: string): (value: unknown, count: number) => string;
+/**
+ * Column metadata for the column picker
+ */
+export interface ColumnMeta {
+    field: string;
+    title: string;
+    group: string;
+}
+/**
+ * Get column metadata for the column picker UI
+ */
+export declare function getColumnMetadata(): ColumnMeta[];
+/**
+ * Get default visible columns for a preset
+ */
+export declare function getPresetVisibleFields(preset: ColumnPreset): string[];

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

@@ -123,6 +123,46 @@ export function heightFormatter(cell) {
         return '';
     return `${value}m`;
 }
+/**
+ * Custom sorter for fband - extracts numeric portion and sorts numerically
+ * Examples: LTE700 → 700, GSM900 → 900, LTE1800 → 1800, 5G-3500 → 3500
+ */
+export function fbandSorter(a, b) {
+    const numA = parseInt(a.replace(/\D/g, ''), 10) || 0;
+    const numB = parseInt(b.replace(/\D/g, ''), 10) || 0;
+    return numA - numB;
+}
+/**
+ * Custom sorter for cellName - sorts by the 5th character (sector digit)
+ * Example: 10001 → '1', 10002 → '2', 10003 → '3'
+ */
+export function cellNameSectorSorter(a, b) {
+    const charA = a.charAt(4) || '0';
+    const charB = b.charAt(4) || '0';
+    return charA.localeCompare(charB);
+}
+/**
+ * Combined multi-level sorter for cell data
+ * Sort order: tech (asc) → fband by numeric value (asc) → cellName by 5th digit (asc)
+ */
+export function cellDataSorter(a, b) {
+    // 1. Sort by tech (string comparison)
+    const techA = String(a.tech || '');
+    const techB = String(b.tech || '');
+    const techCompare = techA.localeCompare(techB);
+    if (techCompare !== 0)
+        return techCompare;
+    // 2. Sort by fband (numeric extraction)
+    const fbandA = String(a.fband || '');
+    const fbandB = String(b.fband || '');
+    const fbandCompare = fbandSorter(fbandA, fbandB);
+    if (fbandCompare !== 0)
+        return fbandCompare;
+    // 3. Sort by cellName 5th character (sector)
+    const cellNameA = String(a.cellName || '');
+    const cellNameB = String(b.cellName || '');
+    return cellNameSectorSorter(cellNameA, cellNameB);
+}
 /**
  * Get all column definitions
  */
@@ -463,3 +503,75 @@ export function getGroupHeaderFormatter(groupField) {
 			<span class="text-muted">(${count} cell${count !== 1 ? 's' : ''})</span>`;
     };
 }
+/**
+ * Get column metadata for the column picker UI
+ */
+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: 'tech', title: 'Technology', group: 'Core' },
+        { field: 'fband', title: 'Band', 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: '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' },
+        { field: 'nwtRS', title: 'NWT RS', group: 'Network' },
+        { field: 'nwtBW', title: 'NWT BW', group: 'Network' },
+        // Atoll
+        { 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' },
+        // 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' },
+    ];
+}
+/**
+ * Get default visible columns for a preset
+ */
+export function getPresetVisibleFields(preset) {
+    switch (preset) {
+        case 'compact':
+            return ['cellName', 'siteId', 'tech', 'fband', 'status'];
+        case 'full':
+            return getColumnMetadata().map(c => c.field);
+        case 'physical':
+            return [...COLUMN_GROUPS.core, ...COLUMN_GROUPS.physical];
+        case 'network':
+            return [...COLUMN_GROUPS.core, ...COLUMN_GROUPS.network];
+        case 'planning':
+            return [...COLUMN_GROUPS.core, ...COLUMN_GROUPS.planning];
+        case 'default':
+        default:
+            return ['id', 'cellName', 'siteId', 'tech', 'fband', 'frq', 'status', 'azimuth', 'height', 'antenna'];
+    }
+}

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

@@ -7,6 +7,7 @@ export { default as CellTable } from './CellTable.svelte';
 export { default as CellTableToolbar } from './CellTableToolbar.svelte';
 export { default as CellTablePanel } from './CellTablePanel.svelte';
 export { default as CellTableDemo } from './CellTableDemo.svelte';
+export { default as ColumnPicker } from './ColumnPicker.svelte';
 export { generateCells, generateCellsFromPreset, getGeneratorInfo, GENERATOR_PRESETS, type CellGeneratorConfig, type GeneratorPreset } from '../../shared/demo';
 export type { CellData, CellTableGroupField, ColumnPreset, ColumnVisibility, TechColorMap, StatusColorMap, CellTableProps, RowSelectionEvent, RowClickEvent, RowDblClickEvent, DataChangeEvent, CellTableColumn, ColumnGroups } from './types';
-export { DEFAULT_TECH_COLORS, DEFAULT_STATUS_COLORS, FBAND_COLORS, COLUMN_GROUPS, getAllColumns, getColumnsForPreset, getGroupHeaderFormatter, createTechFormatter, createStatusFormatter, createFbandFormatter, numberFormatter, coordinateFormatter, azimuthFormatter, heightFormatter } from './column-config';
+export { DEFAULT_TECH_COLORS, DEFAULT_STATUS_COLORS, FBAND_COLORS, COLUMN_GROUPS, getAllColumns, getColumnsForPreset, getGroupHeaderFormatter, getColumnMetadata, getPresetVisibleFields, fbandSorter, cellNameSectorSorter, cellDataSorter, createTechFormatter, createStatusFormatter, createFbandFormatter, numberFormatter, coordinateFormatter, azimuthFormatter, heightFormatter, type ColumnMeta } from './column-config';

package/dist/core/CellTable/index.js

@@ -8,9 +8,10 @@ export { default as CellTable } from './CellTable.svelte';
 export { default as CellTableToolbar } from './CellTableToolbar.svelte';
 export { default as CellTablePanel } from './CellTablePanel.svelte';
 export { default as CellTableDemo } from './CellTableDemo.svelte';
+export { default as ColumnPicker } from './ColumnPicker.svelte';
 // Re-export shared demo data utilities for convenience
 // Note: Cell type is NOT re-exported here to avoid conflicts with map-v2
 // Import Cell from '$lib/shared/demo' or '@smartnet360/svelte-components' directly
 export { generateCells, generateCellsFromPreset, getGeneratorInfo, GENERATOR_PRESETS } from '../../shared/demo';
 // Configuration utilities
-export { DEFAULT_TECH_COLORS, DEFAULT_STATUS_COLORS, FBAND_COLORS, COLUMN_GROUPS, getAllColumns, getColumnsForPreset, getGroupHeaderFormatter, createTechFormatter, createStatusFormatter, createFbandFormatter, numberFormatter, coordinateFormatter, azimuthFormatter, heightFormatter } from './column-config';
+export { DEFAULT_TECH_COLORS, DEFAULT_STATUS_COLORS, FBAND_COLORS, COLUMN_GROUPS, getAllColumns, getColumnsForPreset, getGroupHeaderFormatter, getColumnMetadata, getPresetVisibleFields, fbandSorter, cellNameSectorSorter, cellDataSorter, createTechFormatter, createStatusFormatter, createFbandFormatter, numberFormatter, coordinateFormatter, azimuthFormatter, heightFormatter } from './column-config';

package/dist/core/CoverageMap/data/SiteStore.js

@@ -116,8 +116,8 @@ export class SiteStore {
                 availableTilts: ['0']
             };
         }
-        // Determine TX power (priority: atollPW > nwtP1 > default)
-        const txPower = cell.atollPW || cell.nwtP1 || 43; // Default to 43 dBm (20W)
+        // Determine TX power (priority: atollPW > nwtPW > default)
+        const txPower = cell.atollPW || cell.nwtPW || 43; // Default to 43 dBm (20W)
         // Determine frequency from band
         const frequency = antennaPattern.frequency || this.parseFrequency(cell.fband);
         // Get mechanical tilt (might need to parse from string)

package/dist/shared/demo/cell-generator.js

@@ -176,7 +176,7 @@ export function generateCells(config) {
                     id: cellName,
                     txId: cellName,
                     cellID: cellName,
-                    cellID2G: techBand.tech === '2G' ? cellName : '',
+                    cellId2G: techBand.tech === '2G' ? cellName : '',
                     cellName: cellName,
                     siteId: siteId,
                     tech: techBand.tech,
@@ -201,22 +201,26 @@ export function generateCells(config) {
                     siteLongitude: siteLng,
                     comment: `Demo ${techBand.tech} ${techBand.band} cell at azimuth ${sector.azimuth}°`,
                     planner: 'Demo User',
-                    atollETP: 43.0,
+                    atollET: 43.0,
                     atollPW: 20.0,
                     atollRS: 500.0 + (techBand.band === '700' ? 200 : 0),
                     atollBW: parseFloat(techBand.band) / 100,
-                    cellId3: `${cellName}-3G`,
-                    nwtP1: 20,
-                    nwtP2: 40,
-                    pci1: cellCounter % 504,
+                    rru: `RRU-${siteId}-${sector.sectorNum}`,
+                    nwtET: 40.0,
+                    nwtPW: 20,
+                    pci: cellCounter % 504,
                     nwtRS: 450.0,
                     nwtBW: 10.0,
                     other: {
+                        city: ['Tehran', 'Shiraz', 'Isfahan', 'Mashhad', 'Tabriz'][siteNum % 5],
+                        bcc: bandIndex % 8,
+                        ncc: Math.floor(bandIndex / 8) % 8,
+                        mall: random() < 0.1 ? 'Shopping Center' : undefined,
+                        hsn: techBand.tech === '2G' ? Math.floor(random() * 64) : undefined,
                         demoCell: true,
                         siteNumber: actualSiteIndex,
                         sector: sector.sectorNum,
                         techBandKey: `${techBand.tech}_${techBand.band}`,
-                        radius: normalizedRadius,
                         densityZone: zone.name
                     },
                     customSubgroup: `Sector-${sector.sectorNum}`

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

@@ -10,7 +10,7 @@ export interface Cell {
     id: string;
     txId: string;
     cellID: string;
-    cellID2G: string;
+    cellId2G: string;
     cellName: string;
     siteId: string;
     tech: string;
@@ -35,16 +35,16 @@ export interface Cell {
     siteLongitude: number;
     comment: string;
     planner: string;
-    atollETP: number;
-    atollPW: number;
-    atollRS: number;
-    atollBW: number;
-    cellId3: string;
-    nwtP1: number;
-    nwtP2: number;
-    pci1: number;
-    nwtRS: number;
-    nwtBW: number;
+    atollET?: number;
+    atollPW?: number;
+    atollRS?: number;
+    atollBW?: number;
+    rru: string;
+    nwtET?: number;
+    nwtPW?: number;
+    pci?: number;
+    nwtRS?: number;
+    nwtBW?: number;
     other?: Record<string, unknown>;
     customSubgroup: string;
 }

package/package.json

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