From e3c1057b353fa38c1339c18a98a7c496c150354c Mon Sep 17 00:00:00 2001
From: lxk955 <164191365+lxk955@users.noreply.github.com>
Date: Wed, 7 Oct 2026 02:24:46 +0000
Subject: [PATCH 1/2] feat(grid): support highlighting duplicate and null
 values in column context menu

---
 apps/desktop/src/components/grid/DataGrid.vue | 133 ++++++++++++++++
 .../components/grid/DataGridColumnHeader.vue  |   8 +-
 .../DataGridColumnHeader.highlight.spec.ts    |  65 ++++++++
 apps/desktop/src/i18n/locales/az.ts           |   9 ++
 apps/desktop/src/i18n/locales/en.ts           |   9 ++
 apps/desktop/src/i18n/locales/es.ts           |   9 ++
 apps/desktop/src/i18n/locales/id.ts           |   9 ++
 apps/desktop/src/i18n/locales/it.ts           |   9 ++
 apps/desktop/src/i18n/locales/ja.ts           |   9 ++
 apps/desktop/src/i18n/locales/ko.ts           |   9 ++
 apps/desktop/src/i18n/locales/pt-BR.ts        |   9 ++
 apps/desktop/src/i18n/locales/ru.ts           |   9 ++
 apps/desktop/src/i18n/locales/tr.ts           |   9 ++
 apps/desktop/src/i18n/locales/zh-CN.ts        |   9 ++
 apps/desktop/src/i18n/locales/zh-TW.ts        |   9 ++
 .../canvasDataGridRendererFrozen.spec.ts      |  15 ++
 .../dataGrid/dataGridColumnHighlight.spec.ts  | 134 ++++++++++++++++
 .../dataGrid/dataGridContextMenu.spec.ts      | 132 +++++++++++++++-
 .../lib/dataGrid/canvasDataGridRenderer.ts    |  21 ++-
 .../lib/dataGrid/dataGridColumnHighlight.ts   | 143 ++++++++++++++++++
 .../src/lib/dataGrid/dataGridContextMenu.ts   |  42 +++++
 21 files changed, 798 insertions(+), 3 deletions(-)
 create mode 100644 apps/desktop/src/components/grid/__tests__/DataGridColumnHeader.highlight.spec.ts
 create mode 100644 apps/desktop/src/lib/__tests__/dataGrid/dataGridColumnHighlight.spec.ts
 create mode 100644 apps/desktop/src/lib/dataGrid/dataGridColumnHighlight.ts

diff --git a/apps/desktop/src/components/grid/DataGrid.vue b/apps/desktop/src/components/grid/DataGrid.vue
index 262b2a0b91..79d82e112b 100644
--- a/apps/desktop/src/components/grid/DataGrid.vue
+++ b/apps/desktop/src/components/grid/DataGrid.vue
@@ -61,6 +61,7 @@ import {
   AlertTriangle,
   FileSpreadsheet,
   Globe2,
+  Highlighter,
 } from "@lucide/vue";
 import { Button } from "@/components/ui/button";
 import { Dialog, DialogContent, DialogFooter, DialogHeader, DialogTitle } from "@/components/ui/dialog";
@@ -302,11 +303,13 @@ import {
   createDataGridCompactColumnActionItems,
   createDataGridContextMenuItems,
   createDataGridFilterSubmenu,
+  createDataGridHighlightSubmenu,
   createDataGridRowContextMenuItems,
   createDataGridSortMenuItems,
   dataGridSelectedSortMenuValue,
   type DataGridColumnSortState,
 } from "@/lib/dataGrid/dataGridContextMenu";
+import { clearAllColumnHighlights, clearColumnHighlight, computeColumnHighlightMatchKeys, hasColumnHighlight, isColumnDuplicateHighlightActive, isColumnNullHighlightActive, setColumnDuplicateHighlight, setColumnNullHighlight, type ColumnHighlightRule } from "@/lib/dataGrid/dataGridColumnHighlight";
 import { buildColumnForeignKeyMap, combineForeignKeyConditions, foreignKeyAssociationCells, foreignKeyNavigationTarget, foreignKeySourceColumnName, type ForeignKeyAssociation } from "@/lib/dataGrid/dataGridForeignKeyNavigation";
 import {
   collectForeignKeyDisplayValues,
@@ -5341,6 +5344,40 @@ function transposeHeaderIsCurrentMatch(fieldIndex: number): boolean {
   return m.kind === "column" && m.col === fieldIndex;
 }
 
+const columnHighlightRules = ref<Map<number, ColumnHighlightRule>>(new Map());
+
+watch(
+  () => props.result,
+  () => {
+    clearAllColumnHighlights(columnHighlightRules.value);
+  },
+);
+
+const columnHighlightMatches = computed(() => {
+  return computeColumnHighlightMatchKeys({
+    rows: displayItems.value,
+    rules: columnHighlightRules.value,
+    isNullValue: (value) => value === null || (usesMongoDocumentGridValues.value && value === MONGO_DOCUMENT_GRID_NULL),
+  });
+});
+
+const duplicateHighlightKeys = computed(() => columnHighlightMatches.value.duplicateKeys);
+const nullHighlightKeys = computed(() => columnHighlightMatches.value.nullKeys);
+
+function columnHasHighlight(colIdx: number): boolean {
+  return hasColumnHighlight(columnHighlightRules.value, colIdx);
+}
+
+function cellIsDuplicateHighlight(displayRow: number, col: number): boolean {
+  if (isScrolling.value) return false;
+  return duplicateHighlightKeys.value.has(dataGridSearchMatchKey(displayRow, col));
+}
+
+function cellIsNullHighlight(displayRow: number, col: number): boolean {
+  if (isScrolling.value) return false;
+  return nullHighlightKeys.value.has(dataGridSearchMatchKey(displayRow, col));
+}
+
 function navigateMatch(delta: number) {
   dataGridSearch.navigateMatch(delta);
 }
@@ -8015,6 +8052,8 @@ function drawCanvasGrid() {
     editingCell: editingCell.value,
     searchMatchKeys: searchMatchSet.value,
     currentSearchMatch: currentSearchMatch.value,
+    duplicateHighlightKeys: duplicateHighlightKeys.value,
+    nullHighlightKeys: nullHighlightKeys.value,
     formatCell: (value, columnIndex, row) => formatCellCached(visibleLargeValuePreviewValue(row, columnIndex, value), columnIndex, largeValueOriginalBytes(row, columnIndex)),
     isNullValue: (value) => value === null || (usesMongoDocumentGridValues.value && value === MONGO_DOCUMENT_GRID_NULL),
     newRowCellPlaceholder,
@@ -12492,6 +12531,93 @@ function filterSubmenu(): ContextMenuItem {
   });
 }
 
+function targetHighlightColumnIndexes(): number[] {
+  if (contextHeaderColumnIndex.value !== null) {
+    const visibleIdx = contextHeaderVisibleColIdx.value;
+    if (visibleIdx !== null && selectedColumnIndexes.value.has(visibleIdx) && selectedColumnIndexes.value.size > 1) {
+      return [...selectedColumnIndexes.value].map(actualColumnIndex);
+    }
+    return [contextHeaderColumnIndex.value];
+  }
+  if (contextCell.value && contextCell.value.col >= 0) {
+    const visibleIdx = visibleColumnIndexes.value.indexOf(contextCell.value.col);
+    if (visibleIdx >= 0 && selectedColumnIndexes.value.has(visibleIdx) && selectedColumnIndexes.value.size > 1) {
+      return [...selectedColumnIndexes.value].map(actualColumnIndex);
+    }
+    return [contextCell.value.col];
+  }
+  return [];
+}
+
+function toggleTargetColumnDuplicateHighlight() {
+  const indexes = targetHighlightColumnIndexes();
+  if (indexes.length === 0) return;
+  const anyActive = indexes.some((idx) => isColumnDuplicateHighlightActive(columnHighlightRules.value, idx));
+  const newRules = new Map(columnHighlightRules.value);
+  for (const idx of indexes) {
+    setColumnDuplicateHighlight(newRules, idx, !anyActive);
+  }
+  columnHighlightRules.value = newRules;
+  if (!anyActive) {
+    const count = columnHighlightMatches.value.duplicateKeys.size;
+    if (count > 0) {
+      toast(t("grid.highlightDuplicatesFound", { count }));
+    } else {
+      toast(t("grid.highlightDuplicatesNoneFound"));
+    }
+  }
+}
+
+function toggleTargetColumnNullHighlight() {
+  const indexes = targetHighlightColumnIndexes();
+  if (indexes.length === 0) return;
+  const anyActive = indexes.some((idx) => isColumnNullHighlightActive(columnHighlightRules.value, idx));
+  const newRules = new Map(columnHighlightRules.value);
+  for (const idx of indexes) {
+    setColumnNullHighlight(newRules, idx, !anyActive);
+  }
+  columnHighlightRules.value = newRules;
+  if (!anyActive) {
+    const count = columnHighlightMatches.value.nullKeys.size;
+    if (count > 0) {
+      toast(t("grid.highlightNullsFound", { count }));
+    } else {
+      toast(t("grid.highlightNullsNoneFound"));
+    }
+  }
+}
+
+function clearTargetColumnHighlight() {
+  const indexes = targetHighlightColumnIndexes();
+  if (indexes.length === 0) return;
+  const newRules = new Map(columnHighlightRules.value);
+  for (const idx of indexes) {
+    clearColumnHighlight(newRules, idx);
+  }
+  columnHighlightRules.value = newRules;
+}
+
+function highlightSubmenu(): ContextMenuItem {
+  const indexes = targetHighlightColumnIndexes();
+  const hasDup = indexes.some((idx) => isColumnDuplicateHighlightActive(columnHighlightRules.value, idx));
+  const hasNull = indexes.some((idx) => isColumnNullHighlightActive(columnHighlightRules.value, idx));
+  return createDataGridHighlightSubmenu({
+    label: t("grid.highlight"),
+    icon: Highlighter,
+    labels: {
+      duplicates: t("grid.highlightDuplicates"),
+      nulls: t("grid.highlightNulls"),
+      clear: t("grid.clearHighlight"),
+    },
+    hasDuplicatesActive: hasDup,
+    hasNullsActive: hasNull,
+    canClear: hasDup || hasNull,
+    toggleDuplicates: toggleTargetColumnDuplicateHighlight,
+    toggleNulls: toggleTargetColumnNullHighlight,
+    clear: clearTargetColumnHighlight,
+  });
+}
+
 function buildExtractorContextItems(destination: "copy" | "export" = "copy"): ContextMenuItem[] {
   const items: ContextMenuItem[] = [];
   let separatorPending = false;
@@ -12749,6 +12875,7 @@ const gridContextMenuItems = computed<ContextMenuItem[]>(() => {
         showAllColumnsMenu: showAllColumns,
       },
       filterSubmenu: filterSubmenu(),
+      highlightSubmenu: highlightSubmenu(),
     }),
     createDataGridCellContextMenuItems({
       hasCell: !!contextCell.value,
@@ -13396,6 +13523,8 @@ useUpdateBlocker(() => (hasPendingChanges.value || hasPendingDataEditorDraft.val
                               !transposeCellIsSelected(cell.recordIndex, cell.valueIndex),
                             'bg-primary/15': transposeRecordUsesActiveHighlight(cell.recordIndex) && !transposeRecordUsesSelectionVisual(cell.recordIndex) && !displayItems[cell.recordIndex]?.isDirtyCol[cell.valueIndex] && !transposeCellIsSelected(cell.recordIndex, cell.valueIndex),
                             'bg-yellow-500/10 cell-dirty': displayItems[cell.recordIndex]?.isDirtyCol[cell.valueIndex],
+                            'bg-amber-200/60 dark:bg-amber-500/25': cellIsDuplicateHighlight(cell.recordIndex, cell.valueIndex),
+                            'bg-sky-200/60 dark:bg-sky-500/25': cellIsNullHighlight(cell.recordIndex, cell.valueIndex),
                             'bg-yellow-200/60 dark:bg-yellow-500/20': cellIsSearchMatch(cell.recordIndex, cell.valueIndex),
                             'ring-2 ring-inset ring-yellow-500 bg-yellow-300/60 dark:bg-yellow-500/40': cellIsCurrentMatch(cell.recordIndex, cell.valueIndex),
                             'cursor-text': !isScrolling,
@@ -13584,6 +13713,8 @@ useUpdateBlocker(() => (hasPendingChanges.value || hasPendingDataEditorDraft.val
                     :column-index-kind="showIndexIndicatorsInHeader ? columnIndexMap.get(columnIndexNameKey(col.name)) : undefined"
                     :formatter-active="columnHasFormatter(col.actualColIdx)"
                     :formatter-label="t('grid.columnFormatterActive')"
+                    :highlight-active="columnHasHighlight(col.actualColIdx)"
+                    :highlight-label="t('grid.highlightActive')"
                     @pointerdown="startColumnHeaderDrag(col.visibleColIdx, $event)"
                     @click-capture="onHeaderClickCapture"
                     @click="onHeaderClick(col.visibleColIdx, $event)"
@@ -14310,6 +14441,8 @@ useUpdateBlocker(() => (hasPendingChanges.value || hasPendingDataEditorDraft.val
                               'crosshair-column': !!crosshairTarget?.columnCrosshair && crosshairTarget.visibleColIdx === col.visibleColIdx && !item.isDeleted,
                               'cell-search-match': cellIsSearchMatch(item.displayIndex, col.actualColIdx),
                               'cell-current-search-match': cellIsCurrentMatch(item.displayIndex, col.actualColIdx),
+                              'bg-amber-200/60 dark:bg-amber-500/25': cellIsDuplicateHighlight(item.displayIndex, col.actualColIdx),
+                              'bg-sky-200/60 dark:bg-sky-500/25': cellIsNullHighlight(item.displayIndex, col.actualColIdx),
                               'bg-yellow-200/60 dark:bg-yellow-500/20': cellIsSearchMatch(item.displayIndex, col.actualColIdx),
                               'ring-2 ring-inset ring-yellow-500 bg-yellow-300/60 dark:bg-yellow-500/40': cellIsCurrentMatch(item.displayIndex, col.actualColIdx),
                               'tabular-nums': typeof item.data[col.actualColIdx] === 'number',
diff --git a/apps/desktop/src/components/grid/DataGridColumnHeader.vue b/apps/desktop/src/components/grid/DataGridColumnHeader.vue
index 5d2ec4761a..bcb209331d 100644
--- a/apps/desktop/src/components/grid/DataGridColumnHeader.vue
+++ b/apps/desktop/src/components/grid/DataGridColumnHeader.vue
@@ -1,6 +1,6 @@
 <script setup lang="ts">
 import type { CSSProperties, HTMLAttributes } from "vue";
-import { Copy, KeyRound, Hash } from "@lucide/vue";
+import { Copy, KeyRound, Hash, Highlighter } from "@lucide/vue";
 import LightTooltip from "@/components/ui/LightTooltip.vue";
 import { columnIndexColorClass, type ColumnIndexKind } from "@/lib/dataGrid/dataGridColumnIndexIcon";
 
@@ -40,6 +40,9 @@ const props = defineProps<{
   /** 该列当前展示值应用了格式化规则。 */
   formatterActive?: boolean;
   formatterLabel?: string;
+  /** 该列当前启用了重复值或空值高亮。 */
+  highlightActive?: boolean;
+  highlightLabel?: string;
 }>();
 
 function columnIndexText(kind: ColumnIndexKind): string {
@@ -119,6 +122,9 @@ const emit = defineEmits<{
         </template>
       </LightTooltip>
       <span v-if="formatterActive" data-column-formatter-indicator class="inline-flex h-4 w-4 shrink-0 items-center justify-center rounded-sm bg-violet-600 text-[10px] font-bold leading-none text-white shadow-sm dark:bg-violet-500" :title="formatterLabel" :aria-label="formatterLabel">F</span>
+      <span v-if="highlightActive" data-column-highlight-indicator class="inline-flex h-4 w-4 shrink-0 items-center justify-center text-amber-500 dark:text-amber-400" :title="highlightLabel" :aria-label="highlightLabel">
+        <Highlighter class="h-3 w-3" />
+      </span>
       <span data-column-header-actions class="contents"><slot name="actions" /></span>
     </span>
     <div data-column-resize-handle class="absolute right-0 top-0 bottom-0 w-1.5 cursor-col-resize hover:bg-primary/30" @mousedown.stop="emit('resizeStart', $event)" @click.stop.prevent @dblclick.stop="emit('autoFit')" />
diff --git a/apps/desktop/src/components/grid/__tests__/DataGridColumnHeader.highlight.spec.ts b/apps/desktop/src/components/grid/__tests__/DataGridColumnHeader.highlight.spec.ts
new file mode 100644
index 0000000000..dadf1981b2
--- /dev/null
+++ b/apps/desktop/src/components/grid/__tests__/DataGridColumnHeader.highlight.spec.ts
@@ -0,0 +1,65 @@
+// @vitest-environment happy-dom
+
+import { createApp, h, nextTick, type App } from "vue";
+import { afterEach, describe, expect, it } from "vitest";
+import DataGridColumnHeader from "../DataGridColumnHeader.vue";
+
+const mountedApps: Array<{ app: App; host: HTMLElement }> = [];
+
+function mountHeader(props: Record<string, unknown>) {
+  const host = document.createElement("div");
+  document.body.appendChild(host);
+  const app = createApp({
+    render() {
+      return h(DataGridColumnHeader, {
+        actualColumnIndex: 0,
+        visibleColumnIndex: 0,
+        name: "test_col",
+        type: "VARCHAR",
+        width: 120,
+        isSorted: false,
+        sortMode: null,
+        copyColumnNameLabel: "Copy",
+        columnNameLabel: "Column",
+        columnTypeLabel: "Type",
+        columnCommentLabel: "Comment",
+        columnIndexLabel: "Index",
+        columnPrimaryIndexLabel: "PK",
+        columnUniqueIndexLabel: "Unique",
+        columnRegularIndexLabel: "Regular",
+        ...props,
+      });
+    },
+  });
+  app.mount(host);
+  mountedApps.push({ app, host });
+  return host;
+}
+
+afterEach(() => {
+  for (const { app, host } of mountedApps.splice(0)) {
+    app.unmount();
+    host.remove();
+  }
+  document.body.innerHTML = "";
+});
+
+describe("DataGridColumnHeader highlight indicator", () => {
+  it("does not render highlight indicator when highlightActive is false or omitted", () => {
+    const host = mountHeader({ highlightActive: false });
+    const indicator = host.querySelector("[data-column-highlight-indicator]");
+    expect(indicator).toBeNull();
+  });
+
+  it("renders highlight indicator with title and aria-label when highlightActive is true", async () => {
+    const host = mountHeader({
+      highlightActive: true,
+      highlightLabel: "Highlight Active",
+    });
+    await nextTick();
+    const indicator = host.querySelector("[data-column-highlight-indicator]");
+    expect(indicator).not.toBeNull();
+    expect(indicator?.getAttribute("title")).toBe("Highlight Active");
+    expect(indicator?.getAttribute("aria-label")).toBe("Highlight Active");
+  });
+});
diff --git a/apps/desktop/src/i18n/locales/az.ts b/apps/desktop/src/i18n/locales/az.ts
index 3a099e264c..25f25e1fa0 100644
--- a/apps/desktop/src/i18n/locales/az.ts
+++ b/apps/desktop/src/i18n/locales/az.ts
@@ -2103,6 +2103,15 @@ export default withEnglishFallback({
     filterIsNull: "NULL dəyərləri göstər",
     filterIsNotNull: "NULL olmayan dəyərləri göstər",
     clearFilter: "Süzgəci təmizlə",
+    highlight: "Vurğula",
+    highlightDuplicates: "Təkrarlanan Dəyərləri Vurğula",
+    highlightNulls: "NULL Dəyərlərini Vurğula",
+    clearHighlight: "Vurğulamaları Təmizlə",
+    highlightActive: "Vurğulama Aktivdir",
+    highlightDuplicatesFound: "{count} təkrarlanan dəyər vurğulandı",
+    highlightDuplicatesNoneFound: "Təkrarlanan dəyər tapılmadı",
+    highlightNullsFound: "{count} NULL dəyər tapıldı",
+    highlightNullsNoneFound: "NULL dəyər tapılmadı",
     sort: "Sırala",
     sortAscending: "Artan sıra ilə sırala",
     sortDescending: "Azalan sıra ilə sırala",
diff --git a/apps/desktop/src/i18n/locales/en.ts b/apps/desktop/src/i18n/locales/en.ts
index 65af92e7ea..cc8135fa37 100644
--- a/apps/desktop/src/i18n/locales/en.ts
+++ b/apps/desktop/src/i18n/locales/en.ts
@@ -2516,6 +2516,15 @@ export default {
     filterIsNull: "Show NULL Values",
     filterIsNotNull: "Show Non-NULL Values",
     clearFilter: "Clear Filter",
+    highlight: "Highlight",
+    highlightDuplicates: "Highlight Duplicate Values",
+    highlightNulls: "Highlight NULL Values",
+    clearHighlight: "Clear Highlights",
+    highlightActive: "Highlight Active",
+    highlightDuplicatesFound: "Highlighted {count} duplicate values",
+    highlightDuplicatesNoneFound: "No duplicate values found",
+    highlightNullsFound: "Highlighted {count} NULL values",
+    highlightNullsNoneFound: "No NULL values found",
     sort: "Sort",
     sortAscending: "Sort Ascending",
     sortDescending: "Sort Descending",
diff --git a/apps/desktop/src/i18n/locales/es.ts b/apps/desktop/src/i18n/locales/es.ts
index 5f422b5cd8..5f30ff5166 100644
--- a/apps/desktop/src/i18n/locales/es.ts
+++ b/apps/desktop/src/i18n/locales/es.ts
@@ -2356,6 +2356,15 @@ export default withEnglishFallback({
     filterIsNull: "Mostrar valores NULL",
     filterIsNotNull: "Mostrar valores no NULL",
     clearFilter: "Limpiar filtro",
+    highlight: "Resaltar",
+    highlightDuplicates: "Resaltar valores duplicados",
+    highlightNulls: "Resaltar valores NULL",
+    clearHighlight: "Borrar resaltados",
+    highlightActive: "Resaltado activo",
+    highlightDuplicatesFound: "Se resaltaron {count} valores duplicados",
+    highlightDuplicatesNoneFound: "No se encontraron valores duplicados",
+    highlightNullsFound: "Se resaltaron {count} valores NULL",
+    highlightNullsNoneFound: "No se encontraron valores NULL",
     sort: "Ordenar",
     sortAscending: "Orden ascendente",
     sortDescending: "Orden descendente",
diff --git a/apps/desktop/src/i18n/locales/id.ts b/apps/desktop/src/i18n/locales/id.ts
index 30f6d40812..e32c1be76b 100644
--- a/apps/desktop/src/i18n/locales/id.ts
+++ b/apps/desktop/src/i18n/locales/id.ts
@@ -2375,6 +2375,15 @@ export default withEnglishFallback({
     filterIsNull: "Tampilkan Nilai NULL",
     filterIsNotNull: "Tampilkan Nilai Non-NULL",
     clearFilter: "Bersihkan Filter",
+    highlight: "Sorot",
+    highlightDuplicates: "Sorot Nilai Duplikat",
+    highlightNulls: "Sorot Nilai NULL",
+    clearHighlight: "Hapus Sorotan",
+    highlightActive: "Sorotan Aktif",
+    highlightDuplicatesFound: "{count} nilai duplikat disorot",
+    highlightDuplicatesNoneFound: "Tidak ditemukan nilai duplikat",
+    highlightNullsFound: "{count} nilai NULL disorot",
+    highlightNullsNoneFound: "Tidak ditemukan nilai NULL",
     sort: "Urutkan",
     sortAscending: "Urutkan Naik",
     sortDescending: "Urutkan Turun",
diff --git a/apps/desktop/src/i18n/locales/it.ts b/apps/desktop/src/i18n/locales/it.ts
index 97388f7cc8..4404d5e3d7 100644
--- a/apps/desktop/src/i18n/locales/it.ts
+++ b/apps/desktop/src/i18n/locales/it.ts
@@ -2250,6 +2250,15 @@ export default withEnglishFallback({
     filterIsNull: "Mostra Valori NULL",
     filterIsNotNull: "Mostra Valori Non-NULL",
     clearFilter: "Cancella Filtro",
+    highlight: "Evidenzia",
+    highlightDuplicates: "Evidenzia valori duplicati",
+    highlightNulls: "Evidenzia valori NULL",
+    clearHighlight: "Cancella evidenziazione",
+    highlightActive: "Evidenziazione attiva",
+    highlightDuplicatesFound: "Evidenziati {count} valori duplicati",
+    highlightDuplicatesNoneFound: "Nessun valore duplicato trovato",
+    highlightNullsFound: "Evidenziati {count} valori NULL",
+    highlightNullsNoneFound: "Nessun valore NULL trovato",
     sort: "Ordina",
     sortAscending: "Ordina in modo crescente",
     sortDescending: "Ordina in modo decrescente",
diff --git a/apps/desktop/src/i18n/locales/ja.ts b/apps/desktop/src/i18n/locales/ja.ts
index bc9a5793f2..be9e6635be 100644
--- a/apps/desktop/src/i18n/locales/ja.ts
+++ b/apps/desktop/src/i18n/locales/ja.ts
@@ -2257,6 +2257,15 @@ export default withEnglishFallback({
     filterIsNull: "NULL値を表示",
     filterIsNotNull: "非NULL値を表示",
     clearFilter: "フィルターをクリア",
+    highlight: "ハイライト",
+    highlightDuplicates: "重複値をハイライト",
+    highlightNulls: "NULL 値をハイライト",
+    clearHighlight: "ハイライトをクリア",
+    highlightActive: "ハイライトが有効",
+    highlightDuplicatesFound: "{count} 件の重複値をハイライトしました",
+    highlightDuplicatesNoneFound: "重複値は見つかりませんでした",
+    highlightNullsFound: "{count} 件の NULL 値をハイライトしました",
+    highlightNullsNoneFound: "NULL 値は見つかりませんでした",
     sort: "並べ替え",
     sortAscending: "昇順",
     sortDescending: "降順",
diff --git a/apps/desktop/src/i18n/locales/ko.ts b/apps/desktop/src/i18n/locales/ko.ts
index eb9dc26139..ea2dc9d3d7 100644
--- a/apps/desktop/src/i18n/locales/ko.ts
+++ b/apps/desktop/src/i18n/locales/ko.ts
@@ -2294,6 +2294,15 @@ export default withEnglishFallback({
     filterIsNull: "NULL 값 표시",
     filterIsNotNull: "NULL이 아닌 값 표시",
     clearFilter: "필터 지우기",
+    highlight: "강조 표시",
+    highlightDuplicates: "중복 값 강조 표시",
+    highlightNulls: "NULL 값 강조 표시",
+    clearHighlight: "강조 표시 지우기",
+    highlightActive: "강조 표시 활성화됨",
+    highlightDuplicatesFound: "{count}개의 중복 값을 강조 표시했습니다",
+    highlightDuplicatesNoneFound: "중복 값을 찾을 수 없습니다",
+    highlightNullsFound: "{count}개의 NULL 값을 강조 표시했습니다",
+    highlightNullsNoneFound: "NULL 값을 찾을 수 없습니다",
     sort: "정렬",
     sortAscending: "오름차순 정렬",
     sortDescending: "내림차순 정렬",
diff --git a/apps/desktop/src/i18n/locales/pt-BR.ts b/apps/desktop/src/i18n/locales/pt-BR.ts
index e654a9b0eb..5402bb5f61 100644
--- a/apps/desktop/src/i18n/locales/pt-BR.ts
+++ b/apps/desktop/src/i18n/locales/pt-BR.ts
@@ -2252,6 +2252,15 @@ export default withEnglishFallback({
     filterIsNull: "Mostrar Valores NULL",
     filterIsNotNull: "Mostrar Valores Não NULL",
     clearFilter: "Limpar Filtro",
+    highlight: "Destacar",
+    highlightDuplicates: "Destacar valores duplicados",
+    highlightNulls: "Destacar valores NULL",
+    clearHighlight: "Limpar destaques",
+    highlightActive: "Destaque ativo",
+    highlightDuplicatesFound: "{count} valores duplicados destacados",
+    highlightDuplicatesNoneFound: "Nenhum valor duplicado encontrado",
+    highlightNullsFound: "{count} valores NULL destacados",
+    highlightNullsNoneFound: "Nenhum valor NULL encontrado",
     sort: "Ordenar",
     sortAscending: "Ordenar de Forma Crescente",
     sortDescending: "Ordenar de Forma Decrescente",
diff --git a/apps/desktop/src/i18n/locales/ru.ts b/apps/desktop/src/i18n/locales/ru.ts
index 66c47b6baf..e49937cf35 100644
--- a/apps/desktop/src/i18n/locales/ru.ts
+++ b/apps/desktop/src/i18n/locales/ru.ts
@@ -2410,6 +2410,15 @@ export default withEnglishFallback({
     filterIsNull: "Показать значения NULL",
     filterIsNotNull: "Показать значения, отличные от NULL",
     clearFilter: "Очистить фильтр",
+    highlight: "Подсветка",
+    highlightDuplicates: "Подсветить повторяющиеся значения",
+    highlightNulls: "Подсветить значения NULL",
+    clearHighlight: "Очистить подсветку",
+    highlightActive: "Подсветка активна",
+    highlightDuplicatesFound: "Подсвечено дубликатов: {count}",
+    highlightDuplicatesNoneFound: "Повторяющиеся значения не найдены",
+    highlightNullsFound: "Подсвечено значений NULL: {count}",
+    highlightNullsNoneFound: "Значения NULL не найдены",
     sort: "Сортировка",
     sortAscending: "Сортировать по возрастанию",
     sortDescending: "Сортировать по убыванию",
diff --git a/apps/desktop/src/i18n/locales/tr.ts b/apps/desktop/src/i18n/locales/tr.ts
index 61286ba246..41f2525cff 100644
--- a/apps/desktop/src/i18n/locales/tr.ts
+++ b/apps/desktop/src/i18n/locales/tr.ts
@@ -2096,6 +2096,15 @@ export default withEnglishFallback({
     filterIsNull: "NULL Değerleri Göster",
     filterIsNotNull: "NULL Olmayan Değerleri Göster",
     clearFilter: "Filtreyi Temizle",
+    highlight: "Vurgula",
+    highlightDuplicates: "Yinelenen Değerleri Vurgula",
+    highlightNulls: "NULL Değerleri Vurgula",
+    clearHighlight: "Vurgulamaları Temizle",
+    highlightActive: "Vurgulama Etkin",
+    highlightDuplicatesFound: "{count} yinelenen değer vurgulandı",
+    highlightDuplicatesNoneFound: "Yinelenen değer bulunamadı",
+    highlightNullsFound: "{count} NULL değer vurgulandı",
+    highlightNullsNoneFound: "NULL değer bulunamadı",
     sort: "Sırala",
     sortAscending: "Artan Sırala",
     sortDescending: "Azalan Sırala",
diff --git a/apps/desktop/src/i18n/locales/zh-CN.ts b/apps/desktop/src/i18n/locales/zh-CN.ts
index f0b2f7d288..417a39c299 100644
--- a/apps/desktop/src/i18n/locales/zh-CN.ts
+++ b/apps/desktop/src/i18n/locales/zh-CN.ts
@@ -2451,6 +2451,15 @@ export default withEnglishFallback({
     filterIsNull: "仅显示 NULL",
     filterIsNotNull: "仅显示非 NULL",
     clearFilter: "清除筛选",
+    highlight: "高亮",
+    highlightDuplicates: "高亮重复值",
+    highlightNulls: "高亮空值",
+    clearHighlight: "清除高亮",
+    highlightActive: "已启用高亮",
+    highlightDuplicatesFound: "已高亮 {count} 个重复值",
+    highlightDuplicatesNoneFound: "未发现重复值",
+    highlightNullsFound: "已高亮 {count} 个空值",
+    highlightNullsNoneFound: "未发现空值",
     sort: "排序",
     sortAscending: "升序排序",
     sortDescending: "降序排序",
diff --git a/apps/desktop/src/i18n/locales/zh-TW.ts b/apps/desktop/src/i18n/locales/zh-TW.ts
index dc61c89ab1..0dbbf3dfc2 100644
--- a/apps/desktop/src/i18n/locales/zh-TW.ts
+++ b/apps/desktop/src/i18n/locales/zh-TW.ts
@@ -2252,6 +2252,15 @@ export default withEnglishFallback({
     filterIsNull: "僅顯示 NULL",
     filterIsNotNull: "僅顯示非 NULL",
     clearFilter: "清除篩選",
+    highlight: "醒目提示",
+    highlightDuplicates: "醒目提示重複值",
+    highlightNulls: "醒目提示空值",
+    clearHighlight: "清除醒目提示",
+    highlightActive: "已啟用醒目提示",
+    highlightDuplicatesFound: "已醒目提示 {count} 個重複值",
+    highlightDuplicatesNoneFound: "未發現重複值",
+    highlightNullsFound: "已醒目提示 {count} 個空值",
+    highlightNullsNoneFound: "未發現空值",
     sort: "排序",
     sortAscending: "遞增排序",
     sortDescending: "遞減排序",
diff --git a/apps/desktop/src/lib/__tests__/dataGrid/canvasDataGridRendererFrozen.spec.ts b/apps/desktop/src/lib/__tests__/dataGrid/canvasDataGridRendererFrozen.spec.ts
index 70a18d6e61..82c6a9cf10 100644
--- a/apps/desktop/src/lib/__tests__/dataGrid/canvasDataGridRendererFrozen.spec.ts
+++ b/apps/desktop/src/lib/__tests__/dataGrid/canvasDataGridRendererFrozen.spec.ts
@@ -259,4 +259,19 @@ describe("drawCanvasDataGrid with frozen columns", () => {
     });
     expect(() => drawCanvasDataGrid(optionsWithCustomZebraColor)).not.toThrow();
   });
+
+  it("draws with duplicate and null highlight keys without error", () => {
+    const canvas = document.createElement("canvas");
+    canvas.width = 800;
+    canvas.height = 600;
+    const dupKeys = new Set<number>([0, 1]);
+    const nullKeys = new Set<number>([2]);
+
+    const options = createBaseOptions({
+      canvas,
+      duplicateHighlightKeys: dupKeys,
+      nullHighlightKeys: nullKeys,
+    });
+    expect(() => drawCanvasDataGrid(options)).not.toThrow();
+  });
 });
diff --git a/apps/desktop/src/lib/__tests__/dataGrid/dataGridColumnHighlight.spec.ts b/apps/desktop/src/lib/__tests__/dataGrid/dataGridColumnHighlight.spec.ts
new file mode 100644
index 0000000000..b97470938a
--- /dev/null
+++ b/apps/desktop/src/lib/__tests__/dataGrid/dataGridColumnHighlight.spec.ts
@@ -0,0 +1,134 @@
+import { describe, expect, it } from "vitest";
+import {
+  clearAllColumnHighlights,
+  clearColumnHighlight,
+  computeColumnHighlightMatchKeys,
+  hasAnyColumnHighlight,
+  hasColumnHighlight,
+  isColumnDuplicateHighlightActive,
+  isColumnNullHighlightActive,
+  setColumnDuplicateHighlight,
+  setColumnNullHighlight,
+  toggleColumnDuplicateHighlight,
+  toggleColumnNullHighlight,
+  type ColumnHighlightRule,
+} from "@/lib/dataGrid/dataGridColumnHighlight";
+import { dataGridSearchMatchKey, type CanvasDataGridRow } from "@/lib/dataGrid/canvasDataGridRenderer";
+
+function makeRow(displayIndex: number, data: any[]): CanvasDataGridRow {
+  return {
+    id: displayIndex + 1,
+    displayIndex,
+    data,
+    isNew: false,
+    isDeleted: false,
+    isDirtyCol: [],
+    status: "clean" as any,
+  };
+}
+
+describe("dataGridColumnHighlight", () => {
+  it("toggles and updates column highlight rules correctly", () => {
+    const rules = new Map<number, ColumnHighlightRule>();
+
+    expect(isColumnDuplicateHighlightActive(rules, 0)).toBe(false);
+    expect(isColumnNullHighlightActive(rules, 0)).toBe(false);
+    expect(hasColumnHighlight(rules, 0)).toBe(false);
+    expect(hasAnyColumnHighlight(rules)).toBe(false);
+
+    // Toggle duplicates on
+    expect(toggleColumnDuplicateHighlight(rules, 0)).toBe(true);
+    expect(isColumnDuplicateHighlightActive(rules, 0)).toBe(true);
+    expect(isColumnNullHighlightActive(rules, 0)).toBe(false);
+    expect(hasColumnHighlight(rules, 0)).toBe(true);
+    expect(hasAnyColumnHighlight(rules)).toBe(true);
+
+    // Toggle nulls on
+    expect(toggleColumnNullHighlight(rules, 0)).toBe(true);
+    expect(isColumnDuplicateHighlightActive(rules, 0)).toBe(true);
+    expect(isColumnNullHighlightActive(rules, 0)).toBe(true);
+
+    // Toggle duplicates off
+    expect(toggleColumnDuplicateHighlight(rules, 0)).toBe(false);
+    expect(isColumnDuplicateHighlightActive(rules, 0)).toBe(false);
+    expect(isColumnNullHighlightActive(rules, 0)).toBe(true);
+
+    // Clear column
+    clearColumnHighlight(rules, 0);
+    expect(rules.has(0)).toBe(false);
+    expect(hasAnyColumnHighlight(rules)).toBe(false);
+  });
+
+  it("handles explicit set and clearAllColumnHighlights", () => {
+    const rules = new Map<number, ColumnHighlightRule>();
+    setColumnDuplicateHighlight(rules, 1, true);
+    setColumnNullHighlight(rules, 2, true);
+
+    expect(hasColumnHighlight(rules, 1)).toBe(true);
+    expect(hasColumnHighlight(rules, 2)).toBe(true);
+    expect(rules.size).toBe(2);
+
+    setColumnDuplicateHighlight(rules, 1, false);
+    expect(rules.has(1)).toBe(false);
+
+    clearAllColumnHighlights(rules);
+    expect(rules.size).toBe(0);
+  });
+
+  it("computes duplicate and null highlight keys for rows", () => {
+    const rows: CanvasDataGridRow[] = [makeRow(0, ["alice", 10, null]), makeRow(1, ["bob", 20, "foo"]), makeRow(2, ["alice", 10, null]), makeRow(3, ["charlie", 30, "bar"]), makeRow(4, [null, 10, "foo"])];
+
+    const rules = new Map<number, ColumnHighlightRule>();
+    rules.set(0, { duplicates: true });
+    rules.set(1, { duplicates: true });
+    rules.set(2, { nulls: true });
+
+    const matches = computeColumnHighlightMatchKeys({ rows, rules });
+
+    // Col 0: "alice" appears at row 0 and 2. null at row 4 is not treated as duplicate.
+    expect(matches.duplicateKeys.has(dataGridSearchMatchKey(0, 0))).toBe(true);
+    expect(matches.duplicateKeys.has(dataGridSearchMatchKey(2, 0))).toBe(true);
+    expect(matches.duplicateKeys.has(dataGridSearchMatchKey(1, 0))).toBe(false);
+    expect(matches.duplicateKeys.has(dataGridSearchMatchKey(4, 0))).toBe(false);
+
+    // Col 1: 10 appears at row 0, 2, 4 (count = 3).
+    expect(matches.duplicateKeys.has(dataGridSearchMatchKey(0, 1))).toBe(true);
+    expect(matches.duplicateKeys.has(dataGridSearchMatchKey(2, 1))).toBe(true);
+    expect(matches.duplicateKeys.has(dataGridSearchMatchKey(4, 1))).toBe(true);
+    expect(matches.duplicateKeys.has(dataGridSearchMatchKey(1, 1))).toBe(false);
+    expect(matches.duplicateKeys.has(dataGridSearchMatchKey(3, 1))).toBe(false);
+
+    // Col 2: null appears at row 0 and 2.
+    expect(matches.nullKeys.has(dataGridSearchMatchKey(0, 2))).toBe(true);
+    expect(matches.nullKeys.has(dataGridSearchMatchKey(2, 2))).toBe(true);
+    expect(matches.nullKeys.has(dataGridSearchMatchKey(1, 2))).toBe(false);
+    expect(matches.nullKeys.has(dataGridSearchMatchKey(3, 2))).toBe(false);
+    expect(matches.nullKeys.has(dataGridSearchMatchKey(4, 2))).toBe(false);
+  });
+
+  it("supports custom isNullValue check", () => {
+    const rows: CanvasDataGridRow[] = [makeRow(0, ["(NULL)", 1]), makeRow(1, ["valid", 2]), makeRow(2, [null, 1])];
+
+    const rules = new Map<number, ColumnHighlightRule>([[0, { nulls: true }]]);
+    const matches = computeColumnHighlightMatchKeys({
+      rows,
+      rules,
+      isNullValue: (val) => val === "(NULL)" || val === null,
+    });
+
+    expect(matches.nullKeys.has(dataGridSearchMatchKey(0, 0))).toBe(true);
+    expect(matches.nullKeys.has(dataGridSearchMatchKey(1, 0))).toBe(false);
+    expect(matches.nullKeys.has(dataGridSearchMatchKey(2, 0))).toBe(true);
+  });
+
+  it("handles object values (e.g. JSON)", () => {
+    const rows: CanvasDataGridRow[] = [makeRow(0, [{ a: 1 }]), makeRow(1, [{ a: 2 }]), makeRow(2, [{ a: 1 }])];
+
+    const rules = new Map<number, ColumnHighlightRule>([[0, { duplicates: true }]]);
+    const matches = computeColumnHighlightMatchKeys({ rows, rules });
+
+    expect(matches.duplicateKeys.has(dataGridSearchMatchKey(0, 0))).toBe(true);
+    expect(matches.duplicateKeys.has(dataGridSearchMatchKey(1, 0))).toBe(false);
+    expect(matches.duplicateKeys.has(dataGridSearchMatchKey(2, 0))).toBe(true);
+  });
+});
diff --git a/apps/desktop/src/lib/__tests__/dataGrid/dataGridContextMenu.spec.ts b/apps/desktop/src/lib/__tests__/dataGrid/dataGridContextMenu.spec.ts
index 940e88ee8c..244a4e86bb 100644
--- a/apps/desktop/src/lib/__tests__/dataGrid/dataGridContextMenu.spec.ts
+++ b/apps/desktop/src/lib/__tests__/dataGrid/dataGridContextMenu.spec.ts
@@ -1,5 +1,14 @@
 import { describe, expect, it, vi } from "vitest";
-import { createDataGridCellContextMenuItems, createDataGridColumnContextMenuItems, createDataGridCompactColumnActionItems, createDataGridFilterSubmenu, createDataGridRowContextMenuItems, createDataGridSortMenuItems, dataGridSelectedSortMenuValue } from "@/lib/dataGrid/dataGridContextMenu";
+import {
+  createDataGridCellContextMenuItems,
+  createDataGridColumnContextMenuItems,
+  createDataGridCompactColumnActionItems,
+  createDataGridFilterSubmenu,
+  createDataGridHighlightSubmenu,
+  createDataGridRowContextMenuItems,
+  createDataGridSortMenuItems,
+  dataGridSelectedSortMenuValue,
+} from "@/lib/dataGrid/dataGridContextMenu";
 
 const icon = {};
 
@@ -248,4 +257,125 @@ describe("dataGridContextMenu", () => {
     expect(hideIdentical?.disabled).toBe(false);
     expect(showAll).toBeDefined();
   });
+
+  it("builds a highlight submenu with checked states and clear action", () => {
+    const toggleDuplicates = vi.fn();
+    const toggleNulls = vi.fn();
+    const clear = vi.fn();
+
+    const submenu = createDataGridHighlightSubmenu({
+      label: "Highlight",
+      icon,
+      labels: {
+        duplicates: "Highlight Duplicates",
+        nulls: "Highlight NULL Values",
+        clear: "Clear Highlights",
+      },
+      hasDuplicatesActive: true,
+      hasNullsActive: false,
+      canClear: true,
+      toggleDuplicates,
+      toggleNulls,
+      clear,
+    });
+
+    expect(submenu.label).toBe("Highlight");
+    expect(submenu.children).toHaveLength(4);
+    expect(submenu.children?.[0]).toMatchObject({ label: "Highlight Duplicates", checked: true });
+    expect(submenu.children?.[1]).toMatchObject({ label: "Highlight NULL Values", checked: false });
+    expect(submenu.children?.[2]).toMatchObject({ separator: true });
+    expect(submenu.children?.[3]).toMatchObject({ label: "Clear Highlights", disabled: false });
+
+    submenu.children?.[0]?.action?.();
+    expect(toggleDuplicates).toHaveBeenCalledTimes(1);
+
+    submenu.children?.[1]?.action?.();
+    expect(toggleNulls).toHaveBeenCalledTimes(1);
+
+    submenu.children?.[3]?.action?.();
+    expect(clear).toHaveBeenCalledTimes(1);
+  });
+
+  it("includes highlight submenu in header and context column items", () => {
+    const action = vi.fn();
+    const filter = createDataGridFilterSubmenu({
+      label: "filter",
+      icon,
+      labels: { equals: "equals", notEquals: "not equals", like: "like", notLike: "not like", lessThan: "less", greaterThan: "greater", isNull: "null", isNotNull: "not null", clear: "clear" },
+      apply: action,
+      clear: action,
+    });
+    const highlightSubmenu = createDataGridHighlightSubmenu({
+      label: "highlight",
+      icon,
+      labels: { duplicates: "duplicates", nulls: "nulls", clear: "clear" },
+      toggleDuplicates: action,
+      toggleNulls: action,
+      clear: action,
+    });
+
+    const headerItems = createDataGridColumnContextMenuItems({
+      headerColumn: true,
+      contextColumn: false,
+      canCopyAlterSql: false,
+      canFilter: false,
+      hasSort: false,
+      sortMode: "database",
+      labels: {
+        copyName: "copy name",
+        copyNames: "copy names",
+        details: "details",
+        copyAlterSql: "alter",
+        databaseAscending: "db asc",
+        databaseDescending: "db desc",
+        localAscending: "local asc",
+        localDescending: "local desc",
+        clearSort: "clear sort",
+        freezeToColumn: "freeze",
+        freezeSelectedColumns: "freeze selected",
+        unfreezeColumns: "unfreeze",
+        hideColumn: "hide",
+        hideSelectedColumns: "hide selected",
+        showAllColumnsMenu: "show all",
+      },
+      icons: { copy: icon, columnDetails: icon, database: icon, ascending: icon, descending: icon, clearSort: icon },
+      actions: { copyName: action, copyNames: action, details: action, copyAlterSql: action, sort: action, freezeToColumn: action, freezeSelectedColumns: action, unfreezeColumns: action, hideColumn: action, hideSelectedColumns: action, showAllColumnsMenu: action },
+      filterSubmenu: filter,
+      highlightSubmenu,
+    });
+
+    expect(headerItems.map((item) => item.label)).toContain("highlight");
+
+    const cellItems = createDataGridColumnContextMenuItems({
+      headerColumn: false,
+      contextColumn: true,
+      canCopyAlterSql: false,
+      canFilter: true,
+      hasSort: false,
+      sortMode: "database",
+      labels: {
+        copyName: "copy name",
+        copyNames: "copy names",
+        details: "details",
+        copyAlterSql: "alter",
+        databaseAscending: "db asc",
+        databaseDescending: "db desc",
+        localAscending: "local asc",
+        localDescending: "local desc",
+        clearSort: "clear sort",
+        freezeToColumn: "freeze",
+        freezeSelectedColumns: "freeze selected",
+        unfreezeColumns: "unfreeze",
+        hideColumn: "hide",
+        hideSelectedColumns: "hide selected",
+        showAllColumnsMenu: "show all",
+      },
+      icons: { copy: icon, columnDetails: icon, database: icon, ascending: icon, descending: icon, clearSort: icon },
+      actions: { copyName: action, copyNames: action, details: action, copyAlterSql: action, sort: action, freezeToColumn: action, freezeSelectedColumns: action, unfreezeColumns: action, hideColumn: action, hideSelectedColumns: action, showAllColumnsMenu: action },
+      filterSubmenu: filter,
+      highlightSubmenu,
+    });
+
+    expect(cellItems.map((item) => item.label)).toContain("highlight");
+  });
 });
diff --git a/apps/desktop/src/lib/dataGrid/canvasDataGridRenderer.ts b/apps/desktop/src/lib/dataGrid/canvasDataGridRenderer.ts
index 292a371b0e..932c27127f 100644
--- a/apps/desktop/src/lib/dataGrid/canvasDataGridRenderer.ts
+++ b/apps/desktop/src/lib/dataGrid/canvasDataGridRenderer.ts
@@ -80,6 +80,8 @@ export interface DrawCanvasDataGridOptions {
   editingCell: CanvasEditingCell | null;
   searchMatchKeys: ReadonlySet<number>;
   currentSearchMatch: CanvasSearchMatch | null;
+  duplicateHighlightKeys?: ReadonlySet<number>;
+  nullHighlightKeys?: ReadonlySet<number>;
   formatCell: (value: CellValue, columnIndex: number, row: CanvasDataGridRow) => string;
   isNullValue?: (value: CellValue) => boolean;
   columnIsBoolean?: (columnIndex: number) => boolean;
@@ -124,6 +126,8 @@ interface CanvasRenderState {
   searchFill: string;
   currentSearchFill: string;
   currentSearchBorder: string;
+  duplicateHighlightFill: string;
+  nullHighlightFill: string;
 }
 
 export interface CanvasBackingStoreMetrics {
@@ -341,6 +345,8 @@ function resolveCanvasRenderState(canvas: HTMLCanvasElement, isDark: boolean, st
     searchFill: isDark ? DATA_GRID_DARK_SEARCH_COLORS.match : theme.cellSearch,
     currentSearchFill: isDark ? DATA_GRID_DARK_SEARCH_COLORS.current : theme.cellCurrentSearch,
     currentSearchBorder: isDark ? DATA_GRID_DARK_SEARCH_COLORS.currentBorder : theme.cellCurrentSearchBorder,
+    duplicateHighlightFill: isDark ? "rgba(245, 158, 11, 0.25)" : "rgb(254, 237, 204)",
+    nullHighlightFill: isDark ? "rgba(14, 165, 233, 0.25)" : "rgb(224, 242, 254)",
   };
   canvasRenderStateCache.set(canvas, state);
   return state;
@@ -367,6 +373,8 @@ export function drawCanvasDataGrid(options: DrawCanvasDataGridOptions): boolean
     editingCell,
     searchMatchKeys,
     currentSearchMatch,
+    duplicateHighlightKeys,
+    nullHighlightKeys,
     formatCell,
     isNullValue,
     newRowCellPlaceholder,
@@ -419,7 +427,7 @@ export function drawCanvasDataGrid(options: DrawCanvasDataGridOptions): boolean
   ctx.imageSmoothingEnabled = false;
   ctx.clearRect(0, 0, width, height);
 
-  const { normalFont, tabularFont, semiboldFont, italicFont, theme, searchFill, currentSearchFill, currentSearchBorder } = resolveCanvasRenderState(canvas, isDark, styleKey);
+  const { normalFont, tabularFont, semiboldFont, italicFont, theme, searchFill, currentSearchFill, currentSearchBorder, duplicateHighlightFill, nullHighlightFill } = resolveCanvasRenderState(canvas, isDark, styleKey);
 
   const scrollTop = scroller.scrollTop;
   const scrollLeft = scroller.scrollLeft;
@@ -442,6 +450,8 @@ export function drawCanvasDataGrid(options: DrawCanvasDataGridOptions): boolean
   const firstCol = firstVisibleColumn(offsets, Math.max(0, contentStart - maxPreviewRightShift));
   const columnOffset = offsets[firstCol] ?? 0;
   const paintSearchMatches = !isScrolling && searchMatchKeys.size > 0;
+  const paintDuplicateHighlights = !isScrolling && duplicateHighlightKeys !== undefined && duplicateHighlightKeys.size > 0;
+  const paintNullHighlights = !isScrolling && nullHighlightKeys !== undefined && nullHighlightKeys.size > 0;
   const rowNumberBorderX = crispCanvasLine(rowNumberWidth - 1, scaleX);
   const rowNumberTextX = alignCanvasPixel(Math.max(0, rowNumberWidth - 1) / 2, scaleX);
   const rowTextOffsetY = alignCanvasPixel(CANVAS_DATA_GRID_ROW_HEIGHT / 2, scaleY);
@@ -550,6 +560,8 @@ export function drawCanvasDataGrid(options: DrawCanvasDataGridOptions): boolean
       const selectedBorderVisual = !selectedCell ? false : suppressAllSelectedCellBorders ? false : paintSelectionOuterFrame ? dataGridSelectionFrameKindAtCell(selectionFrames, item.displayIndex, visibleColIdx) !== "range" : true;
       const isSearchMatch = paintSearchMatches && searchMatchKeys.has(dataGridSearchMatchKey(item.displayIndex, actualColIdx));
       const isCurrentSearchMatch = paintSearchMatches && currentSearchMatch?.displayRow === item.displayIndex && currentSearchMatch.col === actualColIdx;
+      const isDuplicateHighlight = paintDuplicateHighlights && duplicateHighlightKeys.has(dataGridSearchMatchKey(item.displayIndex, actualColIdx));
+      const isNullHighlight = !isDuplicateHighlight && paintNullHighlights && nullHighlightKeys.has(dataGridSearchMatchKey(item.displayIndex, actualColIdx));
       const clippedX = Math.max(drawX, rowNumberWidth);
       const cellPaintWidth = Math.min(width, drawX + colWidth) - clippedX;
       if (cellPaintWidth <= 0) return;
@@ -576,6 +588,13 @@ export function drawCanvasDataGrid(options: DrawCanvasDataGridOptions): boolean
         ctx.fillStyle = theme.cellSelectedDirty;
         ctx.fillRect(clippedX, y, cellPaintWidth, CANVAS_DATA_GRID_ROW_HEIGHT);
       }
+      if (isDuplicateHighlight) {
+        ctx.fillStyle = duplicateHighlightFill;
+        ctx.fillRect(clippedX, y, cellPaintWidth, CANVAS_DATA_GRID_ROW_HEIGHT);
+      } else if (isNullHighlight) {
+        ctx.fillStyle = nullHighlightFill;
+        ctx.fillRect(clippedX, y, cellPaintWidth, CANVAS_DATA_GRID_ROW_HEIGHT);
+      }
       if (isSearchMatch) {
         ctx.fillStyle = searchFill;
         ctx.fillRect(clippedX, y, cellPaintWidth, CANVAS_DATA_GRID_ROW_HEIGHT);
diff --git a/apps/desktop/src/lib/dataGrid/dataGridColumnHighlight.ts b/apps/desktop/src/lib/dataGrid/dataGridColumnHighlight.ts
new file mode 100644
index 0000000000..72ce659821
--- /dev/null
+++ b/apps/desktop/src/lib/dataGrid/dataGridColumnHighlight.ts
@@ -0,0 +1,143 @@
+import { dataGridSearchMatchKey, type CanvasDataGridRow } from "@/lib/dataGrid/canvasDataGridRenderer";
+import type { CellValue } from "@/lib/dataGrid/cellValue";
+
+export type ColumnHighlightRule = {
+  duplicates?: boolean;
+  nulls?: boolean;
+};
+
+export function isColumnDuplicateHighlightActive(rules: ReadonlyMap<number, ColumnHighlightRule>, columnIndex: number): boolean {
+  return rules.get(columnIndex)?.duplicates === true;
+}
+
+export function isColumnNullHighlightActive(rules: ReadonlyMap<number, ColumnHighlightRule>, columnIndex: number): boolean {
+  return rules.get(columnIndex)?.nulls === true;
+}
+
+export function hasColumnHighlight(rules: ReadonlyMap<number, ColumnHighlightRule>, columnIndex: number): boolean {
+  const rule = rules.get(columnIndex);
+  return rule ? rule.duplicates === true || rule.nulls === true : false;
+}
+
+export function hasAnyColumnHighlight(rules: ReadonlyMap<number, ColumnHighlightRule>): boolean {
+  for (const rule of rules.values()) {
+    if (rule.duplicates || rule.nulls) return true;
+  }
+  return false;
+}
+
+export function setColumnDuplicateHighlight(rules: Map<number, ColumnHighlightRule>, columnIndex: number, active: boolean): void {
+  const current = rules.get(columnIndex) ?? {};
+  if (active) {
+    rules.set(columnIndex, { ...current, duplicates: true });
+  } else {
+    if (current.nulls) {
+      rules.set(columnIndex, { nulls: true });
+    } else {
+      rules.delete(columnIndex);
+    }
+  }
+}
+
+export function setColumnNullHighlight(rules: Map<number, ColumnHighlightRule>, columnIndex: number, active: boolean): void {
+  const current = rules.get(columnIndex) ?? {};
+  if (active) {
+    rules.set(columnIndex, { ...current, nulls: true });
+  } else {
+    if (current.duplicates) {
+      rules.set(columnIndex, { duplicates: true });
+    } else {
+      rules.delete(columnIndex);
+    }
+  }
+}
+
+export function toggleColumnDuplicateHighlight(rules: Map<number, ColumnHighlightRule>, columnIndex: number): boolean {
+  const next = !isColumnDuplicateHighlightActive(rules, columnIndex);
+  setColumnDuplicateHighlight(rules, columnIndex, next);
+  return next;
+}
+
+export function toggleColumnNullHighlight(rules: Map<number, ColumnHighlightRule>, columnIndex: number): boolean {
+  const next = !isColumnNullHighlightActive(rules, columnIndex);
+  setColumnNullHighlight(rules, columnIndex, next);
+  return next;
+}
+
+export function clearColumnHighlight(rules: Map<number, ColumnHighlightRule>, columnIndex: number): void {
+  rules.delete(columnIndex);
+}
+
+export function clearAllColumnHighlights(rules: Map<number, ColumnHighlightRule>): void {
+  rules.clear();
+}
+
+function cellValueDuplicateKey(value: unknown): unknown {
+  if (typeof value === "object" && value !== null) {
+    try {
+      return JSON.stringify(value);
+    } catch {
+      return String(value);
+    }
+  }
+  return value;
+}
+
+export interface ColumnHighlightMatches {
+  duplicateKeys: Set<number>;
+  nullKeys: Set<number>;
+}
+
+export function computeColumnHighlightMatchKeys(options: { rows: readonly CanvasDataGridRow[]; rules: ReadonlyMap<number, ColumnHighlightRule>; isNullValue?: (value: CellValue) => boolean }): ColumnHighlightMatches {
+  const { rows, rules, isNullValue } = options;
+  const duplicateKeys = new Set<number>();
+  const nullKeys = new Set<number>();
+
+  if (rules.size === 0 || rows.length === 0) {
+    return { duplicateKeys, nullKeys };
+  }
+
+  const checkNull = (val: CellValue): boolean => {
+    return (isNullValue ? isNullValue(val) : val === null) || val === undefined;
+  };
+
+  for (const [colIndex, rule] of rules.entries()) {
+    if (!rule.duplicates && !rule.nulls) continue;
+
+    if (rule.nulls) {
+      for (let i = 0; i < rows.length; i++) {
+        const row = rows[i];
+        if (!row) continue;
+        const value = row.data[colIndex];
+        if (checkNull(value)) {
+          nullKeys.add(dataGridSearchMatchKey(row.displayIndex, colIndex));
+        }
+      }
+    }
+
+    if (rule.duplicates) {
+      const counts = new Map<unknown, number>();
+      for (let i = 0; i < rows.length; i++) {
+        const row = rows[i];
+        if (!row) continue;
+        const value = row.data[colIndex];
+        if (checkNull(value)) continue;
+        const key = cellValueDuplicateKey(value);
+        counts.set(key, (counts.get(key) ?? 0) + 1);
+      }
+
+      for (let i = 0; i < rows.length; i++) {
+        const row = rows[i];
+        if (!row) continue;
+        const value = row.data[colIndex];
+        if (checkNull(value)) continue;
+        const key = cellValueDuplicateKey(value);
+        if ((counts.get(key) ?? 0) > 1) {
+          duplicateKeys.add(dataGridSearchMatchKey(row.displayIndex, colIndex));
+        }
+      }
+    }
+  }
+
+  return { duplicateKeys, nullKeys };
+}
diff --git a/apps/desktop/src/lib/dataGrid/dataGridContextMenu.ts b/apps/desktop/src/lib/dataGrid/dataGridContextMenu.ts
index cbaddacebb..d49e6974dc 100644
--- a/apps/desktop/src/lib/dataGrid/dataGridContextMenu.ts
+++ b/apps/desktop/src/lib/dataGrid/dataGridContextMenu.ts
@@ -70,6 +70,45 @@ export function createDataGridFilterSubmenu(options: {
   };
 }
 
+export function createDataGridHighlightSubmenu(options: {
+  label: string;
+  icon: Component;
+  labels: {
+    duplicates: string;
+    nulls: string;
+    clear: string;
+  };
+  hasDuplicatesActive?: boolean;
+  hasNullsActive?: boolean;
+  canClear?: boolean;
+  toggleDuplicates: () => void;
+  toggleNulls: () => void;
+  clear: () => void;
+}): DataGridContextMenuItem {
+  return {
+    label: options.label,
+    icon: options.icon,
+    children: [
+      {
+        label: options.labels.duplicates,
+        checked: options.hasDuplicatesActive,
+        action: options.toggleDuplicates,
+      },
+      {
+        label: options.labels.nulls,
+        checked: options.hasNullsActive,
+        action: options.toggleNulls,
+      },
+      { label: "", separator: true },
+      {
+        label: options.labels.clear,
+        disabled: !options.canClear,
+        action: options.clear,
+      },
+    ],
+  };
+}
+
 export function createDataGridColumnContextMenuItems(options: {
   headerColumn: boolean;
   contextColumn: boolean;
@@ -111,6 +150,7 @@ export function createDataGridColumnContextMenuItems(options: {
     showAllColumnsMenu: () => void;
   };
   filterSubmenu: DataGridContextMenuItem;
+  highlightSubmenu?: DataGridContextMenuItem;
 }): DataGridContextMenuItem[] {
   const items: DataGridContextMenuItem[] = [];
   if (options.headerColumn) {
@@ -118,6 +158,7 @@ export function createDataGridColumnContextMenuItems(options: {
     items.push({ label: options.labels.copyNames, action: options.actions.copyNames, icon: options.icons.copy });
     items.push({ label: options.labels.details, action: options.actions.details, icon: options.icons.columnDetails });
     if (options.canCopyAlterSql) items.push({ label: options.labels.copyAlterSql, action: options.actions.copyAlterSql, icon: options.icons.copy });
+    if (options.highlightSubmenu) items.push({ label: "", separator: true }, options.highlightSubmenu);
   }
   if (!options.contextColumn && !options.headerColumn) return items;
   if (options.contextColumn) {
@@ -131,6 +172,7 @@ export function createDataGridColumnContextMenuItems(options: {
     items.push({ label: options.labels.localAscending, action: () => options.actions.sort("asc", "local"), icon: options.icons.ascending }, { label: options.labels.localDescending, action: () => options.actions.sort("desc", "local"), icon: options.icons.descending });
     if (options.hasSort) items.push({ label: options.labels.clearSort, action: () => options.actions.sort(null, options.sortMode), icon: options.icons.clearSort });
     if (options.canFilter) items.push({ label: "", separator: true }, options.filterSubmenu);
+    if (!options.headerColumn && options.highlightSubmenu) items.push({ label: "", separator: true }, options.highlightSubmenu);
   }
   if (options.contextVisibleColIdx !== undefined) {
     items.push({ label: "", separator: true });

From 82c275cfa2d768c9fc4dfe455b6b477594e6cd70 Mon Sep 17 00:00:00 2001
From: t8y2 <t8y2@users.noreply.github.com>
Date: Thu, 8 Oct 2026 00:04:19 +0800
Subject: [PATCH 2/2] fix(grid): avoid row materialization for idle highlight
 rules and scope toast counts

---
 apps/desktop/src/components/grid/DataGrid.vue | 31 ++++++++++++++++---
 1 file changed, 27 insertions(+), 4 deletions(-)

diff --git a/apps/desktop/src/components/grid/DataGrid.vue b/apps/desktop/src/components/grid/DataGrid.vue
index 79d82e112b..1e6fe09f42 100644
--- a/apps/desktop/src/components/grid/DataGrid.vue
+++ b/apps/desktop/src/components/grid/DataGrid.vue
@@ -5353,12 +5353,22 @@ watch(
   },
 );
 
-const columnHighlightMatches = computed(() => {
+function columnHighlightMatchesFor(rules: ReadonlyMap<number, ColumnHighlightRule>) {
   return computeColumnHighlightMatchKeys({
     rows: displayItems.value,
-    rules: columnHighlightRules.value,
+    rules,
     isNullValue: (value) => value === null || (usesMongoDocumentGridValues.value && value === MONGO_DOCUMENT_GRID_NULL),
   });
+}
+
+const columnHighlightMatches = computed(() => {
+  // Empty rules must short-circuit before displayItems: the derived key sets are
+  // read on every canvas draw, and row materialization is paid per invalidation
+  // (#8524 precedent).
+  if (columnHighlightRules.value.size === 0) {
+    return { duplicateKeys: new Set<number>(), nullKeys: new Set<number>() };
+  }
+  return columnHighlightMatchesFor(columnHighlightRules.value);
 });
 
 const duplicateHighlightKeys = computed(() => columnHighlightMatches.value.duplicateKeys);
@@ -12559,7 +12569,14 @@ function toggleTargetColumnDuplicateHighlight() {
   }
   columnHighlightRules.value = newRules;
   if (!anyActive) {
-    const count = columnHighlightMatches.value.duplicateKeys.size;
+    // Count only the toggled columns so a toast does not report matches that
+    // belong to other columns' active highlight rules.
+    const targetRules = new Map<number, ColumnHighlightRule>();
+    for (const idx of indexes) {
+      const rule = newRules.get(idx);
+      if (rule) targetRules.set(idx, rule);
+    }
+    const count = columnHighlightMatchesFor(targetRules).duplicateKeys.size;
     if (count > 0) {
       toast(t("grid.highlightDuplicatesFound", { count }));
     } else {
@@ -12578,7 +12595,13 @@ function toggleTargetColumnNullHighlight() {
   }
   columnHighlightRules.value = newRules;
   if (!anyActive) {
-    const count = columnHighlightMatches.value.nullKeys.size;
+    // Scope the toast count to the toggled columns, mirroring the duplicates toast.
+    const targetRules = new Map<number, ColumnHighlightRule>();
+    for (const idx of indexes) {
+      const rule = newRules.get(idx);
+      if (rule) targetRules.set(idx, rule);
+    }
+    const count = columnHighlightMatchesFor(targetRules).nullKeys.size;
     if (count > 0) {
       toast(t("grid.highlightNullsFound", { count }));
     } else {