@smartnet360/svelte-components 0.0.134 → 0.0.135

package/dist/core/CellTableV2/CellTable.svelte

@@ -0,0 +1,601 @@
+<script lang="ts">
+	import { onMount, onDestroy } from 'svelte';
+	import { TabulatorFull as Tabulator } from 'tabulator-tables';
+	// Import Bootstrap 5 theme for proper styling
+	import 'tabulator-tables/dist/css/tabulator_bootstrap5.min.css';
+	import type { Options, RowComponent } from 'tabulator-tables';
+	import type { ColumnDefinition } from 'tabulator-tables';
+	import type {
+		CellTableProps,
+		CellData,
+		RowSelectionEvent,
+		RowClickEvent,
+		RowDblClickEvent,
+		RowContextMenuEvent,
+		DataChangeEvent
+	} from './types';
+	import {
+		getColumnsForPreset,
+		getGroupHeaderFormatter,
+		DEFAULT_TECH_COLORS,
+		DEFAULT_STATUS_COLORS,
+		cellDataSorter
+	} from './column-config';
+
+	// Type for Tabulator group component (not exported from tabulator-tables)
+	interface TabulatorGroup {
+		getKey(): string | number | boolean;
+		getRows(): RowComponent[];
+		scrollTo(): Promise<void>;
+	}
+
+	interface Props extends CellTableProps {
+		/** Custom column definitions (overrides columnPreset when provided) */
+		customColumns?: ColumnDefinition[];
+		/** Row selection change event */
+		onselectionchange?: (event: RowSelectionEvent) => void;
+		/** Row click event */
+		onrowclick?: (event: RowClickEvent) => void;
+		/** Row double-click event */
+		onrowdblclick?: (event: RowDblClickEvent) => void;
+		/** Row context menu (right-click) event */
+		onrowcontextmenu?: (event: RowContextMenuEvent) => void;
+		/** Data change event (filter, sort, etc.) */
+		ondatachange?: (event: DataChangeEvent) => void;
+	}
+
+	let {
+		cells = [],
+		groupBy = 'none',
+		columnPreset = 'default',
+		customColumns,
+		columnVisibility,
+		selectable = false,
+		multiSelect = true,
+		height = '100%',
+		virtualDom = true,
+		tabulatorOptions,
+		techColors = DEFAULT_TECH_COLORS,
+		statusColors = DEFAULT_STATUS_COLORS,
+		headerFilters = true,
+		resizableColumns = true,
+		movableColumns = true,
+		persistLayout = true,
+		storageKey = 'cell-table-layout',
+		onselectionchange,
+		onrowclick,
+		onrowdblclick,
+		onrowcontextmenu,
+		ondatachange
+	}: Props = $props();
+
+	let tableContainer: HTMLDivElement;
+	let table: Tabulator | null = null;
+	let isInitialized = $state(false);
+
+	// Reactive column configuration - uses customColumns if provided, otherwise preset
+	let columns = $derived.by(() => {
+		// Use custom columns if provided, otherwise get from preset
+		const baseColumns = customColumns ?? getColumnsForPreset(columnPreset, techColors, statusColors, headerFilters);
+		
+		// Add row selection checkbox column if selectable
+		if (selectable) {
+			const selectColumn = {
+				title: '',
+				formatter: 'rowSelection',
+				titleFormatter: multiSelect ? 'rowSelection' : undefined,
+				hozAlign: 'center' as const,
+				headerSort: false,
+				width: 40,
+				frozen: true,
+				cssClass: 'cell-table-select-column',
+			};
+			return [selectColumn, ...baseColumns];
+		}
+		
+		return baseColumns;
+	});
+
+	// 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: sortedCells,
+			columns: columns,
+			layout: 'fitDataFill',
+			height: height,
+			placeholder: 'No cells to display',
+			
+			// Virtual DOM for performance with large datasets
+			renderVertical: virtualDom ? 'virtual' : 'basic',
+			
+			// Interactivity
+			resizableColumns: resizableColumns,
+			movableColumns: movableColumns,
+			
+			// No initialSort - data is pre-sorted by cellDataSorter (tech → fband → sector)
+			
+			// Row selection
+			selectable: selectable ? (multiSelect ? true : 1) : false,
+			selectableRangeMode: 'click',
+			
+			// Persistence - save column widths, order, visibility and group settings
+			persistence: persistLayout ? {
+				columns: ['width', 'visible', 'order'],
+				group: true,
+			} : false,
+			persistenceMode: persistLayout ? 'local' : undefined,
+			persistenceID: persistLayout ? storageKey : undefined,
+			
+			// Grouping
+			...(groupBy !== 'none' ? {
+				groupBy: groupBy,
+				groupStartOpen: true,
+				groupHeader: getGroupHeaderFormatter(groupBy),
+				groupToggleElement: 'header',
+			} : {}),
+			
+			// Pagination (optional, disabled by default for virtual scrolling)
+			// pagination: true,
+			// paginationSize: 50,
+			
+			// Clipboard
+			clipboard: true,
+			clipboardCopyRowRange: 'selected',
+		};
+
+		// Merge with custom options
+		return { ...baseOptions, ...tabulatorOptions };
+	}
+
+	// Initialize table
+	function initTable() {
+		if (!tableContainer) return;
+
+		const options = buildOptions();
+		table = new Tabulator(tableContainer, options);
+
+		// Bind events
+		table.on('rowClick', (e, row) => {
+			if (onrowclick) {
+				onrowclick({
+					row: (row as RowComponent).getData() as CellData,
+					event: e as MouseEvent
+				});
+			}
+		});
+
+		table.on('rowDblClick', (e, row) => {
+			if (onrowdblclick) {
+				onrowdblclick({
+					row: (row as RowComponent).getData() as CellData,
+					event: e as MouseEvent
+				});
+			}
+		});
+
+		table.on('rowContext', (e, row) => {
+			if (onrowcontextmenu) {
+				(e as MouseEvent).preventDefault();
+				onrowcontextmenu({
+					row: (row as RowComponent).getData() as CellData,
+					event: e as MouseEvent
+				});
+			}
+		});
+
+		table.on('rowSelectionChanged', (data, rows) => {
+			if (onselectionchange) {
+				const cellData = data as CellData[];
+				onselectionchange({
+					rows: cellData,
+					ids: cellData.map(d => d.id)
+				});
+			}
+		});
+
+		table.on('dataFiltered', (filters, rows) => {
+			if (ondatachange) {
+				ondatachange({
+					type: 'filter',
+					rowCount: cells.length,
+					filteredCount: (rows as RowComponent[]).length
+				});
+			}
+		});
+
+		table.on('dataSorted', () => {
+			if (ondatachange) {
+				ondatachange({
+					type: 'sort',
+					rowCount: cells.length,
+					filteredCount: table?.getDataCount('active') ?? 0
+				});
+			}
+		});
+
+		// Mark as initialized after table is ready
+		table.on('tableBuilt', () => {
+			isInitialized = true;
+			// Fire initial data change event
+			if (ondatachange) {
+				ondatachange({
+					type: 'load',
+					rowCount: cells.length,
+					filteredCount: cells.length
+				});
+			}
+		});
+	}
+
+	// Track previous values to avoid unnecessary updates
+	let prevCellsRef: unknown[] | null = null;
+	let prevGroupBy: string | null = null;
+	// Initialize with current preset to prevent setColumns on first load (which would override persisted layout)
+	let prevColumnPreset: string | null = columnPreset;
+
+	// Update table data when cells change (reference comparison)
+	$effect(() => {
+		// Track the cells array reference to detect any change
+		const currentRef = sortedCells;
+		
+		// Update if reference changed (new array assignment)
+		if (isInitialized && table && currentRef !== prevCellsRef) {
+			prevCellsRef = currentRef;
+			table.replaceData(sortedCells);
+			ondatachange?.({
+				type: 'load',
+				rowCount: sortedCells.length,
+				filteredCount: sortedCells.length
+			});
+		}
+	});
+
+	// Update grouping when groupBy changes
+	$effect(() => {
+		if (isInitialized && table && groupBy !== prevGroupBy) {
+			prevGroupBy = groupBy;
+			if (groupBy === 'none') {
+				table.setGroupBy(false);
+			} else {
+				table.setGroupBy(groupBy);
+				table.setGroupHeader(getGroupHeaderFormatter(groupBy));
+			}
+		}
+	});
+
+	// Update columns when preset changes
+	$effect(() => {
+		if (isInitialized && table && columnPreset !== prevColumnPreset) {
+			prevColumnPreset = columnPreset;
+			table.setColumns(columns);
+		}
+	});
+
+	onMount(() => {
+		initTable();
+	});
+
+	onDestroy(() => {
+		if (table) {
+			table.destroy();
+			table = null;
+		}
+	});
+
+	// Public API methods
+	export function getTable(): Tabulator | null {
+		return table;
+	}
+
+	export function getSelectedRows(): CellData[] {
+		return table?.getSelectedData() as CellData[] ?? [];
+	}
+
+	export function clearSelection(): void {
+		table?.deselectRow();
+	}
+
+	export function selectRow(id: string): void {
+		const row = table?.getRow(id);
+		if (row) row.select();
+	}
+
+	export function scrollToRow(id: string): void {
+		table?.scrollToRow(id, 'top', true);
+	}
+
+	export function downloadCSV(filename: string = 'cells.csv'): void {
+		table?.download('csv', filename);
+	}
+
+	export function downloadJSON(filename: string = 'cells.json'): void {
+		table?.download('json', filename);
+	}
+
+	export function setFilter(field: string, type: string, value: unknown): void {
+		table?.setFilter(field, type as any, value);
+	}
+
+	export function clearFilters(): void {
+		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);
+	}
+
+	/** Get all group keys (when grouping is active) */
+	export function getGroups(): { key: string; count: number }[] {
+		if (!table || groupBy === 'none') return [];
+		try {
+			const groups = table.getGroups() as TabulatorGroup[];
+			return groups.map(g => ({
+				key: String(g.getKey()),
+				count: g.getRows().length
+			}));
+		} catch {
+			return [];
+		}
+	}
+
+	/** Scroll to a specific group by key */
+	export function scrollToGroup(key: string): void {
+		if (!table || groupBy === 'none') return;
+		try {
+			const groups = table.getGroups() as TabulatorGroup[];
+			const group = groups.find(g => String(g.getKey()) === key);
+			if (group) {
+				group.scrollTo();
+			}
+		} catch (e) {
+			console.warn('Failed to scroll to group:', e);
+		}
+	}
+</script>
+
+<div class="cell-table-container">
+	<div bind:this={tableContainer} class="cell-table"></div>
+</div>
+
+<style>
+	.cell-table-container {
+		width: 100%;
+		height: 100%;
+		display: flex;
+		flex-direction: column;
+	}
+
+	.cell-table {
+		flex: 1;
+		min-height: 0;
+	}
+
+	/* Bootstrap-aligned Tabulator theme overrides */
+	:global(.cell-table-container .tabulator) {
+		font-family: var(--bs-body-font-family, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif);
+		font-size: 0.875rem;
+		border: 1px solid var(--bs-border-color, #dee2e6);
+		border-radius: var(--bs-border-radius, 0.375rem);
+		background-color: var(--bs-body-bg, #fff);
+	}
+
+	/* Header styling */
+	:global(.cell-table-container .tabulator-header) {
+		background-color: var(--bs-tertiary-bg, #f8f9fa);
+		border-bottom: 2px solid var(--bs-border-color, #dee2e6);
+	}
+
+	:global(.cell-table-container .tabulator-col) {
+		background-color: var(--bs-tertiary-bg, #f8f9fa);
+		border-right: 1px solid var(--bs-border-color, #dee2e6);
+	}
+
+	:global(.cell-table-container .tabulator-col-title) {
+		font-weight: 600;
+		color: var(--bs-body-color, #212529);
+		padding: 0.5rem 0.75rem;
+	}
+
+	:global(.cell-table-container .tabulator-col-sorter) {
+		color: var(--bs-secondary-color, #6c757d);
+	}
+
+	/* Header filter inputs */
+	:global(.cell-table-container .tabulator-header-filter input) {
+		font-size: 0.75rem;
+		padding: 0.25rem 0.5rem;
+		border: 1px solid var(--bs-border-color, #dee2e6);
+		border-radius: var(--bs-border-radius-sm, 0.25rem);
+		background-color: var(--bs-body-bg, #fff);
+		color: var(--bs-body-color, #212529);
+	}
+
+	:global(.cell-table-container .tabulator-header-filter input:focus) {
+		border-color: var(--bs-primary, #0d6efd);
+		outline: 0;
+		box-shadow: 0 0 0 0.2rem rgba(13, 110, 253, 0.25);
+	}
+
+	/* Row styling */
+	:global(.cell-table-container .tabulator-row) {
+		border-bottom: 1px solid var(--bs-border-color-translucent, rgba(0, 0, 0, 0.1));
+	}
+
+	:global(.cell-table-container .tabulator-row:hover) {
+		background-color: var(--bs-tertiary-bg, #f8f9fa);
+	}
+
+	:global(.cell-table-container .tabulator-row.tabulator-row-even) {
+		background-color: var(--bs-body-bg, #fff);
+	}
+
+	:global(.cell-table-container .tabulator-row.tabulator-row-odd) {
+		background-color: rgba(var(--bs-tertiary-bg-rgb, 248, 249, 250), 0.5);
+	}
+
+	:global(.cell-table-container .tabulator-row.tabulator-selected) {
+		background-color: rgba(var(--bs-primary-rgb, 13, 110, 253), 0.1);
+	}
+
+	:global(.cell-table-container .tabulator-row.tabulator-selected:hover) {
+		background-color: rgba(var(--bs-primary-rgb, 13, 110, 253), 0.15);
+	}
+
+	/* Cell styling */
+	:global(.cell-table-container .tabulator-cell) {
+		padding: 0.5rem 0.75rem;
+		border-right: 1px solid var(--bs-border-color-translucent, rgba(0, 0, 0, 0.05));
+		color: var(--bs-body-color, #212529);
+	}
+
+	:global(.cell-table-container .tabulator-cell.tabulator-frozen) {
+		background-color: var(--bs-tertiary-bg, #f8f9fa);
+		border-right: 2px solid var(--bs-border-color, #dee2e6);
+	}
+
+	/* Group header styling */
+	:global(.cell-table-container .tabulator-row.tabulator-group) {
+		background-color: var(--bs-secondary-bg, #e9ecef);
+		border-bottom: 1px solid var(--bs-border-color, #dee2e6);
+		font-weight: 500;
+		min-height: 36px;
+	}
+
+	:global(.cell-table-container .tabulator-row.tabulator-group:hover) {
+		background-color: var(--bs-secondary-bg, #e9ecef);
+		cursor: pointer;
+	}
+
+	:global(.cell-table-container .tabulator-row.tabulator-group span) {
+		color: var(--bs-body-color, #212529);
+	}
+
+	/* Group toggle arrow */
+	:global(.cell-table-container .tabulator-group-toggle) {
+		margin-right: 0.5rem;
+	}
+
+	/* Scrollbar styling */
+	:global(.cell-table-container .tabulator-tableholder::-webkit-scrollbar) {
+		width: 8px;
+		height: 8px;
+	}
+
+	:global(.cell-table-container .tabulator-tableholder::-webkit-scrollbar-track) {
+		background: var(--bs-tertiary-bg, #f8f9fa);
+	}
+
+	:global(.cell-table-container .tabulator-tableholder::-webkit-scrollbar-thumb) {
+		background: var(--bs-secondary-color, #6c757d);
+		border-radius: 4px;
+	}
+
+	:global(.cell-table-container .tabulator-tableholder::-webkit-scrollbar-thumb:hover) {
+		background: var(--bs-body-color, #212529);
+	}
+
+	/* Placeholder */
+	:global(.cell-table-container .tabulator-placeholder) {
+		color: var(--bs-secondary-color, #6c757d);
+		font-style: italic;
+	}
+
+	/* Resize handle */
+	:global(.cell-table-container .tabulator-col-resize-handle) {
+		width: 6px;
+		right: 0;
+	}
+
+	:global(.cell-table-container .tabulator-col-resize-handle:hover) {
+		background-color: var(--bs-primary, #0d6efd);
+	}
+
+	/* Footer/pagination (if enabled) */
+	:global(.cell-table-container .tabulator-footer) {
+		background-color: var(--bs-tertiary-bg, #f8f9fa);
+		border-top: 1px solid var(--bs-border-color, #dee2e6);
+		padding: 0.5rem;
+	}
+
+	:global(.cell-table-container .tabulator-page) {
+		padding: 0.25rem 0.5rem;
+		margin: 0 0.125rem;
+		border: 1px solid var(--bs-border-color, #dee2e6);
+		border-radius: var(--bs-border-radius-sm, 0.25rem);
+		background-color: var(--bs-body-bg, #fff);
+		color: var(--bs-body-color, #212529);
+	}
+
+	:global(.cell-table-container .tabulator-page:hover) {
+		background-color: var(--bs-tertiary-bg, #f8f9fa);
+	}
+
+	:global(.cell-table-container .tabulator-page.active) {
+		background-color: var(--bs-primary, #0d6efd);
+		border-color: var(--bs-primary, #0d6efd);
+		color: white;
+	}
+
+	/* Badge styling in cells */
+	:global(.cell-table-container .badge) {
+		font-weight: 500;
+		padding: 0.25em 0.5em;
+		border-radius: var(--bs-border-radius-sm, 0.25rem);
+	}
+</style>

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

@@ -0,0 +1,43 @@
+import { TabulatorFull as Tabulator } from 'tabulator-tables';
+import 'tabulator-tables/dist/css/tabulator_bootstrap5.min.css';
+import type { ColumnDefinition } from 'tabulator-tables';
+import type { CellTableProps, CellData, RowSelectionEvent, RowClickEvent, RowDblClickEvent, RowContextMenuEvent, DataChangeEvent } from './types';
+interface Props extends CellTableProps {
+    /** Custom column definitions (overrides columnPreset when provided) */
+    customColumns?: ColumnDefinition[];
+    /** Row selection change event */
+    onselectionchange?: (event: RowSelectionEvent) => void;
+    /** Row click event */
+    onrowclick?: (event: RowClickEvent) => void;
+    /** Row double-click event */
+    onrowdblclick?: (event: RowDblClickEvent) => void;
+    /** Row context menu (right-click) event */
+    onrowcontextmenu?: (event: RowContextMenuEvent) => void;
+    /** Data change event (filter, sort, etc.) */
+    ondatachange?: (event: DataChangeEvent) => void;
+}
+declare const CellTable: import("svelte").Component<Props, {
+    getTable: () => Tabulator | null;
+    getSelectedRows: () => CellData[];
+    clearSelection: () => void;
+    selectRow: (id: string) => void;
+    scrollToRow: (id: string) => void;
+    downloadCSV: (filename?: string) => void;
+    downloadJSON: (filename?: string) => void;
+    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[];
+    getGroups: () => {
+        key: string;
+        count: number;
+    }[];
+    scrollToGroup: (key: string) => void;
+}, "">;
+type CellTable = ReturnType<typeof CellTable>;
+export default CellTable;