@douyinfe/semi-ui 2.2.2 → 2.4.0-beta.0

package/lib/es/steps/fillStep.js

@@ -19,7 +19,8 @@ const FillStep = props => {
     onClick,
     icon,
     onChange,
-    stepNumber
+    stepNumber,
+    onKeyDown
   } = props;
 
   const renderIcon = () => {
@@ -81,17 +82,31 @@ const FillStep = props => {
     onChange();
   };
 
+  const handleKeyDown = e => {
+    if (e.key === 'Enter') {
+      if (_isFunction(onKeyDown)) {
+        onKeyDown(e);
+      }
+
+      onChange();
+    }
+  };
+
   return /*#__PURE__*/React.createElement("div", {
+    role: props["role"],
+    "aria-label": props["aria-label"],
+    "aria-current": "step",
+    tabIndex: 0,
     className: classnames({
-      [className]: Boolean(className),
       [prefixCls]: true,
       [_concatInstanceProperty(_context = "".concat(prefixCls, "-")).call(_context, status)]: Boolean(status),
       ["".concat(prefixCls, "-clickable")]: onClick
-    }),
+    }, className),
     style: style,
     onClick: e => {
       handleClick(e);
-    }
+    },
+    onKeyDown: handleKeyDown
   }, renderIcon(), /*#__PURE__*/React.createElement("div", {
     className: "".concat(prefixCls, "-content")
   }, /*#__PURE__*/React.createElement("div", {

package/lib/es/steps/fillSteps.d.ts

@@ -12,6 +12,7 @@ export interface FillStepsProps {
     style?: React.CSSProperties;
     children?: React.ReactNode;
     onChange?: (current: number) => void;
+    "aria-label"?: string;
 }
 declare const Steps: {
     (props: FillStepsProps): JSX.Element;

package/lib/es/steps/fillSteps.js

@@ -76,7 +76,8 @@ const Steps = props => {
   });
   return /*#__PURE__*/React.createElement("div", {
     className: wrapperCls,
-    style: style
+    style: style,
+    "aria-label": props["aria-label"]
   }, /*#__PURE__*/React.createElement(Row, {
     type: "flex",
     justify: "start"

package/lib/es/steps/navStep.d.ts

@@ -10,6 +10,9 @@ export interface NavStepProps {
     prefixCls?: string;
     onChange?: () => void;
     onClick?: React.MouseEventHandler<HTMLDivElement>;
+    onKeyDown?: React.KeyboardEventHandler<HTMLDivElement>;
+    "role"?: React.AriaRole;
+    "aria-label"?: React.AriaAttributes["aria-label"];
 }
 declare const NavStep: {
     (props: NavStepProps): JSX.Element;

package/lib/es/steps/navStep.js

@@ -1,19 +1,4 @@
 import _isFunction from "lodash/isFunction";
-import _indexOfInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance/index-of";
-import _Object$getOwnPropertySymbols from "@babel/runtime-corejs3/core-js-stable/object/get-own-property-symbols";
-import _Object$assign from "@babel/runtime-corejs3/core-js-stable/object/assign";
-
-var __rest = this && this.__rest || function (s, e) {
-  var t = {};
-
-  for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && _indexOfInstanceProperty(e).call(e, p) < 0) t[p] = s[p];
-
-  if (s != null && typeof _Object$getOwnPropertySymbols === "function") for (var i = 0, p = _Object$getOwnPropertySymbols(s); i < p.length; i++) {
-    if (_indexOfInstanceProperty(e).call(e, p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i])) t[p[i]] = s[p[i]];
-  }
-  return t;
-};
-
 import React from 'react';
 import PropTypes from 'prop-types';
 import classnames from 'classnames';
@@ -30,13 +15,12 @@ const NavStep = props => {
     index,
     total,
     onClick,
+    onKeyDown,
     onChange
-  } = props,
-        restProps = __rest(props, ["prefixCls", "className", "title", "style", "active", "index", "total", "onClick", "onChange"]);
-
-  const classString = classnames(prefixCls, className, {
+  } = props;
+  const classString = classnames(prefixCls, {
     ["".concat(prefixCls, "-active")]: active
-  });
+  }, className);
 
   const handleClick = e => {
     if (_isFunction(onClick)) {
@@ -46,11 +30,26 @@ const NavStep = props => {
     onChange();
   };
 
-  return /*#__PURE__*/React.createElement("div", _Object$assign({}, restProps, {
+  const handleKeyDown = e => {
+    if (e.key === 'Enter') {
+      if (_isFunction(onKeyDown)) {
+        onKeyDown(e);
+      }
+
+      onChange();
+    }
+  };
+
+  return /*#__PURE__*/React.createElement("div", {
+    role: props["role"],
+    "aria-label": props["aria-label"],
+    "aria-current": "step",
+    tabIndex: 0,
     className: classString,
     style: style,
-    onClick: e => handleClick(e)
-  }), /*#__PURE__*/React.createElement("div", {
+    onClick: e => handleClick(e),
+    onKeyDown: handleKeyDown
+  }, /*#__PURE__*/React.createElement("div", {
     className: "".concat(prefixCls, "-container")
   }, /*#__PURE__*/React.createElement("div", {
     className: "".concat(prefixCls, "-content")

package/lib/es/steps/navSteps.d.ts

@@ -10,6 +10,7 @@ export interface NavStepsProps {
     size?: Size;
     children?: React.ReactNode;
     onChange?: (current: number) => void;
+    "aria-label"?: string;
 }
 declare const Steps: {
     (props: NavStepsProps): JSX.Element;

package/lib/es/steps/navSteps.js

@@ -49,12 +49,13 @@ const Steps = props => {
     });
 
     return content;
-  }, [children, prefixCls, current, size]);
+  }, [children, prefixCls, current, size, initial, onChange]);
   const wrapperCls = cls(className, {
     ["".concat(prefixCls, "-nav")]: true,
     [_concatInstanceProperty(_context2 = "".concat(prefixCls, "-")).call(_context2, size)]: size !== 'default'
   });
   return /*#__PURE__*/React.createElement("div", {
+    "aria-label": props["aria-label"],
     className: wrapperCls,
     style: style
   }, inner);

package/lib/es/switch/index.d.ts

@@ -4,6 +4,11 @@ import { SwitchAdapter } from '@douyinfe/semi-foundation/lib/es/switch/foundatio
 import BaseComponent from '../_base/baseComponent';
 import '@douyinfe/semi-foundation/lib/es/switch/switch.css';
 export interface SwitchProps {
+    'aria-label'?: React.AriaAttributes['aria-label'];
+    'aria-describedby'?: React.AriaAttributes['aria-describedby'];
+    'aria-errormessage'?: React.AriaAttributes['aria-errormessage'];
+    'aria-invalid'?: React.AriaAttributes['aria-invalid'];
+    'aria-labelledby'?: React.AriaAttributes['aria-labelledby'];
     defaultChecked?: boolean;
     checked?: boolean;
     disabled?: boolean;
@@ -16,6 +21,7 @@ export interface SwitchProps {
     size?: 'large' | 'default' | 'small';
     checkedText?: React.ReactNode;
     uncheckedText?: React.ReactNode;
+    id?: string;
 }
 export interface SwitchState {
     nativeControlChecked: boolean;
@@ -23,6 +29,11 @@ export interface SwitchState {
 }
 declare class Switch extends BaseComponent<SwitchProps, SwitchState> {
     static propTypes: {
+        'aria-label': PropTypes.Requireable<string>;
+        'aria-labelledby': PropTypes.Requireable<string>;
+        'aria-invalid': PropTypes.Requireable<boolean>;
+        'aria-errormessage': PropTypes.Requireable<string>;
+        'aria-describedby': PropTypes.Requireable<string>;
         className: PropTypes.Requireable<string>;
         checked: PropTypes.Requireable<boolean>;
         checkedText: PropTypes.Requireable<PropTypes.ReactNodeLike>;
@@ -35,6 +46,7 @@ declare class Switch extends BaseComponent<SwitchProps, SwitchState> {
         style: PropTypes.Requireable<object>;
         size: PropTypes.Requireable<"default" | "small" | "large">;
         uncheckedText: PropTypes.Requireable<PropTypes.ReactNodeLike>;
+        id: PropTypes.Requireable<string>;
     };
     static defaultProps: Partial<SwitchProps>;
     private switchRef;

package/lib/es/switch/index.js

@@ -1,7 +1,7 @@
 import _noop from "lodash/noop";
 import _Object$assign from "@babel/runtime-corejs3/core-js-stable/object/assign";
 
-/* eslint-disable max-len */
+/* eslint-disable max-len, jsx-a11y/role-supports-aria-props */
 import React from 'react';
 import cls from 'classnames';
 import PropTypes from 'prop-types';
@@ -71,7 +71,8 @@ class Switch extends BaseComponent {
       size,
       checkedText,
       uncheckedText,
-      loading
+      loading,
+      id
     } = this.props;
     const wrapperCls = cls(className, {
       [cssClasses.PREFIX]: true,
@@ -99,13 +100,21 @@ class Switch extends BaseComponent {
       wrapperClassName: cssClasses.LOADING_SPIN,
       size: size === 'default' ? 'middle' : size
     }) : /*#__PURE__*/React.createElement("div", {
-      className: cssClasses.KNOB
+      className: cssClasses.KNOB,
+      "aria-hidden": true
     }), showCheckedText ? /*#__PURE__*/React.createElement("div", {
       className: cssClasses.CHECKED_TEXT
     }, checkedText) : null, showUncheckedText ? /*#__PURE__*/React.createElement("div", {
       className: cssClasses.UNCHECKED_TEXT
     }, uncheckedText) : null, /*#__PURE__*/React.createElement("input", _Object$assign({}, switchProps, {
       ref: this.switchRef,
+      id: id,
+      "aria-checked": nativeControlChecked,
+      "aria-invalid": this.props['aria-invalid'],
+      "aria-errormessage": this.props['aria-errormessage'],
+      "aria-label": this.props['aria-label'],
+      "aria-labelledby": this.props['aria-labelledby'],
+      "aria-describedby": this.props["aria-describedby"],
       onChange: e => this.foundation.handleChange(e.target.checked, e)
     })));
   }
@@ -113,6 +122,11 @@ class Switch extends BaseComponent {
 }
 
 Switch.propTypes = {
+  'aria-label': PropTypes.string,
+  'aria-labelledby': PropTypes.string,
+  'aria-invalid': PropTypes.bool,
+  'aria-errormessage': PropTypes.string,
+  'aria-describedby': PropTypes.string,
   className: PropTypes.string,
   checked: PropTypes.bool,
   checkedText: PropTypes.node,
@@ -124,7 +138,8 @@ Switch.propTypes = {
   onMouseLeave: PropTypes.func,
   style: PropTypes.object,
   size: PropTypes.oneOf(strings.SIZE_MAP),
-  uncheckedText: PropTypes.node
+  uncheckedText: PropTypes.node,
+  id: PropTypes.string
 };
 Switch.defaultProps = {
   disabled: false,

package/lib/es/table/Body/BaseRow.js

@@ -182,6 +182,7 @@ export default class TableRow extends BaseComponent {
       if (isExpandedColumn(column) && !displayExpandedColumn) {
         cells.push( /*#__PURE__*/React.createElement(TableCell, {
           key: columnIndex,
+          colIndex: columnIndex,
           isSection: isSection
         }));
       } else if (!isScrollbarColumn(column)) {
@@ -191,7 +192,9 @@ export default class TableRow extends BaseComponent {
           diyProps.width = _get(cellWidths, columnIndex);
         }
 
-        cells.push( /*#__PURE__*/React.createElement(TableCell, _Object$assign({}, expandableProps, diyProps, {
+        cells.push( /*#__PURE__*/React.createElement(TableCell, _Object$assign({
+          colIndex: columnIndex
+        }, expandableProps, diyProps, {
           hideExpandedColumn: hideExpandedColumn,
           indentSize: indentSize,
           isSection: isSection,
@@ -230,7 +233,11 @@ export default class TableRow extends BaseComponent {
       replaceClassName,
       record,
       hovered,
-      expanded
+      expanded,
+      expandableRow,
+      level,
+      expandedRow,
+      isSection
     } = this.props;
     const BodyRow = components.body.row;
 
@@ -250,7 +257,32 @@ export default class TableRow extends BaseComponent {
       ["".concat(prefixCls, "-row-expanded")]: expanded,
       ["".concat(prefixCls, "-row-hovered")]: hovered
     }, customClassName);
-    return /*#__PURE__*/React.createElement(BodyRow, _Object$assign({}, rowProps, {
+    const ariaProps = {};
+
+    if (typeof index === 'number') {
+      ariaProps['aria-rowindex'] = index + 1;
+    }
+
+    if (expandableRow) {
+      ariaProps['aria-expanded'] = expanded;
+    } // if row is expandedRow, set it's level to 2 
+
+
+    if (expanded || expandedRow) {
+      ariaProps['aria-level'] = 2;
+    }
+
+    if (typeof level === 'number') {
+      ariaProps['aria-level'] = level + 1;
+    }
+
+    if (isSection) {
+      ariaProps['aria-level'] = 1;
+    }
+
+    return /*#__PURE__*/React.createElement(BodyRow, _Object$assign({
+      role: "row"
+    }, ariaProps, rowProps, {
       style: baseRowStyle,
       className: rowCls,
       ref: this._cacheNode,

package/lib/es/table/Body/index.js

@@ -1,3 +1,4 @@
+import _isFunction from "lodash/isFunction";
 import _isNull from "lodash/isNull";
 import _pick from "lodash/pick";
 import _isEqual from "lodash/isEqual";
@@ -37,7 +38,7 @@ import React from 'react';
 import PropTypes from 'prop-types';
 import classnames from 'classnames';
 import { VariableSizeList as List } from 'react-window';
-import { arrayAdd, getRecordKey, isExpanded, isSelected, isDisabled, getRecord, genExpandedRowKey, getDefaultVirtualizedRowConfig } from '@douyinfe/semi-foundation/lib/es/table/utils';
+import { arrayAdd, getRecordKey, isExpanded, isSelected, isDisabled, getRecord, genExpandedRowKey, getDefaultVirtualizedRowConfig, isTreeTable } from '@douyinfe/semi-foundation/lib/es/table/utils';
 import BodyFoundation from '@douyinfe/semi-foundation/lib/es/table/bodyFoundation';
 import { strings } from '@douyinfe/semi-foundation/lib/es/table/constants';
 import BaseComponent from '../../_base/baseComponent';
@@ -494,7 +495,8 @@ class Body extends BaseComponent {
         includeHeader,
         dataSource,
         onScroll,
-        groups
+        groups,
+        expandedRowRender
       } = this.props;
 
       const x = _get(scroll, 'x');
@@ -538,6 +540,11 @@ class Body extends BaseComponent {
         onWheel: handleWheel,
         onScroll: handleBodyScroll
       }, /*#__PURE__*/React.createElement(Table, {
+        role: _isMap(groups) || _isFunction(expandedRowRender) || isTreeTable({
+          dataSource
+        }) ? 'treegrid' : 'grid',
+        "aria-rowcount": dataSource && dataSource.length,
+        "aria-colcount": columns && columns.length,
         style: tableStyle,
         className: classnames(prefixCls, {
           ["".concat(prefixCls, "-fixed")]: anyColumnFixed

package/lib/es/table/ColumnFilter.js

@@ -154,6 +154,10 @@ export default function ColumnFilter() {
     iconElem = /*#__PURE__*/React.createElement("div", {
       className: finalCls
     }, /*#__PURE__*/React.createElement(IconFilter, {
+      role: "button",
+      "aria-label": "Filter data with this column",
+      "aria-haspopup": "listbox",
+      tabIndex: -1,
       size: "small"
     }));
   }

package/lib/es/table/ColumnSelection.d.ts

@@ -1,3 +1,4 @@
+import React from 'react';
 import BaseComponent from '../_base/baseComponent';
 import PropTypes from 'prop-types';
 import { TableSelectionCellAdapter, TableSelectionCellEvent } from '@douyinfe/semi-foundation/lib/es/table/tableSelectionCellFoundation';
@@ -12,6 +13,7 @@ export interface TableSelectionCellProps {
     indeterminate?: boolean;
     prefixCls?: string;
     className?: string;
+    'aria-label'?: React.AriaAttributes['aria-label'];
 }
 /**
  * render selection cell
@@ -27,6 +29,7 @@ export default class TableSelectionCell extends BaseComponent<TableSelectionCell
         indeterminate: PropTypes.Requireable<boolean>;
         prefixCls: PropTypes.Requireable<string>;
         className: PropTypes.Requireable<string>;
+        'aria-label': PropTypes.Requireable<string>;
     };
     static defaultProps: {
         disabled: boolean;

package/lib/es/table/ColumnSelection.js

@@ -41,6 +41,7 @@ export default class TableSelectionCell extends BaseComponent {
       prefixCls,
       className
     } = this.props;
+    const ariaLabel = this.props['aria-label'];
     let checkboxProps = {
       onChange: this.handleChange,
       disabled,
@@ -57,7 +58,9 @@ export default class TableSelectionCell extends BaseComponent {
     }, className);
     return /*#__PURE__*/React.createElement("span", {
       className: wrapCls
-    }, /*#__PURE__*/React.createElement(Checkbox, _Object$assign({}, checkboxProps)));
+    }, /*#__PURE__*/React.createElement(Checkbox, _Object$assign({
+      "aria-label": ariaLabel
+    }, checkboxProps)));
   }
 
 }
@@ -70,7 +73,8 @@ TableSelectionCell.propTypes = {
   disabled: PropTypes.bool,
   indeterminate: PropTypes.bool,
   prefixCls: PropTypes.string,
-  className: PropTypes.string
+  className: PropTypes.string,
+  'aria-label': PropTypes.string
 };
 TableSelectionCell.defaultProps = {
   disabled: false,

package/lib/es/table/ColumnSorter.js

@@ -1,9 +1,11 @@
 import _noop from "lodash/noop";
+import _Object$assign from "@babel/runtime-corejs3/core-js-stable/object/assign";
 import React, { PureComponent } from 'react';
 import PropTypes from 'prop-types';
 import cls from 'classnames';
 import { IconCaretup, IconCaretdown } from '@douyinfe/semi-icons';
 import { cssClasses, strings } from '@douyinfe/semi-foundation/lib/es/table/constants';
+import isEnterPress from '@douyinfe/semi-foundation/lib/es/utils/isEnterPress';
 export default class ColumnSorter extends PureComponent {
   render() {
     const {
@@ -19,11 +21,23 @@ export default class ColumnSorter extends PureComponent {
     const downCls = cls("".concat(prefixCls, "-column-sorter-down"), {
       on: sortOrder === strings.SORT_DIRECTIONS[1]
     });
-    return /*#__PURE__*/React.createElement("div", {
+    const ariaProps = {
+      /**
+       * Set 'aria-sort' to aria-columnheader is difficult, so set 'aria-label' about sort info to sorter
+       * reference: https://developer.mozilla.org/en-US/docs/Web/API/Element/ariaSort
+       */
+      'aria-label': "Current sort order is ".concat(sortOrder ? "".concat(sortOrder, "ing") : 'none'),
+      'aria-roledescription': 'Sort data with this column'
+    };
+    return /*#__PURE__*/React.createElement("div", _Object$assign({
+      role: 'button'
+    }, ariaProps, {
+      tabIndex: -1,
       style: style,
       className: "".concat(prefixCls, "-column-sorter"),
-      onClick: onClick
-    }, /*#__PURE__*/React.createElement("span", {
+      onClick: onClick,
+      onKeyPress: e => isEnterPress(e) && onClick(e)
+    }), /*#__PURE__*/React.createElement("span", {
       className: "".concat(upCls)
     }, /*#__PURE__*/React.createElement(IconCaretup, {
       size: iconBtnSize

package/lib/es/table/CustomExpandIcon.js

@@ -5,6 +5,7 @@ import React, { useCallback } from 'react';
 import PropTypes from 'prop-types';
 import { IconChevronRight, IconChevronDown, IconTreeTriangleDown, IconTreeTriangleRight } from '@douyinfe/semi-icons';
 import { cssClasses } from '@douyinfe/semi-foundation/lib/es/table/constants';
+import isEnterPress from '@douyinfe/semi-foundation/lib/es/utils/isEnterPress';
 import Rotate from '../motions/Rotate';
 /**
  * render expand icon
@@ -51,10 +52,14 @@ export default function CustomExpandIcon(props) {
   }
 
   return /*#__PURE__*/React.createElement("span", {
+    role: "button",
+    "aria-label": "Expand this row",
+    tabIndex: -1,
     onClick: handleClick,
     onMouseEnter: onMouseEnter,
     onMouseLeave: onMouseLeave,
-    className: "".concat(prefixCls, "-expand-icon")
+    className: "".concat(prefixCls, "-expand-icon"),
+    onKeyPress: e => isEnterPress(e) && handleClick(e)
   }, icon);
 }
 CustomExpandIcon.propTypes = {

package/lib/es/table/Table.d.ts

@@ -31,6 +31,7 @@ export interface NormalTableState<RecordType extends Record<string, any> = Data>
     bodyHasScrollBar?: boolean;
     prePropRowSelection?: TableStateRowSelection<RecordType>;
     tableWidth?: number;
+    prePagination?: Pagination;
 }
 export declare type TableStateRowSelection<RecordType extends Record<string, any> = Data> = (RowSelectionProps<RecordType> & {
     selectedRowKeysSet?: Set<(string | number)>;
@@ -229,6 +230,7 @@ declare class Table<RecordType extends Record<string, any>> extends BaseComponen
     /**
      * render pagination
      * @param {object} pagination
+     * @param {object} propRenderPagination
      */
     renderPagination: (pagination: TablePaginationProps, propRenderPagination: RenderPagination) => JSX.Element;
     renderTitle: (props?: {

package/lib/es/table/Table.js

@@ -335,6 +335,7 @@ class Table extends BaseComponent {
           const hasRowSelected = _this.foundation.hasRowSelected(selectedRowKeys, allRowKeysSet);
 
           return /*#__PURE__*/React.createElement(ColumnSelection, {
+            "aria-label": "".concat(allIsSelected ? 'Deselect' : 'Select', " all rows"),
             disabled: disabled,
             key: columnKey,
             selected: allIsSelected,
@@ -351,6 +352,7 @@ class Table extends BaseComponent {
           const checkboxPropsFn = () => typeof getCheckboxProps === 'function' ? getCheckboxProps(record) : {};
 
           return /*#__PURE__*/React.createElement(ColumnSelection, {
+            "aria-label": "".concat(selected ? 'Deselect' : 'Select', " this row"),
             getCheckboxProps: checkboxPropsFn,
             selected: selected,
             onChange: (status, e) => _this.toggleSelectRow(status, key, e)
@@ -535,6 +537,7 @@ class Table extends BaseComponent {
     /**
      * render pagination
      * @param {object} pagination
+     * @param {object} propRenderPagination
      */
 
 
@@ -841,7 +844,8 @@ class Table extends BaseComponent {
       disabledRowKeysSet: new _Set(),
       headWidths: [],
       bodyHasScrollBar: false,
-      prePropRowSelection: undefined
+      prePropRowSelection: undefined,
+      prePagination: undefined
     };
     this.rootWrapRef = /*#__PURE__*/createRef();
     this.wrapRef = /*#__PURE__*/createRef(); // table's outside wrap
@@ -1081,7 +1085,8 @@ class Table extends BaseComponent {
       rowSelection,
       dataSource,
       childrenRecordName,
-      rowKey
+      rowKey,
+      pagination
     } = props;
     props.columns && props.children && logger.warn('columns should not given by object and children at the same time');
 
@@ -1136,6 +1141,21 @@ class Table extends BaseComponent {
       willUpdateStates.prePropRowSelection = rowSelection;
     }
 
+    if (pagination !== state.prePagination) {
+      let newPagination = {};
+
+      if (_isObject(state.pagination)) {
+        newPagination = _Object$assign(_Object$assign({}, newPagination), state.pagination);
+      }
+
+      if (_isObject(pagination)) {
+        newPagination = _Object$assign(_Object$assign({}, newPagination), pagination);
+      }
+
+      willUpdateStates.pagination = newPagination;
+      willUpdateStates.prePagination = pagination;
+    }
+
     return willUpdateStates;
   }
 
@@ -1151,15 +1171,16 @@ class Table extends BaseComponent {
 
   componentDidUpdate(prevProps, prevState) {
     const {
-      pagination,
       dataSource,
       expandedRowKeys,
       expandAllRows,
       expandAllGroupRows,
       virtualized,
-      components
+      components,
+      pagination: propsPagination
     } = this.props;
     const {
+      pagination: statePagination,
       queries: stateQueries,
       cachedColumns: stateCachedColumns,
       cachedChildren: stateCachedChildren,
@@ -1203,11 +1224,6 @@ class Table extends BaseComponent {
       this.foundation.initExpandedRowKeys({
         groups: stateGroups
       });
-    } // Update pagination
-
-
-    if (pagination !== prevProps.pagination) {
-      states.pagination = _isObject(pagination) ? _Object$assign({}, pagination) : pagination;
     }
     /**
      * After dataSource is updated || (cachedColumns || cachedChildren updated)
@@ -1224,23 +1240,26 @@ class Table extends BaseComponent {
       this.foundation.setCachedFilteredSortedDataSource(filteredSortedDataSource);
       states.dataSource = filteredSortedDataSource;
 
-      if (pagination === prevProps.pagination) {
-        states.pagination = _isObject(pagination) ? _Object$assign({}, pagination) : pagination;
-      }
-
       if (this.props.groupBy) {
         states.groups = null;
       }
+    } // when dataSource has change, should reset currentPage
+
+
+    if (dataSource !== prevProps.dataSource) {
+      states.pagination = _isObject(statePagination) ? _Object$assign(_Object$assign({}, statePagination), {
+        currentPage: _isObject(propsPagination) && propsPagination.currentPage ? propsPagination.currentPage : 1
+      }) : statePagination;
     }
 
     if (_Object$keys(states).length) {
       const {
         // eslint-disable-next-line @typescript-eslint/no-shadow
+        pagination: mergedStatePagination = null,
         queries: stateQueries = null,
-        pagination: statePagination = null,
         dataSource: stateDataSource = null
       } = states;
-      const handledProps = this.foundation.getCurrentPageData(stateDataSource, statePagination, stateQueries); // After the pager is updated, reset allRowKeys of the current page
+      const handledProps = this.foundation.getCurrentPageData(stateDataSource, mergedStatePagination, stateQueries); // After the pager is updated, reset allRowKeys of the current page
 
       this.adapter.setAllRowKeys(handledProps.allRowKeys);
       this.adapter.setDisabledRowKeys(handledProps.disabledRowKeys);
@@ -1417,6 +1436,7 @@ class Table extends BaseComponent {
     return /*#__PURE__*/React.createElement("div", {
       ref: this.rootWrapRef,
       className: classnames(className, "".concat(prefixCls, "-wrapper")),
+      "data-column-fixed": anyColumnFixed,
       style: wrapStyle,
       id: id
     }, /*#__PURE__*/React.createElement(TableContextProvider, _Object$assign({}, tableContextValue), /*#__PURE__*/React.createElement(Spin, {

package/lib/es/table/TableCell.d.ts

@@ -31,6 +31,7 @@ export interface TableCellProps extends BaseProps {
     selected?: boolean;
     expanded?: boolean;
     disabled?: boolean;
+    colIndex?: number;
 }
 export default class TableCell extends BaseComponent<TableCellProps, Record<string, any>> {
     static contextType: React.Context<import("./table-context").TableContextProps>;
@@ -65,6 +66,7 @@ export default class TableCell extends BaseComponent<TableCellProps, Record<stri
         height: PropTypes.Requireable<string | number>;
         selected: PropTypes.Requireable<boolean>;
         expanded: PropTypes.Requireable<boolean>;
+        colIndex: PropTypes.Requireable<number>;
     };
     get adapter(): TableCellAdapter;
     ref: React.MutableRefObject<any>;