From b31f0621517306b76c6d278c6348aba81cff869c Mon Sep 17 00:00:00 2001
From: harsh mahajan <harshmahajan2345@gmail.com>
Date: Thu, 23 Apr 2026 17:24:22 +0530
Subject: [PATCH] fix: avoid actions column key collision in database tables

---
 .../table-[table]/+page.svelte                |  4 +--
 .../table-[table]/columns/+page.svelte        |  9 +++---
 .../table-[table]/createColumn.svelte         | 32 +++++++------------
 .../table-[table]/spreadsheet.svelte          | 17 ++++++----
 .../table-[table]/store.ts                    |  2 ++
 5 files changed, 32 insertions(+), 32 deletions(-)

diff --git a/src/routes/(console)/project-[region]-[project]/databases/database-[database]/table-[table]/+page.svelte b/src/routes/(console)/project-[region]-[project]/databases/database-[database]/table-[table]/+page.svelte
index 6467241f2..2c667f4b9 100644
--- a/src/routes/(console)/project-[region]-[project]/databases/database-[database]/table-[table]/+page.svelte
+++ b/src/routes/(console)/project-[region]-[project]/databases/database-[database]/table-[table]/+page.svelte
@@ -89,7 +89,7 @@
         return [...idColumn, ...columns.filter((column) => !column.isAction), ...systemColumns];
     }
 
-    $: selected = preferences.getCustomTableColumns(page.params.table);
+    $: selected = preferences.getCustomTableColumns(table.$id);
 
     $: if (table.fields) {
         const freshColumns = createTableColumns(table.fields, selected);
@@ -155,7 +155,7 @@
     onDestroy(() => ($showCreateColumnSheet.show = false));
 </script>
 
-{#key page.params.table}
+{#key table.$id}
     <Container expanded expandHeightButton style="background: var(--bgcolor-neutral-primary)">
         <Layout.Stack direction="column" gap="xl">
             <Layout.Stack direction="row" justifyContent="space-between">
diff --git a/src/routes/(console)/project-[region]-[project]/databases/database-[database]/table-[table]/columns/+page.svelte b/src/routes/(console)/project-[region]-[project]/databases/database-[database]/table-[table]/columns/+page.svelte
index 5b4075bc8..35cbf8142 100644
--- a/src/routes/(console)/project-[region]-[project]/databases/database-[database]/table-[table]/columns/+page.svelte
+++ b/src/routes/(console)/project-[region]-[project]/databases/database-[database]/table-[table]/columns/+page.svelte
@@ -24,7 +24,8 @@
         isCsvImportInProgress,
         isWaterfallFromFaker,
         reorderItems,
-        showCreateIndexSheet
+        showCreateIndexSheet,
+        INTERNAL_ACTIONS_COLUMN_ID
     } from '../store';
     import EditColumn from './edit.svelte';
     import DeleteColumn from './deleteColumn.svelte';
@@ -336,7 +337,7 @@
             minimumWidth: 200,
             resizable: true
         },
-        { id: 'actions', width: 40, isAction: true, resizable: false }
+        { id: INTERNAL_ACTIONS_COLUMN_ID, width: 40, isAction: true, resizable: false }
     ]);
 
     $effect(() => {
@@ -388,7 +389,7 @@
                 <Spreadsheet.Header.Cell column="indexed" {root}>Indexed</Spreadsheet.Header.Cell>
                 <Spreadsheet.Header.Cell column="default" {root}
                     >Default value</Spreadsheet.Header.Cell>
-                <Spreadsheet.Header.Cell column="actions" {root} />
+                <Spreadsheet.Header.Cell column={INTERNAL_ACTIONS_COLUMN_ID} {root} />
             </svelte:fragment>
 
             {#each updatedColumnsForSheet as column, index (column.key)}
@@ -544,7 +545,7 @@
                             {_default}
                         {/if}
                     </Spreadsheet.Cell>
-                    <Spreadsheet.Cell column="actions" {root} isEditable={false}>
+                    <Spreadsheet.Cell column={INTERNAL_ACTIONS_COLUMN_ID} {root} isEditable={false}>
                         {#if $isCsvImportInProgress}
                             <CsvDisabled>
                                 <Button disabled text icon ariaLabel="more options">
diff --git a/src/routes/(console)/project-[region]-[project]/databases/database-[database]/table-[table]/createColumn.svelte b/src/routes/(console)/project-[region]-[project]/databases/database-[database]/table-[table]/createColumn.svelte
index ccb6d03e2..e7593f4be 100644
--- a/src/routes/(console)/project-[region]-[project]/databases/database-[database]/table-[table]/createColumn.svelte
+++ b/src/routes/(console)/project-[region]-[project]/databases/database-[database]/table-[table]/createColumn.svelte
@@ -14,7 +14,12 @@
 
     import { showColumnsSuggestionsModal } from '../(suggestions)/store';
     import IconAINotification from '../(suggestions)/icon/aiNotification.svelte';
-    import { type Columns, type ColumnDirection, showCreateColumnSheet } from './store';
+    import {
+        type Columns,
+        type ColumnDirection,
+        showCreateColumnSheet,
+        INTERNAL_ACTIONS_COLUMN_ID
+    } from './store';
     import { isCloud } from '$lib/system';
     import { slide } from 'svelte/transition';
 
@@ -76,9 +81,9 @@
     function insertColumnInOrder() {
         if (!key) return;
 
-        const currentOrder = columnsOrder?.length
-            ? columnsOrder
-            : columns?.map((col) => col.id) || [];
+        const currentOrder = (
+            columnsOrder?.length ? columnsOrder : columns?.map((col) => col.id) || []
+        ).filter((columnId) => columnId !== '$id' && columnId !== INTERNAL_ACTIONS_COLUMN_ID);
 
         // if the length is empty,
         // means there's no ordering done.
@@ -88,12 +93,7 @@
         let newOrder: string[];
 
         if (!direction || !direction.neighbour) {
-            // Find the actions column position
-            const actionsIndex = currentOrder.indexOf('actions');
-            const beforeActionsOrder =
-                actionsIndex !== -1 ? currentOrder.slice(0, actionsIndex) : currentOrder;
-
-            const lastTwo = beforeActionsOrder.slice(-2);
+            const lastTwo = currentOrder.slice(-2);
             const hasTimestampColumnsAtEnd =
                 lastTwo.length === 2 &&
                 lastTwo.includes('$createdAt') &&
@@ -107,8 +107,7 @@
                     currentOrder.indexOf('$updatedAt')
                 );
             } else {
-                // Insert at the end, but before actions
-                insertIndex = actionsIndex !== -1 ? actionsIndex : currentOrder.length;
+                insertIndex = currentOrder.length;
             }
 
             newOrder = [
@@ -120,14 +119,7 @@
             const neighbourIndex = currentOrder.indexOf(direction.neighbour);
 
             if (neighbourIndex === -1) {
-                const actionsIndex = currentOrder.indexOf('actions');
-                const insertIndex = actionsIndex !== -1 ? actionsIndex : currentOrder.length;
-
-                newOrder = [
-                    ...currentOrder.slice(0, insertIndex),
-                    key,
-                    ...currentOrder.slice(insertIndex)
-                ];
+                newOrder = [...currentOrder, key];
             } else {
                 const insertIndex = direction.to === 'left' ? neighbourIndex : neighbourIndex + 1;
                 newOrder = [
diff --git a/src/routes/(console)/project-[region]-[project]/databases/database-[database]/table-[table]/spreadsheet.svelte b/src/routes/(console)/project-[region]-[project]/databases/database-[database]/table-[table]/spreadsheet.svelte
index e5c5c76d3..45e3b3fb1 100644
--- a/src/routes/(console)/project-[region]-[project]/databases/database-[database]/table-[table]/spreadsheet.svelte
+++ b/src/routes/(console)/project-[region]-[project]/databases/database-[database]/table-[table]/spreadsheet.svelte
@@ -42,7 +42,8 @@
         expandTabs,
         databaseRelatedRowSheetOptions,
         rowPermissionSheet,
-        type Columns
+        type Columns,
+        INTERNAL_ACTIONS_COLUMN_ID
     } from './store';
     import type { Column, ColumnType } from '$lib/helpers/types';
     import {
@@ -164,7 +165,7 @@
 
     function setupColumns() {
         const order = preferences.getColumnOrder(tableId);
-        const systemColumns = new Set(['$id', 'actions']);
+        const systemColumns = new Set(['$id', INTERNAL_ACTIONS_COLUMN_ID]);
 
         const validColumnKeys = new Set([
             ...$columns.map((col) => col.key),
@@ -187,6 +188,7 @@
 
     function makeTableColumns() {
         const selectedColumnsToHide = preferences.getCustomTableColumns(tableId);
+        const staticColumnIds = new Set(['$id', INTERNAL_ACTIONS_COLUMN_ID]);
 
         const baseColumns: Column[] = table.fields.map((field: Field) => {
             return {
@@ -241,7 +243,7 @@
                 hide: !!selectedColumnsToHide?.includes('$updatedAt')
             },
             {
-                id: 'actions',
+                id: INTERNAL_ACTIONS_COLUMN_ID,
                 title: '',
                 width: 40,
                 isAction: true,
@@ -257,7 +259,10 @@
         const fixedRightColumn = staticColumns[3];
 
         const reorderableColumns = [...baseColumns, staticColumns[1], staticColumns[2]];
-        const reorderedColumns = reorderItems(reorderableColumns, $columnsOrder);
+        const reorderedColumns = reorderItems(
+            reorderableColumns,
+            $columnsOrder.filter((columnId) => !staticColumnIds.has(columnId))
+        );
 
         const finalColumns = [fixedLeftColumn, ...reorderedColumns, fixedRightColumn];
 
@@ -856,7 +861,7 @@
             <svelte:fragment slot="header" let:root>
                 {#each $tableColumns as column (column.id)}
                     {#if column.isAction}
-                        <Spreadsheet.Header.Cell column="actions" {root}>
+                        <Spreadsheet.Header.Cell column={INTERNAL_ACTIONS_COLUMN_ID} {root}>
                             <Tooltip>
                                 <Button.Button
                                     icon
@@ -1019,7 +1024,7 @@
                                             showDatetime
                                             time={row?.[columnId]}
                                             canShowPopover={canShowDatetimePopover} />
-                                    {:else if columnId === 'actions'}
+                                    {:else if columnId === INTERNAL_ACTIONS_COLUMN_ID}
                                         <SheetOptions
                                             type="row"
                                             column={rowColumn}
diff --git a/src/routes/(console)/project-[region]-[project]/databases/database-[database]/table-[table]/store.ts b/src/routes/(console)/project-[region]-[project]/databases/database-[database]/table-[table]/store.ts
index 9d701180e..66212f50e 100644
--- a/src/routes/(console)/project-[region]-[project]/databases/database-[database]/table-[table]/store.ts
+++ b/src/routes/(console)/project-[region]-[project]/databases/database-[database]/table-[table]/store.ts
@@ -58,6 +58,8 @@ export const isWaterfallFromFaker = writable(false);
 
 export const tableColumns = writable<Column[]>([]);
 
+export const INTERNAL_ACTIONS_COLUMN_ID = '$actions';
+
 export const isCsvImportInProgress = writable(false);
 
 export const columnsOrder = writable<string[]>([]);