github/dbx
4
0 Fork 0
mirror of https://github.com/t8y2/dbx.git synced 2026-11-14 14:49:41 +00:00
Code Issues Packages Projects Releases Wiki Activity

fix(grid): restore column jump in transposed table view

Browse Source
This commit is contained in:
zipg authored and GitHub committed 2026-09-15 17:52:53 +08:00
1 parent 5a0e74eec6
commit b06e952ba0
2 files changed
+32 -17
Download Patch File Download Diff File Expand all files Collapse all files

No files matched your search

apps/desktop/src/components/grid/DataGrid.vue
+20 -17
View File
@@ -2176,8 +2176,13 @@ function scrollToColumnIndex(columnIndex: number) {
nextTick(() => {
const visibleColIdx = visibleColumnIndexes.value.indexOf(columnIndex);
if (visibleColIdx < 0) return;
if (isTransposeMode.value) {
scrollTransposeFieldIntoView(visibleColIdx);
return;
}
const scroller = gridRef.value?.querySelector<HTMLElement>(".data-grid-scroller");
if (visibleColIdx < 0 || !scroller) return;
if (!scroller) return;
const targetLeft = Math.max(0, columnContentOffsetLeft(visibleColIdx) - scroller.clientWidth / 2 + (renderedColumnWidths.value[visibleColIdx] ?? 0) / 2);
scroller.scrollLeft = targetLeft;
@@ -4647,21 +4652,23 @@ function scrollToCurrentMatch() {
if (rowEl) rowEl.scrollIntoView({ block: "center" });
}
// In transpose view records are columns (horizontal) and fields are rows
// (vertical). Bring the matched record column into the horizontal viewport and
// the matched field row into the vertical viewport.
function scrollTransposeFieldIntoView(visibleFieldIndex: number) {
const scroller = transposeScrollRef.value;
if (scroller && !(scroller instanceof HTMLElement)) {
(scroller as { scrollToItem?: (index: number) => void }).scrollToItem?.(visibleFieldIndex);
} else if (scroller instanceof HTMLElement) {
scroller.scrollTop = visibleFieldIndex * transposeRowHeight.value;
}
}
// Transpose fields are vertical rows, while records are horizontal columns.
function scrollTransposeMatchIntoView(match: DataGridSearchMatch) {
nextTick(() => {
const scroller = transposeScrollRef.value;
// Both match kinds use `col` as the field (transpose row) index: cell
// matches store the field/value index, column-name matches store the field.
const fieldIndex = match.col;
if (scroller && !(scroller instanceof HTMLElement)) {
// RecycleScroller component instance exposes scrollToItem via vue-virtual-scroller.
(scroller as { scrollToItem?: (index: number) => void }).scrollToItem?.(fieldIndex);
} else if (scroller instanceof HTMLElement) {
scroller.scrollTop = fieldIndex * 30;
}
const visibleFieldIndex = visibleColumnIndexes.value.indexOf(fieldIndex);
if (visibleFieldIndex >= 0) scrollTransposeFieldIntoView(visibleFieldIndex);
if (match.kind === "cell") {
scrollTransposeRecordIntoView(match.displayRow);
}
@@ -8430,12 +8437,7 @@ const DOM_DATA_GRID_ROW_HEIGHT = 26;
function scrollCellIntoView(rowIndex: number, colIndex: number, block: DataGridScrollAlignment = "nearest", previousPageRowIndex?: number) {
if (isTransposeMode.value) {
nextTick(() => {
const scroller = transposeScrollRef.value;
if (scroller && !(scroller instanceof HTMLElement)) {
(scroller as { scrollToItem?: (index: number) => void }).scrollToItem?.(colIndex);
} else if (scroller instanceof HTMLElement) {
scroller.scrollTop = colIndex * 30;
}
scrollTransposeFieldIntoView(colIndex);
scrollTransposeRecordIntoView(rowIndex);
});
return;
@@ -11917,6 +11919,7 @@ useUpdateBlocker(() => (hasPendingChanges.value || hasPendingDataEditorDraft.val
data-native-clipboard
class="sticky left-0 z-10 flex shrink-0 flex-col items-start justify-center overflow-hidden border-r border-border bg-background px-3 py-0"
:class="{
'ring-2 ring-inset ring-primary': highlightedColumnIndex === visibleColumnIndexes[index],
'bg-yellow-200/60 dark:bg-yellow-500/20': transposeHeaderIsSearchMatch(visibleColumnIndexes[index]),
'ring-2 ring-inset ring-yellow-500 bg-yellow-300/60 dark:bg-yellow-500/40': transposeHeaderIsCurrentMatch(visibleColumnIndexes[index]),
}"