@kne/table-page 0.1.0

package/dist/index.modern.js

@@ -0,0 +1,3453 @@
+import { withFetch } from '@kne/react-fetch';
+import { Typography, Tooltip, Tag, Space, Checkbox, Row, Col, Input, List, Button, Collapse, Popover, Empty, Table as Table$1, Dropdown, Pagination } from 'antd';
+import { FilterProvider, FilterLines, SearchInput, FilterValueDisplay, getFilterValue } from '@kne/react-filter';
+import { useState, useCallback, useMemo, useRef, useEffect, useLayoutEffect, forwardRef } from 'react';
+import classnames from 'classnames';
+import get from 'lodash/get';
+import { isEmpty } from '@kne/is-empty';
+import groupBy from 'lodash/groupBy';
+import transform from 'lodash/transform';
+import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
+import ButtonGroup from '@kne/button-group';
+import '@kne/button-group/dist/index.css';
+import { CaretUpOutlined, CaretDownOutlined, HolderOutlined, RedoOutlined, SettingOutlined, CheckOutlined, DownOutlined } from '@ant-design/icons';
+import clone from 'lodash/clone';
+import useRefCallback from '@kne/use-ref-callback';
+import pick from 'lodash/pick';
+import findLastIndex from 'lodash/findLastIndex';
+import isEqual from 'lodash/isEqual';
+import { useDebouncedCallback } from 'use-debounce';
+import { ReactSortable } from 'react-sortablejs';
+import set from 'lodash/set';
+import cloneDeep from 'lodash/cloneDeep';
+import { createWithIntlProvider, useIntl } from '@kne/react-intl';
+import filterZhCN from '@kne/react-filter/dist/locale/zh-CN';
+import filterEnUS from '@kne/react-filter/dist/locale/en-US';
+import { createPortal } from 'react-dom';
+import '@kne/react-filter/dist/index.css';
+import merge from 'lodash/merge';
+
+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 _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;
+}
+
+var commonjsGlobal = typeof globalThis !== 'undefined' ? globalThis : typeof window !== 'undefined' ? window : typeof global !== 'undefined' ? global : typeof self !== 'undefined' ? self : {};
+
+function createCommonjsModule(fn) {
+  var module = { exports: {} };
+	return fn(module, module.exports), module.exports;
+}
+
+var dayjs_min = createCommonjsModule(function (module, exports) {
+!function(t,e){module.exports=e();}(commonjsGlobal,(function(){var t=1e3,e=6e4,n=36e5,r="millisecond",i="second",s="minute",u="hour",a="day",o="week",c="month",f="quarter",h="year",d="date",l="Invalid Date",$=/^(\d{4})[-/]?(\d{1,2})?[-/]?(\d{0,2})[Tt\s]*(\d{1,2})?:?(\d{1,2})?:?(\d{1,2})?[.:]?(\d+)?$/,y=/\[([^\]]+)]|YYYY|YY|M{1,4}|D{1,2}|d{1,4}|H{1,2}|h{1,2}|a|A|m{1,2}|s{1,2}|Z{1,2}|SSS/g,M={name:"en",weekdays:"Sunday_Monday_Tuesday_Wednesday_Thursday_Friday_Saturday".split("_"),months:"January_February_March_April_May_June_July_August_September_October_November_December".split("_"),ordinal:function(t){var e=["th","st","nd","rd"],n=t%100;return "["+t+(e[(n-20)%10]||e[n]||e[0])+"]"}},m=function(t,e,n){var r=String(t);return !r||r.length>=e?t:""+Array(e+1-r.length).join(n)+t},v={s:m,z:function(t){var e=-t.utcOffset(),n=Math.abs(e),r=Math.floor(n/60),i=n%60;return (e<=0?"+":"-")+m(r,2,"0")+":"+m(i,2,"0")},m:function t(e,n){if(e.date()<n.date())return -t(n,e);var r=12*(n.year()-e.year())+(n.month()-e.month()),i=e.clone().add(r,c),s=n-i<0,u=e.clone().add(r+(s?-1:1),c);return +(-(r+(n-i)/(s?i-u:u-i))||0)},a:function(t){return t<0?Math.ceil(t)||0:Math.floor(t)},p:function(t){return {M:c,y:h,w:o,d:a,D:d,h:u,m:s,s:i,ms:r,Q:f}[t]||String(t||"").toLowerCase().replace(/s$/,"")},u:function(t){return void 0===t}},g="en",D={};D[g]=M;var p="$isDayjsObject",S=function(t){return t instanceof _||!(!t||!t[p])},w=function t(e,n,r){var i;if(!e)return g;if("string"==typeof e){var s=e.toLowerCase();D[s]&&(i=s),n&&(D[s]=n,i=s);var u=e.split("-");if(!i&&u.length>1)return t(u[0])}else {var a=e.name;D[a]=e,i=a;}return !r&&i&&(g=i),i||!r&&g},O=function(t,e){if(S(t))return t.clone();var n="object"==typeof e?e:{};return n.date=t,n.args=arguments,new _(n)},b=v;b.l=w,b.i=S,b.w=function(t,e){return O(t,{locale:e.$L,utc:e.$u,x:e.$x,$offset:e.$offset})};var _=function(){function M(t){this.$L=w(t.locale,null,!0),this.parse(t),this.$x=this.$x||t.x||{},this[p]=!0;}var m=M.prototype;return m.parse=function(t){this.$d=function(t){var e=t.date,n=t.utc;if(null===e)return new Date(NaN);if(b.u(e))return new Date;if(e instanceof Date)return new Date(e);if("string"==typeof e&&!/Z$/i.test(e)){var r=e.match($);if(r){var i=r[2]-1||0,s=(r[7]||"0").substring(0,3);return n?new Date(Date.UTC(r[1],i,r[3]||1,r[4]||0,r[5]||0,r[6]||0,s)):new Date(r[1],i,r[3]||1,r[4]||0,r[5]||0,r[6]||0,s)}}return new Date(e)}(t),this.init();},m.init=function(){var t=this.$d;this.$y=t.getFullYear(),this.$M=t.getMonth(),this.$D=t.getDate(),this.$W=t.getDay(),this.$H=t.getHours(),this.$m=t.getMinutes(),this.$s=t.getSeconds(),this.$ms=t.getMilliseconds();},m.$utils=function(){return b},m.isValid=function(){return !(this.$d.toString()===l)},m.isSame=function(t,e){var n=O(t);return this.startOf(e)<=n&&n<=this.endOf(e)},m.isAfter=function(t,e){return O(t)<this.startOf(e)},m.isBefore=function(t,e){return this.endOf(e)<O(t)},m.$g=function(t,e,n){return b.u(t)?this[e]:this.set(n,t)},m.unix=function(){return Math.floor(this.valueOf()/1e3)},m.valueOf=function(){return this.$d.getTime()},m.startOf=function(t,e){var n=this,r=!!b.u(e)||e,f=b.p(t),l=function(t,e){var i=b.w(n.$u?Date.UTC(n.$y,e,t):new Date(n.$y,e,t),n);return r?i:i.endOf(a)},$=function(t,e){return b.w(n.toDate()[t].apply(n.toDate("s"),(r?[0,0,0,0]:[23,59,59,999]).slice(e)),n)},y=this.$W,M=this.$M,m=this.$D,v="set"+(this.$u?"UTC":"");switch(f){case h:return r?l(1,0):l(31,11);case c:return r?l(1,M):l(0,M+1);case o:var g=this.$locale().weekStart||0,D=(y<g?y+7:y)-g;return l(r?m-D:m+(6-D),M);case a:case d:return $(v+"Hours",0);case u:return $(v+"Minutes",1);case s:return $(v+"Seconds",2);case i:return $(v+"Milliseconds",3);default:return this.clone()}},m.endOf=function(t){return this.startOf(t,!1)},m.$set=function(t,e){var n,o=b.p(t),f="set"+(this.$u?"UTC":""),l=(n={},n[a]=f+"Date",n[d]=f+"Date",n[c]=f+"Month",n[h]=f+"FullYear",n[u]=f+"Hours",n[s]=f+"Minutes",n[i]=f+"Seconds",n[r]=f+"Milliseconds",n)[o],$=o===a?this.$D+(e-this.$W):e;if(o===c||o===h){var y=this.clone().set(d,1);y.$d[l]($),y.init(),this.$d=y.set(d,Math.min(this.$D,y.daysInMonth())).$d;}else l&&this.$d[l]($);return this.init(),this},m.set=function(t,e){return this.clone().$set(t,e)},m.get=function(t){return this[b.p(t)]()},m.add=function(r,f){var d,l=this;r=Number(r);var $=b.p(f),y=function(t){var e=O(l);return b.w(e.date(e.date()+Math.round(t*r)),l)};if($===c)return this.set(c,this.$M+r);if($===h)return this.set(h,this.$y+r);if($===a)return y(1);if($===o)return y(7);var M=(d={},d[s]=e,d[u]=n,d[i]=t,d)[$]||1,m=this.$d.getTime()+r*M;return b.w(m,this)},m.subtract=function(t,e){return this.add(-1*t,e)},m.format=function(t){var e=this,n=this.$locale();if(!this.isValid())return n.invalidDate||l;var r=t||"YYYY-MM-DDTHH:mm:ssZ",i=b.z(this),s=this.$H,u=this.$m,a=this.$M,o=n.weekdays,c=n.months,f=n.meridiem,h=function(t,n,i,s){return t&&(t[n]||t(e,r))||i[n].slice(0,s)},d=function(t){return b.s(s%12||12,t,"0")},$=f||function(t,e,n){var r=t<12?"AM":"PM";return n?r.toLowerCase():r};return r.replace(y,(function(t,r){return r||function(t){switch(t){case"YY":return String(e.$y).slice(-2);case"YYYY":return b.s(e.$y,4,"0");case"M":return a+1;case"MM":return b.s(a+1,2,"0");case"MMM":return h(n.monthsShort,a,c,3);case"MMMM":return h(c,a);case"D":return e.$D;case"DD":return b.s(e.$D,2,"0");case"d":return String(e.$W);case"dd":return h(n.weekdaysMin,e.$W,o,2);case"ddd":return h(n.weekdaysShort,e.$W,o,3);case"dddd":return o[e.$W];case"H":return String(s);case"HH":return b.s(s,2,"0");case"h":return d(1);case"hh":return d(2);case"a":return $(s,u,!0);case"A":return $(s,u,!1);case"m":return String(u);case"mm":return b.s(u,2,"0");case"s":return String(e.$s);case"ss":return b.s(e.$s,2,"0");case"SSS":return b.s(e.$ms,3,"0");case"Z":return i}return null}(t)||i.replace(":","")}))},m.utcOffset=function(){return 15*-Math.round(this.$d.getTimezoneOffset()/15)},m.diff=function(r,d,l){var $,y=this,M=b.p(d),m=O(r),v=(m.utcOffset()-this.utcOffset())*e,g=this-m,D=function(){return b.m(y,m)};switch(M){case h:$=D()/12;break;case c:$=D();break;case f:$=D()/3;break;case o:$=(g-v)/6048e5;break;case a:$=(g-v)/864e5;break;case u:$=g/n;break;case s:$=g/e;break;case i:$=g/t;break;default:$=g;}return l?$:b.a($)},m.daysInMonth=function(){return this.endOf(c).$D},m.$locale=function(){return D[this.$L]},m.locale=function(t,e){if(!t)return this.$L;var n=this.clone(),r=w(t,e,!0);return r&&(n.$L=r),n},m.clone=function(){return b.w(this.$d,this)},m.toDate=function(){return new Date(this.valueOf())},m.toJSON=function(){return this.isValid()?this.toISOString():null},m.toISOString=function(){return this.$d.toISOString()},m.toString=function(){return this.$d.toUTCString()},M}(),Y=_.prototype;return O.prototype=Y,[["$ms",r],["$s",i],["$m",s],["$H",u],["$W",a],["$M",c],["$y",h],["$D",d]].forEach((function(t){Y[t[1]]=function(e){return this.$g(e,t[0],t[1])};})),O.extend=function(t,e){return t.$i||(t(e,_,O),t.$i=!0),O},O.locale=w,O.isDayjs=S,O.unix=function(t){return O(1e3*t)},O.en=D[g],O.Ls=D,O.p={},O}));
+});
+
+const calcArgs = (args, template) => {
+  const {
+    attr,
+    normal
+  } = groupBy(args, item => /^.+:.+$/.test(item) ? 'attr' : 'normal');
+  const output = {};
+  const typeTransform = (value, type) => {
+    if (type === 'string') {
+      return String(value);
+    }
+    if (type === 'number') {
+      return Number(value);
+    }
+    if (type === 'boolean') {
+      return value === 'true';
+    }
+    return value;
+  };
+  (normal || []).forEach((target, index) => {
+    const currentTemplate = Object.assign({}, {
+      type: 'string',
+      defaultValue: ''
+    }, get(template, index));
+    if (currentTemplate.name && target) {
+      output[currentTemplate.name] = typeTransform(target, currentTemplate.type);
+    }
+  });
+  (attr || []).forEach(target => {
+    const [key, value] = target.split(':');
+    const currentTemplate = template.find(item => item.name === key);
+    if (!currentTemplate) {
+      return;
+    }
+    const {
+      name,
+      type
+    } = Object.assign({}, {
+      type: 'string',
+      defaultValue: ''
+    }, currentTemplate);
+    output[name] = typeTransform(value, type);
+  });
+  return Object.assign({}, transform(template, (result, value) => {
+    if (value.name && value.hasOwnProperty('defaultValue')) {
+      result[value.name] = value.defaultValue;
+    }
+  }, {}), output);
+};
+const defaultFormat = {
+  date: (value, {
+    args
+  }) => {
+    const template = args[0] || 'YYYY-MM-DD';
+    return dayjs_min(value).format(template);
+  },
+  datetime: (value, {
+    args
+  }) => {
+    const template = args[0] || 'YYYY-MM-DD HH:mm:ss';
+    return dayjs_min(value).format(template);
+  },
+  dateRange: (value, {
+    args
+  }) => {
+    const template = args[0] || 'YYYY-MM-DD',
+      allowNull = args[1];
+    if (!isEmpty(value[0]) && !isEmpty(value[1])) {
+      return `${dayjs_min(value[0]).format(template)}~${dayjs_min(value[1]).format(template)}`;
+    }
+    if (allowNull === 'allow' && !isEmpty(value[0])) {
+      return `${dayjs_min(value[0]).format(template)}以后`;
+    }
+    if (allowNull === 'allow' && !isEmpty(value[1])) {
+      return `${dayjs_min(value[1]).format(template)}以前`;
+    }
+    return '';
+  },
+  boolean: (value, {
+    args
+  }) => {
+    const trueValue = args[0] || 'true';
+    if ((value || '').toString() === trueValue) {
+      return '是';
+    }
+    return '否';
+  },
+  number: (value, {
+    args
+  }) => {
+    const {
+      style,
+      unit,
+      maximumFractionDigits,
+      useGrouping,
+      roundingMode,
+      suffix
+    } = calcArgs(args, [{
+      name: 'style',
+      type: 'string',
+      defaultValue: 'decimal'
+    }, {
+      name: 'unit',
+      type: 'number',
+      defaultValue: 1
+    }, {
+      name: 'maximumFractionDigits',
+      type: 'number',
+      defaultValue: 2
+    }, {
+      name: 'useGrouping',
+      type: 'boolean',
+      defaultValue: true
+    }, {
+      name: 'roundingMode',
+      type: 'string',
+      defaultValue: 'halfExpand'
+    }, {
+      name: 'suffix',
+      type: 'string',
+      defaultValue: ''
+    }]);
+    return new Intl.NumberFormat({}, {
+      style,
+      maximumFractionDigits,
+      roundingMode,
+      useGrouping
+    }).format(value / unit) + suffix;
+  },
+  money: (value, {
+    args
+  }) => {
+    const unit = args[0] || '元';
+    return `${value}${unit}`;
+  }
+};
+const formatView = (value, format, context) => {
+  if (!format) {
+    return value;
+  }
+  const formatList = format.split(' ').filter(item => !!item);
+  if (formatList.length > 0) {
+    return formatList.reduce((value, format) => {
+      const [name, ...args] = format.split('-');
+      if (typeof defaultFormat[name] === 'function') {
+        return defaultFormat[name](value, Object.assign({}, context, {
+          args: args.map(item => {
+            return item && item.replace(/\(\)/g, ' ').replace(/\(_\)/g, '-');
+          })
+        }));
+      }
+      return value;
+    }, value);
+  }
+};
+
+const globalParams = {
+  renderType: null,
+  renderTypeSize: {},
+  tagTypeColors: {}
+};
+
+const defaultRender = value => value;
+
+var ellipsisStyle = {"ellipsis":"kne-table-page_mMMw1","tooltip":"kne-table-page_CkWQu","cell-content":"kne-table-page_OXmYu","cell-full-width":"kne-table-page_jN-vq"};
+
+const _excluded$7 = ["showTitle"];
+const Ellipsis = ({
+  children,
+  ellipsis
+}) => {
+  if (!ellipsis) {
+    return children;
+  }
+  const userConfig = typeof ellipsis === 'object' ? ellipsis : {};
+  const {
+      showTitle
+    } = userConfig,
+    rest = _objectWithoutPropertiesLoose(userConfig, _excluded$7);
+  return /*#__PURE__*/jsx(Typography.Text, {
+    className: ellipsisStyle['ellipsis'],
+    ellipsis: Object.assign({}, {
+      tooltip: showTitle === false ? false : {
+        rootClassName: ellipsisStyle['tooltip']
+      }
+    }, rest),
+    children: children
+  });
+};
+
+var style$7 = {"text":"kne-table-page_5N2-a","ellipsis":"kne-table-page_Lkl3D","hover":"kne-table-page_RnF6d","primary":"kne-table-page_g-Sky"};
+
+const main = (value, {
+  column,
+  dataSource
+} = {}) => {
+  const {
+    ellipsis = true,
+    hover = true,
+    primary = true,
+    onClick
+  } = column || {};
+  if (!hover && !primary && !onClick) {
+    return /*#__PURE__*/jsx(Ellipsis, {
+      ellipsis: ellipsis,
+      children: value
+    });
+  }
+  const ellipsisConfig = typeof ellipsis === 'object' ? ellipsis : {};
+  const showTooltip = ellipsis && ellipsisConfig.showTitle !== false;
+  const text = /*#__PURE__*/jsx("span", {
+    className: classnames(style$7['text'], ellipsis && style$7['ellipsis'], {
+      [style$7['hover']]: hover,
+      [style$7['primary']]: primary
+    }),
+    onClick: onClick ? e => onClick({
+      item: value,
+      colItem: dataSource,
+      event: e
+    }) : undefined,
+    children: value
+  });
+  if (!showTooltip) {
+    return text;
+  }
+  return /*#__PURE__*/jsx(Tooltip, {
+    title: value,
+    rootClassName: ellipsisStyle['tooltip'],
+    children: text
+  });
+};
+
+var style$6 = {"amount":"kne-table-page_AH-3R"};
+
+const amount = (value, {
+  column
+} = {}) => {
+  const {
+    ellipsis = true
+  } = column || {};
+  return /*#__PURE__*/jsx("span", {
+    className: style$6['amount'],
+    children: /*#__PURE__*/jsx(Ellipsis, {
+      ellipsis: ellipsis,
+      children: value
+    })
+  });
+};
+
+const _excluded$6 = ["text", "type", "color", "children"];
+const DEFAULT_TAG_TYPE_COLORS = {
+  default: 'default',
+  success: 'success',
+  progress: 'processing',
+  processing: 'processing',
+  danger: 'error',
+  error: 'error',
+  warning: 'warning',
+  info: 'blue',
+  other: 'purple',
+  skill: 'default',
+  result: 'default',
+  filterResult: 'cyan',
+  completed: 'success',
+  pending: 'warning',
+  high: 'error',
+  medium: 'warning',
+  low: 'default'
+};
+const getTagColor = type => {
+  if (!type) {
+    return 'default';
+  }
+  const customColors = globalParams.tagTypeColors || {};
+  return customColors[type] || DEFAULT_TAG_TYPE_COLORS[type] || type;
+};
+const normalizeTagItem = item => {
+  if (item == null) {
+    return null;
+  }
+  if (typeof item === 'string' || typeof item === 'number') {
+    return {
+      text: String(item)
+    };
+  }
+  if (typeof item === 'object') {
+    var _ref, _item$text;
+    return Object.assign({}, item, {
+      text: (_ref = (_item$text = item.text) != null ? _item$text : item.children) != null ? _ref : item.label
+    });
+  }
+  return null;
+};
+const renderTagItem = (item, key) => {
+  const tag = normalizeTagItem(item);
+  if (!tag || tag.text == null && tag.children == null) {
+    return null;
+  }
+  const {
+      text,
+      type,
+      color,
+      children
+    } = tag,
+    rest = _objectWithoutPropertiesLoose(tag, _excluded$6);
+  return /*#__PURE__*/jsx(Tag, _extends({
+    color: color != null ? color : getTagColor(type)
+  }, rest, {
+    children: children != null ? children : text
+  }), key);
+};
+const renderTagList = value => {
+  if (!Array.isArray(value) || value.length === 0) {
+    return null;
+  }
+  return /*#__PURE__*/jsx(Space, {
+    size: [4, 4],
+    wrap: true,
+    children: value.map((item, index) => renderTagItem(item, index))
+  });
+};
+
+const tag = value => renderTagItem(value);
+
+const tagList = value => renderTagList(value);
+
+const DEFAULT_SPLIT = ',';
+const normalizeListValue = value => {
+  if (Array.isArray(value)) {
+    return {
+      items: value,
+      split: undefined
+    };
+  }
+  if (value && typeof value === 'object') {
+    var _ref, _value$items;
+    const items = (_ref = (_value$items = value.items) != null ? _value$items : value.list) != null ? _ref : value.value;
+    if (Array.isArray(items)) {
+      return {
+        items,
+        split: value.split
+      };
+    }
+  }
+  return null;
+};
+const getListItemText = item => {
+  if (item == null) {
+    return null;
+  }
+  if (typeof item === 'object') {
+    var _ref2, _ref3, _item$text;
+    return (_ref2 = (_ref3 = (_item$text = item.text) != null ? _item$text : item.label) != null ? _ref3 : item.children) != null ? _ref2 : item.value;
+  }
+  return item;
+};
+const list = (value, {
+  column
+} = {}) => {
+  var _ref4, _normalized$split;
+  const normalized = normalizeListValue(value);
+  if (!normalized) {
+    return value == null ? null : value;
+  }
+  const split = (_ref4 = (_normalized$split = normalized.split) != null ? _normalized$split : column == null ? void 0 : column.split) != null ? _ref4 : DEFAULT_SPLIT;
+  const text = normalized.items.map(getListItemText).filter(item => item != null && item !== '').join(split);
+  return text || null;
+};
+
+const SELECTION_CHECKBOX_WIDTH = 48;
+const SELECTION_RADIO_WIDTH = 30;
+const DEFAULT_COLUMN_WIDTH = 300;
+const parseColumnWidth = width => {
+  if (width == null) {
+    return 0;
+  }
+  if (typeof width === 'number' && !Number.isNaN(width)) {
+    return width;
+  }
+  if (typeof width === 'string') {
+    const trimmed = width.trim();
+    const pxMatch = trimmed.match(/^([\d.]+)px$/i);
+    if (pxMatch) {
+      return parseFloat(pxMatch[1]);
+    }
+    const num = parseFloat(trimmed);
+    if (!Number.isNaN(num)) {
+      return num;
+    }
+  }
+  return 0;
+};
+const getResolvedColumnWidth = column => resolveColumnDimensions(column).width;
+const hasColumnSpan = column => column.span != null;
+const getConfiguredColumnWidthPx = column => parseColumnWidth(column.width != null ? column.width : getResolvedColumnWidth(column));
+const usesDefaultColumnWidth = (column, columns) => {
+  if (hasColumnSpan(column)) {
+    return false;
+  }
+  if (column.width != null) {
+    return false;
+  }
+  if (getConfiguredColumnWidthPx(column) > 0) {
+    return false;
+  }
+  return !columns.some(hasColumnSpan);
+};
+const hasColumnWidth = (column, columns) => {
+  if (hasColumnSpan(column)) {
+    return false;
+  }
+  if (getConfiguredColumnWidthPx(column) > 0) {
+    return true;
+  }
+  return usesDefaultColumnWidth(column, columns);
+};
+const shouldLastColumnFillRemaining = columns => !columns.some(hasColumnSpan);
+const getColumnWidthPx = (column, colsSize = {}, columns = []) => {
+  if (hasColumnSpan(column)) {
+    return colsSize[column.name] || 0;
+  }
+  const configured = getConfiguredColumnWidthPx(column);
+  if (configured > 0) {
+    return configured;
+  }
+  if (usesDefaultColumnWidth(column, columns)) {
+    const measured = colsSize[column.name] || 0;
+    return Math.max(DEFAULT_COLUMN_WIDTH, measured);
+  }
+  return colsSize[column.name] || 0;
+};
+const formatColumnWidthPx = px => `${px}px`;
+const getColumnTrackSize = (column, {
+  defaultSpan,
+  colsSize,
+  isLastColumn,
+  columns
+} = {}) => {
+  var _ref, _column$span;
+  const widthPx = getColumnWidthPx(column, colsSize, columns);
+  if (hasColumnWidth(column, columns)) {
+    if (isLastColumn && shouldLastColumnFillRemaining(columns)) {
+      return `minmax(${widthPx}px, 1fr)`;
+    }
+    return `${widthPx}px`;
+  }
+  if (widthPx > 0) {
+    return `minmax(${widthPx}px, 1fr)`;
+  }
+  const span = (_ref = (_column$span = column.span) != null ? _column$span : defaultSpan) != null ? _ref : 1;
+  return `minmax(0, ${span}fr)`;
+};
+const getGridTemplateColumns = (columns, {
+  defaultSpan,
+  colsSize,
+  rowSelection
+} = {}) => {
+  const tracks = [];
+  const lastColumnIndex = columns.length - 1;
+  if ((rowSelection == null ? void 0 : rowSelection.type) === 'checkbox') {
+    tracks.push(`${SELECTION_CHECKBOX_WIDTH}px`);
+  }
+  columns.forEach((column, index) => {
+    tracks.push(getColumnTrackSize(column, {
+      defaultSpan,
+      colsSize,
+      isLastColumn: index === lastColumnIndex,
+      columns
+    }));
+  });
+  if ((rowSelection == null ? void 0 : rowSelection.type) === 'radio') {
+    tracks.push(`${SELECTION_RADIO_WIDTH}px`);
+  }
+  return tracks.join(' ');
+};
+const getColumnLayout = (column, {
+  defaultSpan,
+  colsSize,
+  isLastColumn,
+  columns
+} = {}) => {
+  const widthBased = hasColumnWidth(column, columns);
+  const widthPx = getColumnWidthPx(column, colsSize, columns);
+  const fillRemaining = isLastColumn && widthBased && shouldLastColumnFillRemaining(columns);
+  return {
+    widthBased,
+    fillRemaining,
+    style: {
+      '--col-width': formatColumnWidthPx(widthPx),
+      '--col-align': column.align || 'top',
+      '--col-justify': column.justify || 'flex-start'
+    }
+  };
+};
+
+var style$5 = {"col-item":"kne-table-page_nL1tj","options":"kne-table-page_EwzO-","options-column":"kne-table-page_im2Lc","options-btn":"kne-table-page_SJxZl"};
+
+const _excluded$5 = ["children", "label", "text", "className"],
+  _excluded2$2 = ["list"];
+const normalizeOptionItem = (item, buttonClassName) => {
+  var _ref;
+  if (item == null) {
+    return null;
+  }
+  if (typeof item === 'function') {
+    return item;
+  }
+  if (typeof item === 'string') {
+    return {
+      children: item,
+      type: 'link',
+      className: buttonClassName
+    };
+  }
+  const {
+      children,
+      label,
+      text,
+      className
+    } = item,
+    rest = _objectWithoutPropertiesLoose(item, _excluded$5);
+  return _extends({
+    type: 'link'
+  }, rest, {
+    className: classnames(buttonClassName, className),
+    children: (_ref = children != null ? children : label) != null ? _ref : text
+  });
+};
+const options = (value, {
+  column
+} = {}) => {
+  let list = value;
+  let buttonGroupProps = (column == null ? void 0 : column.buttonGroup) || {};
+  if (value && typeof value === 'object' && !Array.isArray(value) && Array.isArray(value.list)) {
+    const {
+        list: valueList
+      } = value,
+      rest = _objectWithoutPropertiesLoose(value, _excluded2$2);
+    list = valueList;
+    buttonGroupProps = _extends({}, buttonGroupProps, rest);
+  }
+  if (!Array.isArray(list) || list.length === 0) {
+    return null;
+  }
+  const wrapperClassName = classnames(style$5['col-item'], style$5['options']);
+  const buttonClassName = classnames(wrapperClassName, style$5['options-btn']);
+  const normalizedList = list.map(item => normalizeOptionItem(item, buttonClassName)).filter(item => item != null && !item.hidden);
+  if (normalizedList.length === 0) {
+    return null;
+  }
+  const width = parseColumnWidth(column == null ? void 0 : column.width);
+  return /*#__PURE__*/jsx("div", {
+    className: classnames(wrapperClassName, style$5['options-column']),
+    style: width > 0 ? {
+      '--max-width': `${width}px`
+    } : undefined,
+    children: /*#__PURE__*/jsx(ButtonGroup, _extends({
+      moreType: "link",
+      itemClassName: "btn-no-padding",
+      list: normalizedList
+    }, buttonGroupProps))
+  });
+};
+
+const enumRender = value => tag(value);
+
+const description = value => value;
+
+const renderType = {
+  default: defaultRender,
+  main,
+  amount,
+  tag,
+  tagList,
+  list,
+  options,
+  enum: enumRender,
+  description
+};
+globalParams.renderType = renderType;
+
+const _excluded$4 = ["default"];
+const SIZE_NAMES = ['short', 'small', 'large'];
+const typeSize = {
+  main: {
+    width: 300,
+    min: 160,
+    max: 500,
+    ellipsis: true
+  },
+  amount: {
+    width: 140,
+    min: 100,
+    max: 300,
+    ellipsis: true
+  },
+  options: {
+    width: 180,
+    min: 120,
+    max: 400
+  },
+  enum: {
+    width: 140,
+    min: 100,
+    max: 400
+  },
+  tag: {
+    width: 140,
+    min: 100,
+    max: 400
+  },
+  tagList: {
+    width: 300,
+    min: 160,
+    max: 500
+  },
+  list: {
+    width: 200,
+    min: 120,
+    max: 400,
+    ellipsis: true
+  },
+  description: {
+    width: 400,
+    min: 160,
+    max: 600,
+    ellipsis: true
+  }
+};
+const SIZE_CONFIG = {
+  short: {
+    width: 120,
+    min: 100,
+    max: 400
+  },
+  small: {
+    width: 100,
+    min: 70,
+    max: 400
+  },
+  default: {
+    width: 300,
+    min: 160,
+    max: 500
+  },
+  large: {
+    width: 300,
+    min: 120,
+    max: 500
+  }
+};
+const getRenderTypeRegistry = () => {
+  const _ref = globalParams.renderType || {},
+    {
+      default: defaultRender
+    } = _ref,
+    renderers = _objectWithoutPropertiesLoose(_ref, _excluded$4);
+  return {
+    defaultRender,
+    renderers
+  };
+};
+const getRenderTypeNames = () => Object.keys(getRenderTypeRegistry().renderers);
+const RENDER_TYPE_NAMES = getRenderTypeNames();
+const getRender = type => {
+  const {
+    defaultRender,
+    renderers
+  } = getRenderTypeRegistry();
+  return renderers[type] || defaultRender;
+};
+const getColumnRender = column => {
+  if (typeof (column == null ? void 0 : column.render) === 'function') {
+    return column.render;
+  }
+  const {
+    type
+  } = parseRenderType(column == null ? void 0 : column.renderType);
+  if (!type) {
+    return null;
+  }
+  return getRender(type);
+};
+const getTypeConfigMap = () => {
+  const extraTypeSize = globalParams.renderTypeSize || {};
+  return getRenderTypeNames().reduce((result, key) => {
+    result[key] = Object.assign({}, typeSize[key], extraTypeSize[key], {
+      render: getRender(key)
+    });
+    return result;
+  }, {});
+};
+const pickDimension = (columnValue, typeValue, sizeValue) => {
+  if (columnValue != null) {
+    return columnValue;
+  }
+  if (sizeValue != null) {
+    return sizeValue;
+  }
+  if (typeValue != null) {
+    return typeValue;
+  }
+  return undefined;
+};
+const parseRenderType = renderTypeValue => {
+  if (!renderTypeValue || typeof renderTypeValue !== 'string') {
+    return {
+      type: null,
+      size: null
+    };
+  }
+  const renderTypeNames = getRenderTypeNames();
+  let type = null;
+  let size = null;
+  renderTypeValue.split('-').forEach(part => {
+    if (!part) {
+      return;
+    }
+    if (renderTypeNames.includes(part)) {
+      type = part;
+      return;
+    }
+    if (SIZE_NAMES.includes(part)) {
+      size = part;
+    }
+  });
+  return {
+    type,
+    size
+  };
+};
+const getRenderTypeDimensions = renderTypeValue => {
+  const {
+    type,
+    size
+  } = parseRenderType(renderTypeValue);
+  const typeConfigMap = getTypeConfigMap();
+  const typeConfig = type ? typeConfigMap[type] : null;
+  const sizeConfig = size ? SIZE_CONFIG[size] : null;
+  if (!typeConfig && !sizeConfig) {
+    return null;
+  }
+  return {
+    type,
+    size,
+    typeConfig,
+    sizeConfig,
+    render: typeConfig == null ? void 0 : typeConfig.render,
+    ellipsis: typeConfig == null ? void 0 : typeConfig.ellipsis
+  };
+};
+const resolveColumnDimensions = column => {
+  const renderTypeDimensions = column != null && column.renderType ? getRenderTypeDimensions(column.renderType) : null;
+  const typeConfig = renderTypeDimensions == null ? void 0 : renderTypeDimensions.typeConfig;
+  const sizeConfig = renderTypeDimensions == null ? void 0 : renderTypeDimensions.sizeConfig;
+  return {
+    width: pickDimension(column == null ? void 0 : column.width, typeConfig == null ? void 0 : typeConfig.width, sizeConfig == null ? void 0 : sizeConfig.width),
+    min: pickDimension(column == null ? void 0 : column.min, typeConfig == null ? void 0 : typeConfig.min, sizeConfig == null ? void 0 : sizeConfig.min),
+    max: pickDimension(column == null ? void 0 : column.max, typeConfig == null ? void 0 : typeConfig.max, sizeConfig == null ? void 0 : sizeConfig.max)
+  };
+};
+const resolveRenderType = renderTypeValue => {
+  var _sizeConfig$width, _sizeConfig$min, _sizeConfig$max;
+  const renderTypeDimensions = getRenderTypeDimensions(renderTypeValue);
+  if (!renderTypeDimensions) {
+    return null;
+  }
+  const {
+    type,
+    size,
+    render,
+    ellipsis,
+    typeConfig,
+    sizeConfig
+  } = renderTypeDimensions;
+  return {
+    type,
+    size,
+    render,
+    ellipsis,
+    width: (_sizeConfig$width = sizeConfig == null ? void 0 : sizeConfig.width) != null ? _sizeConfig$width : typeConfig == null ? void 0 : typeConfig.width,
+    min: (_sizeConfig$min = sizeConfig == null ? void 0 : sizeConfig.min) != null ? _sizeConfig$min : typeConfig == null ? void 0 : typeConfig.min,
+    max: (_sizeConfig$max = sizeConfig == null ? void 0 : sizeConfig.max) != null ? _sizeConfig$max : typeConfig == null ? void 0 : typeConfig.max
+  };
+};
+const ELLIPSIS_HANDLED_TYPES = ['main', 'amount'];
+const FULL_WIDTH_CELL_TYPES = ['options'];
+const resolveColumn = column => {
+  if (!column) {
+    return column;
+  }
+  const renderTypeDimensions = column.renderType ? getRenderTypeDimensions(column.renderType) : null;
+  const {
+    width,
+    min,
+    max
+  } = resolveColumnDimensions(column);
+  const {
+    ellipsis,
+    type
+  } = renderTypeDimensions || {};
+  const renderFn = getColumnRender(column);
+  return Object.assign({}, column, _extends({}, renderFn && typeof column.render !== 'function' ? {
+    render: renderFn
+  } : {}, column.width == null && width != null ? {
+    width
+  } : {}, column.min == null && min != null ? {
+    min
+  } : {}, column.max == null && max != null ? {
+    max
+  } : {}, column.ellipsis == null && ellipsis != null ? {
+    ellipsis
+  } : {}, type && ELLIPSIS_HANDLED_TYPES.includes(type) ? {
+    ellipsisHandledByRender: true
+  } : {}, type && FULL_WIDTH_CELL_TYPES.includes(type) ? {
+    cellFullWidth: true
+  } : {}, column.type === 'options' && !type ? {
+    cellFullWidth: true
+  } : {}, type === 'options' && column.type !== 'options' ? {
+    type: 'options'
+  } : {}));
+};
+const resolveColumns = columns => (columns || []).map(resolveColumn);
+const isOptionsColumn = column => {
+  if ((column == null ? void 0 : column.type) === 'options') {
+    return true;
+  }
+  return parseRenderType(column == null ? void 0 : column.renderType).type === 'options';
+};
+
+const computeColumnsValue = ({
+  columns,
+  emptyIsPlaceholder,
+  valueIsEmpty,
+  removeEmpty: _removeEmpty = true,
+  dataSource,
+  context
+}) => {
+  return (output => _removeEmpty ? output.filter(item => !!item) : output)(columns.map(item => {
+    const itemValue = typeof item.getValueOf === 'function' ? item.getValueOf(dataSource, {
+      column: item,
+      context
+    }) : get(dataSource, item.name);
+    const displayValue = (value => {
+      if (typeof item.format === 'function') {
+        return item.format(value, {
+          dataSource,
+          column: item,
+          context
+        });
+      }
+      if (typeof item.format === 'string') {
+        const formatValue = formatView(value, item.format, {
+          dataSource,
+          column: item,
+          context
+        });
+        if (formatValue) {
+          return formatValue;
+        }
+      }
+      return value;
+    })(itemValue);
+    const itemIsEmpty = (item.valueIsEmpty || valueIsEmpty)(itemValue);
+    if (item.display === false || typeof item.display === 'function' && item.display(itemValue, {
+      dataSource,
+      column: item,
+      context
+    }) === false) {
+      return null;
+    }
+    if (!(item.hasOwnProperty('emptyIsPlaceholder') ? item.emptyIsPlaceholder : emptyIsPlaceholder) && itemIsEmpty) {
+      return null;
+    }
+    return Object.assign({}, item, {
+      isEmpty: itemIsEmpty,
+      value: displayValue
+    });
+  }));
+};
+const computeDisplay = ({
+  column,
+  dataSource,
+  placeholder,
+  context
+}) => {
+  if (column.isEmpty) {
+    return typeof column.renderPlaceholder === 'function' ? column.renderPlaceholder({
+      column: column,
+      dataSource,
+      placeholder,
+      context
+    }) : column.placeholder || placeholder;
+  }
+  const render = getColumnRender(column);
+  return typeof render === 'function' ? render(column.value, {
+    column,
+    dataSource,
+    context
+  }) : column.value;
+};
+const computeColumnsDisplay = ({
+  columns,
+  emptyIsPlaceholder,
+  valueIsEmpty,
+  removeEmpty,
+  dataSource,
+  placeholder,
+  context
+}) => {
+  return computeColumnsValue({
+    columns,
+    emptyIsPlaceholder,
+    valueIsEmpty,
+    removeEmpty,
+    dataSource,
+    context
+  }).map(column => {
+    return computeDisplay({
+      column,
+      placeholder,
+      dataSource,
+      context
+    });
+  });
+};
+computeColumnsValue.computeDisplay = computeDisplay;
+computeColumnsValue.computeColumnsDisplay = computeColumnsDisplay;
+
+var style$4 = {"table":"kne-table-page_lZgIW","tableView":"kne-table-page_fUw6j","grid":"kne-table-page_JlDmf","header-cell":"kne-table-page_P-ebv","body-row":"kne-table-page_Z6mVv","col":"kne-table-page_KNy4z","body-cell":"kne-table-page_BSOzz","body":"kne-table-page_9qon1","is-selected-all":"kne-table-page_f2i1e","is-selected":"kne-table-page_n3V6m","is-disabled":"kne-table-page_AfmkR","col-width-based":"kne-table-page_ZvnDi","col-width-fill":"kne-table-page_cV7PE","col-content":"kne-table-page_HT5Rr","single-checked":"kne-table-page_9UAoL","col-fixed":"kne-table-page_aB-1c","empty":"kne-table-page_SRI8Q"};
+
+var style$3 = {"table":"kne-table-page_awa1L","is-selected-all":"kne-table-page_692q3","is-selected":"kne-table-page_IWgjl","is-disabled":"kne-table-page_YUG4k","has-summary":"kne-table-page_Cb-du","has-group-header":"kne-table-page_7qTC5","table-cell":"kne-table-page_HPmr3","selection-col":"kne-table-page_D7YhS","radio-col":"kne-table-page_df9z3","is-computed":"kne-table-page_ZA1Je","is-resize":"kne-table-page_CA0uL","column-resize-guide":"kne-table-page_JARA2"};
+
+const useSelectedRow = options => {
+  const {
+    rowKey,
+    type = 'checkbox'
+  } = Object.assign({}, {
+    rowKey: 'id'
+  }, options);
+  const [selectedRows, setSelectedRows] = useState([]);
+  const getRowId = useCallback(item => get(item, typeof rowKey === 'function' ? rowKey(item) : rowKey), [rowKey]);
+  const selectedRowKeys = useMemo(() => selectedRows.map(getRowId), [getRowId, selectedRows]);
+  const setSelectedRowKeys = useCallback((keys, dataSource = []) => {
+    const keySet = new Set(keys || []);
+    setSelectedRows((dataSource || []).filter(item => keySet.has(getRowId(item))));
+  }, [getRowId]);
+  const clearSelectedRows = useCallback(() => {
+    setSelectedRows([]);
+  }, []);
+  const onSelectAll = useCallback((checked, _selected, items) => {
+    const ids = (items || []).map(getRowId);
+    if (checked) {
+      setSelectedRows(value => {
+        const existingKeys = value.map(getRowId);
+        return [...value, ...(items || []).filter(item => existingKeys.indexOf(getRowId(item)) === -1)];
+      });
+    } else {
+      setSelectedRows(value => {
+        return value.filter(item => ids.indexOf(getRowId(item)) === -1);
+      });
+    }
+  }, [getRowId]);
+  const onSelect = useCallback((item, checked) => {
+    if (checked) {
+      if (type === 'radio') {
+        setSelectedRows([item]);
+        return;
+      }
+      setSelectedRows(value => {
+        const newValue = value.slice(0);
+        newValue.push(item);
+        return newValue;
+      });
+    } else {
+      setSelectedRows(value => {
+        const newValue = value.slice(0);
+        const index = newValue.findIndex(row => getRowId(row) === getRowId(item));
+        if (index > -1) {
+          newValue.splice(index, 1);
+        }
+        return newValue;
+      });
+    }
+  }, [getRowId, type]);
+  const getRowSelection = useCallback((dataSource, extra = {}) => {
+    const onChange = (keys, id, meta) => {
+      setSelectedRowKeys(keys, dataSource);
+      extra.onChange && extra.onChange(keys, id, meta);
+    };
+    return Object.assign({
+      type,
+      selectedRowKeys,
+      allowSelectedAll: type === 'checkbox',
+      onChange
+    }, extra);
+  }, [selectedRowKeys, setSelectedRowKeys, type]);
+  return {
+    type,
+    selectedRowKeys,
+    selectedRows,
+    onSelectAll,
+    onSelect,
+    setSelectedRows,
+    setSelectedRowKeys,
+    clearSelectedRows,
+    getRowSelection
+  };
+};
+
+var style$2 = {"title":"kne-table-page_Yn7Wc","title-text":"kne-table-page_QhSty","has-sort":"kne-table-page_YaVIX","sort-btn":"kne-table-page_XkYCi","sort-icon":"kne-table-page_SSGYi","active":"kne-table-page_VT0uN","sort-up":"kne-table-page_CIokw","sort-down":"kne-table-page_5xrlc"};
+
+const sortArrayToMap = sort => new Map((sort || []).map(item => {
+  return [item.name, item.sort];
+}));
+const useControlValue = ({
+  value,
+  defaultValue,
+  onChange
+}) => {
+  const [internalValue, setInternalValue] = useState(defaultValue);
+  const isControlled = value !== undefined;
+  const currentValue = isControlled ? value : internalValue;
+  const setValue = useCallback(updater => {
+    const nextValue = typeof updater === 'function' ? updater(currentValue) : updater;
+    if (!isControlled) {
+      setInternalValue(nextValue);
+    }
+    onChange && onChange(nextValue);
+  }, [currentValue, isControlled, onChange]);
+  return [currentValue, setValue];
+};
+const compareValues = (a, b, direction) => {
+  const emptyA = a == null || a === '';
+  const emptyB = b == null || b === '';
+  if (emptyA && emptyB) {
+    return 0;
+  }
+  if (emptyA) {
+    return 1;
+  }
+  if (emptyB) {
+    return -1;
+  }
+  if (typeof a === 'number' && typeof b === 'number') {
+    return direction === 'ASC' ? a - b : b - a;
+  }
+  const strA = String(a);
+  const strB = String(b);
+  return direction === 'ASC' ? strA.localeCompare(strB, 'zh-CN') : strB.localeCompare(strA, 'zh-CN');
+};
+const sortDataSource = (dataSource, sort = [], columns = []) => {
+  if (!(sort != null && sort.length) || !(dataSource != null && dataSource.length)) {
+    return dataSource;
+  }
+  const columnMap = new Map(columns.map(column => [column.name, column]));
+  return [...dataSource].sort((a, b) => {
+    for (const {
+      name,
+      sort: direction
+    } of sort) {
+      const column = columnMap.get(name) || {
+        name
+      };
+      const aVal = typeof column.getValueOf === 'function' ? column.getValueOf(a, {
+        column
+      }) : get(a, name);
+      const bVal = typeof column.getValueOf === 'function' ? column.getValueOf(b, {
+        column
+      }) : get(b, name);
+      const result = compareValues(aVal, bVal, direction);
+      if (result !== 0) {
+        return result;
+      }
+    }
+    return 0;
+  });
+};
+const getSortSingle = sortOption => {
+  if (typeof sortOption === 'object') {
+    return sortOption.single !== false;
+  }
+  return true;
+};
+const renderColumnTitle = (title, column, sortRender) => {
+  if (!column.sort || typeof sortRender !== 'function') {
+    return title;
+  }
+  return /*#__PURE__*/jsxs("span", {
+    className: classnames(style$2['title'], style$2['has-sort']),
+    children: [/*#__PURE__*/jsx("span", {
+      className: style$2['title-text'],
+      children: title
+    }), sortRender({
+      name: column.name,
+      single: getSortSingle(column.sort)
+    })]
+  });
+};
+const useSort = props => {
+  const [sort, setSort] = useControlValue({
+    value: props.sort,
+    defaultValue: props.defaultSort || [],
+    onChange: props.onSortChange
+  });
+  const mapSort = useMemo(() => {
+    return sortArrayToMap(sort);
+  }, [sort]);
+  const setMapSort = useCallback(callback => {
+    return setSort(currentSort => {
+      const newSort = callback(sortArrayToMap(currentSort));
+      return Array.from(newSort).map(([name, sortValue]) => ({
+        name,
+        sort: sortValue
+      }));
+    });
+  }, [setSort]);
+  const sortRender = useCallback(({
+    single,
+    name
+  }) => {
+    const direction = mapSort.get(name);
+    return /*#__PURE__*/jsxs("span", {
+      className: style$2['sort-btn'],
+      onClick: e => {
+        e.stopPropagation();
+        setMapSort(sortMap => {
+          const current = sortMap.get(name);
+          const targetValue = (() => {
+            if (current === 'DESC') {
+              return 'ASC';
+            }
+            if (current === 'ASC') {
+              return null;
+            }
+            return 'DESC';
+          })();
+          if (single) {
+            return new Map(targetValue ? [[name, targetValue]] : []);
+          }
+          const newSort = clone(sortMap);
+          targetValue ? newSort.set(name, targetValue) : newSort.delete(name);
+          return newSort;
+        });
+      },
+      children: [/*#__PURE__*/jsx(CaretUpOutlined, {
+        className: classnames(style$2['sort-icon'], style$2['sort-up'], {
+          [style$2['active']]: direction === 'ASC'
+        })
+      }), /*#__PURE__*/jsx(CaretDownOutlined, {
+        className: classnames(style$2['sort-icon'], style$2['sort-down'], {
+          [style$2['active']]: direction === 'DESC'
+        })
+      })]
+    });
+  }, [mapSort, setMapSort]);
+  return {
+    sort,
+    setSort,
+    sortRender
+  };
+};
+useSort.sortDataSource = sortDataSource;
+
+var configStyle = {"cell-resize-bar":"kne-table-page_PNaAP","table-changer-setting":"kne-table-page_B0U-O","is-active":"kne-table-page_vHrQo","table-config-header":"kne-table-page_Zp8MN","table-config-header-title":"kne-table-page_Pc6jR","columns-control-content":"kne-table-page_saJmr","columns-control-content-title":"kne-table-page_YmHni","columns-control-content-scroller":"kne-table-page_rgqWB","columns-control-sortable-list":"kne-table-page_JRcBW","columns-control-content-footer":"kne-table-page_nLwW1","columns-control-content-input":"kne-table-page_9qyJs","columns-control-content-list":"kne-table-page_Sslzr","columns-control-content-item":"kne-table-page_7CamD","is-drag":"kne-table-page_X18rq","columns-control-content-item-icon":"kne-table-page_Eab-e","columns-control-overlay":"kne-table-page_eT4HV","header-col":"kne-table-page_bjDly","header-cell-inner":"kne-table-page_9FKgD"};
+
+const locale$1 = {
+  TotalText: '共',
+  ItemText: '条',
+  UnnamedColumn: '未命名列',
+  EditTable: '编辑表格',
+  RestoreDefault: '恢复默认',
+  VisibleInfo: '显示的信息',
+  HiddenInfo: '隐藏的信息',
+  Search: '搜索',
+  BatchOperations: '批量操作',
+  BatchOperationsWithCount: '批量操作(已选:{count}条)',
+  Cancel: '取消',
+  Confirm: '确定'
+};
+
+const locale = {
+  TotalText: 'Total',
+  ItemText: 'items',
+  UnnamedColumn: 'Unnamed',
+  EditTable: 'Edit Table',
+  RestoreDefault: 'Restore Default',
+  VisibleInfo: 'Visible Columns',
+  HiddenInfo: 'Hidden Columns',
+  Search: 'Search',
+  BatchOperations: 'Batch Actions',
+  BatchOperationsWithCount: 'Batch Actions (Selected: {count})',
+  Cancel: 'Cancel',
+  Confirm: 'Confirm'
+};
+
+const withLocale = createWithIntlProvider({
+  defaultLocale: 'zh-CN',
+  messages: {
+    'zh-CN': _extends({}, filterZhCN, locale$1),
+    'en-US': _extends({}, filterEnUS, locale)
+  },
+  namespace: 'table-page'
+});
+
+const ColumnsControlContent = withLocale(({
+  close,
+  onConfirm,
+  columns,
+  config: defaultValue
+}) => {
+  const {
+    formatMessage
+  } = useIntl();
+  const [config, onChange] = useState(defaultValue || {});
+  const [searchText, setSearchText] = useState('');
+  const [confirmLoading, setConfirmLoading] = useState(false);
+  const [scrollEl, setScrollEl] = useState(null);
+  const {
+    leftFixedColumns,
+    rightFixedColumns,
+    visibleColumns,
+    hiddenColumns
+  } = useMemo(() => {
+    return transform(Object.assign({
+      leftFixedColumns: [],
+      rightFixedColumns: [],
+      visibleColumns: [],
+      hiddenColumns: []
+    }, groupBy(columns, item => {
+      if (item.fixed === 'right') {
+        return 'rightFixedColumns';
+      }
+      if (item.fixed === true || item.fixed === 'left') {
+        return 'leftFixedColumns';
+      }
+      return get(config, `${item.name}.visible`) !== true && item.hidden || get(config, `${item.name}.visible`) === false ? 'hiddenColumns' : 'visibleColumns';
+    })), (result, value, key) => {
+      result[key] = value.sort((a, b) => get(config, `${a.name}.rank`, 0) - get(config, `${b.name}.rank`, 0));
+    }, {});
+  }, [columns, config]);
+  const sortableVisibleColumns = useMemo(() => {
+    return visibleColumns.map(column => Object.assign({}, column, {
+      id: column.name
+    }));
+  }, [visibleColumns]);
+  const handlerColumnsChange = columnsState => {
+    const newConfig = cloneDeep(config);
+    const columnsList = [].concat(columnsState.leftFixedColumns, columnsState.visibleColumns, columnsState.rightFixedColumns);
+    (columnsState.hiddenColumns || []).forEach(col => {
+      set(newConfig, `${col.name}.visible`, false);
+    });
+    columnsList.forEach((col, index) => {
+      set(newConfig, `${col.name}.rank`, index + 1);
+    });
+    onChange(newConfig);
+  };
+  const renderColumn = item => {
+    return /*#__PURE__*/jsxs(Fragment, {
+      children: [item.titleText || item.title || formatMessage({
+        id: 'UnnamedColumn'
+      }), item.groupHeader && item.groupHeader.length > 0 ? `(${item.groupHeader.map(({
+        title
+      }) => title).join('-')})` : '']
+    });
+  };
+  const collapseItems = useMemo(() => {
+    return [{
+      key: 'active',
+      label: formatMessage({
+        id: 'VisibleInfo'
+      }),
+      children: /*#__PURE__*/jsxs("div", {
+        className: configStyle['columns-control-content-list'],
+        children: [leftFixedColumns.map((item, index) => /*#__PURE__*/jsx("div", {
+          className: configStyle['columns-control-content-item'],
+          children: /*#__PURE__*/jsx(Checkbox, {
+            checked: true,
+            disabled: true,
+            children: renderColumn(item)
+          })
+        }, item.name || `left-${index}`)), /*#__PURE__*/jsx(ReactSortable, {
+          tag: "div",
+          className: configStyle['columns-control-sortable-list'],
+          list: sortableVisibleColumns,
+          filter: ".ignore-elements",
+          dragClass: "table-page-sortable-drag",
+          ghostClass: "table-page-sortable-ghost",
+          chosenClass: "table-page-sortable-chosen",
+          forceFallback: true,
+          fallbackOnBody: true,
+          scroll: scrollEl || true,
+          bubbleScroll: true,
+          setList: nextVisibleColumns => {
+            handlerColumnsChange({
+              leftFixedColumns,
+              visibleColumns: nextVisibleColumns,
+              hiddenColumns,
+              rightFixedColumns
+            });
+          },
+          animation: 300,
+          delayOnTouchStart: true,
+          delay: 2,
+          children: sortableVisibleColumns.map(item => /*#__PURE__*/jsxs("div", {
+            className: classnames(configStyle['columns-control-content-item'], configStyle['is-drag']),
+            children: [/*#__PURE__*/jsx(HolderOutlined, {
+              className: configStyle['columns-control-content-item-icon']
+            }), /*#__PURE__*/jsx(Checkbox, {
+              checked: true,
+              disabled: item.fixed || leftFixedColumns.length + visibleColumns.length + rightFixedColumns.length <= 1,
+              onChange: e => {
+                e.stopPropagation();
+                e.preventDefault();
+                const newConfig = Object.assign({}, config);
+                newConfig[item.name] = Object.assign({}, newConfig[item.name], {
+                  visible: false
+                });
+                onChange(newConfig);
+              },
+              children: renderColumn(item)
+            })]
+          }, item.id))
+        }), rightFixedColumns.map((item, index) => /*#__PURE__*/jsx("div", {
+          className: configStyle['columns-control-content-item'],
+          children: /*#__PURE__*/jsx(Checkbox, {
+            checked: true,
+            disabled: true,
+            children: item.titleText || item.title || formatMessage({
+              id: 'UnnamedColumn'
+            })
+          })
+        }, item.name || `right-${index}`))]
+      })
+    }, {
+      key: 'un-active',
+      label: /*#__PURE__*/jsxs(Row, {
+        wrap: false,
+        justify: "space-between",
+        children: [/*#__PURE__*/jsx(Col, {
+          children: formatMessage({
+            id: 'HiddenInfo'
+          })
+        }), /*#__PURE__*/jsx(Col, {
+          onClick: e => {
+            e.stopPropagation();
+            e.preventDefault();
+          },
+          children: /*#__PURE__*/jsx(Input.Search, {
+            placeholder: formatMessage({
+              id: 'Search'
+            }),
+            onSearch: value => setSearchText(value),
+            className: configStyle['columns-control-content-input'],
+            size: "small",
+            allowClear: true
+          })
+        })]
+      }),
+      children: /*#__PURE__*/jsx(List, {
+        dataSource: hiddenColumns.filter(item => {
+          const title = item.titleText || item.title;
+          return typeof title === 'string' && title.indexOf(searchText) > -1;
+        }),
+        renderItem: item => /*#__PURE__*/jsx(List.Item, {
+          className: configStyle['columns-control-content-item'],
+          children: /*#__PURE__*/jsx(Checkbox, {
+            checked: false,
+            onChange: e => {
+              e.stopPropagation();
+              e.preventDefault();
+              const newConfig = Object.assign({}, config);
+              newConfig[item.name] = Object.assign({}, newConfig[item.name], {
+                visible: true
+              });
+              onChange(newConfig);
+            },
+            children: item.titleText || item.title || formatMessage({
+              id: 'UnnamedColumn'
+            })
+          })
+        }, item.name)
+      })
+    }];
+  }, [config, formatMessage, hiddenColumns, leftFixedColumns, onChange, rightFixedColumns, scrollEl, searchText, sortableVisibleColumns, visibleColumns.length]);
+  return /*#__PURE__*/jsxs("div", {
+    className: configStyle['columns-control-content'],
+    children: [/*#__PURE__*/jsx("div", {
+      className: configStyle['columns-control-content-title'],
+      children: /*#__PURE__*/jsxs(Row, {
+        align: "middle",
+        justify: "space-between",
+        children: [/*#__PURE__*/jsx(Col, {
+          children: formatMessage({
+            id: 'EditTable'
+          })
+        }), /*#__PURE__*/jsx(Col, {
+          children: /*#__PURE__*/jsx(Tooltip, {
+            title: formatMessage({
+              id: 'RestoreDefault'
+            }),
+            children: /*#__PURE__*/jsx(Button, {
+              type: "text",
+              icon: /*#__PURE__*/jsx(RedoOutlined, {}),
+              onClick: async () => {
+                onConfirm && (await onConfirm({}));
+                close();
+              }
+            })
+          })
+        })]
+      })
+    }), /*#__PURE__*/jsx("div", {
+      className: configStyle['columns-control-content-scroller'],
+      ref: setScrollEl,
+      children: /*#__PURE__*/jsx(Collapse, {
+        defaultActiveKey: ['active', 'un-active'],
+        ghost: true,
+        bordered: true,
+        items: collapseItems
+      })
+    }), /*#__PURE__*/jsxs(Row, {
+      className: configStyle['columns-control-content-footer'],
+      justify: "end",
+      gutter: 10,
+      children: [/*#__PURE__*/jsx(Col, {
+        children: /*#__PURE__*/jsx(Button, {
+          size: "small",
+          onClick: () => {
+            onChange(defaultValue || {});
+            close();
+          },
+          children: formatMessage({
+            id: 'Cancel'
+          })
+        })
+      }), /*#__PURE__*/jsx(Col, {
+        children: /*#__PURE__*/jsx(Button, {
+          type: "primary",
+          size: "small",
+          loading: confirmLoading,
+          onClick: async () => {
+            setConfirmLoading(true);
+            try {
+              onConfirm && (await onConfirm(config));
+              close();
+            } finally {
+              setConfirmLoading(false);
+            }
+          },
+          children: formatMessage({
+            id: 'Confirm'
+          })
+        })
+      })]
+    })]
+  });
+});
+
+const storageKey = 'TABLE_PAGE_TABLE_CONFIG';
+const readStorage = () => {
+  try {
+    return JSON.parse(localStorage.getItem(storageKey) || '{}');
+  } catch (_unused) {
+    return {};
+  }
+};
+const writeStorage = data => {
+  try {
+    localStorage.setItem(storageKey, JSON.stringify(data));
+  } catch (_unused2) {
+    // ignore quota errors
+  }
+};
+const getData = name => {
+  if (!name) {
+    return {};
+  }
+  return get(readStorage(), name, {});
+};
+const setData = (name, data) => {
+  if (!name) {
+    return;
+  }
+  writeStorage(Object.assign({}, readStorage(), {
+    [name]: data
+  }));
+};
+const tableLocalApis = {
+  getData,
+  setData
+};
+
+const TABLE_CONFIG_COLUMN_EXTRA_WIDTH = 48;
+
+const DEFAULT_WIDTH = 160;
+const DEFAULT_MIN = 80;
+const DEFAULT_MAX = 600;
+const getColumnSize = column => {
+  var _column$min, _column$max;
+  const width = parseColumnWidth(column.width) || DEFAULT_WIDTH;
+  return {
+    width,
+    min: (_column$min = column.min) != null ? _column$min : DEFAULT_MIN,
+    max: (_column$max = column.max) != null ? _column$max : DEFAULT_MAX
+  };
+};
+const getConfigColumnExtraWidth = (index, columnCount, controllerOpen) => {
+  if (!controllerOpen || index !== columnCount - 1) {
+    return 0;
+  }
+  return TABLE_CONFIG_COLUMN_EXTRA_WIDTH;
+};
+const withConfigColumnExtra = (contentWidth, index, columnCount, controllerOpen) => {
+  return contentWidth + getConfigColumnExtraWidth(index, columnCount, controllerOpen);
+};
+const TableConfigButton = ({
+  title,
+  columns,
+  config,
+  setConfig
+}) => {
+  const [open, setOpen] = useState(false);
+  return /*#__PURE__*/jsxs(Row, {
+    wrap: false,
+    align: "middle",
+    className: configStyle['table-config-header'],
+    children: [/*#__PURE__*/jsx(Col, {
+      flex: 1,
+      className: configStyle['table-config-header-title'],
+      children: title
+    }), /*#__PURE__*/jsx(Col, {
+      flex: "none",
+      children: /*#__PURE__*/jsx(Popover, {
+        open: open,
+        onOpenChange: setOpen,
+        trigger: "click",
+        placement: "bottomLeft",
+        rootClassName: configStyle['columns-control-overlay'],
+        styles: {
+          container: {
+            padding: 0
+          }
+        },
+        content: /*#__PURE__*/jsx(ColumnsControlContent, {
+          columns: columns,
+          config: config,
+          close: () => setOpen(false),
+          onConfirm: newConfig => {
+            setConfig(configValue => {
+              return transform(newConfig, (result, value, key) => {
+                result[key] = Object.assign({}, configValue[key], pick(value, ['visible', 'rank']));
+              }, {});
+            });
+          }
+        }),
+        children: /*#__PURE__*/jsx("span", {
+          className: classnames(configStyle['table-changer-setting'], open && configStyle['is-active']),
+          children: /*#__PURE__*/jsx(SettingOutlined, {})
+        })
+      })
+    })]
+  });
+};
+const useTableConfig = ({
+  columns,
+  name,
+  controllerOpen: _controllerOpen = true,
+  tableWidth: _tableWidth = 0,
+  rowKey,
+  tableServerApis: _tableServerApis = tableLocalApis
+}) => {
+  const [currentMoveColumnIndex, setCurrentMoveColumnIndex] = useState(null);
+  const currentMoveColumnIndexRef = useRef(currentMoveColumnIndex);
+  currentMoveColumnIndexRef.current = currentMoveColumnIndex;
+  const currentMoveColumnRef = useRef(null);
+  const startPointRef = useRef(null);
+  const [config, setConfigBase] = useState({});
+  const saveConfig = useDebouncedCallback((tableName, target) => {
+    _tableServerApis == null || _tableServerApis.setData(tableName, target);
+  }, 500);
+  const setConfig = useCallback(newConfig => {
+    setConfigBase(prevConfig => {
+      const target = typeof newConfig === 'function' ? newConfig(prevConfig) : newConfig;
+      if (name && _controllerOpen) {
+        saveConfig(name, target);
+      }
+      return target;
+    });
+  }, [name, _controllerOpen, saveConfig]);
+  useEffect(() => {
+    if (name && _controllerOpen) {
+      setConfigBase(Object.assign({}, _tableServerApis.getData(name)));
+    }
+  }, [name, _controllerOpen, _tableServerApis]);
+  const visibleColumns = useMemo(() => {
+    return columns.filter(col => !(get(config, `${col.name}.visible`) === false || get(config, `${col.name}.visible`) !== true && col.hidden === true)).sort((a, b) => {
+      const computedIndex = item => get(config, `${item.name}.rank`, 0) + (item.fixed === 'left' || item.fixed === true ? -10000 : 0) + (item.fixed === 'right' ? 10000 : 0);
+      return computedIndex(a) - computedIndex(b);
+    });
+  }, [columns, config]);
+  const columnCount = visibleColumns.length;
+  const hasFixedColumn = useMemo(() => visibleColumns.some(col => col.fixed === 'right' || col.fixed === 'left' || col.fixed === true), [visibleColumns]);
+  const lastNotFixedColumnIndex = useMemo(() => {
+    return findLastIndex(visibleColumns, col => col.fixed !== 'right' && !isOptionsColumn(col));
+  }, [visibleColumns]);
+  const totalWidth = useMemo(() => {
+    return visibleColumns.reduce((sum, col, index) => {
+      const {
+        width
+      } = getColumnSize(col);
+      const contentWidth = get(config, `${col.name}.width`) || width;
+      return sum + withConfigColumnExtra(contentWidth, index, columnCount, _controllerOpen);
+    }, 0);
+  }, [visibleColumns, config, columnCount, _controllerOpen]);
+  const computedRealWidth = useCallback(({
+    width,
+    index
+  }) => {
+    const contentWidth = width;
+    if (currentMoveColumnIndex !== null && currentMoveColumnIndex === index) {
+      return withConfigColumnExtra(contentWidth, index, columnCount, _controllerOpen);
+    }
+    if (hasFixedColumn || lastNotFixedColumnIndex !== index) {
+      return withConfigColumnExtra(contentWidth, index, columnCount, _controllerOpen);
+    }
+    return withConfigColumnExtra(contentWidth, index, columnCount, _controllerOpen) + Math.max(_tableWidth - totalWidth - 2, 0);
+  }, [hasFixedColumn, lastNotFixedColumnIndex, _tableWidth, totalWidth, currentMoveColumnIndex, columnCount, _controllerOpen]);
+  const getConfigWidth = useCallback(column => {
+    const {
+      width,
+      min,
+      max
+    } = getColumnSize(column);
+    const currentWidth = Math.min(Math.max(get(config, `${column.name}.width`) || width, min), max);
+    return {
+      currentWidth,
+      min,
+      max
+    };
+  }, [config]);
+  const resizeBarRender = useCallback((column, index) => {
+    return /*#__PURE__*/jsx("span", {
+      className: classnames(configStyle['cell-resize-bar'], 'table-cell-resize-bar'),
+      onMouseDown: e => {
+        e.stopPropagation();
+        const {
+          currentWidth,
+          min,
+          max
+        } = getConfigWidth(column);
+        currentMoveColumnRef.current = Object.assign({}, column, {
+          index,
+          width: currentWidth,
+          min,
+          max
+        });
+        startPointRef.current = e.clientX;
+        setCurrentMoveColumnIndex(index);
+      },
+      children: /*#__PURE__*/jsx(HolderOutlined, {})
+    });
+  }, [getConfigWidth]);
+  const resize = useRefCallback(delta => {
+    if (currentMoveColumnIndexRef.current === null || !currentMoveColumnRef.current) {
+      return;
+    }
+    const {
+      name: colName,
+      width,
+      min,
+      max
+    } = currentMoveColumnRef.current;
+    const currentWidth = Math.min(Math.max(width + delta, min), max);
+    if (currentWidth < min) {
+      return;
+    }
+    setConfig(prevConfig => Object.assign({}, prevConfig, {
+      [colName]: Object.assign({}, prevConfig[colName], {
+        width: currentWidth
+      })
+    }));
+  });
+  const renderColumnTitle = useCallback((title, column, index, {
+    withResize: _withResize = true,
+    withConfig: _withConfig = false
+  } = {}) => {
+    const titleNode = _withConfig ? /*#__PURE__*/jsx(TableConfigButton, {
+      title: title,
+      columns: columns,
+      config: config,
+      setConfig: setConfig
+    }) : title;
+    const content = /*#__PURE__*/jsxs(Fragment, {
+      children: [titleNode, _withResize && _controllerOpen && resizeBarRender(column, index)]
+    });
+    if (!_withResize || !_controllerOpen) {
+      return content;
+    }
+    return /*#__PURE__*/jsx("span", {
+      className: configStyle['header-cell-inner'],
+      children: content
+    });
+  }, [columns, config, _controllerOpen, resizeBarRender, setConfig]);
+  const getHeaderCellClassName = useCallback(index => classnames(configStyle['header-col'], {
+    'is-moving': currentMoveColumnIndexRef.current === index
+  }), []);
+  const computedColumnProps = useCallback((column, index, {
+    title
+  }) => {
+    const {
+      currentWidth
+    } = getConfigWidth(column);
+    const realWidth = computedRealWidth({
+      width: currentWidth,
+      index
+    });
+    const isLastColumn = index === columnCount - 1;
+    const movingClass = () => ({
+      className: classnames({
+        'is-moving': currentMoveColumnIndex === index,
+        'has-config-btn': isLastColumn && _controllerOpen
+      })
+    });
+    return {
+      onHeaderCell: movingClass,
+      onCell: movingClass,
+      width: realWidth,
+      shouldCellUpdate: (record, prevRecord) => {
+        const itemKey = typeof rowKey === 'function' ? rowKey(record) : record[rowKey];
+        const prevItemKey = typeof rowKey === 'function' ? rowKey(prevRecord) : prevRecord[rowKey];
+        return currentMoveColumnIndexRef.current === null || currentMoveColumnIndexRef.current === index || !(itemKey === prevItemKey && isEqual(record[column.name], prevRecord[column.name]));
+      },
+      title: renderColumnTitle(title, column, index, {
+        withResize: true,
+        withConfig: isLastColumn && _controllerOpen
+      })
+    };
+  }, [columnCount, _controllerOpen, computedRealWidth, getConfigWidth, renderColumnTitle, rowKey, currentMoveColumnIndex]);
+  useEffect(() => {
+    const handlerCancelResize = () => {
+      setCurrentMoveColumnIndex(null);
+      startPointRef.current = null;
+      currentMoveColumnRef.current = null;
+    };
+    const handlerResize = e => {
+      if (currentMoveColumnIndexRef.current === null || currentMoveColumnRef.current === null || startPointRef.current === null) {
+        return;
+      }
+      resize(e.clientX - startPointRef.current);
+    };
+    document.documentElement.addEventListener('mouseup', handlerCancelResize, true);
+    document.documentElement.addEventListener('mousemove', handlerResize, true);
+    return () => {
+      document.documentElement.removeEventListener('mouseup', handlerCancelResize, true);
+      document.documentElement.removeEventListener('mousemove', handlerResize, true);
+    };
+  }, [resize]);
+  return {
+    visibleColumns,
+    columnsConfig: config,
+    setConfig,
+    currentMoveColumnIndex,
+    totalWidth,
+    hasFixedColumn,
+    computedColumnProps,
+    renderColumnTitle,
+    getHeaderCellClassName,
+    getConfigWidth,
+    computedRealWidth,
+    resizeBarRender
+  };
+};
+
+const useGroupHeader = columns => {
+  return useMemo(() => {
+    const groupHeaderColumns = columns.filter(item => item.groupHeader && item.groupHeader.length > 0);
+    if (groupHeaderColumns.length > 0) {
+      const newColumns = columns.slice(0);
+      const group = [];
+      const appendGroupHeader = column => {
+        const {
+          groupHeader
+        } = column;
+        if (!(groupHeader && groupHeader.length > 0)) {
+          return;
+        }
+        const columnIndex = newColumns.indexOf(column);
+        const core = (groupHeader, groupList) => {
+          const [targetHeader, ...otherHeader] = groupHeader;
+          let currentGroup = groupList.find(item => item.name === targetHeader.name);
+          if (!currentGroup) {
+            currentGroup = Object.assign({
+              startIndex: columnIndex
+            }, targetHeader, {
+              children: []
+            });
+            groupList.push(currentGroup);
+          }
+          if (otherHeader.length > 0) {
+            core(otherHeader, currentGroup.children);
+          } else {
+            currentGroup.children.push(column);
+          }
+        };
+        core(groupHeader, group);
+        newColumns.splice(columnIndex, 1);
+      };
+      groupHeaderColumns.forEach(appendGroupHeader);
+      group.forEach((groupColumn, index) => {
+        newColumns.splice(groupColumn.startIndex + index, 0, groupColumn);
+      });
+      return {
+        columns: newColumns,
+        hasGroupHeader: true
+      };
+    }
+    return {
+      columns,
+      hasGroupHeader: false
+    };
+  }, [columns]);
+};
+
+const useElementWidth = ref => {
+  const [width, setWidth] = useState(0);
+  useEffect(() => {
+    const el = ref.current;
+    if (!el) {
+      return;
+    }
+    const update = () => setWidth(el.clientWidth);
+    const resizeObserver = new ResizeObserver(update);
+    resizeObserver.observe(el);
+    update();
+    return () => resizeObserver.disconnect();
+  }, [ref]);
+  return width;
+};
+
+const renderCellContent = (content, column, contentClassName) => {
+  const wrapEllipsis = column.ellipsis && !column.ellipsisHandledByRender;
+  const needsWidthConstraint = Boolean(column.ellipsis || column.cellFullWidth);
+  const inner = wrapEllipsis ? /*#__PURE__*/jsx(Ellipsis, {
+    ellipsis: column.ellipsis,
+    children: content
+  }) : content;
+  return /*#__PURE__*/jsx("span", {
+    className: contentClassName,
+    children: needsWidthConstraint ? /*#__PURE__*/jsx("span", {
+      className: classnames(ellipsisStyle['cell-content'], column.cellFullWidth && ellipsisStyle['cell-full-width']),
+      children: inner
+    }) : inner
+  });
+};
+const getColumnEllipsis = column => {
+  if (!column.ellipsis) {
+    return undefined;
+  }
+  return typeof column.ellipsis === 'object' ? column.ellipsis : true;
+};
+
+const _excluded$3 = ["className", "dataSource", "columns", "rowKey", "rowSelection", "valueIsEmpty", "emptyIsPlaceholder", "placeholder", "empty", "onRowSelect", "render", "context", "sticky", "headerStyle", "pagination", "sortRender", "name", "controllerOpen", "tableServerApis", "scroll", "summary"];
+const mapJustifyToAlign = justify => {
+  if (justify === 'center') {
+    return 'center';
+  }
+  if (justify === 'flex-end') {
+    return 'right';
+  }
+  return 'left';
+};
+const resolveRowKey = (rowKey, record) => get(record, typeof rowKey === 'function' ? rowKey(record) : rowKey);
+const toAntdWidth = width => {
+  if (width == null) {
+    return undefined;
+  }
+  if (typeof width === 'number') {
+    return width;
+  }
+  const parsed = parseColumnWidth(width);
+  return parsed || width;
+};
+const toAntdFixed = fixed => {
+  if (fixed === 'right') {
+    return 'right';
+  }
+  if (fixed === true || fixed === 'left') {
+    return 'left';
+  }
+  return undefined;
+};
+const getColCellStyle = column => ({
+  textAlign: mapJustifyToAlign(column.justify),
+  verticalAlign: column.align === 'middle' ? 'middle' : column.align === 'bottom' ? 'bottom' : 'top'
+});
+const getAntCellClassName = (...extra) => classnames(style$3['table-cell'], 'info-page-table-col', ...extra);
+const wrapColContent = node => /*#__PURE__*/jsx("span", {
+  className: style$4['col-content'],
+  children: node
+});
+const Table = p => {
+  const tableRef = useRef(null);
+  const tableWidth = useElementWidth(tableRef);
+  const [isLayout, setIsLayout] = useState(true);
+  const props = Object.assign({}, {
+    rowKey: 'id',
+    valueIsEmpty: isEmpty,
+    placeholder: '-',
+    emptyIsPlaceholder: true,
+    empty: /*#__PURE__*/jsx(Empty, {}),
+    controllerOpen: true
+  }, p);
+  const {
+      className,
+      dataSource,
+      columns: columnsProp,
+      rowKey,
+      rowSelection,
+      valueIsEmpty,
+      emptyIsPlaceholder,
+      placeholder,
+      empty,
+      onRowSelect,
+      render,
+      context,
+      sticky,
+      headerStyle,
+      pagination = false,
+      sortRender,
+      name,
+      controllerOpen,
+      tableServerApis,
+      scroll,
+      summary
+    } = props,
+    others = _objectWithoutPropertiesLoose(props, _excluded$3);
+  const columns = useMemo(() => resolveColumns(columnsProp), [columnsProp]);
+  useEffect(() => {
+    if (tableWidth) {
+      setTimeout(() => setIsLayout(false), 0);
+    }
+  }, [tableWidth]);
+  const {
+    visibleColumns,
+    columnsConfig,
+    currentMoveColumnIndex,
+    totalWidth,
+    computedColumnProps,
+    hasFixedColumn
+  } = useTableConfig({
+    columns,
+    name,
+    controllerOpen,
+    tableWidth,
+    rowKey,
+    tableServerApis
+  });
+  const [resizeGuideStyle, setResizeGuideStyle] = useState(null);
+  const updateResizeGuide = useCallback(() => {
+    var _barRect$right;
+    if (currentMoveColumnIndex === null || !tableRef.current) {
+      setResizeGuideStyle(null);
+      return;
+    }
+    const root = tableRef.current;
+    const headerCell = root.querySelector('.ant-table-thead .ant-table-cell.is-moving');
+    const tableContainer = root.querySelector('.ant-table-container');
+    if (!headerCell || !tableContainer) {
+      setResizeGuideStyle(null);
+      return;
+    }
+    const headerRect = headerCell.getBoundingClientRect();
+    const resizeBar = headerCell.querySelector('.table-cell-resize-bar');
+    const barRect = resizeBar == null ? void 0 : resizeBar.getBoundingClientRect();
+    const containerRect = tableContainer.getBoundingClientRect();
+    setResizeGuideStyle({
+      position: 'fixed',
+      left: Math.round((_barRect$right = barRect == null ? void 0 : barRect.right) != null ? _barRect$right : headerRect.right),
+      top: Math.round(containerRect.top),
+      height: Math.round(containerRect.height),
+      zIndex: 100
+    });
+  }, [currentMoveColumnIndex]);
+  useLayoutEffect(() => {
+    updateResizeGuide();
+  }, [updateResizeGuide, columnsConfig, tableWidth, dataSource, isLayout]);
+  useEffect(() => {
+    if (currentMoveColumnIndex === null) {
+      return;
+    }
+    const handleUpdate = () => updateResizeGuide();
+    window.addEventListener('mousemove', handleUpdate);
+    window.addEventListener('scroll', handleUpdate, true);
+    const resizeObserver = new ResizeObserver(handleUpdate);
+    if (tableRef.current) {
+      resizeObserver.observe(tableRef.current);
+    }
+    return () => {
+      window.removeEventListener('mousemove', handleUpdate);
+      window.removeEventListener('scroll', handleUpdate, true);
+      resizeObserver.disconnect();
+    };
+  }, [currentMoveColumnIndex, updateResizeGuide]);
+  const targetColumns = useMemo(() => visibleColumns.map((column, index) => Object.assign({}, column, {
+    __index: index
+  })), [visibleColumns]);
+  const {
+    columns: groupedColumns,
+    hasGroupHeader
+  } = useGroupHeader(targetColumns);
+  const antdColumns = useMemo(() => {
+    const buildLeafColumn = (column, index) => {
+      const {
+        name: colName,
+        title,
+        width,
+        align,
+        justify,
+        fixed
+      } = column;
+      const baseColumn = {
+        key: colName,
+        dataIndex: colName,
+        title: /*#__PURE__*/jsx("span", {
+          className: style$4['col-content'],
+          children: renderColumnTitle(title, column, sortRender)
+        }),
+        width: toAntdWidth(width),
+        fixed: toAntdFixed(fixed),
+        align: mapJustifyToAlign(justify),
+        ellipsis: getColumnEllipsis(column),
+        onHeaderCell: () => ({
+          className: getAntCellClassName(),
+          style: getColCellStyle(column)
+        }),
+        onCell: () => ({
+          className: getAntCellClassName(),
+          style: getColCellStyle(column)
+        }),
+        render: (_, record) => {
+          const [computedColumn] = computeColumnsValue({
+            columns: [column],
+            emptyIsPlaceholder,
+            valueIsEmpty,
+            removeEmpty: false,
+            dataSource: record,
+            placeholder,
+            context
+          });
+          if (!computedColumn) {
+            return null;
+          }
+          return renderCellContent(computeDisplay({
+            column: computedColumn,
+            placeholder,
+            dataSource: record,
+            context
+          }), computedColumn, style$4['col-content']);
+        }
+      };
+      if (!controllerOpen) {
+        return baseColumn;
+      }
+      const configProps = computedColumnProps(column, index, {
+        title: /*#__PURE__*/jsx("span", {
+          className: style$4['col-content'],
+          children: renderColumnTitle(title, column, sortRender)
+        })
+      });
+      const antdFixed = toAntdFixed(fixed);
+      return Object.assign({}, baseColumn, configProps, {
+        width: configProps.width,
+        fixed: antdFixed,
+        onHeaderCell: () => ({
+          className: getAntCellClassName(configProps.onHeaderCell == null ? void 0 : configProps.onHeaderCell().className),
+          style: getColCellStyle(column)
+        }),
+        onCell: () => ({
+          className: getAntCellClassName(configProps.onCell == null ? void 0 : configProps.onCell().className),
+          style: getColCellStyle(column)
+        })
+      });
+    };
+    const mapColumn = column => {
+      if (column.children && column.children.length > 0) {
+        return {
+          key: column.name,
+          title: /*#__PURE__*/jsx("span", {
+            className: style$4['col-content'],
+            children: column.title
+          }),
+          onHeaderCell: () => ({
+            className: getAntCellClassName(),
+            style: {
+              textAlign: 'center',
+              verticalAlign: 'middle'
+            }
+          }),
+          children: column.children.map(mapColumn)
+        };
+      }
+      return buildLeafColumn(column, column.__index);
+    };
+    return groupedColumns.map(mapColumn);
+  }, [groupedColumns, context, emptyIsPlaceholder, placeholder, sortRender, valueIsEmpty, controllerOpen, computedColumnProps, currentMoveColumnIndex]);
+  const antdRowSelection = useMemo(() => {
+    if (!rowSelection) {
+      return undefined;
+    }
+    const getRowKey = record => resolveRowKey(rowKey, record);
+    return _extends({
+      type: rowSelection.type === 'radio' ? 'radio' : 'checkbox'
+    }, hasFixedColumn ? {
+      fixed: 'left'
+    } : {}, {
+      selectedRowKeys: rowSelection.isSelectedAll ? (dataSource || []).filter(item => !item.disabled).map(getRowKey) : rowSelection.selectedRowKeys,
+      onChange: (selectedRowKeys, selectedRows, info) => {
+        if (info.type === 'all') {
+          const _checked = selectedRowKeys.length > 0;
+          if (typeof rowSelection.onIsSelectAllChange === 'function') {
+            rowSelection.onIsSelectAllChange(_checked);
+            return;
+          }
+          if (!_checked) {
+            rowSelection.onChange([], undefined, {
+              context,
+              checked: false
+            });
+            return;
+          }
+          rowSelection.onChange((dataSource || []).map(getRowKey), undefined, {
+            context,
+            checked: true
+          });
+          return;
+        }
+        const currentKey = selectedRows.length > 0 ? getRowKey(selectedRows[selectedRows.length - 1]) : selectedRowKeys[selectedRowKeys.length - 1];
+        const checked = selectedRowKeys.indexOf(currentKey) > -1;
+        rowSelection.onChange(selectedRowKeys, currentKey, {
+          context,
+          checked
+        });
+      },
+      getCheckboxProps: record => ({
+        disabled: record.disabled || rowSelection.isSelectedAll
+      })
+    }, rowSelection.type === 'checkbox' ? {
+      columnTitle: rowSelection.allowSelectedAll ? checkboxNode => wrapColContent(checkboxNode) : wrapColContent(/*#__PURE__*/jsx(Checkbox, {
+        style: {
+          visibility: 'hidden'
+        }
+      })),
+      renderCell: (checked, record, index, originNode) => wrapColContent(originNode),
+      onCell: () => ({
+        className: getAntCellClassName(style$3['selection-col'])
+      })
+    } : {
+      columnWidth: 30,
+      renderCell: (checked, record, index, originNode) => wrapColContent(originNode),
+      onCell: () => ({
+        className: getAntCellClassName(style$3['radio-col'])
+      })
+    });
+  }, [context, dataSource, rowKey, rowSelection, hasFixedColumn]);
+  const tableScroll = useMemo(() => {
+    let x;
+    if (hasFixedColumn) {
+      x = totalWidth;
+    } else if (controllerOpen) {
+      x = Math.max(tableWidth, totalWidth);
+    }
+    return Object.assign({}, x != null ? {
+      x
+    } : {}, scroll);
+  }, [hasFixedColumn, controllerOpen, totalWidth, tableWidth, scroll]);
+  const tableElement = /*#__PURE__*/jsx(Table$1, _extends({}, others, {
+    showHeader: true,
+    dataSource: dataSource,
+    columns: antdColumns,
+    rowKey: typeof rowKey === 'function' ? rowKey : record => get(record, rowKey),
+    rowSelection: antdRowSelection,
+    pagination: pagination,
+    summary: typeof summary === 'function' ? (pageData, ...args) => summary(pageData, ...args) : undefined,
+    sticky: sticky ? {
+      offsetHeader: 0
+    } : undefined,
+    tableLayout: controllerOpen || hasFixedColumn ? 'fixed' : undefined,
+    scroll: tableScroll,
+    onHeaderRow: () => ({
+      className: classnames(style$4['header'], 'info-page-table-header', {
+        [style$4['sticky']]: sticky && !hasFixedColumn
+      }),
+      style: headerStyle
+    }),
+    locale: {
+      emptyText: /*#__PURE__*/jsx("div", {
+        className: style$4['empty'],
+        children: empty
+      })
+    },
+    rowClassName: record => {
+      const id = resolveRowKey(rowKey, record);
+      const isChecked = (rowSelection == null ? void 0 : rowSelection.selectedRowKeys) && rowSelection.selectedRowKeys.indexOf(id) > -1;
+      return classnames(style$4['body'], 'info-page-table-row', {
+        [style$4['is-selected-all']]: rowSelection == null ? void 0 : rowSelection.isSelectedAll,
+        [style$4['is-selected']]: isChecked,
+        [style$4['is-disabled']]: record.disabled
+      });
+    },
+    onRow: record => ({
+      onClick: () => {
+        if (record.disabled) {
+          return;
+        }
+        onRowSelect && onRowSelect(record, {
+          columns: visibleColumns,
+          dataSource
+        });
+      }
+    })
+  }));
+  const wrappedTable = /*#__PURE__*/jsxs("div", {
+    ref: tableRef,
+    className: classnames(style$4['table'], style$3['table'], 'info-page-table', className, {
+      [style$3['is-resize']]: currentMoveColumnIndex !== null,
+      [style$3['is-computed']]: isLayout,
+      [style$3['has-group-header']]: hasGroupHeader,
+      [style$3['has-summary']]: typeof summary === 'function'
+    }),
+    children: [/*#__PURE__*/jsx("div", {
+      className: "info-page-table-body",
+      children: !isLayout && tableElement
+    }), currentMoveColumnIndex !== null && resizeGuideStyle && /*#__PURE__*/jsx("span", {
+      className: style$3['column-resize-guide'],
+      style: resizeGuideStyle,
+      "aria-hidden": true
+    })]
+  });
+  if (typeof render === 'function') {
+    return render(_extends({}, others, {
+      header: null,
+      renderBody: () => wrappedTable
+    }));
+  }
+  return wrappedTable;
+};
+Table.useSelectedRow = useSelectedRow;
+Table.useSort = useSort;
+Table.sortDataSource = useSort.sortDataSource;
+
+const Label = ({
+  className,
+  children,
+  onChange
+}) => {
+  const ref = useRef(null);
+  const handlerChange = useRefCallback(onChange);
+  useLayoutEffect(() => {
+    const computed = () => {
+      if (!ref.current) {
+        return;
+      }
+      handlerChange(ref.current.getBoundingClientRect());
+    };
+    const resizeObserver = new ResizeObserver(computed);
+    resizeObserver.observe(ref.current);
+    computed();
+    return () => {
+      resizeObserver.disconnect();
+    };
+  }, [handlerChange]);
+  return /*#__PURE__*/jsx("span", {
+    ref: ref,
+    className: className,
+    children: children
+  });
+};
+
+const renderHeaderCellContent = (column, {
+  sortRender,
+  widthBased,
+  setColsSize,
+  defaultSpan,
+  colsSize
+}) => {
+  const titleNode = renderColumnTitle(column.title, column, sortRender);
+  const contentClassName = style$4['col-content'];
+  if (widthBased) {
+    return /*#__PURE__*/jsx("span", {
+      className: contentClassName,
+      children: titleNode
+    });
+  }
+  return /*#__PURE__*/jsx(Label, {
+    className: contentClassName,
+    onChange: size => {
+      setColsSize(value => Object.assign({}, value, {
+        [column.name]: Math.max(size.width, parseColumnWidth(resolveColumnDimensions(column).width))
+      }));
+    },
+    children: titleNode
+  });
+};
+const renderHeaderGridCells = ({
+  dataSource,
+  columns,
+  rowKey,
+  rowSelection,
+  colsSize,
+  setColsSize,
+  sortRender,
+  defaultSpan
+}) => {
+  const cells = [];
+  if ((rowSelection == null ? void 0 : rowSelection.type) === 'checkbox') {
+    cells.push(/*#__PURE__*/jsx("div", {
+      className: classnames(style$4['col'], style$4['col-fixed'], style$4['header-cell'], 'info-page-table-col'),
+      children: /*#__PURE__*/jsx("span", {
+        className: classnames(style$4['col-content'], 'info-page-table-col-content'),
+        children: rowSelection.allowSelectedAll ? (() => {
+          const checkedAll = rowSelection.isSelectedAll || dataSource && dataSource.every(item => rowSelection.selectedRowKeys && rowSelection.selectedRowKeys.indexOf(get(item, typeof rowKey === 'function' ? rowKey(item) : rowKey)) > -1);
+          return /*#__PURE__*/jsx(Checkbox, {
+            checked: checkedAll,
+            indeterminate: rowSelection.selectedRowKeys && rowSelection.selectedRowKeys.length > 0 && !checkedAll,
+            onChange: e => {
+              const checked = e.target.checked;
+              if (!checked) {
+                typeof rowSelection.onIsSelectAllChange === 'function' ? rowSelection.onIsSelectAllChange(false) : rowSelection.onChange([]);
+              } else {
+                typeof rowSelection.onIsSelectAllChange === 'function' ? rowSelection.onIsSelectAllChange(true) : dataSource && dataSource.length > 0 && rowSelection.onChange(dataSource.map(item => {
+                  return get(item, typeof rowKey === 'function' ? rowKey(item) : rowKey);
+                }));
+              }
+            }
+          });
+        })() : /*#__PURE__*/jsx(Checkbox, {
+          style: {
+            visibility: 'hidden'
+          }
+        })
+      })
+    }, "__selection__"));
+  }
+  columns.forEach((column, index) => {
+    const {
+      widthBased,
+      fillRemaining,
+      style: columnStyle
+    } = getColumnLayout(column, {
+      defaultSpan,
+      colsSize,
+      isLastColumn: index === columns.length - 1,
+      columns
+    });
+    cells.push(/*#__PURE__*/jsx("div", {
+      style: columnStyle,
+      className: classnames(style$4['col'], fillRemaining ? style$4['col-width-fill'] : widthBased && style$4['col-width-based'], style$4['header-cell'], 'info-page-table-col'),
+      children: renderHeaderCellContent(column, {
+        sortRender,
+        widthBased,
+        setColsSize,
+        defaultSpan,
+        colsSize
+      })
+    }, column.name));
+  });
+  if ((rowSelection == null ? void 0 : rowSelection.type) === 'radio') {
+    cells.push(/*#__PURE__*/jsx("div", {
+      className: classnames(style$4['col'], style$4['single-checked'], style$4['header-cell'], 'info-page-table-col')
+    }, "__radio__"));
+  }
+  return cells;
+};
+const Header = p => {
+  const {
+    dataSource,
+    columns,
+    rowKey,
+    rowSelection,
+    colsSize,
+    setColsSize,
+    headerStyle,
+    sortRender,
+    defaultSpan
+  } = Object.assign({}, {
+    rowKey: 'id'
+  }, p);
+  return /*#__PURE__*/jsx("div", {
+    style: headerStyle,
+    className: classnames(style$4['header'], 'info-page-table-header'),
+    children: renderHeaderGridCells({
+      dataSource,
+      columns,
+      rowKey,
+      rowSelection,
+      colsSize,
+      setColsSize,
+      sortRender,
+      defaultSpan
+    })
+  });
+};
+
+const _excluded$2 = ["className", "dataSource", "columns", "rowKey", "rowSelection", "valueIsEmpty", "emptyIsPlaceholder", "placeholder", "empty", "onRowSelect", "render", "context", "sticky", "headerStyle", "sortRender"];
+const getLayoutColumns = columns => columns.filter(column => column.display !== false);
+const TableView = p => {
+  const [colsSize, setColsSize] = useState({});
+  const props = Object.assign({}, {
+    rowKey: 'id',
+    valueIsEmpty: isEmpty,
+    placeholder: '-',
+    emptyIsPlaceholder: true,
+    empty: /*#__PURE__*/jsx(Empty, {})
+  }, p);
+  const {
+      className,
+      dataSource,
+      columns: columnsProp,
+      rowKey,
+      rowSelection,
+      valueIsEmpty,
+      emptyIsPlaceholder,
+      placeholder,
+      empty,
+      onRowSelect,
+      render,
+      context,
+      headerStyle,
+      sortRender
+    } = props,
+    others = _objectWithoutPropertiesLoose(props, _excluded$2);
+  const columns = useMemo(() => resolveColumns(columnsProp), [columnsProp]);
+  const layoutColumns = useMemo(() => getLayoutColumns(columns), [columns]);
+  const defaultSpan = useMemo(() => {
+    const assignedSpan = layoutColumns.reduce((a, b) => a + (b.span || 0), 0);
+    const undistributedColCount = layoutColumns.filter(item => !hasColumnSpan(item) && !hasColumnWidth(item, layoutColumns)).length;
+    return undistributedColCount > 0 ? Math.round(Math.max(24 - assignedSpan, 0) / undistributedColCount) : 1;
+  }, [layoutColumns]);
+  const gridTemplateColumns = useMemo(() => getGridTemplateColumns(layoutColumns, {
+    defaultSpan,
+    colsSize,
+    rowSelection
+  }), [layoutColumns, defaultSpan, colsSize, rowSelection]);
+  const headerCellProps = {
+    dataSource,
+    columns: layoutColumns,
+    rowKey,
+    rowSelection,
+    colsSize,
+    setColsSize,
+    sortRender,
+    defaultSpan
+  };
+  const header = /*#__PURE__*/jsx(Header, _extends({}, headerCellProps, {
+    headerStyle: headerStyle
+  }));
+  const handleRowClick = (item, {
+    dataSource,
+    context,
+    id,
+    isChecked
+  }) => {
+    if (item.disabled) {
+      return;
+    }
+    onRowSelect && onRowSelect(item, {
+      columns: layoutColumns,
+      dataSource
+    });
+    if (!rowSelection || rowSelection.isSelectedAll) {
+      return;
+    }
+    if (rowSelection.type === 'checkbox') {
+      const _selectedRowKeys = (rowSelection.selectedRowKeys || []).slice(0);
+      isChecked ? _selectedRowKeys.splice(rowSelection.selectedRowKeys.indexOf(id), 1) : _selectedRowKeys.push(id);
+      rowSelection.onChange(_selectedRowKeys, id, {
+        context,
+        checked: !isChecked
+      });
+      return;
+    }
+    const selectedRowKeys = rowSelection.selectedRowKeys.length && rowSelection.selectedRowKeys[0] === id ? [] : [id];
+    rowSelection.onChange(selectedRowKeys, id, {
+      context,
+      checked: !isChecked
+    });
+  };
+  const renderBodyGridCells = (dataSource, context) => {
+    const getId = item => get(item, typeof rowKey === 'function' ? rowKey(item) : rowKey);
+    if (!dataSource || dataSource.length === 0) {
+      return null;
+    }
+    return dataSource.map(item => {
+      const id = getId(item);
+      const isChecked = (rowSelection == null ? void 0 : rowSelection.selectedRowKeys) && rowSelection.selectedRowKeys.indexOf(id) > -1;
+      const columnsValue = computeColumnsValue({
+        columns: layoutColumns,
+        emptyIsPlaceholder,
+        valueIsEmpty,
+        removeEmpty: true,
+        dataSource: item,
+        placeholder,
+        context
+      });
+      const columnMap = columnsValue.reduce((result, column) => Object.assign(result, {
+        [column.name]: column
+      }), {});
+      const rowClassName = classnames(style$4['body'], style$4['body-cell'], style$4['body-row'], 'info-page-table-row', {
+        [style$4['is-selected-all']]: rowSelection == null ? void 0 : rowSelection.isSelectedAll,
+        [style$4['is-selected']]: isChecked,
+        [style$4['is-disabled']]: item.disabled
+      });
+      const onSelectionChange = () => handleRowClick(item, {
+        dataSource,
+        context,
+        id,
+        isChecked
+      });
+      const cells = [];
+      if ((rowSelection == null ? void 0 : rowSelection.type) === 'checkbox') {
+        cells.push(/*#__PURE__*/jsx("div", {
+          className: classnames(style$4['col'], style$4['col-fixed'], 'info-page-table-col'),
+          children: /*#__PURE__*/jsx("span", {
+            className: classnames(style$4['col-content'], 'info-page-table-col-content'),
+            children: /*#__PURE__*/jsx(Checkbox, {
+              disabled: item.disabled || rowSelection.isSelectedAll,
+              checked: rowSelection.isSelectedAll && !item.disabled || isChecked,
+              onChange: onSelectionChange
+            })
+          })
+        }, `${id}__selection__`));
+      }
+      layoutColumns.forEach((column, index) => {
+        const columnValue = columnMap[column.name];
+        const {
+          widthBased,
+          fillRemaining,
+          style: columnStyle
+        } = getColumnLayout(column, {
+          defaultSpan,
+          colsSize,
+          isLastColumn: index === layoutColumns.length - 1,
+          columns: layoutColumns
+        });
+        cells.push(/*#__PURE__*/jsx("div", {
+          style: columnStyle,
+          className: classnames(style$4['col'], fillRemaining ? style$4['col-width-fill'] : widthBased && style$4['col-width-based'], 'info-page-table-col'),
+          children: columnValue ? renderCellContent(computeDisplay({
+            column: columnValue,
+            placeholder,
+            dataSource: item,
+            context
+          }), columnValue, style$4['col-content']) : /*#__PURE__*/jsx("span", {
+            className: style$4['col-content']
+          })
+        }, `${id}-${column.name}`));
+      });
+      if ((rowSelection == null ? void 0 : rowSelection.type) === 'radio') {
+        cells.push(/*#__PURE__*/jsx("div", {
+          className: classnames(style$4['col'], style$4['single-checked'], 'info-page-table-col'),
+          onClick: onSelectionChange,
+          children: isChecked && /*#__PURE__*/jsx(CheckOutlined, {})
+        }, `${id}__radio__`));
+      }
+      return /*#__PURE__*/jsx("div", {
+        className: rowClassName,
+        children: cells
+      }, id);
+    });
+  };
+  const renderGrid = (dataSource, context) => /*#__PURE__*/jsxs("div", {
+    className: style$4['grid'],
+    style: {
+      gridTemplateColumns
+    },
+    children: [renderHeaderGridCells(headerCellProps), renderBodyGridCells(dataSource, context)]
+  });
+  const renderBody = (dataSource, context) => {
+    if (!dataSource || dataSource.length === 0) {
+      return /*#__PURE__*/jsx("div", {
+        className: style$4['empty'],
+        children: empty
+      });
+    }
+    return /*#__PURE__*/jsx("div", {
+      className: classnames('info-page-table-body'),
+      children: renderGrid(dataSource, context)
+    });
+  };
+  if (typeof render === 'function') {
+    return render(_extends({}, others, {
+      header,
+      renderBody
+    }));
+  }
+  return /*#__PURE__*/jsx("div", _extends({}, others, {
+    className: classnames(style$4['table'], style$4['tableView'], 'info-page-table', className),
+    children: dataSource && dataSource.length > 0 ? renderGrid(dataSource, context) : /*#__PURE__*/jsxs(Fragment, {
+      children: [/*#__PURE__*/jsx("div", {
+        className: style$4['grid'],
+        style: {
+          gridTemplateColumns
+        },
+        children: renderHeaderGridCells(headerCellProps)
+      }), /*#__PURE__*/jsx("div", {
+        className: style$4['empty'],
+        children: empty
+      })]
+    })
+  }));
+};
+TableView.Header = Header;
+TableView.useSelectedRow = useSelectedRow;
+TableView.useSort = useSort;
+TableView.sortDataSource = useSort.sortDataSource;
+
+var style$1 = {"table-page":"kne-table-page_ut9rJ","table-content":"kne-table-page_dxN6N","table-with-toolbar":"kne-table-page_sf06r","table-in-toolbar":"kne-table-page_sawIT","pagination":"kne-table-page_DSTEf","total_text":"kne-table-page_pJhKr","floating-scrollbar":"kne-table-page_iu8E1","floating-scrollbar-thumb":"kne-table-page_RjZsu","is-moving":"kne-table-page_y-4Ou"};
+
+const parsePixelValue = value => {
+  const num = parseFloat(value);
+  return Number.isNaN(num) ? 0 : num;
+};
+const getViewportRect = () => {
+  const visualViewport = window.visualViewport;
+  if (visualViewport) {
+    return {
+      top: visualViewport.offsetTop,
+      bottom: visualViewport.offsetTop + visualViewport.height,
+      left: visualViewport.offsetLeft,
+      right: visualViewport.offsetLeft + visualViewport.width,
+      height: visualViewport.height
+    };
+  }
+  return {
+    top: 0,
+    bottom: window.innerHeight,
+    left: 0,
+    right: window.innerWidth,
+    height: window.innerHeight
+  };
+};
+const getTableElement = root => {
+  if (!root) {
+    return null;
+  }
+  return root.querySelector('.info-page-table') || root;
+};
+const getTableScrollElement = root => {
+  if (!root) {
+    return null;
+  }
+  return root.querySelector('.ant-table-body') || root.querySelector('.ant-table-content');
+};
+const getElementViewportState = element => {
+  if (!element) {
+    return {
+      isBottomInViewport: true,
+      isPartiallyInViewport: false,
+      isTopInViewport: true,
+      rect: null,
+      viewport: getViewportRect()
+    };
+  }
+  const rect = element.getBoundingClientRect();
+  const viewport = getViewportRect();
+  return {
+    isBottomInViewport: rect.bottom > viewport.top && rect.bottom <= viewport.bottom,
+    isPartiallyInViewport: rect.top < viewport.bottom && rect.bottom > viewport.top,
+    isTopInViewport: rect.top >= viewport.top && rect.top < viewport.bottom,
+    rect,
+    viewport
+  };
+};
+const isTopEdgeInViewport = (element, scrollMarginTop = 0) => {
+  const {
+    isTopInViewport,
+    rect,
+    viewport
+  } = getElementViewportState(element);
+  if (!rect) {
+    return true;
+  }
+  const viewportTop = viewport.top + scrollMarginTop;
+  return rect.top >= viewportTop && rect.top < viewport.bottom;
+};
+const shouldShowFloatingScrollbar = (scrollEl, viewportState) => {
+  if (!scrollEl || scrollEl.scrollWidth <= scrollEl.clientWidth + 1) {
+    return false;
+  }
+  const state = viewportState || getElementViewportState(scrollEl);
+  if (!state.isPartiallyInViewport) {
+    return false;
+  }
+  return !state.isBottomInViewport;
+};
+const observeViewportIntersection = (element, onChange) => {
+  var _window$visualViewpor, _window$visualViewpor2;
+  if (!element) {
+    return () => {};
+  }
+  const notify = entry => {
+    onChange(getElementViewportState(element));
+  };
+  const observer = new IntersectionObserver(([entry]) => {
+    notify();
+  }, {
+    root: null,
+    threshold: [0, 0.01, 0.25, 0.5, 0.75, 1]
+  });
+  observer.observe(element);
+  const handleViewportChange = () => {
+    notify();
+  };
+  window.addEventListener('scroll', handleViewportChange, true);
+  window.addEventListener('resize', handleViewportChange);
+  (_window$visualViewpor = window.visualViewport) == null || _window$visualViewpor.addEventListener('resize', handleViewportChange);
+  (_window$visualViewpor2 = window.visualViewport) == null || _window$visualViewpor2.addEventListener('scroll', handleViewportChange);
+  notify();
+  return () => {
+    var _window$visualViewpor3, _window$visualViewpor4;
+    observer.disconnect();
+    window.removeEventListener('scroll', handleViewportChange, true);
+    window.removeEventListener('resize', handleViewportChange);
+    (_window$visualViewpor3 = window.visualViewport) == null || _window$visualViewpor3.removeEventListener('resize', handleViewportChange);
+    (_window$visualViewpor4 = window.visualViewport) == null || _window$visualViewpor4.removeEventListener('scroll', handleViewportChange);
+  };
+};
+
+const BAR_HEIGHT = 15;
+const THUMB_MARGIN = 2;
+const computeBarMetrics = (scrollEl, viewportState) => {
+  const rect = scrollEl.getBoundingClientRect();
+  const viewport = getViewportRect();
+  const trackWidth = rect.width;
+  const thumbWidth = Math.max(trackWidth * scrollEl.clientWidth / scrollEl.scrollWidth - THUMB_MARGIN * 2, 24);
+  const maxThumbOffset = trackWidth - thumbWidth - THUMB_MARGIN * 2;
+  const scrollRatio = scrollEl.scrollWidth > scrollEl.clientWidth ? scrollEl.scrollLeft / (scrollEl.scrollWidth - scrollEl.clientWidth) : 0;
+  return {
+    left: rect.left,
+    width: trackWidth,
+    bottom: window.innerHeight - viewport.bottom,
+    thumbWidth,
+    thumbLeft: THUMB_MARGIN + maxThumbOffset * scrollRatio,
+    visible: shouldShowFloatingScrollbar(scrollEl, viewportState)
+  };
+};
+const FloatingScrollBar = ({
+  metrics,
+  onThumbDrag,
+  getPortalContainer
+}) => {
+  const startRef = useRef(0);
+  const [moving, setMoving] = useState(false);
+  const movingRef = useRef(false);
+  const onThumbDragRef = useRef(onThumbDrag);
+  onThumbDragRef.current = onThumbDrag;
+  useEffect(() => {
+    movingRef.current = moving;
+  }, [moving]);
+  useEffect(() => {
+    const moveHandler = event => {
+      if (!movingRef.current) {
+        return;
+      }
+      onThumbDragRef.current(event.clientX - startRef.current);
+      startRef.current = event.clientX;
+    };
+    const upHandler = () => {
+      setMoving(false);
+    };
+    document.addEventListener('mousemove', moveHandler, true);
+    document.addEventListener('mouseup', upHandler, true);
+    return () => {
+      document.removeEventListener('mousemove', moveHandler, true);
+      document.removeEventListener('mouseup', upHandler, true);
+    };
+  }, []);
+  if (!(metrics != null && metrics.visible)) {
+    return null;
+  }
+  const portalTarget = (getPortalContainer == null ? void 0 : getPortalContainer()) || document.body;
+  return /*#__PURE__*/createPortal(/*#__PURE__*/jsx("div", {
+    className: classnames(style$1['floating-scrollbar'], 'table-page-floating-scrollbar'),
+    style: {
+      left: metrics.left,
+      width: metrics.width,
+      height: BAR_HEIGHT,
+      bottom: metrics.bottom
+    },
+    children: /*#__PURE__*/jsx("div", {
+      className: classnames(style$1['floating-scrollbar-thumb'], {
+        [style$1['is-moving']]: moving
+      }),
+      style: {
+        width: metrics.thumbWidth,
+        left: metrics.thumbLeft
+      },
+      onMouseDown: event => {
+        event.preventDefault();
+        startRef.current = event.clientX;
+        setMoving(true);
+      }
+    })
+  }), portalTarget);
+};
+const HorizontalScroller = /*#__PURE__*/forwardRef(({
+  className,
+  enabled: _enabled = true,
+  getPortalContainer,
+  children
+}, forwardedRef) => {
+  const [metrics, setMetrics] = useState(null);
+  const containerRef = useRef(null);
+  const scrollElRef = useRef(null);
+  const viewportStateRef = useRef(null);
+  const setContainerRef = useRefCallback(node => {
+    containerRef.current = node;
+    if (typeof forwardedRef === 'function') {
+      forwardedRef(node);
+    } else if (forwardedRef) {
+      forwardedRef.current = node;
+    }
+  });
+  const updateMetrics = useRefCallback(() => {
+    const scrollEl = scrollElRef.current;
+    if (!scrollEl) {
+      setMetrics(null);
+      return;
+    }
+    setMetrics(computeBarMetrics(scrollEl, viewportStateRef.current));
+  });
+  const handleThumbDrag = useRefCallback(deltaX => {
+    const scrollEl = scrollElRef.current;
+    if (!scrollEl) {
+      return;
+    }
+    const trackWidth = scrollEl.clientWidth;
+    const scrollableWidth = scrollEl.scrollWidth - scrollEl.clientWidth;
+    const thumbWidth = Math.max(trackWidth * scrollEl.clientWidth / scrollEl.scrollWidth - THUMB_MARGIN * 2, 24);
+    const thumbTravel = trackWidth - thumbWidth - THUMB_MARGIN * 2;
+    if (thumbTravel <= 0) {
+      return;
+    }
+    scrollEl.scrollLeft += deltaX / thumbTravel * scrollableWidth;
+    updateMetrics();
+  });
+  useEffect(() => {
+    if (!_enabled) {
+      scrollElRef.current = null;
+      viewportStateRef.current = null;
+      setMetrics(null);
+      return undefined;
+    }
+    const root = containerRef.current;
+    if (!root) {
+      return undefined;
+    }
+    let scrollEl = null;
+    let unobserveViewport = null;
+    let contentResizeObserver = null;
+    const detachScrollEl = () => {
+      var _contentResizeObserve;
+      unobserveViewport == null || unobserveViewport();
+      unobserveViewport = null;
+      if (!scrollEl) {
+        return;
+      }
+      scrollEl.removeEventListener('scroll', updateMetrics);
+      (_contentResizeObserve = contentResizeObserver) == null || _contentResizeObserve.disconnect();
+      contentResizeObserver = null;
+      scrollElRef.current = null;
+      viewportStateRef.current = null;
+      scrollEl = null;
+    };
+    const attachScrollEl = nextScrollEl => {
+      if (!nextScrollEl || nextScrollEl === scrollEl) {
+        return;
+      }
+      detachScrollEl();
+      scrollEl = nextScrollEl;
+      scrollElRef.current = scrollEl;
+      unobserveViewport = observeViewportIntersection(scrollEl, state => {
+        viewportStateRef.current = state;
+        updateMetrics();
+      });
+      scrollEl.addEventListener('scroll', updateMetrics, {
+        passive: true
+      });
+      contentResizeObserver = new ResizeObserver(updateMetrics);
+      contentResizeObserver.observe(scrollEl);
+      Array.from(scrollEl.children).forEach(child => {
+        contentResizeObserver.observe(child);
+      });
+    };
+    const onLayoutChange = () => {
+      attachScrollEl(getTableScrollElement(root));
+      updateMetrics();
+    };
+    const containerResizeObserver = new ResizeObserver(onLayoutChange);
+    containerResizeObserver.observe(root);
+    onLayoutChange();
+    return () => {
+      detachScrollEl();
+      containerResizeObserver.disconnect();
+    };
+  }, [_enabled, updateMetrics]);
+  return /*#__PURE__*/jsxs(Fragment, {
+    children: [/*#__PURE__*/jsx("div", {
+      ref: setContainerRef,
+      className: className,
+      children: children
+    }), _enabled ? /*#__PURE__*/jsx(FloatingScrollBar, {
+      metrics: metrics,
+      onThumbDrag: handleThumbDrag,
+      getPortalContainer: getPortalContainer
+    }) : null]
+  });
+});
+
+var style = {"table-toolbar-section":"kne-table-page_I21Xn","has-value-display":"kne-table-page_COnMY","table-toolbar":"kne-table-page_x6mv7","table-toolbar-value-display":"kne-table-page_vbwMg","table-toolbar-batch":"kne-table-page_k8-Ku","table-toolbar-search":"kne-table-page_pB5en","table-toolbar-batch-btn":"kne-table-page_gZtbT","table-toolbar-filter":"kne-table-page_Jyfm7","table-toolbar-divider":"kne-table-page_z--2N","table-toolbar-filter-inner":"kne-table-page_AX3aK"};
+
+const _excluded$1 = ["list", "displayLine", "extraExpand", "className"],
+  _excluded2$1 = ["className", "style"];
+const TableToolbar = ({
+  filterValue,
+  onFilterChange,
+  filter,
+  search,
+  batchActions,
+  rowSelection,
+  selectedRows,
+  batchContext
+}) => {
+  var _filter$list;
+  const {
+    formatMessage
+  } = useIntl();
+  const selectedRowKeys = (rowSelection == null ? void 0 : rowSelection.selectedRowKeys) || [];
+  const hasSelection = selectedRowKeys.length > 0;
+  const batchMenuItems = useMemo(() => {
+    if (!Array.isArray(batchActions) || batchActions.length === 0) {
+      return [];
+    }
+    return batchActions.map(item => {
+      const {
+        key,
+        label,
+        disabled,
+        danger,
+        onClick
+      } = item;
+      const isDisabled = disabled != null ? disabled : !hasSelection;
+      return {
+        key: key || label,
+        label,
+        danger,
+        disabled: isDisabled,
+        onClick: () => {
+          if (isDisabled) {
+            return;
+          }
+          onClick == null || onClick(_extends({
+            selectedRowKeys,
+            selectedRows: selectedRows || [],
+            rowSelection
+          }, batchContext));
+        }
+      };
+    });
+  }, [batchActions, batchContext, hasSelection, rowSelection, selectedRowKeys, selectedRows]);
+  const showBatch = batchMenuItems.length > 0;
+  const showFilter = (filter == null || (_filter$list = filter.list) == null ? void 0 : _filter$list.length) > 0;
+  const showSearch = search && search.name;
+  if (!showBatch && !showFilter && !showSearch) {
+    return null;
+  }
+  const _ref = filter || {},
+    {
+      list: filterList,
+      displayLine = 1,
+      extraExpand,
+      className: filterClassName
+    } = _ref,
+    filterRest = _objectWithoutPropertiesLoose(_ref, _excluded$1);
+  const _ref2 = search || {},
+    {
+      className: searchClassName,
+      style: searchStyle
+    } = _ref2,
+    searchRest = _objectWithoutPropertiesLoose(_ref2, _excluded2$1);
+  const hasValueDisplay = (filterValue == null ? void 0 : filterValue.length) > 0;
+  return /*#__PURE__*/jsx(FilterProvider, {
+    value: filterValue,
+    onChange: onFilterChange,
+    children: /*#__PURE__*/jsxs("div", {
+      className: classnames(style['table-toolbar-section'], 'table-page-toolbar-section', {
+        [style['has-value-display']]: hasValueDisplay,
+        'table-page-toolbar-section--has-value': hasValueDisplay
+      }),
+      children: [/*#__PURE__*/jsxs("div", {
+        className: style['table-toolbar'],
+        children: [showBatch ? /*#__PURE__*/jsxs(Fragment, {
+          children: [/*#__PURE__*/jsx("div", {
+            className: style['table-toolbar-batch'],
+            children: /*#__PURE__*/jsx(Dropdown, {
+              disabled: !hasSelection,
+              menu: {
+                items: batchMenuItems
+              },
+              trigger: ['click'],
+              children: /*#__PURE__*/jsxs(Button, {
+                size: "small",
+                disabled: !hasSelection,
+                className: style['table-toolbar-batch-btn'],
+                children: [hasSelection ? formatMessage({
+                  id: 'BatchOperationsWithCount'
+                }, {
+                  count: selectedRowKeys.length
+                }) : formatMessage({
+                  id: 'BatchOperations'
+                }), /*#__PURE__*/jsx(DownOutlined, {})]
+              })
+            })
+          }), (showFilter || showSearch) && /*#__PURE__*/jsx("span", {
+            className: style['table-toolbar-divider'],
+            "aria-hidden": true
+          })]
+        }) : null, showFilter ? /*#__PURE__*/jsx("div", {
+          className: style['table-toolbar-filter'],
+          children: /*#__PURE__*/jsx("div", {
+            className: classnames(style['table-toolbar-filter-inner'], filterClassName),
+            children: /*#__PURE__*/jsx(FilterLines, _extends({
+              list: filterList,
+              displayLine: displayLine,
+              label: ""
+            }, filterRest))
+          })
+        }) : null, showSearch ? /*#__PURE__*/jsxs(Fragment, {
+          children: [showFilter && /*#__PURE__*/jsx("span", {
+            className: style['table-toolbar-divider'],
+            "aria-hidden": true
+          }), /*#__PURE__*/jsx("div", {
+            className: style['table-toolbar-search'],
+            children: /*#__PURE__*/jsx(SearchInput, _extends({
+              allowClear: true,
+              bordered: false,
+              variant: "filled",
+              size: "small",
+              className: classnames(style['table-toolbar-search-input'], searchClassName),
+              style: searchStyle
+            }, searchRest))
+          })]
+        }) : null]
+      }), hasValueDisplay ? /*#__PURE__*/jsx("div", {
+        className: style['table-toolbar-value-display'],
+        children: /*#__PURE__*/jsx(FilterValueDisplay, {
+          value: filterValue,
+          onChange: onFilterChange,
+          extraExpand: extraExpand
+        })
+      }) : null]
+    })
+  });
+};
+
+const _excluded = ["data", "refresh", "reload", "requestParams", "fetchProps", "isComplete", "loadMore", "send", "dataFormat", "className", "columns", "getColumns", "pagination", "columnRenderProps", "summary", "sticky", "renderType", "horizontalScroller", "getScrollContainer", "filter", "search", "batchActions", "selectedRows", "rowSelection"],
+  _excluded2 = ["pagination", "horizontalScroller", "getScrollContainer"];
+const readPageSize = key => {
+  try {
+    const value = localStorage.getItem(key);
+    if (value == null || value === '') {
+      return null;
+    }
+    const num = Number(value);
+    return Number.isNaN(num) ? null : num;
+  } catch (_unused) {
+    return null;
+  }
+};
+const writePageSize = (key, size) => {
+  try {
+    localStorage.setItem(key, String(size));
+  } catch (_unused2) {
+    // ignore quota errors
+  }
+};
+const isTableTopInViewport = target => {
+  const scrollMarginTop = parsePixelValue(getComputedStyle(target).scrollMarginTop);
+  return isTopEdgeInViewport(target, scrollMarginTop);
+};
+const scrollTableIntoView = root => {
+  const target = getTableElement(root);
+  if (!target) {
+    return;
+  }
+  requestAnimationFrame(() => {
+    requestAnimationFrame(() => {
+      if (isTableTopInViewport(target)) {
+        return;
+      }
+      target.scrollIntoView({
+        block: 'start',
+        inline: 'nearest'
+      });
+    });
+  });
+};
+const TABLE_COMPONENTS = {
+  Table,
+  TableView
+};
+const collectFilterFieldNames = (filter, search) => {
+  const names = new Set();
+  if (search != null && search.name) {
+    names.add(search.name);
+  }
+  if (Array.isArray(filter == null ? void 0 : filter.list)) {
+    filter.list.forEach(row => {
+      if (!Array.isArray(row)) {
+        return;
+      }
+      row.forEach(item => {
+        var _item$props;
+        const name = item == null || (_item$props = item.props) == null ? void 0 : _item$props.name;
+        if (name) {
+          names.add(name);
+        }
+      });
+    });
+  }
+  return names;
+};
+const omitFilterParams = (params, filterFieldNames) => {
+  const next = Object.assign({}, params);
+  filterFieldNames.forEach(name => {
+    delete next[name];
+  });
+  return next;
+};
+const TablePageInnerContent = withLocale(_ref => {
+  var _filter$list;
+  let {
+      data,
+      refresh,
+      reload,
+      requestParams,
+      fetchProps,
+      isComplete,
+      loadMore,
+      send,
+      dataFormat = data => {
+        return {
+          list: data.pageData,
+          total: data.totalCount,
+          data
+        };
+      },
+      className,
+      columns,
+      getColumns,
+      pagination = {},
+      columnRenderProps = {},
+      summary,
+      sticky,
+      renderType = 'Table',
+      horizontalScroller = true,
+      getScrollContainer,
+      filter,
+      search,
+      batchActions,
+      selectedRows,
+      rowSelection
+    } = _ref,
+    props = _objectWithoutPropertiesLoose(_ref, _excluded);
+  const {
+    formatMessage
+  } = useIntl();
+  const tableContentRef = useRef(null);
+  const pendingScrollRef = useRef(false);
+  const handlerDataFormat = useRefCallback(dataFormat);
+  const isFilterControlled = filter && filter.value !== undefined;
+  const [internalFilterValue, setInternalFilterValue] = useState(() => (filter == null ? void 0 : filter.defaultValue) || []);
+  const filterValue = isFilterControlled ? filter.value : internalFilterValue;
+  const mapFilterValue = (filter == null ? void 0 : filter.mapFilterValue) || getFilterValue;
+  const getFilterParams = useRefCallback(value => {
+    return mapFilterValue(value || []);
+  });
+  const filterFieldNames = useMemo(() => collectFilterFieldNames(filter, search), [filter, search]);
+  const buildRequestParamsWithFilter = useRefCallback((value, extra = {}) => {
+    return Object.assign({}, omitFilterParams(get(requestParams, pagination.paramsType), filterFieldNames), extra, getFilterParams(value));
+  });
+  const formatData = useMemo(() => {
+    return handlerDataFormat(data);
+  }, [data, handlerDataFormat]);
+  const resolvedColumns = typeof getColumns === 'function' ? getColumns(data) : typeof columns === 'function' ? columns(data) : columns;
+  const fetchContext = useMemo(() => ({
+    data,
+    fetchProps,
+    requestParams,
+    refresh,
+    reload,
+    loadMore,
+    send,
+    dataFormat,
+    pagination
+  }), [data, fetchProps, requestParams, refresh, reload, loadMore, send, dataFormat, pagination]);
+  const scrollTable = useRefCallback(() => {
+    scrollTableIntoView(tableContentRef.current);
+  });
+  const handleFilterChange = useRefCallback(value => {
+    if (!isFilterControlled) {
+      setInternalFilterValue(value);
+    }
+    filter == null || filter.onChange == null || filter.onChange(value);
+    reload({
+      [pagination.paramsType]: buildRequestParamsWithFilter(value, {
+        [pagination.currentName]: 1
+      })
+    });
+  });
+  useEffect(() => {
+    if (!pendingScrollRef.current || !isComplete) {
+      return;
+    }
+    pendingScrollRef.current = false;
+    scrollTable();
+  }, [isComplete, data, scrollTable]);
+  const handlePaginationChange = useRefCallback((page, size) => {
+    pendingScrollRef.current = true;
+    if (typeof pagination.onChange === 'function') {
+      pagination.onChange(page, size);
+      return;
+    }
+    if (page !== get(requestParams, [pagination.paramsType, pagination.currentName], 1)) {
+      (pagination.requestType === 'refresh' ? refresh : reload)({
+        [pagination.paramsType]: buildRequestParamsWithFilter(filterValue, {
+          [pagination.currentName]: page,
+          [pagination.pageSizeName]: Number(size)
+        })
+      });
+    } else {
+      pagination.onShowSizeChange && pagination.onShowSizeChange(page, Number(size));
+    }
+  });
+  const paginationConfig = useMemo(() => {
+    if (!pagination.open) {
+      return null;
+    }
+    return {
+      total: formatData.total,
+      showTotal: typeof pagination.showTotal === 'function' ? pagination.showTotal : total => /*#__PURE__*/jsxs(Fragment, {
+        children: [formatMessage({
+          id: 'TotalText'
+        }), "\xA0", /*#__PURE__*/jsx("span", {
+          className: style$1['total_text'],
+          children: total
+        }), "\xA0", formatMessage({
+          id: 'ItemText'
+        })]
+      }),
+      current: get(requestParams, [pagination.paramsType, pagination.currentName], 1),
+      pageSize: Number(get(requestParams, [pagination.paramsType, pagination.pageSizeName], pagination.pageSize)) || pagination.pageSize || 20,
+      onChange: handlePaginationChange,
+      size: pagination.size,
+      hideOnSinglePage: pagination.hideOnSinglePage,
+      showSizeChanger: pagination.showSizeChanger,
+      showQuickJumper: pagination.showQuickJumper,
+      pageSizeOptions: pagination.pageSizeOptions
+    };
+  }, [pagination, formatData.total, requestParams, formatMessage, handlePaginationChange]);
+  const hasToolbar = !!(filter != null && (_filter$list = filter.list) != null && _filter$list.length || search && search.name || batchActions && batchActions.length);
+  const batchContext = useMemo(() => ({
+    data,
+    fetchProps,
+    requestParams,
+    refresh,
+    reload,
+    loadMore,
+    send,
+    dataFormat,
+    pagination
+  }), [data, fetchProps, requestParams, refresh, reload, loadMore, send, dataFormat, pagination]);
+  const tableProps = _extends({}, props, {
+    rowSelection,
+    dataSource: formatData.list,
+    pagination: false,
+    sticky,
+    className: classnames(className, {
+      [style$1['table-in-toolbar']]: hasToolbar
+    }),
+    columns: resolvedColumns,
+    columnRenderProps: _extends({}, columnRenderProps, {
+      requestParams,
+      fetchProps,
+      data
+    }),
+    summary: typeof summary === 'function' ? (pageData, ...args) => {
+      return summary(Object.assign({}, fetchContext, {
+        pageData
+      }, ...args));
+    } : null
+  });
+  const TableComponent = TABLE_COMPONENTS[renderType] || Table;
+  const tableElement = /*#__PURE__*/jsx(TableComponent, _extends({}, tableProps));
+  return /*#__PURE__*/jsxs("div", {
+    className: style$1['table-page'],
+    children: [/*#__PURE__*/jsx(HorizontalScroller, {
+      ref: tableContentRef,
+      enabled: horizontalScroller && renderType === 'Table',
+      getPortalContainer: getScrollContainer,
+      className: classnames(style$1['table-content'], 'loading-container', {
+        'is-loading': !isComplete && !data
+      }),
+      children: hasToolbar ? /*#__PURE__*/jsxs("div", {
+        className: style$1['table-with-toolbar'],
+        children: [/*#__PURE__*/jsx(TableToolbar, {
+          filterValue: filterValue,
+          onFilterChange: handleFilterChange,
+          filter: filter,
+          search: search,
+          batchActions: batchActions,
+          rowSelection: rowSelection,
+          selectedRows: selectedRows,
+          batchContext: batchContext
+        }), tableElement]
+      }) : tableElement
+    }), paginationConfig ? /*#__PURE__*/jsx(Pagination, _extends({
+      className: style$1['pagination']
+    }, paginationConfig)) : null]
+  });
+});
+const TablePageInner = withFetch(TablePageInnerContent);
+const TablePage = /*#__PURE__*/forwardRef((_ref2, ref) => {
+  let {
+      pagination,
+      horizontalScroller = true,
+      getScrollContainer
+    } = _ref2,
+    props = _objectWithoutPropertiesLoose(_ref2, _excluded2);
+  pagination = Object.assign({}, {
+    showSizeChanger: true,
+    showQuickJumper: true,
+    hideOnSinglePage: false,
+    open: true,
+    paramsType: 'data',
+    requestType: 'reload',
+    currentName: 'currentPage',
+    pageSizeName: 'perPage',
+    pageSize: 20
+  }, pagination);
+  const pageSizeKey = `${(props.name || 'common').toUpperCase()}_TABLE_PAGE_SIZE`;
+  const [pageSize, setPageSize] = useState(() => {
+    var _readPageSize;
+    return (_readPageSize = readPageSize(pageSizeKey)) != null ? _readPageSize : pagination.pageSize;
+  });
+  const params = props[pagination.paramsType];
+  const filterDefaultParams = useMemo(() => {
+    var _props$filter;
+    if (!((_props$filter = props.filter) != null && (_props$filter = _props$filter.defaultValue) != null && _props$filter.length)) {
+      return {};
+    }
+    const mapFilterValue = props.filter.mapFilterValue || getFilterValue;
+    return mapFilterValue(props.filter.defaultValue);
+  }, [props.filter]);
+  const fetchParams = useMemo(() => {
+    return {
+      [pagination.paramsType]: Object.assign({}, params, filterDefaultParams, {
+        [pagination.pageSizeName]: pageSize
+      })
+    };
+  }, [params, pagination.pageSizeName, pagination.paramsType, pageSize, filterDefaultParams]);
+  return /*#__PURE__*/jsx(TablePageInner, _extends({}, props, fetchParams, {
+    horizontalScroller: horizontalScroller,
+    getScrollContainer: getScrollContainer,
+    pagination: Object.assign({}, pagination, {
+      pageSize,
+      onShowSizeChange: (current, size) => {
+        const nextSize = Number(size);
+        writePageSize(pageSizeKey, nextSize);
+        setPageSize(nextSize);
+      }
+    }),
+    ref: ref
+  }));
+});
+
+const preset = props => {
+  const next = merge({}, globalParams, props);
+  merge(globalParams, props);
+  return next;
+};
+
+export { RENDER_TYPE_NAMES, SIZE_NAMES, Table, TableView, TablePage as default, getColumnRender, getRenderTypeDimensions, getRenderTypeNames, getTagColor, globalParams, isOptionsColumn, parseRenderType, preset, renderTagItem, renderTagList, resolveColumn, resolveColumnDimensions, resolveColumns, resolveRenderType, sortDataSource, tableLocalApis, useSelectedRow, useSort, useTableConfig };
+//# sourceMappingURL=index.modern.js.map