es-grid-template 1.7.47 → 1.8.0

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

@@ -8,60 +8,20 @@ exports.default = void 0;
 var _reactTable = require("@tanstack/react-table");
 var _space = _interopRequireDefault(require("rc-master-ui/es/space"));
 var _Command = _interopRequireDefault(require("../components/command/Command"));
+var _server = _interopRequireDefault(require("react-dom/server"));
 var _utils = require("../hook/utils");
-var _constant = require("../hook/constant");
 var _Checkbox = _interopRequireDefault(require("rc-master-ui/lib/checkbox/Checkbox"));
-var _react = _interopRequireWildcard(require("react"));
-var _useContext = require("../useContext");
 var _classnames = _interopRequireDefault(require("classnames"));
-var _server = _interopRequireDefault(require("react-dom/server"));
-function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
-function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && Object.prototype.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
+var _react = _interopRequireDefault(require("react"));
+var _useContext = require("../useContext");
 const renderCellIndex = props => {
   const {
     parrents,
-    cell,
-    expanded,
-    isDataTree,
-    setExpanded,
-    expandIconColumnIndex
+    cell
   } = props;
   return /*#__PURE__*/_react.default.createElement("span", {
     className: "ui-rc_cell-content"
-  }, cell.column.getIndex() === expandIconColumnIndex && isDataTree && /*#__PURE__*/_react.default.createElement("div", {
-    className: "ui-rc-table-row-expand-trigger",
-    style: {
-      paddingLeft: `${cell.row.depth * 25}px`
-    }
-  }, /*#__PURE__*/_react.default.createElement("div", null, cell.row.getCanExpand() ? /*#__PURE__*/_react.default.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.default.createElement("span", {
-    className: "ui-rc-table-row-expand-icon ui-rc-table-row-expand-icon-expanded"
-  }) : /*#__PURE__*/_react.default.createElement("span", {
-    className: "ui-rc-table-row-expand-icon ui-rc-table-row-expand-icon-collapsed"
-  })) : /*#__PURE__*/_react.default.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);
 };
@@ -83,7 +43,7 @@ const renderCommand = args => {
       visible: typeof it.visible === 'function' ? it.visible?.(record) : it.visible
     };
   }) : [];
-  return /*#__PURE__*/_react.default.createElement("span", {
+  return /*#__PURE__*/_react.default.createElement("div", {
     className: "ui-rc_cell-content"
   }, /*#__PURE__*/_react.default.createElement(_space.default, null, commands.filter(it => it.visible !== false).map(item => {
     return /*#__PURE__*/_react.default.createElement(_Command.default, {
@@ -94,6 +54,7 @@ const renderCommand = args => {
       onClick: () => {
         commandClick?.({
           id: item.id,
+          // rowId: getRowKey(record, index) as any,
           rowId: record.rowId,
           rowData: record,
           index: cell.row.index,
@@ -119,10 +80,7 @@ const renderSelection = args => {
     setIsSelectionChange
   } = args;
   return /*#__PURE__*/_react.default.createElement("div", {
-    style: {
-
-      // paddingLeft: `${row.depth * 2}rem`,
-    }
+    style: {}
   }, cell.column.getIndex() === expandIconColumnIndex && isDataTree && /*#__PURE__*/_react.default.createElement("div", {
     className: "ui-rc-table-row-expand-trigger",
     style: {
@@ -168,11 +126,6 @@ const renderSelection = args => {
         type: 'rowSelected',
         rowData: row.original
       });
-      // row.toggleSelected()
-
-      // table.setRowSelection({
-      //   [row.id]: true
-      // })
     }
   })));
 };
@@ -180,34 +133,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
-  } = (0, _react.useContext)(_useContext.TableContext);
-  const columnMeta = cell.column.columnDef.meta ?? {};
-  const parrents = cell.row.getParentRows();
+    isDataTree,
+    setIsSelectionChange,
+    selectionSettings,
+    wrapSettings
+    // dataSource
+  } = _react.default.useContext(_useContext.TableContext);
   const expandIconColumnIndex = expandable?.expandIconColumnIndex;
+  const [isOpenTooltip, setIsOpenTooltip] = _react.default.useState(false);
+  const record = cell.row.original;
+  const columnMeta = cell.column.columnDef.meta ?? {};
+  const tooltipContent = isOpenTooltip === false || columnMeta.type === 'checkbox' ? '' : (0, _reactTable.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' ? '' : (0, _reactTable.flexRender)(cell.column.columnDef.cell, cell.getContext());
-  const html = _server.default.renderToStaticMarkup( /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, cellContent));
-  const hasValue = html.trim().length > 0;
-  return /*#__PURE__*/_react.default.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.default.createElement("div", {
+      key: cell.id,
+      className: (0, _classnames.default)(`${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(),
+        ...(0, _utils.getCommonPinningStyles)(cell.column)
+      },
+      onMouseDown: () => {}
+    }, cell.column.getIndex() === expandIconColumnIndex && isDataTree && /*#__PURE__*/_react.default.createElement("div", {
+      className: "ui-rc-table-row-expand-trigger",
+      style: {
+        paddingLeft: `${cell.row.depth * 25}px`
+      }
+    }, /*#__PURE__*/_react.default.createElement("div", null, cell.row.getCanExpand() ? /*#__PURE__*/_react.default.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.default.createElement("span", {
+      className: "ui-rc-table-row-expand-icon ui-rc-table-row-expand-icon-expanded"
+    }) : /*#__PURE__*/_react.default.createElement("span", {
+      className: "ui-rc-table-row-expand-icon ui-rc-table-row-expand-icon-collapsed"
+    })) : /*#__PURE__*/_react.default.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.default.createElement("div", {
+      key: cell.id,
+      className: (0, _classnames.default)(`${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(),
+        ...(0, _utils.getCommonPinningStyles)(cell.column)
+      }
+    }, renderCommand({
+      cell,
+      commandClick,
+      id,
+      data: originData
+    }));
+  }
+  if (cell.column.id === "selection_column") {
+    return /*#__PURE__*/_react.default.createElement("div", {
+      key: cell.id,
+      className: (0, _classnames.default)(`${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(),
+        ...(0, _utils.getCommonPinningStyles)(cell.column)
+      }
+    }, cell.column.getIndex() === expandIconColumnIndex && isDataTree && /*#__PURE__*/_react.default.createElement("div", {
+      className: "ui-rc-table-row-expand-trigger",
+      style: {
+        paddingLeft: `${cell.row.depth * 25}px`
+      }
+    }, /*#__PURE__*/_react.default.createElement("div", null, cell.row.getCanExpand() ? /*#__PURE__*/_react.default.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.default.createElement("span", {
+      className: "ui-rc-table-row-expand-icon ui-rc-table-row-expand-icon-expanded"
+    }) : /*#__PURE__*/_react.default.createElement("span", {
+      className: "ui-rc-table-row-expand-icon ui-rc-table-row-expand-icon-collapsed"
+    })) : /*#__PURE__*/_react.default.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.default.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": _server.default.renderToStaticMarkup( /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, tooltipContent))
+    // data-tooltip-delay-show={500}
+    ,
+
     className: (0, _classnames.default)(`${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',
@@ -215,19 +356,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',
       ...(0, _utils.getCommonPinningStyles)(cell.column)
     },
-    "data-tooltip-id": `${id}-tooltip-content`,
-    "data-tooltip-html": !hasValue ? '' : _server.default.renderToStaticMarkup( /*#__PURE__*/_react.default.createElement(_react.default.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 || (0, _utils.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',
@@ -235,29 +420,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
-  }), !_constant.nonActionColumn.includes(cell.column.id) && (isFirstRightPinnedColumn ? /*#__PURE__*/_react.default.createElement("span", {
-    className: "ui-rc_cell-content"
+  }, /*#__PURE__*/_react.default.createElement("div", {
+    className: (0, _classnames.default)('ui-rc_cell-content', {})
   }, cell.column.getIndex() === expandIconColumnIndex && isDataTree && /*#__PURE__*/_react.default.createElement("div", {
     className: "ui-rc-table-row-expand-trigger",
     style: {
@@ -291,39 +455,6 @@ const TableBodyCell = props => {
     className: "ui-rc-table-row-expand-icon ui-rc-table-row-expand-icon-collapsed"
   })) : /*#__PURE__*/_react.default.createElement("span", {
     className: "ui-rc-table-row-expand-icon ui-rc-table-row-expand-icon-spaced"
-  }))), (0, _reactTable.flexRender)(cell.column.columnDef.cell, cell.getContext())) : /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, cell.column.getIndex() === expandIconColumnIndex && isDataTree && /*#__PURE__*/_react.default.createElement("div", {
-    className: "ui-rc-table-row-expand-trigger",
-    style: {
-      paddingLeft: `${cell.row.depth * 25}px`
-    }
-  }, /*#__PURE__*/_react.default.createElement("div", null, cell.row.getCanExpand() ? /*#__PURE__*/_react.default.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.default.createElement("span", {
-    className: "ui-rc-table-row-expand-icon ui-rc-table-row-expand-icon-expanded"
-  }) : /*#__PURE__*/_react.default.createElement("span", {
-    className: "ui-rc-table-row-expand-icon ui-rc-table-row-expand-icon-collapsed"
-  })) : /*#__PURE__*/_react.default.createElement("span", {
-    className: "ui-rc-table-row-expand-icon ui-rc-table-row-expand-icon-spaced"
-  }))), (0, _reactTable.flexRender)(cell.column.columnDef.cell, cell.getContext()))));
+  }))), (0, _reactTable.flexRender)(cell.column.columnDef.cell, cell.getContext())));
 };
 var _default = exports.default = TableBodyCell;

package/lib/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/lib/table-component/body/TableBodyCellEdit.js

@@ -750,9 +750,9 @@ const TableBodyCellEdit = props => {
     }
   };
   if (cell.column.id === "#") {
-    return /*#__PURE__*/_react.default.createElement("td", {
+    return /*#__PURE__*/_react.default.createElement("div", {
       key: cell.id,
-      className: (0, _classnames.default)(`${prefix}-grid-cell ${prefix}-grid-cell-index`, {
+      className: (0, _classnames.default)(`${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,
@@ -768,7 +768,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(),
         ...(0, _utils.getCommonPinningStyles)(cell.column)
       },
       onMouseDown: () => {
@@ -837,9 +838,9 @@ const TableBodyCellEdit = props => {
     }));
   }
   if (cell.column.id === "command") {
-    return /*#__PURE__*/_react.default.createElement("td", {
+    return /*#__PURE__*/_react.default.createElement("div", {
       key: cell.id,
-      className: (0, _classnames.default)(`${prefix}-grid-cell ${prefix}-grid-cell-command`, {
+      className: (0, _classnames.default)(`${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,
@@ -851,7 +852,8 @@ const TableBodyCellEdit = props => {
         height: '36px',
         width: cell.column.getSize(),
         minWidth: cell.column.getSize(),
-        maxWidth: cell.column.getSize(),
+        // flex: 1,
+        // maxWidth: cell.column.getSize(),
         ...(0, _utils.getCommonPinningStyles)(cell.column)
       }
     }, renderCommand({
@@ -862,9 +864,9 @@ const TableBodyCellEdit = props => {
     }));
   }
   if (cell.column.id === "selection_column") {
-    return /*#__PURE__*/_react.default.createElement("td", {
+    return /*#__PURE__*/_react.default.createElement("div", {
       key: cell.id,
-      className: (0, _classnames.default)(`${prefix}-grid-cell cell-editable111 `, {
+      className: (0, _classnames.default)(`${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,
@@ -876,7 +878,8 @@ const TableBodyCellEdit = props => {
         height: '36px',
         width: cell.column.getSize(),
         minWidth: cell.column.getSize(),
-        maxWidth: cell.column.getSize(),
+        // flex: 1,
+        // maxWidth: cell.column.getSize(),
         ...(0, _utils.getCommonPinningStyles)(cell.column)
       }
     }, cell.column.getIndex() === expandIconColumnIndex && isDataTree && /*#__PURE__*/_react.default.createElement("div", {
@@ -943,7 +946,7 @@ const TableBodyCellEdit = props => {
       });
     }
   };
-  return /*#__PURE__*/_react.default.createElement("td", {
+  return /*#__PURE__*/_react.default.createElement("div", {
     key: cell.id,
     ref: el => {
       if (focusedCell?.rowId === cell.row.id && focusedCell?.colId === cell.column.id && !isEditing) {
@@ -955,13 +958,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 : _server.default.renderToStaticMarkup( /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, cellContent)),
-    className: (0, _classnames.default)(`${prefix}-grid-cell cell-editable `, {
+    className: (0, _classnames.default)(`${prefix}-grid-cell cell-editable editable `, {
       [`${prefix}-grid-cell-ellipsis`]: true,
       'cell-editing': isEditing,
       disable: !(0, _utils.isEditable)(cell.column.columnDef.meta, record),
@@ -984,7 +988,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',
       ...(0, _utils.getCommonPinningStyles)(cell.column),
       cursor: isPasting ? 'crosshair' : undefined

package/lib/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;