@kne/table-page 0.1.1 → 0.1.3

package/dist/index.modern.js

@@ -1,5 +1,5 @@
 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 { Typography, Tooltip, Tag, Space, Badge, 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';
@@ -215,14 +215,15 @@ const formatView = (value, format, context) => {
 const globalParams = {
   renderType: null,
   renderTypeSize: {},
-  tagTypeColors: {}
+  tagTypeColors: {},
+  statusTypeColors: {}
 };
 
 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 _excluded$8 = ["showTitle"];
 const Ellipsis = ({
   children,
   ellipsis
@@ -234,7 +235,7 @@ const Ellipsis = ({
   const {
       showTitle
     } = userConfig,
-    rest = _objectWithoutPropertiesLoose(userConfig, _excluded$7);
+    rest = _objectWithoutPropertiesLoose(userConfig, _excluded$8);
   return /*#__PURE__*/jsx(Typography.Text, {
     className: ellipsisStyle['ellipsis'],
     ellipsis: Object.assign({}, {
@@ -246,19 +247,22 @@ const Ellipsis = ({
   });
 };
 
-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"};
+var style$8 = {"text":"kne-table-page_5N2-a","ellipsis":"kne-table-page_Lkl3D","hover":"kne-table-page_RnF6d","primary":"kne-table-page_g-Sky","clickable":"kne-table-page_vPcDo","loading":"kne-table-page_FeQ09"};
 
-const main = (value, {
+const MainCell = ({
+  value,
   column,
   dataSource
-} = {}) => {
+}) => {
   const {
     ellipsis = true,
     hover = true,
     primary = true,
     onClick
   } = column || {};
-  if (!hover && !primary && !onClick) {
+  const [loading, setLoading] = useState(false);
+  const isClickable = Boolean(hover || primary || onClick);
+  if (!isClickable) {
     return /*#__PURE__*/jsx(Ellipsis, {
       ellipsis: ellipsis,
       children: value
@@ -266,16 +270,27 @@ const main = (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({
+  const handleClick = onClick ? e => {
+    if (loading) {
+      return;
+    }
+    setLoading(true);
+    Promise.resolve(onClick({
       item: value,
       colItem: dataSource,
       event: e
-    }) : undefined,
+    })).finally(() => {
+      setLoading(false);
+    });
+  } : undefined;
+  const text = /*#__PURE__*/jsx("span", {
+    className: classnames(style$8['text'], ellipsis && style$8['ellipsis'], {
+      [style$8['hover']]: hover,
+      [style$8['primary']]: primary,
+      [style$8['clickable']]: Boolean(onClick),
+      [style$8['loading']]: loading
+    }),
+    onClick: handleClick,
     children: value
   });
   if (!showTooltip) {
@@ -287,8 +302,16 @@ const main = (value, {
     children: text
   });
 };
+const main = (value, {
+  column,
+  dataSource
+} = {}) => /*#__PURE__*/jsx(MainCell, {
+  value: value,
+  column: column,
+  dataSource: dataSource
+});
 
-var style$6 = {"amount":"kne-table-page_AH-3R"};
+var style$7 = {"amount":"kne-table-page_AH-3R"};
 
 const amount = (value, {
   column
@@ -297,7 +320,7 @@ const amount = (value, {
     ellipsis = true
   } = column || {};
   return /*#__PURE__*/jsx("span", {
-    className: style$6['amount'],
+    className: style$7['amount'],
     children: /*#__PURE__*/jsx(Ellipsis, {
       ellipsis: ellipsis,
       children: value
@@ -305,7 +328,7 @@ const amount = (value, {
   });
 };
 
-const _excluded$6 = ["text", "type", "color", "children"];
+const _excluded$7 = ["text", "type", "color", "children"];
 const DEFAULT_TAG_TYPE_COLORS = {
   default: 'default',
   success: 'success',
@@ -360,7 +383,7 @@ const renderTagItem = (item, key) => {
       color,
       children
     } = tag,
-    rest = _objectWithoutPropertiesLoose(tag, _excluded$6);
+    rest = _objectWithoutPropertiesLoose(tag, _excluded$7);
   return /*#__PURE__*/jsx(Tag, _extends({
     color: color != null ? color : getTagColor(type)
   }, rest, {
@@ -382,6 +405,73 @@ const tag = value => renderTagItem(value);
 
 const tagList = value => renderTagList(value);
 
+const _excluded$6 = ["text", "type", "status", "color", "children"];
+const DEFAULT_STATUS_TYPE_MAP = {
+  default: 'default',
+  success: 'success',
+  progress: 'processing',
+  processing: 'processing',
+  danger: 'error',
+  error: 'error',
+  warning: 'warning',
+  info: 'processing',
+  other: 'default',
+  active: 'success',
+  vacation: 'warning',
+  resigned: 'default',
+  probation: 'processing',
+  completed: 'success',
+  pending: 'warning',
+  shipped: 'processing',
+  paid: 'success',
+  cancelled: 'error'
+};
+const getStatusType = type => {
+  if (!type) {
+    return 'default';
+  }
+  const customTypes = globalParams.statusTypeColors || {};
+  return customTypes[type] || DEFAULT_STATUS_TYPE_MAP[type] || type;
+};
+const normalizeStatusItem = 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 renderStatusItem = item => {
+  var _ref2;
+  const statusItem = normalizeStatusItem(item);
+  if (!statusItem || statusItem.text == null) {
+    return null;
+  }
+  const {
+      text,
+      type,
+      status,
+      color,
+      children
+    } = statusItem,
+    rest = _objectWithoutPropertiesLoose(statusItem, _excluded$6);
+  return /*#__PURE__*/jsx(Badge, _extends({
+    status: (_ref2 = status != null ? status : color) != null ? _ref2 : getStatusType(type),
+    text: children != null ? children : text
+  }, rest));
+};
+
+const status = value => renderStatusItem(value);
+
 const DEFAULT_SPLIT = ',';
 const normalizeListValue = value => {
   if (Array.isArray(value)) {
@@ -551,10 +641,10 @@ const getColumnLayout = (column, {
   };
 };
 
-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"};
+var style$6 = {"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"];
+  _excluded2$3 = ["list"];
 const normalizeOptionItem = (item, buttonClassName) => {
   var _ref;
   if (item == null) {
@@ -593,22 +683,22 @@ const options = (value, {
     const {
         list: valueList
       } = value,
-      rest = _objectWithoutPropertiesLoose(value, _excluded2$2);
+      rest = _objectWithoutPropertiesLoose(value, _excluded2$3);
     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 wrapperClassName = classnames(style$6['col-item'], style$6['options']);
+  const buttonClassName = classnames(wrapperClassName, style$6['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']),
+    className: classnames(wrapperClassName, style$6['options-column']),
     style: width > 0 ? {
       '--max-width': `${width}px`
     } : undefined,
@@ -630,6 +720,7 @@ const renderType = {
   amount,
   tag,
   tagList,
+  status,
   list,
   options,
   enum: enumRender,
@@ -667,6 +758,11 @@ const typeSize = {
     min: 100,
     max: 400
   },
+  status: {
+    width: 100,
+    min: 80,
+    max: 140
+  },
   tagList: {
     width: 300,
     min: 160,
@@ -985,9 +1081,9 @@ const computeColumnsDisplay = ({
 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$5 = {"table":"kne-table-page_lZgIW","tableView":"kne-table-page_fUw6j","grid":"kne-table-page_JlDmf","header-cell":"kne-table-page_P-ebv","col-content":"kne-table-page_HT5Rr","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","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"};
+var style$4 = {"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","is-sticky":"kne-table-page_jGzIR","is-sticky-scroll-y":"kne-table-page_P6lxG","is-sticky-viewport":"kne-table-page_Kr-p6","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 {
@@ -1066,7 +1162,26 @@ const useSelectedRow = options => {
   };
 };
 
-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"};
+var style$3 = {"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"};
+
+var style$2 = {"ellipsis":"kne-table-page_QBxlu"};
+
+const isSimpleTitle = title => typeof title === 'string' || typeof title === 'number';
+const wrapColumnHeaderTitle = title => {
+  if (title == null || title === '') {
+    return title;
+  }
+  if (isSimpleTitle(title)) {
+    return /*#__PURE__*/jsx(Ellipsis, {
+      ellipsis: true,
+      children: title
+    });
+  }
+  return /*#__PURE__*/jsx("span", {
+    className: style$2['ellipsis'],
+    children: title
+  });
+};
 
 const sortArrayToMap = sort => new Map((sort || []).map(item => {
   return [item.name, item.sort];
@@ -1141,21 +1256,22 @@ const getSortSingle = sortOption => {
   return true;
 };
 const renderColumnTitle = (title, column, sortRender) => {
+  const titleContent = wrapColumnHeaderTitle(title);
   if (!column.sort || typeof sortRender !== 'function') {
-    return title;
+    return titleContent;
   }
   return /*#__PURE__*/jsxs("span", {
-    className: classnames(style$2['title'], style$2['has-sort']),
+    className: classnames(style$3['title'], style$3['has-sort']),
     children: [/*#__PURE__*/jsx("span", {
-      className: style$2['title-text'],
-      children: title
+      className: style$3['title-text'],
+      children: titleContent
     }), sortRender({
       name: column.name,
       single: getSortSingle(column.sort)
     })]
   });
 };
-const useSort = props => {
+const useSort = (props = {}) => {
   const [sort, setSort] = useControlValue({
     value: props.sort,
     defaultValue: props.defaultSort || [],
@@ -1179,7 +1295,7 @@ const useSort = props => {
   }) => {
     const direction = mapSort.get(name);
     return /*#__PURE__*/jsxs("span", {
-      className: style$2['sort-btn'],
+      className: style$3['sort-btn'],
       onClick: e => {
         e.stopPropagation();
         setMapSort(sortMap => {
@@ -1202,12 +1318,12 @@ const useSort = props => {
         });
       },
       children: [/*#__PURE__*/jsx(CaretUpOutlined, {
-        className: classnames(style$2['sort-icon'], style$2['sort-up'], {
-          [style$2['active']]: direction === 'ASC'
+        className: classnames(style$3['sort-icon'], style$3['sort-up'], {
+          [style$3['active']]: direction === 'ASC'
         })
       }), /*#__PURE__*/jsx(CaretDownOutlined, {
-        className: classnames(style$2['sort-icon'], style$2['sort-down'], {
-          [style$2['active']]: direction === 'DESC'
+        className: classnames(style$3['sort-icon'], style$3['sort-down'], {
+          [style$3['active']]: direction === 'DESC'
         })
       })]
     });
@@ -1918,7 +2034,8 @@ const getColumnEllipsis = column => {
   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 _excluded$3 = ["className", "dataSource", "columns", "rowKey", "rowSelection", "valueIsEmpty", "emptyIsPlaceholder", "placeholder", "empty", "onRowSelect", "render", "context", "sticky", "stickyOffset", "getStickyContainer", "headerStyle", "pagination", "sortRender", "name", "controllerOpen", "tableServerApis", "scroll", "summary"],
+  _excluded2$2 = ["getContainer"];
 const mapJustifyToAlign = justify => {
   if (justify === 'center') {
     return 'center';
@@ -1952,9 +2069,9 @@ 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 getAntCellClassName = (...extra) => classnames(style$4['table-cell'], 'info-page-table-col', ...extra);
 const wrapColContent = node => /*#__PURE__*/jsx("span", {
-  className: style$4['col-content'],
+  className: style$5['col-content'],
   children: node
 });
 const Table = p => {
@@ -1983,6 +2100,8 @@ const Table = p => {
       render,
       context,
       sticky,
+      stickyOffset,
+      getStickyContainer,
       headerStyle,
       pagination = false,
       sortRender,
@@ -2081,7 +2200,7 @@ const Table = p => {
         key: colName,
         dataIndex: colName,
         title: /*#__PURE__*/jsx("span", {
-          className: style$4['col-content'],
+          className: style$5['col-content'],
           children: renderColumnTitle(title, column, sortRender)
         }),
         width: toAntdWidth(width),
@@ -2114,7 +2233,7 @@ const Table = p => {
             placeholder,
             dataSource: record,
             context
-          }), computedColumn, style$4['col-content']);
+          }), computedColumn, style$5['col-content']);
         }
       };
       if (!controllerOpen) {
@@ -2122,7 +2241,7 @@ const Table = p => {
       }
       const configProps = computedColumnProps(column, index, {
         title: /*#__PURE__*/jsx("span", {
-          className: style$4['col-content'],
+          className: style$5['col-content'],
           children: renderColumnTitle(title, column, sortRender)
         })
       });
@@ -2145,8 +2264,8 @@ const Table = p => {
         return {
           key: column.name,
           title: /*#__PURE__*/jsx("span", {
-            className: style$4['col-content'],
-            children: column.title
+            className: style$5['col-content'],
+            children: wrapColumnHeaderTitle(column.title)
           }),
           onHeaderCell: () => ({
             className: getAntCellClassName(),
@@ -2211,13 +2330,13 @@ const Table = p => {
       })),
       renderCell: (checked, record, index, originNode) => wrapColContent(originNode),
       onCell: () => ({
-        className: getAntCellClassName(style$3['selection-col'])
+        className: getAntCellClassName(style$4['selection-col'])
       })
     } : {
       columnWidth: 30,
       renderCell: (checked, record, index, originNode) => wrapColContent(originNode),
       onCell: () => ({
-        className: getAntCellClassName(style$3['radio-col'])
+        className: getAntCellClassName(style$4['radio-col'])
       })
     });
   }, [context, dataSource, rowKey, rowSelection, hasFixedColumn]);
@@ -2232,6 +2351,32 @@ const Table = p => {
       x
     } : {}, scroll);
   }, [hasFixedColumn, controllerOpen, totalWidth, tableWidth, scroll]);
+  const hasScrollY = (scroll == null ? void 0 : scroll.y) != null && (scroll == null ? void 0 : scroll.y) !== false;
+  const antdSticky = useMemo(() => {
+    if (!sticky) {
+      return undefined;
+    }
+    const config = typeof sticky === 'object' ? Object.assign({}, sticky) : {};
+    if (hasScrollY) {
+      const scrollSticky = _objectWithoutPropertiesLoose(config, _excluded2$2);
+      return Object.assign({
+        offsetHeader: 0
+      }, scrollSticky);
+    }
+    return Object.assign({
+      offsetHeader: 0
+    }, config, getStickyContainer ? {
+      getContainer: getStickyContainer
+    } : null);
+  }, [sticky, getStickyContainer, hasScrollY]);
+  const tableWrapperStyle = useMemo(() => {
+    if (!sticky || stickyOffset == null || hasScrollY) {
+      return undefined;
+    }
+    return {
+      '--sticky-offset': stickyOffset
+    };
+  }, [sticky, stickyOffset, hasScrollY]);
   const tableElement = /*#__PURE__*/jsx(Table$1, _extends({}, others, {
     showHeader: true,
     dataSource: dataSource,
@@ -2240,57 +2385,57 @@ const Table = p => {
     rowSelection: antdRowSelection,
     pagination: pagination,
     summary: typeof summary === 'function' ? (pageData, ...args) => summary(pageData, ...args) : undefined,
-    sticky: sticky ? {
-      offsetHeader: 0
-    } : undefined,
+    sticky: antdSticky,
     tableLayout: controllerOpen || hasFixedColumn ? 'fixed' : undefined,
     scroll: tableScroll,
     onHeaderRow: () => ({
-      className: classnames(style$4['header'], 'info-page-table-header', {
-        [style$4['sticky']]: sticky && !hasFixedColumn
-      }),
+      className: classnames(style$5['header'], 'info-page-table-header'),
       style: headerStyle
     }),
     locale: {
       emptyText: /*#__PURE__*/jsx("div", {
-        className: style$4['empty'],
+        className: style$5['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
+      return classnames(style$5['body'], 'info-page-table-row', {
+        [style$5['is-selected-all']]: rowSelection == null ? void 0 : rowSelection.isSelectedAll,
+        [style$5['is-selected']]: isChecked,
+        [style$5['is-disabled']]: record.disabled
       });
     },
-    onRow: record => ({
+    onRow: onRowSelect ? record => ({
       onClick: () => {
         if (record.disabled) {
           return;
         }
-        onRowSelect && onRowSelect(record, {
+        onRowSelect(record, {
           columns: visibleColumns,
           dataSource
         });
       }
-    })
+    }) : undefined
   }));
   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'
+    className: classnames(style$5['table'], style$4['table'], 'info-page-table', className, {
+      [style$4['is-resize']]: currentMoveColumnIndex !== null,
+      [style$4['is-computed']]: isLayout,
+      [style$4['has-group-header']]: hasGroupHeader,
+      [style$4['has-summary']]: typeof summary === 'function',
+      [style$4['is-sticky']]: !!sticky,
+      [style$4['is-sticky-scroll-y']]: !!sticky && hasScrollY,
+      [style$4['is-sticky-viewport']]: !!sticky && !hasScrollY
     }),
+    style: tableWrapperStyle,
     children: [/*#__PURE__*/jsx("div", {
       className: "info-page-table-body",
       children: !isLayout && tableElement
     }), currentMoveColumnIndex !== null && resizeGuideStyle && /*#__PURE__*/jsx("span", {
-      className: style$3['column-resize-guide'],
+      className: style$4['column-resize-guide'],
       style: resizeGuideStyle,
       "aria-hidden": true
     })]
@@ -2343,7 +2488,7 @@ const renderHeaderCellContent = (column, {
   colsSize
 }) => {
   const titleNode = renderColumnTitle(column.title, column, sortRender);
-  const contentClassName = style$4['col-content'];
+  const contentClassName = style$5['col-content'];
   if (widthBased) {
     return /*#__PURE__*/jsx("span", {
       className: contentClassName,
@@ -2373,9 +2518,9 @@ const renderHeaderGridCells = ({
   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'),
+      className: classnames(style$5['col'], style$5['col-fixed'], style$5['header-cell'], 'info-page-table-col'),
       children: /*#__PURE__*/jsx("span", {
-        className: classnames(style$4['col-content'], 'info-page-table-col-content'),
+        className: classnames(style$5['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, {
@@ -2413,7 +2558,7 @@ const renderHeaderGridCells = ({
     });
     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'),
+      className: classnames(style$5['col'], fillRemaining ? style$5['col-width-fill'] : widthBased && style$5['col-width-based'], style$5['header-cell'], 'info-page-table-col'),
       children: renderHeaderCellContent(column, {
         sortRender,
         widthBased,
@@ -2425,7 +2570,7 @@ const renderHeaderGridCells = ({
   });
   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')
+      className: classnames(style$5['col'], style$5['single-checked'], style$5['header-cell'], 'info-page-table-col')
     }, "__radio__"));
   }
   return cells;
@@ -2446,7 +2591,7 @@ const Header = p => {
   }, p);
   return /*#__PURE__*/jsx("div", {
     style: headerStyle,
-    className: classnames(style$4['header'], 'info-page-table-header'),
+    className: classnames(style$5['header'], 'info-page-table-header'),
     children: renderHeaderGridCells({
       dataSource,
       columns,
@@ -2564,10 +2709,10 @@ const TableView = p => {
       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 rowClassName = classnames(style$5['body'], style$5['body-cell'], style$5['body-row'], 'info-page-table-row', {
+        [style$5['is-selected-all']]: rowSelection == null ? void 0 : rowSelection.isSelectedAll,
+        [style$5['is-selected']]: isChecked,
+        [style$5['is-disabled']]: item.disabled
       });
       const onSelectionChange = () => handleRowClick(item, {
         dataSource,
@@ -2578,9 +2723,9 @@ const TableView = p => {
       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'),
+          className: classnames(style$5['col'], style$5['col-fixed'], 'info-page-table-col'),
           children: /*#__PURE__*/jsx("span", {
-            className: classnames(style$4['col-content'], 'info-page-table-col-content'),
+            className: classnames(style$5['col-content'], 'info-page-table-col-content'),
             children: /*#__PURE__*/jsx(Checkbox, {
               disabled: item.disabled || rowSelection.isSelectedAll,
               checked: rowSelection.isSelectedAll && !item.disabled || isChecked,
@@ -2603,20 +2748,20 @@ const TableView = p => {
         });
         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'),
+          className: classnames(style$5['col'], fillRemaining ? style$5['col-width-fill'] : widthBased && style$5['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']
+          }), columnValue, style$5['col-content']) : /*#__PURE__*/jsx("span", {
+            className: style$5['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'),
+          className: classnames(style$5['col'], style$5['single-checked'], 'info-page-table-col'),
           onClick: onSelectionChange,
           children: isChecked && /*#__PURE__*/jsx(CheckOutlined, {})
         }, `${id}__radio__`));
@@ -2628,7 +2773,7 @@ const TableView = p => {
     });
   };
   const renderGrid = (dataSource, context) => /*#__PURE__*/jsxs("div", {
-    className: style$4['grid'],
+    className: style$5['grid'],
     style: {
       gridTemplateColumns
     },
@@ -2637,7 +2782,7 @@ const TableView = p => {
   const renderBody = (dataSource, context) => {
     if (!dataSource || dataSource.length === 0) {
       return /*#__PURE__*/jsx("div", {
-        className: style$4['empty'],
+        className: style$5['empty'],
         children: empty
       });
     }
@@ -2653,16 +2798,16 @@ const TableView = p => {
     }));
   }
   return /*#__PURE__*/jsx("div", _extends({}, others, {
-    className: classnames(style$4['table'], style$4['tableView'], 'info-page-table', className),
+    className: classnames(style$5['table'], style$5['tableView'], 'info-page-table', className),
     children: dataSource && dataSource.length > 0 ? renderGrid(dataSource, context) : /*#__PURE__*/jsxs(Fragment, {
       children: [/*#__PURE__*/jsx("div", {
-        className: style$4['grid'],
+        className: style$5['grid'],
         style: {
           gridTemplateColumns
         },
         children: renderHeaderGridCells(headerCellProps)
       }), /*#__PURE__*/jsx("div", {
-        className: style$4['empty'],
+        className: style$5['empty'],
         children: empty
       })]
     })
@@ -3349,6 +3494,7 @@ const TablePageInnerContent = withLocale(_ref => {
     dataSource: formatData.list,
     pagination: false,
     sticky,
+    getStickyContainer: getScrollContainer,
     className: classnames(className, {
       [style$1['table-in-toolbar']]: hasToolbar
     }),
@@ -3451,5 +3597,5 @@ const preset = 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 };
+export { RENDER_TYPE_NAMES, SIZE_NAMES, Table, TableView, TablePage as default, getColumnRender, getRenderTypeDimensions, getRenderTypeNames, getStatusType, getTagColor, globalParams, isOptionsColumn, parseRenderType, preset, renderStatusItem, renderTagItem, renderTagList, resolveColumn, resolveColumnDimensions, resolveColumns, resolveRenderType, sortDataSource, tableLocalApis, useSelectedRow, useSort, useTableConfig };
 //# sourceMappingURL=index.modern.js.map