@qsxy/element-plus-react 1.0.2 → 2.0.0

package/dist/Table/TableBody.js

@@ -68,10 +68,10 @@ var TableBody = function TableBody() {
     });
   }, [fixedLeftColumns, fixedRightColumns, flattenColumns]);
   var isTreeTalbe = useMemo(function () {
-    return props.data.some(function (item) {
+    return data.some(function (item) {
       return treeProps.children in item || treeProps.hasChildren in item;
     });
-  }, [props.data, treeProps.children, treeProps.hasChildren]);
+  }, [data, treeProps.children, treeProps.hasChildren]);
 
   // useEffect(() => {
   //     if (rowKey && isTreeTalbe && !defaultExpandAll) {
@@ -196,7 +196,7 @@ var TableBody = function TableBody() {
         key: "".concat(tableId, "_").concat(rowIndex, "_").concat(column.id),
         rowRef: rowRef
       });
-    }), fixedRightColumns.map(function (column) {
+    }), fixedRightColumns.map(function (column, index) {
       columnIndex++;
       var _isMerge3 = isMerge(row, rowIndex, column, columnIndex),
         rowSpan = _isMerge3.rowSpan,
@@ -213,7 +213,7 @@ var TableBody = function TableBody() {
         rowSpan: rowSpan,
         colSpan: colSpan,
         className: classNames(bm('fixed-column', 'right'), is({
-          'first-column': columnIndex === 0
+          'first-column': index === 0
         })),
         style: {
           right: column.offsetWidth

package/dist/Table/TableCell.js

@@ -1,11 +1,11 @@
 function _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (o) { return typeof o; } : function (o) { return o && "function" == typeof Symbol && o.constructor === Symbol && o !== Symbol.prototype ? "symbol" : typeof o; }, _typeof(o); }
-var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7, _templateObject8, _templateObject9, _templateObject10, _templateObject11, _templateObject12, _templateObject13;
+var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7, _templateObject8, _templateObject9, _templateObject10, _templateObject11;
+function _taggedTemplateLiteral(strings, raw) { if (!raw) { raw = strings.slice(0); } return Object.freeze(Object.defineProperties(strings, { raw: { value: Object.freeze(raw) } })); }
 function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
 function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
 function _defineProperty(obj, key, value) { key = _toPropertyKey(key); if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
 function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol" == _typeof(i) ? i : String(i); }
 function _toPrimitive(t, r) { if ("object" != _typeof(t) || !t) return t; var e = t[Symbol.toPrimitive]; if (void 0 !== e) { var i = e.call(t, r || "default"); if ("object" != _typeof(i)) return i; throw new TypeError("@@toPrimitive must return a primitive value."); } return ("string" === r ? String : Number)(t); }
-function _taggedTemplateLiteral(strings, raw) { if (!raw) { raw = strings.slice(0); } return Object.freeze(Object.defineProperties(strings, { raw: { value: Object.freeze(raw) } })); }
 function _slicedToArray(arr, i) { return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest(); }
 function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
 function _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o === "string") return _arrayLikeToArray(o, minLen); var n = Object.prototype.toString.call(o).slice(8, -1); if (n === "Object" && o.constructor) n = o.constructor.name; if (n === "Map" || n === "Set") return Array.from(o); if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen); }
@@ -32,6 +32,7 @@ import { TableBodyContext, TableContext } from "./TableContext";
 import { activeRow, onCheck } from "./hooks/useSelection";
 import { addTreeChildren, getAllChildren, mergeTreeData } from "./treeUtil";
 import { createTablePopper, getRowIdentity, getRowIndex, getStyle, insertAfter } from "./util";
+var removePopper;
 var TableCell = function TableCell(p) {
   var row = p.row,
     column = p.column,
@@ -110,9 +111,12 @@ var TableCell = function TableCell(p) {
   /** 鼠标悬浮单元格事件 */
   var handleCellMouseEnter = useCallback(function (_row, _column, event) {
     onCellMouseEnter === null || onCellMouseEnter === void 0 || onCellMouseEnter(_row, _column, event.currentTarget, event);
-    if (!['index', 'selection'].includes((_column === null || _column === void 0 ? void 0 : _column.type) || '') && column.showOverflowTooltip) {
+    if (removePopper) {
+      removePopper();
+    }
+    if (!['index', 'selection', 'expand'].includes((_column === null || _column === void 0 ? void 0 : _column.type) || '') && (props.showOverflowTooltip || column.showOverflowTooltip)) {
       var cell = event.currentTarget;
-      var cellChild = event.currentTarget.querySelector('.' + e(_templateObject || (_templateObject = _taggedTemplateLiteral(["cell-content"]))));
+      var cellChild = event.currentTarget.querySelector('.cell');
       var range = document.createRange();
       range.setStart(cellChild, 0);
       range.setEnd(cellChild, cellChild.childNodes.length);
@@ -120,14 +124,37 @@ var TableCell = function TableCell(p) {
       var padding = (Number.parseInt(getStyle(cellChild, 'paddingLeft'), 10) || 0) + (Number.parseInt(getStyle(cellChild, 'paddingRight'), 10) || 0);
       if (rangeWidth + padding > cellChild.offsetWidth || cellChild.scrollWidth > cellChild.offsetWidth) {
         // tableRefs.tableWrapper.current && console.log(tableRefs.tableWrapper.current.getBoundingClientRect());
-        tableRefs.tableWrapper.current && createTablePopper(tableRefs.tableWrapper.current,
-        // {
-        //     getBoundingClientRect: tableRefs.tableWrapper.current.getBoundingClientRect(),
-        // },
-        cell, cell.innerText || cell.textContent || '', tooltipRef);
+        var popperContent = cell.innerText || cell.textContent || '';
+        if (props.tooltipFormatter) {
+          popperContent = props.tooltipFormatter({
+            row: _row,
+            column: _column,
+            cellValue: cell.innerText || cell.textContent || ''
+          });
+        } else if (column.tooltipFormatter) {
+          popperContent = column.tooltipFormatter({
+            row: _row,
+            column: _column,
+            cellValue: cell.innerText || cell.textContent || ''
+          });
+        }
+        if (tableRefs.tableWrapper.current) {
+          removePopper = createTablePopper(tableRefs.tableWrapper.current, cell, popperContent, tooltipRef);
+        }
       }
     }
-  }, [column.showOverflowTooltip, e, onCellMouseEnter, tableRefs.tableWrapper]);
+  }, [onCellMouseEnter, props, column, tableRefs.tableWrapper]);
+
+  /** 鼠标离开单元格事件 - 关闭 tooltip */
+  var handleCellMouseLeave = useCallback(function (_row, _column, event) {
+    onCellMouseLeave === null || onCellMouseLeave === void 0 || onCellMouseLeave(_row, _column, event.currentTarget, event);
+    // 鼠标离开单元格时，立即隐藏 tooltip
+    if (tooltipRef.current) {
+      setTimeout(function () {
+        tooltipRef.current.onClose();
+      }, 0);
+    }
+  }, [onCellMouseLeave, tooltipRef]);
   var rowIndex = useMemo(function () {
     return getRowIndex(column.index, p.rowIndex, row);
   }, [column.index, p.rowIndex, row]);
@@ -168,13 +195,13 @@ var TableCell = function TableCell(p) {
         height: rowHeight
       });
     }
-    if (tableLayout === 'fixed' && _column.showOverflowTooltip) {
+    if (tableLayout === 'fixed' && (props.showOverflowTooltip || _column.showOverflowTooltip)) {
       Object.assign(res, {
         width: (column.width || column.realWidth || column.minWidth || 80) - 1
       });
     }
     return res;
-  }, [column.minWidth, column.realWidth, column.width, rowHeight, tableLayout]);
+  }, [column.minWidth, column.realWidth, column.width, props.showOverflowTooltip, rowHeight, tableLayout]);
 
   /** 获取树形表格行层级 */
   var getLevel = useCallback(function (div) {
@@ -215,7 +242,7 @@ var TableCell = function TableCell(p) {
                   display: true
                 }) : item;
               });
-              var expandIcon = nextRow.current.querySelector(".".concat(e(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["expand-icon"])))));
+              var expandIcon = nextRow.current.querySelector(".".concat(e(_templateObject || (_templateObject = _taggedTemplateLiteral(["expand-icon"])))));
               if (expandIcon) {
                 // 下一行层级为0或层级小于当前行层级时，说明子级行遍历结束，跳出循环
                 var _nextLevel = getLevel(nextRow.current.nextSibling);
@@ -348,7 +375,7 @@ var TableCell = function TableCell(p) {
     if (rootRef.current && trRef.current && expand.current === true) {
       rootRef.current.render( /*#__PURE__*/createPortal( /*#__PURE__*/React.createElement("td", {
         colSpan: flattenColumns.length,
-        className: classNames(e(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["cell"]))), e(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["expanded-cell"]))))
+        className: classNames(e(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["cell"]))), e(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["expanded-cell"]))))
       }, (column === null || column === void 0 ? void 0 : column.renderCell) && column.renderCell({
         row: row,
         column: column,
@@ -389,7 +416,7 @@ var TableCell = function TableCell(p) {
               rootRef.current = createRoot(tr);
               rootRef.current.render( /*#__PURE__*/createPortal( /*#__PURE__*/React.createElement("td", {
                 colSpan: flattenColumns.length,
-                className: classNames(e(_templateObject5 || (_templateObject5 = _taggedTemplateLiteral(["cell"]))), e(_templateObject6 || (_templateObject6 = _taggedTemplateLiteral(["expanded-cell"]))))
+                className: classNames(e(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["cell"]))), e(_templateObject5 || (_templateObject5 = _taggedTemplateLiteral(["expanded-cell"]))))
               }, (column === null || column === void 0 ? void 0 : column.renderCell) && column.renderCell({
                 row: row,
                 column: column,
@@ -420,13 +447,13 @@ var TableCell = function TableCell(p) {
   /**  */
   var treeSuffix = useMemo(function () {
     return isTreeExpandCell(column.id) && /*#__PURE__*/React.createElement(React.Fragment, null, column.level > 0 && /*#__PURE__*/React.createElement("span", {
-      className: e(_templateObject7 || (_templateObject7 = _taggedTemplateLiteral(["indent"]))),
+      className: e(_templateObject6 || (_templateObject6 = _taggedTemplateLiteral(["indent"]))),
       style: {
         paddingLeft: indent * column.level
       }
-    }), (isNotEmpty(row[treeProps.children]) || row[treeProps.hasChildren]) && /*#__PURE__*/React.createElement("div", {
+    }), (isNotEmpty(row[treeProps.children]) || row[treeProps.hasChildren]) && /*#__PURE__*/React.createElement("button", {
       ref: expandCell,
-      className: classNames(e(_templateObject8 || (_templateObject8 = _taggedTemplateLiteral(["expand-icon"]))), _defineProperty({}, em('expand-icon', 'expanded'), row === null || row === void 0 ? void 0 : row.expanded)),
+      className: classNames(e(_templateObject7 || (_templateObject7 = _taggedTemplateLiteral(["expand-icon"]))), _defineProperty({}, em('expand-icon', 'expanded'), row === null || row === void 0 ? void 0 : row.expanded)),
       onClick: handleExpandTreeCell
     }, loading ? /*#__PURE__*/React.createElement(Icon, {
       name: "loader",
@@ -435,7 +462,7 @@ var TableCell = function TableCell(p) {
     }) : /*#__PURE__*/React.createElement(Icon, {
       name: "angle-right"
     })), isEmpty(row[treeProps.children]) && !row[treeProps.hasChildren] && /*#__PURE__*/React.createElement("span", {
-      className: e(_templateObject9 || (_templateObject9 = _taggedTemplateLiteral(["placeholder"])))
+      className: e(_templateObject8 || (_templateObject8 = _taggedTemplateLiteral(["placeholder"])))
     }));
   }, [column.id, column.level, e, em, handleExpandTreeCell, indent, isTreeExpandCell, loading, row, treeProps.children, treeProps.hasChildren]);
 
@@ -451,7 +478,7 @@ var TableCell = function TableCell(p) {
 
   return /*#__PURE__*/React.createElement("td", {
     ref: tdRef,
-    className: classNames(column.id, e(_templateObject10 || (_templateObject10 = _taggedTemplateLiteral(["cell"]))), _defineProperty({}, bm('column', 'selection'), column.type === 'selection'), column.className, is(column.align), className, typeof cellClassName === 'function' ? cellClassName === null || cellClassName === void 0 ? void 0 : cellClassName({
+    className: classNames(column.id, e(_templateObject9 || (_templateObject9 = _taggedTemplateLiteral(["cell"]))), _defineProperty({}, bm('column', 'selection'), column.type === 'selection'), column.className, is(column.align), className, typeof cellClassName === 'function' ? cellClassName === null || cellClassName === void 0 ? void 0 : cellClassName({
       row: row,
       column: column,
       rowIndex: rowIndex,
@@ -469,7 +496,7 @@ var TableCell = function TableCell(p) {
       return handleCellMouseEnter(row, column, event);
     },
     onMouseLeave: function onMouseLeave(event) {
-      return onCellMouseLeave === null || onCellMouseLeave === void 0 ? void 0 : onCellMouseLeave(row, column, event.currentTarget, event);
+      return handleCellMouseLeave(row, column, event);
     },
     onContextMenu: function onContextMenu(event) {
       onCellContextmenu === null || onCellContextmenu === void 0 || onCellContextmenu(row, column, event.currentTarget, event);
@@ -491,23 +518,21 @@ var TableCell = function TableCell(p) {
       onRowDblclick === null || onRowDblclick === void 0 || onRowDblclick(row, column, event);
     }
   }, /*#__PURE__*/React.createElement("div", {
-    className: classNames(e(_templateObject11 || (_templateObject11 = _taggedTemplateLiteral(["cell-content"]))), _defineProperty({}, b('tooltip', false), column.showOverflowTooltip)),
+    className: classNames('cell', _defineProperty({}, b('tooltip', false), props.showOverflowTooltip || column.showOverflowTooltip)),
     style: getCellStyle(column)
   }, function () {
     if (column.type === 'index') {
       return /*#__PURE__*/React.createElement("div", {
-        className: e(_templateObject12 || (_templateObject12 = _taggedTemplateLiteral(["cell-index"])))
+        className: e(_templateObject10 || (_templateObject10 = _taggedTemplateLiteral(["cell-index"])))
       }, rowIndex);
     } else if (column.type === 'expand') {
-      return /*#__PURE__*/React.createElement("div", {
+      return /*#__PURE__*/React.createElement("button", {
         ref: expandCell,
-        className: e(_templateObject13 || (_templateObject13 = _taggedTemplateLiteral(["expand-icon"]))),
+        className: e(_templateObject11 || (_templateObject11 = _taggedTemplateLiteral(["expand-icon"]))),
         onClick: handleExpand
       }, /*#__PURE__*/React.createElement(Icon, {
         name: "angle-right"
       }));
-    } else if (column.type === 'drag') {
-      // return <DragHandle />;
     } else if (column.type === 'selection') {
       return /*#__PURE__*/React.createElement(Checkbox, {
         onClick: function onClick(event) {
@@ -534,5 +559,5 @@ var TableCell = function TableCell(p) {
     }
   }()));
 };
-TableCell.displayName = 'TableCell';
+TableCell.displayName = 'ElTableCell';
 export default TableCell;

package/dist/Table/TableColumn.d.ts

@@ -1,7 +1,7 @@
 import { FC } from 'react';
 import { TableColumnProps } from './typings';
 export interface TableColumnRef {
-    props: TableColumnProps<any>;
+    props: TableColumnProps;
 }
-declare const TableColumn: FC<TableColumnProps<any>>;
+declare const TableColumn: FC<TableColumnProps>;
 export default TableColumn;

package/dist/Table/TableHeader.js

@@ -94,7 +94,7 @@ var TableHeader = function TableHeader(_ref) {
         columnIndex: columnIndex,
         scheduleLayout: scheduleLayout
       });
-    }), rowIndex === 0 && fixedRightColumns.map(function (column) {
+    }), rowIndex === 0 && fixedRightColumns.map(function (column, index) {
       columnIndex++;
       return /*#__PURE__*/React.createElement(TableHeaderCell, {
         key: column.id,
@@ -104,7 +104,7 @@ var TableHeader = function TableHeader(_ref) {
         columnIndex: columnIndex,
         className: classNames(bm('fixed-column', 'right'), is({
           leaf: column.isSubColumn,
-          'first-column': columnIndex === 0
+          'first-column': index === 0
         })),
         style: {
           right: column.offsetWidth

package/dist/Table/TableHeaderCell.js

@@ -1,5 +1,5 @@
 function _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (o) { return typeof o; } : function (o) { return o && "function" == typeof Symbol && o.constructor === Symbol && o !== Symbol.prototype ? "symbol" : typeof o; }, _typeof(o); }
-var _templateObject, _templateObject2;
+var _templateObject;
 function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
 function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
 function _defineProperty(obj, key, value) { key = _toPropertyKey(key); if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
@@ -205,7 +205,7 @@ var TableHeaderCell = function TableHeaderCell(p) {
     },
     onMouseOut: handleMouseOut
   }, /*#__PURE__*/React.createElement("div", {
-    className: e(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["cell-content"])))
+    className: 'cell'
   }, function () {
     if (data.length > 0 && column.type === 'selection') {
       var _disabledRows$current, _state$selection, _state$selection2, _disabledRows$current2, _state$selection3;

package/dist/Table/hooks/useResize.js

@@ -15,8 +15,6 @@ export var useResize = function useResize(scheduleLayout) {
     /* istanbul ignore if */
     if (draggingColumn.current && props.border) {
       dragging.current = true;
-
-      // emit('set-drag-visible', true);
       var tableEl = tableRefs.tableWrapper;
       if (tableEl.current && tableRefs.resizeHelper.current) {
         var resizeProxy = tableRefs.resizeHelper.current;

package/dist/Table/hooks/useTable.d.ts

@@ -3,7 +3,7 @@ import { TableColumnCtx, TableColumnProps, TableProps, TableRefs, TreeNode } fro
 export declare const useTable: <T extends object>(props: TableProps<T>, refs: TableRefs, tableId: string) => {
     data: T[];
     setData: React.Dispatch<React.SetStateAction<T[]>>;
-    _children: React.ReactElement<TableColumnProps<T>, string | React.JSXElementConstructor<any>>[];
+    _children: React.ReactElement<TableColumnProps, string | React.JSXElementConstructor<any>>[];
     columns: TableColumnCtx<T>[][];
     flattenColumns: TableColumnCtx<T>[];
     fixedLeftColumns: TableColumnCtx<T>[];

package/dist/Table/hooks/useTable.js

@@ -1,4 +1,8 @@
 function _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (o) { return typeof o; } : function (o) { return o && "function" == typeof Symbol && o.constructor === Symbol && o !== Symbol.prototype ? "symbol" : typeof o; }, _typeof(o); }
+function _toConsumableArray(arr) { return _arrayWithoutHoles(arr) || _iterableToArray(arr) || _unsupportedIterableToArray(arr) || _nonIterableSpread(); }
+function _nonIterableSpread() { throw new TypeError("Invalid attempt to spread non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
+function _iterableToArray(iter) { if (typeof Symbol !== "undefined" && iter[Symbol.iterator] != null || iter["@@iterator"] != null) return Array.from(iter); }
+function _arrayWithoutHoles(arr) { if (Array.isArray(arr)) return _arrayLikeToArray(arr); }
 function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
 function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
 function _defineProperty(obj, key, value) { key = _toPropertyKey(key); if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
@@ -10,7 +14,6 @@ function _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o =
 function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) arr2[i] = arr[i]; return arr2; }
 function _iterableToArrayLimit(r, l) { var t = null == r ? null : "undefined" != typeof Symbol && r[Symbol.iterator] || r["@@iterator"]; if (null != t) { var e, n, i, u, a = [], f = !0, o = !1; try { if (i = (t = t.call(r)).next, 0 === l) { if (Object(t) !== t) return; f = !1; } else for (; !(f = (e = i.call(t)).done) && (a.push(e.value), a.length !== l); f = !0); } catch (r) { o = !0, n = r; } finally { try { if (!f && null != t.return && (u = t.return(), Object(u) !== u)) return; } finally { if (o) throw n; } } return a; } }
 function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
-/* eslint-disable indent */
 import { useDebounceFn } from 'ahooks';
 import cloneDeep from 'lodash/cloneDeep';
 import { Children, useCallback, useEffect, useMemo, useRef, useState } from 'react';
@@ -43,10 +46,12 @@ export var useTable = function useTable(props, refs, tableId) {
     }, (_props$treeProps = props.treeProps) !== null && _props$treeProps !== void 0 ? _props$treeProps : {});
   }, [props.treeProps]);
   useEffect(function () {
-    isTree.current = props.rowKey && props.data.some(function (item) {
-      return treeProps.children in item || treeProps.hasChildren in item;
-    });
-    sortedData.current = initialData.current = cloneDeep(props.data);
+    if (props.data) {
+      isTree.current = props.rowKey && props.data.some(function (item) {
+        return treeProps.children in item || treeProps.hasChildren in item;
+      });
+      sortedData.current = initialData.current = cloneDeep(props.data);
+    }
     if (isTree.current) {
       var _data = flatTreeData(cloneDeep(props.data), treeProps, props.rowKey, props.defaultExpandAll, props.expandRowKeys);
       treeNodes.current = _data.map(function (item) {
@@ -71,10 +76,10 @@ export var useTable = function useTable(props, refs, tableId) {
       });
       setData(_data);
     } else {
-      setData(props.data);
+      setData(props !== null && props !== void 0 && props.data ? _toConsumableArray(props.data) : []);
     }
     // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [props.data]);
+  }, [props === null || props === void 0 ? void 0 : props.data]);
 
   // 多级列
   var _useState3 = useState([]),
@@ -140,15 +145,15 @@ export var useTable = function useTable(props, refs, tableId) {
         isColumnGroup: children.length > 0,
         isSubColumn: children.length === 0,
         renderCell: renderCell,
-        width: ((_item$props2 = item.props) === null || _item$props2 === void 0 ? void 0 : _item$props2.type) === 'expand' ? (_item$props$width = (_item$props3 = item.props) === null || _item$props3 === void 0 ? void 0 : _item$props3.width) !== null && _item$props$width !== void 0 ? _item$props$width : 48 : (_item$props4 = item.props) === null || _item$props4 === void 0 ? void 0 : _item$props4.width,
+        width: ['index', 'selection', 'expand'].includes((_item$props2 = item.props) === null || _item$props2 === void 0 ? void 0 : _item$props2.type) ? (_item$props$width = (_item$props3 = item.props) === null || _item$props3 === void 0 ? void 0 : _item$props3.width) !== null && _item$props$width !== void 0 ? _item$props$width : 48 : (_item$props4 = item.props) === null || _item$props4 === void 0 ? void 0 : _item$props4.width,
         align: ['index', 'selection', 'expand'].includes((_item$props5 = item.props) === null || _item$props5 === void 0 ? void 0 : _item$props5.type) ? (_item$props$align = (_item$props6 = item.props) === null || _item$props6 === void 0 ? void 0 : _item$props6.align) !== null && _item$props$align !== void 0 ? _item$props$align : 'center' : (_item$props$align2 = (_item$props7 = item.props) === null || _item$props7 === void 0 ? void 0 : _item$props7.align) !== null && _item$props$align2 !== void 0 ? _item$props$align2 : 'left',
-        resizable: ((_item$props8 = item.props) === null || _item$props8 === void 0 ? void 0 : _item$props8.type) === 'expand' ? false : (_item$props9 = item.props) === null || _item$props9 === void 0 ? void 0 : _item$props9.resizable
+        resizable: ((_item$props8 = item.props) === null || _item$props8 === void 0 ? void 0 : _item$props8.type) === 'expand' ? false : (props === null || props === void 0 ? void 0 : props.border) && ((_item$props9 = item.props) === null || _item$props9 === void 0 ? void 0 : _item$props9.resizable) !== false
       });
       return column;
     }).filter(function (item) {
       return item !== null;
     });
-  }, [getChildren, tableId]);
+  }, [getChildren, props === null || props === void 0 ? void 0 : props.border, tableId]);
 
   /** 分组列 */
   var groupColumns = useCallback(function (cols) {

package/dist/Table/typings.d.ts

@@ -16,11 +16,11 @@ export type RenderCell<T> = {
     row: T;
     column?: TableColumnCtx<T>;
 };
-export type TableColumnProps<T> = {
+export type TableColumnProps = {
     /** 对应列的类型。 如果设置了selection则显示多选框； 如果设置了 index 则显示该行的索引（从 1 开始计算）； 如果设置了 expand 则显示为一个可展开的按钮 */
-    type?: 'selection' | 'index' | 'expand' | 'drag';
+    type?: 'selection' | 'index' | 'expand';
     /** 如果设置了 type=index，可以通过传递 index 属性来自定义索引 */
-    index?: number | ((index: number, row?: T) => number);
+    index?: number | ((index: number, row?: any) => number);
     /** column 的 key，如果需要使用 filterChange 事件，则需要此属性标识是哪个 column 的筛选条件 */
     label?: string | React.ReactElement;
     /**  */
@@ -36,13 +36,13 @@ export type TableColumnProps<T> = {
     /** 对应列的最小宽度， 对应列的最小宽度， 与 width 的区别是 width 是固定的，minWidth 会把剩余宽度按比例分配给设置了 minWidth 的列 */
     minWidth?: number;
     /** 列标题 Label 区域渲染使用的 Function */
-    renderHeader?: (data: CI<T>) => React.ReactElement;
+    renderHeader?: (data: CI<any>) => React.ReactElement;
     /** 对应列是否可以排序， 如果设置为 'custom'，则代表用户希望远程排序，需要监听 Table 的 sortChange 事件 */
     sortable?: boolean | 'custom';
     /** 指定数据按照哪个属性进行排序，仅当sortable设置为true的时候有效。 应该如同 Array.sort 那样返回一个 Number */
-    sortMethod?: (a: T, b: T) => number;
+    sortMethod?: (a: any, b: any) => number;
     /** 指定数据按照哪个属性进行排序，仅当 sortable 设置为 true 且没有设置 sortMethod 的时候有效。 如果 sortBy 为数组，则先按照第 1 个属性排序，如果第 1 个相等，再按照第 2 个排序，以此类推 */
-    sortBy?: string | /* ((row: T, index: number) => string) | */ string[];
+    sortBy?: string | /* ((row: any, index: number) => string) | */ string[];
     /** 数据在排序时所使用排序策略的轮转顺序，仅当 sortable 为 true 时有效。 需传入一个数组，随着用户点击表头，该列依次按照数组中元素的顺序进行排序 */
     sortOrders?: ('ascending' | 'descending' | null)[];
     /** 对应列是否可以通过拖动改变宽度（需要在 elTable 上设置 border 属性为真） */
@@ -57,16 +57,22 @@ export type TableColumnProps<T> = {
     headerAlign?: 'left' | 'center' | 'right';
     /** 当内容过长被隐藏时显示 tooltip */
     showOverflowTooltip?: boolean;
+    /** tooltip 的格式化函数 */
+    tooltipFormatter?: (data: {
+        row: any;
+        column: TableColumnCtx<any>;
+        cellValue: any;
+    }) => React.ReactNode | string;
     /** 列是否固定在左侧或者右侧。 true 表示固定在左侧 */
     fixed?: boolean | 'left' | 'right';
     /** 用来格式化内容 */
-    formatter?: (row: T, column: TableColumnCtx<T>, cellValue: any, index: number) => React.ReactElement | string;
+    formatter?: (row: any, column: TableColumnCtx<any>, cellValue: any, index: number) => React.ReactElement | string;
     /** 仅对 type=selection 的列有效，类型为 Function，Function 的返回值用来决定这一行的 CheckBox 是否可以勾选 */
-    selectable?: (row: T, index: number) => boolean;
+    selectable?: (row: any, index: number) => boolean;
     /** 分页保留勾选项，仅对  type=selection 的列有效， 请注意， 需指定 rowKey 来让这个功能生效 */
     reserveSelection?: boolean;
     /** 数据过滤使用的方法， 如果是多选的筛选项，对每一条数据会执行多次，任意一次返回 true 就会显示 */
-    filterMethod?: FilterMethods<T>;
+    filterMethod?: FilterMethods<any>;
     /** 选中的数据过滤项，如果需要自定义表头过滤的渲染方式，可能会需要此属性 */
     filteredValue?: string[];
     /** 数据过滤的选项， 数组格式，数组中的元素需要有 text 和 value 属性。 数组中的每个元素都需要有 text 和 value 属性 */
@@ -76,9 +82,9 @@ export type TableColumnProps<T> = {
     /** 数据过滤的选项是否多选 */
     filterMultiple?: boolean;
     /** 子组件 */
-    children?: React.ReactElement<TableColumnProps<T>> | React.ReactElement<TableColumnProps<T>>[] | ((data: RenderCell<T>) => React.ReactElement | string | number);
+    children?: React.ReactElement<TableColumnProps> | React.ReactElement<TableColumnProps>[] | ((data: RenderCell<any>) => React.ReactElement | string | number);
 };
-export type TableColumnCtx<T> = Omit<TableColumnProps<T>, 'children'> & {
+export type TableColumnCtx<T> = Omit<TableColumnProps, 'children'> & {
     /**  */
     id?: string;
     /**  */
@@ -304,7 +310,15 @@ export interface TableProps<T> extends BaseProps, NativeProps<'--el-table-border
     /** 是否在不能展开行时隐藏展开图标 */
     hideIconOnNotExpand?: boolean;
     /** 子组件 */
-    children: React.ReactElement<TableColumnProps<T>> | React.ReactElement<TableColumnProps<T>>[];
+    children: React.ReactElement<TableColumnProps> | React.ReactElement<TableColumnProps>[];
+    /** 当内容过长被隐藏时显示 tooltip */
+    showOverflowTooltip?: boolean;
+    /** tooltip 的格式化函数 */
+    tooltipFormatter?: (data: {
+        row: T;
+        column: TableColumnCtx<T>;
+        cellValue: any;
+    }) => React.ReactNode | string;
 }
 export interface TableSort {
     prop?: string;
@@ -334,6 +348,8 @@ export interface TableRefs {
 }
 export interface TableRef<T> {
     refs: TableRefs;
+    /** 列信息 */
+    columns: TableColumnCtx<T>[][];
     /** 用于多选表格，清空用户的选择 */
     clearSelection: () => void;
     /** 返回当前选中的行	 */

package/dist/Table/util.d.ts

@@ -9,7 +9,7 @@ export declare const TableIdManager: {
 };
 export declare const getStyle: (element: HTMLElement, styleName: keyof React.CSSProperties) => string;
 export declare let removePopper: () => void | undefined;
-export declare function createTablePopper(parentNode: HTMLElement | undefined, trigger: HTMLElement, popperContent: string, tooltipRef: React.MutableRefObject<TooltipRef>): void;
+export declare function createTablePopper(parentNode: HTMLElement | undefined, trigger: HTMLElement, popperContent: React.ReactNode | string, tooltipRef: React.MutableRefObject<TooltipRef>): () => void;
 export declare const getRowIdentity: <T>(row: T, rowKey: TableProps<T>['rowKey']) => string;
 export declare const getRowIndex: <T>(index: TableColumnCtx<T>['index'], rowIndex: number, row: T) => number;
 export declare function parseHeight(height: number | string): string | number;

package/dist/Table/util.js

@@ -57,44 +57,15 @@ export { _removePopper2 as removePopper };
 export function createTablePopper(parentNode, trigger, popperContent, tooltipRef) {
   var _removePopper;
   // const { nextZIndex } = PopupManager;
-  var ns = namespace || 'r';
+  var ns = namespace || 'el';
   var scrollContainer = parentNode === null || parentNode === void 0 ? void 0 : parentNode.querySelector(".".concat(ns, "-scrollbar__wrap"));
-  // function renderContent(): HTMLDivElement {
-  //     const isLight = tooltipEffect === 'light';
-  //     const content = document.createElement('div');
-  //     content.className = `${ns}-popper ${isLight ? 'is-light' : 'is-dark'} ${globalKey}-slide-down`;
-  //     content.style.padding = '6px';
-  //     popperContent = escapeHtml(popperContent);
-  //     content.innerHTML = popperContent;
-  //     content.style.zIndex = String(nextZIndex());
-  //     // Avoid side effects caused by append to body
-  //     parentNode?.appendChild(content);
-  //     return content;
-  // }
-  // function renderArrow(): HTMLDivElement {
-  //     const arrow = document.createElement('div');
-  //     arrow.className = `${ns}-popper__arrow`;
-  //     return arrow;
-  // }
-  // function showPopper() {
-  //     timeOut && clearTimeout(timeOut);
-  //     timeOut = window.setTimeout(() => {
-  //         popperInstance && popperInstance.update();
-  //     }, 200);
-
-  // }
   (_removePopper = _removePopper2) === null || _removePopper === void 0 || _removePopper();
   var renderDom = document.createDocumentFragment();
   var root = createRoot(renderDom);
   _removePopper2 = function removePopper() {
     try {
       var _tooltipRef$current;
-      // root.unmount();
-      (_tooltipRef$current = tooltipRef.current) === null || _tooltipRef$current === void 0 || _tooltipRef$current.hide();
-      // popperInstance && popperInstance.destroy();
-      // content && parentNode?.removeChild(content);
-      // trigger.removeEventListener('mouseenter', showPopper);
-      // trigger.removeEventListener('mouseleave', removePopper);
+      (_tooltipRef$current = tooltipRef.current) === null || _tooltipRef$current === void 0 || _tooltipRef$current.onClose();
       scrollContainer === null || scrollContainer === void 0 || scrollContainer.removeEventListener('scroll', _removePopper2);
       // @ts-ignore
       _removePopper2 = undefined;
@@ -105,7 +76,7 @@ export function createTablePopper(parentNode, trigger, popperContent, tooltipRef
   if (!tooltipRef.current) {
     var vm = /*#__PURE__*/createElement(Tooltip, {
       enterable: true,
-      onMouseLeave: _removePopper2,
+      // onMouseLeave: removePopper,
       virtualTriggering: true,
       virtualRef: {
         getBoundingClientRect: function getBoundingClientRect() {
@@ -115,48 +86,20 @@ export function createTablePopper(parentNode, trigger, popperContent, tooltipRef
       defaultVisible: true,
       content: popperContent,
       placement: 'top',
+      offset: 0,
       // @ts-ignore
       ref: tooltipRef,
-      hideAfter: 200
+      hideAfter: 0,
+      showAfter: 0,
+      disableTransition: true
     });
     root.render(vm);
   } else {
     var _tooltipRef$current2;
     (_tooltipRef$current2 = tooltipRef.current) === null || _tooltipRef$current2 === void 0 || _tooltipRef$current2.onOpen();
   }
-  // let popperInstance: PopperInstance | null = null;
-  // const content = renderContent();
-  // const arrow = renderArrow();
-  // content.appendChild(arrow);
-  // popperInstance = createPopper({
-  //     getBoundingClientRect: () => trigger.getBoundingClientRect(),
-  //     contextElement: parentNode
-  // }, content, {
-  //     strategy: 'absolute',
-  //     modifiers: [
-  //         {
-  //             name: 'offset',
-  //             options: {
-  //                 offset: [0, 8],
-  //             },
-  //         },
-  //         {
-  //             name: 'arrow',
-  //             options: {
-  //                 element: arrow,
-  //                 padding: 10,
-  //             },
-  //         },
-  //     ],
-  //     ...popperOptions,
-  // });
-  // trigger.addEventListener('mouseenter', showPopper);
-  // trigger.addEventListener('mouseleave', () => {
-  //     setTimeout(() => {
-  //         tooltipRef.current?.hide();
-  //     }, 200);
-  // });
   scrollContainer === null || scrollContainer === void 0 || scrollContainer.addEventListener('scroll', _removePopper2);
+  return _removePopper2;
 }
 export var getRowIdentity = function getRowIdentity(row, rowKey) {
   if (!row) {

package/dist/TableV2/index.d.ts

@@ -0,0 +1,10 @@
+export * from './src/auto-resizer';
+export { default as AutoResizer } from './src/components/auto-resizer';
+export { Alignment as TableV2Alignment, FixedDir as TableV2FixedDir, SortOrder as TableV2SortOrder } from './src/constants';
+export { placeholderSign as TableV2Placeholder } from './src/private';
+export { default as TableV2 } from './src/table-v2';
+export * from './src/row';
+export * from './src/table';
+export type { TableV2Instance } from './src/table-v2';
+export type { Column, Columns, SortBy, SortState, TableV2CustomizedHeaderSlotParam } from './src/types';
+export type { HeaderCellSlotProps } from './src/renderers/header-cell';

package/dist/TableV2/index.js

@@ -0,0 +1,7 @@
+export * from "./src/auto-resizer";
+export { default as AutoResizer } from "./src/components/auto-resizer";
+export { Alignment as TableV2Alignment, FixedDir as TableV2FixedDir, SortOrder as TableV2SortOrder } from "./src/constants";
+export { placeholderSign as TableV2Placeholder } from "./src/private";
+export { default as TableV2 } from "./src/table-v2";
+export * from "./src/row";
+export * from "./src/table";

package/dist/TableV2/src/auto-resizer.d.ts

@@ -0,0 +1,14 @@
+import React, { CSSProperties } from 'react';
+type AutoResizeHandler = (event: {
+    height: number;
+    width: number;
+}) => void;
+export type AutoResizerProps = {
+    disableWidth?: boolean;
+    disableHeight?: boolean;
+    onResize?: AutoResizeHandler;
+    className?: string;
+    style?: CSSProperties;
+    children?: React.ReactElement | React.ReactElement[];
+};
+export {};

package/dist/TableV2/src/auto-resizer.js

@@ -0,0 +1 @@
+export {};