@smartnet360/svelte-components 0.0.134 → 0.0.136

package/dist/core/{CellTable → CellTableV2}/column-config.js

@@ -60,8 +60,6 @@ export const COLUMN_GROUPS = {
     atoll: ['atollET', 'atollMT', 'atollPW', 'atollRS', 'atollBW'],
     position: ['latitude', 'longitude', 'siteLatitude', 'siteLongitude', 'dx', 'dy'],
     compare: ['compareET', 'comparePW', 'compareRS', 'compareBW'],
-    kpi: ['kpiTraffic', 'kpiThroughput', 'kpiAvailability', 'kpiSuccessRate'],
-    history: ['configDate', 'frequency', 'antennaChange', 'etiltChange', 'mtiltChange', 'powerChange'],
 };
 /**
  * Create a technology badge formatter
@@ -168,98 +166,6 @@ export function createCompareFormatter(atollField, nwtField) {
         return `<span class="badge" style="background-color: ${bgColor}; color: ${textColor}; font-size: 0.75rem; font-weight: normal;">${atollStr} | ${nwtStr}</span>`;
     };
 }
-/**
- * Create a history change formatter for showing current vs previous values
- * Highlights changes in yellow/amber, unchanged values in muted style
- *
- * @param currentField - Field name for current value
- * @param prevField - Field name for previous value
- */
-export function createHistoryChangeFormatter(currentField, prevField) {
-    return (cell) => {
-        const row = cell.getRow().getData();
-        const currentVal = row[currentField];
-        const prevVal = row[prevField];
-        const currentStr = currentVal !== null && currentVal !== undefined ? String(currentVal) : '-';
-        const prevStr = prevVal !== null && prevVal !== undefined ? String(prevVal) : '-';
-        const hasChanged = currentVal !== prevVal;
-        if (hasChanged) {
-            // Value changed - highlight with amber/warning color
-            return `<span class="badge bg-warning text-dark" style="font-size: 0.75rem; font-weight: 500;" title="Changed from: ${prevStr}">${currentStr}</span>`;
-        }
-        else {
-            // No change - muted style
-            return `<span class="text-muted">${currentStr}</span>`;
-        }
-    };
-}
-/**
- * Format ISO date string to YYYY.MM.DD format for history display
- */
-export function historyDateFormatter(cell) {
-    const value = cell.getValue();
-    if (!value)
-        return '-';
-    try {
-        const date = new Date(value);
-        const year = date.getFullYear();
-        const month = String(date.getMonth() + 1).padStart(2, '0');
-        const day = String(date.getDate()).padStart(2, '0');
-        return `${year}-${month}-${day}`;
-    }
-    catch {
-        return value;
-    }
-}
-export function createSparklineFormatter(options = {}) {
-    const { width = 80, height = 24, lineColor = '#0d6efd', fillColor = 'rgba(13,110,253,0.2)', showDots = false, showLastValue = true, unit = '', decimals = 1 } = options;
-    return (cell) => {
-        const data = cell.getValue();
-        if (!data || !Array.isArray(data) || data.length === 0) {
-            return '<span class="text-muted">—</span>';
-        }
-        const values = data.filter(v => typeof v === 'number' && !isNaN(v));
-        if (values.length === 0) {
-            return '<span class="text-muted">—</span>';
-        }
-        const min = Math.min(...values);
-        const max = Math.max(...values);
-        const range = max - min || 1;
-        const padding = 2;
-        const chartWidth = showLastValue ? width - 35 : width - 4;
-        const chartHeight = height - 4;
-        // Generate SVG path
-        const points = values.map((v, i) => {
-            const x = padding + (i / (values.length - 1 || 1)) * (chartWidth - padding * 2);
-            const y = padding + (1 - (v - min) / range) * (chartHeight - padding * 2);
-            return { x, y, v };
-        });
-        // Line path
-        const linePath = points.map((p, i) => `${i === 0 ? 'M' : 'L'} ${p.x.toFixed(1)} ${p.y.toFixed(1)}`).join(' ');
-        // Fill path (closed polygon)
-        const fillPath = `${linePath} L ${points[points.length - 1].x.toFixed(1)} ${chartHeight - padding} L ${padding} ${chartHeight - padding} Z`;
-        // Dots
-        const dots = showDots
-            ? points.map(p => `<circle cx="${p.x.toFixed(1)}" cy="${p.y.toFixed(1)}" r="1.5" fill="${lineColor}"/>`).join('')
-            : '';
-        // Last value text
-        const lastValue = values[values.length - 1];
-        const valueText = showLastValue
-            ? `<text x="${width - 2}" y="${height / 2 + 4}" text-anchor="end" font-size="10" fill="#333">${lastValue.toFixed(decimals)}${unit}</text>`
-            : '';
-        // Trend indicator (comparing last vs first)
-        const trend = values.length > 1 ? values[values.length - 1] - values[0] : 0;
-        const trendColor = trend >= 0 ? '#198754' : '#dc3545';
-        return `
-			<svg width="${width}" height="${height}" style="vertical-align: middle;">
-				<path d="${fillPath}" fill="${fillColor}" />
-				<path d="${linePath}" fill="none" stroke="${lineColor}" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
-				${dots}
-				${valueText}
-			</svg>
-		`.trim().replace(/\s+/g, ' ');
-    };
-}
 /**
  * Custom sorter for fband - extracts numeric portion and sorts numerically
  * Examples: LTE700 → 700, GSM900 → 900, LTE1800 → 1800, 5G-3500 → 3500
@@ -365,49 +271,6 @@ export function getAllColumns(techColors = DEFAULT_TECH_COLORS, statusColors = D
             width: 120,
             ...headerFilterParams,
         },
-        {
-            title: 'Config Date',
-            field: 'configDate',
-            width: 120,
-            formatter: historyDateFormatter,
-            ...headerFilterParams,
-        },
-        {
-            title: 'Freq (MHz)',
-            field: 'frequency',
-            width: 100,
-            hozAlign: 'right',
-            ...headerFilterParams,
-        },
-        // History change columns (current vs previous, highlights changes)
-        {
-            title: 'Antenna',
-            field: 'antennaChange',
-            width: 160,
-            formatter: createHistoryChangeFormatter('antenna', 'prevAntenna'),
-            ...headerFilterParams,
-        },
-        {
-            title: 'E-Tilt',
-            field: 'etiltChange',
-            width: 80,
-            hozAlign: 'center',
-            formatter: createHistoryChangeFormatter('electricalTilt', 'prevElectricalTilt'),
-        },
-        {
-            title: 'M-Tilt',
-            field: 'mtiltChange',
-            width: 80,
-            hozAlign: 'center',
-            formatter: createHistoryChangeFormatter('mechanicalTilt', 'prevMechanicalTilt'),
-        },
-        {
-            title: 'Power',
-            field: 'powerChange',
-            width: 80,
-            hozAlign: 'center',
-            formatter: createHistoryChangeFormatter('power', 'prevPower'),
-        },
         // Physical columns
         {
             title: 'Antenna',
@@ -589,63 +452,6 @@ export function getAllColumns(techColors = DEFAULT_TECH_COLORS, statusColors = D
             formatter: createCompareFormatter('atollBW', 'nwBW'),
             headerTooltip: 'Atoll BW | Network BW',
         },
-        // KPI Sparkline columns
-        {
-            title: 'Traffic',
-            field: 'kpiTraffic',
-            width: 120,
-            hozAlign: 'center',
-            formatter: createSparklineFormatter({
-                unit: '',
-                lineColor: '#0d6efd',
-                fillColor: 'rgba(13,110,253,0.15)',
-                decimals: 0
-            }),
-            headerTooltip: 'Traffic volume trend (GB)',
-            headerSort: false,
-        },
-        {
-            title: 'Throughput',
-            field: 'kpiThroughput',
-            width: 120,
-            hozAlign: 'center',
-            formatter: createSparklineFormatter({
-                unit: '',
-                lineColor: '#6f42c1',
-                fillColor: 'rgba(111,66,193,0.15)',
-                decimals: 1
-            }),
-            headerTooltip: 'Throughput trend (Mbps)',
-            headerSort: false,
-        },
-        {
-            title: 'Avail %',
-            field: 'kpiAvailability',
-            width: 120,
-            hozAlign: 'center',
-            formatter: createSparklineFormatter({
-                unit: '%',
-                lineColor: '#198754',
-                fillColor: 'rgba(25,135,84,0.15)',
-                decimals: 1
-            }),
-            headerTooltip: 'Availability trend (%)',
-            headerSort: false,
-        },
-        {
-            title: 'Success %',
-            field: 'kpiSuccessRate',
-            width: 120,
-            hozAlign: 'center',
-            formatter: createSparklineFormatter({
-                unit: '%',
-                lineColor: '#fd7e14',
-                fillColor: 'rgba(253,126,20,0.15)',
-                decimals: 1
-            }),
-            headerTooltip: 'Success rate trend (%)',
-            headerSort: false,
-        },
         // Position columns
         {
             title: 'Latitude',
@@ -740,13 +546,6 @@ export function getColumnsForPreset(preset, techColors = DEFAULT_TECH_COLORS, st
         case 'compare':
             visibleFields = [...COLUMN_GROUPS.core, ...COLUMN_GROUPS.compare];
             break;
-        case 'kpi':
-            visibleFields = [...COLUMN_GROUPS.core, ...COLUMN_GROUPS.kpi];
-            break;
-        case 'history':
-            // Simplified view for config history - just cellName, date, and config fields
-            visibleFields = ['cellName', ...COLUMN_GROUPS.history];
-            break;
         case 'default':
         default:
             visibleFields = [
@@ -778,16 +577,16 @@ export function getGroupHeaderFormatter(groupField) {
 }
 /**
  * Get column metadata for the column picker UI
+ * @param options Filter options for including/excluding column groups
  */
-export function getColumnMetadata() {
-    return [
+export function getColumnMetadata(options) {
+    const allColumns = [
         // 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: 'rru', title: 'RRU', group: 'Core' },
         { field: 'frq', title: 'Frequency', group: 'Core' },
         { field: 'status', title: 'Status', group: 'Core' },
         { field: 'onAirDate', title: 'On Air Date', group: 'Core' },
@@ -816,19 +615,10 @@ export function getColumnMetadata() {
         { 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' },
-        // History
-        { field: 'configDate', title: 'Config Date', group: 'History' },
-        { field: 'frequency', title: 'Freq (MHz)', group: 'History' },
-        { field: 'antennaChange', title: 'Antenna (Δ)', group: 'History' },
-        { field: 'etiltChange', title: 'E-Tilt (Δ)', group: 'History' },
-        { field: 'mtiltChange', title: 'M-Tilt (Δ)', group: 'History' },
-        { field: 'powerChange', title: 'Power (Δ)', group: 'History' },
-        // 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' },
@@ -841,6 +631,21 @@ export function getColumnMetadata() {
         { field: 'comment', title: 'Comment', group: 'Planning' },
         // { field: 'customSubgroup', title: 'Subgroup', group: 'Planning' },
     ];
+    // Apply filtering if options provided
+    const { include, exclude } = options ?? {};
+    return allColumns.filter(col => {
+        // If include is specified, only include those groups
+        if (include && include.length > 0) {
+            if (!include.includes(col.group)) {
+                return false;
+            }
+        }
+        // Apply exclude filter
+        if (exclude && exclude.includes(col.group)) {
+            return false;
+        }
+        return true;
+    });
 }
 /**
  * Get default visible columns for a preset
@@ -859,10 +664,6 @@ export function getPresetVisibleFields(preset) {
             return [...COLUMN_GROUPS.core, ...COLUMN_GROUPS.planning];
         case 'compare':
             return [...COLUMN_GROUPS.core, ...COLUMN_GROUPS.compare];
-        case 'kpi':
-            return [...COLUMN_GROUPS.core, ...COLUMN_GROUPS.kpi];
-        case 'history':
-            return ['cellName', ...COLUMN_GROUPS.history];
         case 'default':
         default:
             return ['siteId', 'txId', 'cellName', 'tech', 'fband', 'frq', 'status', 'azimuth', 'height', 'antenna'];

package/dist/core/CellTableV2/composables/index.d.ts

@@ -0,0 +1,12 @@
+/**
+ * CellTableV2 Composables
+ *
+ * Reusable logic hooks for cell table functionality.
+ * These composables use Svelte 5 runes and can be shared across different panel types.
+ */
+export { usePersistence } from './usePersistence.svelte';
+export type { UsePersistenceOptions, UsePersistenceReturn } from './usePersistence.svelte';
+export { useColumnVisibility } from './useColumnVisibility.svelte';
+export type { UseColumnVisibilityOptions, UseColumnVisibilityReturn } from './useColumnVisibility.svelte';
+export { useScrollSpy } from './useScrollSpy.svelte';
+export type { UseScrollSpyOptions, UseScrollSpyReturn, ScrollSpyGroup, CellTableRef } from './useScrollSpy.svelte';

package/dist/core/CellTableV2/composables/index.js

@@ -0,0 +1,9 @@
+/**
+ * CellTableV2 Composables
+ *
+ * Reusable logic hooks for cell table functionality.
+ * These composables use Svelte 5 runes and can be shared across different panel types.
+ */
+export { usePersistence } from './usePersistence.svelte';
+export { useColumnVisibility } from './useColumnVisibility.svelte';
+export { useScrollSpy } from './useScrollSpy.svelte';

package/dist/core/CellTableV2/composables/useColumnVisibility.svelte.d.ts

@@ -0,0 +1,45 @@
+/**
+ * useColumnVisibility - Column visibility management composable
+ *
+ * Manages column preset selection and per-preset column visibility customization.
+ * Uses Svelte 5 runes for reactive state.
+ */
+import type { ColumnPreset } from '../types';
+import type { ColumnMeta } from '../column-config';
+export interface UseColumnVisibilityOptions {
+    /** Base storage key for persistence */
+    storageKey: string;
+    /** Column metadata for the column picker */
+    columnMeta: ColumnMeta[];
+    /** Initial column preset */
+    initialPreset?: ColumnPreset;
+    /** Whether to persist settings to localStorage */
+    persistSettings?: boolean;
+}
+export interface UseColumnVisibilityReturn {
+    /** Current column preset (reactive) */
+    readonly columnPreset: ColumnPreset;
+    /** Currently visible column fields (reactive) */
+    readonly visibleColumns: string[];
+    /** Column metadata */
+    readonly columnMeta: ColumnMeta[];
+    /** Load saved columns for a preset (or default if none saved) */
+    loadColumnsForPreset: (preset: ColumnPreset) => string[];
+    /** Set the column preset and load its columns */
+    setPreset: (preset: ColumnPreset) => void;
+    /** Toggle a single column's visibility */
+    toggleColumn: (field: string, visible: boolean) => void;
+    /** Reset current preset to its default columns */
+    resetToDefaults: () => void;
+    /** Apply column visibility to a CellTable instance */
+    applyToTable: (table: {
+        showColumn: (f: string) => void;
+        hideColumn: (f: string) => void;
+    } | undefined) => void;
+    /** Save current visibility state */
+    saveVisibility: () => void;
+}
+/**
+ * Create column visibility management for a cell table
+ */
+export declare function useColumnVisibility(options: UseColumnVisibilityOptions): UseColumnVisibilityReturn;

package/dist/core/CellTableV2/composables/useColumnVisibility.svelte.js

@@ -0,0 +1,98 @@
+/**
+ * useColumnVisibility - Column visibility management composable
+ *
+ * Manages column preset selection and per-preset column visibility customization.
+ * Uses Svelte 5 runes for reactive state.
+ */
+import { getPresetVisibleFields } from '../column-config';
+import { usePersistence } from './usePersistence.svelte';
+/**
+ * Create column visibility management for a cell table
+ */
+export function useColumnVisibility(options) {
+    const { storageKey, columnMeta, initialPreset = 'default', persistSettings = true } = options;
+    // Persistence utilities
+    const persistence = usePersistence({ storageKey, enabled: persistSettings });
+    // Storage key for per-preset column visibility
+    function getColumnsKey(preset) {
+        return `visibleColumns-${preset}`;
+    }
+    /**
+     * Load saved columns for a preset (or default if none saved)
+     */
+    function loadColumnsForPreset(preset) {
+        const saved = persistence.load(getColumnsKey(preset), null);
+        if (saved && Array.isArray(saved)) {
+            return saved;
+        }
+        return getPresetVisibleFields(preset);
+    }
+    // Load initial preset from storage
+    const savedPreset = persistence.loadString('columnPreset', initialPreset);
+    // Reactive state
+    let _columnPreset = $state(savedPreset);
+    let _visibleColumns = $state(loadColumnsForPreset(savedPreset));
+    /**
+     * Save current column visibility for current preset
+     */
+    function saveVisibility() {
+        persistence.save(getColumnsKey(_columnPreset), _visibleColumns);
+    }
+    /**
+     * Set the column preset and load its saved columns
+     */
+    function setPreset(preset) {
+        _columnPreset = preset;
+        _visibleColumns = loadColumnsForPreset(preset);
+        persistence.saveString('columnPreset', preset);
+    }
+    /**
+     * Toggle a single column's visibility
+     */
+    function toggleColumn(field, visible) {
+        if (visible) {
+            if (!_visibleColumns.includes(field)) {
+                _visibleColumns = [..._visibleColumns, field];
+            }
+        }
+        else {
+            _visibleColumns = _visibleColumns.filter(f => f !== field);
+        }
+        saveVisibility();
+    }
+    /**
+     * Reset current preset to its default columns
+     */
+    function resetToDefaults() {
+        _visibleColumns = getPresetVisibleFields(_columnPreset);
+        // Remove saved customization
+        persistence.remove(getColumnsKey(_columnPreset));
+    }
+    /**
+     * Apply column visibility to a CellTable instance
+     */
+    function applyToTable(table) {
+        if (!table)
+            return;
+        columnMeta.forEach(col => {
+            if (_visibleColumns.includes(col.field)) {
+                table.showColumn(col.field);
+            }
+            else {
+                table.hideColumn(col.field);
+            }
+        });
+    }
+    // Return with getters for reactivity
+    return {
+        get columnPreset() { return _columnPreset; },
+        get visibleColumns() { return _visibleColumns; },
+        columnMeta,
+        loadColumnsForPreset,
+        setPreset,
+        toggleColumn,
+        resetToDefaults,
+        applyToTable,
+        saveVisibility
+    };
+}

package/dist/core/CellTableV2/composables/usePersistence.svelte.d.ts

@@ -0,0 +1,28 @@
+/**
+ * usePersistence - localStorage persistence utility
+ *
+ * Provides namespaced read/write/remove functions for persisting UI state.
+ * Does not use reactive state - just utility functions.
+ */
+export interface UsePersistenceOptions {
+    /** Base storage key prefix for namespacing */
+    storageKey: string;
+    /** Whether persistence is enabled */
+    enabled?: boolean;
+}
+export interface UsePersistenceReturn {
+    /** Load a value from localStorage */
+    load: <T>(key: string, defaultValue: T) => T;
+    /** Save a value to localStorage */
+    save: <T>(key: string, value: T) => void;
+    /** Remove a value from localStorage */
+    remove: (key: string) => void;
+    /** Load a string value (no JSON parsing) */
+    loadString: (key: string, defaultValue: string) => string;
+    /** Save a string value (no JSON stringifying) */
+    saveString: (key: string, value: string) => void;
+}
+/**
+ * Create persistence utilities for a given storage namespace
+ */
+export declare function usePersistence(options: UsePersistenceOptions): UsePersistenceReturn;

package/dist/core/CellTableV2/composables/usePersistence.svelte.js

@@ -0,0 +1,101 @@
+/**
+ * usePersistence - localStorage persistence utility
+ *
+ * Provides namespaced read/write/remove functions for persisting UI state.
+ * Does not use reactive state - just utility functions.
+ */
+/**
+ * Create persistence utilities for a given storage namespace
+ */
+export function usePersistence(options) {
+    const { storageKey, enabled = true } = options;
+    /**
+     * Get full storage key with namespace
+     */
+    function getKey(key) {
+        return `${storageKey}-${key}`;
+    }
+    /**
+     * Load a JSON value from localStorage
+     */
+    function load(key, defaultValue) {
+        if (!enabled || typeof localStorage === 'undefined') {
+            return defaultValue;
+        }
+        try {
+            const saved = localStorage.getItem(getKey(key));
+            if (saved !== null) {
+                return JSON.parse(saved);
+            }
+        }
+        catch (e) {
+            console.warn(`Failed to load ${key}:`, e);
+        }
+        return defaultValue;
+    }
+    /**
+     * Save a JSON value to localStorage
+     */
+    function save(key, value) {
+        if (!enabled || typeof localStorage === 'undefined') {
+            return;
+        }
+        try {
+            localStorage.setItem(getKey(key), JSON.stringify(value));
+        }
+        catch (e) {
+            console.warn(`Failed to save ${key}:`, e);
+        }
+    }
+    /**
+     * Remove a value from localStorage
+     */
+    function remove(key) {
+        if (!enabled || typeof localStorage === 'undefined') {
+            return;
+        }
+        try {
+            localStorage.removeItem(getKey(key));
+        }
+        catch (e) {
+            console.warn(`Failed to remove ${key}:`, e);
+        }
+    }
+    /**
+     * Load a string value (no JSON parsing)
+     */
+    function loadString(key, defaultValue) {
+        if (!enabled || typeof localStorage === 'undefined') {
+            return defaultValue;
+        }
+        try {
+            const saved = localStorage.getItem(getKey(key));
+            return saved ?? defaultValue;
+        }
+        catch (e) {
+            console.warn(`Failed to load string ${key}:`, e);
+            return defaultValue;
+        }
+    }
+    /**
+     * Save a string value (no JSON stringifying)
+     */
+    function saveString(key, value) {
+        if (!enabled || typeof localStorage === 'undefined') {
+            return;
+        }
+        try {
+            localStorage.setItem(getKey(key), value);
+        }
+        catch (e) {
+            console.warn(`Failed to save string ${key}:`, e);
+        }
+    }
+    return {
+        load,
+        save,
+        remove,
+        loadString,
+        saveString
+    };
+}

package/dist/core/CellTableV2/composables/useScrollSpy.svelte.d.ts

@@ -0,0 +1,44 @@
+/**
+ * useScrollSpy - ScrollSpy navigation composable
+ *
+ * Manages group-based scroll navigation for grouped tables.
+ * Uses Svelte 5 runes for reactive state.
+ */
+export interface ScrollSpyGroup {
+    key: string;
+    count: number;
+}
+export interface CellTableRef {
+    getGroups: () => ScrollSpyGroup[];
+    scrollToGroup: (key: string) => void;
+}
+export interface UseScrollSpyOptions {
+    /** Base storage key for persistence */
+    storageKey: string;
+    /** Initial enabled state */
+    initialEnabled?: boolean;
+    /** Whether to persist settings */
+    persistSettings?: boolean;
+}
+export interface UseScrollSpyReturn {
+    /** ScrollSpy groups (reactive) */
+    readonly groups: ScrollSpyGroup[];
+    /** Whether scrollspy is enabled (reactive) */
+    readonly enabled: boolean;
+    /** Toggle scrollspy on/off */
+    toggle: () => void;
+    /** Enable scrollspy */
+    enable: () => void;
+    /** Disable scrollspy */
+    disable: () => void;
+    /** Update groups from table data */
+    updateGroups: (table: CellTableRef | undefined) => void;
+    /** Scroll to a specific group */
+    scrollToGroup: (table: CellTableRef | undefined, key: string) => void;
+    /** Clear groups */
+    clearGroups: () => void;
+}
+/**
+ * Create scrollspy navigation for a grouped table
+ */
+export declare function useScrollSpy(options: UseScrollSpyOptions): UseScrollSpyReturn;