From 14680238b83d5104c80b011c80dbd2269afbcbd3 Mon Sep 17 00:00:00 2001
From: t8y2 <1156263951@qq.com>
Date: Mon, 11 May 2026 01:08:07 +0800
Subject: [PATCH] feat: editor enhancements, DataGrid refactor, and sidebar
 improvements
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- Add bracket auto-close and matching to SQL editor (closeBrackets, bracketMatching)
- Show truncation warning banner when query results exceed 10,000 rows
- Extract shared export format functions (CSV/JSON/SQL INSERT) to lib/exportFormats.ts
- Add progressive rendering to sidebar tree (50-node cap with "show more")
- Fix connection node expanding before connect succeeds
- Split DataGrid.vue (3177→2535 lines) into 4 composables:
  useDataGridExport, useDataGridColumnResize, useDataGridSelection, useDataGridEditor
---
 package.json                               |   1 +
 pnpm-lock.yaml                             |   3 +
 src/components/editor/QueryEditor.vue      |   8 +-
 src/components/grid/DataGrid.vue           | 961 ++++-----------------
 src/components/sidebar/ConnectionTree.vue  |  27 +-
 src/components/sidebar/TreeItem.vue        |  45 +-
 src/composables/useDataGridColumnResize.ts | 125 +++
 src/composables/useDataGridEditor.ts       | 551 ++++++++++++
 src/composables/useDataGridExport.ts       | 257 ++++++
 src/composables/useDataGridSelection.ts    | 124 +++
 src/i18n/locales/en.ts                     |   1 +
 src/i18n/locales/zh-CN.ts                  |   1 +
 src/lib/exportFormats.ts                   |  39 +
 13 files changed, 1304 insertions(+), 839 deletions(-)
 create mode 100644 src/composables/useDataGridColumnResize.ts
 create mode 100644 src/composables/useDataGridEditor.ts
 create mode 100644 src/composables/useDataGridExport.ts
 create mode 100644 src/composables/useDataGridSelection.ts
 create mode 100644 src/lib/exportFormats.ts

diff --git a/package.json b/package.json
index 206f8ef9a..6d7be9806 100644
--- a/package.json
+++ b/package.json
@@ -22,6 +22,7 @@
     "@codemirror/autocomplete": "^6.20.1",
     "@codemirror/commands": "^6.10.3",
     "@codemirror/lang-sql": "^6.10.0",
+    "@codemirror/language": "^6.12.3",
     "@codemirror/state": "^6.6.0",
     "@codemirror/theme-one-dark": "^6.1.3",
     "@codemirror/view": "^6.41.1",
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index e6ab37ecc..5ae7fa3f0 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -20,6 +20,9 @@ importers:
       '@codemirror/lang-sql':
         specifier: ^6.10.0
         version: 6.10.0
+      '@codemirror/language':
+        specifier: ^6.12.3
+        version: 6.12.3
       '@codemirror/state':
         specifier: ^6.6.0
         version: 6.6.0
diff --git a/src/components/editor/QueryEditor.vue b/src/components/editor/QueryEditor.vue
index 01ba0d2b6..7a3f7b689 100644
--- a/src/components/editor/QueryEditor.vue
+++ b/src/components/editor/QueryEditor.vue
@@ -210,8 +210,9 @@ onMounted(async () => {
     { EditorState, Compartment, Prec },
     { sql, MSSQL, MySQL, PostgreSQL, SQLDialect },
     { basicSetup },
-    { autocompletion, startCompletion },
+    { autocompletion, startCompletion, closeBrackets, closeBracketsKeymap },
     { indentWithTab },
+    { bracketMatching },
   ] = await Promise.all([
     import("@codemirror/view"),
     import("@codemirror/state"),
@@ -219,6 +220,7 @@ onMounted(async () => {
     import("codemirror"),
     import("@codemirror/autocomplete"),
     import("@codemirror/commands"),
+    import("@codemirror/language"),
   ]);
   editorViewModule = { EditorView, keymap } as typeof import("@codemirror/view");
   fontThemeComp = new Compartment();
@@ -285,7 +287,9 @@ onMounted(async () => {
         override: [async (context: CompletionContext) => provideSqlCompletions(context.state, context.pos)],
       }),
       codeMirrorTheme.of(theme),
-      Prec.highest(keymap.of([indentWithTab])),
+      closeBrackets(),
+      bracketMatching(),
+      Prec.highest(keymap.of([...closeBracketsKeymap, indentWithTab])),
       runKeymap,
       wordWrapComp.of(ss.wordWrap ? EditorView.lineWrapping : []),
       EditorView.updateListener.of((update) => {
diff --git a/src/components/grid/DataGrid.vue b/src/components/grid/DataGrid.vue
index 2b76091a3..715226f32 100644
--- a/src/components/grid/DataGrid.vue
+++ b/src/components/grid/DataGrid.vue
@@ -5,7 +5,6 @@ const globalDdlOpen = ref(false);
 
 <script setup lang="ts">
 import { computed, nextTick, onUnmounted, watch } from "vue";
-import { useElementSize } from "@vueuse/core";
 import { useI18n } from "vue-i18n";
 import {
   ArrowUp,
@@ -59,36 +58,19 @@ import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@
 import { Tooltip, TooltipContent, TooltipTrigger } from "@/components/ui/tooltip";
 import DangerConfirmDialog from "@/components/editor/DangerConfirmDialog.vue";
 import type { QueryResult, ColumnInfo, DatabaseType } from "@/types/database";
-import { isTauriRuntime } from "@/lib/tauriRuntime";
 import * as api from "@/lib/api";
-import {
-  extractSelection,
-  formatSelectionAsCsv,
-  formatSelectionAsJson,
-  formatSelectionAsSqlInList,
-  formatSelectionAsTsv,
-  isCellInSelection,
-  normalizeSelectionRange,
-  type CellPosition,
-  type CellSelectionRange,
-} from "@/lib/gridSelection";
 import { buildTableSelectSql, quoteTableIdentifier } from "@/lib/tableSelectSql";
-import { buildDataGridRollbackStatements, buildDataGridSaveStatements, formatGridSqlLiteral } from "@/lib/dataGridSql";
-import {
-  matchesRowStatusFilter,
-  rowStatusFilterAfterAddingRow,
-  type RowStatus,
-  type RowStatusFilter,
-} from "@/lib/gridRowStatus";
+import { formatGridSqlLiteral } from "@/lib/dataGridSql";
+import { matchesRowStatusFilter, type RowStatus, type RowStatusFilter } from "@/lib/gridRowStatus";
 
 import { useToast } from "@/composables/useToast";
-import { useConnectionStore } from "@/stores/connectionStore";
-import { useHistoryStore } from "@/stores/historyStore";
+import { useDataGridExport } from "@/composables/useDataGridExport";
+import { useDataGridColumnResize } from "@/composables/useDataGridColumnResize";
+import { useDataGridSelection } from "@/composables/useDataGridSelection";
+import { useDataGridEditor } from "@/composables/useDataGridEditor";
 
 const { t } = useI18n();
 const { toast } = useToast();
-const connectionStore = useConnectionStore();
-const historyStore = useHistoryStore();
 
 const props = defineProps<{
   result: QueryResult;
@@ -208,9 +190,6 @@ function typeColorClass(t: string): string {
   return "text-muted-foreground";
 }
 const contextCell = ref<{ rowId: number; rowIndex: number; col: number } | null>(null);
-const selectionAnchor = ref<CellPosition | null>(null);
-const selectionFocus = ref<CellPosition | null>(null);
-const isSelectingCells = ref(false);
 const detailCell = ref<{ rowIndex: number; col: number } | null>(null);
 const showCellDetail = ref(false);
 const transposeRowIndex = ref<number | null>(null);
@@ -727,112 +706,23 @@ function onOrderByKeydown(e: KeyboardEvent) {
   }
 }
 
-const saveError = ref("");
 const isApplyingWhere = ref(false);
 const rowStatusFilter = ref<RowStatusFilter>("all");
-const columnWidths = ref<number[]>([]);
 const gridRef = ref<HTMLDivElement>();
 const headerRef = ref<HTMLDivElement>();
-const { width: gridWidth } = useElementSize(gridRef);
-
-const COL_MIN_WIDTH = 60;
-const COL_MAX_WIDTH = 400;
-const COL_CHAR_WIDTH = 8;
-const COL_HEADER_PADDING = 48;
-const COL_CELL_PADDING = 28;
-const COL_SAMPLE_ROWS = 50;
-
-function estimateTextWidth(text: string, padding: number): number {
-  return text.length * COL_CHAR_WIDTH + padding;
-}
-
-function initColumnWidths() {
-  if (columnWidths.value.length !== props.result.columns.length) {
-    const rows = props.result.rows;
-    const sampleCount = Math.min(rows.length, COL_SAMPLE_ROWS);
-    columnWidths.value = props.result.columns.map((colName, colIdx) => {
-      let maxWidth = estimateTextWidth(colName, COL_HEADER_PADDING);
-      for (let i = 0; i < sampleCount; i++) {
-        const val = rows[i]?.[colIdx];
-        if (val == null) continue;
-        const text = typeof val === "object" ? JSON.stringify(val) : String(val);
-        const displayLen = Math.min(text.length, 60);
-        const w = displayLen * COL_CHAR_WIDTH + COL_CELL_PADDING;
-        if (w > maxWidth) maxWidth = w;
-      }
-      return Math.max(COL_MIN_WIDTH, Math.min(COL_MAX_WIDTH, Math.round(maxWidth)));
-    });
-  }
-}
 
+// --- Column resize composable ---
+const { initColumnWidths, onResizeStart, autoFitColumn, columnVars, getIsResizing } = useDataGridColumnResize({
+  columns: computed(() => props.result.columns),
+  rows: computed(() => props.result.rows),
+  gridRef,
+});
 function syncHeaderScroll(e: Event) {
   if (headerRef.value) {
     headerRef.value.scrollLeft = (e.target as HTMLElement).scrollLeft;
   }
 }
 
-let isResizing = false;
-
-function onResizeStart(colIdx: number, event: MouseEvent) {
-  event.preventDefault();
-  isResizing = true;
-  const startX = event.clientX;
-  const startWidth = columnWidths.value[colIdx];
-  const onMove = (e: MouseEvent) => {
-    columnWidths.value[colIdx] = Math.max(60, startWidth + e.clientX - startX);
-  };
-  const onUp = () => {
-    document.removeEventListener("mousemove", onMove);
-    document.removeEventListener("mouseup", onUp);
-    requestAnimationFrame(() => {
-      isResizing = false;
-    });
-  };
-  document.addEventListener("mousemove", onMove);
-  document.addEventListener("mouseup", onUp);
-}
-
-function autoFitColumn(colIdx: number) {
-  const colName = props.result.columns[colIdx];
-  if (!colName) return;
-  const rows = props.result.rows;
-  const sampleCount = Math.min(rows.length, COL_SAMPLE_ROWS);
-  let maxWidth = estimateTextWidth(colName, COL_HEADER_PADDING);
-  for (let i = 0; i < sampleCount; i++) {
-    const val = rows[i]?.[colIdx];
-    if (val == null) continue;
-    const text = typeof val === "object" ? JSON.stringify(val) : String(val);
-    const displayLen = Math.min(text.length, 60);
-    const w = displayLen * COL_CHAR_WIDTH + COL_CELL_PADDING;
-    if (w > maxWidth) maxWidth = w;
-  }
-  columnWidths.value[colIdx] = Math.max(COL_MIN_WIDTH, Math.min(COL_MAX_WIDTH, Math.round(maxWidth)));
-}
-
-const ROW_NUM_WIDTH = 48;
-const baseTotalWidth = computed(() => columnWidths.value.reduce((a, b) => a + b, 0));
-const renderedColumnWidths = computed(() => {
-  const widths = columnWidths.value;
-  if (widths.length === 0) return widths;
-
-  const extraWidth = Math.max(0, gridWidth.value - ROW_NUM_WIDTH - baseTotalWidth.value);
-  if (extraWidth === 0) return widths;
-
-  const extraPerColumn = extraWidth / widths.length;
-  return widths.map((width) => width + extraPerColumn);
-});
-const totalWidth = computed(() => renderedColumnWidths.value.reduce((a, b) => a + b, 0) + ROW_NUM_WIDTH);
-
-const columnVars = computed(() => {
-  const vars: Record<string, string> = {};
-  renderedColumnWidths.value.forEach((w, i) => {
-    vars[`--col-w-${i}`] = `${w}px`;
-  });
-  vars["--row-num-w"] = `${ROW_NUM_WIDTH}px`;
-  vars["--total-w"] = `${totalWidth.value}px`;
-  return vars;
-});
-
 initColumnWidths();
 watch(() => props.result.columns.length, initColumnWidths);
 watch(
@@ -892,43 +782,70 @@ function changePageSize(size: number) {
   emit("paginate", 0, size, currentWhereInput(), currentOrderBy());
 }
 
-// --- Editing ---
+// --- Editing (composable) ---
 type CellValue = string | number | boolean | null;
-const editingCell = ref<{ rowId: number; col: number } | null>(null);
-const editValue = ref("");
-type GridScrollerRef =
-  | HTMLElement
-  | {
-      $el?: HTMLElement;
-      el?: HTMLElement | { value?: HTMLElement };
-      scrollToItem?: (index: number) => void;
-      scrollToPosition?: (position: number) => void;
-    };
 
-const scrollerRef = ref<GridScrollerRef | null>(null);
-const dirtyRows = ref<Map<number, Map<number, CellValue>>>(new Map());
-const newRows = ref<CellValue[][]>([]);
-const deletedRows = ref<Set<number>>(new Set());
-
-const dirtyRowCount = computed(() => dirtyRows.value.size);
-const newRowCount = computed(() => newRows.value.length);
-const deletedRowCount = computed(() => deletedRows.value.size);
-const pendingChangeCount = computed(() => dirtyRowCount.value + newRowCount.value + deletedRowCount.value);
-const hasPendingChanges = computed(() => pendingChangeCount.value > 0);
-
-// --- Transaction state ---
-const transactionActive = ref(false);
-const isSaving = ref(false);
-
-function enterTransaction() {
-  transactionActive.value = true;
+interface RowItem {
+  id: number;
+  sourceIndex?: number;
+  newIndex?: number;
+  data: CellValue[];
+  isNew: boolean;
+  isDeleted: boolean;
+  isDirtyCol: boolean[];
+  status: RowStatus;
 }
 
-function exitTransaction() {
-  transactionActive.value = false;
-}
+const editor = useDataGridEditor({
+  result: computed(() => props.result),
+  editable: computed(() => props.editable),
+  databaseType: computed(() => props.databaseType),
+  connectionId: computed(() => props.connectionId),
+  database: computed(() => props.database),
+  tableMeta: computed(() => props.tableMeta),
+  onExecuteSql: computed(() => props.onExecuteSql),
+  sql: computed(() => props.sql),
+  searchText,
+  whereFilterInput,
+  orderByInput,
+  rowStatusFilter,
+  getRowItem,
+  emit,
+});
 
-const useTransaction = computed(() => props.editable && !!props.connectionId && !!props.database && !!props.tableMeta);
+const {
+  editingCell,
+  editValue,
+  scrollerRef,
+  dirtyRows,
+  newRows,
+  deletedRows,
+  pendingChangeCount,
+  hasPendingChanges,
+  transactionActive,
+  isSaving,
+  saveError,
+  useTransaction,
+  enterTransaction,
+  exitTransaction,
+  startEdit,
+  commitEdit,
+  applyCellValue,
+  onEditKeydown,
+  addRow,
+  showDeleteRowConfirm,
+  requestDeleteRow,
+  confirmDeleteRow,
+  restoreRow,
+  saveChanges,
+  discardChanges,
+  rowDataWithChanges,
+  coerceCellValue,
+  resetGridVerticalScroll,
+  getResetScrollAfterResult,
+  clearResetScrollAfterResult,
+  cleanupFrames,
+} = editor;
 
 async function onToolbarRefresh() {
   if (transactionActive.value) {
@@ -971,22 +888,6 @@ const sortedRows = computed(() => {
   return indices;
 });
 
-function rowDataWithChanges(row: CellValue[], sourceIndex: number): CellValue[] {
-  const dirty = dirtyRows.value.get(sourceIndex);
-  return row.map((v, colIdx) => (dirty?.has(colIdx) ? dirty.get(colIdx)! : v));
-}
-
-interface RowItem {
-  id: number;
-  sourceIndex?: number;
-  newIndex?: number;
-  data: CellValue[];
-  isNew: boolean;
-  isDeleted: boolean;
-  isDirtyCol: boolean[];
-  status: RowStatus;
-}
-
 const displayItems = computed<RowItem[]>(() => {
   const cols = props.result.columns;
   const rows = props.result.rows;
@@ -1013,6 +914,21 @@ const displayItems = computed<RowItem[]>(() => {
   });
   return items.filter((item) => matchesRowStatusFilter(item.status, rowStatusFilter.value));
 });
+
+function getRowItem(rowId: number): RowItem | undefined {
+  return displayItems.value.find((item) => item.id === rowId);
+}
+
+const deleteRowDetails = computed(() =>
+  props.tableMeta?.tableName
+    ? t("dangerDialog.deleteRowDetails", { table: props.tableMeta.tableName })
+    : t("dangerDialog.deleteRowDetailsNoTable"),
+);
+
+function deleteSelectedRow() {
+  if (!contextCell.value) return;
+  requestDeleteRow(contextCell.value.rowId);
+}
 const hasVisibleRows = computed(() => displayItems.value.length > 0);
 const hasActiveFilter = computed(
   () => !!deferredClientSearchText.value || rowStatusFilter.value !== "all" || hasLocalColumnFilters.value,
@@ -1026,16 +942,31 @@ const isErrorResult = computed(
   () => props.result.columns.length === 1 && props.result.columns[0] === "Error" && props.result.rows.length > 0,
 );
 const errorMessage = computed(() => (isErrorResult.value ? String(props.result.rows[0]?.[0] ?? "") : ""));
-const selectedRange = computed<CellSelectionRange | null>(() => {
-  if (!selectionAnchor.value || !selectionFocus.value) return null;
-  return normalizeSelectionRange(selectionAnchor.value, selectionFocus.value);
+// --- Selection composable ---
+const selection = useDataGridSelection({
+  columns: computed(() => props.result.columns),
+  displayItems,
+  editingCell,
+  showTranspose,
+  transposeRowIndex,
+  gridRef,
 });
-const visibleSelectionRows = computed(() => displayItems.value.map((item) => item.data));
-const selectedCells = computed(() =>
-  extractSelection(props.result.columns, visibleSelectionRows.value, selectedRange.value),
-);
-const selectedCellCount = computed(() => selectedCells.value.columns.length * selectedCells.value.rows.length);
-const hasCellSelection = computed(() => selectedCellCount.value > 0);
+
+const {
+  selectedRange,
+  selectedCells,
+  selectedCellCount,
+  hasCellSelection,
+  clearCellSelection,
+  selectSingleCell,
+  selectRow,
+  finishCellSelection,
+  beginCellSelection,
+  extendCellSelection,
+  cellIsSelected,
+  selectedRangeStart,
+} = selection;
+
 const selectionSummary = computed(() => t("grid.selectedCells", { count: selectedCellCount.value }));
 const contextRowItem = computed(() => (contextCell.value ? getRowItem(contextCell.value.rowId) : undefined));
 const contextColumn = computed(() => {
@@ -1154,7 +1085,7 @@ function setDetailNull() {
 }
 
 function toggleSort(colName: string, colIdx: number) {
-  if (isResizing) return;
+  if (getIsResizing()) return;
   if (sortCol.value === colName && sortColIndex.value === colIdx) {
     if (sortDir.value === "asc") {
       sortDir.value = "desc";
@@ -1307,451 +1238,45 @@ function setRowStatusFilter(value: string) {
   rowStatusFilter.value = value as RowStatusFilter;
 }
 
-// --- Inline editor ---
-let isCancelling = false;
-let cancelScrollRestoreFrame = 0;
-let resetScrollFrame = 0;
-let resetScrollAfterResult = false;
-
-function getScrollerElement(): HTMLElement | null {
-  const scroller = scrollerRef.value;
-  if (!scroller) return null;
-  if (scroller instanceof HTMLElement) return scroller;
-  if (scroller.$el instanceof HTMLElement) return scroller.$el;
-  if (scroller.el instanceof HTMLElement) return scroller.el;
-  if (scroller.el?.value instanceof HTMLElement) return scroller.el.value;
-  return null;
-}
-
-function scrollGridToTop() {
-  const scroller = scrollerRef.value;
-  if (scroller && !(scroller instanceof HTMLElement)) {
-    scroller.scrollToItem?.(0);
-    scroller.scrollToPosition?.(0);
-  }
-
-  const el = getScrollerElement();
-  if (el) el.scrollTop = 0;
-}
-
-function resetGridVerticalScroll(afterResult = false) {
-  if (afterResult) resetScrollAfterResult = true;
-  if (resetScrollFrame) cancelAnimationFrame(resetScrollFrame);
-  scrollGridToTop();
-  nextTick(() => {
-    scrollGridToTop();
-    resetScrollFrame = requestAnimationFrame(() => {
-      scrollGridToTop();
-      resetScrollFrame = 0;
-    });
-  });
-}
-
-function preserveScrollPosition() {
-  const el = getScrollerElement();
-  if (!el) return () => {};
-  const top = el.scrollTop;
-  const left = el.scrollLeft;
-  return () => {
-    el.scrollTop = top;
-    el.scrollLeft = left;
-  };
-}
-
-function focusScrollerWithoutScrolling() {
-  const el = getScrollerElement();
-  if (!el) return;
-  if (!el.hasAttribute("tabindex")) el.setAttribute("tabindex", "-1");
-  el.focus({ preventScroll: true });
-}
-
-function focusGridWithoutScrolling() {
-  gridRef.value?.focus({ preventScroll: true });
-}
-
-function restoreScrollAcrossFrames(restoreScroll: () => void) {
-  if (cancelScrollRestoreFrame) cancelAnimationFrame(cancelScrollRestoreFrame);
-  restoreScroll();
-  nextTick(() => {
-    restoreScroll();
-    cancelScrollRestoreFrame = requestAnimationFrame(() => {
-      restoreScroll();
-      cancelScrollRestoreFrame = requestAnimationFrame(() => {
-        restoreScroll();
-        cancelScrollRestoreFrame = 0;
-        isCancelling = false;
-      });
-    });
-  });
-}
-
-function getRowItem(rowId: number): RowItem | undefined {
-  return displayItems.value.find((item) => item.id === rowId);
-}
-
-function coerceCellValue(value: string, oldVal: CellValue | undefined): CellValue {
-  if (value.toUpperCase() === "NULL") return null;
-  if (value === "" && isNull(oldVal)) return null;
-  if (typeof oldVal === "number") {
-    const num = Number(value);
-    if (!Number.isNaN(num)) return num;
-  }
-  if (typeof oldVal === "boolean") {
-    return value === "true" || value === "1";
-  }
-  return value;
-}
-
-function startEdit(rowId: number, colIdx: number) {
-  if (!props.editable) return;
-  const item = getRowItem(rowId);
-  if (!item || item.isDeleted) return;
-  isCancelling = false;
-  editingCell.value = { rowId, col: colIdx };
-  const val = item?.data[colIdx] ?? null;
-  editValue.value = val === null ? "" : typeof val === "object" ? JSON.stringify(val) : String(val);
-  nextTick(() => {
-    const input = document.querySelector(".cell-edit-input") as HTMLInputElement;
-    input?.focus();
-    input?.select();
-  });
-}
-
-function commitEdit() {
-  if (isCancelling) return;
-  if (!editingCell.value) return;
-  const { rowId, col } = editingCell.value;
-  const item = getRowItem(rowId);
-  if (!item || item.isDeleted) {
-    editingCell.value = null;
-    return;
-  }
-
-  if (item.isNew && item.newIndex !== undefined) {
-    const oldVal = newRows.value[item.newIndex]?.[col];
-    const newVal = coerceCellValue(editValue.value, oldVal);
-    if (newRows.value[item.newIndex]) {
-      newRows.value[item.newIndex][col] = newVal;
-    }
-    editingCell.value = null;
-    return;
-  }
-
-  if (item.sourceIndex === undefined) {
-    editingCell.value = null;
-    return;
-  }
-
-  const oldVal = props.result.rows[item.sourceIndex]?.[col];
-  const newVal = coerceCellValue(editValue.value, oldVal);
-  if (newVal !== oldVal) {
-    if (!dirtyRows.value.has(item.sourceIndex)) dirtyRows.value.set(item.sourceIndex, new Map());
-    dirtyRows.value.get(item.sourceIndex)!.set(col, newVal);
-    // Enter transaction mode on first edit
-    if (useTransaction.value && !transactionActive.value) {
-      enterTransaction();
-    }
-  } else {
-    const rowChanges = dirtyRows.value.get(item.sourceIndex);
-    rowChanges?.delete(col);
-    if (rowChanges?.size === 0) dirtyRows.value.delete(item.sourceIndex);
-  }
-  editingCell.value = null;
-}
-
-function applyCellValue(rowId: number, col: number, value: string | null) {
-  const item = getRowItem(rowId);
-  if (!item || item.isDeleted) return;
-
-  if (item.isNew && item.newIndex !== undefined) {
-    const oldVal = newRows.value[item.newIndex]?.[col];
-    newRows.value[item.newIndex][col] = value === null ? null : coerceCellValue(value, oldVal);
-    newRows.value = [...newRows.value];
-    return;
-  }
-
-  if (item.sourceIndex === undefined) return;
-
-  const oldVal = props.result.rows[item.sourceIndex]?.[col];
-  const newVal = value === null ? null : coerceCellValue(value, oldVal);
-  if (newVal !== oldVal) {
-    if (!dirtyRows.value.has(item.sourceIndex)) dirtyRows.value.set(item.sourceIndex, new Map());
-    dirtyRows.value.get(item.sourceIndex)!.set(col, newVal);
-    if (useTransaction.value && !transactionActive.value) {
-      enterTransaction();
-    }
-  } else {
-    const rowChanges = dirtyRows.value.get(item.sourceIndex);
-    rowChanges?.delete(col);
-    if (rowChanges?.size === 0) dirtyRows.value.delete(item.sourceIndex);
-  }
-  dirtyRows.value = new Map(dirtyRows.value);
-}
-
-function cancelEdit() {
-  const restoreScroll = preserveScrollPosition();
-  isCancelling = true;
-  focusScrollerWithoutScrolling();
-  editingCell.value = null;
-  restoreScrollAcrossFrames(restoreScroll);
-}
-
-function onEditKeydown(e: KeyboardEvent) {
-  if (e.key === "Enter") {
-    e.preventDefault();
-    commitEdit();
-  } else if (e.key === "Escape") {
-    e.preventDefault();
-    e.stopPropagation();
-    cancelEdit();
-  }
-}
-
-function addRow() {
-  rowStatusFilter.value = rowStatusFilterAfterAddingRow(rowStatusFilter.value);
-  newRows.value.push(props.result.columns.map(() => null));
-  if (useTransaction.value && !transactionActive.value) {
-    enterTransaction();
-  }
-  const rowId = -newRows.value.length;
-  nextTick(() => {
-    const el = getScrollerElement();
-    if (el) el.scrollTop = el.scrollHeight;
-    startEdit(rowId, 0);
-  });
-}
-
-function applyDeleteRow(rowId: number) {
-  const item = getRowItem(rowId);
-  if (!item) return;
-  if (item.isNew && item.newIndex !== undefined) {
-    newRows.value.splice(item.newIndex, 1);
-  } else if (item.sourceIndex !== undefined) {
-    dirtyRows.value.delete(item.sourceIndex);
-    deletedRows.value.add(item.sourceIndex);
-  }
-  if (editingCell.value?.rowId === rowId) editingCell.value = null;
-  if (useTransaction.value && !transactionActive.value) {
-    enterTransaction();
-  }
-}
-
-const showDeleteRowConfirm = ref(false);
-const pendingDeleteRowId = ref<number | null>(null);
-const deleteRowDetails = computed(() =>
-  props.tableMeta?.tableName
-    ? t("dangerDialog.deleteRowDetails", { table: props.tableMeta.tableName })
-    : t("dangerDialog.deleteRowDetailsNoTable"),
-);
-
-function requestDeleteRow(rowId: number) {
-  pendingDeleteRowId.value = rowId;
-  showDeleteRowConfirm.value = true;
-}
-
-function confirmDeleteRow() {
-  if (pendingDeleteRowId.value === null) return;
-  applyDeleteRow(pendingDeleteRowId.value);
-  pendingDeleteRowId.value = null;
-}
-
-function restoreRow(rowId: number) {
-  const item = getRowItem(rowId);
-  if (item?.sourceIndex !== undefined) {
-    deletedRows.value.delete(item.sourceIndex);
-  }
-}
-
-function deleteSelectedRow() {
-  if (!contextCell.value) return;
-  requestDeleteRow(contextCell.value.rowId);
-}
-
-function saveStatementOptions() {
-  if (!props.tableMeta) return null;
-  return {
-    databaseType: props.databaseType,
-    tableMeta: props.tableMeta,
-    columns: props.result.columns,
-    rows: props.result.rows,
-    dirtyRows: [...dirtyRows.value.entries()].map(
-      ([rowIndex, changes]) => [rowIndex, [...changes.entries()]] as [number, Array<[number, CellValue]>],
-    ),
-    deletedRows: [...deletedRows.value],
-    newRows: newRows.value,
-  };
-}
-
-function tableHistoryTarget() {
-  if (!props.tableMeta) return "";
-  return [props.tableMeta.schema, props.tableMeta.tableName].filter(Boolean).join(".");
-}
-
-function dataChangeOperation() {
-  const operations = [
-    newRows.value.length > 0 ? "INSERT" : "",
-    dirtyRows.value.size > 0 ? "UPDATE" : "",
-    deletedRows.value.size > 0 ? "DELETE" : "",
-  ].filter(Boolean);
-  return operations.length === 1 ? operations[0] : "DATA CHANGE";
-}
-
-async function recordDataGridHistory(
-  statements: string[],
-  rollbackStatements: string[],
-  elapsed: number,
-  result?: { affected_rows?: number },
-) {
-  if (!props.connectionId || !props.database || !props.tableMeta) return;
-  const connName = connectionStore.getConfig(props.connectionId)?.name || "";
-  const details = {
-    schema: props.tableMeta.schema,
-    table: props.tableMeta.tableName,
-    inserted_rows: newRows.value.length,
-    updated_rows: dirtyRows.value.size,
-    deleted_rows: deletedRows.value.size,
-    statements,
-    rollback_statements: rollbackStatements,
-  };
-  await historyStore.add({
-    connection_id: props.connectionId,
-    connection_name: connName,
-    database: props.database,
-    sql: statements.join("\n"),
-    execution_time_ms: elapsed,
-    success: true,
-    activity_kind: "data_change",
-    operation: dataChangeOperation(),
-    target: tableHistoryTarget(),
-    affected_rows: result?.affected_rows ?? statements.length,
-    rollback_sql: rollbackStatements.length ? rollbackStatements.join("\n") : undefined,
-    details_json: JSON.stringify(details),
-  });
-}
-
-async function saveChanges() {
-  const options = saveStatementOptions();
-  const stmts = options ? buildDataGridSaveStatements(options) : [];
-  if (stmts.length === 0) return;
-  const rollbackStmts = options ? buildDataGridRollbackStatements(options) : [];
-  saveError.value = "";
-  isSaving.value = true;
-  const start = Date.now();
-  let result: { affected_rows?: number } | undefined;
-
-  if (useTransaction.value && props.connectionId && props.database) {
-    try {
-      result = await api.executeInTransaction(props.connectionId, props.database, stmts, props.tableMeta?.schema);
-    } catch (e: any) {
-      saveError.value = String(e.message || e);
-      isSaving.value = false;
-      return;
-    }
-  } else if (props.connectionId && props.database) {
-    try {
-      result = await api.executeBatch(props.connectionId, props.database, stmts);
-    } catch (e: any) {
-      saveError.value = String(e.message || e);
-      isSaving.value = false;
-      return;
-    }
-  } else if (props.onExecuteSql) {
-    try {
-      for (const sql of stmts) {
-        await props.onExecuteSql(sql);
-      }
-    } catch (e: any) {
-      saveError.value = String(e.message || e);
-      isSaving.value = false;
-      return;
-    }
-  }
-  try {
-    await recordDataGridHistory(stmts, rollbackStmts, Date.now() - start, result);
-  } catch (e) {
-    console.warn("[DBX] failed to record data grid history", e);
-  }
-  dirtyRows.value.clear();
-  newRows.value = [];
-  deletedRows.value.clear();
-  exitTransaction();
-  isSaving.value = false;
-  emit(
-    "reload",
-    props.sql,
-    searchText.value,
-    whereFilterInput.value.trim() || undefined,
-    orderByInput.value.trim() || undefined,
-  );
-}
-
-function discardChanges() {
-  dirtyRows.value.clear();
-  newRows.value = [];
-  deletedRows.value.clear();
-  editingCell.value = null;
-  exitTransaction();
-}
+// --- Export composable ---
+const {
+  copyText,
+  copyCell,
+  copyRow,
+  copyRowAsInsert,
+  copyAll,
+  copySelectionTsv,
+  copySelectionCsv,
+  copySelectionJson,
+  copySelectionSqlInList,
+  exportCsv,
+  exportJson,
+  exportMarkdown,
+  exportXlsx,
+  copySql,
+} = useDataGridExport({
+  columns: computed(() => props.result.columns),
+  displayItems,
+  sql: computed(() => props.sql),
+  tableMeta: computed(() =>
+    props.tableMeta ? { schema: props.tableMeta.schema, tableName: props.tableMeta.tableName } : undefined,
+  ),
+  databaseType: computed(() => props.databaseType),
+  hasCellSelection,
+  selectedCells,
+  contextCell,
+  getRowItem,
+  formatCell,
+  quoteIdent,
+  escapeVal,
+});
 
 // --- Cell selection and detail ---
-function clearCellSelection() {
-  selectionAnchor.value = null;
-  selectionFocus.value = null;
-  isSelectingCells.value = false;
-}
-
-function selectSingleCell(rowIndex: number, colIndex: number) {
-  const cell = { rowIndex, colIndex };
-  selectionAnchor.value = cell;
-  selectionFocus.value = cell;
-}
-
-function selectRow(rowIndex: number) {
-  if (props.result.columns.length === 0) return;
-  selectionAnchor.value = { rowIndex, colIndex: 0 };
-  selectionFocus.value = { rowIndex, colIndex: props.result.columns.length - 1 };
-}
-
-function finishCellSelection() {
-  isSelectingCells.value = false;
-  document.removeEventListener("mouseup", finishCellSelection);
-}
-
-function beginCellSelection(rowIndex: number, colIndex: number, event: MouseEvent) {
-  if (event.button !== 0) return;
-  if (editingCell.value) return;
-  event.preventDefault();
-  focusGridWithoutScrolling();
-  selectSingleCell(rowIndex, colIndex);
-  isSelectingCells.value = true;
-  if (showTranspose.value) transposeRowIndex.value = rowIndex;
-  document.addEventListener("mouseup", finishCellSelection);
-}
-
-function extendCellSelection(rowIndex: number, colIndex: number) {
-  if (!isSelectingCells.value || !selectionAnchor.value) return;
-  selectionFocus.value = { rowIndex, colIndex };
-}
-
-function cellIsSelected(rowIndex: number, colIndex: number): boolean {
-  return isCellInSelection(rowIndex, colIndex, selectedRange.value);
-}
-
 function showCellDetails(rowIndex: number, colIndex: number) {
   detailCell.value = { rowIndex, col: colIndex };
   showCellDetail.value = true;
 }
 
-function copyText(text: string) {
-  navigator.clipboard.writeText(text);
-  toast(t("grid.copied"));
-}
-
-function copySelectionTsv() {
-  if (!hasCellSelection.value) return;
-  copyText(formatSelectionAsTsv(selectedCells.value));
-}
-
 function eventTargetAllowsNativeClipboard(event: KeyboardEvent): boolean {
   const target = event.target as HTMLElement | null;
   return !!target?.closest("input, textarea, [contenteditable='true'], [role='textbox']");
@@ -1761,12 +1286,6 @@ function clipboardShortcut(event: KeyboardEvent, key: string): boolean {
   return (event.metaKey || event.ctrlKey) && !event.altKey && event.key.toLowerCase() === key;
 }
 
-function selectedRangeStart(): CellPosition | null {
-  const range = selectedRange.value;
-  if (!range) return null;
-  return { rowIndex: range.startRow, colIndex: range.startCol };
-}
-
 function parseClipboardTable(text: string): string[][] {
   const normalized = text.replace(/\r\n/g, "\n").replace(/\r/g, "\n").replace(/\n$/, "");
   if (!normalized) return [[""]];
@@ -1826,21 +1345,6 @@ async function onGridKeydown(event: KeyboardEvent) {
   }
 }
 
-function copySelectionCsv() {
-  if (!hasCellSelection.value) return;
-  copyText(formatSelectionAsCsv(selectedCells.value));
-}
-
-function copySelectionJson() {
-  if (!hasCellSelection.value) return;
-  copyText(formatSelectionAsJson(selectedCells.value));
-}
-
-function copySelectionSqlInList() {
-  if (!hasCellSelection.value) return;
-  copyText(formatSelectionAsSqlInList(selectedCells.value));
-}
-
 function copyDetailValue() {
   if (!activeCellDetail.value) return;
   copyText(activeCellDetail.value.rawValue);
@@ -1889,8 +1393,8 @@ function transposeNav(delta: number) {
 watch(
   () => props.result,
   () => {
-    if (resetScrollAfterResult) {
-      resetScrollAfterResult = false;
+    if (getResetScrollAfterResult()) {
+      clearResetScrollAfterResult();
       resetGridVerticalScroll();
     }
     clearCellSelection();
@@ -1902,7 +1406,7 @@ watch(
   },
 );
 
-// --- Copy/Export ---
+// --- Context menu handlers ---
 function onCellContext(rowId: number, rowIndex: number, colIdx: number) {
   contextCell.value = { rowId, rowIndex, col: colIdx };
   if (!cellIsSelected(rowIndex, colIdx)) {
@@ -1915,168 +1419,8 @@ function onRowContext(rowId: number, rowIndex: number) {
   selectRow(rowIndex);
 }
 
-function copyCell() {
-  if (!contextCell.value || contextCell.value.col < 0) return;
-  const item = getRowItem(contextCell.value.rowId);
-  const val = item?.data[contextCell.value.col] ?? null;
-  copyText(formatCell(val));
-}
-
-function copyRow() {
-  if (!contextCell.value) return;
-  const item = getRowItem(contextCell.value.rowId);
-  if (!item) return;
-  const obj: Record<string, unknown> = {};
-  props.result.columns.forEach((col, i) => {
-    obj[col] = item.data[i];
-  });
-  copyText(JSON.stringify(obj, null, 2));
-}
-
-function copyRowAsInsert() {
-  if (!contextCell.value) return;
-  const item = getRowItem(contextCell.value.rowId);
-  if (!item) return;
-  const cols = props.result.columns.map((c) => quoteIdent(c)).join(", ");
-  const vals = item.data.map((v) => escapeVal(v)).join(", ");
-  const table = props.tableMeta
-    ? (props.tableMeta.schema ? `${quoteIdent(props.tableMeta.schema)}.` : "") + quoteIdent(props.tableMeta.tableName)
-    : "table_name";
-  copyText(`INSERT INTO ${table} (${cols}) VALUES (${vals});`);
-}
-
-function copyAll() {
-  const header = props.result.columns.join("\t");
-  const body = displayItems.value.map((item) => item.data.map((c) => formatCell(c)).join("\t")).join("\n");
-  copyText(`${header}\n${body}`);
-}
-
-async function saveFileContent(
-  content: string,
-  defaultFileName: string,
-  filterName: string,
-  filterExt: string,
-): Promise<boolean> {
-  if (isTauriRuntime()) {
-    const { save } = await import("@tauri-apps/plugin-dialog");
-    const { writeTextFile } = await import("@tauri-apps/plugin-fs");
-    const path = await save({
-      defaultPath: defaultFileName,
-      filters: [{ name: filterName, extensions: [filterExt] }],
-    });
-    if (!path) return false;
-    await writeTextFile(path, "" + content);
-    return true;
-  } else {
-    const blob = new Blob(["", content], { type: "text/csv;charset=utf-8" });
-    const url = URL.createObjectURL(blob);
-    const a = document.createElement("a");
-    a.href = url;
-    a.download = defaultFileName;
-    a.click();
-    URL.revokeObjectURL(url);
-    return true;
-  }
-}
-
-async function saveBinaryFileContent(
-  content: Uint8Array,
-  defaultFileName: string,
-  filterName: string,
-  filterExt: string,
-): Promise<boolean> {
-  if (isTauriRuntime()) {
-    const { save } = await import("@tauri-apps/plugin-dialog");
-    const { writeFile } = await import("@tauri-apps/plugin-fs");
-    const path = await save({
-      defaultPath: defaultFileName,
-      filters: [{ name: filterName, extensions: [filterExt] }],
-    });
-    if (!path) return false;
-    await writeFile(path, content);
-    return true;
-  } else {
-    const blob = new Blob([content], {
-      type: "application/vnd.openxmlformats-officedocument.spreadsheetml.sheet",
-    });
-    const url = URL.createObjectURL(blob);
-    const a = document.createElement("a");
-    a.href = url;
-    a.download = defaultFileName;
-    a.click();
-    URL.revokeObjectURL(url);
-    return true;
-  }
-}
-
-async function exportCsv() {
-  try {
-    const escape = (v: string) => `"${v.replace(/"/g, '""')}"`;
-    const header = props.result.columns.map(escape).join(",");
-    const body = displayItems.value.map((item) => item.data.map((c) => escape(formatCell(c))).join(",")).join("\n");
-    if (await saveFileContent(`${header}\n${body}`, "export.csv", "CSV", "csv")) {
-      toast(t("grid.exported"));
-    }
-  } catch (e: any) {
-    toast(t("grid.exportFailed", { message: e?.message || String(e) }), 5000);
-  }
-}
-
-async function exportJson() {
-  try {
-    const data = displayItems.value.map((item) => {
-      const obj: Record<string, unknown> = {};
-      props.result.columns.forEach((col, i) => {
-        obj[col] = item.data[i];
-      });
-      return obj;
-    });
-    if (await saveFileContent(JSON.stringify(data, null, 2), "export.json", "JSON", "json")) {
-      toast(t("grid.exported"));
-    }
-  } catch (e: any) {
-    toast(t("grid.exportFailed", { message: e?.message || String(e) }), 5000);
-  }
-}
-
-async function exportMarkdown() {
-  try {
-    const cols = props.result.columns;
-    const visibleRows = displayItems.value.map((item) => item.data);
-    const { formatMarkdownTable } = await import("@/lib/markdownTable");
-    const md = formatMarkdownTable({ columns: cols, rows: visibleRows });
-    if (await saveFileContent(md, "export.md", "Markdown", "md")) {
-      toast(t("grid.exported"));
-    }
-  } catch (e: any) {
-    toast(t("grid.exportFailed", { message: e?.message || String(e) }), 5000);
-  }
-}
-
-async function exportXlsx() {
-  try {
-    const { buildXlsxWorkbook } = await import("@/lib/xlsxExport");
-    const workbook = buildXlsxWorkbook({
-      sheetName: props.tableMeta?.tableName || "Export",
-      columns: props.result.columns,
-      rows: displayItems.value.map((item) => item.data),
-    });
-    if (await saveBinaryFileContent(workbook, "export.xlsx", "Excel", "xlsx")) {
-      toast(t("grid.exported"));
-    }
-  } catch (e: any) {
-    toast(t("grid.exportFailed", { message: e?.message || String(e) }), 5000);
-  }
-}
-
 const sqlOneLiner = computed(() => props.sql?.replace(/\s+/g, " ").trim() || "");
 
-function copySql() {
-  if (!props.sql) return;
-  navigator.clipboard.writeText(props.sql);
-  toast(t("grid.copied"));
-}
-
 const showDdl = globalDdlOpen;
 const ddlContent = ref("");
 const ddlLoading = ref(false);
@@ -2170,8 +1514,7 @@ watch(
 );
 
 onUnmounted(() => {
-  if (resetScrollFrame) cancelAnimationFrame(resetScrollFrame);
-  if (cancelScrollRestoreFrame) cancelAnimationFrame(cancelScrollRestoreFrame);
+  cleanupFrames();
   onDdlResizeEnd();
   finishCellSelection();
   clearTimeout(_searchTimer);
@@ -2459,6 +1802,13 @@ defineExpose({
               {{ t("grid.rollback") }}
             </Button>
           </div>
+          <!-- Truncation warning banner -->
+          <div
+            v-if="result.truncated"
+            class="shrink-0 px-3 py-1 bg-amber-500/10 border-b border-amber-500/20 text-xs text-amber-600 dark:text-amber-400 flex items-center gap-1.5"
+          >
+            <span>{{ t("grid.truncatedHint") }}</span>
+          </div>
           <!-- Content area: table + DDL drawer -->
           <div class="flex-1 flex min-h-0 overflow-hidden">
             <div class="flex-1 flex flex-col min-w-0 overflow-hidden relative">
@@ -3072,7 +2422,8 @@ defineExpose({
     <!-- Bottom status bar -->
     <div class="flex items-center gap-2 px-3 py-1 border-t text-xs text-muted-foreground bg-muted/30 shrink-0">
       <span v-if="hasData">{{ t("grid.totalRows", { count: result.rows.length }) }}</span>
-      <span v-else>{{ t("grid.rowsAffected", { count: result.affected_rows }) }}</span>
+      <span v-if="result.truncated" class="text-amber-500 text-xs ml-1">(truncated)</span>
+      <span v-if="!hasData">{{ t("grid.rowsAffected", { count: result.affected_rows }) }}</span>
       <span>{{ result.execution_time_ms }}ms</span>
       <span v-if="hasCellSelection" class="text-foreground">{{ selectionSummary }}</span>
 
diff --git a/src/components/sidebar/ConnectionTree.vue b/src/components/sidebar/ConnectionTree.vue
index dfd32f3e3..7dc5d5fb3 100644
--- a/src/components/sidebar/ConnectionTree.vue
+++ b/src/components/sidebar/ConnectionTree.vue
@@ -145,6 +145,23 @@ const filteredNodes = computed(() => {
   return nodes;
 });
 
+const TOP_LEVEL_PAGE_SIZE = 50;
+const topLevelDisplayLimit = ref(TOP_LEVEL_PAGE_SIZE);
+
+const visibleFilteredNodes = computed(() => filteredNodes.value.slice(0, topLevelDisplayLimit.value));
+
+const hasMoreTopLevel = computed(() => filteredNodes.value.length > topLevelDisplayLimit.value);
+
+const remainingTopLevelCount = computed(() => filteredNodes.value.length - topLevelDisplayLimit.value);
+
+function showMoreTopLevel() {
+  topLevelDisplayLimit.value += TOP_LEVEL_PAGE_SIZE;
+}
+
+watch(filteredNodes, () => {
+  topLevelDisplayLimit.value = TOP_LEVEL_PAGE_SIZE;
+});
+
 const pendingRenameGroupId = ref<string | null>(null);
 
 function createNewGroup() {
@@ -227,7 +244,7 @@ function onSearchToggle(node: TreeNode) {
       </div>
     </div>
     <TreeItem
-      v-for="node in filteredNodes"
+      v-for="node in visibleFilteredNodes"
       :key="node.id"
       :node="node"
       :depth="0"
@@ -236,6 +253,14 @@ function onSearchToggle(node: TreeNode) {
       @search-toggle="onSearchToggle"
       @rename-started="pendingRenameGroupId = null"
     />
+    <div
+      v-if="hasMoreTopLevel"
+      class="flex items-center gap-1.5 py-1 px-2 cursor-pointer hover:bg-accent text-xs text-muted-foreground"
+      style="padding-left: 8px"
+      @click="showMoreTopLevel"
+    >
+      <span>{{ t("sidebar.showMore", { count: Math.min(TOP_LEVEL_PAGE_SIZE, remainingTopLevelCount) }) }}</span>
+    </div>
     <div v-if="store.treeNodes.length === 0" class="px-3 py-8 text-center text-muted-foreground text-xs">
       {{ t("sidebar.noConnections") }}
     </div>
diff --git a/src/components/sidebar/TreeItem.vue b/src/components/sidebar/TreeItem.vue
index b7e5bd531..5b7a8d123 100644
--- a/src/components/sidebar/TreeItem.vue
+++ b/src/components/sidebar/TreeItem.vue
@@ -80,6 +80,7 @@ import {
   usesFetchFirst,
 } from "@/lib/databaseCapabilities";
 import { treeNodeRowAction } from "@/lib/treeNodeClick";
+import { formatCsv, formatJson, formatSqlInsert } from "@/lib/exportFormats";
 import { hexToRgba } from "@/lib/color";
 import DangerConfirmDialog from "@/components/editor/DangerConfirmDialog.vue";
 import { isTauriRuntime } from "@/lib/tauriRuntime";
@@ -235,14 +236,10 @@ async function toggle() {
     return;
   }
 
-  const showSavedSqlWhileLoading =
-    node.type === "connection" && !node.isExpanded && node.children?.some((child) => child.type === "saved-sql-root");
-
   if (node.isExpanded) {
     node.isExpanded = false;
     return;
   }
-  if (showSavedSqlWhileLoading) node.isExpanded = true;
 
   try {
     if (node.type === "connection" && node.connectionId) {
@@ -938,38 +935,17 @@ async function exportData(format: "csv" | "json" | "sql") {
 
     if (format === "csv") {
       ext = "csv";
-      const esc = (v: string) => `"${v.replace(/"/g, '""')}"`;
-      const header = result.columns.map(esc).join(",");
-      const body = result.rows.map((row) => row.map((c) => esc(c === null ? "" : String(c))).join(",")).join("\n");
-      content = `${header}\n${body}`;
+      content = formatCsv(result.columns, result.rows);
     } else if (format === "json") {
       ext = "json";
-      const data = result.rows.map((row) => {
-        const obj: Record<string, unknown> = {};
-        result.columns.forEach((col, i) => {
-          obj[col] = row[i];
-        });
-        return obj;
-      });
-      content = JSON.stringify(data, null, 2);
+      content = formatJson(result.columns, result.rows);
     } else {
       ext = "sql";
-      const cols = result.columns.map((c) => quoteIdent(c)).join(", ");
-      const lines = result.rows.map((row) => {
-        const vals = row
-          .map((v) => {
-            if (v === null) return "NULL";
-            if (typeof v === "number" || typeof v === "boolean") return String(v);
-            return `'${String(v).replace(/'/g, "''")}'`;
-          })
-          .join(", ");
-        return `INSERT INTO ${qualifiedName} (${cols}) VALUES (${vals});`;
-      });
-      content = lines.join("\n");
+      content = formatSqlInsert(qualifiedName, result.columns, result.rows, quoteIdent);
     }
 
     await saveFileContent(content, `${node.label}.${ext}`, ext.toUpperCase(), ext);
-    toast(t("grid.exported"));
+    toast(result.truncated ? t("grid.exported") + " (truncated)" : t("grid.exported"));
   } catch (e: any) {
     toast(t("grid.exportFailed", { message: e?.message || String(e) }), 5000);
   }
@@ -996,7 +972,7 @@ async function exportDataXlsx() {
       rows: result.rows,
     });
     await saveBinaryFileContent(workbook, `${node.label}.xlsx`, "Excel", "xlsx");
-    toast(t("grid.exported"));
+    toast(result.truncated ? t("grid.exported") + " (truncated)" : t("grid.exported"));
   } catch (e: any) {
     toast(t("grid.exportFailed", { message: e?.message || String(e) }), 5000);
   }
@@ -1215,7 +1191,7 @@ const rowStyle = computed(() => {
   };
 });
 
-const CHILDREN_PAGE_SIZE = 100;
+const CHILDREN_PAGE_SIZE = 50;
 const displayLimit = ref(CHILDREN_PAGE_SIZE);
 
 const visibleChildren = computed(() => {
@@ -1231,6 +1207,13 @@ function togglePin() {
   connectionStore.toggleTreeNodePin(props.node.id);
 }
 
+watch(
+  () => props.node.isExpanded,
+  (expanded) => {
+    if (!expanded) displayLimit.value = CHILDREN_PAGE_SIZE;
+  },
+);
+
 async function showMore() {
   if ((props.node.children?.length ?? 0) > displayLimit.value) {
     displayLimit.value += CHILDREN_PAGE_SIZE;
diff --git a/src/composables/useDataGridColumnResize.ts b/src/composables/useDataGridColumnResize.ts
new file mode 100644
index 000000000..1889a139f
--- /dev/null
+++ b/src/composables/useDataGridColumnResize.ts
@@ -0,0 +1,125 @@
+import { ref, computed, type ComputedRef, type Ref } from "vue";
+import { useElementSize } from "@vueuse/core";
+
+type CellValue = string | number | boolean | null;
+
+export const COL_MIN_WIDTH = 60;
+export const COL_MAX_WIDTH = 400;
+const COL_CHAR_WIDTH = 8;
+const COL_HEADER_PADDING = 48;
+const COL_CELL_PADDING = 28;
+const COL_SAMPLE_ROWS = 50;
+const ROW_NUM_WIDTH = 48;
+
+function estimateTextWidth(text: string, padding: number): number {
+  return text.length * COL_CHAR_WIDTH + padding;
+}
+
+export interface UseDataGridColumnResizeOptions {
+  columns: ComputedRef<string[]>;
+  rows: ComputedRef<CellValue[][]>;
+  gridRef: Ref<HTMLDivElement | undefined>;
+}
+
+export function useDataGridColumnResize(options: UseDataGridColumnResizeOptions) {
+  const { columns, rows, gridRef } = options;
+
+  const columnWidths = ref<number[]>([]);
+  const { width: gridWidth } = useElementSize(gridRef);
+  let isResizing = false;
+
+  function initColumnWidths() {
+    if (columnWidths.value.length !== columns.value.length) {
+      const rowData = rows.value;
+      const sampleCount = Math.min(rowData.length, COL_SAMPLE_ROWS);
+      columnWidths.value = columns.value.map((colName, colIdx) => {
+        let maxWidth = estimateTextWidth(colName, COL_HEADER_PADDING);
+        for (let i = 0; i < sampleCount; i++) {
+          const val = rowData[i]?.[colIdx];
+          if (val == null) continue;
+          const text = typeof val === "object" ? JSON.stringify(val) : String(val);
+          const displayLen = Math.min(text.length, 60);
+          const w = displayLen * COL_CHAR_WIDTH + COL_CELL_PADDING;
+          if (w > maxWidth) maxWidth = w;
+        }
+        return Math.max(COL_MIN_WIDTH, Math.min(COL_MAX_WIDTH, Math.round(maxWidth)));
+      });
+    }
+  }
+
+  function onResizeStart(colIdx: number, event: MouseEvent) {
+    event.preventDefault();
+    isResizing = true;
+    const startX = event.clientX;
+    const startWidth = columnWidths.value[colIdx];
+    const onMove = (e: MouseEvent) => {
+      columnWidths.value[colIdx] = Math.max(60, startWidth + e.clientX - startX);
+    };
+    const onUp = () => {
+      document.removeEventListener("mousemove", onMove);
+      document.removeEventListener("mouseup", onUp);
+      requestAnimationFrame(() => {
+        isResizing = false;
+      });
+    };
+    document.addEventListener("mousemove", onMove);
+    document.addEventListener("mouseup", onUp);
+  }
+
+  function autoFitColumn(colIdx: number) {
+    const colName = columns.value[colIdx];
+    if (!colName) return;
+    const rowData = rows.value;
+    const sampleCount = Math.min(rowData.length, COL_SAMPLE_ROWS);
+    let maxWidth = estimateTextWidth(colName, COL_HEADER_PADDING);
+    for (let i = 0; i < sampleCount; i++) {
+      const val = rowData[i]?.[colIdx];
+      if (val == null) continue;
+      const text = typeof val === "object" ? JSON.stringify(val) : String(val);
+      const displayLen = Math.min(text.length, 60);
+      const w = displayLen * COL_CHAR_WIDTH + COL_CELL_PADDING;
+      if (w > maxWidth) maxWidth = w;
+    }
+    columnWidths.value[colIdx] = Math.max(COL_MIN_WIDTH, Math.min(COL_MAX_WIDTH, Math.round(maxWidth)));
+  }
+
+  const baseTotalWidth = computed(() => columnWidths.value.reduce((a, b) => a + b, 0));
+
+  const renderedColumnWidths = computed(() => {
+    const widths = columnWidths.value;
+    if (widths.length === 0) return widths;
+
+    const extraWidth = Math.max(0, gridWidth.value - ROW_NUM_WIDTH - baseTotalWidth.value);
+    if (extraWidth === 0) return widths;
+
+    const extraPerColumn = extraWidth / widths.length;
+    return widths.map((width) => width + extraPerColumn);
+  });
+
+  const totalWidth = computed(() => renderedColumnWidths.value.reduce((a, b) => a + b, 0) + ROW_NUM_WIDTH);
+
+  const columnVars = computed(() => {
+    const vars: Record<string, string> = {};
+    renderedColumnWidths.value.forEach((w, i) => {
+      vars[`--col-w-${i}`] = `${w}px`;
+    });
+    vars["--row-num-w"] = `${ROW_NUM_WIDTH}px`;
+    vars["--total-w"] = `${totalWidth.value}px`;
+    return vars;
+  });
+
+  function getIsResizing() {
+    return isResizing;
+  }
+
+  return {
+    columnWidths,
+    initColumnWidths,
+    onResizeStart,
+    autoFitColumn,
+    renderedColumnWidths,
+    totalWidth,
+    columnVars,
+    getIsResizing,
+  };
+}
diff --git a/src/composables/useDataGridEditor.ts b/src/composables/useDataGridEditor.ts
new file mode 100644
index 000000000..675f2fb88
--- /dev/null
+++ b/src/composables/useDataGridEditor.ts
@@ -0,0 +1,551 @@
+import { ref, computed, nextTick, type ComputedRef, type Ref } from "vue";
+import * as api from "@/lib/api";
+import { buildDataGridRollbackStatements, buildDataGridSaveStatements } from "@/lib/dataGridSql";
+import { rowStatusFilterAfterAddingRow, type RowStatusFilter } from "@/lib/gridRowStatus";
+import { useConnectionStore } from "@/stores/connectionStore";
+import { useHistoryStore } from "@/stores/historyStore";
+import type { ColumnInfo, DatabaseType } from "@/types/database";
+
+type CellValue = string | number | boolean | null;
+
+interface RowItem {
+  id: number;
+  sourceIndex?: number;
+  newIndex?: number;
+  data: CellValue[];
+  isNew: boolean;
+  isDeleted: boolean;
+  isDirtyCol: boolean[];
+  status: string;
+}
+
+type GridScrollerRef =
+  | HTMLElement
+  | {
+      $el?: HTMLElement;
+      el?: HTMLElement | { value?: HTMLElement };
+      scrollToItem?: (index: number) => void;
+      scrollToPosition?: (position: number) => void;
+    };
+
+export interface UseDataGridEditorOptions {
+  result: ComputedRef<{ columns: string[]; rows: CellValue[][] }>;
+  editable: ComputedRef<boolean | undefined>;
+  databaseType: ComputedRef<DatabaseType | undefined>;
+  connectionId: ComputedRef<string | undefined>;
+  database: ComputedRef<string | undefined>;
+  tableMeta: ComputedRef<
+    | {
+        schema?: string;
+        tableName: string;
+        columns: ColumnInfo[];
+        primaryKeys: string[];
+      }
+    | undefined
+  >;
+  onExecuteSql: ComputedRef<((sql: string) => Promise<void>) | undefined>;
+  sql: ComputedRef<string | undefined>;
+  searchText: Ref<string>;
+  whereFilterInput: Ref<string>;
+  orderByInput: Ref<string>;
+  rowStatusFilter: Ref<RowStatusFilter>;
+  getRowItem: (rowId: number) => RowItem | undefined;
+  emit: {
+    (event: "reload", sql?: string, searchText?: string, whereInput?: string, orderBy?: string): void;
+  };
+}
+
+export function useDataGridEditor(options: UseDataGridEditorOptions) {
+  const connectionStore = useConnectionStore();
+  const historyStore = useHistoryStore();
+
+  const {
+    result,
+    editable,
+    databaseType,
+    connectionId,
+    database,
+    tableMeta,
+    onExecuteSql,
+    sql,
+    searchText,
+    whereFilterInput,
+    orderByInput,
+    rowStatusFilter,
+    getRowItem,
+    emit,
+  } = options;
+
+  const editingCell = ref<{ rowId: number; col: number } | null>(null);
+  const editValue = ref("");
+  const scrollerRef = ref<GridScrollerRef | null>(null);
+  const dirtyRows = ref<Map<number, Map<number, CellValue>>>(new Map());
+  const newRows = ref<CellValue[][]>([]);
+  const deletedRows = ref<Set<number>>(new Set());
+
+  const dirtyRowCount = computed(() => dirtyRows.value.size);
+  const newRowCount = computed(() => newRows.value.length);
+  const deletedRowCount = computed(() => deletedRows.value.size);
+  const pendingChangeCount = computed(() => dirtyRowCount.value + newRowCount.value + deletedRowCount.value);
+  const hasPendingChanges = computed(() => pendingChangeCount.value > 0);
+
+  // --- Transaction state ---
+  const transactionActive = ref(false);
+  const isSaving = ref(false);
+  const saveError = ref("");
+
+  const useTransaction = computed(
+    () => editable.value && !!connectionId.value && !!database.value && !!tableMeta.value,
+  );
+
+  function enterTransaction() {
+    transactionActive.value = true;
+  }
+
+  function exitTransaction() {
+    transactionActive.value = false;
+  }
+
+  // --- Scroll helpers ---
+  let isCancelling = false;
+  let cancelScrollRestoreFrame = 0;
+  let resetScrollFrame = 0;
+  let resetScrollAfterResult = false;
+
+  function getScrollerElement(): HTMLElement | null {
+    const scroller = scrollerRef.value;
+    if (!scroller) return null;
+    if (scroller instanceof HTMLElement) return scroller;
+    if (scroller.$el instanceof HTMLElement) return scroller.$el;
+    if (scroller.el instanceof HTMLElement) return scroller.el;
+    if (scroller.el?.value instanceof HTMLElement) return scroller.el.value;
+    return null;
+  }
+
+  function scrollGridToTop() {
+    const scroller = scrollerRef.value;
+    if (scroller && !(scroller instanceof HTMLElement)) {
+      scroller.scrollToItem?.(0);
+      scroller.scrollToPosition?.(0);
+    }
+    const el = getScrollerElement();
+    if (el) el.scrollTop = 0;
+  }
+
+  function resetGridVerticalScroll(afterResult = false) {
+    if (afterResult) resetScrollAfterResult = true;
+    if (resetScrollFrame) cancelAnimationFrame(resetScrollFrame);
+    scrollGridToTop();
+    nextTick(() => {
+      scrollGridToTop();
+      resetScrollFrame = requestAnimationFrame(() => {
+        scrollGridToTop();
+        resetScrollFrame = 0;
+      });
+    });
+  }
+
+  function preserveScrollPosition() {
+    const el = getScrollerElement();
+    if (!el) return () => {};
+    const top = el.scrollTop;
+    const left = el.scrollLeft;
+    return () => {
+      el.scrollTop = top;
+      el.scrollLeft = left;
+    };
+  }
+
+  function focusScrollerWithoutScrolling() {
+    const el = getScrollerElement();
+    if (!el) return;
+    if (!el.hasAttribute("tabindex")) el.setAttribute("tabindex", "-1");
+    el.focus({ preventScroll: true });
+  }
+
+  function restoreScrollAcrossFrames(restoreScroll: () => void) {
+    if (cancelScrollRestoreFrame) cancelAnimationFrame(cancelScrollRestoreFrame);
+    restoreScroll();
+    nextTick(() => {
+      restoreScroll();
+      cancelScrollRestoreFrame = requestAnimationFrame(() => {
+        restoreScroll();
+        cancelScrollRestoreFrame = requestAnimationFrame(() => {
+          restoreScroll();
+          cancelScrollRestoreFrame = 0;
+          isCancelling = false;
+        });
+      });
+    });
+  }
+
+  function getResetScrollAfterResult() {
+    return resetScrollAfterResult;
+  }
+
+  function clearResetScrollAfterResult() {
+    resetScrollAfterResult = false;
+  }
+
+  function cleanupFrames() {
+    if (resetScrollFrame) cancelAnimationFrame(resetScrollFrame);
+    if (cancelScrollRestoreFrame) cancelAnimationFrame(cancelScrollRestoreFrame);
+  }
+
+  // --- Cell value coercion ---
+  function isNull(value: unknown): boolean {
+    return value === null;
+  }
+
+  function coerceCellValue(value: string, oldVal: CellValue | undefined): CellValue {
+    if (value.toUpperCase() === "NULL") return null;
+    if (value === "" && isNull(oldVal)) return null;
+    if (typeof oldVal === "number") {
+      const num = Number(value);
+      if (!Number.isNaN(num)) return num;
+    }
+    if (typeof oldVal === "boolean") {
+      return value === "true" || value === "1";
+    }
+    return value;
+  }
+
+  // --- Row data helpers ---
+  function rowDataWithChanges(row: CellValue[], sourceIndex: number): CellValue[] {
+    const dirty = dirtyRows.value.get(sourceIndex);
+    return row.map((v, colIdx) => (dirty?.has(colIdx) ? dirty.get(colIdx)! : v));
+  }
+
+  // --- Inline editing ---
+  function startEdit(rowId: number, colIdx: number) {
+    if (!editable.value) return;
+    const item = getRowItem(rowId);
+    if (!item || item.isDeleted) return;
+    isCancelling = false;
+    editingCell.value = { rowId, col: colIdx };
+    const val = item?.data[colIdx] ?? null;
+    editValue.value = val === null ? "" : typeof val === "object" ? JSON.stringify(val) : String(val);
+    nextTick(() => {
+      const input = document.querySelector(".cell-edit-input") as HTMLInputElement;
+      input?.focus();
+      input?.select();
+    });
+  }
+
+  function commitEdit() {
+    if (isCancelling) return;
+    if (!editingCell.value) return;
+    const { rowId, col } = editingCell.value;
+    const item = getRowItem(rowId);
+    if (!item || item.isDeleted) {
+      editingCell.value = null;
+      return;
+    }
+
+    if (item.isNew && item.newIndex !== undefined) {
+      const oldVal = newRows.value[item.newIndex]?.[col];
+      const newVal = coerceCellValue(editValue.value, oldVal);
+      if (newRows.value[item.newIndex]) {
+        newRows.value[item.newIndex][col] = newVal;
+      }
+      editingCell.value = null;
+      return;
+    }
+
+    if (item.sourceIndex === undefined) {
+      editingCell.value = null;
+      return;
+    }
+
+    const oldVal = result.value.rows[item.sourceIndex]?.[col];
+    const newVal = coerceCellValue(editValue.value, oldVal);
+    if (newVal !== oldVal) {
+      if (!dirtyRows.value.has(item.sourceIndex)) dirtyRows.value.set(item.sourceIndex, new Map());
+      dirtyRows.value.get(item.sourceIndex)!.set(col, newVal);
+      if (useTransaction.value && !transactionActive.value) {
+        enterTransaction();
+      }
+    } else {
+      const rowChanges = dirtyRows.value.get(item.sourceIndex);
+      rowChanges?.delete(col);
+      if (rowChanges?.size === 0) dirtyRows.value.delete(item.sourceIndex);
+    }
+    editingCell.value = null;
+  }
+
+  function applyCellValue(rowId: number, col: number, value: string | null) {
+    const item = getRowItem(rowId);
+    if (!item || item.isDeleted) return;
+
+    if (item.isNew && item.newIndex !== undefined) {
+      const oldVal = newRows.value[item.newIndex]?.[col];
+      newRows.value[item.newIndex][col] = value === null ? null : coerceCellValue(value, oldVal);
+      newRows.value = [...newRows.value];
+      return;
+    }
+
+    if (item.sourceIndex === undefined) return;
+
+    const oldVal = result.value.rows[item.sourceIndex]?.[col];
+    const newVal = value === null ? null : coerceCellValue(value, oldVal);
+    if (newVal !== oldVal) {
+      if (!dirtyRows.value.has(item.sourceIndex)) dirtyRows.value.set(item.sourceIndex, new Map());
+      dirtyRows.value.get(item.sourceIndex)!.set(col, newVal);
+      if (useTransaction.value && !transactionActive.value) {
+        enterTransaction();
+      }
+    } else {
+      const rowChanges = dirtyRows.value.get(item.sourceIndex);
+      rowChanges?.delete(col);
+      if (rowChanges?.size === 0) dirtyRows.value.delete(item.sourceIndex);
+    }
+    dirtyRows.value = new Map(dirtyRows.value);
+  }
+
+  function cancelEdit() {
+    const restoreScroll = preserveScrollPosition();
+    isCancelling = true;
+    focusScrollerWithoutScrolling();
+    editingCell.value = null;
+    restoreScrollAcrossFrames(restoreScroll);
+  }
+
+  function onEditKeydown(e: KeyboardEvent) {
+    if (e.key === "Enter") {
+      e.preventDefault();
+      commitEdit();
+    } else if (e.key === "Escape") {
+      e.preventDefault();
+      e.stopPropagation();
+      cancelEdit();
+    }
+  }
+
+  function addRow() {
+    rowStatusFilter.value = rowStatusFilterAfterAddingRow(rowStatusFilter.value);
+    newRows.value.push(result.value.columns.map(() => null));
+    if (useTransaction.value && !transactionActive.value) {
+      enterTransaction();
+    }
+    const rowId = -newRows.value.length;
+    nextTick(() => {
+      const el = getScrollerElement();
+      if (el) el.scrollTop = el.scrollHeight;
+      startEdit(rowId, 0);
+    });
+  }
+
+  function applyDeleteRow(rowId: number) {
+    const item = getRowItem(rowId);
+    if (!item) return;
+    if (item.isNew && item.newIndex !== undefined) {
+      newRows.value.splice(item.newIndex, 1);
+    } else if (item.sourceIndex !== undefined) {
+      dirtyRows.value.delete(item.sourceIndex);
+      deletedRows.value.add(item.sourceIndex);
+    }
+    if (editingCell.value?.rowId === rowId) editingCell.value = null;
+    if (useTransaction.value && !transactionActive.value) {
+      enterTransaction();
+    }
+  }
+
+  const showDeleteRowConfirm = ref(false);
+  const pendingDeleteRowId = ref<number | null>(null);
+
+  function requestDeleteRow(rowId: number) {
+    pendingDeleteRowId.value = rowId;
+    showDeleteRowConfirm.value = true;
+  }
+
+  function confirmDeleteRow() {
+    if (pendingDeleteRowId.value === null) return;
+    applyDeleteRow(pendingDeleteRowId.value);
+    pendingDeleteRowId.value = null;
+  }
+
+  function restoreRow(rowId: number) {
+    const item = getRowItem(rowId);
+    if (item?.sourceIndex !== undefined) {
+      deletedRows.value.delete(item.sourceIndex);
+    }
+  }
+
+  function deleteSelectedRow(contextCell: Ref<{ rowId: number; rowIndex: number; col: number } | null>) {
+    if (!contextCell.value) return;
+    requestDeleteRow(contextCell.value.rowId);
+  }
+
+  // --- Save/Discard ---
+  function saveStatementOptions() {
+    if (!tableMeta.value) return null;
+    return {
+      databaseType: databaseType.value,
+      tableMeta: tableMeta.value,
+      columns: result.value.columns,
+      rows: result.value.rows,
+      dirtyRows: [...dirtyRows.value.entries()].map(
+        ([rowIndex, changes]) => [rowIndex, [...changes.entries()]] as [number, Array<[number, CellValue]>],
+      ),
+      deletedRows: [...deletedRows.value],
+      newRows: newRows.value,
+    };
+  }
+
+  function tableHistoryTarget() {
+    if (!tableMeta.value) return "";
+    return [tableMeta.value.schema, tableMeta.value.tableName].filter(Boolean).join(".");
+  }
+
+  function dataChangeOperation() {
+    const operations = [
+      newRows.value.length > 0 ? "INSERT" : "",
+      dirtyRows.value.size > 0 ? "UPDATE" : "",
+      deletedRows.value.size > 0 ? "DELETE" : "",
+    ].filter(Boolean);
+    return operations.length === 1 ? operations[0] : "DATA CHANGE";
+  }
+
+  async function recordDataGridHistory(
+    statements: string[],
+    rollbackStatements: string[],
+    elapsed: number,
+    historyResult?: { affected_rows?: number },
+  ) {
+    if (!connectionId.value || !database.value || !tableMeta.value) return;
+    const connName = connectionStore.getConfig(connectionId.value)?.name || "";
+    const details = {
+      schema: tableMeta.value.schema,
+      table: tableMeta.value.tableName,
+      inserted_rows: newRows.value.length,
+      updated_rows: dirtyRows.value.size,
+      deleted_rows: deletedRows.value.size,
+      statements,
+      rollback_statements: rollbackStatements,
+    };
+    await historyStore.add({
+      connection_id: connectionId.value,
+      connection_name: connName,
+      database: database.value,
+      sql: statements.join("\n"),
+      execution_time_ms: elapsed,
+      success: true,
+      activity_kind: "data_change",
+      operation: dataChangeOperation(),
+      target: tableHistoryTarget(),
+      affected_rows: historyResult?.affected_rows ?? statements.length,
+      rollback_sql: rollbackStatements.length ? rollbackStatements.join("\n") : undefined,
+      details_json: JSON.stringify(details),
+    });
+  }
+
+  async function saveChanges() {
+    const stmtOptions = saveStatementOptions();
+    const stmts = stmtOptions ? buildDataGridSaveStatements(stmtOptions) : [];
+    if (stmts.length === 0) return;
+    const rollbackStmts = stmtOptions ? buildDataGridRollbackStatements(stmtOptions) : [];
+    saveError.value = "";
+    isSaving.value = true;
+    const start = Date.now();
+    let apiResult: { affected_rows?: number } | undefined;
+
+    if (useTransaction.value && connectionId.value && database.value) {
+      try {
+        apiResult = await api.executeInTransaction(connectionId.value, database.value, stmts, tableMeta.value?.schema);
+      } catch (e: any) {
+        saveError.value = String(e.message || e);
+        isSaving.value = false;
+        return;
+      }
+    } else if (connectionId.value && database.value) {
+      try {
+        apiResult = await api.executeBatch(connectionId.value, database.value, stmts);
+      } catch (e: any) {
+        saveError.value = String(e.message || e);
+        isSaving.value = false;
+        return;
+      }
+    } else if (onExecuteSql.value) {
+      try {
+        for (const sqlStmt of stmts) {
+          await onExecuteSql.value(sqlStmt);
+        }
+      } catch (e: any) {
+        saveError.value = String(e.message || e);
+        isSaving.value = false;
+        return;
+      }
+    }
+    try {
+      await recordDataGridHistory(stmts, rollbackStmts, Date.now() - start, apiResult);
+    } catch (e) {
+      console.warn("[DBX] failed to record data grid history", e);
+    }
+    dirtyRows.value.clear();
+    newRows.value = [];
+    deletedRows.value.clear();
+    exitTransaction();
+    isSaving.value = false;
+    emit(
+      "reload",
+      sql.value,
+      searchText.value,
+      whereFilterInput.value.trim() || undefined,
+      orderByInput.value.trim() || undefined,
+    );
+  }
+
+  function discardChanges() {
+    dirtyRows.value.clear();
+    newRows.value = [];
+    deletedRows.value.clear();
+    editingCell.value = null;
+    exitTransaction();
+  }
+
+  return {
+    editingCell,
+    editValue,
+    scrollerRef,
+    dirtyRows,
+    newRows,
+    deletedRows,
+    dirtyRowCount,
+    newRowCount,
+    deletedRowCount,
+    pendingChangeCount,
+    hasPendingChanges,
+    transactionActive,
+    isSaving,
+    saveError,
+    useTransaction,
+    enterTransaction,
+    exitTransaction,
+    startEdit,
+    commitEdit,
+    applyCellValue,
+    cancelEdit,
+    onEditKeydown,
+    addRow,
+    applyDeleteRow,
+    showDeleteRowConfirm,
+    pendingDeleteRowId,
+    requestDeleteRow,
+    confirmDeleteRow,
+    restoreRow,
+    deleteSelectedRow,
+    saveChanges,
+    discardChanges,
+    rowDataWithChanges,
+    coerceCellValue,
+    resetGridVerticalScroll,
+    getResetScrollAfterResult,
+    clearResetScrollAfterResult,
+    cleanupFrames,
+    syncHeaderScroll: (headerRef: Ref<HTMLDivElement | undefined>) => (e: Event) => {
+      if (headerRef.value) {
+        headerRef.value.scrollLeft = (e.target as HTMLElement).scrollLeft;
+      }
+    },
+  };
+}
diff --git a/src/composables/useDataGridExport.ts b/src/composables/useDataGridExport.ts
new file mode 100644
index 000000000..7af51003b
--- /dev/null
+++ b/src/composables/useDataGridExport.ts
@@ -0,0 +1,257 @@
+import type { ComputedRef, Ref } from "vue";
+import { useI18n } from "vue-i18n";
+import { isTauriRuntime } from "@/lib/tauriRuntime";
+import { formatCsv, formatJson } from "@/lib/exportFormats";
+import {
+  formatSelectionAsCsv,
+  formatSelectionAsJson,
+  formatSelectionAsSqlInList,
+  formatSelectionAsTsv,
+  type SelectionData,
+} from "@/lib/gridSelection";
+import { useToast } from "@/composables/useToast";
+
+type CellValue = string | number | boolean | null;
+
+interface RowItem {
+  id: number;
+  sourceIndex?: number;
+  newIndex?: number;
+  data: CellValue[];
+  isNew: boolean;
+  isDeleted: boolean;
+  isDirtyCol: boolean[];
+  status: string;
+}
+
+export interface UseDataGridExportOptions {
+  columns: ComputedRef<string[]>;
+  displayItems: ComputedRef<RowItem[]>;
+  sql: ComputedRef<string | undefined>;
+  tableMeta: ComputedRef<{ schema?: string; tableName: string } | undefined>;
+  databaseType: ComputedRef<string | undefined>;
+  hasCellSelection: ComputedRef<boolean>;
+  selectedCells: ComputedRef<SelectionData>;
+  contextCell: Ref<{ rowId: number; rowIndex: number; col: number } | null>;
+  getRowItem: (rowId: number) => RowItem | undefined;
+  formatCell: (value: CellValue) => string;
+  quoteIdent: (name: string) => string;
+  escapeVal: (value: CellValue) => string;
+}
+
+export function useDataGridExport(options: UseDataGridExportOptions) {
+  const { t } = useI18n();
+  const { toast } = useToast();
+
+  const {
+    columns,
+    displayItems,
+    sql,
+    tableMeta,
+    hasCellSelection,
+    selectedCells,
+    contextCell,
+    getRowItem,
+    formatCell,
+    quoteIdent,
+    escapeVal,
+  } = options;
+
+  function copyText(text: string) {
+    navigator.clipboard.writeText(text);
+    toast(t("grid.copied"));
+  }
+
+  // --- Selection copy functions ---
+  function copySelectionTsv() {
+    if (!hasCellSelection.value) return;
+    copyText(formatSelectionAsTsv(selectedCells.value));
+  }
+
+  function copySelectionCsv() {
+    if (!hasCellSelection.value) return;
+    copyText(formatSelectionAsCsv(selectedCells.value));
+  }
+
+  function copySelectionJson() {
+    if (!hasCellSelection.value) return;
+    copyText(formatSelectionAsJson(selectedCells.value));
+  }
+
+  function copySelectionSqlInList() {
+    if (!hasCellSelection.value) return;
+    copyText(formatSelectionAsSqlInList(selectedCells.value));
+  }
+
+  // --- Cell/row copy ---
+  function copyCell() {
+    if (!contextCell.value || contextCell.value.col < 0) return;
+    const item = getRowItem(contextCell.value.rowId);
+    const val = item?.data[contextCell.value.col] ?? null;
+    copyText(formatCell(val));
+  }
+
+  function copyRow() {
+    if (!contextCell.value) return;
+    const item = getRowItem(contextCell.value.rowId);
+    if (!item) return;
+    const obj: Record<string, unknown> = {};
+    columns.value.forEach((col, i) => {
+      obj[col] = item.data[i];
+    });
+    copyText(JSON.stringify(obj, null, 2));
+  }
+
+  function copyRowAsInsert() {
+    if (!contextCell.value) return;
+    const item = getRowItem(contextCell.value.rowId);
+    if (!item) return;
+    const cols = columns.value.map((c) => quoteIdent(c)).join(", ");
+    const vals = item.data.map((v) => escapeVal(v)).join(", ");
+    const table = tableMeta.value
+      ? (tableMeta.value.schema ? `${quoteIdent(tableMeta.value.schema)}.` : "") + quoteIdent(tableMeta.value.tableName)
+      : "table_name";
+    copyText(`INSERT INTO ${table} (${cols}) VALUES (${vals});`);
+  }
+
+  function copyAll() {
+    const header = columns.value.join("\t");
+    const body = displayItems.value.map((item) => item.data.map((c) => formatCell(c)).join("\t")).join("\n");
+    copyText(`${header}\n${body}`);
+  }
+
+  // --- File save helpers ---
+  async function saveFileContent(
+    content: string,
+    defaultFileName: string,
+    filterName: string,
+    filterExt: string,
+  ): Promise<boolean> {
+    if (isTauriRuntime()) {
+      const { save } = await import("@tauri-apps/plugin-dialog");
+      const { writeTextFile } = await import("@tauri-apps/plugin-fs");
+      const path = await save({
+        defaultPath: defaultFileName,
+        filters: [{ name: filterName, extensions: [filterExt] }],
+      });
+      if (!path) return false;
+      await writeTextFile(path, "" + content);
+      return true;
+    } else {
+      const blob = new Blob(["", content], { type: "text/csv;charset=utf-8" });
+      const url = URL.createObjectURL(blob);
+      const a = document.createElement("a");
+      a.href = url;
+      a.download = defaultFileName;
+      a.click();
+      URL.revokeObjectURL(url);
+      return true;
+    }
+  }
+
+  async function saveBinaryFileContent(
+    content: Uint8Array,
+    defaultFileName: string,
+    filterName: string,
+    filterExt: string,
+  ): Promise<boolean> {
+    if (isTauriRuntime()) {
+      const { save } = await import("@tauri-apps/plugin-dialog");
+      const { writeFile } = await import("@tauri-apps/plugin-fs");
+      const path = await save({
+        defaultPath: defaultFileName,
+        filters: [{ name: filterName, extensions: [filterExt] }],
+      });
+      if (!path) return false;
+      await writeFile(path, content);
+      return true;
+    } else {
+      const blob = new Blob([content], {
+        type: "application/vnd.openxmlformats-officedocument.spreadsheetml.sheet",
+      });
+      const url = URL.createObjectURL(blob);
+      const a = document.createElement("a");
+      a.href = url;
+      a.download = defaultFileName;
+      a.click();
+      URL.revokeObjectURL(url);
+      return true;
+    }
+  }
+
+  // --- Export functions ---
+  async function exportCsv() {
+    try {
+      const rows = displayItems.value.map((item) => item.data.map((c) => formatCell(c)));
+      if (await saveFileContent(formatCsv(columns.value, rows), "export.csv", "CSV", "csv")) {
+        toast(t("grid.exported"));
+      }
+    } catch (e: any) {
+      toast(t("grid.exportFailed", { message: e?.message || String(e) }), 5000);
+    }
+  }
+
+  async function exportJson() {
+    try {
+      const rows = displayItems.value.map((item) => item.data);
+      if (await saveFileContent(formatJson(columns.value, rows), "export.json", "JSON", "json")) {
+        toast(t("grid.exported"));
+      }
+    } catch (e: any) {
+      toast(t("grid.exportFailed", { message: e?.message || String(e) }), 5000);
+    }
+  }
+
+  async function exportMarkdown() {
+    try {
+      const cols = columns.value;
+      const visibleRows = displayItems.value.map((item) => item.data);
+      const { formatMarkdownTable } = await import("@/lib/markdownTable");
+      const md = formatMarkdownTable({ columns: cols, rows: visibleRows });
+      if (await saveFileContent(md, "export.md", "Markdown", "md")) {
+        toast(t("grid.exported"));
+      }
+    } catch (e: any) {
+      toast(t("grid.exportFailed", { message: e?.message || String(e) }), 5000);
+    }
+  }
+
+  async function exportXlsx() {
+    try {
+      const { buildXlsxWorkbook } = await import("@/lib/xlsxExport");
+      const workbook = buildXlsxWorkbook({
+        sheetName: tableMeta.value?.tableName || "Export",
+        columns: columns.value,
+        rows: displayItems.value.map((item) => item.data),
+      });
+      if (await saveBinaryFileContent(workbook, "export.xlsx", "Excel", "xlsx")) {
+        toast(t("grid.exported"));
+      }
+    } catch (e: any) {
+      toast(t("grid.exportFailed", { message: e?.message || String(e) }), 5000);
+    }
+  }
+
+  function copySql() {
+    if (!sql.value) return;
+    navigator.clipboard.writeText(sql.value);
+    toast(t("grid.copied"));
+  }
+
+  return {
+    copyText,
+    copyCell,
+    copyRow,
+    copyRowAsInsert,
+    copyAll,
+    copySelectionTsv,
+    copySelectionCsv,
+    copySelectionJson,
+    copySelectionSqlInList,
+    exportCsv,
+    exportJson,
+    exportMarkdown,
+    exportXlsx,
+    copySql,
+  };
+}
diff --git a/src/composables/useDataGridSelection.ts b/src/composables/useDataGridSelection.ts
new file mode 100644
index 000000000..dd29f1ea8
--- /dev/null
+++ b/src/composables/useDataGridSelection.ts
@@ -0,0 +1,124 @@
+import { ref, computed, type ComputedRef, type Ref } from "vue";
+import {
+  extractSelection,
+  isCellInSelection,
+  normalizeSelectionRange,
+  type CellPosition,
+  type CellSelectionRange,
+  type SelectionData,
+} from "@/lib/gridSelection";
+
+type CellValue = string | number | boolean | null;
+
+interface RowItem {
+  id: number;
+  sourceIndex?: number;
+  newIndex?: number;
+  data: CellValue[];
+  isNew: boolean;
+  isDeleted: boolean;
+  isDirtyCol: boolean[];
+  status: string;
+}
+
+export interface UseDataGridSelectionOptions {
+  columns: ComputedRef<string[]>;
+  displayItems: ComputedRef<RowItem[]>;
+  editingCell: Ref<{ rowId: number; col: number } | null>;
+  showTranspose: Ref<boolean>;
+  transposeRowIndex: Ref<number | null>;
+  gridRef: Ref<HTMLDivElement | undefined>;
+}
+
+export function useDataGridSelection(options: UseDataGridSelectionOptions) {
+  const { columns, displayItems, editingCell, showTranspose, transposeRowIndex, gridRef } = options;
+
+  const selectionAnchor = ref<CellPosition | null>(null);
+  const selectionFocus = ref<CellPosition | null>(null);
+  const isSelectingCells = ref(false);
+
+  const selectedRange = computed<CellSelectionRange | null>(() => {
+    if (!selectionAnchor.value || !selectionFocus.value) return null;
+    return normalizeSelectionRange(selectionAnchor.value, selectionFocus.value);
+  });
+
+  const visibleSelectionRows = computed(() => displayItems.value.map((item) => item.data));
+
+  const selectedCells = computed<SelectionData>(() =>
+    extractSelection(columns.value, visibleSelectionRows.value, selectedRange.value),
+  );
+
+  const selectedCellCount = computed(() => selectedCells.value.columns.length * selectedCells.value.rows.length);
+  const hasCellSelection = computed(() => selectedCellCount.value > 0);
+
+  function clearCellSelection() {
+    selectionAnchor.value = null;
+    selectionFocus.value = null;
+    isSelectingCells.value = false;
+  }
+
+  function selectSingleCell(rowIndex: number, colIndex: number) {
+    const cell = { rowIndex, colIndex };
+    selectionAnchor.value = cell;
+    selectionFocus.value = cell;
+  }
+
+  function selectRow(rowIndex: number) {
+    if (columns.value.length === 0) return;
+    selectionAnchor.value = { rowIndex, colIndex: 0 };
+    selectionFocus.value = { rowIndex, colIndex: columns.value.length - 1 };
+  }
+
+  function finishCellSelection() {
+    isSelectingCells.value = false;
+    document.removeEventListener("mouseup", finishCellSelection);
+  }
+
+  function focusGridWithoutScrolling() {
+    gridRef.value?.focus({ preventScroll: true });
+  }
+
+  function beginCellSelection(rowIndex: number, colIndex: number, event: MouseEvent) {
+    if (event.button !== 0) return;
+    if (editingCell.value) return;
+    event.preventDefault();
+    focusGridWithoutScrolling();
+    selectSingleCell(rowIndex, colIndex);
+    isSelectingCells.value = true;
+    if (showTranspose.value) transposeRowIndex.value = rowIndex;
+    document.addEventListener("mouseup", finishCellSelection);
+  }
+
+  function extendCellSelection(rowIndex: number, colIndex: number) {
+    if (!isSelectingCells.value || !selectionAnchor.value) return;
+    selectionFocus.value = { rowIndex, colIndex };
+  }
+
+  function cellIsSelected(rowIndex: number, colIndex: number): boolean {
+    return isCellInSelection(rowIndex, colIndex, selectedRange.value);
+  }
+
+  function selectedRangeStart(): CellPosition | null {
+    const range = selectedRange.value;
+    if (!range) return null;
+    return { rowIndex: range.startRow, colIndex: range.startCol };
+  }
+
+  return {
+    selectionAnchor,
+    selectionFocus,
+    isSelectingCells,
+    selectedRange,
+    selectedCells,
+    selectedCellCount,
+    hasCellSelection,
+    clearCellSelection,
+    selectSingleCell,
+    selectRow,
+    finishCellSelection,
+    beginCellSelection,
+    extendCellSelection,
+    cellIsSelected,
+    selectedRangeStart,
+  };
+}
diff --git a/src/i18n/locales/en.ts b/src/i18n/locales/en.ts
index 702562598..6a3e36b4d 100644
--- a/src/i18n/locales/en.ts
+++ b/src/i18n/locales/en.ts
@@ -295,6 +295,7 @@ export default {
     rollback: "Rollback",
     transactionActive: "Editing",
     sortUnsupported: "This SQL does not support full-result sorting. Try again with a single SELECT query.",
+    truncatedHint: "Results truncated to 10,000 rows. Use LIMIT/OFFSET in your query to paginate.",
   },
   welcome: {
     title: "Database Workspace",
diff --git a/src/i18n/locales/zh-CN.ts b/src/i18n/locales/zh-CN.ts
index 7ca1c11bc..295d9bb46 100644
--- a/src/i18n/locales/zh-CN.ts
+++ b/src/i18n/locales/zh-CN.ts
@@ -294,6 +294,7 @@ export default {
     rollback: "回滚",
     transactionActive: "编辑中",
     sortUnsupported: "当前 SQL 不支持全量排序，请改为单条 SELECT 查询后再尝试。",
+    truncatedHint: "结果已截断，仅显示前 10,000 行。如需更多数据，请使用 LIMIT/OFFSET 分页查询。",
   },
   welcome: {
     title: "数据库工作台",
diff --git a/src/lib/exportFormats.ts b/src/lib/exportFormats.ts
new file mode 100644
index 000000000..c35a61af6
--- /dev/null
+++ b/src/lib/exportFormats.ts
@@ -0,0 +1,39 @@
+export type ExportCellValue = string | number | boolean | null;
+
+export function formatCsv(columns: string[], rows: ExportCellValue[][]): string {
+  const esc = (v: string) => `"${v.replace(/"/g, '""')}"`;
+  const header = columns.map(esc).join(",");
+  const body = rows.map((row) => row.map((c) => esc(c === null ? "" : String(c))).join(",")).join("\n");
+  return `${header}\n${body}`;
+}
+
+export function formatJson(columns: string[], rows: ExportCellValue[][]): string {
+  const data = rows.map((row) => {
+    const obj: Record<string, unknown> = {};
+    columns.forEach((col, i) => {
+      obj[col] = row[i];
+    });
+    return obj;
+  });
+  return JSON.stringify(data, null, 2);
+}
+
+export function formatSqlInsert(
+  qualifiedName: string,
+  columns: string[],
+  rows: ExportCellValue[][],
+  quoteIdent: (name: string) => string,
+): string {
+  const cols = columns.map((c) => quoteIdent(c)).join(", ");
+  const lines = rows.map((row) => {
+    const vals = row
+      .map((v) => {
+        if (v === null) return "NULL";
+        if (typeof v === "number" || typeof v === "boolean") return String(v);
+        return `'${String(v).replace(/'/g, "''")}'`;
+      })
+      .join(", ");
+    return `INSERT INTO ${qualifiedName} (${cols}) VALUES (${vals});`;
+  });
+  return lines.join("\n");
+}