@douyinfe/semi-ui/lib/es/table/Table.d.ts

A modern, comprehensive, flexible design system and UI library. Connect DesignOps & DevOps. Quickly build beautiful React apps. Maintained by Douyin-fe team.

import React, { ReactNode } from 'react';
import PropTypes from 'prop-types';
import Store from '@douyinfe/semi-foundation/lib/es/utils/Store';
import TableFoundation, { TableAdapter, BasePageData, BaseRowKeyType, BaseHeadWidth } from '@douyinfe/semi-foundation/lib/es/table/foundation';
import { TableSelectionCellEvent } from '@douyinfe/semi-foundation/lib/es/table/tableSelectionCellFoundation';
import { strings } from '@douyinfe/semi-foundation/lib/es/table/constants';
import '@douyinfe/semi-foundation/lib/es/table/table.css';
import BaseComponent from '../_base/baseComponent';
import { TableContextProps } from './table-context';
import { HeadTableProps } from './HeadTable';
import { BodyProps } from './Body';
import { ColumnProps, TablePaginationProps, BodyScrollEvent, BodyScrollPosition, ExpandIcon, Pagination, RenderPagination, 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;
    prePagination?: Pagination;
    /**
    * Disabled row keys in sorted and filtered data
    */
    allDisabledRowKeys?: BaseRowKeyType[];
    /**
     * Disabled row keys set in sorted and filtered data
     */
    allDisabledRowKeysSet?: Set<BaseRowKeyType>;
}
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;
}
declare class Table<RecordType extends Record<string, any>> extends BaseComponent<NormalTableProps<RecordType>, NormalTableState<RecordType>> {
    static contextType: React.Context<TableContextProps>;
    static propTypes: {
        className: PropTypes.Requireable<string>;
        style: PropTypes.Requireable<object>;
        prefixCls: PropTypes.Requireable<string>;
        components: PropTypes.Requireable<any>;
        bordered: PropTypes.Requireable<boolean>;
        loading: PropTypes.Requireable<boolean>;
        size: PropTypes.Requireable<"default" | "small" | "middle">;
        tableLayout: PropTypes.Requireable<"" | "fixed" | "auto">;
        columns: PropTypes.Requireable<PropTypes.InferProps<{
            align: PropTypes.Requireable<"center" | "left" | "right">;
            className: PropTypes.Requireable<string>;
            colSpan: PropTypes.Requireable<number>;
            dataIndex: PropTypes.Requireable<string>;
            defaultSortOrder: PropTypes.Requireable<"ascend" | "descend">;
            filterChildrenRecord: PropTypes.Requireable<boolean>;
            filterDropdownProps: PropTypes.Requireable<object>;
            filterDropdown: PropTypes.Requireable<PropTypes.ReactNodeLike>;
            filterDropdownVisible: PropTypes.Requireable<boolean>;
            filterIcon: PropTypes.Requireable<(...args: any[]) => any>;
            filterMultiple: PropTypes.Requireable<boolean>;
            filteredValue: PropTypes.Requireable<any[]>;
            filters: PropTypes.Requireable<any[]>;
            fixed: PropTypes.Requireable<boolean | "left" | "right">;
            onCell: PropTypes.Requireable<(...args: any[]) => any>;
            onFilter: PropTypes.Requireable<(...args: any[]) => any>;
            onFilterDropdownVisibleChange: PropTypes.Requireable<(...args: any[]) => any>;
            onHeaderCell: PropTypes.Requireable<(...args: any[]) => any>;
            onSorterChange: PropTypes.Requireable<(...args: any[]) => any>;
            render: PropTypes.Requireable<(...args: any[]) => any>;
            renderFilterDropdownItem: PropTypes.Requireable<(...args: any[]) => any>;
            sortChildrenRecord: PropTypes.Requireable<boolean>;
            sortDirections: PropTypes.Requireable<string[]>;
            sortOrder: PropTypes.Requireable<NonNullable<string | boolean>>;
            sorter: PropTypes.Requireable<NonNullable<boolean | ((...args: any[]) => any)>>;
            title: PropTypes.Requireable<NonNullable<PropTypes.ReactNodeLike | ((...args: any[]) => any)>>;
            useFullRender: PropTypes.Requireable<boolean>;
            width: PropTypes.Requireable<NonNullable<string | number>>;
            showSortTip: PropTypes.Requireable<boolean>;
        }>[]>;
        hideExpandedColumn: PropTypes.Requireable<boolean>;
        id: PropTypes.Requireable<string>;
        expandIcon: PropTypes.Requireable<NonNullable<PropTypes.ReactNodeLike | ((...args: any[]) => any)>>;
        expandCellFixed: PropTypes.Requireable<boolean | "left" | "right">;
        title: PropTypes.Requireable<NonNullable<PropTypes.ReactNodeLike | ((...args: any[]) => any)>>;
        onHeaderRow: PropTypes.Requireable<(...args: any[]) => any>;
        showHeader: PropTypes.Requireable<boolean>;
        indentSize: PropTypes.Requireable<number>;
        rowKey: PropTypes.Requireable<NonNullable<string | number | ((...args: any[]) => any)>>;
        onRow: PropTypes.Requireable<(...args: any[]) => any>;
        onExpandedRowsChange: PropTypes.Requireable<(...args: any[]) => any>;
        onExpand: PropTypes.Requireable<(...args: any[]) => any>;
        rowExpandable: PropTypes.Requireable<(...args: any[]) => any>;
        expandedRowRender: PropTypes.Requireable<(...args: any[]) => any>;
        expandedRowKeys: PropTypes.Requireable<any[]>;
        defaultExpandAllRows: PropTypes.Requireable<boolean>;
        expandAllRows: PropTypes.Requireable<boolean>;
        defaultExpandAllGroupRows: PropTypes.Requireable<boolean>;
        expandAllGroupRows: PropTypes.Requireable<boolean>;
        defaultExpandedRowKeys: PropTypes.Requireable<any[]>;
        pagination: PropTypes.Requireable<NonNullable<boolean | object>>;
        renderPagination: PropTypes.Requireable<(...args: any[]) => any>;
        footer: PropTypes.Requireable<NonNullable<PropTypes.ReactNodeLike | ((...args: any[]) => any)>>;
        empty: PropTypes.Requireable<PropTypes.ReactNodeLike>;
        dataSource: PropTypes.Requireable<any[]>;
        childrenRecordName: PropTypes.Requireable<string>;
        rowSelection: PropTypes.Requireable<NonNullable<boolean | object>>;
        onChange: PropTypes.Requireable<(...args: any[]) => any>;
        scroll: PropTypes.Requireable<PropTypes.InferProps<{
            x: PropTypes.Requireable<NonNullable<string | number | boolean>>;
            y: PropTypes.Requireable<NonNullable<string | number>>;
        }>>;
        groupBy: PropTypes.Requireable<NonNullable<string | number | ((...args: any[]) => any)>>;
        renderGroupSection: PropTypes.Requireable<(...args: any[]) => any>;
        onGroupedRow: PropTypes.Requireable<(...args: any[]) => any>;
        clickGroupedRowToExpand: PropTypes.Requireable<boolean>;
        virtualized: PropTypes.Requireable<NonNullable<boolean | object>>;
        dropdownPrefixCls: PropTypes.Requireable<string>;
        expandRowByClick: PropTypes.Requireable<boolean>;
        getVirtualizedListRef: PropTypes.Requireable<(...args: any[]) => any>;
    };
    static defaultProps: {
        tableLayout: string;
        dataSource: [];
        prefixCls: "semi-table";
        rowSelection: null;
        className: string;
        childrenRecordName: string;
        size: string;
        loading: boolean;
        bordered: boolean;
        expandCellFixed: boolean;
        hideExpandedColumn: boolean;
        showHeader: boolean;
        indentSize: 20;
        onChange: (...args: any[]) => void;
        pagination: boolean;
        rowKey: string;
        defaultExpandedRowKeys: [];
        defaultExpandAllRows: boolean;
        defaultExpandAllGroupRows: boolean;
        expandAllRows: boolean;
        expandAllGroupRows: boolean;
        onFilterDropdownVisibleChange: (...args: any[]) => void;
        onExpand: (...args: any[]) => void;
        onExpandedRowsChange: (...args: any[]) => void;
        expandRowByClick: boolean;
    };
    get adapter(): TableAdapter<RecordType>;
    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>;
    context: TableContextProps;
    constructor(props: NormalTableProps<RecordType>, context: TableContextProps);
    static getDerivedStateFromProps(props: NormalTableProps, state: NormalTableState): Partial<NormalTableState<Data>>;
    componentDidMount(): void;
    componentDidUpdate(prevProps: NormalTableProps<RecordType>, prevState: NormalTableState<RecordType>): void;
    componentWillUnmount(): void;
    _warnIfNoKey: () => void;
    _invokeRowSelection: (funcName: string, ...args: any[]) => void;
    _invokeColumnFn: (key: string, funcName: string, ...args: any[]) => void;
    _cacheHeaderRef: (node: HTMLDivElement) => void;
    getCurrentPageData: () => Pick<BasePageData<RecordType>, "dataSource" | "groups">;
    getColumns: (columns: ColumnProps<RecordType>[], children: ReactNode) => ColumnProps<RecordType>[];
    getCellWidths: (...args: any[]) => number[];
    setHeadWidths: (...args: any[]) => void;
    getHeadWidths: (...args: any[]) => number[];
    mergedRowExpandable: (...args: any[]) => boolean;
    setBodyHasScrollbar: (...args: any[]) => void;
    handleWheel: (event: React.WheelEvent<HTMLDivElement>) => void;
    handleBodyScrollLeft: (e: BodyScrollEvent) => void;
    handleWindowResize: () => void;
    handleBodyScrollTop: (e: BodyScrollEvent) => void;
    handleBodyScroll: (e: BodyScrollEvent) => void;
    setScrollPosition: (position: BodyScrollPosition) => void;
    setScrollPositionClassName: () => void;
    syncTableWidth: () => void;
    renderSelection: (record?: any, inHeader?: boolean, index?: number) => React.ReactNode;
    renderRowSelectionCallback: (text: string, record: RecordType, index: number) => React.ReactNode;
    renderTitleSelectionCallback: () => React.ReactNode;
    normalizeSelectionColumn: (props?: {
        rowSelection?: TableStateRowSelection<RecordType>;
        prefixCls?: string;
    }) => ColumnProps<any>;
    normalizeScrollbarColumn: (props?: {
        scrollbarWidth?: number;
    }) => {
        key: 'column-scrollbar';
        width: number;
        fixed: 'right';
    };
    /**
     * render expand icon
     * @param {Object} record
     * @param {Boolean} isNested
     * @param {String} groupKey
     * @returns {ReactNode}
     */
    renderExpandIcon: (record?: {}, isNested?: boolean, groupKey?: string | number) => React.JSX.Element;
    handleRowExpanded: (...args: any[]) => void;
    normalizeExpandColumn: (props?: {
        prefixCls?: string;
        expandCellFixed?: ArrayElement<typeof strings.FIXED_SET>;
        expandIcon?: ExpandIcon;
    }) => ColumnProps<any>;
    /**
      * 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) => ColumnProps<any>;
    toggleSelectRow: (selected: boolean, realKey: string | number, e: TableSelectionCellEvent) => void;
    toggleSelectAllRow: (selected: boolean, e: TableSelectionCellEvent) => void;
    /**
     * render pagination
     * @param {object} pagination
     * @param {object} propRenderPagination
     */
    renderPagination: (pagination: TablePaginationProps, propRenderPagination: RenderPagination) => React.JSX.Element;
    renderTitle: (props?: {
        title?: React.ReactNode | ((dataSource?: RecordType[]) => ReactNode);
        prefixCls?: string;
        dataSource?: any[];
    }) => React.JSX.Element;
    renderEmpty: (props?: {
        prefixCls?: string;
        empty?: ReactNode;
        dataSource?: RecordType[];
    }) => React.JSX.Element;
    renderFooter: (props?: {
        footer?: React.ReactNode | ((dataSource?: RecordType[]) => ReactNode);
        prefixCls?: string;
        dataSource?: RecordType[];
    }) => React.JSX.Element;
    renderMainTable: (props: any) => (React.JSX.Element | React.JSX.Element[])[];
    renderTable: (props: RenderTableProps<RecordType>) => React.JSX.Element[];
    /**
     * 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>[]) => ColumnProps<RecordType>[];
    /**
     * Convert children to columns object
     * @param {Array} columns
     * @param {ReactNode} children
     * @returns {Array}
     */
    normalizeColumns: (columns: ColumnProps<RecordType>[], children: ReactNode) => ColumnProps<RecordType>[];
    /**
     * Combine pagination and table paging processing functions
     */
    mergePagination: (pagination: TablePaginationProps) => {
        position?: "both" | "top" | "bottom";
        formatPageText?: import("./interface").FormatPageText;
        style?: React.CSSProperties;
        className?: string;
        children?: any;
        total?: number;
        showTotal?: boolean;
        pageSize?: number;
        pageSizeOpts?: number[];
        size?: "default" | "small";
        currentPage?: number;
        defaultCurrentPage?: number;
        onPageChange?: (currentPage: number) => void;
        onPageSizeChange?: (newPageSize: number) => void;
        onChange: (currentPage: number, pageSize: number) => void;
        prevText?: React.ReactNode;
        nextText?: React.ReactNode;
        showSizeChanger?: boolean;
        showQuickJumper?: boolean;
        popoverZIndex?: number;
        popoverPosition?: "left" | "top" | "right" | "bottom" | "topLeft" | "topRight" | "leftTop" | "leftBottom" | "rightTop" | "rightBottom" | "bottomLeft" | "bottomRight" | "leftTopOver" | "rightTopOver" | "leftBottomOver" | "rightBottomOver";
        hideOnSinglePage?: boolean;
        hoverShowPageSelect?: boolean;
        disabled?: boolean;
    };
    render(): React.JSX.Element;
}
export default Table;