diff --git a/packages/core/test/use-column-sizer.test.tsx b/packages/core/test/use-column-sizer.test.tsx index 5b85ab22d..69d75e39e 100644 --- a/packages/core/test/use-column-sizer.test.tsx +++ b/packages/core/test/use-column-sizer.test.tsx @@ -308,4 +308,54 @@ describe("use-column-sizer", () => { expect(document.querySelector("canvas")).toBeNull(); }); + + it("Distributes extra width among columns if total column width is less than client width", async () => { + // Setup columns with a known total width smaller than the clientWidth + const SMALL_COLUMNS: GridColumn[] = [ + { + title: "A", + id: "ColumnA", + width: 100, + }, + { + title: "B", + id: "ColumnB", + width: 150, + }, + { + title: "C", + id: "ColumnC", + // intentionally leaving width undefined to check distribution logic + }, + ]; + + const { result } = renderHook(() => + useColumnSizer( + SMALL_COLUMNS, + 500, // clientWidth larger than total width of all defined columns + getShortCellsForSelection, + 400, + 20, + 500, + theme, + getCellRenderer, + abortController + ) + ); + + const columnA = result.current.find(col => col.title === "A"); + const columnB = result.current.find(col => col.title === "B"); + const columnC = result.current.find(col => col.title === "C"); + + expect(columnA).toBeDefined(); + expect(columnB).toBeDefined(); + expect(columnC).toBeDefined(); + + // The original widths + expect(columnA?.width).toBe(100); + expect(columnB?.width).toBe(150); + + // ColumnC should get the remaining space since its width was not initially set + expect(columnC?.width).toBeGreaterThan(0); // Note: specific value depends on your implementation of distributing space + }); });