update: header expanded states on preferences.

src/lib/stores/preferences.ts

@@ -31,6 +31,9 @@ type ConsolePreferencesStore = {
     tables?: {
         [key: string]: ConsolePreferences['columns'];
     };
+    tableHeaderExpanded?: {
+        [key: string]: boolean;
+    };
     displayNames?: {
         [key: string]: TeamPreferences['names'];
     };
@@ -132,9 +135,11 @@ function createPreferences() {
                 }
             );
         },
+
         getCustomTableColumns: (tableId: string): ConsolePreferences['columns'] => {
             return preferences?.tables?.[tableId] ?? preferences?.collections?.[tableId] ?? [];
         },
+
         setLimit: (limit: ConsolePreferences['limit']) =>
             updateAndSync((n) => {
                 const path = page.route.id;
@@ -148,6 +153,7 @@ function createPreferences() {
 
                 return n;
             }),
+
         setView: (view: ConsolePreferences['view']) =>
             updateAndSync((n) => {
                 const path = page.route.id;
@@ -161,6 +167,7 @@ function createPreferences() {
 
                 return n;
             }),
+
         setColumns: (columns: ConsolePreferences['columns']) =>
             updateAndSync((n) => {
                 const path = page.route.id;
@@ -174,6 +181,7 @@ function createPreferences() {
 
                 return n;
             }),
+
         setCustomTableColumns: (tableId: string, columns: ConsolePreferences['columns']) =>
             updateAndSync((n) => {
                 n ??= {};
@@ -184,6 +192,7 @@ function createPreferences() {
                 // n.collections[tableId] = Array.from(new Set(columns));
                 return n;
             }),
+
         deleteCustomTableColumns: async (tableId: string) => {
             await updateAndSync((n) => {
                 if (!n?.tables) {
@@ -195,10 +204,13 @@ function createPreferences() {
                 return n;
             });
         },
+
         loadTeamPrefs: loadTeamPreferences,
+
         getDisplayNames: () => {
             return preferences?.displayNames ?? {};
         },
+
         setDisplayNames: async (tableId: string, names: TeamPreferences['names']) => {
             await updateAndSync((n) => {
                 if (!n?.displayNames) {
@@ -210,6 +222,7 @@ function createPreferences() {
                 return n;
             });
         },
+
         deleteDisplayNames: async (tableId: string) => {
             await updateAndSync((n) => {
                 if (!n?.displayNames) {
@@ -265,6 +278,22 @@ function createPreferences() {
                 teamId: orgId,
                 prefs: teamPreferences
             });
+        },
+
+        isTableHeaderExpanded(tableId: string): boolean {
+            return preferences.tableHeaderExpanded?.[tableId] ?? true
+        },
+
+        async setTableHeaderExpanded(tableId: string, expanded: boolean) {
+            await updateAndSync((n) => {
+                if (!n?.tableHeaderExpanded) {
+                    n ??= {};
+                    n.tableHeaderExpanded ??= {};
+                }
+
+                n.tableHeaderExpanded[tableId] = expanded;
+                return n;
+            });
         }
     };
 }

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

@@ -9,11 +9,15 @@ export const load: LayoutLoad = async ({ params, depends }) => {
     depends(Dependencies.TABLE);
 
     const [table, tables] = await Promise.all([
-        sdk.forProject(params.region, params.project).grids.getTable(params.database, params.table),
+        sdk.forProject(params.region, params.project).grids.getTable({
+            databaseId: params.database,
+            tableId: params.table
+        }),
 
-        sdk
-            .forProject(params.region, params.project)
-            .grids.listTables(params.database, [Query.orderDesc(''), Query.limit(100)])
+        sdk.forProject(params.region, params.project).grids.listTables({
+            databaseId: params.database,
+            queries: [Query.orderDesc(''), Query.limit(100)]
+        })
     ]);
 
     return {

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

@@ -32,7 +32,7 @@
         rowActivitySheet,
         paginatedRows,
         paginatedRowsLoading,
-        spreadsheetRenderKey
+        spreadsheetRenderKey, expandTabs
     } from './store';
     import RelationshipsModal from './relationshipsModal.svelte';
     import type { Column, ColumnType } from '$lib/helpers/types';
@@ -120,6 +120,7 @@
         displayNames = preferences.getDisplayNames();
         columnsOrder.set(preferences.getColumnOrder(tableId));
         columnsWidth.set(preferences.getColumnWidths(tableId));
+        expandTabs.set(preferences.isTableHeaderExpanded(tableId));
 
         makeTableColumns();
         sortState.set(data.currentSort as SortState);
@@ -586,12 +587,6 @@
     }
 
     async function handleGoToPage(targetPageNum: number): Promise<void> {
-        if ($paginatedRows.hasPage(targetPageNum) || $paginatedRows.hasPage(targetPageNum + 1)) {
-            scrollToIndexOffset = 0;
-        } else {
-            scrollToIndexOffset = 16;
-        }
-
         if (targetPageNum < 1 || targetPageNum > totalPages) return;
 
         if (!$paginatedRows.hasPage(targetPageNum)) {
@@ -664,7 +659,9 @@
 
     $: rowSelection = !$spreadsheetLoading && !$paginatedRowsLoading ? true : ('disabled' as const);
 
-    $: scrollToIndexOffset = 16;
+    expandTabs.subscribe((expanded) => {
+        preferences.setTableHeaderExpanded(tableId, expanded);
+    })
 </script>
 
 <SpreadsheetContainer observeExpand bind:this={spreadsheetContainer}>
@@ -684,7 +681,6 @@
             on:columnsSwap={(order) => saveColumnsOrder(order.detail)}
             on:columnsResize={(resize) => saveColumnsWidth(resize.detail)}
             bind:currentPage
-            {scrollToIndexOffset}
             nextPageTriggerOffset={2}
             paginationBufferSpace={35}
             jumpToPageNumber={jumpToPageReactive}