diff --git a/src/table/EpicTable/cells/EpicHeader/EpicHeader.tsx b/src/table/EpicTable/cells/EpicHeader/EpicHeader.tsx
index 3a3a248a..a338d096 100644
--- a/src/table/EpicTable/cells/EpicHeader/EpicHeader.tsx
+++ b/src/table/EpicTable/cells/EpicHeader/EpicHeader.tsx
@@ -1,4 +1,4 @@
-import React, { useRef } from 'react';
+import React from 'react';
import { EpicResize } from './EpicResize/EpicResize';
@@ -51,15 +51,11 @@ export function EpicHeader({
height = 44,
onResize
}: Props) {
- // Store the original width of when the EpicHeader was first rendered
- // when minWidth is not specified to prevent resizing only allowing
- // columns to grow.
- const minimumWidth = useRef(minWidth ?? width);
return (
+
) : null}
);
diff --git a/src/table/EpicTable/cells/EpicHeader/EpicResize/EpicResize.tsx b/src/table/EpicTable/cells/EpicHeader/EpicResize/EpicResize.tsx
index e03a8899..ab77bb85 100644
--- a/src/table/EpicTable/cells/EpicHeader/EpicResize/EpicResize.tsx
+++ b/src/table/EpicTable/cells/EpicHeader/EpicResize/EpicResize.tsx
@@ -21,8 +21,9 @@ type Props = {
/**
* The minimum width of the EpicHeader.
* When resizing, the column is not allowed to become smaller than this.
+ * Defaults to the value of width.
*/
- minWidth: number;
+ minWidth?: number;
};
/**
@@ -36,6 +37,11 @@ export function EpicResize({ width, onResize, minWidth }: Props) {
// not throttle the resize will become very jarring / jittery.
const throttledResize = useRef(throttle(onResize, 40));
+ // Store the original width of when the EpicHeader was first rendered
+ // when minWidth is not specified to prevent resizing only allowing
+ // columns to grow.
+ const minimumWidth = useRef(minWidth ?? width);
+
// When the onResize changes re-init the throttle.
useEffect(() => {
throttledResize.current = throttle(onResize, 40);
@@ -47,20 +53,17 @@ export function EpicResize({ width, onResize, minWidth }: Props) {
// Store the x position of the mouse when the resize first started.
const mouseXOnResizeStart = useRef(0);
- const resize = useCallback(
- (event: MouseEvent) => {
- const distance = event.clientX - mouseXOnResizeStart.current;
+ const resize = useCallback((event: MouseEvent) => {
+ const distance = event.clientX - mouseXOnResizeStart.current;
- const nextWidth = widthOnResizeStart.current + distance;
+ const nextWidth = widthOnResizeStart.current + distance;
- const boundedWidth = Math.max(minWidth, nextWidth);
+ const boundedWidth = Math.max(minimumWidth.current, nextWidth);
- throttledResize.current(boundedWidth);
+ throttledResize.current(boundedWidth);
- event.preventDefault();
- },
- [minWidth]
- );
+ event.preventDefault();
+ }, []);
const resizeEnd = useCallback(() => {
// Reset the cursor back to default