@vtx/components 3.1.181 → 4.0.0-beta.1

package/lib/vtx-datagrid/index.js

@@ -4,88 +4,74 @@ function _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" ==
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports["default"] = VtxDatagrid;
-exports.indexColumnKey = void 0;
-var _react = _interopRequireWildcard(require("react"));
+exports.VtxDatagrid = VtxDatagrid;
+exports.indexColumnKey = exports.default = void 0;
+var _ahooks = require("ahooks");
+var _antd = require("antd");
 var _classnames2 = _interopRequireDefault(require("classnames"));
 var _propTypes = _interopRequireDefault(require("prop-types"));
-var _table = _interopRequireDefault(require("antd/lib/table"));
-var _tooltip = _interopRequireDefault(require("antd/lib/tooltip"));
-var _dropdown = _interopRequireDefault(require("antd/lib/dropdown"));
-var _menu = _interopRequireDefault(require("antd/lib/menu"));
-var _empty = _interopRequireDefault(require("antd/lib/empty"));
-var _RedoOutlined = _interopRequireDefault(require("@ant-design/icons/RedoOutlined"));
-var _ColumnHeightOutlined = _interopRequireDefault(require("@ant-design/icons/ColumnHeightOutlined"));
-var _SettingOutlined = _interopRequireDefault(require("@ant-design/icons/SettingOutlined"));
+var _react = _interopRequireWildcard(require("react"));
+var _utils = require("../utils");
+var _useSet3 = _interopRequireDefault(require("../utils/useSet"));
 var _Alert = _interopRequireDefault(require("./Alert"));
-var _ColumnSetting = _interopRequireDefault(require("./ColumnSetting"));
-var _ResizeableTitle = _interopRequireDefault(require("./ResizeableTitle"));
-var _renderColumnButtons = _interopRequireDefault(require("./renderColumnButtons"));
-var _useSet3 = _interopRequireDefault(require("../_util/useSet"));
-var _isFunction = _interopRequireDefault(require("../_util/isFunction"));
-var _axios = _interopRequireDefault(require("axios"));
-var _ahooks = require("ahooks");
-var _getSignature = _interopRequireDefault(require("@vtx/utils/lib/getSignature"));
-var _isEqual = _interopRequireDefault(require("lodash/isEqual"));
-var _excluded = ["prefixCls", "toolbar", "toolbarClassName", "toolbarTilte", "buttonGroup", "refreshIconVisible", "hideColumnSetting", "hideColumnHeight", "visibleColumnKeys", "defaultVisibleColumnKeys", "onVisibleColumnsChange", "onRefresh", "indexColumn", "indexFixed", "bordered", "indexTitle", "startIndex", "autoFit", "headFootHeight", "columnResizable", "components", "className", "style", "emptyText", "onRowSelectionClear", "disabledColumnKeys", "onColumnsSave", "uniqueKey", "prefixUrl", "customEnumText", "hideSelectionClear", "indexWidth"];
-function _interopRequireDefault(e) { return e && e.__esModule ? e : { "default": e }; }
-function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function _interopRequireWildcard(e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, "default": e }; if (null === e || "object" != _typeof(e) && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (var _t in e) "default" !== _t && {}.hasOwnProperty.call(e, _t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, _t)) && (i.get || i.set) ? o(f, _t, i) : f[_t] = e[_t]); return f; })(e, t); }
-function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }
-function _toConsumableArray(r) { return _arrayWithoutHoles(r) || _iterableToArray(r) || _unsupportedIterableToArray(r) || _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(r) { if ("undefined" != typeof Symbol && null != r[Symbol.iterator] || null != r["@@iterator"]) return Array.from(r); }
-function _arrayWithoutHoles(r) { if (Array.isArray(r)) return _arrayLikeToArray(r); }
+var _ToolBar = _interopRequireDefault(require("./ToolBar"));
+var _Provide = require("./Store/Provide");
+var _index = require("./style/index");
+var _reactAntdColumnResize = require("react-antd-column-resize");
+var _jsxRuntime = require("react/jsx-runtime");
+var _excluded = ["toolbar", "toolbarClassName", "toolbarTilte", "buttonGroup", "refreshIconVisible", "hideColumnSetting", "hideColumnHeight", "onRefresh", "bordered", "startIndex", "autoFit", "headFootHeight", "columnResizable", "components", "className", "style", "emptyText", "onRowSelectionClear", "onColumnsSave", "uniqueKey", "prefixUrl", "hideSelectionClear", "customEnumText"];
+function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(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; }
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 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(e, r, t) { return (r = _toPropertyKey(r)) in e ? Object.defineProperty(e, r, { value: t, enumerable: !0, configurable: !0, writable: !0 }) : e[r] = t, e; }
-function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol" == _typeof(i) ? i : i + ""; }
+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 _objectWithoutProperties(e, t) { if (null == e) return {}; var o, r, i = _objectWithoutPropertiesLoose(e, t); if (Object.getOwnPropertySymbols) { var n = Object.getOwnPropertySymbols(e); for (r = 0; r < n.length; r++) o = n[r], -1 === t.indexOf(o) && {}.propertyIsEnumerable.call(e, o) && (i[o] = e[o]); } return i; }
-function _objectWithoutPropertiesLoose(r, e) { if (null == r) return {}; var t = {}; for (var n in r) if ({}.hasOwnProperty.call(r, n)) { if (-1 !== e.indexOf(n)) continue; t[n] = r[n]; } return t; }
-function _slicedToArray(r, e) { return _arrayWithHoles(r) || _iterableToArrayLimit(r, e) || _unsupportedIterableToArray(r, e) || _nonIterableRest(); }
+function _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }
+function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }
+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(r, a) { if (r) { if ("string" == typeof r) return _arrayLikeToArray(r, a); var t = {}.toString.call(r).slice(8, -1); return "Object" === t && r.constructor && (t = r.constructor.name), "Map" === t || "Set" === t ? Array.from(r) : "Arguments" === t || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(t) ? _arrayLikeToArray(r, a) : void 0; } }
-function _arrayLikeToArray(r, a) { (null == a || a > r.length) && (a = r.length); for (var e = 0, n = Array(a); e < a; e++) n[e] = r[e]; return n; }
-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(r) { if (Array.isArray(r)) return r; }
+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); }
+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; }
 var isMac = navigator.userAgent.indexOf('Mac OS') !== -1;
 var indexColumnKey = exports.indexColumnKey = '_serialNum';
-function VtxDatagrid(props) {
-  var _rest$dataSource, _rest$rowSelection, _rest$rowSelection2, _dataSource2, _rest$rowSelection3, _dataSource3;
-  var _useSet = (0, _useSet3["default"])({
-      // 显示列
-      visibleColumns: [],
-      // 列设置选中的列
-      checkedColumnKeys: [],
-      // 列设置选项
-      columnSettingOptions: [],
+function VtxTable(props) {
+  var _rest$dataSource, _rest$rowSelection, _rest$rowSelection3, _rest$rowSelection4;
+  var _useContext = (0, _react.useContext)(_antd.ConfigProvider.ConfigContext),
+    getPrefixCls = _useContext.getPrefixCls;
+  var prefixCls = getPrefixCls('', 'vtx-datagrid');
+  var _useStyle = (0, _index.useStyle)(prefixCls),
+    wrapSSR = _useStyle.wrapSSR,
+    hashId = _useStyle.hashId;
+  var counter = (0, _react.useContext)(_Provide.TableContext);
+  var _useContext2 = (0, _react.useContext)(_Provide.TableContext),
+    columnsMap = _useContext2.columnsMap,
+    tableStyles = _useContext2.tableStyles,
+    showTable = _useContext2.showTable,
+    isDragRef = _useContext2.isDragRef,
+    rootDomRef = _useContext2.rootDomRef,
+    sortKeyColumns = _useContext2.sortKeyColumns,
+    TextEnum = _useContext2.TextEnum;
+  var _useSet = (0, _useSet3.default)({
       // 表格id
       datagridId: "vtx-datagrid-".concat(new Date().getTime()),
-      scrollY: 0,
-      size: 'middle',
-      projectKey: '',
-      firstChangeVisibleColumnKeys: true
+      scrollY: 0
     }),
     _useSet2 = _slicedToArray(_useSet, 2),
-    state = _useSet2[0],
+    _useSet2$ = _useSet2[0],
+    datagridId = _useSet2$.datagridId,
+    scrollY = _useSet2$.scrollY,
     setState = _useSet2[1];
-  var visibleColumns = state.visibleColumns,
-    checkedColumnKeys = state.checkedColumnKeys,
-    columnSettingOptions = state.columnSettingOptions,
-    datagridId = state.datagridId,
-    scrollY = state.scrollY,
-    size = state.size,
-    firstChangeVisibleColumnKeys = state.firstChangeVisibleColumnKeys;
-  var datagridRef = (0, _react.useRef)(null);
   // 列设置提示高度
   var alertHeight = (0, _react.useRef)(0);
   // 工具栏高度
   var toolbarHeight = (0, _react.useRef)(0);
   // 列接口显示字段
   var settingRef = (0, _react.useRef)();
-  var _props$prefixCls = props.prefixCls,
-    prefixCls = _props$prefixCls === void 0 ? 'vtx-datagrid' : _props$prefixCls,
-    _props$toolbar = props.toolbar,
+  var _props$toolbar = props.toolbar,
     toolbar = _props$toolbar === void 0 ? true : _props$toolbar,
     toolbarClassName = props.toolbarClassName,
     _props$toolbarTilte = props.toolbarTilte,
@@ -95,93 +81,46 @@ function VtxDatagrid(props) {
     refreshIconVisible = _props$refreshIconVis === void 0 ? true : _props$refreshIconVis,
     hideColumnSetting = props.hideColumnSetting,
     hideColumnHeight = props.hideColumnHeight,
-    visibleColumnKeys = props.visibleColumnKeys,
-    defaultVisibleColumnKeys = props.defaultVisibleColumnKeys,
-    onVisibleColumnsChange = props.onVisibleColumnsChange,
     onRefresh = props.onRefresh,
-    _props$indexColumn = props.indexColumn,
-    indexColumn = _props$indexColumn === void 0 ? true : _props$indexColumn,
-    _props$indexFixed = props.indexFixed,
-    indexFixed = _props$indexFixed === void 0 ? false : _props$indexFixed,
     _props$bordered = props.bordered,
     bordered = _props$bordered === void 0 ? true : _props$bordered,
-    _props$indexTitle = props.indexTitle,
-    indexTitle = _props$indexTitle === void 0 ? '序号' : _props$indexTitle,
     _props$startIndex = props.startIndex,
     startIndex = _props$startIndex === void 0 ? 1 : _props$startIndex,
     _props$autoFit = props.autoFit,
     autoFit = _props$autoFit === void 0 ? true : _props$autoFit,
     _props$headFootHeight = props.headFootHeight,
     headFootHeight = _props$headFootHeight === void 0 ? 115 : _props$headFootHeight,
-    columnResizable = props.columnResizable,
+    _props$columnResizabl = props.columnResizable,
+    columnResizable = _props$columnResizabl === void 0 ? true : _props$columnResizabl,
     components = props.components,
     className = props.className,
     style = props.style,
     _props$emptyText = props.emptyText,
     emptyText = _props$emptyText === void 0 ? '暂无数据' : _props$emptyText,
     onRowSelectionClear = props.onRowSelectionClear,
-    disabledColumnKeys = props.disabledColumnKeys,
     onColumnsSave = props.onColumnsSave,
     uniqueKey = props.uniqueKey,
     prefixUrl = props.prefixUrl,
-    _props$customEnumText = props.customEnumText,
-    customEnumText = _props$customEnumText === void 0 ? {} : _props$customEnumText,
     _props$hideSelectionC = props.hideSelectionClear,
     hideSelectionClear = _props$hideSelectionC === void 0 ? false : _props$hideSelectionC,
-    _props$indexWidth = props.indexWidth,
-    indexWidth = _props$indexWidth === void 0 ? 70 : _props$indexWidth,
+    _props$customEnumText = props.customEnumText,
+    customEnumText = _props$customEnumText === void 0 ? {} : _props$customEnumText,
     rest = _objectWithoutProperties(props, _excluded);
-  var TextEnum = _objectSpread({
-    refreshText: '刷新',
-    densityDefaultText: '默认',
-    densityMiddleText: '中等',
-    densitySmallText: '紧凑',
-    columnDensityText: '列密度',
-    columnSettingText: '列设置',
-    actionMoreText: '更多',
-    columnSettingTitleText: '列展示',
-    columnSettingResetText: '重置',
-    columnSettingSaveText: '保存',
-    alartEmptyBtnText: '清空选择',
-    alartAlreadyChooseText: '已选择',
-    alartAlreadyChooseUnitText: '项',
-    messageSuccessText: '操作成功',
-    messageWarningOneText: '至少勾选一列保存',
-    paginationTotalText: '共',
-    paginationItemText: '条'
-  }, customEnumText);
-
-  // 规则，菜单根目录_页面路由
-  function getUniqueKey() {
-    var route = location.href.match(/#\/(\S*)\?/);
-    if (route) {
-      (0, _axios["default"])({
-        method: 'GET',
-        url: "".concat(location.pathname, "resources/json/menu.json"),
-        headers: _objectSpread({}, (0, _getSignature["default"])({}))
-      }).then(function (res) {
-        var _res$data;
-        if ((res === null || res === void 0 ? void 0 : res.status) == 200 && (_res$data = res.data) !== null && _res$data !== void 0 && _res$data.key) {
-          setState({
-            projectKey: "".concat(res.data.key, "_").concat(route ? route[1] : 'test')
-          });
-        }
-      });
-    }
-  }
 
   // 高度计算
   var _useThrottleFn = (0, _ahooks.useThrottleFn)(function () {
-      var _datagridRef$current;
-      if (!datagridRef.current) {
+      var _rootDomRef$current;
+      if (!rootDomRef.current) {
         return null;
       }
-      var bodyHeight = ((_datagridRef$current = datagridRef.current) === null || _datagridRef$current === void 0 ? void 0 : _datagridRef$current.clientHeight) - headFootHeight - toolbarHeight.current - alertHeight.current;
-      var divs = datagridRef.current.getElementsByTagName('div');
+      var bodyHeight = ((_rootDomRef$current = rootDomRef.current) === null || _rootDomRef$current === void 0 ? void 0 : _rootDomRef$current.clientHeight) - headFootHeight - toolbarHeight.current - alertHeight.current;
+      var divs = rootDomRef.current.getElementsByTagName('div');
       var bodyDiv = Array.prototype.filter.call(divs, function (dom) {
         return dom.className.includes('ant-table-body') || dom.className.includes('ant-table-content');
       })[0];
-      bodyDiv.style.minHeight = "".concat(bodyHeight - (rest.scrollY || 0), "px");
+      if (bodyDiv) {
+        bodyDiv.style.minHeight = "".concat(bodyHeight - (rest.scrollY || 0), "px");
+      }
       setState({
         scrollY: bodyHeight
       });
@@ -190,16 +129,12 @@ function VtxDatagrid(props) {
     }),
     calculateHeight = _useThrottleFn.run;
   (0, _react.useEffect)(function () {
-    // 当没有传入唯一值而且没有自定义列保存的时候且根据规则自动生成唯一值
-    if (!uniqueKey && !onColumnsSave && toolbar && !hideColumnSetting) {
-      getUniqueKey();
-    }
     var resizeObserver = new ResizeObserver(function () {
       calculateHeight();
     });
     // componentDidMount
-    if (autoFit && datagridRef.current) {
-      resizeObserver.observe(datagridRef.current, {
+    if (autoFit && rootDomRef.current) {
+      resizeObserver.observe(rootDomRef.current, {
         box: 'border-box'
       });
     }
@@ -215,179 +150,6 @@ function VtxDatagrid(props) {
       calculateHeight();
     }
   }, [(_rest$dataSource = rest.dataSource) === null || _rest$dataSource === void 0 ? void 0 : _rest$dataSource.length, (((_rest$rowSelection = rest.rowSelection) === null || _rest$rowSelection === void 0 ? void 0 : _rest$rowSelection.selectedRowKeys) || []).join(',')]);
-  (0, _react.useEffect)(function () {
-    var _rest$columns;
-    var keys = [];
-    var options = ((_rest$columns = rest.columns) === null || _rest$columns === void 0 ? void 0 : _rest$columns.map(function (col) {
-      keys.push(col.dataIndex || col.key);
-      return _objectSpread(_objectSpread({}, col), {}, {
-        key: col.dataIndex || col.key
-      });
-    })) || [];
-    // 序号添加操作列
-    if (indexColumn) {
-      options = [{
-        title: indexTitle,
-        dataIndex: indexColumnKey,
-        key: indexColumnKey,
-        width: indexWidth,
-        fixed: indexFixed
-      }].concat(_toConsumableArray(options));
-    }
-    setState({
-      columnSettingOptions: options
-    });
-  }, [rest === null || rest === void 0 ? void 0 : rest.columns, indexColumn]);
-  (0, _react.useEffect)(function () {
-    if ((columnSettingOptions === null || columnSettingOptions === void 0 ? void 0 : columnSettingOptions.length) > 0) {
-      parseColumns();
-    }
-  }, [columnSettingOptions]);
-
-  // 只有columns 的key 有改变的时候  才会 初始化一下 显示列
-  (0, _react.useEffect)(function () {
-    var _settingRef$current;
-    if (!((_settingRef$current = settingRef.current) !== null && _settingRef$current !== void 0 && _settingRef$current.isShowColumnsByUms)) {
-      handleChangeColumns('');
-    }
-  }, [Array.isArray(columnSettingOptions) ? JSON.stringify(columnSettingOptions === null || columnSettingOptions === void 0 ? void 0 : columnSettingOptions.map(function (v) {
-    return v.key;
-  })) : columnSettingOptions]);
-  (0, _react.useEffect)(function () {
-    if ((columnSettingOptions === null || columnSettingOptions === void 0 ? void 0 : columnSettingOptions.length) > 0 && (visibleColumnKeys === null || visibleColumnKeys === void 0 ? void 0 : visibleColumnKeys.length) > 0) {
-      handleChangeColumns(visibleColumnKeys);
-    }
-  }, [Array.isArray(visibleColumnKeys) ? JSON.stringify(visibleColumnKeys) : visibleColumnKeys]);
-  var parseColumns = function parseColumns(type) {
-    // 显示工具栏的同时并显示列设置
-    if (toolbar && !hideColumnSetting) {
-      var _settingRef$current2;
-      if (defaultVisibleColumnKeys || visibleColumnKeys || (_settingRef$current2 = settingRef.current) !== null && _settingRef$current2 !== void 0 && _settingRef$current2.showColumns) {
-        var _settingRef$current3;
-        var columnKeys = type === 'reset' ? Array.isArray(defaultVisibleColumnKeys) ? [].concat(_toConsumableArray(defaultVisibleColumnKeys), ['_serialNum']) : columnSettingOptions === null || columnSettingOptions === void 0 ? void 0 : columnSettingOptions.map(function (item) {
-          return item.key;
-        }) : ((_settingRef$current3 = settingRef.current) === null || _settingRef$current3 === void 0 ? void 0 : _settingRef$current3.showColumns) || visibleColumnKeys || defaultVisibleColumnKeys;
-        setState({
-          checkedColumnKeys: columnKeys,
-          visibleColumns: columnSettingOptions === null || columnSettingOptions === void 0 ? void 0 : columnSettingOptions.filter(function (item) {
-            return columnKeys.includes(item.key);
-          })
-        });
-      } else {
-        setState({
-          checkedColumnKeys: columnSettingOptions === null || columnSettingOptions === void 0 ? void 0 : columnSettingOptions.map(function (item) {
-            return item.dataIndex || item.key;
-          }),
-          visibleColumns: columnSettingOptions
-        });
-      }
-    } else {
-      setState({
-        visibleColumns: columnSettingOptions
-      });
-    }
-  };
-  var hasAlert = (((_rest$rowSelection2 = rest.rowSelection) === null || _rest$rowSelection2 === void 0 ? void 0 : _rest$rowSelection2.selectedRowKeys) || []).length > 0;
-  alertHeight.current = !hideSelectionClear && hasAlert ? 49 : 0;
-  toolbarHeight.current = toolbar ? 56 : 0;
-
-  // 列设置回调
-  /**
-   *
-   * @param {*} keys
-   * @param {*} flag  初始化来的， 如果是初始化 我们要听接口的
-   */
-  var handleChangeColumns = function handleChangeColumns(keys, flag) {
-    var columnKeys = [];
-    // 如果传入了keys 就取key
-    if (keys) {
-      columnKeys = keys;
-    } else {
-      // 没有传入keys 就是初始化的  要么有配置默认显示key， 要么是全部
-      if (Array.isArray(defaultVisibleColumnKeys)) {
-        columnKeys = [].concat(_toConsumableArray(defaultVisibleColumnKeys), ['_serialNum']);
-      } else {
-        columnKeys = columnSettingOptions === null || columnSettingOptions === void 0 ? void 0 : columnSettingOptions.map(function (item) {
-          return item.dataIndex || item.key;
-        });
-      }
-    }
-    if (!(0, _isEqual["default"])(checkedColumnKeys, columnKeys)) {
-      var _settingRef$current4;
-      setState({
-        checkedColumnKeys: columnKeys,
-        visibleColumns: columnSettingOptions === null || columnSettingOptions === void 0 ? void 0 : columnSettingOptions.filter(function (item) {
-          return columnKeys.includes(item.key);
-        })
-      });
-      (_settingRef$current4 = settingRef.current) === null || _settingRef$current4 === void 0 || _settingRef$current4.updateShowColumns(columnKeys.toString(), flag);
-      onVisibleColumnsChange && onVisibleColumnsChange(columnKeys);
-    }
-  };
-  // 工具栏
-  var toolbarRender;
-  if (toolbar) {
-    toolbarRender = /*#__PURE__*/_react["default"].createElement("div", {
-      className: (0, _classnames2["default"])("".concat(prefixCls, "-toolbar"), toolbarClassName)
-    }, /*#__PURE__*/_react["default"].createElement("div", {
-      className: "".concat(prefixCls, "-toolbar-left")
-    }, toolbarTilte), /*#__PURE__*/_react["default"].createElement("div", {
-      className: "".concat(prefixCls, "-toolbar-right")
-    }, /*#__PURE__*/_react["default"].createElement("div", {
-      className: (0, _classnames2["default"])("".concat(prefixCls, "-space-item"), "".concat(prefixCls, "-toolbar-actions"))
-    }, buttonGroup), buttonGroup && /*#__PURE__*/_react["default"].createElement("div", {
-      className: "".concat(prefixCls, "-toolbar-line")
-    }), /*#__PURE__*/_react["default"].createElement("div", {
-      className: (0, _classnames2["default"])("".concat(prefixCls, "-space-item"), "".concat(prefixCls, "-toolbar-setting"))
-    }, refreshIconVisible && /*#__PURE__*/_react["default"].createElement("div", {
-      className: "".concat(prefixCls, "-toolbar-setting-item"),
-      onClick: function onClick() {
-        onRefresh && onRefresh();
-      }
-    }, /*#__PURE__*/_react["default"].createElement(_tooltip["default"], {
-      title: TextEnum.refreshText
-    }, /*#__PURE__*/_react["default"].createElement(_RedoOutlined["default"], null))), !hideColumnHeight && /*#__PURE__*/_react["default"].createElement("div", {
-      className: "".concat(prefixCls, "-toolbar-setting-item")
-    }, /*#__PURE__*/_react["default"].createElement(_dropdown["default"], {
-      overlay: /*#__PURE__*/_react["default"].createElement(_menu["default"], {
-        onClick: function onClick(_ref) {
-          var key = _ref.key;
-          return setState({
-            size: key
-          });
-        },
-        selectedKeys: [size]
-      }, /*#__PURE__*/_react["default"].createElement(_menu["default"].Item, {
-        key: "default"
-      }, TextEnum.densityDefaultText), /*#__PURE__*/_react["default"].createElement(_menu["default"].Item, {
-        key: "middle"
-      }, TextEnum.densityMiddleText), /*#__PURE__*/_react["default"].createElement(_menu["default"].Item, {
-        key: "small"
-      }, TextEnum.densitySmallText)),
-      trigger: ['click']
-    }, /*#__PURE__*/_react["default"].createElement(_tooltip["default"], {
-      title: TextEnum.columnDensityText
-    }, /*#__PURE__*/_react["default"].createElement(_ColumnHeightOutlined["default"], null)))), !hideColumnSetting && /*#__PURE__*/_react["default"].createElement("div", {
-      className: "".concat(prefixCls, "-toolbar-setting-item")
-    }, /*#__PURE__*/_react["default"].createElement(_ColumnSetting["default"], {
-      prefixCls: prefixCls,
-      checkedColumnKeys: checkedColumnKeys,
-      columnSettingOptions: columnSettingOptions,
-      onChange: handleChangeColumns,
-      onReset: function onReset() {
-        return parseColumns('reset');
-      },
-      disabledColumnKeys: disabledColumnKeys,
-      onColumnsSave: onColumnsSave,
-      uniqueKey: uniqueKey || state.projectKey,
-      prefixUrl: prefixUrl,
-      columns: rest.columns,
-      settingRef: settingRef,
-      TextEnum: TextEnum
-    }, /*#__PURE__*/_react["default"].createElement(_tooltip["default"], {
-      title: TextEnum.columnSettingText
-    }, /*#__PURE__*/_react["default"].createElement(_SettingOutlined["default"], null)))))));
-  }
 
   // 分页
   var getPagination = function getPagination(pagination) {
@@ -399,149 +161,211 @@ function VtxDatagrid(props) {
       showSizeChanger: true,
       showQuickJumper: true,
       showTotal: function showTotal(total) {
-        return "".concat(TextEnum.paginationTotalText, " ").concat(total, " ").concat(TextEnum.paginationItemText);
+        return "".concat(TextEnum.total, " ").concat(total, " ").concat(TextEnum.item);
       }
     }, pagination);
   };
-  // 处理操作按钮
-  var columns = (visibleColumns || []).map(function (column) {
-    var newColumn = _objectSpread({}, column);
-    if (newColumn.renderButtons) {
-      delete newColumn.renderButtons;
-    }
-    if (newColumn.renderButtonsVisibleNum) {
-      delete newColumn.renderButtonsVisibleNum;
-    }
-    return _objectSpread(_objectSpread({}, newColumn), {}, {
-      render: (0, _isFunction["default"])(column.renderButtons) ? function (text, record, index) {
-        return (0, _renderColumnButtons["default"])(column.renderButtons, column.renderButtonsVisibleNum, text, record, index, TextEnum);
-      } : 'render' in column ? column.render : function (text) {
-        return ['', null, undefined].includes(text) ? '-' : text;
-      }
-    });
-  });
-  // 配置了列可伸缩
-  if (columnResizable) {
-    columns = columns.map(function (col, index) {
-      return _objectSpread(_objectSpread({}, col), {}, {
-        onHeaderCell: function onHeaderCell(column) {
-          return {
-            width: column.width,
-            onResize: handleResize(index)
-          };
+  // 先排序，排序的结果给列设置作用
+  var tableColumn = (0, _react.useMemo)(function () {
+    var loopFilter = function loopFilter(column) {
+      return column.map(function (item) {
+        var columnKey = (0, _utils.genColumnKey)(item.key, item.index);
+        var config = columnsMap[columnKey];
+        if (item.children) {
+          return _objectSpread(_objectSpread({}, item), {}, {
+            fixed: config === null || config === void 0 ? void 0 : config.fixed,
+            width: config === null || config === void 0 ? void 0 : config.width,
+            children: loopFilter(item.children)
+          });
         }
+        return _objectSpread(_objectSpread({}, item), {}, {
+          fixed: config === null || config === void 0 ? void 0 : config.fixed,
+          width: config === null || config === void 0 ? void 0 : config.width
+        });
       });
-    });
-    var handleResize = function handleResize(index) {
-      return function (e, _ref2) {
-        var size = _ref2.size;
-        setState(function (_ref3) {
-          var visibleColumns = _ref3.visibleColumns;
-          var nextColumns = _toConsumableArray(visibleColumns);
-          nextColumns[index] = _objectSpread(_objectSpread({}, nextColumns[index]), {}, {
-            width: size.width
+    };
+    var _tableColumn = loopFilter(counter.tableColumn);
+    if (!columnsMap['_serialNum']) {
+      return [];
+    }
+    return (0, _utils.sortByKeyArrayExtract)(_tableColumn, sortKeyColumns, columnsMap, 'key');
+  }, [columnsMap, counter.tableColumn, sortKeyColumns]);
+
+  // 再过滤，过滤的给table用
+  var columns = (0, _react.useMemo)(function () {
+    var loopFilter = function loopFilter(column) {
+      return column.map(function (item) {
+        var columnKey = (0, _utils.genColumnKey)(item.key, item.index);
+        var config = counter.columnsMap[columnKey];
+        if (config && config.show === false) {
+          return false;
+        }
+        if (item.children) {
+          return _objectSpread(_objectSpread({}, item), {}, {
+            children: loopFilter(item.children)
           });
-          return {
-            visibleColumns: nextColumns
-          };
-        });
-      };
+        }
+        return item;
+      }).filter(Boolean);
     };
-  }
-  // 序号添加
-  var dataSource = rest.dataSource;
-  if (indexColumn) {
-    var _dataSource;
-    // columns = [
-    //     {
-    //         title: indexTitle,
-    //         dataIndex: indexColumnKey,
-    //         key: indexColumnKey,
-    //         width: indexWidth,
-    //         fixed: indexFixed,
-    //     },
-    //     ...columns,
-    // ];
-    dataSource = (_dataSource = dataSource) === null || _dataSource === void 0 ? void 0 : _dataSource.map(function (item, i) {
+    return loopFilter(tableColumn);
+  }, [tableColumn, counter.columnsMap]);
+  var dataSource = (0, _react.useMemo)(function () {
+    var _rest$dataSource2;
+    return ((_rest$dataSource2 = rest.dataSource) === null || _rest$dataSource2 === void 0 ? void 0 : _rest$dataSource2.map(function (item, i) {
       return _objectSpread(_objectSpread({}, item), {}, {
+        // 有无序号都会加上这个字段， 有无序号靠columns控制
         _serialNum: i + startIndex
       });
+    })) || [];
+  }, [rest.dataSource, startIndex]);
+  var scroll = (0, _react.useMemo)(function () {
+    var result = rest.scroll || {};
+    if (autoFit) {
+      result = _objectSpread(_objectSpread({}, result), {}, {
+        y: scrollY - (rest.scrollY || 0)
+      });
+    }
+    return result;
+  }, [rest.scroll, rest.scrollY, autoFit]);
+  var hasAlert = (0, _react.useMemo)(function () {
+    var _rest$rowSelection2;
+    return (((_rest$rowSelection2 = rest.rowSelection) === null || _rest$rowSelection2 === void 0 ? void 0 : _rest$rowSelection2.selectedRowKeys) || []).length > 0;
+  }, [(_rest$rowSelection3 = rest.rowSelection) === null || _rest$rowSelection3 === void 0 ? void 0 : _rest$rowSelection3.selectedRowKeys]);
+  var alertRender = !hideSelectionClear && hasAlert ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_Alert.default, {
+    selectedRowKeys: (_rest$rowSelection4 = rest.rowSelection) === null || _rest$rowSelection4 === void 0 ? void 0 : _rest$rowSelection4.selectedRowKeys,
+    onRowSelectionClear: onRowSelectionClear
+  }) : null;
+  alertHeight.current = !hideSelectionClear && hasAlert ? 49 : 0;
+  toolbarHeight.current = toolbar ? 56 : 0;
+  var _useAntdColumnResize = (0, _reactAntdColumnResize.useAntdColumnResize)(function () {
+      return {
+        columns: columns,
+        minWidth: 20
+      };
+    }, [columns]),
+    resizableColumns = _useAntdColumnResize.resizableColumns,
+    resizeComponents = _useAntdColumnResize.components,
+    tableWidth = _useAntdColumnResize.tableWidth,
+    resetColumns = _useAntdColumnResize.resetColumns;
+  var _columns = (0, _react.useMemo)(function () {
+    var _result;
+    var result = [];
+    if (!showTable) {
+      result = [];
+    } else if (isDragRef) {
+      result = resizableColumns;
+    } else {
+      result = columns;
+    }
+    var flag = false;
+    (_result = result) === null || _result === void 0 || _result.map(function (v) {
+      var _columnsMap$v$key;
+      if (columnsMap !== null && columnsMap !== void 0 && columnsMap[v.key] && ((_columnsMap$v$key = columnsMap[v.key]) === null || _columnsMap$v$key === void 0 ? void 0 : _columnsMap$v$key.width) !== v.width) {
+        flag = true;
+        columnsMap[v.key].width = v.width;
+      }
     });
-  }
-  var scroll = rest.scroll || {};
-  if (autoFit) {
-    scroll = _objectSpread(_objectSpread({}, scroll), {}, {
-      y: scrollY - (rest.scrollY || 0)
-    });
-  }
-  return /*#__PURE__*/_react["default"].createElement("div", {
+    if (flag) {
+      counter.setColumnsMap(columnsMap);
+    }
+    return result;
+  }, [isDragRef, resizableColumns, showTable, columns, columnsMap]);
+  var _components = (0, _react.useMemo)(function () {
+    if (isDragRef) {
+      return resizeComponents;
+    } else {
+      return components;
+    }
+  }, [isDragRef, resizeComponents, components]);
+
+  // 工具栏
+  var toolbarRender = toolbar ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_ToolBar.default, {
+    prefix: prefixCls,
+    toolbarClassName: toolbarClassName,
+    toolbarTilte: toolbarTilte,
+    buttonGroup: buttonGroup,
+    refreshIconVisible: refreshIconVisible,
+    hideColumnHeight: hideColumnHeight,
+    hideColumnSetting: hideColumnSetting,
+    onRefresh: onRefresh,
+    columns: _columns,
+    onColumnsSave: onColumnsSave,
+    uniqueKey: uniqueKey,
+    prefixUrl: prefixUrl,
+    settingRef: settingRef,
+    TextEnum: TextEnum
+  }) : null;
+  return wrapSSR( /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
     id: datagridId,
-    className: (0, _classnames2["default"])(prefixCls, className, _defineProperty(_defineProperty(_defineProperty(_defineProperty({}, "".concat(prefixCls, "-fit"), autoFit), "".concat(prefixCls, "-noFit"), !autoFit), "".concat(prefixCls, "-nodata"), !((_dataSource2 = dataSource) !== null && _dataSource2 !== void 0 && _dataSource2.length)), "".concat(prefixCls, "-userAgent-mac"), isMac)),
+    className: (0, _classnames2.default)(prefixCls, className, _defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty({}, "".concat(prefixCls, "-fit"), autoFit), "".concat(prefixCls, "-noFit"), !autoFit), "".concat(prefixCls, "-nodata"), !(dataSource !== null && dataSource !== void 0 && dataSource.length)), "".concat(prefixCls, "-userAgent-mac"), isMac), "".concat(prefixCls, "-striped"), tableStyles.includes('striped')), "".concat(prefixCls, "-no-border"), !tableStyles.includes('border')), "".concat(prefixCls, "-header-background"), tableStyles.includes('header-background')), hashId),
+    ref: rootDomRef,
     style: style,
-    ref: datagridRef
-  }, toolbarRender, !hideSelectionClear && hasAlert ? /*#__PURE__*/_react["default"].createElement("div", {
-    className: "".concat(prefixCls, "-alert")
-  }, /*#__PURE__*/_react["default"].createElement(_Alert["default"], {
-    prefixCls: prefixCls,
-    selectedRowKeys: (_rest$rowSelection3 = rest.rowSelection) === null || _rest$rowSelection3 === void 0 ? void 0 : _rest$rowSelection3.selectedRowKeys,
-    onRowSelectionClear: onRowSelectionClear,
-    TextEnum: TextEnum
-  })) : null, /*#__PURE__*/_react["default"].createElement(_table["default"], _extends({
-    size: size,
-    bordered: ((_dataSource3 = dataSource) === null || _dataSource3 === void 0 ? void 0 : _dataSource3.length) > 0 ? bordered : false
-  }, rest, {
-    columns: columns,
-    dataSource: dataSource,
-    scroll: scroll,
-    pagination: getPagination(rest.pagination),
-    style: {
-      height: "calc(100% - ".concat(toolbarHeight.current + alertHeight.current, "px)")
-    },
-    locale: _objectSpread({
-      emptyText: /*#__PURE__*/_react["default"].createElement(_empty["default"], {
-        description: emptyText
-      })
-    }, rest.locale),
-    components: columnResizable ? _objectSpread(_objectSpread({}, components || {}), {}, {
-      header: {
-        cell: _ResizeableTitle["default"]
-      }
-    }) : components
-  })));
+    children: [toolbarRender, alertRender, /*#__PURE__*/(0, _jsxRuntime.jsx)(_antd.Table, _objectSpread(_objectSpread({
+      size: counter.tableSize,
+      bordered: true
+    }, rest), {}, {
+      dataSource: dataSource,
+      scroll: _objectSpread({
+        x: 'max-content'
+      }, scroll),
+      pagination: getPagination(rest.pagination),
+      style: {
+        height: "calc(100% - ".concat(toolbarHeight.current + alertHeight.current, "px)")
+      },
+      locale: _objectSpread({
+        emptyText: /*#__PURE__*/(0, _jsxRuntime.jsx)(_antd.Empty, {
+          description: emptyText
+        })
+      }, rest.locale),
+      components: _components,
+      columns: _columns
+    }))]
+  }));
+}
+function VtxDatagrid(props) {
+  var ErrorComponent = props.ErrorBoundary === false ? _react.default.Fragment : props.ErrorBoundary || _utils.ErrorBoundary;
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_Provide.Container, {
+    initValue: props,
+    children: /*#__PURE__*/(0, _jsxRuntime.jsx)(ErrorComponent, {
+      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(VtxTable, _objectSpread({}, props))
+    })
+  });
 }
+VtxDatagrid.displayName = 'VtxDatagrid';
+var _default = exports.default = VtxDatagrid;
 VtxDatagrid.propTypes = {
-  prefixCls: _propTypes["default"].string,
-  refreshIconVisible: _propTypes["default"].bool,
-  hideColumnSetting: _propTypes["default"].bool,
-  hideSelectionClear: _propTypes["default"].bool,
-  hideColumnHeight: _propTypes["default"].bool,
-  bordered: _propTypes["default"].bool,
-  visibleColumnKeys: _propTypes["default"].array,
-  defaultVisibleColumnKeys: _propTypes["default"].array,
-  onVisibleColumnsChange: _propTypes["default"].func,
-  toolbarClassName: _propTypes["default"].string,
-  toolbar: _propTypes["default"].bool,
-  toolbarTilte: _propTypes["default"].oneOfType([_propTypes["default"].string, _propTypes["default"].node]),
-  onRefresh: _propTypes["default"].func,
-  indexColumn: _propTypes["default"].bool,
-  indexFixed: _propTypes["default"].oneOfType([_propTypes["default"].string, _propTypes["default"].bool]),
-  indexTitle: _propTypes["default"].string,
-  startIndex: _propTypes["default"].number,
-  buttonGroup: _propTypes["default"].node,
-  autoFit: _propTypes["default"].bool,
-  headFootHeight: _propTypes["default"].number,
-  columnResizable: _propTypes["default"].bool,
-  emptyText: _propTypes["default"].oneOfType([_propTypes["default"].string, _propTypes["default"].node]),
-  onRowSelectionClear: _propTypes["default"].func,
-  searchCollapseEvent$: _propTypes["default"].object,
-  className: _propTypes["default"].string,
-  style: _propTypes["default"].object,
-  disabledColumnKeys: _propTypes["default"].array,
-  onColumnsSave: _propTypes["default"].func,
-  components: _propTypes["default"].object,
-  customEnumText: _propTypes["default"].object,
-  uniqueKey: _propTypes["default"].string,
-  prefixUrl: _propTypes["default"].string,
-  indexWidth: _propTypes["default"].number
-};
-//# sourceMappingURL=index.js.map
+  prefix: _propTypes.default.string,
+  refreshIconVisible: _propTypes.default.bool,
+  hideColumnSetting: _propTypes.default.bool,
+  hideSelectionClear: _propTypes.default.bool,
+  hideColumnHeight: _propTypes.default.bool,
+  bordered: _propTypes.default.bool,
+  visibleColumnKeys: _propTypes.default.array,
+  defaultVisibleColumnKeys: _propTypes.default.array,
+  onVisibleColumnsChange: _propTypes.default.func,
+  toolbarClassName: _propTypes.default.string,
+  toolbar: _propTypes.default.bool,
+  toolbarTilte: _propTypes.default.oneOfType([_propTypes.default.string, _propTypes.default.node]),
+  onRefresh: _propTypes.default.func,
+  indexColumn: _propTypes.default.bool,
+  indexFixed: _propTypes.default.oneOfType([_propTypes.default.string, _propTypes.default.bool]),
+  indexTitle: _propTypes.default.string,
+  startIndex: _propTypes.default.number,
+  buttonGroup: _propTypes.default.node,
+  autoFit: _propTypes.default.bool,
+  headFootHeight: _propTypes.default.number,
+  columnResizable: _propTypes.default.bool,
+  emptyText: _propTypes.default.oneOfType([_propTypes.default.string, _propTypes.default.node]),
+  onRowSelectionClear: _propTypes.default.func,
+  searchCollapseEvent$: _propTypes.default.object,
+  className: _propTypes.default.string,
+  style: _propTypes.default.object,
+  disabledColumnKeys: _propTypes.default.array,
+  onColumnsSave: _propTypes.default.func,
+  components: _propTypes.default.object,
+  customEnumText: _propTypes.default.object,
+  uniqueKey: _propTypes.default.string,
+  prefixUrl: _propTypes.default.string,
+  indexWidth: _propTypes.default.number
+};