@douyinfe/semi-ui 2.1.3 → 2.1.4-alpha.0

package/table/Table.tsx

@@ -0,0 +1,1384 @@
+/* eslint-disable no-nested-ternary */
+/* eslint-disable prefer-const */
+/* eslint-disable prefer-destructuring */
+/* eslint-disable no-shadow */
+/* eslint-disable no-param-reassign */
+/* eslint-disable max-len */
+/* eslint-disable react/no-did-update-set-state */
+/* eslint-disable eqeqeq */
+/* eslint-disable max-lines-per-function */
+import React, { ReactNode, createRef, isValidElement } from 'react';
+import PropTypes from 'prop-types';
+import classnames from 'classnames';
+import {
+    get,
+    noop,
+    includes,
+    find,
+    findIndex,
+    some,
+    debounce,
+    flattenDeep,
+    each,
+    omit,
+    isNull,
+    difference,
+    isFunction,
+    isObject
+} from 'lodash';
+
+import {
+    mergeQueries,
+    equalWith,
+    mergeColumns,
+    isAnyFixedRight,
+    assignColumnKeys,
+    flattenColumns,
+    getAllDisabledRowKeys
+} from '@douyinfe/semi-foundation/table/utils';
+import Store from '@douyinfe/semi-foundation/utils/Store';
+import TableFoundation, { TableAdapter, BasePageData, BaseRowKeyType, BaseHeadWidth } from '@douyinfe/semi-foundation/table/foundation';
+import { TableSelectionCellEvent } from '@douyinfe/semi-foundation/table/tableSelectionCellFoundation';
+import { strings, cssClasses, numbers } from '@douyinfe/semi-foundation/table/constants';
+import '@douyinfe/semi-foundation/table/table.scss';
+
+import Spin from '../spin';
+import BaseComponent from '../_base/baseComponent';
+import LocaleConsumer from '../locale/localeConsumer';
+import ColumnShape from './ColumnShape';
+import getColumns from './getColumns';
+import TableContext, { TableContextProps } from './table-context';
+import TableContextProvider from './TableContextProvider';
+import ColumnSelection from './ColumnSelection';
+import TablePagination from './TablePagination';
+import ColumnFilter, { OnSelectData } from './ColumnFilter';
+import ColumnSorter from './ColumnSorter';
+import ExpandedIcon from './CustomExpandIcon';
+import HeadTable, { HeadTableProps } from './HeadTable';
+import BodyTable, { BodyProps } from './Body';
+import { measureScrollbar, logger, cloneDeep, mergeComponents } from './utils';
+import {
+    ColumnProps,
+    TablePaginationProps,
+    BodyScrollEvent,
+    BodyScrollPosition,
+    ExpandIcon,
+    ColumnTitleProps,
+    Pagination,
+    RenderPagination,
+    TableLocale,
+    TableProps,
+    TableComponents,
+    RowSelectionProps,
+    Data
+} from './interface';
+import { ArrayElement } from '../_base/base';
+
+export type NormalTableProps<RecordType extends Record<string, any> = Data> = Omit<TableProps<RecordType>, 'resizable'>;
+
+export interface NormalTableState<RecordType extends Record<string, any> = Data> {
+    cachedColumns?: ColumnProps<RecordType>[];
+    cachedChildren?: React.ReactNode;
+    flattenColumns?: ColumnProps<RecordType>[];
+    components?: TableComponents;
+    queries?: ColumnProps<RecordType>[];
+    dataSource?: RecordType[];
+    flattenData?: RecordType[];
+    expandedRowKeys?: (string | number)[];
+    rowSelection?: TableStateRowSelection<RecordType>;
+    pagination?: Pagination;
+    groups?: Map<string, RecordType[]>;
+    allRowKeys?: (string | number)[];
+    disabledRowKeys?: (string | number)[];
+    disabledRowKeysSet?: Set<string | number>;
+    headWidths?: Array<Array<BaseHeadWidth>>;
+    bodyHasScrollBar?: boolean;
+    prePropRowSelection?: TableStateRowSelection<RecordType>;
+    tableWidth?: number;
+}
+
+export type TableStateRowSelection<RecordType extends Record<string, any> = Data> = (RowSelectionProps<RecordType> & { selectedRowKeysSet?: Set<(string | number)> }) | boolean;
+
+export interface RenderTableProps<RecordType> extends HeadTableProps, BodyProps {
+    filteredColumns: ColumnProps<RecordType>[];
+    useFixedHeader: boolean;
+    bodyRef: React.MutableRefObject<HTMLDivElement> | ((instance: any) => void);
+    rowSelection: TableStateRowSelection<RecordType>;
+    bodyHasScrollBar: boolean;
+}
+
+class Table<RecordType extends Record<string, any>> extends BaseComponent<NormalTableProps<RecordType>, NormalTableState<RecordType>> {
+    static contextType = TableContext;
+
+    static propTypes = {
+        className: PropTypes.string,
+        style: PropTypes.object,
+        prefixCls: PropTypes.string,
+        components: PropTypes.any,
+        bordered: PropTypes.bool,
+        loading: PropTypes.bool,
+        size: PropTypes.oneOf(strings.SIZES),
+        tableLayout: PropTypes.oneOf(strings.LAYOUTS),
+        columns: PropTypes.arrayOf(PropTypes.shape(ColumnShape)),
+        hideExpandedColumn: PropTypes.bool,
+        id: PropTypes.string,
+        expandIcon: PropTypes.oneOfType([PropTypes.bool, PropTypes.func, PropTypes.node]),
+        expandCellFixed: PropTypes.oneOf(strings.FIXED_SET),
+        title: PropTypes.oneOfType([PropTypes.string, PropTypes.node, PropTypes.func]),
+        onHeaderRow: PropTypes.func,
+        showHeader: PropTypes.bool,
+        indentSize: PropTypes.number,
+        rowKey: PropTypes.oneOfType([PropTypes.func, PropTypes.string, PropTypes.number]),
+        onRow: PropTypes.func,
+        onExpandedRowsChange: PropTypes.func,
+        onExpand: PropTypes.func,
+        rowExpandable: PropTypes.func,
+        expandedRowRender: PropTypes.func,
+        expandedRowKeys: PropTypes.array,
+        defaultExpandAllRows: PropTypes.bool,
+        expandAllRows: PropTypes.bool,
+        defaultExpandAllGroupRows: PropTypes.bool,
+        expandAllGroupRows: PropTypes.bool,
+        defaultExpandedRowKeys: PropTypes.array,
+        pagination: PropTypes.oneOfType([PropTypes.object, PropTypes.bool]),
+        renderPagination: PropTypes.func,
+        footer: PropTypes.oneOfType([PropTypes.func, PropTypes.string, PropTypes.node]),
+        empty: PropTypes.node,
+        dataSource: PropTypes.array,
+        childrenRecordName: PropTypes.string, // children data property name
+        rowSelection: PropTypes.oneOfType([PropTypes.object, PropTypes.bool]),
+        onChange: PropTypes.func,
+        scroll: PropTypes.shape({
+            x: PropTypes.oneOfType([PropTypes.number, PropTypes.string, PropTypes.bool]),
+            y: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
+        }),
+        groupBy: PropTypes.oneOfType([PropTypes.string, PropTypes.number, PropTypes.func]),
+        renderGroupSection: PropTypes.oneOfType([PropTypes.func]),
+        onGroupedRow: PropTypes.func,
+        clickGroupedRowToExpand: PropTypes.bool,
+        virtualized: PropTypes.oneOfType([PropTypes.object, PropTypes.bool]),
+        dropdownPrefixCls: PropTypes.string, // TODO: future api
+        expandRowByClick: PropTypes.bool, // TODO: future api
+        getVirtualizedListRef: PropTypes.func, // TODO: future api
+    };
+
+    static defaultProps = {
+        // rowExpandable: stubTrue,
+        tableLayout: '',
+        dataSource: [] as [],
+        prefixCls: cssClasses.PREFIX,
+        rowSelection: null as null,
+        className: '',
+        childrenRecordName: 'children',
+        size: 'default',
+        loading: false,
+        bordered: false,
+        expandCellFixed: false,
+        hideExpandedColumn: true,
+        showHeader: true,
+        indentSize: numbers.DEFAULT_INDENT_WIDTH,
+        onChange: noop,
+        pagination: true,
+        rowKey: 'key',
+        defaultExpandedRowKeys: [] as [],
+        defaultExpandAllRows: false,
+        defaultExpandAllGroupRows: false,
+        expandAllRows: false,
+        expandAllGroupRows: false,
+        onFilterDropdownVisibleChange: noop,
+        onExpand: noop,
+        onExpandedRowsChange: noop,
+        expandRowByClick: false,
+    };
+
+    get adapter(): TableAdapter<RecordType> {
+        return {
+            ...super.adapter,
+            resetScrollY: () => {
+                if (this.bodyWrapRef.current) {
+                    this.bodyWrapRef.current.scrollTop = 0;
+                }
+            },
+            setSelectedRowKeys: selectedRowKeys => {
+                this.setState({ rowSelection: {
+                    ...this.state.rowSelection as Record<string, any>,
+                    selectedRowKeys: [...selectedRowKeys],
+                    selectedRowKeysSet: new Set(selectedRowKeys),
+                } });
+            },
+            setDisabledRowKeys: disabledRowKeys => {
+                this.setState({ disabledRowKeys, disabledRowKeysSet: new Set(disabledRowKeys) });
+            },
+            setCurrentPage: currentPage => {
+                const { pagination } = this.state;
+                if (typeof pagination === 'object') {
+                    this.setState({ pagination: { ...pagination, currentPage } });
+                } else {
+                    this.setState({ pagination: { currentPage } });
+                }
+            },
+            setPagination: pagination => this.setState({ pagination }),
+            setGroups: groups => this.setState({ groups }),
+            setDataSource: dataSource => this.setState({ dataSource }),
+            setExpandedRowKeys: expandedRowKeys => this.setState({ expandedRowKeys: [...expandedRowKeys] }),
+            setQuery: (query = {}) => {
+                let queries = [...this.state.queries];
+                queries = mergeQueries(query, queries);
+                this.setState({ queries });
+            },
+            // Update queries when filtering or sorting
+            setQueries: (queries: ColumnProps<RecordType>[]) => this.setState({ queries }),
+            setFlattenData: flattenData => this.setState({ flattenData }),
+            setAllRowKeys: allRowKeys => this.setState({ allRowKeys }),
+            setHoveredRowKey: hoveredRowKey => {
+                this.store.setState({ hoveredRowKey });
+            },
+            setCachedFilteredSortedDataSource: filteredSortedDataSource => {
+                this.cachedFilteredSortedDataSource = filteredSortedDataSource;
+            },
+            setCachedFilteredSortedRowKeys: filteredSortedRowKeys => {
+                this.cachedFilteredSortedRowKeys = filteredSortedRowKeys;
+                this.cachedFilteredSortedRowKeysSet = new Set(filteredSortedRowKeys);
+            },
+            getCurrentPage: () => get(this.state, 'pagination.currentPage', 1),
+            getCurrentPageSize: () => get(this.state, 'pagination.pageSize', numbers.DEFAULT_PAGE_SIZE),
+            getCachedFilteredSortedDataSource: () => this.cachedFilteredSortedDataSource,
+            getCachedFilteredSortedRowKeys: () => this.cachedFilteredSortedRowKeys,
+            getCachedFilteredSortedRowKeysSet: () => this.cachedFilteredSortedRowKeysSet,
+            notifyFilterDropdownVisibleChange: (visible, dataIndex) =>
+                this._invokeColumnFn(dataIndex, 'onFilterDropdownVisibleChange', visible),
+            notifyChange: (...args) => this.props.onChange(...args),
+            notifyExpand: (...args) => this.props.onExpand(...args),
+            notifyExpandedRowsChange: (...args) => this.props.onExpandedRowsChange(...args),
+            notifySelect: (...args) => this._invokeRowSelection('onSelect', ...args),
+            notifySelectAll: (...args) => this._invokeRowSelection('onSelectAll', ...args),
+            notifySelectInvert: (...args) => this._invokeRowSelection('onSelectInvert', ...args),
+            notifySelectionChange: (...args) => this._invokeRowSelection('onChange', ...args),
+            isAnyColumnFixed: (columns: ColumnProps<RecordType>[]) =>
+                some(this.getColumns(columns || this.props.columns, this.props.children), column => Boolean(column.fixed)),
+            useFixedHeader: () => {
+                const { scroll } = this.props;
+
+                if (get(scroll, 'y')) {
+                    return true;
+                }
+
+                return false;
+            },
+            setHeadWidths: (headWidths: Array<BaseHeadWidth>, index = 0) => {
+                if (!equalWith(this.state.headWidths[index], headWidths)) {
+                    // The map call depends on the last state
+                    this.setState(state => {
+                        const newHeadWidths: Array<Array<BaseHeadWidth>> = [...state.headWidths];
+                        newHeadWidths[index] = [...headWidths];
+                        return { headWidths: newHeadWidths };
+                    });
+                }
+            },
+            getHeadWidths: (index = 0) => {
+                if (this.state.headWidths.length && typeof index === 'number') {
+                    const configs = this.state.headWidths[index] || [];
+                    return configs.map(item => item.width);
+                }
+                return [];
+            },
+            // This method is called by row rendering function
+            getCellWidths: (flattenedColumns: ColumnProps<RecordType>[], flattenedWidths: BaseHeadWidth[] = null, ignoreScrollBarKey = false): number[] => {
+                if (Array.isArray(flattenedColumns) && flattenedColumns.length) {
+                    flattenedWidths =
+                        flattenedWidths == null && this.state.headWidths.length ?
+                            flattenDeep(this.state.headWidths) :
+                            [];
+                    if (
+                        Array.isArray(flattenedWidths) &&
+                        flattenedWidths.length
+                    ) {
+                        return flattenedColumns.reduce((result, column) => {
+                            const found =
+                                column.key === strings.DEFAULT_KEY_COLUMN_SCROLLBAR && ignoreScrollBarKey ?
+                                    null :
+                                    find(
+                                        flattenedWidths,
+                                        item => item && item.key != null && item.key === column.key
+                                    );
+                            if (found) {
+                                result.push(found.width);
+                            }
+
+                            return result;
+                        }, [] as number[]);
+                    }
+                }
+                return [];
+            },
+            mergedRowExpandable: record => {
+                const { expandedRowRender, childrenRecordName, rowExpandable } = this.props;
+                const children = get(record, childrenRecordName);
+                const hasExpandedRowRender = typeof expandedRowRender === 'function';
+                const hasRowExpandable = typeof rowExpandable === 'function';
+                const hasChildren = Array.isArray(children) && children.length;
+                const strictExpandableResult = hasRowExpandable && rowExpandable(record);
+                const looseExpandableResult = !hasRowExpandable || strictExpandableResult;
+
+                return (
+                    ((hasExpandedRowRender || hasChildren) && looseExpandableResult) ||
+                    (!(hasExpandedRowRender || hasChildren) && strictExpandableResult)
+                );
+            },
+            isAnyColumnUseFullRender: (columns: ColumnProps<RecordType>[]) =>
+                some(columns, column => Boolean(column.useFullRender)),
+            getNormalizeColumns: () => this.normalizeColumns,
+            getHandleColumns: () => this.handleColumns,
+            getMergePagination: () => this.mergePagination,
+            setBodyHasScrollbar: bodyHasScrollBar => {
+                if (bodyHasScrollBar !== this.state.bodyHasScrollBar) {
+                    this.setState({ bodyHasScrollBar });
+                }
+            }
+        };
+    }
+
+    bodyWrapRef: React.MutableRefObject<HTMLDivElement>;
+    rootWrapRef: React.MutableRefObject<HTMLDivElement>;
+    wrapRef: React.MutableRefObject<HTMLDivElement>;
+    headerWrapRef: React.MutableRefObject<HTMLDivElement>;
+    debouncedWindowResize: () => void;
+    cachedFilteredSortedDataSource: RecordType[];
+    cachedFilteredSortedRowKeys: BaseRowKeyType[];
+    cachedFilteredSortedRowKeysSet: Set<string | number>;
+    store: Store;
+    lastScrollTop!: number;
+    lastScrollLeft!: number;
+    scrollPosition!: BodyScrollPosition;
+    position!: BodyScrollPosition;
+    foundation: TableFoundation<RecordType>;
+    constructor(props: NormalTableProps<RecordType>, context: TableContextProps) {
+        super(props);
+        this.foundation = new TableFoundation<RecordType>(this.adapter);
+        // columns cannot be deepClone, otherwise the comparison will be false
+        const columns = this.getColumns(props.columns, props.children);
+        const cachedflattenColumns = flattenColumns(columns);
+        this.state = {
+            /**
+             * Cached props
+             */
+            cachedColumns: columns, // update cachedColumns after columns or children change
+            cachedChildren: props.children,
+            flattenColumns: cachedflattenColumns,
+            components: mergeComponents(props.components, props.virtualized), // cached components
+
+            /**
+             * State calculated based on prop
+             */
+            queries: cloneDeep(cachedflattenColumns), // flatten columns, update when sorting or filtering
+            dataSource: [], // data after paging
+            flattenData: [],
+            expandedRowKeys: [...(props.expandedRowKeys || []), ...(props.defaultExpandedRowKeys || [])], // cached expandedRowKeys
+            rowSelection: props.rowSelection ? isObject(props.rowSelection) ? { ...props.rowSelection } : {} : null,
+            pagination:
+                props.pagination && typeof props.pagination === 'object' ?
+                    { ...props.pagination } :
+                    props.pagination || false,
+
+            /**
+             * Internal state
+             */
+            groups: null,
+            allRowKeys: [], // row keys after paging
+            disabledRowKeys: [], // disabled row keys after paging
+            disabledRowKeysSet: new Set(),
+            headWidths: [], // header cell width
+            bodyHasScrollBar: false,
+            prePropRowSelection: undefined,
+        };
+
+        this.rootWrapRef = createRef();
+        this.wrapRef = createRef(); // table's outside wrap
+
+        this.bodyWrapRef = createRef();
+        this.headerWrapRef = createRef();
+
+        this.store = new Store({
+            hoveredRowKey: null,
+        });
+
+        this.setScrollPosition('left');
+        this.debouncedWindowResize = debounce(this.handleWindowResize, 150);
+
+        this.cachedFilteredSortedDataSource = [];
+        this.cachedFilteredSortedRowKeys = [];
+        this.cachedFilteredSortedRowKeysSet = new Set();
+    }
+
+    static getDerivedStateFromProps(props: NormalTableProps, state: NormalTableState) {
+        const willUpdateStates: Partial<NormalTableState> = {};
+        const { rowSelection, dataSource, childrenRecordName, rowKey } = props;
+        props.columns && props.children && logger.warn('columns should not given by object and children at the same time');
+
+        if (props.columns && props.columns !== state.cachedColumns) {
+            const newFlattenColumns = flattenColumns(props.columns);
+            willUpdateStates.flattenColumns = newFlattenColumns;
+            willUpdateStates.queries = mergeColumns(state.queries, newFlattenColumns, null, false);
+            willUpdateStates.cachedColumns = props.columns;
+            willUpdateStates.cachedChildren = null;
+        } else if (props.children && props.children !== state.cachedChildren) {
+            const newFlattenColumns = flattenColumns(getColumns(props.children));
+            const columns = mergeColumns(state.queries, newFlattenColumns, null, false);
+            willUpdateStates.flattenColumns = newFlattenColumns;
+            willUpdateStates.queries = [...columns];
+            willUpdateStates.cachedColumns = [...columns];
+            willUpdateStates.cachedChildren = props.children;
+        }
+
+        // Update controlled selection column
+        if (rowSelection !== state.prePropRowSelection) {
+            let newSelectionStates: TableStateRowSelection = {};
+            if (isObject(state.rowSelection)) {
+                newSelectionStates = { ...newSelectionStates, ...state.rowSelection };
+            }
+            if (isObject(rowSelection)) {
+                newSelectionStates = { ...newSelectionStates, ...rowSelection };
+            }
+            const selectedRowKeys = get(rowSelection, 'selectedRowKeys');
+            const getCheckboxProps = get(rowSelection, 'getCheckboxProps');
+            if (selectedRowKeys && Array.isArray(selectedRowKeys)) {
+                newSelectionStates.selectedRowKeysSet = new Set(selectedRowKeys);
+            }
+            // The return value of getCheckboxProps affects the disabled rows
+            if (isFunction(getCheckboxProps)) {
+                const disabledRowKeys = getAllDisabledRowKeys({ dataSource, getCheckboxProps, childrenRecordName, rowKey });
+                willUpdateStates.disabledRowKeys = disabledRowKeys;
+                willUpdateStates.disabledRowKeysSet = new Set(disabledRowKeys);
+            }
+            willUpdateStates.rowSelection = newSelectionStates;
+            willUpdateStates.prePropRowSelection = rowSelection;
+        }
+        return willUpdateStates;
+    }
+
+    componentDidMount() {
+        super.componentDidMount();
+
+        if (this.adapter.isAnyColumnFixed() || (this.props.showHeader && this.adapter.useFixedHeader())) {
+            this.handleWindowResize();
+            window.addEventListener('resize', this.debouncedWindowResize);
+        }
+    }
+
+    // TODO: Extract the setState operation to the adapter or getDerivedStateFromProps function
+    componentDidUpdate(prevProps: NormalTableProps<RecordType>, prevState: NormalTableState<RecordType>) {
+        const {
+            pagination,
+            dataSource,
+            expandedRowKeys,
+            expandAllRows,
+            expandAllGroupRows,
+            virtualized,
+            components,
+        } = this.props;
+
+        const {
+            queries: stateQueries,
+            cachedColumns: stateCachedColumns,
+            cachedChildren: stateCachedChildren,
+            groups: stateGroups,
+        } = this.state;
+
+        /**
+         * State related to paging
+         *
+         * @param dataSource
+         * @param groups
+         * @param pagination
+         * @param disabledRowKeys
+         * @param allRowKeys
+         * @param queries
+         */
+        const states: Partial<NormalTableState<RecordType>> = {};
+
+        this._warnIfNoKey();
+
+        /**
+         * The state that needs to be updated after props changes
+         */
+
+        // Update controlled expand column
+        if (Array.isArray(expandedRowKeys) && expandedRowKeys !== prevProps.expandedRowKeys) {
+            this.setState({ expandedRowKeys });
+        }
+
+        // Update components
+        if (components !== prevProps.components || virtualized !== prevProps.virtualized) {
+            this.setState({ components: mergeComponents(components, virtualized) });
+        }
+
+        // Update the default expanded column
+        if (
+            expandAllRows !== prevProps.expandAllRows ||
+            expandAllGroupRows !== prevProps.expandAllGroupRows
+        ) {
+            this.foundation.initExpandedRowKeys({ groups: stateGroups });
+        }
+
+
+        // Update pagination
+        if (pagination !== prevProps.pagination) {
+            states.pagination = isObject(pagination) ? { ...pagination } : pagination;
+        }
+
+        /**
+         * After dataSource is updated || (cachedColumns || cachedChildren updated)
+         * 1. Cache filtered sorted data and a collection of data rows, stored in this
+         * 2. Update pager and group, stored in state
+         */
+        if (dataSource !== prevProps.dataSource || stateCachedColumns !== prevState.cachedColumns || stateCachedChildren !== prevState.cachedChildren) {
+            // TODO: foundation.getFilteredSortedDataSource has side effects and will be modified to the dataSource reference
+            // Temporarily use _dataSource=[...dataSource] for processing
+            const _dataSource = [...dataSource];
+            const filteredSortedDataSource = this.foundation.getFilteredSortedDataSource(_dataSource, stateQueries);
+            this.foundation.setCachedFilteredSortedDataSource(filteredSortedDataSource);
+            states.dataSource = filteredSortedDataSource;
+
+            if (pagination === prevProps.pagination) {
+                states.pagination = isObject(pagination) ? { ...pagination } : pagination;
+            }
+
+            if (this.props.groupBy) {
+                states.groups = null;
+            }
+        }
+
+        if (Object.keys(states).length) {
+            const {
+                // eslint-disable-next-line @typescript-eslint/no-shadow
+                queries: stateQueries = null,
+                pagination: statePagination = null,
+                dataSource: stateDataSource = null,
+            } = states;
+            const handledProps: Partial<NormalTableState<RecordType>> = this.foundation.getCurrentPageData(stateDataSource, statePagination as TablePaginationProps, stateQueries);
+
+            // After the pager is updated, reset allRowKeys of the current page
+            this.adapter.setAllRowKeys(handledProps.allRowKeys);
+            this.adapter.setDisabledRowKeys(handledProps.disabledRowKeys);
+
+            if ('dataSource' in states) {
+                if (this.props.defaultExpandAllRows && handledProps.groups && handledProps.groups.size ||
+                    this.props.expandAllRows ||
+                    this.props.expandAllGroupRows
+                ) {
+                    this.foundation.initExpandedRowKeys(handledProps);
+                }
+            }
+
+            // Centrally update paging related state
+            const statesKeys: any[] = Object.keys(states);
+            for (const k of statesKeys) {
+                this.setState({ [k]: handledProps[k] });
+            }
+        }
+
+        if (this.adapter.isAnyColumnFixed() || (this.props.showHeader && this.adapter.useFixedHeader())) {
+            if (!this.debouncedWindowResize) {
+                window.addEventListener('resize', this.debouncedWindowResize);
+            }
+        }
+    }
+
+    componentWillUnmount() {
+        super.componentWillUnmount();
+
+        if (this.debouncedWindowResize) {
+            window.removeEventListener('resize', this.debouncedWindowResize);
+            (this.debouncedWindowResize as any).cancel();
+            this.debouncedWindowResize = null;
+        }
+    }
+
+    // TODO: notify when data don't have key
+    _warnIfNoKey = () => {
+        if (
+            (this.props.rowSelection || this.props.expandedRowRender) &&
+            some(this.props.dataSource, record => this.foundation.getRecordKey(record) == null)
+        ) {
+            logger.error(
+                'You must specify a key for each element in the dataSource or use "rowKey" to specify an attribute name as the primary key!'
+            );
+        }
+    };
+
+    _invokeRowSelection = (funcName: string, ...args: any[]) => {
+        const func = get(this.state, ['rowSelection', funcName]);
+
+        if (typeof func === 'function') {
+            func(...args);
+        }
+    };
+
+    _invokeColumnFn = (key: string, funcName: string, ...args: any[]) => {
+        if (key && funcName) {
+            const column = this.foundation.getQuery(key);
+            const func = get(column, funcName, null);
+
+            if (typeof func === 'function') {
+                func(...args);
+            }
+        }
+    };
+
+    _cacheHeaderRef = (node: HTMLDivElement) => {
+        this.headerWrapRef.current = node;
+    };
+
+    getCurrentPageData = () => {
+        const pageData = this.foundation.getCurrentPageData();
+        const retObj = ['dataSource', 'groups'].reduce((result, key) => {
+            if (pageData[key]) {
+                result[key] = pageData[key];
+            }
+            return result;
+        }, {});
+
+        return cloneDeep(retObj);
+    };
+
+    getColumns = (columns: ColumnProps<RecordType>[], children: ReactNode) => (!Array.isArray(columns) || !columns || !columns.length ? getColumns(children) : columns);
+
+    // @ts-ignore
+    getCellWidths = (...args: any[]) => this.foundation.getCellWidths(...args);
+    // @ts-ignore
+    setHeadWidths = (...args: any[]) => this.foundation.setHeadWidths(...args);
+    // @ts-ignore
+    getHeadWidths = (...args: any[]) => this.foundation.getHeadWidths(...args);
+    // @ts-ignore
+    mergedRowExpandable = (...args: any[]) => this.foundation.mergedRowExpandable(...args);
+    // @ts-ignore
+    setBodyHasScrollbar = (...args: any[]) => this.foundation.setBodyHasScrollbar(...args);
+
+    handleWheel = (event: React.WheelEvent<HTMLDivElement>) => {
+        const { scroll = {} } = this.props;
+        if (window.navigator.userAgent.match(/Trident\/7\./) && scroll.y) {
+            event.preventDefault();
+            const wd = event.deltaY;
+            const { target } = event;
+            // const { bodyTable, fixedColumnsBodyLeft, fixedColumnsBodyRight } = this;
+            const bodyTable = this.bodyWrapRef.current;
+
+            let scrollTop = 0;
+
+            if (this.lastScrollTop) {
+                scrollTop = this.lastScrollTop + wd;
+            } else {
+                scrollTop = wd;
+            }
+
+            if (bodyTable && target !== bodyTable) {
+                bodyTable.scrollTop = scrollTop;
+            }
+        }
+    };
+
+    handleBodyScrollLeft = (e: BodyScrollEvent) => {
+        if (e.currentTarget !== e.target) {
+            return;
+        }
+        const { target } = e;
+        // const { headTable, bodyTable } = this;
+        const headTable = this.headerWrapRef.current;
+        const bodyTable = this.bodyWrapRef.current;
+        if (target.scrollLeft !== this.lastScrollLeft) {
+            if (target === bodyTable && headTable) {
+                headTable.scrollLeft = target.scrollLeft;
+            } else if (target === headTable && bodyTable) {
+                bodyTable.scrollLeft = target.scrollLeft;
+            }
+            this.setScrollPositionClassName();
+        }
+        // Remember last scrollLeft for scroll direction detecting.
+        this.lastScrollLeft = target.scrollLeft;
+    };
+
+    handleWindowResize = () => {
+        this.syncTableWidth();
+        this.setScrollPositionClassName();
+    };
+
+    handleBodyScrollTop = (e: BodyScrollEvent) => {
+        const { target } = e;
+        if (e.currentTarget !== target) {
+            return;
+        }
+        const { scroll = {} } = this.props;
+        // const { headTable, bodyTable, fixedColumnsBodyLeft, fixedColumnsBodyRight } = this;
+        const headTable = this.headerWrapRef.current;
+        const bodyTable = this.bodyWrapRef.current;
+
+        if (target.scrollTop !== this.lastScrollTop && scroll.y && target !== headTable) {
+            const { scrollTop } = target;
+
+            if (bodyTable && target !== bodyTable) {
+                bodyTable.scrollTop = scrollTop;
+            }
+        }
+        // Remember last scrollTop for scroll direction detecting.
+        this.lastScrollTop = target.scrollTop;
+    };
+
+    handleBodyScroll = (e: BodyScrollEvent) => {
+        this.handleBodyScrollLeft(e);
+        this.handleBodyScrollTop(e);
+    };
+
+    setScrollPosition = (position: BodyScrollPosition) => {
+        const { prefixCls } = this.props;
+        const positionAll = [
+            `${prefixCls}-scroll-position-both`,
+            `${prefixCls}-scroll-position-middle`,
+            `${prefixCls}-scroll-position-left`,
+            `${prefixCls}-scroll-position-right`,
+        ];
+        this.scrollPosition = position;
+        const tableNode = this.wrapRef.current;
+        if (tableNode && tableNode.nodeType) {
+            if (position === 'both') {
+                const acceptPosition = [`${prefixCls}-scroll-position-left`, `${prefixCls}-scroll-position-right`];
+                tableNode.classList.remove(...difference(positionAll, acceptPosition));
+                tableNode.classList.add(...acceptPosition);
+            } else {
+                const acceptPosition = [`${prefixCls}-scroll-position-${position}`];
+                tableNode.classList.remove(...difference(positionAll, acceptPosition));
+                tableNode.classList.add(...acceptPosition);
+            }
+        }
+    };
+
+    setScrollPositionClassName = () => {
+        const node = this.bodyWrapRef.current;
+        if (node && node.children && node.children.length) {
+            const scrollToLeft = node.scrollLeft === 0;
+            const scrollToRight =
+                node.scrollLeft + 1 >=
+                node.children[0].getBoundingClientRect().width - node.getBoundingClientRect().width;
+            if (scrollToLeft && scrollToRight) {
+                this.setScrollPosition('both');
+            } else if (scrollToLeft) {
+                this.setScrollPosition('left');
+            } else if (scrollToRight) {
+                this.setScrollPosition('right');
+            } else if (this.scrollPosition !== 'middle') {
+                this.setScrollPosition('middle');
+            }
+        }
+    };
+
+    syncTableWidth = () => {
+        if (this.rootWrapRef && this.rootWrapRef.current) {
+            this.setState({ tableWidth: this.rootWrapRef.current.getBoundingClientRect().width });
+        }
+    };
+
+    renderSelection = (record: RecordType = {} as RecordType, inHeader = false): React.ReactNode => {
+        const { rowSelection, disabledRowKeysSet } = this.state;
+
+        if (rowSelection && typeof rowSelection === 'object') {
+            const { selectedRowKeys = [], selectedRowKeysSet = new Set(), getCheckboxProps, disabled } = rowSelection;
+
+            if (inHeader) {
+                const columnKey = get(rowSelection, 'key', strings.DEFAULT_KEY_COLUMN_SELECTION);
+                const allRowKeys = this.cachedFilteredSortedRowKeys;
+                const allRowKeysSet = this.cachedFilteredSortedRowKeysSet;
+                const allIsSelected = this.foundation.allIsSelected(selectedRowKeysSet, disabledRowKeysSet, allRowKeys);
+                const hasRowSelected = this.foundation.hasRowSelected(selectedRowKeys, allRowKeysSet);
+                return (
+                    <ColumnSelection
+                        disabled={disabled}
+                        key={columnKey}
+                        selected={allIsSelected}
+                        indeterminate={hasRowSelected && !allIsSelected}
+                        onChange={(status, e) => {
+                            this.toggleSelectAllRow(status, e);
+                        }}
+                    />
+                );
+            } else {
+                const key = this.foundation.getRecordKey(record);
+                const selected = selectedRowKeysSet.has(key);
+                const checkboxPropsFn = () => (typeof getCheckboxProps === 'function' ? getCheckboxProps(record) : {});
+
+                return (
+                    <ColumnSelection
+                        getCheckboxProps={checkboxPropsFn}
+                        selected={selected}
+                        onChange={(status, e) => this.toggleSelectRow(status, key, e)}
+                    />
+                );
+            }
+        }
+        return null;
+    };
+
+    renderRowSelectionCallback = (text: string, record: RecordType = {} as RecordType) => this.renderSelection(record);
+    renderTitleSelectionCallback = () => this.renderSelection(null, true);
+
+    normalizeSelectionColumn = (props: { rowSelection?: TableStateRowSelection<RecordType>; prefixCls?: string } = {}) => {
+        const { rowSelection, prefixCls } = props;
+        let column: ColumnProps = {};
+        if (rowSelection) {
+            const needOmitSelectionKey = ['selectedRowKeys', 'selectedRowKeysSet'];
+            column = { key: strings.DEFAULT_KEY_COLUMN_SELECTION };
+
+            if (isObject(rowSelection)) {
+                column = { ...column, ...omit(rowSelection, needOmitSelectionKey) };
+            }
+
+            column.className = classnames(column.className, `${prefixCls}-column-selection`);
+
+            column.title = this.renderTitleSelectionCallback;
+
+            column.render = this.renderRowSelectionCallback;
+        }
+        return column;
+    };
+
+    // If there is a scroll bar, manually construct a column and insert it into the header
+    normalizeScrollbarColumn = (props: { scrollbarWidth?: number } = {}): { key: 'column-scrollbar'; width: number; fixed: 'right' } => {
+        const { scrollbarWidth = 0 } = props;
+
+        return {
+            key: strings.DEFAULT_KEY_COLUMN_SCROLLBAR as 'column-scrollbar',
+            width: scrollbarWidth,
+            fixed: 'right',
+        };
+    };
+
+    /**
+     * render expand icon
+     * @param {Object} record
+     * @param {Boolean} isNested
+     * @param {String} groupKey
+     * @returns {ReactNode}
+     */
+    renderExpandIcon = (record = {}, isNested = false, groupKey: string | number = null) => {
+        const { expandedRowKeys } = this.state;
+        const { expandIcon } = this.props;
+        const key =
+            typeof groupKey === 'string' || typeof groupKey === 'number' ?
+                groupKey :
+                this.foundation.getRecordKey(record as RecordType);
+
+        return (
+            <ExpandedIcon
+                key={key}
+                componentType={isNested ? 'tree' : 'expand'}
+                expanded={includes(expandedRowKeys, key)}
+                expandIcon={expandIcon}
+                onClick={(expanded, e) => this.handleRowExpanded(expanded, key, e)}
+            />
+        );
+    };
+
+    // @ts-ignore
+    handleRowExpanded = (...args: any[]) => this.foundation.handleRowExpanded(...args);
+
+    normalizeExpandColumn = (props: { prefixCls?: string; expandCellFixed?: ArrayElement<typeof strings.FIXED_SET>; expandIcon?: ExpandIcon } = {}) => {
+        let column: ColumnProps = null;
+
+        const { prefixCls, expandCellFixed, expandIcon } = props;
+
+        column = { fixed: expandCellFixed, key: strings.DEFAULT_KEY_COLUMN_EXPAND };
+
+        column.className = classnames(column.className, `${prefixCls}-column-expand`);
+
+        column.render =
+            expandIcon !== false ?
+                (text = '', record, index) =>
+                    (this.adapter.mergedRowExpandable(record) ? this.renderExpandIcon(record) : null) :
+                () => null;
+
+        return column;
+    };
+
+    /**
+      * Add sorting, filtering, and rendering functions to columns, and add column event handling
+      * Title support function, passing parameters as {filter: node, sorter: node, selection: node}
+      * @param {*} column
+      */
+    addFnsInColumn = (column: ColumnProps = {}) => {
+        if (column && (column.sorter || column.filters || column.useFullRender)) {
+            const { dataIndex, title: rawTitle, useFullRender } = column;
+            const curQuery = this.foundation.getQuery(dataIndex);
+            const titleMap: ColumnTitleProps = {};
+            const titleArr = [];
+
+            // useFullRender adds select buttons to each column
+            if (useFullRender) {
+                titleMap.selection = this.renderSelection(null, true);
+            }
+
+            const stateSortOrder = get(curQuery, 'sortOrder');
+            const defaultSortOrder = get(curQuery, 'defaultSortOrder', false);
+            const sortOrder = this.foundation.isSortOrderValid(stateSortOrder) ? stateSortOrder : defaultSortOrder;
+            if (typeof column.sorter === 'function' || column.sorter === true) {
+                const sorter = (
+                    <ColumnSorter
+                        key={strings.DEFAULT_KEY_COLUMN_SORTER}
+                        sortOrder={sortOrder}
+                        onClick={e => this.foundation.handleSort(column, e)}
+                    />
+                );
+                useFullRender && (titleMap.sorter = sorter);
+                titleArr.push(sorter);
+            }
+
+            if ((Array.isArray(column.filters) && column.filters.length) || isValidElement(column.filterDropdown)) {
+                const filter = (
+                    <ColumnFilter
+                        key={strings.DEFAULT_KEY_COLUMN_FILTER}
+                        {...curQuery}
+                        onFilterDropdownVisibleChange={(visible: boolean) => this.foundation.toggleShowFilter(dataIndex, visible)}
+                        onSelect={(data: OnSelectData) => this.foundation.handleFilterSelect(dataIndex, data)}
+                    />
+                );
+                useFullRender && (titleMap.filter = filter);
+                titleArr.push(filter);
+            }
+
+            const newTitle =
+                typeof rawTitle === 'function' ?
+                    () => rawTitle(titleMap) :
+                    titleArr.unshift(
+                        <React.Fragment key={strings.DEFAULT_KEY_COLUMN_TITLE}>{rawTitle}</React.Fragment>
+                    ) && titleArr;
+
+            column = { ...column, title: newTitle };
+        }
+
+        return column;
+    };
+
+    toggleSelectRow = (selected: boolean, realKey: string | number, e: TableSelectionCellEvent) => {
+        this.foundation.handleSelectRow(realKey, selected, e);
+    };
+
+    toggleSelectAllRow = (status: boolean, e: TableSelectionCellEvent) => {
+        this.foundation.handleSelectAllRow(status, e);
+    };
+
+    /**
+     * render pagination
+     * @param {object} pagination
+     */
+    renderPagination = (pagination: TablePaginationProps, propRenderPagination: RenderPagination) => {
+        if (!pagination) {
+            return null;
+        }
+
+        // use memoized pagination
+        const mergedPagination = this.foundation.memoizedPagination(pagination);
+
+        return (
+            <LocaleConsumer componentName="Table">
+                {(locale: TableLocale) => {
+                    const info = this.foundation.formatPaginationInfo(mergedPagination, locale.pageText);
+                    return <TablePagination info={info} pagination={mergedPagination} renderPagination={propRenderPagination} />;
+                }}
+            </LocaleConsumer>
+        );
+    };
+
+    renderTitle = (props: { title?: ReactNode; prefixCls?: string; dataSource?: any[] } = {}) => {
+        let { title } = props;
+        const { prefixCls, dataSource } = props;
+
+        if (typeof title === 'function') {
+            title = title(dataSource);
+        }
+
+        return isValidElement(title) || typeof title === 'string' ? (
+            <div className={`${prefixCls}-title`}>{title}</div>
+        ) : null;
+    };
+
+    renderEmpty = (props: { prefixCls?: string; empty?: ReactNode; dataSource?: RecordType[] } = {}) => {
+        const { prefixCls, empty, dataSource } = props;
+        const wrapCls = `${prefixCls}-placeholder`;
+        const isEmpty = this.foundation.isEmpty(dataSource);
+
+        if (!isEmpty) {
+            return null;
+        }
+
+        return (
+            <LocaleConsumer componentName="Table" key={'emptyText'}>
+                {(locale: TableLocale, localeCode: string) => (
+                    <div className={wrapCls}>
+                        <div className={`${prefixCls}-empty`}>{empty || locale.emptyText}</div>
+                    </div>
+                )}
+            </LocaleConsumer>
+        );
+    };
+
+    renderFooter = (props: { footer?: ReactNode; prefixCls?: string; dataSource?: RecordType[] } = {}) => {
+        let { footer } = props;
+        const { prefixCls, dataSource } = props;
+
+        if (typeof footer === 'function') {
+            footer = footer(dataSource);
+        }
+
+        return isValidElement(footer) || typeof footer === 'string' ? (
+            <div className={`${prefixCls}-footer`} key="footer">
+                {footer}
+            </div>
+        ) : null;
+    };
+
+    renderMainTable = (props: any) => {
+        const useFixedHeader = this.adapter.useFixedHeader();
+        const emptySlot = this.renderEmpty(props);
+
+        const table = [
+            this.renderTable({
+                ...props,
+                fixed: false,
+                useFixedHeader,
+                headerRef: this._cacheHeaderRef,
+                bodyRef: this.bodyWrapRef,
+                includeHeader: !useFixedHeader,
+            }),
+            emptySlot,
+            this.renderFooter(props),
+        ];
+
+        return table;
+    };
+
+
+    renderTable = (props: RenderTableProps<RecordType>) => {
+        const {
+            columns,
+            filteredColumns,
+            fixed,
+            useFixedHeader,
+            scroll,
+            prefixCls,
+            anyColumnFixed,
+            includeHeader,
+            showHeader,
+            components,
+            headerRef,
+            bodyRef,
+            rowSelection,
+            dataSource,
+            bodyHasScrollBar,
+            disabledRowKeysSet,
+        } = props;
+        const selectedRowKeysSet = get(rowSelection, 'selectedRowKeysSet', new Set());
+
+        const headTable =
+            fixed || useFixedHeader ? (
+                <HeadTable
+                    key="head"
+                    anyColumnFixed={anyColumnFixed}
+                    ref={headerRef}
+                    columns={filteredColumns}
+                    prefixCls={prefixCls}
+                    fixed={fixed}
+                    handleBodyScroll={this.handleBodyScrollLeft}
+                    components={components}
+                    scroll={scroll}
+                    showHeader={showHeader}
+                    selectedRowKeysSet={selectedRowKeysSet}
+                    dataSource={dataSource}
+                    bodyHasScrollBar={bodyHasScrollBar}
+                />
+            ) : null;
+
+        const bodyTable = (
+            <BodyTable
+                {...omit(props, ['rowSelection', 'headWidths']) as any}
+                key="body"
+                ref={bodyRef}
+                columns={filteredColumns}
+                fixed={fixed}
+                prefixCls={prefixCls}
+                handleWheel={this.handleWheel}
+                handleBodyScroll={this.handleBodyScroll}
+                anyColumnFixed={anyColumnFixed}
+                includeHeader={includeHeader}
+                showHeader={showHeader}
+                scroll={scroll}
+                components={components}
+                store={this.store}
+                selectedRowKeysSet={selectedRowKeysSet}
+                disabledRowKeysSet={disabledRowKeysSet}
+            />
+        );
+
+        return [headTable, bodyTable];
+    };
+
+    /**
+     * When columns change, call this function to get the latest withFnsColumns
+     * In addition to changes in columns, these props changes must be recalculated
+     *  - hideExpandedColumn
+     *  -rowSelection changes from trusy to falsy or rowSelection.hidden changes
+     *  -isAnyFixedRight(columns) || get(scroll,'y') changes
+     *
+     * columns变化时，调用此函数获取最新的withFnsColumns
+     * 除了 columns 变化，这些 props 变化也要重新计算
+     *  - hideExpandedColumn
+     *  - rowSelection 从 trusy 变为 falsy 或 rowSelection.hidden 发生变化
+     *  - isAnyFixedRight(columns) || get(scroll, 'y') 发生变化
+     *
+     * @param {Array} queries
+     * @param {Array} cachedColumns
+     * @returns columns after adding extended functions
+     */
+    handleColumns = (queries: ColumnProps<RecordType>[], cachedColumns: ColumnProps<RecordType>[]) => {
+        const { hideExpandedColumn, scroll, prefixCls, expandCellFixed, expandIcon, rowSelection } = this.props;
+        const childrenColumnName = 'children';
+        let columns: ColumnProps<RecordType>[] = cloneDeep(cachedColumns);
+
+        // eslint-disable-next-line @typescript-eslint/no-shadow
+        const addFns = (columns: ColumnProps<RecordType>[] = []) => {
+            if (Array.isArray(columns) && columns.length) {
+                each(columns, (column, index, originColumns) => {
+                    const newColumn = this.addFnsInColumn(column);
+                    const children = column[childrenColumnName];
+                    if (Array.isArray(children) && children.length) {
+                        const newChildren = [...children];
+                        addFns(newChildren);
+                        newColumn[childrenColumnName] = newChildren;
+                    }
+                    originColumns[index] = newColumn;
+                });
+            }
+        };
+
+        addFns(columns);
+
+        // hideExpandedColumn=false render expand column separately
+        if (!hideExpandedColumn) {
+            const column = this.normalizeExpandColumn({ prefixCls, expandCellFixed, expandIcon });
+
+            const destIndex = findIndex(columns, item => item.key === strings.DEFAULT_KEY_COLUMN_EXPAND);
+            if (column) {
+                if (destIndex > -1) {
+                    columns[destIndex] = { ...column, ...columns[destIndex] };
+                } else if (column.fixed === 'right') {
+                    columns = [...columns, column];
+                } else {
+                    columns = [column, ...columns];
+                }
+            }
+        }
+
+        // selection column
+        if (rowSelection && !get(rowSelection, 'hidden')) {
+            const destIndex = findIndex(columns, item => item.key === strings.DEFAULT_KEY_COLUMN_SELECTION);
+            const column = this.normalizeSelectionColumn({ rowSelection, prefixCls });
+
+            if (destIndex > -1) {
+                columns[destIndex] = { ...column, ...columns[destIndex] };
+            } else if (column.fixed === 'right') {
+                columns = [...columns, column];
+            } else {
+                columns = [column, ...columns];
+            }
+        }
+
+        assignColumnKeys(columns);
+
+        return columns;
+    };
+
+    /**
+     * Convert children to columns object
+     * @param {Array} columns
+     * @param {ReactNode} children
+     * @returns {Array}
+     */
+    normalizeColumns = (columns: ColumnProps<RecordType>[], children: ReactNode) => {
+        const normalColumns = cloneDeep(this.getColumns(columns, children));
+        return normalColumns;
+    };
+
+    /**
+     * Combine pagination and table paging processing functions
+     */
+    mergePagination = (pagination: TablePaginationProps) => {
+        const newPagination = { onChange: this.foundation.setPage, ...pagination };
+        return newPagination;
+    };
+
+    render() {
+        let {
+            scroll,
+            prefixCls,
+            className,
+            style: wrapStyle = {},
+            bordered,
+            id,
+            pagination: propPagination,
+            virtualized,
+            size,
+            renderPagination: propRenderPagination,
+            getVirtualizedListRef,
+            loading,
+            hideExpandedColumn,
+            rowSelection: propRowSelection,
+            ...rest
+        } = this.props;
+
+        let {
+            rowSelection,
+            expandedRowKeys,
+            headWidths,
+            tableWidth,
+            pagination,
+            dataSource,
+            queries,
+            cachedColumns,
+            bodyHasScrollBar,
+        } = this.state;
+
+        wrapStyle = { ...wrapStyle };
+
+        let columns: ColumnProps<RecordType>[];
+        /**
+          * As state.queries will change, the columns should be refreshed as a whole at this time
+          * The scene of changes in queries
+          * 1. Filter
+          * 2. Pagination
+          *
+          * useFullRender needs to be passed to the user selection ReactNode, so columns need to be recalculated every time the selectedRowKeys changes
+          * TODO: In the future, the selection passed to the user can be changed to the function type, allowing the user to execute the function to obtain the real-time status of the selection title
+          *
+          * 由于state.queries会发生变化，此时columns应该整体刷新
+          * queries变化的场景
+          *  1. 筛选
+          *  2. 分页
+          * useFullRender需要传给用户selection ReactNode，因此需要每次selectedRowKeys变化时重新计算columns
+          * TODO: 未来可以将传给用户的selection改为函数类型，让用户执行函数获取selection title的实时状态
+          */
+        if (!this.adapter.isAnyColumnUseFullRender(queries)) {
+            const rowSelectionUpdate: boolean = propRowSelection && !get(propRowSelection, 'hidden');
+            columns = this.foundation.memoizedWithFnsColumns(
+                queries,
+                cachedColumns,
+                rowSelectionUpdate,
+                hideExpandedColumn,
+                // Update the columns after the body scrollbar changes to ensure that the head and body are aligned
+                bodyHasScrollBar
+            );
+        } else {
+            columns = this.handleColumns(queries, cachedColumns);
+        }
+        const filteredColumns: ColumnProps<RecordType>[] = this.foundation.memoizedFilterColumns(columns);
+        const flattenFnsColumns: ColumnProps<RecordType>[] = this.foundation.memoizedFlattenFnsColumns(columns);
+
+        const anyColumnFixed = this.adapter.isAnyColumnFixed(columns);
+
+
+        /**
+         * - If it is the first page break, you need to calculate the current page
+         * - If it is manual paging, call foundation to modify the state
+         *
+         * TODO: After merging issue 1007, you can place it in the constructor to complete
+         * The reason is that #1007 exposes the parameters required by getCurrentPageData in the constructor
+         */
+        if (isNull(dataSource)) {
+            const pageData: BasePageData<RecordType> = this.foundation.getCurrentPageData(this.props.dataSource);
+            dataSource = pageData.dataSource;
+            pagination = pageData.pagination;
+        }
+
+        const props = {
+            ...rest,
+            ...this.state,
+            // props not in rest
+            virtualized,
+            scroll,
+            prefixCls,
+            size,
+            hideExpandedColumn,
+            // renamed state
+            columns,
+            // calculated value
+            anyColumnFixed,
+            rowExpandable: this.mergedRowExpandable,
+            pagination,
+            dataSource,
+            rowSelection,
+            expandedRowKeys,
+            renderExpandIcon: this.renderExpandIcon,
+            filteredColumns,
+        };
+
+        const x = get(scroll, 'x');
+        const y = get(scroll, 'y');
+
+        if (virtualized) {
+            if (typeof wrapStyle.width !== 'number') {
+                wrapStyle.width = x;
+            }
+        }
+
+        const wrapCls = classnames({
+            [`${prefixCls}-${strings.SIZE_SMALL}`]: size === strings.SIZE_SMALL,
+            [`${prefixCls}-${strings.SIZE_MIDDLE}`]: size === strings.SIZE_MIDDLE,
+            [`${prefixCls}-virtualized`]: Boolean(virtualized),
+            [`${prefixCls}-bordered`]: bordered,
+            [`${prefixCls}-fixed-header`]: Boolean(y),
+            [`${prefixCls}-scroll-position-left`]: ['both', 'left'].includes(this.position),
+            [`${prefixCls}-scroll-position-right`]: ['both', 'right'].includes(this.position),
+        });
+
+        // pagination
+        const tablePagination = pagination && propPagination ? this.renderPagination(pagination as TablePaginationProps, propRenderPagination) : null;
+        const paginationPosition = get(propPagination, 'position', 'bottom');
+
+        const tableContextValue: TableContextProps = {
+            ...this.context,
+            headWidths,
+            tableWidth,
+            anyColumnFixed,
+            flattenedColumns: flattenFnsColumns,
+            renderExpandIcon: this.renderExpandIcon,
+            renderSelection: this.renderSelection,
+            setHeadWidths: this.setHeadWidths,
+            getHeadWidths: this.getHeadWidths,
+            getCellWidths: this.getCellWidths,
+            handleRowExpanded: this.handleRowExpanded,
+            getVirtualizedListRef,
+            setBodyHasScrollbar: this.setBodyHasScrollbar,
+        };
+
+        return (
+            <div
+                ref={this.rootWrapRef}
+                className={classnames(className, `${prefixCls}-wrapper`)}
+                style={wrapStyle}
+                id={id}
+            >
+                <TableContextProvider {...tableContextValue}>
+                    <Spin spinning={loading} size="large">
+                        <div ref={this.wrapRef} className={wrapCls}>
+                            <React.Fragment key={'pagination-top'}>
+                                {['top', 'both'].includes(paginationPosition) ? tablePagination : null}
+                            </React.Fragment>
+                            {this.renderTitle({ title: (props as any).title, dataSource: props.dataSource, prefixCls: props.prefixCls })}
+                            <div className={`${prefixCls}-container`}>{this.renderMainTable({ ...props })}</div>
+                            <React.Fragment key={'pagination-bottom'}>
+                                {['bottom', 'both'].includes(paginationPosition) ? tablePagination : null}
+                            </React.Fragment>
+                        </div>
+                    </Spin>
+                </TableContextProvider>
+            </div>
+        );
+    }
+}
+
+export default Table;