es-grid-template 1.9.98 → 1.9.100

package/es/grid-component/hooks/rowFocus.d.ts

@@ -6,7 +6,7 @@ export declare function getRowFocusHandlers<T>(rowData: T, rowFocus?: RowFocus<T
     onClickCapture: (event: MouseEvent<HTMLElement>) => void;
     onContextMenuCapture: (event: MouseEvent<HTMLElement>) => void;
 };
-/** Report the last focused row after the arrow key is released. */
+/** Report the last focused row after a pause in arrow navigation. */
 export declare function notifyArrowRowFocus<T>(event: ReactKeyboardEvent, rowData: T, method: 'arrowUp' | 'arrowDown', useArrow?: boolean, rowFocus?: RowFocus<T>): void;
 export declare function focusArrowRow(event: ReactKeyboardEvent, rowId: string, columnId: string, scrollToRow: () => void): void;
 export {};

package/es/grid-component/hooks/rowFocus.js

@@ -1,3 +1,4 @@
+const arrowFocusDelay = 700;
 const gridViewportSelector = '[data-grid-scroll], [data-virtuoso-scroller]';
 const pendingArrowFocus = new WeakMap();
 
@@ -19,7 +20,7 @@ export function getRowFocusHandlers(rowData, rowFocus) {
   };
 }
 
-/** Report the last focused row after the arrow key is released. */
+/** Report the last focused row after a pause in arrow navigation. */
 export function notifyArrowRowFocus(event, rowData, method, useArrow, rowFocus) {
   if (useArrow !== true || !rowFocus) return;
   const viewport = event.currentTarget.closest(gridViewportSelector);
@@ -31,6 +32,10 @@ export function notifyArrowRowFocus(event, rowData, method, useArrow, rowFocus)
   });
   const pending = pendingArrowFocus.get(viewport);
   if (pending) {
+    if (pending.timer !== undefined) {
+      view.clearTimeout(pending.timer);
+      pending.timer = undefined;
+    }
     pending.key = event.key;
     pending.notify = notify;
     return;
@@ -41,17 +46,18 @@ export function notifyArrowRowFocus(event, rowData, method, useArrow, rowFocus)
   };
   pendingArrowFocus.set(viewport, focus);
   const cancel = () => {
+    if (focus.timer !== undefined) view.clearTimeout(focus.timer);
     pendingArrowFocus.delete(viewport);
     view.removeEventListener('keyup', release, true);
     view.removeEventListener('blur', cancel);
     view.removeEventListener('pointerdown', cancel, true);
   };
   const release = keyEvent => {
-    if (keyEvent.key !== focus.key) return;
-    cancel();
-    view.setTimeout(() => {
+    if (keyEvent.key !== focus.key || focus.timer !== undefined) return;
+    focus.timer = view.setTimeout(() => {
+      cancel();
       if (viewport.isConnected) focus.notify();
-    }, 0);
+    }, arrowFocusDelay);
   };
 
   // A virtualized row can unmount before keyup reaches its original cell.

package/es/grid-component/type.d.ts

@@ -791,7 +791,7 @@ export type IWrapSettings = {
     wrapMode?: IWrapMode;
 };
 export type SelectionSettings<T = AnyObject> = {
-    /** Invoke rowFocus for the final row after releasing ArrowUp or ArrowDown. Defaults to false. */
+    /** Invoke rowFocus for the final row 700 ms after releasing ArrowUp or ArrowDown. Defaults to false. */
     useArrow?: boolean;
     mode?: 'checkbox' | 'radio';
     type?: 'single' | 'multiple';

package/es/group-component/body/TableBody.js

@@ -27,9 +27,13 @@ const TableBody = ({
     locale
   } = React.useContext(TableContext);
 
+  // Keep measured heights attached to records when expanding, sorting or filtering.
+  const getItemKey = React.useCallback(index => rows[index].id, [rows]);
+
   //dynamic row height virtualization - alternatively you could use a simpler fixed row height strategy without the need for `measureElement`
   const rowVirtualizer = useVirtualizer({
     count: rows.length,
+    getItemKey,
     estimateSize: () => 36,
     //estimate row height for accurate scrollbar dragging
     getScrollElement: () => tableContainerRef.current,

package/es/group-component/body/TableBodyCellEdit.js

@@ -930,7 +930,7 @@ const TableBodyCellEdit = props => {
       }),
       style: {
         display: 'flex',
-        height: '36px',
+        minHeight: 36,
         userSelect: 'none',
         width: cell.column.getSize(),
         // flexBasis: cell.column.getSize(),
@@ -1019,7 +1019,7 @@ const TableBodyCellEdit = props => {
       }),
       style: {
         display: 'flex',
-        height: '36px',
+        minHeight: 36,
         width: cell.column.getSize(),
         minWidth: cell.column.getSize(),
         // flex: 1,
@@ -1045,7 +1045,7 @@ const TableBodyCellEdit = props => {
       }),
       style: {
         display: 'flex',
-        height: '36px',
+        minHeight: 36,
         width: cell.column.getSize(),
         minWidth: cell.column.getSize(),
         // flex: 1,
@@ -1186,7 +1186,8 @@ const TableBodyCellEdit = props => {
       minWidth: cell.column.getSize(),
       // flex: 1,
       // maxWidth: cell.column.getSize(),
-      height: '36px',
+      height: isEditing && canEdit ? 36 : undefined,
+      minHeight: 36,
       ...getCommonPinningStyles(cell.column),
       cursor: isPasting ? 'crosshair' : undefined
     },

package/es/group-component/body/TableBodyRow.js

@@ -55,10 +55,15 @@ const TableBodyRow = ({
   const rowClass = typeof rowClassName === 'function' ? rowClassName(row.original, row.index, row.depth) : rowClassName;
   const rowStyles = typeof onRowStyles === 'function' ? onRowStyles(row.original, row) : onRowStyles;
   const isRowEditable = rowEditable ? rowEditable(row.original) : true;
+
+  // A reused DOM row needs measuring again when its virtual index changes.
+  const measureRow = React.useCallback(element => {
+    rowVirtualizer.measureElement(element);
+  }, [rowVirtualizer, virtualRow.index]);
   return /*#__PURE__*/React.createElement("div", _extends({
     "data-index": virtualRow.index //needed for dynamic row height measurement
     ,
-    ref: rowVirtualizer.measureElement //measure dynamic row height
+    ref: measureRow //measure dynamic row height
     ,
     key: row.id,
     "data-row-key": row.id,
@@ -78,8 +83,7 @@ const TableBodyRow = ({
       //this should always be a `style` as it changes on scroll
       // height: isEditing ? '36px' : undefined,
       gridTemplateColumns: `${templateColumns.map(n => `${n}fr`).join(" ")}`,
-      height: isEditing ? virtualRow.size : undefined,
-      minHeight: isEditing ? undefined : virtualRow.size,
+      minHeight: isEditing ? virtualRow.size : 36,
       ...rowStyles
     }
   }, getRowFocusHandlers(row.original, rowFocus), {

package/es/group-component/hook/utils.d.ts

@@ -196,10 +196,10 @@ export declare const fixColumnsLeft: <RecordType>(columns: ColumnTable<RecordTyp
         value: any;
         rowData: RecordType;
     }) => import("react").ReactElement<any, string | import("react").JSXElementConstructor<any>> | import("react").ReactNode);
-    onCellStyles?: Omit<CSSProperties, "position" | "left" | "right" | "display" | "width" | "minWidth"> | ((cellValue: any, cell: import("@tanstack/react-table").Cell<RecordType, unknown>) => Omit<CSSProperties, "position" | "left" | "right" | "display" | "width" | "minWidth">);
-    onCellHeaderStyles?: Omit<CSSProperties, "position" | "left" | "right" | "display" | "width" | "minWidth"> | ((cell: import("@tanstack/react-table").Header<RecordType, unknown>) => Omit<CSSProperties, "position" | "left" | "right" | "display" | "width" | "minWidth">);
+    onCellStyles?: Omit<CSSProperties, "right" | "left" | "position" | "display" | "width" | "minWidth"> | ((cellValue: any, cell: import("@tanstack/react-table").Cell<RecordType, unknown>) => Omit<CSSProperties, "right" | "left" | "position" | "display" | "width" | "minWidth">);
+    onCellHeaderStyles?: Omit<CSSProperties, "right" | "left" | "position" | "display" | "width" | "minWidth"> | ((cell: import("@tanstack/react-table").Header<RecordType, unknown>) => Omit<CSSProperties, "right" | "left" | "position" | "display" | "width" | "minWidth">);
     onCell?: (rowData: RecordType, index: number) => import("react").TdHTMLAttributes<HTMLTableCellElement>;
-    onCellFooterStyles?: Omit<CSSProperties, "position" | "left" | "right" | "display" | "width" | "minWidth"> | ((cellValue: any, cell: import("@tanstack/react-table").Header<RecordType, unknown>) => Omit<CSSProperties, "position" | "left" | "right" | "display" | "width" | "minWidth">);
+    onCellFooterStyles?: Omit<CSSProperties, "right" | "left" | "position" | "display" | "width" | "minWidth"> | ((cellValue: any, cell: import("@tanstack/react-table").Header<RecordType, unknown>) => Omit<CSSProperties, "right" | "left" | "position" | "display" | "width" | "minWidth">);
     getValue?: (row: any, rowIndex: number) => any;
     getCellProps?: (value: any, row: any, rowIndex: number) => import("./../../grid-component/type").CellProps;
     headerCellProps?: import("./../../grid-component/type").CellProps;

package/es/table-component/body/TableBodyCellEdit.js

@@ -958,7 +958,7 @@ const TableBodyCellEdit = props => {
       }),
       style: {
         display: 'flex',
-        height: '32px',
+        minHeight: 32,
         userSelect: 'none',
         width: cell.column.getSize(),
         // flexBasis: cell.column.getSize(),
@@ -1047,7 +1047,7 @@ const TableBodyCellEdit = props => {
       }),
       style: {
         display: 'flex',
-        height: '32px',
+        minHeight: 32,
         width: cell.column.getSize(),
         minWidth: cell.column.getSize(),
         // flex: 1,
@@ -1073,7 +1073,7 @@ const TableBodyCellEdit = props => {
       }),
       style: {
         display: 'flex',
-        height: '32px',
+        minHeight: 32,
         width: cell.column.getSize(),
         minWidth: cell.column.getSize(),
         // flex: 1,
@@ -1283,7 +1283,8 @@ const TableBodyCellEdit = props => {
       minWidth: cell.column.getSize(),
       // flex: 1,
       // maxWidth: cell.column.getSize(),
-      height: '32px',
+      height: isEditing && canEdit ? 32 : undefined,
+      minHeight: 32,
       ...getCommonPinningStyles(cell.column),
       cursor: isPasting ? 'crosshair' : undefined
     },

package/es/table-component/body/TableBodyRow.js

@@ -84,8 +84,7 @@ const TableBodyRow = ({
       transform: `translateY(${virtualRow.start}px)`,
       //this should always be a `style` as it changes on scroll
       gridTemplateColumns: `${templateColumns.map(n => `${n}fr`).join(" ")}`,
-      height: isEditing ? virtualRow.size : undefined,
-      minHeight: isEditing ? undefined : virtualRow.size,
+      minHeight: isEditing ? virtualRow.size : 32,
       ...rowStyles
     }
   }, getRowFocusHandlers(row.original, rowFocus), {

package/lib/grid-component/hooks/rowFocus.d.ts

@@ -6,7 +6,7 @@ export declare function getRowFocusHandlers<T>(rowData: T, rowFocus?: RowFocus<T
     onClickCapture: (event: MouseEvent<HTMLElement>) => void;
     onContextMenuCapture: (event: MouseEvent<HTMLElement>) => void;
 };
-/** Report the last focused row after the arrow key is released. */
+/** Report the last focused row after a pause in arrow navigation. */
 export declare function notifyArrowRowFocus<T>(event: ReactKeyboardEvent, rowData: T, method: 'arrowUp' | 'arrowDown', useArrow?: boolean, rowFocus?: RowFocus<T>): void;
 export declare function focusArrowRow(event: ReactKeyboardEvent, rowId: string, columnId: string, scrollToRow: () => void): void;
 export {};

package/lib/grid-component/hooks/rowFocus.js

@@ -6,6 +6,7 @@ Object.defineProperty(exports, "__esModule", {
 exports.focusArrowRow = focusArrowRow;
 exports.getRowFocusHandlers = getRowFocusHandlers;
 exports.notifyArrowRowFocus = notifyArrowRowFocus;
+const arrowFocusDelay = 700;
 const gridViewportSelector = '[data-grid-scroll], [data-virtuoso-scroller]';
 const pendingArrowFocus = new WeakMap();
 
@@ -27,7 +28,7 @@ function getRowFocusHandlers(rowData, rowFocus) {
   };
 }
 
-/** Report the last focused row after the arrow key is released. */
+/** Report the last focused row after a pause in arrow navigation. */
 function notifyArrowRowFocus(event, rowData, method, useArrow, rowFocus) {
   if (useArrow !== true || !rowFocus) return;
   const viewport = event.currentTarget.closest(gridViewportSelector);
@@ -39,6 +40,10 @@ function notifyArrowRowFocus(event, rowData, method, useArrow, rowFocus) {
   });
   const pending = pendingArrowFocus.get(viewport);
   if (pending) {
+    if (pending.timer !== undefined) {
+      view.clearTimeout(pending.timer);
+      pending.timer = undefined;
+    }
     pending.key = event.key;
     pending.notify = notify;
     return;
@@ -49,17 +54,18 @@ function notifyArrowRowFocus(event, rowData, method, useArrow, rowFocus) {
   };
   pendingArrowFocus.set(viewport, focus);
   const cancel = () => {
+    if (focus.timer !== undefined) view.clearTimeout(focus.timer);
     pendingArrowFocus.delete(viewport);
     view.removeEventListener('keyup', release, true);
     view.removeEventListener('blur', cancel);
     view.removeEventListener('pointerdown', cancel, true);
   };
   const release = keyEvent => {
-    if (keyEvent.key !== focus.key) return;
-    cancel();
-    view.setTimeout(() => {
+    if (keyEvent.key !== focus.key || focus.timer !== undefined) return;
+    focus.timer = view.setTimeout(() => {
+      cancel();
       if (viewport.isConnected) focus.notify();
-    }, 0);
+    }, arrowFocusDelay);
   };
 
   // A virtualized row can unmount before keyup reaches its original cell.

package/lib/grid-component/type.d.ts

@@ -791,7 +791,7 @@ export type IWrapSettings = {
     wrapMode?: IWrapMode;
 };
 export type SelectionSettings<T = AnyObject> = {
-    /** Invoke rowFocus for the final row after releasing ArrowUp or ArrowDown. Defaults to false. */
+    /** Invoke rowFocus for the final row 700 ms after releasing ArrowUp or ArrowDown. Defaults to false. */
     useArrow?: boolean;
     mode?: 'checkbox' | 'radio';
     type?: 'single' | 'multiple';

package/lib/group-component/body/TableBody.js

@@ -36,9 +36,13 @@ const TableBody = ({
     locale
   } = _react.default.useContext(_useContext.TableContext);
 
+  // Keep measured heights attached to records when expanding, sorting or filtering.
+  const getItemKey = _react.default.useCallback(index => rows[index].id, [rows]);
+
   //dynamic row height virtualization - alternatively you could use a simpler fixed row height strategy without the need for `measureElement`
   const rowVirtualizer = (0, _reactVirtual.useVirtualizer)({
     count: rows.length,
+    getItemKey,
     estimateSize: () => 36,
     //estimate row height for accurate scrollbar dragging
     getScrollElement: () => tableContainerRef.current,

package/lib/group-component/body/TableBodyCellEdit.js

@@ -937,7 +937,7 @@ const TableBodyCellEdit = props => {
       }),
       style: {
         display: 'flex',
-        height: '36px',
+        minHeight: 36,
         userSelect: 'none',
         width: cell.column.getSize(),
         // flexBasis: cell.column.getSize(),
@@ -1026,7 +1026,7 @@ const TableBodyCellEdit = props => {
       }),
       style: {
         display: 'flex',
-        height: '36px',
+        minHeight: 36,
         width: cell.column.getSize(),
         minWidth: cell.column.getSize(),
         // flex: 1,
@@ -1052,7 +1052,7 @@ const TableBodyCellEdit = props => {
       }),
       style: {
         display: 'flex',
-        height: '36px',
+        minHeight: 36,
         width: cell.column.getSize(),
         minWidth: cell.column.getSize(),
         // flex: 1,
@@ -1193,7 +1193,8 @@ const TableBodyCellEdit = props => {
       minWidth: cell.column.getSize(),
       // flex: 1,
       // maxWidth: cell.column.getSize(),
-      height: '36px',
+      height: isEditing && canEdit ? 36 : undefined,
+      minHeight: 36,
       ...(0, _utils.getCommonPinningStyles)(cell.column),
       cursor: isPasting ? 'crosshair' : undefined
     },

package/lib/group-component/body/TableBodyRow.js

@@ -62,10 +62,15 @@ const TableBodyRow = ({
   const rowClass = typeof rowClassName === 'function' ? rowClassName(row.original, row.index, row.depth) : rowClassName;
   const rowStyles = typeof onRowStyles === 'function' ? onRowStyles(row.original, row) : onRowStyles;
   const isRowEditable = rowEditable ? rowEditable(row.original) : true;
+
+  // A reused DOM row needs measuring again when its virtual index changes.
+  const measureRow = _react.default.useCallback(element => {
+    rowVirtualizer.measureElement(element);
+  }, [rowVirtualizer, virtualRow.index]);
   return /*#__PURE__*/_react.default.createElement("div", (0, _extends2.default)({
     "data-index": virtualRow.index //needed for dynamic row height measurement
     ,
-    ref: rowVirtualizer.measureElement //measure dynamic row height
+    ref: measureRow //measure dynamic row height
     ,
     key: row.id,
     "data-row-key": row.id,
@@ -85,8 +90,7 @@ const TableBodyRow = ({
       //this should always be a `style` as it changes on scroll
       // height: isEditing ? '36px' : undefined,
       gridTemplateColumns: `${templateColumns.map(n => `${n}fr`).join(" ")}`,
-      height: isEditing ? virtualRow.size : undefined,
-      minHeight: isEditing ? undefined : virtualRow.size,
+      minHeight: isEditing ? virtualRow.size : 36,
       ...rowStyles
     }
   }, (0, _rowFocus.getRowFocusHandlers)(row.original, rowFocus), {

package/lib/group-component/hook/utils.d.ts

@@ -167,7 +167,7 @@ export declare const fixColumnsLeft: <RecordType>(columns: ColumnTable<RecordTyp
     haveSum?: boolean;
     isSummary?: boolean;
     sumGroup?: boolean;
-    summaryTemplate?: (data: number, key: string) => import("react").ReactElement<any, string | import("react").JSXElementConstructor<any>> | import("react").ReactNode;
+    summaryTemplate?: (data: number, key: string) => import("react").ReactNode | import("react").ReactElement<any, string | import("react").JSXElementConstructor<any>>;
     sorter?: boolean;
     allowFiltering?: boolean;
     allowSortering?: boolean;
@@ -179,27 +179,27 @@ export declare const fixColumnsLeft: <RecordType>(columns: ColumnTable<RecordTyp
     showFilterSearch?: boolean;
     hidden?: boolean;
     visible?: boolean;
-    headerTooltip?: string | boolean | (() => import("react").ReactElement<any, string | import("react").JSXElementConstructor<any>> | import("react").ReactNode);
+    headerTooltip?: string | boolean | (() => import("react").ReactNode | import("react").ReactElement<any, string | import("react").JSXElementConstructor<any>>);
     columnGroupText?: string;
     headerTextAlign?: import("./../../grid-component/type").ITextAlign;
-    headerTemplate?: import("react").ReactElement<any, string | import("react").JSXElementConstructor<any>> | import("react").ReactNode | ((column: ColumnTable<RecordType>) => import("react").ReactElement<any, string | import("react").JSXElementConstructor<any>> | import("react").ReactNode);
+    headerTemplate?: import("react").ReactNode | import("react").ReactElement<any, string | import("react").JSXElementConstructor<any>> | ((column: ColumnTable<RecordType>) => import("react").ReactNode | import("react").ReactElement<any, string | import("react").JSXElementConstructor<any>>);
     fixedType?: import("./../../grid-component/type").FixedType;
     headerTextWrap?: boolean;
     ellipsis?: boolean;
     allowResizing?: boolean;
     align?: import("./../../grid-component/type").ITextAlign;
     textAlign?: import("./../../grid-component/type").ITextAlign;
-    template?: import("react").ReactElement<any, string | import("react").JSXElementConstructor<any>> | import("react").ReactNode | ((args: import("./../../grid-component/type").ColumnTemplate<RecordType>) => import("react").ReactElement<any, string | import("react").JSXElementConstructor<any>> | import("react").ReactNode);
-    linkTemplate?: import("react").ReactElement<any, string | import("react").JSXElementConstructor<any>> | import("react").ReactNode | ((args: import("./../../grid-component/type").ColumnTemplate<RecordType>) => import("react").ReactElement<any, string | import("react").JSXElementConstructor<any>> | import("react").ReactNode);
+    template?: import("react").ReactNode | import("react").ReactElement<any, string | import("react").JSXElementConstructor<any>> | ((args: import("./../../grid-component/type").ColumnTemplate<RecordType>) => import("react").ReactNode | import("react").ReactElement<any, string | import("react").JSXElementConstructor<any>>);
+    linkTemplate?: import("react").ReactNode | import("react").ReactElement<any, string | import("react").JSXElementConstructor<any>> | ((args: import("./../../grid-component/type").ColumnTemplate<RecordType>) => import("react").ReactNode | import("react").ReactElement<any, string | import("react").JSXElementConstructor<any>>);
     showTooltip?: boolean;
     tooltipDescription?: string | ((args: {
         value: any;
         rowData: RecordType;
-    }) => import("react").ReactElement<any, string | import("react").JSXElementConstructor<any>> | import("react").ReactNode);
-    onCellStyles?: Omit<CSSProperties, "width" | "minWidth" | "left" | "right" | "position" | "display"> | ((cellValue: any, cell: import("@tanstack/react-table").Cell<RecordType, unknown>) => Omit<CSSProperties, "width" | "minWidth" | "left" | "right" | "position" | "display">);
-    onCellHeaderStyles?: Omit<CSSProperties, "width" | "minWidth" | "left" | "right" | "position" | "display"> | ((cell: import("@tanstack/react-table").Header<RecordType, unknown>) => Omit<CSSProperties, "width" | "minWidth" | "left" | "right" | "position" | "display">);
+    }) => import("react").ReactNode | import("react").ReactElement<any, string | import("react").JSXElementConstructor<any>>);
+    onCellStyles?: Omit<CSSProperties, "left" | "right" | "display" | "width" | "minWidth" | "position"> | ((cellValue: any, cell: import("@tanstack/react-table").Cell<RecordType, unknown>) => Omit<CSSProperties, "left" | "right" | "display" | "width" | "minWidth" | "position">);
+    onCellHeaderStyles?: Omit<CSSProperties, "left" | "right" | "display" | "width" | "minWidth" | "position"> | ((cell: import("@tanstack/react-table").Header<RecordType, unknown>) => Omit<CSSProperties, "left" | "right" | "display" | "width" | "minWidth" | "position">);
     onCell?: (rowData: RecordType, index: number) => import("react").TdHTMLAttributes<HTMLTableCellElement>;
-    onCellFooterStyles?: Omit<CSSProperties, "width" | "minWidth" | "left" | "right" | "position" | "display"> | ((cellValue: any, cell: import("@tanstack/react-table").Header<RecordType, unknown>) => Omit<CSSProperties, "width" | "minWidth" | "left" | "right" | "position" | "display">);
+    onCellFooterStyles?: Omit<CSSProperties, "left" | "right" | "display" | "width" | "minWidth" | "position"> | ((cellValue: any, cell: import("@tanstack/react-table").Header<RecordType, unknown>) => Omit<CSSProperties, "left" | "right" | "display" | "width" | "minWidth" | "position">);
     getValue?: (row: any, rowIndex: number) => any;
     getCellProps?: (value: any, row: any, rowIndex: number) => import("./../../grid-component/type").CellProps;
     headerCellProps?: import("./../../grid-component/type").CellProps;

package/lib/table-component/body/TableBodyCellEdit.js

@@ -963,7 +963,7 @@ const TableBodyCellEdit = props => {
       }),
       style: {
         display: 'flex',
-        height: '32px',
+        minHeight: 32,
         userSelect: 'none',
         width: cell.column.getSize(),
         // flexBasis: cell.column.getSize(),
@@ -1052,7 +1052,7 @@ const TableBodyCellEdit = props => {
       }),
       style: {
         display: 'flex',
-        height: '32px',
+        minHeight: 32,
         width: cell.column.getSize(),
         minWidth: cell.column.getSize(),
         // flex: 1,
@@ -1078,7 +1078,7 @@ const TableBodyCellEdit = props => {
       }),
       style: {
         display: 'flex',
-        height: '32px',
+        minHeight: 32,
         width: cell.column.getSize(),
         minWidth: cell.column.getSize(),
         // flex: 1,
@@ -1288,7 +1288,8 @@ const TableBodyCellEdit = props => {
       minWidth: cell.column.getSize(),
       // flex: 1,
       // maxWidth: cell.column.getSize(),
-      height: '32px',
+      height: isEditing && canEdit ? 32 : undefined,
+      minHeight: 32,
       ...(0, _utils.getCommonPinningStyles)(cell.column),
       cursor: isPasting ? 'crosshair' : undefined
     },

package/lib/table-component/body/TableBodyRow.js

@@ -91,8 +91,7 @@ const TableBodyRow = ({
       transform: `translateY(${virtualRow.start}px)`,
       //this should always be a `style` as it changes on scroll
       gridTemplateColumns: `${templateColumns.map(n => `${n}fr`).join(" ")}`,
-      height: isEditing ? virtualRow.size : undefined,
-      minHeight: isEditing ? undefined : virtualRow.size,
+      minHeight: isEditing ? virtualRow.size : 32,
       ...rowStyles
     }
   }, (0, _rowFocus.getRowFocusHandlers)(row.original, rowFocus), {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "es-grid-template",
-  "version": "1.9.98",
+  "version": "1.9.100",
   "description": "es-grid-template",
   "keywords": [
     "react",