From 2154b0d025bf575b3d8a12c2f09ceae4ee58003a Mon Sep 17 00:00:00 2001
From: kraysent <kraysent@gmail.com>
Date: Wed, 2 Sep 2026 22:29:00 +0100
Subject: [PATCH 1/6] some follow-up improvements for references editing

---
 apps/admin/src/components/ui/EditableField.tsx | 15 ++++++++++++++-
 1 file changed, 14 insertions(+), 1 deletion(-)

diff --git a/apps/admin/src/components/ui/EditableField.tsx b/apps/admin/src/components/ui/EditableField.tsx
index 00447a4..f8c1983 100644
--- a/apps/admin/src/components/ui/EditableField.tsx
+++ b/apps/admin/src/components/ui/EditableField.tsx
@@ -1,6 +1,6 @@
 import classNames from "classnames";
 import { ReactElement, useEffect, useState } from "react";
-import { MdEdit } from "react-icons/md";
+import { MdClose, MdEdit, MdKeyboardReturn } from "react-icons/md";
 import { formatCaughtError } from "@leda/lib/tap";
 import { FieldInput, type FieldInputConfig } from "./FieldInput";
 
@@ -133,6 +133,9 @@ function EditableFieldInner<T>({
   }
 
   if (editing) {
+    const saveShortcut =
+      input.kind === "textarea" || input.kind === "json" ? "⌘↵" : "↵";
+
     return (
       <div className="min-w-0">
         <FieldInput
@@ -147,6 +150,16 @@ function EditableFieldInner<T>({
           onCancel={cancelEdit}
           commitOnChange={input.kind === "select"}
         />
+        {input.kind !== "select" ? (
+          <div className="mt-1 flex gap-2 text-xs text-muted">
+            <span className="flex items-center gap-0.5">
+              {saveShortcut} save
+            </span>
+            <span className="flex items-center gap-0.5">
+              Esc cancel
+            </span>
+          </div>
+        ) : null}
         {error ? <p className="mt-1 text-xs text-danger">{error}</p> : null}
       </div>
     );

From 6ccb5cef799e693a77cb80b0ae7730bdb6276d58 Mon Sep 17 00:00:00 2001
From: kraysent <kraysent@gmail.com>
Date: Wed, 2 Sep 2026 22:36:32 +0100
Subject: [PATCH 2/6] monaco editor fo jsons

---
 .../admin/src/components/ui/EditableField.tsx |  6 +-
 apps/admin/src/components/ui/FieldInput.tsx   | 93 ++++++++++++++++++-
 2 files changed, 94 insertions(+), 5 deletions(-)

diff --git a/apps/admin/src/components/ui/EditableField.tsx b/apps/admin/src/components/ui/EditableField.tsx
index f8c1983..451404b 100644
--- a/apps/admin/src/components/ui/EditableField.tsx
+++ b/apps/admin/src/components/ui/EditableField.tsx
@@ -1,6 +1,6 @@
 import classNames from "classnames";
 import { ReactElement, useEffect, useState } from "react";
-import { MdClose, MdEdit, MdKeyboardReturn } from "react-icons/md";
+import { MdEdit } from "react-icons/md";
 import { formatCaughtError } from "@leda/lib/tap";
 import { FieldInput, type FieldInputConfig } from "./FieldInput";
 
@@ -155,9 +155,7 @@ function EditableFieldInner<T>({
             <span className="flex items-center gap-0.5">
               {saveShortcut} save
             </span>
-            <span className="flex items-center gap-0.5">
-              Esc cancel
-            </span>
+            <span className="flex items-center gap-0.5">Esc cancel</span>
           </div>
         ) : null}
         {error ? <p className="mt-1 text-xs text-danger">{error}</p> : null}
diff --git a/apps/admin/src/components/ui/FieldInput.tsx b/apps/admin/src/components/ui/FieldInput.tsx
index da44e19..5313ca1 100644
--- a/apps/admin/src/components/ui/FieldInput.tsx
+++ b/apps/admin/src/components/ui/FieldInput.tsx
@@ -7,7 +7,9 @@ import {
   useRef,
   useState,
 } from "react";
-import { SuggestibleInput } from "@leda/lib/ui";
+import Editor from "@monaco-editor/react";
+import type * as Monaco from "monaco-editor";
+import { SuggestibleInput, useTheme } from "@leda/lib/ui";
 
 const SEARCH_DEBOUNCE_MS = 300;
 
@@ -103,6 +105,81 @@ function handleMultilineKeyDown(
   }
 }
 
+interface JsonEditorProps {
+  value: string;
+  onChange: (value: string) => void;
+  disabled: boolean;
+  autoFocus: boolean;
+  className: string;
+  onSave?: () => void;
+  onCancel?: () => void;
+}
+
+function JsonEditor({
+  value,
+  onChange,
+  disabled,
+  autoFocus,
+  className,
+  onSave,
+  onCancel,
+}: JsonEditorProps): ReactElement {
+  const { effectiveTheme } = useTheme();
+  const onSaveRef = useRef(onSave);
+  const onCancelRef = useRef(onCancel);
+  const height = `${(value.split("\n").length + 1) * 20 + 8}px`;
+
+  onSaveRef.current = onSave;
+  onCancelRef.current = onCancel;
+
+  return (
+    <div
+      className={classNames(className, "overflow-hidden p-0")}
+      style={{ height }}
+      onClick={(event) => event.stopPropagation()}
+    >
+      <Editor
+        height="100%"
+        language="json"
+        theme={effectiveTheme === "dark" ? "vs-dark" : "vs"}
+        value={value}
+        onChange={(nextValue) => onChange(nextValue ?? "")}
+        onMount={(editor, monaco: typeof Monaco) => {
+          if (autoFocus) {
+            editor.focus();
+          }
+          editor.addCommand(monaco.KeyMod.CtrlCmd | monaco.KeyCode.Enter, () =>
+            onSaveRef.current?.(),
+          );
+          editor.addCommand(monaco.KeyCode.Escape, () => {
+            onCancelRef.current?.();
+          });
+        }}
+        options={{
+          readOnly: disabled,
+          minimap: { enabled: false },
+          fontSize: 13,
+          lineNumbers: "off",
+          folding: false,
+          glyphMargin: false,
+          overviewRulerLanes: 0,
+          renderLineHighlight: "none",
+          scrollBeyondLastLine: false,
+          wordWrap: "on",
+          automaticLayout: true,
+          tabSize: 2,
+          padding: { top: 4, bottom: 4 },
+          scrollbar: {
+            horizontal: "hidden",
+            vertical: "hidden",
+            handleMouseWheel: false,
+          },
+        }}
+      />
+    </div>
+  );
+}
+
 interface AutocompleteInputProps {
   loadOptions: (query: string) => Promise<FieldOption[]>;
   value: string;
@@ -277,6 +354,20 @@ export function FieldInput({
     );
   }
 
+  if (input.kind === "json" && appearance === "inline") {
+    return (
+      <JsonEditor
+        value={value}
+        onChange={onChange}
+        disabled={disabled}
+        autoFocus={autoFocus}
+        className={resolvedClassName}
+        onSave={onSave}
+        onCancel={onCancel}
+      />
+    );
+  }
+
   if (input.kind === "textarea" || input.kind === "json") {
     return (
       <textarea

From 19f5f1777f9ea239541e01a1a7144c992f5e36dd Mon Sep 17 00:00:00 2001
From: kraysent <kraysent@gmail.com>
Date: Wed, 2 Sep 2026 23:00:39 +0100
Subject: [PATCH 3/6] fix styling

---
 apps/admin/src/pages/ReferenceDetails.tsx | 2 +-
 packages/lib/src/ui/CommonTable.tsx       | 7 +++----
 2 files changed, 4 insertions(+), 5 deletions(-)

diff --git a/apps/admin/src/pages/ReferenceDetails.tsx b/apps/admin/src/pages/ReferenceDetails.tsx
index 4aaf126..2e50c21 100644
--- a/apps/admin/src/pages/ReferenceDetails.tsx
+++ b/apps/admin/src/pages/ReferenceDetails.tsx
@@ -359,7 +359,7 @@ export function ReferenceDetailsPage(): ReactElement {
   const selectedKey = referenceTableKey(schema, table);
 
   return (
-    <div className="min-w-0 w-full max-w-full overflow-x-hidden">
+    <div className="min-w-0 w-full max-w-full">
       <div className="mb-4">
         <h2 className="text-3xl font-bold">
           {data.descriptor.description || selectedKey}
diff --git a/packages/lib/src/ui/CommonTable.tsx b/packages/lib/src/ui/CommonTable.tsx
index 1fe98e9..4a84836 100644
--- a/packages/lib/src/ui/CommonTable.tsx
+++ b/packages/lib/src/ui/CommonTable.tsx
@@ -95,7 +95,6 @@ export function CommonTable({
           {children}
         </div>
       )}
-
       <div className="relative min-w-0 max-w-full">
         <div
           className={classNames(
@@ -104,7 +103,7 @@ export function CommonTable({
             loading && "opacity-50 pointer-events-none",
           )}
         >
-          <table className="w-max min-w-full border-collapse border border-border rounded-sm">
+          <table className="w-full table-auto border-collapse border border-border rounded-sm">
             <thead>
               <tr className="bg-surface-2">
                 {columns.map((column) => {
@@ -113,7 +112,7 @@ export function CommonTable({
                     <th
                       key={column.slug}
                       className={classNames(
-                        "border border-border px-2 py-1 text-center font-semibold text-primary",
+                        "border border-border px-2 py-1 text-center font-semibold text-primary whitespace-nowrap",
                         columnHeaderClassName,
                         columnWidthClassName(column.width),
                       )}
@@ -147,7 +146,7 @@ export function CommonTable({
                       <td
                         key={column.slug}
                         className={classNames(
-                          "border border-border px-2 py-1 align-top",
+                          "min-w-0 border border-border px-2 py-1 align-top [overflow-wrap:anywhere]",
                           cellClassName,
                           columnWidthClassName(column.width),
                         )}

From b023ccb1afe7c5ac5d67b7226c3246c5b96e0f4c Mon Sep 17 00:00:00 2001
From: kraysent <kraysent@gmail.com>
Date: Wed, 2 Sep 2026 23:02:37 +0100
Subject: [PATCH 4/6] support windows for shortcuts

---
 apps/admin/src/components/ui/EditableField.tsx | 12 +++++++++++-
 apps/admin/src/components/ui/FieldInput.tsx    |  2 +-
 2 files changed, 12 insertions(+), 2 deletions(-)

diff --git a/apps/admin/src/components/ui/EditableField.tsx b/apps/admin/src/components/ui/EditableField.tsx
index 451404b..cb78348 100644
--- a/apps/admin/src/components/ui/EditableField.tsx
+++ b/apps/admin/src/components/ui/EditableField.tsx
@@ -30,6 +30,13 @@ export interface StringEditableFieldProps extends Omit<
   input?: FieldInputConfig;
 }
 
+function multilineSaveShortcutLabel(): string {
+  if (!("navigator" in globalThis)) {
+    return "Ctrl+Enter";
+  }
+  return /Mac|iPod|iPhone|iPad/.test(navigator.platform) ? "⌘↵" : "Ctrl+Enter";
+}
+
 function EditableFieldInner<T>({
   value,
   formatValue,
@@ -51,6 +58,7 @@ function EditableFieldInner<T>({
   const [editing, setEditing] = useState(false);
   const [draft, setDraft] = useState(() => formatValue(value));
   const [error, setError] = useState<string | null>(null);
+  const multilineSaveShortcut = multilineSaveShortcutLabel();
 
   function valueIsEmpty(nextValue: T): boolean {
     if (isEmpty) {
@@ -134,7 +142,9 @@ function EditableFieldInner<T>({
 
   if (editing) {
     const saveShortcut =
-      input.kind === "textarea" || input.kind === "json" ? "⌘↵" : "↵";
+      input.kind === "textarea" || input.kind === "json"
+        ? multilineSaveShortcut
+        : "↵";
 
     return (
       <div className="min-w-0">
diff --git a/apps/admin/src/components/ui/FieldInput.tsx b/apps/admin/src/components/ui/FieldInput.tsx
index 5313ca1..e90d5b1 100644
--- a/apps/admin/src/components/ui/FieldInput.tsx
+++ b/apps/admin/src/components/ui/FieldInput.tsx
@@ -99,7 +99,7 @@ function handleMultilineKeyDown(
     onCancel();
     return;
   }
-  if (event.key === "Enter" && event.metaKey && onSave) {
+  if (event.key === "Enter" && (event.metaKey || event.ctrlKey) && onSave) {
     event.preventDefault();
     onSave();
   }

From c22ceb53d9ecc046256ecf9b89e6ffc703f7951d Mon Sep 17 00:00:00 2001
From: kraysent <kraysent@gmail.com>
Date: Wed, 2 Sep 2026 23:06:33 +0100
Subject: [PATCH 5/6] make monaco editor more usable

---
 apps/admin/src/components/ui/FieldInput.tsx | 31 +++++++++++++++++++--
 1 file changed, 28 insertions(+), 3 deletions(-)

diff --git a/apps/admin/src/components/ui/FieldInput.tsx b/apps/admin/src/components/ui/FieldInput.tsx
index e90d5b1..7fd827f 100644
--- a/apps/admin/src/components/ui/FieldInput.tsx
+++ b/apps/admin/src/components/ui/FieldInput.tsx
@@ -12,6 +12,8 @@ import type * as Monaco from "monaco-editor";
 import { SuggestibleInput, useTheme } from "@leda/lib/ui";
 
 const SEARCH_DEBOUNCE_MS = 300;
+const JSON_EDITOR_LIGHT_THEME = "leda-json-light";
+const JSON_EDITOR_DARK_THEME = "leda-json-dark";
 
 export interface FieldOption {
   value: string;
@@ -128,6 +130,11 @@ function JsonEditor({
   const onSaveRef = useRef(onSave);
   const onCancelRef = useRef(onCancel);
   const height = `${(value.split("\n").length + 1) * 20 + 8}px`;
+  const widestLineLength = Math.max(
+    1,
+    ...value.split("\n").map((line) => line.length),
+  );
+  const minWidth = `calc(${widestLineLength}ch + 16px)`;
 
   onSaveRef.current = onSave;
   onCancelRef.current = onCancel;
@@ -135,15 +142,33 @@ function JsonEditor({
   return (
     <div
       className={classNames(className, "overflow-hidden p-0")}
-      style={{ height }}
+      style={{ height, minWidth }}
       onClick={(event) => event.stopPropagation()}
     >
       <Editor
         height="100%"
         language="json"
-        theme={effectiveTheme === "dark" ? "vs-dark" : "vs"}
+        theme={
+          effectiveTheme === "dark"
+            ? JSON_EDITOR_DARK_THEME
+            : JSON_EDITOR_LIGHT_THEME
+        }
         value={value}
         onChange={(nextValue) => onChange(nextValue ?? "")}
+        beforeMount={(monaco: typeof Monaco) => {
+          monaco.editor.defineTheme(JSON_EDITOR_LIGHT_THEME, {
+            base: "vs",
+            inherit: true,
+            colors: { "editor.background": "#00000000" },
+            rules: [],
+          });
+          monaco.editor.defineTheme(JSON_EDITOR_DARK_THEME, {
+            base: "vs-dark",
+            inherit: true,
+            colors: { "editor.background": "#00000000" },
+            rules: [],
+          });
+        }}
         onMount={(editor, monaco: typeof Monaco) => {
           if (autoFocus) {
             editor.focus();
@@ -165,7 +190,7 @@ function JsonEditor({
           overviewRulerLanes: 0,
           renderLineHighlight: "none",
           scrollBeyondLastLine: false,
-          wordWrap: "on",
+          wordWrap: "off",
           automaticLayout: true,
           tabSize: 2,
           padding: { top: 4, bottom: 4 },

From 1cad57df49b6dd6c8e9fca44028e253b979daf40 Mon Sep 17 00:00:00 2001
From: kraysent <kraysent@gmail.com>
Date: Wed, 2 Sep 2026 23:13:53 +0100
Subject: [PATCH 6/6] only refresh the cell that was edited

---
 .../admin/src/components/ui/EditableField.tsx | 27 ++++---
 apps/admin/src/pages/ReferenceDetails.tsx     |  1 -
 apps/admin/src/pages/TableDetails.tsx         | 80 ++++++++-----------
 3 files changed, 53 insertions(+), 55 deletions(-)

diff --git a/apps/admin/src/components/ui/EditableField.tsx b/apps/admin/src/components/ui/EditableField.tsx
index cb78348..9c97007 100644
--- a/apps/admin/src/components/ui/EditableField.tsx
+++ b/apps/admin/src/components/ui/EditableField.tsx
@@ -56,9 +56,11 @@ function EditableFieldInner<T>({
   isUnchanged,
 }: EditableFieldProps<T>): ReactElement {
   const [editing, setEditing] = useState(false);
+  const [savedValue, setSavedValue] = useState<T | undefined>(undefined);
   const [draft, setDraft] = useState(() => formatValue(value));
   const [error, setError] = useState<string | null>(null);
   const multilineSaveShortcut = multilineSaveShortcutLabel();
+  const displayValue = savedValue ?? value;
 
   function valueIsEmpty(nextValue: T): boolean {
     if (isEmpty) {
@@ -74,21 +76,25 @@ function EditableFieldInner<T>({
     return formatValue(nextValue);
   }
 
+  useEffect(() => {
+    setSavedValue(undefined);
+  }, [value]);
+
   useEffect(() => {
     if (!editing) {
-      setDraft(formatValue(value));
+      setDraft(formatValue(displayValue));
       setError(null);
     }
-  }, [value, editing, formatValue]);
+  }, [displayValue, editing, formatValue]);
 
   function startEdit(): void {
-    setDraft(formatValue(value));
+    setDraft(formatValue(displayValue));
     setError(null);
     setEditing(true);
   }
 
   function cancelEdit(): void {
-    setDraft(formatValue(value));
+    setDraft(formatValue(displayValue));
     setError(null);
     setEditing(false);
   }
@@ -96,8 +102,8 @@ function EditableFieldInner<T>({
   async function handleSave(): Promise<void> {
     const nextDraft = trimOnCommit ? draft.trim() : draft;
     const changed = isUnchanged
-      ? !isUnchanged(nextDraft, value)
-      : nextDraft !== formatValue(value);
+      ? !isUnchanged(nextDraft, displayValue)
+      : nextDraft !== formatValue(displayValue);
 
     if (!changed) {
       setEditing(false);
@@ -105,14 +111,17 @@ function EditableFieldInner<T>({
       return;
     }
 
+    const parsed = parseDraft(nextDraft);
+
     try {
-      await onSave(parseDraft(nextDraft));
+      await onSave(parsed);
+      setSavedValue(parsed);
       setEditing(false);
       setError(null);
     } catch (err) {
       setError(formatCaughtError(err));
       if (revertOnError) {
-        setDraft(formatValue(value));
+        setDraft(formatValue(displayValue));
       }
     }
   }
@@ -180,7 +189,7 @@ function EditableFieldInner<T>({
         align === "start" ? "items-start" : "items-center",
       )}
     >
-      <div className="min-w-0 flex-1">{renderValue(value)}</div>
+      <div className="min-w-0 flex-1">{renderValue(displayValue)}</div>
       <button
         type="button"
         aria-label={editLabel}
diff --git a/apps/admin/src/pages/ReferenceDetails.tsx b/apps/admin/src/pages/ReferenceDetails.tsx
index 2e50c21..12aa641 100644
--- a/apps/admin/src/pages/ReferenceDetails.tsx
+++ b/apps/admin/src/pages/ReferenceDetails.tsx
@@ -228,7 +228,6 @@ export function ReferenceDetailsPage(): ReactElement {
       if (response.error) {
         throw new Error(formatApiError(response.error));
       }
-      setRefreshKey((key) => key + 1);
     } catch (err) {
       setPatchError(formatCaughtError(err));
       throw err;
diff --git a/apps/admin/src/pages/TableDetails.tsx b/apps/admin/src/pages/TableDetails.tsx
index 8930e84..937ae6d 100644
--- a/apps/admin/src/pages/TableDetails.tsx
+++ b/apps/admin/src/pages/TableDetails.tsx
@@ -158,7 +158,6 @@ function renderMetadataDisplay(
 interface TableMetaProps {
   tableName: string;
   table: GetTableResponse;
-  onAfterPatch: () => void;
   className?: string;
 }
 
@@ -169,6 +168,17 @@ function TableMeta(props: TableMetaProps): ReactElement {
     "name" | "description" | "datatype" | "status" | null
   >(null);
   const [patchError, setPatchError] = useState<string | null>(null);
+  const [datatype, setDatatype] = useState(() =>
+    asDataType(String(props.table.meta.datatype)),
+  );
+  const [status, setStatus] = useState(() =>
+    asTableStatus(String(props.table.meta.status)),
+  );
+
+  useEffect(() => {
+    setDatatype(asDataType(String(props.table.meta.datatype)));
+    setStatus(asTableStatus(String(props.table.meta.status)));
+  }, [props.table.meta.datatype, props.table.meta.status]);
 
   async function runTablePatch(
     field: "name" | "description" | "datatype" | "status",
@@ -179,7 +189,7 @@ function TableMeta(props: TableMetaProps): ReactElement {
       datatype?: DataType;
       status?: TableStatus;
     },
-    onSuccess: () => void,
+    onSuccess?: () => void,
   ): Promise<void> {
     setPatchError(null);
     setSavingField(field);
@@ -191,7 +201,7 @@ function TableMeta(props: TableMetaProps): ReactElement {
       if (response.error) {
         throw new Error(JSON.stringify(response.error));
       }
-      onSuccess();
+      onSuccess?.();
     } catch (err) {
       setPatchError(formatCaughtError(err));
       throw err;
@@ -217,19 +227,14 @@ function TableMeta(props: TableMetaProps): ReactElement {
   }
 
   async function commitDescription(trimmed: string): Promise<void> {
-    await runTablePatch(
-      "description",
-      {
-        table_name: props.tableName,
-        description: trimmed,
-      },
-      () => props.onAfterPatch(),
-    );
+    await runTablePatch("description", {
+      table_name: props.tableName,
+      description: trimmed,
+    });
   }
 
   async function commitDatatype(next: DataType): Promise<void> {
-    const current = asDataType(String(props.table.meta.datatype));
-    if (next === current) {
+    if (next === datatype) {
       return;
     }
     await runTablePatch(
@@ -238,13 +243,12 @@ function TableMeta(props: TableMetaProps): ReactElement {
         table_name: props.tableName,
         datatype: next,
       },
-      () => props.onAfterPatch(),
+      () => setDatatype(next),
     );
   }
 
   async function commitStatus(next: TableStatus): Promise<void> {
-    const current = asTableStatus(String(props.table.meta.status));
-    if (next === current) {
+    if (next === status) {
       return;
     }
     await runTablePatch(
@@ -253,13 +257,13 @@ function TableMeta(props: TableMetaProps): ReactElement {
         table_name: props.tableName,
         status: next,
       },
-      () => props.onAfterPatch(),
+      () => setStatus(next),
     );
   }
 
   const datatypeControl = canEdit ? (
     <select
-      value={asDataType(String(props.table.meta.datatype))}
+      value={datatype}
       onChange={(event) => void commitDatatype(asDataType(event.target.value))}
       disabled={savingField !== null}
       className="bg-surface-2 border border-border rounded px-2 py-1 text-primary max-w-xs"
@@ -271,14 +275,12 @@ function TableMeta(props: TableMetaProps): ReactElement {
       ))}
     </select>
   ) : (
-    String(props.table.meta.datatype)
+    datatype.charAt(0).toUpperCase() + datatype.slice(1)
   );
 
-  const tableStatus = asTableStatus(String(props.table.meta.status));
-
   const statusControl = canEdit ? (
     <select
-      value={tableStatus}
+      value={status}
       onChange={(event) => void commitStatus(asTableStatus(event.target.value))}
       disabled={savingField !== null}
       className="bg-surface-2 border border-border rounded px-2 py-1 text-primary max-w-xs"
@@ -290,7 +292,7 @@ function TableMeta(props: TableMetaProps): ReactElement {
       ))}
     </select>
   ) : (
-    tableStatus.charAt(0).toUpperCase() + tableStatus.slice(1)
+    status.charAt(0).toUpperCase() + status.slice(1)
   );
 
   return (
@@ -498,7 +500,6 @@ function CatalogProgressCard({
 interface ColumnInfoProps {
   tableName: string;
   table: GetTableResponse;
-  onAfterPatch: () => void;
 }
 
 const COLUMN_SELECT_KEY = "";
@@ -579,7 +580,6 @@ function ColumnInfo(props: ColumnInfoProps): ReactElement {
       if (response.error) {
         throw new Error(JSON.stringify(response.error));
       }
-      props.onAfterPatch();
     } catch (err) {
       setPatchError(formatCaughtError(err));
       throw err;
@@ -736,57 +736,47 @@ async function fetcher(
 
 export function TableDetailsPage(): ReactElement {
   const { tableName } = useParams<{ tableName: string }>();
-  const [refreshKey, setRefreshKey] = useState(0);
 
   useEffect(() => {
     document.title = tableName ? `${tableName} | LEDA` : "Table | LEDA";
   }, [tableName]);
 
   const {
-    data: payload,
+    data: table,
     loading,
     error,
-  } = useDataFetching(() => fetcher(tableName), [tableName, refreshKey]);
-
-  function onAfterPatch(): void {
-    setRefreshKey((key) => key + 1);
-  }
+  } = useDataFetching(() => fetcher(tableName), [tableName]);
 
   if (loading) return <Loading />;
   if (error) return <ErrorPage message={error} />;
-  if (!payload) return <ErrorPage message="Unknown error" />;
+  if (!table) return <ErrorPage message="Unknown error" />;
 
   return (
     <div className="space-y-5">
       <div className="grid grid-cols-1 lg:grid-cols-6 gap-5">
         <TableMeta
           tableName={tableName ?? ""}
-          table={payload}
-          onAfterPatch={onAfterPatch}
+          table={table}
           className="lg:col-span-6"
         />
         <TableProgressSummaryCard
-          progress={payload.progress}
+          progress={table.progress}
           tableName={tableName ?? ""}
           className={
-            Object.keys(payload.progress.catalogs).length > 0
+            Object.keys(table.progress.catalogs).length > 0
               ? "lg:col-span-3"
               : "lg:col-span-6"
           }
         />
-        {Object.keys(payload.progress.catalogs).length > 0 ? (
+        {Object.keys(table.progress.catalogs).length > 0 ? (
           <CatalogProgressCard
-            catalogs={payload.progress.catalogs}
-            totalRecords={payload.progress.total_records}
+            catalogs={table.progress.catalogs}
+            totalRecords={table.progress.total_records}
             className="lg:col-span-3"
           />
         ) : null}
       </div>
-      <ColumnInfo
-        tableName={tableName ?? ""}
-        table={payload}
-        onAfterPatch={onAfterPatch}
-      />
+      <ColumnInfo tableName={tableName ?? ""} table={table} />
     </div>
   );
 }