@kne/table-page 0.1.0 → 0.1.2

package/dist/index.js

@@ -233,7 +233,8 @@ const formatView = (value, format, context) => {
 const globalParams = {
   renderType: null,
   renderTypeSize: {},
-  tagTypeColors: {}
+  tagTypeColors: {},
+  statusTypeColors: {}
 };
 
 const defaultRender = value => value;
@@ -263,19 +264,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] = react.useState(false);
+  const isClickable = Boolean(hover || primary || onClick);
+  if (!isClickable) {
     return /*#__PURE__*/jsxRuntime.jsx(Ellipsis, {
       ellipsis: ellipsis,
       children: value
@@ -283,16 +287,27 @@ const main = (value, {
   }
   const ellipsisConfig = typeof ellipsis === 'object' ? ellipsis : {};
   const showTooltip = ellipsis && ellipsisConfig.showTitle !== false;
-  const text = /*#__PURE__*/jsxRuntime.jsx("span", {
-    className: classnames__default["default"](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__*/jsxRuntime.jsx("span", {
+    className: classnames__default["default"](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) {
@@ -304,8 +319,16 @@ const main = (value, {
     children: text
   });
 };
+const main = (value, {
+  column,
+  dataSource
+} = {}) => /*#__PURE__*/jsxRuntime.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
@@ -314,7 +337,7 @@ const amount = (value, {
     ellipsis = true
   } = column || {};
   return /*#__PURE__*/jsxRuntime.jsx("span", {
-    className: style$6['amount'],
+    className: style$7['amount'],
     children: /*#__PURE__*/jsxRuntime.jsx(Ellipsis, {
       ellipsis: ellipsis,
       children: value
@@ -397,6 +420,71 @@ const tag = value => renderTagItem(value);
 
 const tagList = value => renderTagList(value);
 
+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') {
+    return Object.assign({}, item, {
+      text: item.text ?? item.children ?? item.label
+    });
+  }
+  return null;
+};
+const renderStatusItem = item => {
+  const statusItem = normalizeStatusItem(item);
+  if (!statusItem || statusItem.text == null) {
+    return null;
+  }
+  const {
+    text,
+    type,
+    status,
+    color,
+    children,
+    ...rest
+  } = statusItem;
+  return /*#__PURE__*/jsxRuntime.jsx(antd.Badge, {
+    status: status ?? color ?? getStatusType(type),
+    text: children ?? text,
+    ...rest
+  });
+};
+
+const status = value => renderStatusItem(value);
+
 const DEFAULT_SPLIT = ',';
 const normalizeListValue = value => {
   if (Array.isArray(value)) {
@@ -562,7 +650,7 @@ 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 normalizeOptionItem = (item, buttonClassName) => {
   if (item == null) {
@@ -611,15 +699,15 @@ const options = (value, {
   if (!Array.isArray(list) || list.length === 0) {
     return null;
   }
-  const wrapperClassName = classnames__default["default"](style$5['col-item'], style$5['options']);
-  const buttonClassName = classnames__default["default"](wrapperClassName, style$5['options-btn']);
+  const wrapperClassName = classnames__default["default"](style$6['col-item'], style$6['options']);
+  const buttonClassName = classnames__default["default"](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?.width);
   return /*#__PURE__*/jsxRuntime.jsx("div", {
-    className: classnames__default["default"](wrapperClassName, style$5['options-column']),
+    className: classnames__default["default"](wrapperClassName, style$6['options-column']),
     style: width > 0 ? {
       '--max-width': `${width}px`
     } : undefined,
@@ -642,6 +730,7 @@ const renderType = {
   amount,
   tag,
   tagList,
+  status,
   list,
   options,
   enum: enumRender,
@@ -679,6 +768,11 @@ const typeSize = {
     min: 100,
     max: 400
   },
+  status: {
+    width: 100,
+    min: 80,
+    max: 140
+  },
   tagList: {
     width: 300,
     min: 160,
@@ -988,9 +1082,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 _Object$assign = Object.assign({}, {
@@ -1077,7 +1171,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__*/jsxRuntime.jsx(Ellipsis, {
+      ellipsis: true,
+      children: title
+    });
+  }
+  return /*#__PURE__*/jsxRuntime.jsx("span", {
+    className: style$2['ellipsis'],
+    children: title
+  });
+};
 
 const sortArrayToMap = sort => new Map((sort || []).map(item => {
   return [item.name, item.sort];
@@ -1159,21 +1272,25 @@ 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__*/jsxRuntime.jsxs("span", {
-    className: classnames__default["default"](style$2['title'], style$2['has-sort']),
+    className: classnames__default["default"](style$3['title'], style$3['has-sort']),
     children: [/*#__PURE__*/jsxRuntime.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 = function (props) {
+  if (props === void 0) {
+    props = {};
+  }
   const _useControlValue = useControlValue({
       value: props.sort,
       defaultValue: props.defaultSort || [],
@@ -1202,7 +1319,7 @@ const useSort = props => {
       name = _ref4.name;
     const direction = mapSort.get(name);
     return /*#__PURE__*/jsxRuntime.jsxs("span", {
-      className: style$2['sort-btn'],
+      className: style$3['sort-btn'],
       onClick: e => {
         e.stopPropagation();
         setMapSort(sortMap => {
@@ -1225,12 +1342,12 @@ const useSort = props => {
         });
       },
       children: [/*#__PURE__*/jsxRuntime.jsx(icons.CaretUpOutlined, {
-        className: classnames__default["default"](style$2['sort-icon'], style$2['sort-up'], {
-          [style$2['active']]: direction === 'ASC'
+        className: classnames__default["default"](style$3['sort-icon'], style$3['sort-up'], {
+          [style$3['active']]: direction === 'ASC'
         })
       }), /*#__PURE__*/jsxRuntime.jsx(icons.CaretDownOutlined, {
-        className: classnames__default["default"](style$2['sort-icon'], style$2['sort-down'], {
-          [style$2['active']]: direction === 'DESC'
+        className: classnames__default["default"](style$3['sort-icon'], style$3['sort-down'], {
+          [style$3['active']]: direction === 'DESC'
         })
       })]
     });
@@ -1977,7 +2094,8 @@ const getColumnEllipsis = column => {
   return typeof column.ellipsis === 'object' ? column.ellipsis : true;
 };
 
-const _excluded$2 = ["className", "dataSource", "columns", "rowKey", "rowSelection", "valueIsEmpty", "emptyIsPlaceholder", "placeholder", "empty", "onRowSelect", "render", "context", "sticky", "headerStyle", "pagination", "sortRender", "name", "controllerOpen", "tableServerApis", "scroll", "summary"];
+const _excluded$2 = ["className", "dataSource", "columns", "rowKey", "rowSelection", "valueIsEmpty", "emptyIsPlaceholder", "placeholder", "empty", "onRowSelect", "render", "context", "sticky", "stickyOffset", "getStickyContainer", "headerStyle", "pagination", "sortRender", "name", "controllerOpen", "tableServerApis", "scroll", "summary"],
+  _excluded2$1 = ["getContainer"];
 const mapJustifyToAlign = justify => {
   if (justify === 'center') {
     return 'center';
@@ -2012,10 +2130,10 @@ const getColCellStyle = column => ({
   verticalAlign: column.align === 'middle' ? 'middle' : column.align === 'bottom' ? 'bottom' : 'top'
 });
 const getAntCellClassName = function () {
-  return classnames__default["default"](style$3['table-cell'], 'info-page-table-col', ...[].slice.call(arguments));
+  return classnames__default["default"](style$4['table-cell'], 'info-page-table-col', ...[].slice.call(arguments));
 };
 const wrapColContent = node => /*#__PURE__*/jsxRuntime.jsx("span", {
-  className: style$4['col-content'],
+  className: style$5['col-content'],
   children: node
 });
 const Table = p => {
@@ -2045,6 +2163,8 @@ const Table = p => {
     render = props.render,
     context = props.context,
     sticky = props.sticky,
+    stickyOffset = props.stickyOffset,
+    getStickyContainer = props.getStickyContainer,
     headerStyle = props.headerStyle,
     _props$pagination = props.pagination,
     pagination = _props$pagination === void 0 ? false : _props$pagination,
@@ -2140,7 +2260,7 @@ const Table = p => {
         key: colName,
         dataIndex: colName,
         title: /*#__PURE__*/jsxRuntime.jsx("span", {
-          className: style$4['col-content'],
+          className: style$5['col-content'],
           children: renderColumnTitle(title, column, sortRender)
         }),
         width: toAntdWidth(width),
@@ -2174,7 +2294,7 @@ const Table = p => {
             placeholder,
             dataSource: record,
             context
-          }), computedColumn, style$4['col-content']);
+          }), computedColumn, style$5['col-content']);
         }
       };
       if (!controllerOpen) {
@@ -2182,7 +2302,7 @@ const Table = p => {
       }
       const configProps = computedColumnProps(column, index, {
         title: /*#__PURE__*/jsxRuntime.jsx("span", {
-          className: style$4['col-content'],
+          className: style$5['col-content'],
           children: renderColumnTitle(title, column, sortRender)
         })
       });
@@ -2205,8 +2325,8 @@ const Table = p => {
         return {
           key: column.name,
           title: /*#__PURE__*/jsxRuntime.jsx("span", {
-            className: style$4['col-content'],
-            children: column.title
+            className: style$5['col-content'],
+            children: wrapColumnHeaderTitle(column.title)
           }),
           onHeaderCell: () => ({
             className: getAntCellClassName(),
@@ -2271,13 +2391,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]);
@@ -2292,6 +2412,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 = react.useMemo(() => {
+    if (!sticky) {
+      return undefined;
+    }
+    const config = typeof sticky === 'object' ? Object.assign({}, sticky) : {};
+    if (hasScrollY) {
+      const scrollSticky = _objectWithoutPropertiesLoose(config, _excluded2$1);
+      return Object.assign({
+        offsetHeader: 0
+      }, scrollSticky);
+    }
+    return Object.assign({
+      offsetHeader: 0
+    }, config, getStickyContainer ? {
+      getContainer: getStickyContainer
+    } : null);
+  }, [sticky, getStickyContainer, hasScrollY]);
+  const tableWrapperStyle = react.useMemo(() => {
+    if (!sticky || stickyOffset == null || hasScrollY) {
+      return undefined;
+    }
+    return {
+      '--sticky-offset': stickyOffset
+    };
+  }, [sticky, stickyOffset, hasScrollY]);
   const tableElement = /*#__PURE__*/jsxRuntime.jsx(antd.Table, _extends({}, others, {
     showHeader: true,
     dataSource: dataSource,
@@ -2302,57 +2448,57 @@ const Table = p => {
     summary: typeof summary === 'function' ? function (pageData) {
       return summary(pageData, ...[].slice.call(arguments, 1));
     } : undefined,
-    sticky: sticky ? {
-      offsetHeader: 0
-    } : undefined,
+    sticky: antdSticky,
     tableLayout: controllerOpen || hasFixedColumn ? 'fixed' : undefined,
     scroll: tableScroll,
     onHeaderRow: () => ({
-      className: classnames__default["default"](style$4['header'], 'info-page-table-header', {
-        [style$4['sticky']]: sticky && !hasFixedColumn
-      }),
+      className: classnames__default["default"](style$5['header'], 'info-page-table-header'),
       style: headerStyle
     }),
     locale: {
       emptyText: /*#__PURE__*/jsxRuntime.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__default["default"](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__default["default"](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__*/jsxRuntime.jsxs("div", {
     ref: tableRef,
-    className: classnames__default["default"](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__default["default"](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__*/jsxRuntime.jsx("div", {
       className: "info-page-table-body",
       children: !isLayout && tableElement
     }), currentMoveColumnIndex !== null && resizeGuideStyle && /*#__PURE__*/jsxRuntime.jsx("span", {
-      className: style$3['column-resize-guide'],
+      className: style$4['column-resize-guide'],
       style: resizeGuideStyle,
       "aria-hidden": true
     })]
@@ -2405,7 +2551,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__*/jsxRuntime.jsx("span", {
       className: contentClassName,
@@ -2435,9 +2581,9 @@ const renderHeaderGridCells = ({
   const cells = [];
   if (rowSelection?.type === 'checkbox') {
     cells.push(/*#__PURE__*/jsxRuntime.jsx("div", {
-      className: classnames__default["default"](style$4['col'], style$4['col-fixed'], style$4['header-cell'], 'info-page-table-col'),
+      className: classnames__default["default"](style$5['col'], style$5['col-fixed'], style$5['header-cell'], 'info-page-table-col'),
       children: /*#__PURE__*/jsxRuntime.jsx("span", {
-        className: classnames__default["default"](style$4['col-content'], 'info-page-table-col-content'),
+        className: classnames__default["default"](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__default["default"](item, typeof rowKey === 'function' ? rowKey(item) : rowKey)) > -1);
           return /*#__PURE__*/jsxRuntime.jsx(antd.Checkbox, {
@@ -2475,7 +2621,7 @@ const renderHeaderGridCells = ({
     });
     cells.push(/*#__PURE__*/jsxRuntime.jsx("div", {
       style: columnStyle,
-      className: classnames__default["default"](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__default["default"](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,
@@ -2487,7 +2633,7 @@ const renderHeaderGridCells = ({
   });
   if (rowSelection?.type === 'radio') {
     cells.push(/*#__PURE__*/jsxRuntime.jsx("div", {
-      className: classnames__default["default"](style$4['col'], style$4['single-checked'], style$4['header-cell'], 'info-page-table-col')
+      className: classnames__default["default"](style$5['col'], style$5['single-checked'], style$5['header-cell'], 'info-page-table-col')
     }, "__radio__"));
   }
   return cells;
@@ -2508,7 +2654,7 @@ const Header = p => {
   }, p);
   return /*#__PURE__*/jsxRuntime.jsx("div", {
     style: headerStyle,
-    className: classnames__default["default"](style$4['header'], 'info-page-table-header'),
+    className: classnames__default["default"](style$5['header'], 'info-page-table-header'),
     children: renderHeaderGridCells({
       dataSource,
       columns,
@@ -2625,10 +2771,10 @@ const TableView = p => {
       const columnMap = columnsValue.reduce((result, column) => Object.assign(result, {
         [column.name]: column
       }), {});
-      const rowClassName = classnames__default["default"](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__default["default"](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,
@@ -2639,9 +2785,9 @@ const TableView = p => {
       const cells = [];
       if ((rowSelection == null ? void 0 : rowSelection.type) === 'checkbox') {
         cells.push(/*#__PURE__*/jsxRuntime.jsx("div", {
-          className: classnames__default["default"](style$4['col'], style$4['col-fixed'], 'info-page-table-col'),
+          className: classnames__default["default"](style$5['col'], style$5['col-fixed'], 'info-page-table-col'),
           children: /*#__PURE__*/jsxRuntime.jsx("span", {
-            className: classnames__default["default"](style$4['col-content'], 'info-page-table-col-content'),
+            className: classnames__default["default"](style$5['col-content'], 'info-page-table-col-content'),
             children: /*#__PURE__*/jsxRuntime.jsx(antd.Checkbox, {
               disabled: item.disabled || rowSelection.isSelectedAll,
               checked: rowSelection.isSelectedAll && !item.disabled || isChecked,
@@ -2663,20 +2809,20 @@ const TableView = p => {
           columnStyle = _getColumnLayout.style;
         cells.push(/*#__PURE__*/jsxRuntime.jsx("div", {
           style: columnStyle,
-          className: classnames__default["default"](style$4['col'], fillRemaining ? style$4['col-width-fill'] : widthBased && style$4['col-width-based'], 'info-page-table-col'),
+          className: classnames__default["default"](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__*/jsxRuntime.jsx("span", {
-            className: style$4['col-content']
+          }), columnValue, style$5['col-content']) : /*#__PURE__*/jsxRuntime.jsx("span", {
+            className: style$5['col-content']
           })
         }, id + "-" + column.name));
       });
       if ((rowSelection == null ? void 0 : rowSelection.type) === 'radio') {
         cells.push(/*#__PURE__*/jsxRuntime.jsx("div", {
-          className: classnames__default["default"](style$4['col'], style$4['single-checked'], 'info-page-table-col'),
+          className: classnames__default["default"](style$5['col'], style$5['single-checked'], 'info-page-table-col'),
           onClick: onSelectionChange,
           children: isChecked && /*#__PURE__*/jsxRuntime.jsx(icons.CheckOutlined, {})
         }, id + "__radio__"));
@@ -2688,7 +2834,7 @@ const TableView = p => {
     });
   };
   const renderGrid = (dataSource, context) => /*#__PURE__*/jsxRuntime.jsxs("div", {
-    className: style$4['grid'],
+    className: style$5['grid'],
     style: {
       gridTemplateColumns
     },
@@ -2697,7 +2843,7 @@ const TableView = p => {
   const renderBody = (dataSource, context) => {
     if (!dataSource || dataSource.length === 0) {
       return /*#__PURE__*/jsxRuntime.jsx("div", {
-        className: style$4['empty'],
+        className: style$5['empty'],
         children: empty
       });
     }
@@ -2713,16 +2859,16 @@ const TableView = p => {
     }));
   }
   return /*#__PURE__*/jsxRuntime.jsx("div", _extends({}, others, {
-    className: classnames__default["default"](style$4['table'], style$4['tableView'], 'info-page-table', className),
+    className: classnames__default["default"](style$5['table'], style$5['tableView'], 'info-page-table', className),
     children: dataSource && dataSource.length > 0 ? renderGrid(dataSource, context) : /*#__PURE__*/jsxRuntime.jsxs(jsxRuntime.Fragment, {
       children: [/*#__PURE__*/jsxRuntime.jsx("div", {
-        className: style$4['grid'],
+        className: style$5['grid'],
         style: {
           gridTemplateColumns
         },
         children: renderHeaderGridCells(headerCellProps)
       }), /*#__PURE__*/jsxRuntime.jsx("div", {
-        className: style$4['empty'],
+        className: style$5['empty'],
         children: empty
       })]
     })
@@ -3401,20 +3547,23 @@ const TablePageInnerContent = withLocale(_ref => {
     dataFormat,
     pagination
   }), [data, fetchProps, requestParams, refresh, reload, loadMore, send, dataFormat, pagination]);
+  const tableContext = _extends({}, columnRenderProps, {
+    requestParams,
+    fetchProps,
+    data
+  });
   const tableProps = _extends({}, props, {
     rowSelection,
     dataSource: formatData.list,
     pagination: false,
     sticky,
+    getStickyContainer: getScrollContainer,
     className: classnames__default["default"](className, {
       [style$1['table-in-toolbar']]: hasToolbar
     }),
     columns: resolvedColumns,
-    columnRenderProps: _extends({}, columnRenderProps, {
-      requestParams,
-      fetchProps,
-      data
-    }),
+    context: tableContext,
+    columnRenderProps: tableContext,
     summary: typeof summary === 'function' ? function (pageData) {
       return summary(Object.assign({}, fetchContext, {
         pageData
@@ -3520,11 +3669,13 @@ exports["default"] = TablePage;
 exports.getColumnRender = getColumnRender;
 exports.getRenderTypeDimensions = getRenderTypeDimensions;
 exports.getRenderTypeNames = getRenderTypeNames;
+exports.getStatusType = getStatusType;
 exports.getTagColor = getTagColor;
 exports.globalParams = globalParams;
 exports.isOptionsColumn = isOptionsColumn;
 exports.parseRenderType = parseRenderType;
 exports.preset = preset;
+exports.renderStatusItem = renderStatusItem;
 exports.renderTagItem = renderTagItem;
 exports.renderTagList = renderTagList;
 exports.resolveColumn = resolveColumn;