add: sys cols filtering support.

src/routes/(console)/project-[region]-[project]/databases/database-[database]/table-[table]/+page.svelte

@@ -51,12 +51,25 @@
         }));
     }
 
+    function createFilterableColumns(columns: Column[], selected: string[] = []): Column[] {
+        const idColumn = [{ id: '$id', title: '$id', type: 'string' as ColumnType }].filter(
+            (col) => !selected.includes(col.id)
+        );
+
+        const systemColumns = [
+            { id: '$createdAt', title: '$createdAt', type: 'datetime' as ColumnType },
+            { id: '$updatedAt', title: '$updatedAt', type: 'datetime' as ColumnType }
+        ].filter((col) => !!selected.includes(col.id));
+
+        return [...idColumn, ...columns.filter((column) => !column.isAction), ...systemColumns];
+    }
+
     $: selected = preferences.getCustomTableColumns(page.params.table);
 
     $: if ($table.columns) {
         const freshColumns = createTableColumns($table.columns, selected);
         tableColumns.set(freshColumns);
-        filterColumns.set(freshColumns.filter((column) => !column.isAction));
+        filterColumns.set(createFilterableColumns(freshColumns, selected));
     }
 
     $: hasColumns = !!$table.columns.length;

src/routes/(console)/project-[region]-[project]/databases/database-[database]/table-[table]/sheetOptions.svelte

@@ -163,12 +163,11 @@
             <ActionMenu.Root width="180px">
                 {#each menuItems as item, index (index)}
                     {#if item.divider}
-                    {@const isLastDivider = index === menuItems.length - 2}
+                        {@const isLastDivider = index === menuItems.length - 2}
                         <div
                             style:margin-inline="-1rem"
                             style:padding-block-start="0.5rem"
-                            style:padding-block-end={isLastDivider ? '0.25rem' : '0.5rem'}
-                        >
+                            style:padding-block-end={isLastDivider ? '0.25rem' : '0.5rem'}>
                             <Divider />
                         </div>
                     {:else if shouldShow(item)}

src/routes/(console)/project-[region]-[project]/databases/database-[database]/table-[table]/spreadsheet.svelte

@@ -106,15 +106,6 @@
 
     const minimumWidth = 168;
     const emptyCellsLimit = $isSmallViewport ? 12 : 18;
-    const SYSTEM_KEYS = new Set([
-        '$tableId',
-        '$databaseId',
-        '$permissions',
-        '$createdAt',
-        '$updatedAt',
-        '$id',
-        '$sequence'
-    ]); /* TODO: should be fixed at the sdk level! */
 
     let selectedRows = [];
     let spreadsheetContainer: SpreadsheetContainer;
@@ -576,16 +567,11 @@
 
     async function updateRowContents(row: Models.Row) {
         try {
-            const onlyData = Object.fromEntries(
-                Object.entries(row).filter(([key]) => !SYSTEM_KEYS.has(key))
-            );
-
-            // TODO | BUG: related rows still have `system` columns atm!
             await sdk.forProject(page.params.region, page.params.project).tablesDB.updateRow({
                 databaseId,
                 tableId: $table.$id,
                 rowId: row.$id,
-                data: onlyData,
+                data: row,
                 permissions: row.$permissions
             });