@lavalogic/scoria 0.0.28 → 0.0.30

package/dist/Components/Base/Pagination.svelte

@@ -0,0 +1,237 @@
+<svelte:options runes />
+
+<script lang="ts" module>
+	import { autoPluralise, generateShortUUID } from '../../Helpers/Helpers.svelte.js';
+	import { Button, Colour, Icon, NumberInput, Side, Size, Variant } from '../../index.js';
+	import type { Snippet } from 'svelte';
+
+	export interface PaginationProps<T extends object> {
+		items: T[];
+		key: string & keyof T;
+		pageSize?: number;
+		snippet: Snippet<[T, number]>;
+		itemName?: string;
+		setPageSize?: (size: number) => void;
+	}
+</script>
+
+<script lang="ts" generics="T extends object">
+	const {
+		items,
+		key,
+		pageSize = 20,
+		snippet,
+		itemName = 'Item',
+		setPageSize
+	}: PaginationProps<T> = $props();
+
+	const _uuid = generateShortUUID();
+	let pageIndex = $state(0);
+	let pageValue = $derived(pageIndex + 1);
+	const startIndex = $derived(pageIndex * pageSize);
+	const pageItems = $derived(items.slice(startIndex, startIndex + pageSize));
+
+	const lastPage = $derived(Math.ceil(items.length / pageSize));
+	const lastPageIndex = $derived(lastPage - 1);
+
+	let debounceTimeout = -1;
+	function onNumberInput(e: Event) {
+		const page = parseInt((e.target as HTMLInputElement).value);
+
+		clearTimeout(debounceTimeout);
+		if (!isNaN(page)) {
+			debounceTimeout = setTimeout(() => {
+				pageIndex = Math.max(page - 1, 0);
+			}, 400) as unknown as number;
+		}
+	}
+
+	let pageButtons: number[] = $state([]);
+
+	$effect(() => {
+		if (pageIndex == null) {
+			pageButtons = [1];
+		} else {
+			const startingPage = Math.min(lastPage - 2, pageIndex - 1);
+			const pageToStartWith = Math.max(1, Math.min(startingPage, lastPage - 4));
+
+			pageButtons = new Array(Math.min(lastPage, 5))
+				.fill(pageToStartWith)
+				.map((item, index) => item + index);
+		}
+	});
+</script>
+
+<!-- PROPER -->
+<!-- 
+
+	<div class="pagination">
+		<div>page {pageIndex}</div>
+		<button
+			onclick={() => {
+				pageIndex = Math.max(pageIndex - 1, 0);
+			}}>Previous</button
+		>
+		<button
+			onclick={() => {
+				pageIndex = Math.min(pageIndex + 1, lastPageIndex);
+			}}>Next</button
+		>
+	</div>
+</div> -->
+
+<div class="wrapper">
+	{#each pageItems as item, index (item[key])}
+		{@render snippet(item, index)}
+	{/each}
+	<div class="spread_row bottom_row">
+		<div class="block">
+			<span>{items.length} {autoPluralise(itemName, items.length)}</span>
+		</div>
+
+		<div class="block records-per-page">
+			<span>Records per Page: {pageSize}</span>
+		</div>
+
+		<div class="spacer"></div>
+		<!-- {/* TODO switch to a lib element for this */} -->
+
+		<div class="scrollable">
+			<div class="block">
+				<Icon name="paper" colour={Colour['$ui-blue-6']} />
+				<span>{lastPage} {autoPluralise('Page', lastPage)}</span>
+			</div>
+
+			<div class="block">
+				<label for="{_uuid}-jump-to-page"
+					><Icon name="arrow-move-horizontal" colour={Colour['$ui-blue-6']} /></label
+				>
+
+				<label for="{_uuid}-jump-to-page">Jump to page:</label>
+
+				<NumberInput id="{_uuid}-jump-to-page" value={pageValue} oninput={onNumberInput} />
+			</div>
+
+			<div class="block nopad page-arrow">
+				<Button
+					variant={Variant.Toolbar}
+					disabled={pageIndex === 0}
+					side={Side.Bottom}
+					onclick={() => {
+						pageIndex = Math.max(pageIndex - 1, 0);
+					}}
+					size={Size.FillHeight}
+					iconLeft={{
+						name: 'left-close',
+						size: Size.FillHeight
+					}}>Previous Page</Button
+				>
+			</div>
+
+			{#key pageButtons}
+				{#each pageButtons as pageNumber (pageNumber)}
+					<div class="block nopad">
+						<Button
+							variant={Variant.Toolbar}
+							side={Side.Bottom}
+							size={Size.FillHeight}
+							toggled={pageIndex + 1 === pageNumber}
+							onclick={() => {
+								pageIndex = pageNumber - 1;
+							}}>{pageNumber}</Button
+						>
+					</div>
+				{/each}
+			{/key}
+
+			<div class="block nopad page-arrow">
+				<Button
+					variant={Variant.Toolbar}
+					side={Side.Bottom}
+					size={Size.FillHeight}
+					onclick={() => {
+						pageIndex = Math.min(pageIndex + 1, lastPageIndex);
+					}}
+					disabled={pageIndex == lastPageIndex}
+					iconRight={{
+						name: 'right-close',
+						size: Size.FillHeight
+					}}>Next Page</Button
+				>
+			</div>
+		</div>
+	</div>
+</div>
+
+<style>.wrapper {
+  border: solid 3px #cbd4da;
+  border-radius: 4px;
+}
+
+.spread_row {
+  border-top: solid 1px #cbd4da;
+  overflow: visible;
+  width: 100%;
+  z-index: 1;
+  display: flex;
+  flex-flow: row nowrap;
+  background-color: #cbd4da;
+  gap: 1px;
+  justify-content: flex-start;
+  align-items: stretch;
+  line-height: 1;
+  bottom: 0;
+}
+.spread_row.limited {
+  overflow: hidden;
+}
+.spread_row .scrollable {
+  display: flex;
+  flex-flow: row nowrap;
+  box-sizing: border-box;
+  overflow: auto;
+  background-color: #cbd4da;
+  gap: 1px;
+}
+.spread_row .scrollable > .block {
+  background-color: #ffffff;
+}
+.spread_row .block {
+  display: flex;
+  flex-flow: row nowrap;
+  align-items: center;
+  justify-content: center;
+  gap: 0.5rem;
+  padding: 0 0.6rem;
+  --input-height: 2rem;
+  --input-width: 4rem;
+  --input-border: none;
+}
+.spread_row .block.nopad {
+  padding: 0;
+  --button-padding-horizontal: 1rem;
+  --button-padding-vertical: 0.56rem;
+}
+.spread_row .block.nopad.page-arrow {
+  --button-padding-horizontal: 0.6rem;
+  --button-padding-vertical: 0.42rem;
+}
+.spread_row span,
+.spread_row label {
+  white-space: nowrap;
+  font-size: 0.8125rem;
+  font-weight: 600;
+  color: #3a4952;
+}
+.spread_row > * {
+  background-color: #ffffff;
+}
+.spread_row > *:first-child {
+  border-bottom-left-radius: 4px;
+}
+.spread_row > *:last-child {
+  border-bottom-right-radius: 4px;
+}
+.spread_row .spacer {
+  flex-grow: 2;
+}</style>

package/dist/Components/Base/Pagination.svelte.d.ts

@@ -0,0 +1,33 @@
+import type { Snippet } from 'svelte';
+export interface PaginationProps<T extends object> {
+    items: T[];
+    key: string & keyof T;
+    pageSize?: number;
+    snippet: Snippet<[T, number]>;
+    itemName?: string;
+    setPageSize?: (size: number) => void;
+}
+declare function $$render<T extends object>(): {
+    props: PaginationProps<T>;
+    exports: {};
+    bindings: "";
+    slots: {};
+    events: {};
+};
+declare class __sveltets_Render<T extends object> {
+    props(): ReturnType<typeof $$render<T>>['props'];
+    events(): ReturnType<typeof $$render<T>>['events'];
+    slots(): ReturnType<typeof $$render<T>>['slots'];
+    bindings(): "";
+    exports(): {};
+}
+interface $$IsomorphicComponent {
+    new <T extends object>(options: import('svelte').ComponentConstructorOptions<ReturnType<__sveltets_Render<T>['props']>>): import('svelte').SvelteComponent<ReturnType<__sveltets_Render<T>['props']>, ReturnType<__sveltets_Render<T>['events']>, ReturnType<__sveltets_Render<T>['slots']>> & {
+        $$bindings?: ReturnType<__sveltets_Render<T>['bindings']>;
+    } & ReturnType<__sveltets_Render<T>['exports']>;
+    <T extends object>(internal: unknown, props: ReturnType<__sveltets_Render<T>['props']> & {}): ReturnType<__sveltets_Render<T>['exports']>;
+    z_$$bindings?: ReturnType<__sveltets_Render<any>['bindings']>;
+}
+declare const Pagination: $$IsomorphicComponent;
+type Pagination<T extends object> = InstanceType<typeof Pagination<T>>;
+export default Pagination;

package/dist/Components/Dial.svelte

@@ -122,9 +122,9 @@
 		onMouseUp();
 	};
 
+	const handledKeys = new Set(['ArrowLeft', 'ArrowRight', 'ArrowUp', 'ArrowDown', 'Enter']);
 	function onkeydown(e: KeyboardEvent) {
-		const handledKeys = ['ArrowLeft', 'ArrowRight', 'ArrowUp', 'ArrowDown', 'Enter'];
-		if (handledKeys.includes(e.key)) {
+		if (handledKeys.has(e.key)) {
 			e.preventDefault();
 
 			if (e.key === 'ArrowLeft') {

package/dist/Components/Table/Body/QuickSearchCell.svelte

@@ -27,10 +27,13 @@
 	import { StringFilterMode } from '../Types/Filtering/StringFilterMode.js';
 	import type { SelectOption } from '../../../Types/Internal/SelectOption.js';
 	import type { Column } from '../Types/Columns/Column.js';
-	import { AccessorDef } from '../Types/Columns/Definitions/Accessors/AccessorDef.svelte.js';
+
 	import { AbstractDisplayDef } from '../Types/Columns/Definitions/Display/AbstractDisplayDef.svelte.js';
 	import { DateInputDef } from '../Types/Columns/Definitions/Accessors/DateInputDef.svelte.js';
 	import { SelectDef } from '../Types/Columns/Definitions/Accessors/SelectDef.svelte.js';
+	import { AccessorDef } from '../Types/Columns/Definitions/Accessors/AccessorDef.svelte.js';
+	import { NumberInputDef } from '../Types/Columns/Definitions/Accessors/NumberInputDef.svelte.js';
+	import { dev } from '$app/environment';
 
 	export interface QuickSearchCellProps<T extends object> {
 		column: Column<T>;
@@ -61,7 +64,9 @@
 		hasFilterFn || hasAcceptableColumnType || (customFilters?.has(def.id) ?? false)
 	);
 	const isNumeric = $derived(
-		('type' in def && def.type === 'Number') || customFilter?.type === CustomFilterType.Number
+		def instanceof NumberInputDef ||
+			def.filterValueType == 'Number' ||
+			customFilter?.type === CustomFilterType.Number
 	);
 	const options = $derived(
 		isSelect
@@ -87,8 +92,8 @@
 	let valueMin: number | null = $state(null);
 	let valueMax: number | null = $state(null);
 
-	// HACK crappy bodge to get typescript to understand that this won't be always null
 	let selectedOption: SelectOption<string | number> | null = $state(
+		// HACK crappy bodge to get typescript to understand that this won't be always null
 		null as unknown as SelectOption<string | number>
 	);
 
@@ -109,7 +114,6 @@
 
 	function getFilteringStateValue(): unknown {
 		const gotValue = tableContext.paginationRepo?.filtering.find((it) => it.id === def.id)?.value;
-		console.log(gotValue);
 		return gotValue;
 	}
 
@@ -123,6 +127,12 @@
 				const gotValue = getFilteringStateValue() as unknown as
 					| Array<string | number | SelectOption<string | number>>
 					| undefined;
+				if (dev) {
+					// eslint-disable-next-line no-debugger
+					debugger;
+					return;
+				}
+				//TODO redo the below in a more performant way if possible
 				const x = (await options).filter((it) => gotValue?.includes(it.value));
 				selectedOptions = x;
 			});

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

@@ -26,24 +26,31 @@
 		isBeingTargeted = false;
 	}
 
+	function makeKVPairs(item: string, index: number): readonly [string, number] {
+		return [item, index];
+	}
 	function togglePinLeft() {
 		if (columnDef == null) return;
 
 		tableContext.setColumnPinning((pinning) => {
-			const leftPinIndex = pinning.left?.indexOf(columnDef!.id) ?? -1;
-			const left = pinning.left?.concat() ?? [];
+			const leftPinIndex = pinning.left?.get(columnDef!.id) ?? -1;
+			const left = [...(pinning.left?.keys() ?? [])];
 			if (leftPinIndex !== -1) {
 				left.splice(leftPinIndex, 1);
 			} else {
 				left.push(columnDef!.id);
 			}
 
-			const rightPinIndex = pinning.right?.indexOf(columnDef!.id) ?? -1;
-			const right = pinning.right?.concat() ?? [];
+			const rightPinIndex = pinning.right?.get(columnDef!.id) ?? -1;
+			const right = [...(pinning.right?.keys() ?? [])];
 			if (rightPinIndex !== -1) {
 				right.splice(rightPinIndex, 1);
 			}
-			return { ...pinning, left, right };
+			return {
+				...pinning,
+				left: new Map(left.map(makeKVPairs)),
+				right: new Map(right.map(makeKVPairs))
+			};
 		});
 	}
 
@@ -51,8 +58,8 @@
 		if (columnDef == null) return;
 
 		tableContext.setColumnPinning((pinning) => {
-			const rightPinIndex = pinning.right?.indexOf(columnDef!.id) ?? -1;
-			const right = pinning.right?.concat() ?? [];
+			const rightPinIndex = pinning.right?.get(columnDef!.id) ?? -1;
+			const right = [...(pinning.right?.keys() ?? [])];
 
 			if (rightPinIndex !== -1) {
 				right.splice(rightPinIndex, 1);
@@ -60,13 +67,17 @@
 				right.push(columnDef!.id);
 			}
 
-			const leftPinIndex = pinning.left?.indexOf(columnDef!.id) ?? -1;
-			const left = pinning.left?.concat() ?? [];
+			const leftPinIndex = pinning.left?.get(columnDef!.id) ?? -1;
+			const left = [...(pinning.left?.keys() ?? [])];
 			if (leftPinIndex !== -1) {
 				left.splice(leftPinIndex, 1);
 			}
 
-			return { ...pinning, left, right };
+			return {
+				...pinning,
+				left: new Map(left.map(makeKVPairs)),
+				right: new Map(right.map(makeKVPairs))
+			};
 		});
 	}
 
@@ -114,22 +125,22 @@
 		/>
 
 		{#if tableContext.allowColumnReordering}
-			<!-- value={tableContext.columnPinning.left?.includes(columnDef.id) ?? false} -->
+			<!-- value={tableContext.columnPinning.left?.has(columnDef.id) ?? false} -->
 			<Checkbox
 				disabled={isExpandColumn}
 				icon={{ name: 'pin-left' }}
 				id={`is-pinned-left-${tableContext.tableName}-${columnDef.id}`}
-				value={tableContext.columnPinning.left?.includes(columnDef.id) || false}
+				value={tableContext.columnPinning.left?.has(columnDef.id) || false}
 				onchange={() => {
 					togglePinLeft();
 				}}
 			/>
-			<!-- value={tableContext.columnPinning.right?.includes(columnDef.id) ?? false} -->
+			<!-- value={tableContext.columnPinning.right?.has(columnDef.id) ?? false} -->
 			<Checkbox
 				disabled={isExpandColumn}
 				icon={{ name: 'pin-right' }}
 				id={`is-pinned-right-${tableContext.tableName}-${columnDef.id}`}
-				value={tableContext.columnPinning.right?.includes(columnDef.id) || false}
+				value={tableContext.columnPinning.right?.has(columnDef.id) || false}
 				onchange={() => {
 					togglePinRight();
 				}}

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

@@ -0,0 +1,49 @@
+<svelte:options runes />
+
+<script lang="ts" module>
+	import FocusableImmutableCell from './FocusableImmutableCell.svelte';
+	import type { TableCell } from '../../../Types/Columns/TableCell.js';
+	import TableNumberInput from './TableNumberInput.svelte';
+	import TableDatePicker from './TableDatePicker.svelte';
+	import TableSelect from './TableSelect.svelte';
+	import TableQuerySelect from './TableQuerySelect.svelte';
+	import TableCheckbox from './TableCheckbox.svelte';
+	import TableTextInput from './TableTextInput.svelte';
+	import type { Component } from 'svelte';
+	import { AccessorDef } from '../../../Types/Columns/Definitions/Accessors/AccessorDef.svelte.js';
+	import type { ColumnDef } from '../../../Types/Columns/Definitions/ColumnDef.svelte.js';
+
+	export interface AccessorComponentProps<T extends object> {
+		cell: TableCell<T>;
+	}
+
+	const cellTypes: Record<
+		'Number' | 'Date' | 'Select' | 'Checkbox' | 'Query' | 'Text',
+		// eslint-disable-next-line @typescript-eslint/no-explicit-any
+		Component<any>
+	> = {
+		Number: TableNumberInput,
+		Date: TableDatePicker,
+		Select: TableSelect,
+		Query: TableQuerySelect,
+		Checkbox: TableCheckbox,
+		Text: TableTextInput
+	} as const;
+</script>
+
+<script lang="ts" generics="T extends object">
+	const { cell }: AccessorComponentProps<T> = $props();
+
+	const CurrentComponent = $derived(getAppropriateAccessorDef(cell.column.columnDef));
+
+	// eslint-disable-next-line @typescript-eslint/no-explicit-any
+	function getAppropriateAccessorDef(columnDef: ColumnDef<T>): Component<any> {
+		if (columnDef instanceof AccessorDef) {
+			return cellTypes[columnDef.accessorType];
+		}
+
+		return FocusableImmutableCell;
+	}
+</script>
+
+<CurrentComponent {cell} />

package/dist/Components/Table/Body/Rows/Columns/AccessorComponent.svelte.d.ts

@@ -0,0 +1,28 @@
+import type { TableCell } from '../../../Types/Columns/TableCell.js';
+export interface AccessorComponentProps<T extends object> {
+    cell: TableCell<T>;
+}
+declare function $$render<T extends object>(): {
+    props: AccessorComponentProps<T>;
+    exports: {};
+    bindings: "";
+    slots: {};
+    events: {};
+};
+declare class __sveltets_Render<T extends object> {
+    props(): ReturnType<typeof $$render<T>>['props'];
+    events(): ReturnType<typeof $$render<T>>['events'];
+    slots(): ReturnType<typeof $$render<T>>['slots'];
+    bindings(): "";
+    exports(): {};
+}
+interface $$IsomorphicComponent {
+    new <T extends object>(options: import('svelte').ComponentConstructorOptions<ReturnType<__sveltets_Render<T>['props']>>): import('svelte').SvelteComponent<ReturnType<__sveltets_Render<T>['props']>, ReturnType<__sveltets_Render<T>['events']>, ReturnType<__sveltets_Render<T>['slots']>> & {
+        $$bindings?: ReturnType<__sveltets_Render<T>['bindings']>;
+    } & ReturnType<__sveltets_Render<T>['exports']>;
+    <T extends object>(internal: unknown, props: ReturnType<__sveltets_Render<T>['props']> & {}): ReturnType<__sveltets_Render<T>['exports']>;
+    z_$$bindings?: ReturnType<__sveltets_Render<any>['bindings']>;
+}
+declare const AccessorComponent: $$IsomorphicComponent;
+type AccessorComponent<T extends object> = InstanceType<typeof AccessorComponent<T>>;
+export default AccessorComponent;

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}