Take cell padding into account when measuring column title width (#908)

glideapps · Mar 7, 2024 · 73e63f5 · 73e63f5
1 parent 71bb990
commit 73e63f5
Show file tree

Hide file tree

Showing 2 changed files with 39 additions and 1 deletion.
diff --git a/packages/core/src/data-editor/use-column-sizer.ts b/packages/core/src/data-editor/use-column-sizer.ts
@@ -62,7 +62,7 @@ export function measureColumn(
             }
         }
     }
-    max = Math.max(max, ctx.measureText(c.title).width + 16 + (c.icon === undefined ? 0 : 28));
+    max = Math.max(max, ctx.measureText(c.title).width + theme.cellHorizontalPadding * 2 + (c.icon === undefined ? 0 : 28));
     const final = Math.max(Math.ceil(minColumnWidth), Math.min(Math.floor(maxColumnWidth), Math.ceil(max)));
 
     return {

diff --git a/packages/core/test/use-column-sizer.test.tsx b/packages/core/test/use-column-sizer.test.tsx
@@ -165,6 +165,44 @@ describe("use-column-sizer", () => {
         expect(result.current.sizedColumns[0].width).toBe(212);
     });
 
+    it("Measures column width based on title if longer than data", async () => {
+        const columns: GridColumn[] = [
+            {
+                title: "Some very very long title that exceeds displayData width",
+                id: "ColumnA",
+            },
+            {
+                title: "Short title",
+                id: "ColumnB",
+            },
+        ];
+
+        const { result } = renderHook(() =>
+            useColumnSizer(
+                columns,
+                500,
+                getShortCellsForSelection,
+                400,
+                20,
+                500,
+                mergeAndRealizeTheme(theme, {cellHorizontalPadding: 12}),
+                getCellRenderer,
+                abortController
+            )
+        );
+
+        const columnA = result.current.sizedColumns.find(col => col.title === "Some very very long title that exceeds displayData width");
+        const columnB = result.current.sizedColumns.find(col => col.title === "Short title");
+
+        expect(columnA).toBeDefined();
+        expect(columnB).toBeDefined();
+
+        // Width of column title plus twice the cellHorizontalPadding
+        expect(columnA?.width).toBe(80);
+        // Maximum width of cell data
+        expect(columnB?.width).toBe(40);
+    });
+
     it("Measures the last row", async () => {
         // eslint-disable-next-line sonarjs/no-identical-functions
         renderHook(() =>