diff --git a/src/components/EditorSidePanel/TablesTab/TablesTab.jsx b/src/components/EditorSidePanel/TablesTab/TablesTab.jsx
index a11225970..de4000797 100644
--- a/src/components/EditorSidePanel/TablesTab/TablesTab.jsx
+++ b/src/components/EditorSidePanel/TablesTab/TablesTab.jsx
@@ -10,9 +10,11 @@ import {
   useSettings,
 } from "../../../hooks";
 import { DiagramActionsContext } from "../../../context/DiagramContext";
+import { TransformActionsContext } from "../../../context/TransformContext";
 import { UndoRedoActionsContext } from "../../../context/UndoRedoContext";
 import { Action, ObjectType, State } from "../../../data/constants";
 import { useTranslation } from "react-i18next";
+import { getTableCenter } from "../../../utils/utils";
 import { DragHandle } from "../../SortableList/DragHandle";
 import { SortableList } from "../../SortableList/SortableList";
 import SearchBar from "./SearchBar";
@@ -25,6 +27,14 @@ export default function TablesTab() {
   const { t } = useTranslation();
   const { layout } = useLayout();
   const { setSaveState } = useSaveState();
+  const { setTransform } = useContext(TransformActionsContext);
+  const { settings } = useSettings();
+
+  const locateTable = (id) => {
+    const table = tables.find((tbl) => `${tbl.id}` === `${id}`);
+    if (!table || table.hidden) return;
+    setTransform({ pan: getTableCenter(table, settings.showComments) });
+  };
 
   return (
     <>
@@ -52,14 +62,15 @@ export default function TablesTab() {
           }
           keepDOM={false}
           lazyRender
-          onChange={(k) =>
+          onChange={(k) => {
             setSelectedElement((prev) => ({
               ...prev,
               open: true,
               id: k[0],
               element: ObjectType.TABLE,
-            }))
-          }
+            }));
+            if (k[0] !== undefined) locateTable(k[0]);
+          }}
           accordion
         >
           <SortableList
diff --git a/src/context/TransformContext.jsx b/src/context/TransformContext.jsx
index 911ce4793..65c54e583 100644
--- a/src/context/TransformContext.jsx
+++ b/src/context/TransformContext.jsx
@@ -1,6 +1,7 @@
-import { createContext, useCallback, useState } from "react";
+import { createContext, useCallback, useMemo, useState } from "react";
 
 export const TransformContext = createContext(null);
+export const TransformActionsContext = createContext(null);
 
 export default function TransformContextProvider({ children }) {
   const [transform, setTransformInternal] = useState({
@@ -38,9 +39,13 @@ export default function TransformContextProvider({ children }) {
     [setTransformInternal],
   );
 
+  const actions = useMemo(() => ({ setTransform }), [setTransform]);
+
   return (
-    <TransformContext.Provider value={{ transform, setTransform }}>
-      {children}
-    </TransformContext.Provider>
+    <TransformActionsContext.Provider value={actions}>
+      <TransformContext.Provider value={{ transform, setTransform }}>
+        {children}
+      </TransformContext.Provider>
+    </TransformActionsContext.Provider>
   );
 }
diff --git a/src/utils/utils.js b/src/utils/utils.js
index c33257e0b..fcf0c5c1b 100644
--- a/src/utils/utils.js
+++ b/src/utils/utils.js
@@ -262,3 +262,15 @@ export function getTableHeight(table, showComments = true, relatedFieldKeys) {
     getCommentHeight(table.comment, width, showComments)
   );
 }
+
+/**
+ * Returns the center of a table in diagram space, which is the value the
+ * canvas pan has to be set to for the table to appear in the middle of the
+ * screen.
+ */
+export function getTableCenter(table, showComments = true) {
+  return {
+    x: table.x + getTableWidth(table) / 2,
+    y: table.y + getTableHeight(table, showComments) / 2,
+  };
+}