es-grid-template 1.7.47 → 1.8.0

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

@@ -1,58 +1,20 @@
 import { flexRender } from "@tanstack/react-table";
 import Space from "rc-master-ui/es/space";
 import Command from "../components/command/Command";
-import { getCommonPinningStyles, isNullOrUndefined } from "../hook/utils";
-import { nonActionColumn } from "../hook/constant";
+import ReactDOMServer from 'react-dom/server';
+import { getCommonPinningStyles } from "../hook/utils";
 import Checkbox from "rc-master-ui/es/checkbox/Checkbox";
-import React, { useContext } from "react";
-import { TableContext } from "../useContext";
 import classNames from "classnames";
-import ReactDOMServer from 'react-dom/server';
+import React from "react";
+import { TableContext } from "../useContext";
 const renderCellIndex = props => {
   const {
     parrents,
-    cell,
-    expanded,
-    isDataTree,
-    setExpanded,
-    expandIconColumnIndex
+    cell
   } = props;
   return /*#__PURE__*/React.createElement("span", {
     className: "ui-rc_cell-content"
-  }, cell.column.getIndex() === expandIconColumnIndex && isDataTree && /*#__PURE__*/React.createElement("div", {
-    className: "ui-rc-table-row-expand-trigger",
-    style: {
-      paddingLeft: `${cell.row.depth * 25}px`
-    }
-  }, /*#__PURE__*/React.createElement("div", null, cell.row.getCanExpand() ? /*#__PURE__*/React.createElement("button", {
-    // onClick: row.getToggleExpandedHandler(),
-    onClick: () => {
-      const keys = Object.keys(expanded);
-      // @ts-ignore
-      const tmp = {
-        ...expanded
-      };
-      if (keys.includes(cell.row.id)) {
-        delete tmp[cell.row.id];
-        setExpanded(tmp);
-      } else {
-        setExpanded(old => ({
-          ...old,
-          [cell.row.id]: true
-        }));
-      }
-    },
-    style: {
-      cursor: "pointer"
-    },
-    className: "ui-rc-table-row-expand"
-  }, cell.row.getIsExpanded() ? /*#__PURE__*/React.createElement("span", {
-    className: "ui-rc-table-row-expand-icon ui-rc-table-row-expand-icon-expanded"
-  }) : /*#__PURE__*/React.createElement("span", {
-    className: "ui-rc-table-row-expand-icon ui-rc-table-row-expand-icon-collapsed"
-  })) : /*#__PURE__*/React.createElement("span", {
-    className: "ui-rc-table-row-expand-icon ui-rc-table-row-expand-icon-spaced"
-  }))), parrents.map(pr => {
+  }, parrents.map(pr => {
     return `${pr.index + 1}.`;
   }), cell.row.index + 1);
 };
@@ -74,7 +36,7 @@ const renderCommand = args => {
       visible: typeof it.visible === 'function' ? it.visible?.(record) : it.visible
     };
   }) : [];
-  return /*#__PURE__*/React.createElement("span", {
+  return /*#__PURE__*/React.createElement("div", {
     className: "ui-rc_cell-content"
   }, /*#__PURE__*/React.createElement(Space, null, commands.filter(it => it.visible !== false).map(item => {
     return /*#__PURE__*/React.createElement(Command, {
@@ -85,6 +47,7 @@ const renderCommand = args => {
       onClick: () => {
         commandClick?.({
           id: item.id,
+          // rowId: getRowKey(record, index) as any,
           rowId: record.rowId,
           rowData: record,
           index: cell.row.index,
@@ -110,10 +73,7 @@ const renderSelection = args => {
     setIsSelectionChange
   } = args;
   return /*#__PURE__*/React.createElement("div", {
-    style: {
-
-      // paddingLeft: `${row.depth * 2}rem`,
-    }
+    style: {}
   }, cell.column.getIndex() === expandIconColumnIndex && isDataTree && /*#__PURE__*/React.createElement("div", {
     className: "ui-rc-table-row-expand-trigger",
     style: {
@@ -159,11 +119,6 @@ const renderSelection = args => {
         type: 'rowSelected',
         rowData: row.original
       });
-      // row.toggleSelected()
-
-      // table.setRowSelection({
-      //   [row.id]: true
-      // })
     }
   })));
 };
@@ -171,34 +126,222 @@ const TableBodyCell = props => {
   const {
     cell,
     commandClick,
-    table
+    // tableId,
+    table,
+    isEditing
   } = props;
   const {
-    prefix,
-    setIsSelectionChange,
-    selectionSettings,
     id,
+    prefix,
+    focusedCell,
+    setFocusedCell,
+    // endCell,
+    // startCell,
     originData,
-    wrapSettings,
     expanded,
     setExpanded,
     expandable,
-    isDataTree
-  } = useContext(TableContext);
-  const columnMeta = cell.column.columnDef.meta ?? {};
-  const parrents = cell.row.getParentRows();
+    isDataTree,
+    setIsSelectionChange,
+    selectionSettings,
+    wrapSettings
+    // dataSource
+  } = React.useContext(TableContext);
   const expandIconColumnIndex = expandable?.expandIconColumnIndex;
+  const [isOpenTooltip, setIsOpenTooltip] = React.useState(false);
+  const record = cell.row.original;
+  const columnMeta = cell.column.columnDef.meta ?? {};
+  const tooltipContent = isOpenTooltip === false || columnMeta.type === 'checkbox' ? '' : flexRender(cell.column.columnDef.cell, cell.getContext());
+  const allRows = table.getRowModel().flatRows;
+  const rowNumber = allRows.findIndex(it => it.id === cell.row.id);
+  const colIndex = cell.column.getIndex();
   const isPinned = cell.column.getIsPinned();
   const isLastLeftPinnedColumn = isPinned === "left" && cell.column.getIsLastColumn("left");
   const isFirstRightPinnedColumn = isPinned === "right" && cell.column.getIsFirstColumn("right");
-  const cellContent = columnMeta.type === 'checkbox' ? '' : flexRender(cell.column.columnDef.cell, cell.getContext());
-  const html = ReactDOMServer.renderToStaticMarkup( /*#__PURE__*/React.createElement(React.Fragment, null, cellContent));
-  const hasValue = html.trim().length > 0;
-  return /*#__PURE__*/React.createElement("td", {
+
+  // const selectRowIds = React.useMemo(() => {
+
+  //   return startCell && endCell ? getRowIdsBetween(table, startCell.rowId, endCell.rowId) : []
+
+  // }, [endCell, startCell, table])
+
+  const parrents = cell.row.getParentRows();
+  if (cell.column.id === "#") {
+    return /*#__PURE__*/React.createElement("div", {
+      key: cell.id,
+      className: classNames(`${prefix}-grid-cell ${prefix}-grid-cell-index`, {
+        [`${prefix}-grid-cell-ellipsis`]: true,
+        [`${prefix}-grid-cell-fix-left-last`]: isLastLeftPinnedColumn,
+        [`${prefix}-grid-cell-fix-right-first`]: isFirstRightPinnedColumn,
+        [`${prefix}-grid-cell-text-center`]: columnMeta?.textAlign === 'center',
+        [`${prefix}-grid-cell-text-right`]: columnMeta?.textAlign === 'right'
+        // [`${prefix}-grid-cell-index-selected`]: rowRange?.includes(cell.row.id),
+        // [`${prefix}-grid-cell-index-selected`]: selectRowIds?.includes(cell.row.id),
+      }),
+      style: {
+        display: 'flex',
+        // height: '36px',
+        userSelect: 'none',
+        width: cell.column.getSize(),
+        // flexBasis: cell.column.getSize(),
+        minWidth: cell.column.getSize(),
+        // flex: 1,
+        // maxWidth: cell.column.getSize(),
+        ...getCommonPinningStyles(cell.column)
+      },
+      onMouseDown: () => {}
+    }, cell.column.getIndex() === expandIconColumnIndex && isDataTree && /*#__PURE__*/React.createElement("div", {
+      className: "ui-rc-table-row-expand-trigger",
+      style: {
+        paddingLeft: `${cell.row.depth * 25}px`
+      }
+    }, /*#__PURE__*/React.createElement("div", null, cell.row.getCanExpand() ? /*#__PURE__*/React.createElement("button", {
+      // onClick: row.getToggleExpandedHandler(),
+      onClick: () => {
+        const keys = Object.keys(expanded);
+        // @ts-ignore
+        const tmp = {
+          ...expanded
+        };
+        if (keys.includes(cell.row.id)) {
+          delete tmp[cell.row.id];
+          setExpanded(tmp);
+        } else {
+          setExpanded(old => ({
+            ...old,
+            [cell.row.id]: true
+          }));
+        }
+      },
+      style: {
+        cursor: "pointer"
+      },
+      className: "ui-rc-table-row-expand"
+    }, cell.row.getIsExpanded() ? /*#__PURE__*/React.createElement("span", {
+      className: "ui-rc-table-row-expand-icon ui-rc-table-row-expand-icon-expanded"
+    }) : /*#__PURE__*/React.createElement("span", {
+      className: "ui-rc-table-row-expand-icon ui-rc-table-row-expand-icon-collapsed"
+    })) : /*#__PURE__*/React.createElement("span", {
+      className: "ui-rc-table-row-expand-icon ui-rc-table-row-expand-icon-spaced"
+    }))), renderCellIndex({
+      parrents,
+      cell
+    }));
+  }
+  if (cell.column.id === "command") {
+    return /*#__PURE__*/React.createElement("div", {
+      key: cell.id,
+      className: classNames(`${prefix}-grid-cell ${prefix}-grid-cell-command`, {
+        [`${prefix}-grid-cell-ellipsis`]: true,
+        [`${prefix}-grid-cell-fix-left-last`]: isLastLeftPinnedColumn,
+        [`${prefix}-grid-cell-fix-right-first`]: isFirstRightPinnedColumn,
+        [`${prefix}-grid-cell-text-center`]: columnMeta?.textAlign === 'center',
+        [`${prefix}-grid-cell-text-right`]: columnMeta?.textAlign === 'right'
+      }),
+      style: {
+        display: 'flex',
+        // height: '36px',
+        width: cell.column.getSize(),
+        minWidth: cell.column.getSize(),
+        // flex: 1,
+        // maxWidth: cell.column.getSize(),
+        ...getCommonPinningStyles(cell.column)
+      }
+    }, renderCommand({
+      cell,
+      commandClick,
+      id,
+      data: originData
+    }));
+  }
+  if (cell.column.id === "selection_column") {
+    return /*#__PURE__*/React.createElement("div", {
+      key: cell.id,
+      className: classNames(`${prefix}-grid-cell ${prefix}-grid-cell-selection`, {
+        [`${prefix}-grid-cell-ellipsis`]: true,
+        [`${prefix}-grid-cell-fix-left-last`]: isLastLeftPinnedColumn,
+        [`${prefix}-grid-cell-fix-right-first`]: isFirstRightPinnedColumn,
+        [`${prefix}-grid-cell-text-center`]: columnMeta?.textAlign === 'center',
+        [`${prefix}-grid-cell-text-right`]: columnMeta?.textAlign === 'right'
+      }),
+      style: {
+        display: 'flex',
+        // height: '36px',
+        width: cell.column.getSize(),
+        minWidth: cell.column.getSize(),
+        // flex: 1,
+        // maxWidth: cell.column.getSize(),
+        ...getCommonPinningStyles(cell.column)
+      }
+    }, cell.column.getIndex() === expandIconColumnIndex && isDataTree && /*#__PURE__*/React.createElement("div", {
+      className: "ui-rc-table-row-expand-trigger",
+      style: {
+        paddingLeft: `${cell.row.depth * 25}px`
+      }
+    }, /*#__PURE__*/React.createElement("div", null, cell.row.getCanExpand() ? /*#__PURE__*/React.createElement("button", {
+      // onClick: row.getToggleExpandedHandler(),
+      onClick: () => {
+        const keys = Object.keys(expanded);
+        // @ts-ignore
+        const tmp = {
+          ...expanded
+        };
+        if (keys.includes(cell.row.id)) {
+          delete tmp[cell.row.id];
+          setExpanded(tmp);
+        } else {
+          setExpanded(old => ({
+            ...old,
+            [cell.row.id]: true
+          }));
+        }
+      },
+      style: {
+        cursor: "pointer"
+      },
+      className: "ui-rc-table-row-expand"
+    }, cell.row.getIsExpanded() ? /*#__PURE__*/React.createElement("span", {
+      className: "ui-rc-table-row-expand-icon ui-rc-table-row-expand-icon-expanded"
+    }) : /*#__PURE__*/React.createElement("span", {
+      className: "ui-rc-table-row-expand-icon ui-rc-table-row-expand-icon-collapsed"
+    })) : /*#__PURE__*/React.createElement("span", {
+      className: "ui-rc-table-row-expand-icon ui-rc-table-row-expand-icon-spaced"
+    }))), cell.column.id === "selection_column" && renderSelection({
+      cell,
+      table,
+      selectionSettings,
+      setIsSelectionChange,
+      expanded,
+      isDataTree,
+      setExpanded,
+      expandIconColumnIndex
+    }));
+  }
+  return /*#__PURE__*/React.createElement("div", {
     key: cell.id,
+    ref: el => {
+      if (focusedCell?.rowId === cell.row.id && focusedCell?.colId === cell.column.id && !isEditing) {
+        el?.focus();
+      }
+    },
+    tabIndex: focusedCell?.rowId === cell.row.id && focusedCell?.colId === cell.column.id ? 0 : -1,
+    "data-col-index": colIndex,
+    "data-row-index": rowNumber,
+    "data-col-key": cell.column.id
+    // data-row-key={cell.row.id}
+    ,
+    "data-tooltip-id": `${id}-tooltip-content`,
+    "data-tooltip-html": ReactDOMServer.renderToStaticMarkup( /*#__PURE__*/React.createElement(React.Fragment, null, tooltipContent))
+    // data-tooltip-delay-show={500}
+    ,
+
     className: classNames(`${prefix}-grid-cell`, {
+      // [`${prefix}-grid-cell-ellipsis`]: true,
+
       [`${prefix}-grid-cell-ellipsis`]: !wrapSettings || !(wrapSettings && (wrapSettings.wrapMode === 'Both' || wrapSettings.wrapMode === 'Content')),
-      [`${prefix}-grid-cell-wrap`]: wrapSettings && (wrapSettings.wrapMode === 'Both' || wrapSettings.wrapMode === 'Content'),
+      [`${prefix}-grid-cell-text-wrap`]: wrapSettings && (wrapSettings.wrapMode === 'Both' || wrapSettings.wrapMode === 'Content'),
+      // [`${prefix}-grid-cell-selected`]: isCellSelected,
+
       [`${prefix}-grid-cell-fix-left-last`]: isLastLeftPinnedColumn,
       [`${prefix}-grid-cell-fix-right-first`]: isFirstRightPinnedColumn,
       [`${prefix}-grid-cell-text-center`]: columnMeta?.textAlign === 'center',
@@ -206,19 +349,63 @@ const TableBodyCell = props => {
     }),
     style: {
       display: 'flex',
-      // flex: 1,
       width: cell.column.getSize(),
-      // border: '1px solid #e5e7eb',
+      minWidth: cell.column.getSize(),
+      // flex: 1,
+      // maxWidth: cell.column.getSize(),
+      // height: '36px',
       ...getCommonPinningStyles(cell.column)
     },
-    "data-tooltip-id": `${id}-tooltip-content`,
-    "data-tooltip-html": !hasValue ? '' : ReactDOMServer.renderToStaticMarkup( /*#__PURE__*/React.createElement(React.Fragment, null, cellContent)),
-    onClick: event => {
-      const element = event.target;
-      const container = document.querySelector(".ui-rc-table-row-expand");
-      const isInsideContainer = element.closest(".ui-rc-table-row-expand") && container;
-      if (!isInsideContainer && selectionSettings?.checkboxOnly !== true || isNullOrUndefined(selectionSettings?.mode)) {
-        cell.row.getToggleSelectedHandler()(event);
+    onMouseDown: () => {},
+    onMouseEnter: e => {
+      if (e.target.firstChild?.clientWidth < e.target.firstChild?.scrollWidth) {
+        setIsOpenTooltip(true);
+      }
+    },
+    onMouseUp: () => {},
+    onKeyDown: e => {
+      const flatRows = table.getRowModel().flatRows;
+      if (e.key === 'ArrowDown' && rowNumber < flatRows.length - 1) {
+        const nextIndex = cell.row.index + 1;
+        // const nextIndex = rowNumber + 1
+
+        const nextId = flatRows[nextIndex].id;
+        setFocusedCell?.({
+          colId: cell.column.id,
+          rowId: nextId
+        });
+        const row = document.querySelector(`.ui-rc-grid-row[data-row-key="${nextId}"]`);
+        const cellFocus = row?.querySelector('.ui-rc-grid-cell:not(.ui-rc-grid-cell-selection)');
+        if (cellFocus) {
+          cellFocus.focus();
+        }
+      }
+      if (e.key === 'ArrowUp' && rowNumber > 0) {
+        const prevIndex = cell.row.index - 1;
+        const nextId = flatRows[prevIndex].id;
+        setFocusedCell?.({
+          colId: cell.column.id,
+          rowId: nextId
+        });
+        const row = document.querySelector(`.ui-rc-grid-row[data-row-key="${nextId}"]`);
+        const cellFocus = row?.querySelector('.ui-rc-grid-cell:not(.ui-rc-grid-cell-selection)');
+        if (cellFocus) {
+          cellFocus.focus();
+        }
+      }
+      if (e.ctrlKey && e.code === 'Space') {
+        cell.row.getToggleSelectedHandler()(e);
+        setIsSelectionChange({
+          isChange: true,
+          type: 'rowSelected',
+          rowData: record
+        });
+      }
+    },
+    onDoubleClick: () => {},
+    onClick: e => {
+      if (selectionSettings?.checkboxOnly !== true) {
+        cell.row.getToggleSelectedHandler()(e);
         setIsSelectionChange({
           isChange: true,
           type: 'rowSelected',
@@ -226,29 +413,8 @@ const TableBodyCell = props => {
         });
       }
     }
-  }, cell.column.id === "#" && renderCellIndex({
-    parrents,
-    cell,
-    expanded,
-    isDataTree,
-    setExpanded,
-    expandIconColumnIndex
-  }), cell.column.id === "command" && renderCommand({
-    cell,
-    commandClick,
-    id,
-    data: originData
-  }), cell.column.id === "selection_column" && renderSelection({
-    cell,
-    table,
-    selectionSettings,
-    setIsSelectionChange,
-    expanded,
-    isDataTree,
-    setExpanded,
-    expandIconColumnIndex
-  }), !nonActionColumn.includes(cell.column.id) && (isFirstRightPinnedColumn ? /*#__PURE__*/React.createElement("span", {
-    className: "ui-rc_cell-content"
+  }, /*#__PURE__*/React.createElement("div", {
+    className: classNames('ui-rc_cell-content', {})
   }, cell.column.getIndex() === expandIconColumnIndex && isDataTree && /*#__PURE__*/React.createElement("div", {
     className: "ui-rc-table-row-expand-trigger",
     style: {
@@ -282,39 +448,6 @@ const TableBodyCell = props => {
     className: "ui-rc-table-row-expand-icon ui-rc-table-row-expand-icon-collapsed"
   })) : /*#__PURE__*/React.createElement("span", {
     className: "ui-rc-table-row-expand-icon ui-rc-table-row-expand-icon-spaced"
-  }))), flexRender(cell.column.columnDef.cell, cell.getContext())) : /*#__PURE__*/React.createElement(React.Fragment, null, cell.column.getIndex() === expandIconColumnIndex && isDataTree && /*#__PURE__*/React.createElement("div", {
-    className: "ui-rc-table-row-expand-trigger",
-    style: {
-      paddingLeft: `${cell.row.depth * 25}px`
-    }
-  }, /*#__PURE__*/React.createElement("div", null, cell.row.getCanExpand() ? /*#__PURE__*/React.createElement("button", {
-    // onClick: row.getToggleExpandedHandler(),
-    onClick: () => {
-      const keys = Object.keys(expanded);
-      // @ts-ignore
-      const tmp = {
-        ...expanded
-      };
-      if (keys.includes(cell.row.id)) {
-        delete tmp[cell.row.id];
-        setExpanded(tmp);
-      } else {
-        setExpanded(old => ({
-          ...old,
-          [cell.row.id]: true
-        }));
-      }
-    },
-    style: {
-      cursor: "pointer"
-    },
-    className: "ui-rc-table-row-expand"
-  }, cell.row.getIsExpanded() ? /*#__PURE__*/React.createElement("span", {
-    className: "ui-rc-table-row-expand-icon ui-rc-table-row-expand-icon-expanded"
-  }) : /*#__PURE__*/React.createElement("span", {
-    className: "ui-rc-table-row-expand-icon ui-rc-table-row-expand-icon-collapsed"
-  })) : /*#__PURE__*/React.createElement("span", {
-    className: "ui-rc-table-row-expand-icon ui-rc-table-row-expand-icon-spaced"
-  }))), flexRender(cell.column.columnDef.cell, cell.getContext()))));
+  }))), flexRender(cell.column.columnDef.cell, cell.getContext())));
 };
 export default TableBodyCell;

package/es/table-component/body/TableBodyCellEdit.d.ts

@@ -4,8 +4,8 @@ import React from "react";
 import type { VirtualItem, Virtualizer } from "@tanstack/react-virtual";
 interface TableBodyCellProps<T> {
     table: Table<T>;
-    rowVirtualizer: Virtualizer<HTMLDivElement, HTMLTableRowElement>;
-    columnVirtualizer: Virtualizer<HTMLDivElement, HTMLTableCellElement>;
+    rowVirtualizer: Virtualizer<HTMLDivElement, HTMLDivElement>;
+    columnVirtualizer: Virtualizer<HTMLDivElement, HTMLDivElement>;
     tableId: string;
     cell: Cell<T, unknown>;
     commandClick?: (args: CommandClick<T>) => void;

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

@@ -744,9 +744,9 @@ const TableBodyCellEdit = props => {
     }
   };
   if (cell.column.id === "#") {
-    return /*#__PURE__*/React.createElement("td", {
+    return /*#__PURE__*/React.createElement("div", {
       key: cell.id,
-      className: classNames(`${prefix}-grid-cell ${prefix}-grid-cell-index`, {
+      className: classNames(`${prefix}-grid-cell ${prefix}-grid-cell-index editable`, {
         [`${prefix}-grid-cell-ellipsis`]: true,
         [`${prefix}-grid-cell-fix-left-last`]: isLastLeftPinnedColumn,
         [`${prefix}-grid-cell-fix-right-first`]: isFirstRightPinnedColumn,
@@ -762,7 +762,8 @@ const TableBodyCellEdit = props => {
         width: cell.column.getSize(),
         // flexBasis: cell.column.getSize(),
         minWidth: cell.column.getSize(),
-        maxWidth: cell.column.getSize(),
+        // flex: 1,
+        // maxWidth: cell.column.getSize(),
         ...getCommonPinningStyles(cell.column)
       },
       onMouseDown: () => {
@@ -831,9 +832,9 @@ const TableBodyCellEdit = props => {
     }));
   }
   if (cell.column.id === "command") {
-    return /*#__PURE__*/React.createElement("td", {
+    return /*#__PURE__*/React.createElement("div", {
       key: cell.id,
-      className: classNames(`${prefix}-grid-cell ${prefix}-grid-cell-command`, {
+      className: classNames(`${prefix}-grid-cell ${prefix}-grid-cell-command editable`, {
         [`${prefix}-grid-cell-ellipsis`]: true,
         [`${prefix}-grid-cell-fix-left-last`]: isLastLeftPinnedColumn,
         [`${prefix}-grid-cell-fix-right-first`]: isFirstRightPinnedColumn,
@@ -845,7 +846,8 @@ const TableBodyCellEdit = props => {
         height: '36px',
         width: cell.column.getSize(),
         minWidth: cell.column.getSize(),
-        maxWidth: cell.column.getSize(),
+        // flex: 1,
+        // maxWidth: cell.column.getSize(),
         ...getCommonPinningStyles(cell.column)
       }
     }, renderCommand({
@@ -856,9 +858,9 @@ const TableBodyCellEdit = props => {
     }));
   }
   if (cell.column.id === "selection_column") {
-    return /*#__PURE__*/React.createElement("td", {
+    return /*#__PURE__*/React.createElement("div", {
       key: cell.id,
-      className: classNames(`${prefix}-grid-cell cell-editable111 `, {
+      className: classNames(`${prefix}-grid-cell ${prefix}-grid-cell-selection editable`, {
         [`${prefix}-grid-cell-ellipsis`]: true,
         [`${prefix}-grid-cell-fix-left-last`]: isLastLeftPinnedColumn,
         [`${prefix}-grid-cell-fix-right-first`]: isFirstRightPinnedColumn,
@@ -870,7 +872,8 @@ const TableBodyCellEdit = props => {
         height: '36px',
         width: cell.column.getSize(),
         minWidth: cell.column.getSize(),
-        maxWidth: cell.column.getSize(),
+        // flex: 1,
+        // maxWidth: cell.column.getSize(),
         ...getCommonPinningStyles(cell.column)
       }
     }, cell.column.getIndex() === expandIconColumnIndex && isDataTree && /*#__PURE__*/React.createElement("div", {
@@ -937,7 +940,7 @@ const TableBodyCellEdit = props => {
       });
     }
   };
-  return /*#__PURE__*/React.createElement("td", {
+  return /*#__PURE__*/React.createElement("div", {
     key: cell.id,
     ref: el => {
       if (focusedCell?.rowId === cell.row.id && focusedCell?.colId === cell.column.id && !isEditing) {
@@ -949,13 +952,14 @@ const TableBodyCellEdit = props => {
     "data-row-index": rowNumber,
     "data-col-key": cell.column.id,
     "data-row-key": cell.row.id,
-    "data-tooltip-id": `${id}-tooltip-content`
+    "data-tooltip-id": `${id}-tooltip-content`,
+    "data-tooltip-delay-show": 500
     // data-tooltip-html={!isEditing && !hasValue && !message ? undefined : ReactDOMServer.renderToStaticMarkup(<>{rowError && rowError[cell.column.id]?.field === cell.column.id ? rowError[cell.column.id].message : cellContent}</>)}
     // data-tooltip-content={!isEditing && !message ? undefined : rowError && rowError[cell.column.id]?.field === cell.column.id ? rowError[cell.column.id].message : record[columnMeta.field ?? '']}
     // data-tooltip-content={isEditing && message ? message : rowError && rowError[cell.column.id]?.field === cell.column.id ? rowError[cell.column.id].message : record[columnMeta.field ?? '']}
     ,
     "data-tooltip-html": isEditing && message ? message : rowError && rowError[cell.column.id]?.field === cell.column.id ? rowError[cell.column.id].message : ReactDOMServer.renderToStaticMarkup( /*#__PURE__*/React.createElement(React.Fragment, null, cellContent)),
-    className: classNames(`${prefix}-grid-cell cell-editable `, {
+    className: classNames(`${prefix}-grid-cell cell-editable editable `, {
       [`${prefix}-grid-cell-ellipsis`]: true,
       'cell-editing': isEditing,
       disable: !isEditable(cell.column.columnDef.meta, record),
@@ -978,7 +982,8 @@ const TableBodyCellEdit = props => {
       display: 'flex',
       width: cell.column.getSize(),
       minWidth: cell.column.getSize(),
-      maxWidth: cell.column.getSize(),
+      // flex: 1,
+      // maxWidth: cell.column.getSize(),
       height: '36px',
       ...getCommonPinningStyles(cell.column),
       cursor: isPasting ? 'crosshair' : undefined

package/es/table-component/body/TableBodyRow.d.ts

@@ -5,9 +5,9 @@ import React from "react";
 interface TableBodyRowProps<T> {
     tableId: string;
     table: Table<T>;
-    columnVirtualizer: Virtualizer<HTMLDivElement, HTMLTableCellElement>;
+    columnVirtualizer: Virtualizer<HTMLDivElement, HTMLDivElement>;
     row: Row<T>;
-    rowVirtualizer: Virtualizer<HTMLDivElement, HTMLTableRowElement>;
+    rowVirtualizer: Virtualizer<HTMLDivElement, HTMLDivElement>;
     virtualPaddingLeft: number | undefined;
     virtualPaddingRight: number | undefined;
     virtualRow: VirtualItem;