@lavalogic/scoria 0.0.28 → 0.0.29

package/dist/Components/Table/Body/Rows/Columns/ActionsCell.svelte

@@ -105,7 +105,7 @@
 
 <!-- svelte-ignore a11y_mouse_events_have_key_events -->
 <td
-	id={`${tableContext.tableName}-cell-${cell.row.index}-${cell.column.id}`}
+	id={`${tableContext.tableName}-cell-${cell.row.visibleIndex}-${cell.column.id}`}
 	tabIndex={hasValue ? 0 : undefined}
 	class="focusable"
 	class:multifocus={hasValue && focusDetails.isMultiFocused}
@@ -168,7 +168,7 @@
 		<Portal>
 			<div bind:this={popupRef} class="popup" style="--y: {y}px; --x: {x}px;">
 				<div class="action-container">
-					{#each actions as action (action.getLabel(cell.row.original, cell.row.index))}
+					{#each actions as action (action.getLabel(cell.row.original, cell.row.visibleIndex))}
 						<TableAction {action} {cell} />
 					{/each}
 				</div>

package/dist/Components/Table/Body/Rows/Columns/BubbleCell.svelte

@@ -58,7 +58,7 @@
 
 <!-- svelte-ignore a11y_mouse_events_have_key_events -->
 <td
-	id={`${tableContext.tableName}-cell-${cell.row.index}-${cell.column.id}`}
+	id={`${tableContext.tableName}-cell-${cell.row.visibleIndex}-${cell.column.id}`}
 	tabIndex={0}
 	class="focusable"
 	class:multifocus={focusDetails.isMultiFocused}
@@ -94,7 +94,7 @@
 			{#each values as value}
 				{@const colourPromise = (cell.column.columnDef as BubbleDef<T>).getColour?.(
 					cell.row.original,
-					cell.row.index,
+					cell.row.originalIndex,
 					value
 				)}
 

package/dist/Components/Table/Body/Rows/Columns/ExpandCell.svelte

@@ -28,7 +28,7 @@
 	);
 
 	const enabled: boolean | Promise<boolean> = $derived(
-		cell.column.columnDef.isEnabled?.(cell.row.original, cell.row.index)
+		cell.column.columnDef.isEnabled?.(cell.row.original, cell.row.originalIndex)
 	);
 </script>
 
@@ -71,7 +71,7 @@
 {#snippet action(enabled: boolean)}
 	<div class="noninteractive">
 		<Action
-			id={`${tableContext.tableName}-cell-${cell.row.index}-${cell.column.id}`}
+			id={`${tableContext.tableName}-cell-${cell.row.visibleIndex}-${cell.column.id}`}
 			style={focusDetails.outline}
 			disabled={!enabled}
 			border={false}

package/dist/Components/Table/Body/Rows/Columns/FocusableImmutableCell.svelte

@@ -41,7 +41,7 @@ class:top={focusDetails.topEdge}
 class:right={focusDetails.rightEdge}
 class:bottom={focusDetails.bottomEdge} -->
 <td
-	id={`${tableContext.tableName}-cell-${cell.row.index}-${cell.column.id}`}
+	id={`${tableContext.tableName}-cell-${cell.row.visibleIndex}-${cell.column.id}`}
 	tabIndex={hasValue ? 0 : undefined}
 	class="focusable"
 	style={focusDetails.outline}

package/dist/Components/Table/Body/Rows/Columns/ProgressCell.svelte

@@ -57,13 +57,13 @@
 	});
 
 	const colours = $derived(
-		cell.column.columnDef.getColour?.(cell.row.original, cell.row.index, value)
+		cell.column.columnDef.getColour?.(cell.row.original, cell.row.originalIndex, value)
 	);
 </script>
 
 <!-- svelte-ignore a11y_mouse_events_have_key_events -->
 <td
-	id={`${tableContext.tableName}-cell-${cell.row.index}-${cell.column.id}`}
+	id={`${tableContext.tableName}-cell-${cell.row.visibleIndex}-${cell.column.id}`}
 	tabIndex={0}
 	class="focusable"
 	class:multifocus={focusDetails.isMultiFocused}

package/dist/Components/Table/Body/Rows/Columns/TableAction.svelte

@@ -25,7 +25,7 @@
 	const { action, cell }: TableActionProps<T> = $props();
 
 	const isEnabledPromise: boolean | Promise<boolean> = $derived.by(() => {
-		const disabled = action.isDisabled?.(cell.row.original, cell.row.index);
+		const disabled = action.isDisabled?.(cell.row.original, cell.row.originalIndex);
 
 		if (disabled != null) {
 			if (typeof disabled == 'boolean') {
@@ -37,14 +37,14 @@
 		return (
 			(cell.column.columnDef as ActionsDef<T>).isEnabled?.(
 				cell.row.original,
-				cell.row.index,
+				cell.row.originalIndex,
 				action
 			) ?? true
 		);
 	});
 
 	const labelPromise: Promise<string> = $derived.by(() => {
-		const result = action.getLabel(cell.row.original, cell.row.index);
+		const result = action.getLabel(cell.row.original, cell.row.originalIndex);
 
 		if (typeof result == 'object') {
 			return result.then((it) => it);
@@ -61,12 +61,12 @@
 			size={Size.Medium}
 			colourSet={(cell.column.columnDef as ActionsDef<T>).getColourSet?.(
 				cell.row.original,
-				cell.row.index,
+				cell.row.originalIndex,
 				action
 			) ?? ColourSet.Secondary}
 			disabled={!isEnabled}
 			onclick={() => {
-				action.callback(cell.row.original, cell.row.index);
+				action.callback(cell.row.original, cell.row.originalIndex);
 			}}>{label}</Button
 		>
 	{:catch e}

package/dist/Components/Table/Body/Rows/Columns/TableCheckbox.svelte

@@ -95,7 +95,7 @@
 	>
 		<input
 			bind:this={inputRef}
-			id={`${tableContext.tableName}-cell-${cell.row.index}-${cell.column.id}`}
+			id={`${tableContext.tableName}-cell-${cell.row.visibleIndex}-${cell.column.id}`}
 			{onchange}
 			type="checkbox"
 			checked={!!value || undefined}

package/dist/Components/Table/Body/Rows/Columns/TableColumn.svelte

@@ -95,7 +95,7 @@
 		<CurrentComponent {cell} />
 	{:else}
 		{@const valueOrComponentPromise =
-			cell.column.columnDef.accessorFn?.(cell.row.original, cell.row.index) ??
+			cell.column.columnDef.accessorFn?.(cell.row.original, cell.row.originalIndex) ??
 			cell.row.original[cell.column.id as keyof typeof cell.row.original] ??
 			null}
 

package/dist/Components/Table/Body/Rows/Columns/TableDatePicker.svelte

@@ -27,7 +27,7 @@
 
 	const columnDef = $derived(cell.column.columnDef);
 	const coordinates: CellCoordinates = $derived({
-		row: cell.row.index,
+		row: cell.row.visibleIndex,
 		column: columnDef.index,
 		id: columnDef.id as string & keyof T
 	});
@@ -59,7 +59,7 @@
 
 	let tdref: HTMLTableCellElement | undefined = $state();
 
-	const id = $derived(`${tableContext.tableName}-cell-${cell.row.index}-${cell.column.id}`);
+	const id = $derived(`${tableContext.tableName}-cell-${cell.row.visibleIndex}-${cell.column.id}`);
 	function handleSingleClick(event?: Event) {
 		if (
 			editable &&

package/dist/Components/Table/Body/Rows/Columns/TableNumberInput.svelte

@@ -252,7 +252,7 @@
 
 	<td class="input-cell">
 		<NumberInput
-			id={`${tableContext.tableName}-cell-${cell.row.index}-${cell.column.id}`}
+			id={`${tableContext.tableName}-cell-${cell.row.visibleIndex}-${cell.column.id}`}
 			min={(cell.column.columnDef as NumberInputDef<T>).min}
 			max={(cell.column.columnDef as NumberInputDef<T>).max}
 			variant={InputVariant.Table}
@@ -269,7 +269,7 @@
 
 	<td
 		style={focusDetails.outline}
-		id={`${tableContext.tableName}-cell-${cell.row.index}-${cell.column.id}`}
+		id={`${tableContext.tableName}-cell-${cell.row.visibleIndex}-${cell.column.id}`}
 		onmousedown={(e) => {
 			// start focus only on left click
 			if (e.button === 0) {

package/dist/Components/Table/Body/Rows/Columns/TableQuerySelect.svelte

@@ -212,7 +212,7 @@
 				labelProp="label"
 				valueAsObject={columnDef.valueAsObject as true}
 				selectedValue={value}
-				query={(v) => columnDef.query(v, cell.row.original, cell.row.index)}
+				query={(v) => columnDef.query(v, cell.row.original, cell.row.originalIndex)}
 				bind:options={lastOptions}
 				onfocus={addKeydownEvent}
 				onchange={(newValue) => {
@@ -235,7 +235,7 @@
 		style={focusDetails.outline}
 		bind:this={tdref}
 		tabIndex="0"
-		id={`${tableContext.tableName}-cell-${cell.row.index}-${cell.column.id}`}
+		id={`${tableContext.tableName}-cell-${cell.row.visibleIndex}-${cell.column.id}`}
 		class="focusable editable"
 		class:multifocus={focusDetails.isMultiFocused}
 		class:multifocus-start={focusDetails.isMultiFocusStart}

package/dist/Components/Table/Body/Rows/Columns/TableRowSelectionCheckbox.svelte

@@ -33,7 +33,7 @@
 	const isSelectable = $derived(
 		(cell.column.columnDef as RowSelectionDef<T>).isSelectable?.(
 			cell.row.original,
-			cell.row.index
+			cell.row.originalIndex
 		) ?? true
 	);
 
@@ -97,7 +97,7 @@
 
 {#snippet input(isSelectable: boolean)}
 	<input
-		id={`${tableContext.tableName}-cell-${cell.row.index}-${cell.column.id}`}
+		id={`${tableContext.tableName}-cell-${cell.row.visibleIndex}-${cell.column.id}`}
 		bind:this={inputRef}
 		{onchange}
 		type="checkbox"

package/dist/Components/Table/Body/Rows/Columns/TableSelect.svelte

@@ -249,7 +249,7 @@
 		bind:this={tdref}
 		tabIndex="0"
 		style={focusDetails.outline}
-		id={`${tableContext.tableName}-cell-${cell.row.index}-${cell.column.id}`}
+		id={`${tableContext.tableName}-cell-${cell.row.visibleIndex}-${cell.column.id}`}
 		class="focusable editable"
 		class:multifocus={focusDetails.isMultiFocused}
 		class:multifocus-start={focusDetails.isMultiFocusStart}

package/dist/Components/Table/Body/Rows/Columns/TableTextInput.svelte

@@ -258,7 +258,7 @@
 	<!-- {#if true} -->
 	<td class="input-cell">
 		<TextInput
-			id={`${tableContext.tableName}-cell-${cell.row.index}-${cell.column.id}`}
+			id={`${tableContext.tableName}-cell-${cell.row.visibleIndex}-${cell.column.id}`}
 			onkeydown={handleInputKeydown}
 			variant={InputVariant.Table}
 			bind:value={tempTextValue}
@@ -278,7 +278,7 @@
 {:else}
 	<!-- svelte-ignore a11y_mouse_events_have_key_events -->
 	<td
-		id={`${tableContext.tableName}-cell-${cell.row.index}-${cell.column.id}`}
+		id={`${tableContext.tableName}-cell-${cell.row.visibleIndex}-${cell.column.id}`}
 		style={focusDetails.outline}
 		onmousedown={(e) => {
 			// start focus only on left click

package/dist/Components/Table/Body/Rows/Columns/ValidityCell.svelte

@@ -87,7 +87,9 @@
 		});
 	});
 
-	const thisId = $derived(`${tableContext.tableName}-cell-${cell.row.index}-${cell.column.id}`);
+	const thisId = $derived(
+		`${tableContext.tableName}-cell-${cell.row.visibleIndex}-${cell.column.id}`
+	);
 
 	function onclose() {
 		tableContext.setOpenModalCoordinates(null);

package/dist/Components/Table/Body/Rows/TableRow.svelte

@@ -55,7 +55,7 @@
 
 	let prevExpandedColumnDef: ExpandDef<T, object> | undefined = $state();
 
-	const rowIndex = $derived(cells[0] && cells[0].row.index);
+	const rowIndex = $derived(cells[0] && cells[0].row.visibleIndex);
 	const highlighted = $derived(
 		rowIndex != undefined &&
 			tableContext.highlightedItems.has(tableContext.selectionExtractor(row.original))
@@ -85,12 +85,12 @@
 				prevExpandedColumnDef = expandedColumnDef;
 				innerColumnDefs = expandedColumnDef.getInnerColumnDefs(
 					cells[0].row.original,
-					cells[0].row.index
+					cells[0].row.originalIndex
 				);
 
 				innerDataPromise = expandedColumnDef.accessorFn!(
 					cells[0].row.original,
-					cells[0].row.index
+					cells[0].row.originalIndex
 				) as Promise<object[]>;
 				innerTableName = expandedColumnDef.innerTableName;
 			} else if (
@@ -125,7 +125,7 @@ onMouseLeave={onMouseLeave} -->
 			}}
 		/>
 	{/if}
-	{#each cells as cell (`${cell.id}-${cell.row.index}`)}
+	{#each cells as cell (`${cell.id}-${cell.row.visibleIndex}`)}
 		<TableColumn {cell} {expandedColumnDef} {onExpandChange} />
 	{/each}
 </tr>

package/dist/Components/Table/Types/Context/Row.d.ts

@@ -2,7 +2,8 @@ import type { TableCell } from '../Columns/TableCell.js';
 export interface Row<T extends object> {
     getValue: (columnId: string) => any;
     original: T;
-    index: number;
+    visibleIndex: number;
+    originalIndex: number;
     id: string;
     getLeftVisibleCells: () => TableCell<T>[];
     getRightVisibleCells: () => TableCell<T>[];

package/dist/Components/Table/Types/Context/TableContext.svelte.js

@@ -541,7 +541,8 @@ export class TableContext {
             const row = {
                 getValue: (key) => this.columnDefsById.get(key).accessorFn?.(item, unsortedIndex) ?? item[key],
                 original: item,
-                index,
+                visibleIndex: index,
+                originalIndex: unsortedIndex,
                 id: index.toString(),
                 getLeftVisibleCells: () => leftVisibleCells,
                 getRightVisibleCells: () => rightVisibleCells,
@@ -598,10 +599,12 @@ export class TableContext {
     paginationRowModel = $derived.by(() => {
         const sortedData = this._currentPageData;
         const rows = sortedData.map((item, index) => {
+            const unsortedIndex = this.originalRowIndices.get(item) ?? index;
             const row = {
                 getValue: (key) => this.columnDefsById.get(key).accessorFn?.(item, index) ?? item[key],
                 original: item,
-                index,
+                visibleIndex: index,
+                originalIndex: unsortedIndex,
                 id: index.toString(),
                 getLeftVisibleCells: () => leftVisibleCells,
                 getRightVisibleCells: () => rightVisibleCells,
@@ -1607,10 +1610,10 @@ export class TableContext {
             return;
         }
         const rows = this.paginationRowModel.rows;
-        const endRowIndex = rows.findIndex((row) => row.index === this.focusEnd.row);
+        const endRowIndex = rows.findIndex((row) => row.visibleIndex === this.focusEnd.row);
         this.focusEnd = {
             ...this.focusEnd,
-            row: rows[Math.max(Math.min(endRowIndex + offset, rows.length - 1), 0)].index
+            row: rows[Math.max(Math.min(endRowIndex + offset, rows.length - 1), 0)].visibleIndex
         };
     }
     _moveFocusRow(offset) {
@@ -1620,8 +1623,8 @@ export class TableContext {
         }
         const newEndRowIndex = (() => {
             const rows = this.paginationRowModel.rows;
-            const endRowIndex = rows.findIndex((row) => row.index === this.focusStart.row);
-            return rows[Math.max(Math.min(endRowIndex + offset, rows.length - 1), 0)].index;
+            const endRowIndex = rows.findIndex((row) => row.visibleIndex === this.focusStart.row);
+            return rows[Math.max(Math.min(endRowIndex + offset, rows.length - 1), 0)].visibleIndex;
         })();
         this.moveFocus({ ...this.focusStart, row: newEndRowIndex });
     }
@@ -1634,8 +1637,8 @@ export class TableContext {
         const { row: startRowIndexId, column: startColumnIndex } = this.focusStart;
         const { row: endRowIndexId, column: endColumnIndex } = this.focusEnd;
         const model = this.sortedRowModel;
-        const startRowIndex = model?.rows.findIndex((row) => row.index === startRowIndexId) ?? -1;
-        const endRowIndex = model?.rows.findIndex((row) => row.index === endRowIndexId) ?? -1;
+        const startRowIndex = model?.rows.findIndex((row) => row.visibleIndex === startRowIndexId) ?? -1;
+        const endRowIndex = model?.rows.findIndex((row) => row.visibleIndex === endRowIndexId) ?? -1;
         if (!model || startRowIndex == -1 || endRowIndex == -1) {
             return;
         }
@@ -1719,10 +1722,11 @@ export class TableContext {
         if (this.focusStart && this.focusEnd) {
             const { row: startRowIndexId, column: startColumnIndex } = this.focusStart;
             const { row: endRowIndexId, column: endColumnIndex } = this.focusEnd;
-            const model = this.sortedRowModel;
-            const startRowIndex = model?.rows.findIndex((row) => row.index === startRowIndexId) ?? -1;
-            const endRowIndex = model?.rows.findIndex((row) => row.index === endRowIndexId) ?? -1;
-            if (!this.dataRepo || startRowIndex == -1 || endRowIndex == -1) {
+            // const model = this._currentPageData;
+            const model = this.paginationRowModel;
+            const startRowIndex = model?.rows.findIndex((row) => row.visibleIndex === startRowIndexId) ?? -1;
+            const endRowIndex = model?.rows.findIndex((row) => row.visibleIndex === endRowIndexId) ?? -1;
+            if (!this._currentPageData?.length || startRowIndex == -1 || endRowIndex == -1) {
                 throw new Error(`copy was missing one of the two indices. First: ${startRowIndex}, second: ${endRowIndex}`);
             }
             const minRowIndex = Math.min(startRowIndex, endRowIndex);
@@ -1738,8 +1742,9 @@ export class TableContext {
             // eslint-disable-next-line svelte/prefer-svelte-reactivity
             const indices = new Map();
             for (let i = minRowIndex; i <= maxRowIndex; i++) {
-                const itemIndex = model.rows[i].index;
-                const item = this.sortedData[itemIndex];
+                const row = model.rows[i];
+                const item = row.original;
+                const itemIndex = row.originalIndex;
                 selectedRows.push(item);
                 indices.set(item, itemIndex);
             }

package/dist/Components/Table/Types/Focus/TableFocusDetails.svelte.js

@@ -23,7 +23,7 @@ export class TableFocusDetails {
         this._tableContext = v;
     }
     _coordinates = $derived({
-        row: this.cell.row.index,
+        row: this.cell.row.visibleIndex,
         column: this.cell.column.columnDef.index,
         id: this.cell.column.columnDef.id
     });
@@ -31,7 +31,7 @@ export class TableFocusDetails {
         return this._coordinates;
     }
     _isMultiFocused = $derived(this.tableContext.focusedColumnIds.has(this.cell.column.columnDef.id) &&
-        this.tableContext.focusedRowIndexIds.has(this.cell.row.index));
+        this.tableContext.focusedRowIndexIds.has(this.cell.row.visibleIndex));
     get isMultiFocused() {
         return this._isMultiFocused;
     }

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@lavalogic/scoria",
   "description": "Svelte components used for the FloWMS Web Frontend",
-  "version": "0.0.28",
+  "version": "0.0.29",
   "publishConfig": {
     "access": "restricted"
   },