@smartnet360/svelte-components 0.0.107 → 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 {
@@ -63,10 +64,15 @@
 		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,
@@ -79,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,
@@ -193,19 +203,19 @@
 
 	// Update table data when cells actually change (not just reference)
 	$effect(() => {
-		const currentLength = cells?.length ?? 0;
-		const currentFirstId = cells?.[0]?.id ?? null;
+		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(cells);
+			table.replaceData(sortedCells);
 			ondatachange?.({
 				type: 'load',
-				rowCount: cells.length,
-				filteredCount: cells.length
+				rowCount: sortedCells.length,
+				filteredCount: sortedCells.length
 			});
 		}
 	});

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
  */

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
  */

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

@@ -10,4 +10,4 @@ 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, getColumnMetadata, getPresetVisibleFields, createTechFormatter, createStatusFormatter, createFbandFormatter, numberFormatter, coordinateFormatter, azimuthFormatter, heightFormatter, type ColumnMeta } 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

@@ -14,4 +14,4 @@ export { default as ColumnPicker } from './ColumnPicker.svelte';
 // 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, getColumnMetadata, getPresetVisibleFields, 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/package.json

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