Skip to content

Commit 73e63f5

Browse files
authoredMar 7, 2024
Take cell padding into account when measuring column title width (glideapps#908)
1 parent 71bb990 commit 73e63f5

File tree

2 files changed

+39
-1
lines changed

2 files changed

+39
-1
lines changed
 

‎packages/core/src/data-editor/use-column-sizer.ts

+1-1
Original file line numberDiff line numberDiff line change
@@ -62,7 +62,7 @@ export function measureColumn(
6262
}
6363
}
6464
}
65-
max = Math.max(max, ctx.measureText(c.title).width + 16 + (c.icon === undefined ? 0 : 28));
65+
max = Math.max(max, ctx.measureText(c.title).width + theme.cellHorizontalPadding * 2 + (c.icon === undefined ? 0 : 28));
6666
const final = Math.max(Math.ceil(minColumnWidth), Math.min(Math.floor(maxColumnWidth), Math.ceil(max)));
6767

6868
return {

‎packages/core/test/use-column-sizer.test.tsx

+38
Original file line numberDiff line numberDiff line change
@@ -165,6 +165,44 @@ describe("use-column-sizer", () => {
165165
expect(result.current.sizedColumns[0].width).toBe(212);
166166
});
167167

168+
it("Measures column width based on title if longer than data", async () => {
169+
const columns: GridColumn[] = [
170+
{
171+
title: "Some very very long title that exceeds displayData width",
172+
id: "ColumnA",
173+
},
174+
{
175+
title: "Short title",
176+
id: "ColumnB",
177+
},
178+
];
179+
180+
const { result } = renderHook(() =>
181+
useColumnSizer(
182+
columns,
183+
500,
184+
getShortCellsForSelection,
185+
400,
186+
20,
187+
500,
188+
mergeAndRealizeTheme(theme, {cellHorizontalPadding: 12}),
189+
getCellRenderer,
190+
abortController
191+
)
192+
);
193+
194+
const columnA = result.current.sizedColumns.find(col => col.title === "Some very very long title that exceeds displayData width");
195+
const columnB = result.current.sizedColumns.find(col => col.title === "Short title");
196+
197+
expect(columnA).toBeDefined();
198+
expect(columnB).toBeDefined();
199+
200+
// Width of column title plus twice the cellHorizontalPadding
201+
expect(columnA?.width).toBe(80);
202+
// Maximum width of cell data
203+
expect(columnB?.width).toBe(40);
204+
});
205+
168206
it("Measures the last row", async () => {
169207
// eslint-disable-next-line sonarjs/no-identical-functions
170208
renderHook(() =>

0 commit comments

Comments
 (0)
Failed to load comments.