update: navigate directly to spreadsheet.

src/routes/(console)/project-[region]-[project]/databases/+page.ts

@@ -21,18 +21,20 @@ export const load: PageLoad = async ({ url, route, depends, params, parent }) =>
     // already loaded by parent.
     const { currentPlan } = await parent();
 
-    const { databases, policies, lastBackups } = await fetchDatabasesAndBackups(
+    const { databases, tables, policies, lastBackups } = await fetchDatabasesAndBackups(
         limit,
         offset,
         params,
         search,
         currentPlan
     );
+
     return {
         offset,
         limit,
         view,
         search,
+        tables,
         policies,
         databases,
         lastBackups
@@ -48,12 +50,26 @@ async function fetchDatabasesAndBackups(
 ) {
     const backupsEnabled = currentPlan?.backupsEnabled ?? true;
 
-    const databases = await sdk
-        .forProject(params.region, params.project)
-        .grids.listDatabases(
-            [Query.limit(limit), Query.offset(offset), Query.orderDesc('$createdAt')],
-            search || undefined
-        );
+    const projectSDK = sdk.forProject(params.region, params.project);
+
+    const databases = await projectSDK.grids.listDatabases(
+        [Query.limit(limit), Query.offset(offset), Query.orderDesc('$createdAt')],
+        search || undefined
+    );
+
+    const tables: Record<string, string | null> = {};
+
+    await Promise.all(
+        // TODO: backend should allow `Query.select` for perf!
+        databases.databases.map(async ({ $id }) => {
+            const res = await projectSDK.grids.listTables($id, [
+                Query.limit(1),
+                Query.orderDesc('')
+            ]);
+
+            tables[$id] = res.tables?.[0]?.$id ?? null;
+        })
+    );
 
     let lastBackups: Record<string, string>, policies: Record<string, BackupPolicy[]>;
 
@@ -64,7 +80,7 @@ async function fetchDatabasesAndBackups(
         ]);
     }
 
-    return { databases, policies, lastBackups };
+    return { databases, tables, policies, lastBackups };
 }
 
 async function fetchPolicies(databases: Models.DatabaseList, params: RouteParams) {

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

@@ -6,8 +6,10 @@
     import { columns } from './store';
     import { IconExclamation } from '@appwrite.io/pink-icons-svelte';
     import { Layout, Tooltip, Table, Icon } from '@appwrite.io/pink-svelte';
+    import type { BackupPolicy } from '$lib/sdk/backups';
 
     export let data;
+    const tables = data.tables;
 
     function getPolicyDescription(cron: string): string {
         const [minute, hour, dayOfMonth, , dayOfWeek] = cron.split(' ');
@@ -26,9 +28,12 @@
         {/each}
     </svelte:fragment>
     {#each data.databases.databases as database (database.$id)}
+        <!-- takes directly to the spreadsheet -->
+        {@const tableId = tables[database?.$id] ?? null}
+        {@const tableHref = tableId ? `/table-${tableId}` : ''}
         <Table.Row.Link
             {root}
-            href={`${base}/project-${page.params.region}-${page.params.project}/databases/database-${database.$id}`}>
+            href={`${base}/project-${page.params.region}-${page.params.project}/databases/database-${database.$id}${tableHref}`}>
             {#each $columns as column}
                 <Table.Cell column={column.id} {root}>
                     {#if column.id === '$id'}
@@ -43,7 +48,7 @@
                         {@const policies = data.policies?.[database.$id] ?? null}
                         {@const lastBackup = data.lastBackups?.[database.$id] ?? null}
                         {@const description = policies
-                            ?.map((policy) => getPolicyDescription(policy.schedule))
+                            ?.map((policy: BackupPolicy) => getPolicyDescription(policy.schedule))
                             .join(', ')}
 
                         <Tooltip