@juspay/svelte-ui-components 2.87.0 → 2.89.0

package/dist/Table/BuiltinCell.svelte

@@ -33,11 +33,13 @@
   let {
     column,
     value,
-    rowIndex
+    rowIndex,
+    originalIndex
   }: {
     column: TableColumn;
     value: TableCellValue;
     rowIndex: number;
+    originalIndex: number;
   } = $props();
 
   let copied = $state(false);
@@ -226,7 +228,7 @@
     <Toggle
       checked={isChecked}
       text=""
-      onclick={(newChecked) => column.onToggle?.(rowIndex, newChecked)}
+      onclick={(newChecked) => column.onToggle?.(rowIndex, newChecked, originalIndex)}
     />
   </span>
 {:else if column.type === 'select'}
@@ -247,7 +249,7 @@
         itemTestId={selectData.itemTestId}
         onchange={(selectedIds) => {
           if (selectedIds.length > 0) {
-            column.onSelect?.(rowIndex, selectedIds[0]);
+            column.onSelect?.(rowIndex, selectedIds[0], originalIndex);
           }
         }}
       />
@@ -275,7 +277,7 @@
           : null}
         onErrorMessage={inputData.onErrorMessage ?? null}
         actionInput={false}
-        onInput={(newValue) => column.onInput?.(rowIndex, newValue)}
+        onInput={(newValue) => column.onInput?.(rowIndex, newValue, originalIndex)}
       />
     </span>
   {:else}
@@ -295,7 +297,7 @@
         disabled={buttonData.disabled ?? false}
         classes={buttonData.classes ?? ''}
         testId={buttonData.testId}
-        onclick={() => column.onButtonClick?.(rowIndex)}
+        onclick={() => column.onButtonClick?.(rowIndex, originalIndex)}
       />
     </span>
   {:else}
@@ -317,7 +319,7 @@
           disabled={primary.disabled ?? false}
           classes={primary.classes ?? ''}
           testId={primary.testId}
-          onclick={() => column.onPrimaryAction?.(rowIndex)}
+          onclick={() => column.onPrimaryAction?.(rowIndex, originalIndex)}
         />
       {/if}
       {#if actionData.menuItems && actionData.menuItems.length > 0}
@@ -329,7 +331,7 @@
             separator: item.separator
           }))}
           testId={column.testId && `${column.testId}-menu-${rowIndex}`}
-          onselect={(menuItem) => column.onMenuAction?.(rowIndex, menuItem.value)}
+          onselect={(menuItem) => column.onMenuAction?.(rowIndex, menuItem.value, originalIndex)}
         >
           {#snippet trigger()}
             <span class="builtin-icon-button">
@@ -367,7 +369,7 @@
           separator: item.separator
         }))}
         testId={column.testId && `${column.testId}-popup-${rowIndex}`}
-        onselect={(menuItem) => column.onMenuAction?.(rowIndex, menuItem.value)}
+        onselect={(menuItem) => column.onMenuAction?.(rowIndex, menuItem.value, originalIndex)}
       >
         {#snippet trigger()}
           <span class="builtin-icon-button">

package/dist/Table/BuiltinCell.svelte.d.ts

@@ -3,6 +3,7 @@ type $$ComponentProps = {
     column: TableColumn;
     value: TableCellValue;
     rowIndex: number;
+    originalIndex: number;
 };
 declare const BuiltinCell: import("svelte").Component<$$ComponentProps, {}, "">;
 type BuiltinCell = ReturnType<typeof BuiltinCell>;

package/dist/Table/Table.svelte

@@ -59,6 +59,10 @@
   let normalized = $derived(columns ? normalizeColumns(columns, rows ?? []) : null);
   let effectiveHeaders = $derived(normalized ? normalized.tableHeaders : tableHeaders);
   let effectiveData = $derived(normalized ? normalized.tableData : tableData);
+  // Maps each row reference back to its index in the consumer-supplied `rows`
+  // (pre-sort/pre-filter). Row refs are preserved through sort/filter/paginate,
+  // so cell callbacks can hand consumers a sort-stable `originalIndex`.
+  let originalIndexByRow = $derived(new Map(effectiveData.map((row, index) => [row, index])));
   let effectiveSortableColumns = $derived(
     normalized ? normalized.sortableColumns : sortableColumns
   );
@@ -107,14 +111,19 @@
   };
 
   // ─── Row click ───────────────────────────────────────────────────────────────
-  const handleRowClick = (rowIndex: number, rowData: JSONValue[]): void => {
-    onRowClick?.(rowIndex, rowData);
+  const handleRowClick = (rowIndex: number, rowData: JSONValue[], originalIndex: number): void => {
+    onRowClick?.(rowIndex, rowData, originalIndex);
   };
 
-  const handleRowKeydown = (event: KeyboardEvent, rowIndex: number, rowData: JSONValue[]): void => {
+  const handleRowKeydown = (
+    event: KeyboardEvent,
+    rowIndex: number,
+    rowData: JSONValue[],
+    originalIndex: number
+  ): void => {
     if (event.key === 'Enter' || event.key === ' ') {
       event.preventDefault();
-      onRowClick?.(rowIndex, rowData);
+      onRowClick?.(rowIndex, rowData, originalIndex);
     }
   };
 
@@ -325,9 +334,10 @@
   const resolveRowId = (
     cfg: TableCheckboxSelectionConfig,
     row: JSONValue[],
-    rowIndex: number
+    rowIndex: number,
+    originalIndex: number
   ): string => {
-    return cfg.getRowId ? cfg.getRowId(row, rowIndex) : String(rowIndex);
+    return cfg.getRowId ? cfg.getRowId(row, rowIndex, originalIndex) : String(rowIndex);
   };
 
   let internalSelectedIds = new SvelteSet<string>();
@@ -370,7 +380,12 @@
       const originalIndex = indexMap.get(row) ?? -1;
       const stableIndex = originalIndex === -1 ? fallbackIndex : originalIndex;
       if (checkboxSelection && checkboxSelection.enabled !== false) {
-        return resolveRowId(checkboxSelection, row, stableIndex);
+        return resolveRowId(
+          checkboxSelection,
+          row,
+          stableIndex,
+          originalIndexByRow.get(row) ?? stableIndex
+        );
       }
       return String(stableIndex);
     });
@@ -712,6 +727,7 @@
         {:else}
           {#each paginatedTableData as row, pageRowIndex (rowIdByRow.get(row) ?? pageRowIndex)}
             {@const rowIndex = pageRowIndex + rowIndexOffset}
+            {@const originalIndex = originalIndexByRow.get(row) ?? rowIndex}
             {@const rowId = rowIdByRow.get(row) ?? String(rowIndex)}
             {@const rowDisabled = isCheckboxMode && isRowDisabled(rowId)}
             {@const rowSelected = isCheckboxMode && isRowSelected(rowId)}
@@ -720,9 +736,9 @@
               class:table-row-clickable={isRowClickable}
               class:table-row-selected={rowSelected}
               data-pw={typeof getRowTestId === 'function' ? getRowTestId(row, rowIndex) : null}
-              onclick={isRowClickable ? () => handleRowClick(rowIndex, row) : null}
+              onclick={isRowClickable ? () => handleRowClick(rowIndex, row, originalIndex) : null}
               onkeydown={isRowClickable
-                ? (keyboardEvent) => handleRowKeydown(keyboardEvent, rowIndex, row)
+                ? (keyboardEvent) => handleRowKeydown(keyboardEvent, rowIndex, row, originalIndex)
                 : null}
               tabindex={isRowClickable ? 0 : null}
             >
@@ -781,9 +797,14 @@
                     class:table-cell-clamp={keyedColumn?.maxWidth && isScalarCell}
                   >
                     {#if keyedColumn && typeof keyedColumn.cell === 'function' && keyedRow}
-                      {@render keyedColumn.cell(keyedRow, rowIndex)}
+                      {@render keyedColumn.cell(keyedRow, rowIndex, originalIndex)}
                     {:else if keyedColumn?.type && keyedColumn.type !== 'text' && keyedColumn.type !== 'custom'}
-                      <BuiltinCell column={keyedColumn} value={cellValue} {rowIndex} />
+                      <BuiltinCell
+                        column={keyedColumn}
+                        value={cellValue}
+                        {rowIndex}
+                        {originalIndex}
+                      />
                     {:else if typeof cell === 'function'}
                       {@render cell(cellValue, rowIndex, colIndex)}
                     {:else}

package/dist/Table/properties.d.ts

@@ -172,9 +172,9 @@ export type TableRow = Record<string, TableCellValue>;
  *   `sortable` prop. Equivalent to listing/omitting the column's index in
  *   `sortableColumns`.
  * - `testId` — `data-pw` attribute emitted on this column's header cell.
- * - `cell` — column-scoped renderer snippet receiving the full keyed row and
- *   the row index. Takes precedence over the table-wide `cell` snippet for
- *   this column; required when `type` is `'custom'`.
+ * - `cell` — column-scoped renderer snippet receiving the full keyed row, the
+ *   display row index, and the original (pre-sort) row index. Takes precedence
+ *   over the table-wide `cell` snippet for this column; required when `type` is `'custom'`.
  * - `onToggle`/`onSelect`/`onInput`/`onButtonClick`/`onPrimaryAction`/`onMenuAction`
  *   — change/action handlers for the matching interactive cell types. Behavior
  *   lives on the column so row data stays plain JSON.
@@ -185,7 +185,7 @@ export type TableColumn = {
     type?: TableColumnType;
     sortable?: boolean;
     testId?: string;
-    cell?: Snippet<[TableRow, number]>;
+    cell?: Snippet<[TableRow, number, number]>;
     /** Header tooltip text, shown on hover over the column label. */
     tooltip?: string;
     /**
@@ -207,13 +207,19 @@ export type TableColumn = {
      * the cell value itself.
      */
     getSortValue?: (row: TableRow, rowIndex: number) => string | number | boolean;
-    /** `checked` is the NEW state after the flip, not the pre-click value. */
-    onToggle?: (rowIndex: number, checked: boolean) => void;
-    onSelect?: (rowIndex: number, selectedId: string) => void;
-    onInput?: (rowIndex: number, value: string) => void;
-    onButtonClick?: (rowIndex: number) => void;
-    onPrimaryAction?: (rowIndex: number) => void;
-    onMenuAction?: (rowIndex: number, itemId: string) => void;
+    /**
+     * Row-action handlers. `rowIndex` is the row's position in the CURRENT
+     * (sorted/filtered/paginated) view; `originalIndex` is its position in the
+     * consumer-supplied `rows` array, stable under sort/filter — index your own
+     * source array with `originalIndex` so actions hit the correct row when the
+     * table is sorted. `checked` is the NEW state after the flip, not the pre-click value.
+     */
+    onToggle?: (rowIndex: number, checked: boolean, originalIndex: number) => void;
+    onSelect?: (rowIndex: number, selectedId: string, originalIndex: number) => void;
+    onInput?: (rowIndex: number, value: string, originalIndex: number) => void;
+    onButtonClick?: (rowIndex: number, originalIndex: number) => void;
+    onPrimaryAction?: (rowIndex: number, originalIndex: number) => void;
+    onMenuAction?: (rowIndex: number, itemId: string, originalIndex: number) => void;
 };
 /**
  * Configuration for row checkbox selection (C2-1).
@@ -238,7 +244,7 @@ export type TableCheckboxSelectionConfig = {
     enabled?: boolean;
     selectionMode?: 'single' | 'multiple';
     onSelectionChange?: (selectedIds: Set<string>) => void;
-    getRowId?: (row: JSONValue[], rowIndex: number) => string;
+    getRowId?: (row: JSONValue[], rowIndex: number, originalIndex: number) => string;
     disabledRowIds?: Set<string>;
     /**
      * Controlled-selection overlay. Omitted: today's uncontrolled behavior via
@@ -361,7 +367,7 @@ export type OptionalTableProperties = {
     searchConfig?: TableSearchConfig;
 };
 export type TableEventProperties = {
-    onRowClick?: (rowIndex: number, rowData: JSONValue[]) => void;
+    onRowClick?: (rowIndex: number, rowData: JSONValue[], originalIndex: number) => void;
     onSort?: (columnIndex: number, direction: SortDirection) => void;
     /**
      * C2-2: Callback invoked when a cell value changes via an editable element

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@juspay/svelte-ui-components",
-  "version": "2.87.0",
+  "version": "2.89.0",
   "description": "A themeable Svelte 5 UI component library with CSS custom property driven styling",
   "keywords": [
     "svelte",