fix(grid): initialize formatters before column sizing

This commit is contained in:
t8y2
2026-09-09 01:20:33 +08:00
parent f267f4ccfb
commit 20378d61ad
2 changed files with 19 additions and 4 deletions
+10 -4
View File
@@ -2091,7 +2091,8 @@ const columnStructureSignature = computed(() => createDataGridColumnStructureSig
// Bumped once the configured header font is ready, so widths measured against a temporary fallback
// font get re-measured without reacting to unrelated fonts loaded elsewhere in the application.
const dataGridFontReadyTick = ref(0);
const columnHeaderMeasurementKey = computed(() => [tableFontSize.value, tableFontFamily.value, dataGridFontReadyTick.value]);
const columnFormatterReadyTick = ref(0);
const columnHeaderMeasurementKey = computed(() => [tableFontSize.value, tableFontFamily.value, dataGridFontReadyTick.value, columnFormatterReadyTick.value]);
let columnHeaderMeasureContext: CanvasRenderingContext2D | null | undefined;
if (typeof document !== "undefined" && document.fonts) {
@@ -2121,8 +2122,10 @@ function measureColumnHeaderText(text: string): number | undefined {
return Math.ceil(columnHeaderMeasureContext.measureText(text).width);
}
let columnFormatterForWidth: ((columnIndex: number) => ColumnFormatterConfig | undefined) | undefined;
function columnWidthDisplayValue(value: CellValue, columnIndex: number): CellValue {
const formatter = columnFormatter(columnIndex);
const formatter = columnFormatterForWidth?.(columnIndex);
return formatter ? applyColumnFormatter(value, formatter) : value;
}
@@ -2748,8 +2751,6 @@ watch(isScrolling, (scrolling) => {
}
});
initColumnWidths();
watch([visibleColumnIndexes, () => renderedColumnWidths.value.length], () => scheduleColumnLayoutRefresh());
const localFilterScopeKey = computed(() =>
[
props.connectionId ?? "",
@@ -4377,6 +4378,11 @@ const {
formatForeignKeyCellDisplay,
toast,
});
columnFormatterForWidth = columnFormatter;
columnFormatterReadyTick.value++;
initColumnWidths();
watch([visibleColumnIndexes, () => renderedColumnWidths.value.length], () => scheduleColumnLayoutRefresh());
watch(
() => displayRowCount.value,
@@ -12,6 +12,15 @@ describe("DataGrid setup initialization order", () => {
expect(columnResizeInitialization).toBeGreaterThan(tableColumnMetadataDeclaration);
});
it("initializes column formatters before measuring formatted column widths", () => {
const columnFormatterDeclaration = dataGridSource.indexOf("} = useDataGridColumnFormatter({");
const columnWidthInitialization = dataGridSource.lastIndexOf("initColumnWidths();");
expect(columnFormatterDeclaration).toBeGreaterThanOrEqual(0);
expect(columnWidthInitialization).toBeGreaterThan(columnFormatterDeclaration);
expect(dataGridSource).toContain("columnFormatterForWidth?.(columnIndex)");
});
it("initializes where-search capability before the immediate filter preview watcher", () => {
const canUseWhereSearchDeclaration = dataGridSource.indexOf("const canUseWhereSearch = computed");
const filterPreviewDeclaration = dataGridSource.indexOf("const filterPreviewVisible = computed");