import React from 'react'; import PropTypes from 'prop-types'; import GridTable from './GridTable'; import Column from './Column'; import ColumnManager from './ColumnManager'; import { getScrollbarSize as defaultGetScrollbarSize, getEstimatedTotalRowsHeight, noop } from './utils'; import type { ColumnShape, RowData, RowKey, ScrollArgs, RowsRenderedArgs, SortByShape, SortState, TableComponents, RowEventHandlers } from './types'; declare const getContainerStyle: (width: number, maxWidth: number, height: number) => React.CSSProperties; export interface BaseTableProps { classPrefix?: string; className?: string; style?: React.CSSProperties; children?: React.ReactNode; columns?: ColumnShape[]; data: RowData[]; frozenData?: RowData[]; rowKey: string | number; width: number; height?: number; maxHeight?: number; rowHeight?: number; estimatedRowHeight?: number | ((args: { rowData: RowData; rowIndex: number; }) => number); headerHeight: number | number[]; footerHeight?: number; fixed?: boolean; disabled?: boolean; overlayRenderer?: React.ComponentType | React.ReactElement; emptyRenderer?: React.ComponentType | React.ReactElement; footerRenderer?: React.ComponentType | React.ReactElement; headerRenderer?: React.ComponentType | React.ReactElement; rowRenderer?: React.ComponentType | React.ReactElement; headerClassName?: string | ((args: { columns: ColumnShape[]; headerIndex: number; }) => string); rowClassName?: string | ((args: { columns: ColumnShape[]; rowData: RowData; rowIndex: number; }) => string); headerProps?: Record | ((args: { columns: ColumnShape[]; headerIndex: number; }) => Record); headerCellProps?: Record | ((args: { columns: ColumnShape[]; column: ColumnShape; columnIndex: number; headerIndex: number; }) => Record); rowProps?: Record | ((args: { columns: ColumnShape[]; rowData: RowData; rowIndex: number; }) => Record); cellProps?: Record | ((args: { columns: ColumnShape[]; column: ColumnShape; columnIndex: number; rowData: RowData; rowIndex: number; }) => Record); expandIconProps?: Record | ((args: { rowData: RowData; rowIndex: number; depth: number; expandable: boolean; expanded: boolean; }) => Record); expandColumnKey?: string; defaultExpandedRowKeys?: RowKey[]; expandedRowKeys?: RowKey[]; onRowExpand?: (args: { expanded: boolean; rowData: RowData; rowIndex: number; rowKey: RowKey; }) => void; onExpandedRowsChange?: (expandedRowKeys: RowKey[]) => void; sortBy?: SortByShape; sortState?: SortState; onColumnSort?: (args: { column: ColumnShape; key: string; order: string; }) => void; onColumnResize?: (args: { column: ColumnShape; width: number; }) => void; onColumnResizeEnd?: (args: { column: ColumnShape; width: number; }) => void; useIsScrolling?: boolean; overscanRowCount?: number; getScrollbarSize?: () => number; onScroll?: (args: ScrollArgs) => void; onEndReached?: (args: { distanceFromEnd: number; }) => void; onEndReachedThreshold?: number; onRowsRendered?: (args: RowsRenderedArgs) => void; onScrollbarPresenceChange?: (args: { size: number; horizontal: boolean; vertical: boolean; }) => void; rowEventHandlers?: RowEventHandlers; ignoreFunctionInColumnCompare?: boolean; components?: TableComponents; } interface BaseTableState { scrollbarSize: number; hoveredRowKey: RowKey | null; resizingKey: string | null; resizingWidth: number; expandedRowKeys: RowKey[]; } /** * React table component */ declare class BaseTable extends React.PureComponent { static Column: typeof Column; static PlaceholderKey: string; static defaultProps: { classPrefix: string; rowKey: string; data: never[]; frozenData: never[]; fixed: boolean; headerHeight: number; rowHeight: number; footerHeight: number; defaultExpandedRowKeys: never[]; sortBy: {}; useIsScrolling: boolean; overscanRowCount: number; onEndReachedThreshold: number; getScrollbarSize: typeof defaultGetScrollbarSize; ignoreFunctionInColumnCompare: boolean; onScroll: typeof noop; onRowsRendered: typeof noop; onScrollbarPresenceChange: typeof noop; onRowExpand: typeof noop; onExpandedRowsChange: typeof noop; onColumnSort: typeof noop; onColumnResize: typeof noop; onColumnResizeEnd: typeof noop; }; static propTypes: { /** * Prefix for table's inner className */ classPrefix: PropTypes.Requireable; /** * Class name for the table */ className: PropTypes.Requireable; /** * Custom style for the table */ style: PropTypes.Requireable; /** * A collection of Column */ children: PropTypes.Requireable; /** * Columns for the table */ columns: PropTypes.Requireable<(PropTypes.InferProps | null | undefined)[]>; /** * The data for the table */ data: PropTypes.Validator; /** * The data be frozen to top, `rowIndex` is negative and started from `-1` */ frozenData: PropTypes.Requireable; /** * The key field of each data item */ rowKey: PropTypes.Validator>>; /** * The width of the table */ width: PropTypes.Validator; /** * The height of the table, will be ignored if `maxHeight` is set */ height: PropTypes.Requireable; /** * The max height of the table, the table's height will auto change when data changes, * will turns to vertical scroll if reaches the max height */ maxHeight: PropTypes.Requireable; /** * The height of each table row, will be only used by frozen rows if `estimatedRowHeight` is set */ rowHeight: PropTypes.Requireable; /** * Estimated row height, the real height will be measure dynamically according to the content * The callback is of the shape of `({ rowData, rowIndex }) => number` */ estimatedRowHeight: PropTypes.Requireable any) | null | undefined>>; /** * The height of the table header, set to 0 to hide the header, could be an array to render multi headers. */ headerHeight: PropTypes.Validator>>; /** * The height of the table footer */ footerHeight: PropTypes.Requireable; /** * Whether the width of the columns are fixed or flexible */ fixed: PropTypes.Requireable; /** * Whether the table is disabled */ disabled: PropTypes.Requireable; /** * Custom renderer on top of the table component */ overlayRenderer: PropTypes.Requireable any) | PropTypes.ReactElementLike | null | undefined>>; /** * Custom renderer when the length of data is 0 */ emptyRenderer: PropTypes.Requireable any) | PropTypes.ReactElementLike | null | undefined>>; /** * Custom footer renderer, available only if `footerHeight` is larger then 0 */ footerRenderer: PropTypes.Requireable any) | PropTypes.ReactElementLike | null | undefined>>; /** * Custom header renderer * The renderer receives props `{ cells, columns, headerIndex }` */ headerRenderer: PropTypes.Requireable any) | PropTypes.ReactElementLike | null | undefined>>; /** * Custom row renderer * The renderer receives props `{ isScrolling, cells, columns, rowData, rowIndex, depth }` */ rowRenderer: PropTypes.Requireable any) | PropTypes.ReactElementLike | null | undefined>>; /** * Class name for the table header, could be a callback to return the class name * The callback is of the shape of `({ columns, headerIndex }) => string` */ headerClassName: PropTypes.Requireable any) | null | undefined>>; /** * Class name for the table row, could be a callback to return the class name * The callback is of the shape of `({ columns, rowData, rowIndex }) => string` */ rowClassName: PropTypes.Requireable any) | null | undefined>>; /** * Extra props applied to header element * The handler is of the shape of `({ columns, headerIndex }) object` */ headerProps: PropTypes.Requireable; /** * Extra props applied to header cell element * The handler is of the shape of `({ columns, column, columnIndex, headerIndex }) => object` */ headerCellProps: PropTypes.Requireable; /** * Extra props applied to row element * The handler is of the shape of `({ columns, rowData, rowIndex }) => object` */ rowProps: PropTypes.Requireable; /** * Extra props applied to row cell element * The handler is of the shape of `({ columns, column, columnIndex, rowData, rowIndex }) => object` */ cellProps: PropTypes.Requireable; /** * Extra props applied to ExpandIcon component * The handler is of the shape of `({ rowData, rowIndex, depth, expandable, expanded }) => object` */ expandIconProps: PropTypes.Requireable; /** * The key for the expand column which render the expand icon if the data is a tree */ expandColumnKey: PropTypes.Requireable; /** * Default expanded row keys when initialize the table */ defaultExpandedRowKeys: PropTypes.Requireable<(NonNullable | null | undefined)[]>; /** * Controlled expanded row keys */ expandedRowKeys: PropTypes.Requireable<(NonNullable | null | undefined)[]>; /** * A callback function when expand or collapse a tree node * The handler is of the shape of `({ expanded, rowData, rowIndex, rowKey }) => *` */ onRowExpand: PropTypes.Requireable<(...args: any[]) => any>; /** * A callback function when the expanded row keys changed * The handler is of the shape of `(expandedRowKeys) => *` */ onExpandedRowsChange: PropTypes.Requireable<(...args: any[]) => any>; /** * The sort state for the table, will be ignored if `sortState` is set */ sortBy: PropTypes.Requireable; /** * Sort order */ order: PropTypes.Requireable<"asc" | "desc">; }>>; /** * Multiple columns sort state for the table * * example: * ```js * { * 'column-0': SortOrder.ASC, * 'column-1': SortOrder.DESC, * } * ``` */ sortState: PropTypes.Requireable; /** * A callback function for the header cell click event * The handler is of the shape of `({ column, key, order }) => *` */ onColumnSort: PropTypes.Requireable<(...args: any[]) => any>; /** * A callback function when resizing the column width * The handler is of the shape of `({ column, width }) => *` */ onColumnResize: PropTypes.Requireable<(...args: any[]) => any>; /** * A callback function when resizing the column width ends * The handler is of the shape of `({ column, width }) => *` */ onColumnResizeEnd: PropTypes.Requireable<(...args: any[]) => any>; /** * Adds an additional isScrolling parameter to the row renderer. * This parameter can be used to show a placeholder row while scrolling. */ useIsScrolling: PropTypes.Requireable; /** * Number of rows to render above/below the visible bounds of the list */ overscanRowCount: PropTypes.Requireable; /** * Custom scrollbar size measurement */ getScrollbarSize: PropTypes.Requireable<(...args: any[]) => any>; /** * A callback function when scrolling the table * The handler is of the shape of `({ scrollLeft, scrollTop, horizontalScrollDirection, verticalScrollDirection, scrollUpdateWasRequested }) => *` * * `scrollLeft` and `scrollTop` are numbers. * * `horizontalDirection` and `verticalDirection` are either `forward` or `backward`. * * `scrollUpdateWasRequested` is a boolean. This value is true if the scroll was caused by `scrollTo*`, * and false if it was the result of a user interaction in the browser. */ onScroll: PropTypes.Requireable<(...args: any[]) => any>; /** * A callback function when scrolling the table within `onEndReachedThreshold` of the bottom * The handler is of the shape of `({ distanceFromEnd }) => *` */ onEndReached: PropTypes.Requireable<(...args: any[]) => any>; /** * Threshold in pixels for calling `onEndReached`. */ onEndReachedThreshold: PropTypes.Requireable; /** * A callback function with information about the slice of rows that were just rendered * The handler is of the shape of `({ overscanStartIndex, overscanStopIndex, startIndex, stopIndex }) => *` */ onRowsRendered: PropTypes.Requireable<(...args: any[]) => any>; /** * A callback function when the scrollbar presence state changed * The handler is of the shape of `({ size, vertical, horizontal }) => *` */ onScrollbarPresenceChange: PropTypes.Requireable<(...args: any[]) => any>; /** * A object for the row event handlers * Each of the keys is row event name, like `onClick`, `onDoubleClick` and etc. * Each of the handlers is of the shape of `({ rowData, rowIndex, rowKey, event }) => *` */ rowEventHandlers: PropTypes.Requireable; /** * whether to ignore function properties while comparing column definition */ ignoreFunctionInColumnCompare: PropTypes.Requireable; /** * A object for the custom components, like `ExpandIcon` and `SortIndicator` */ components: PropTypes.Requireable; TableHeaderCell: PropTypes.Requireable; ExpandIcon: PropTypes.Requireable; SortIndicator: PropTypes.Requireable; }>>; }; columnManager: ColumnManager; tableNode: HTMLDivElement | null; table: GridTable | null; leftTable: GridTable | null; rightTable: GridTable | null; _isResetting: boolean; _resetIndex: number | null; _rowHeightMap: Record; _rowHeightMapBuffer: Record; _mainRowHeightMap: Record; _leftRowHeightMap: Record; _rightRowHeightMap: Record; _scroll: { scrollLeft: number; scrollTop: number; }; _scrollHeight: number; _lastScannedRowIndex: number; _hasDataChangedSinceEndReached: boolean; _data: RowData[]; _depthMap: Record; _horizontalScrollbarSize: number; _verticalScrollbarSize: number; _scrollbarPresenceChanged: boolean; _totalRowsHeight: number; _getLeftTableContainerStyle: typeof getContainerStyle; _getRightTableContainerStyle: typeof getContainerStyle; _flattenOnKeys: (tree: RowData[], keys: RowKey[], dataKey: string | number) => RowData[]; _resetColumnManager: (columns: ColumnShape[], fixed: boolean) => void; _getEstimatedTotalRowsHeight: typeof getEstimatedTotalRowsHeight; _getRowHeight: (rowIndex: number) => number; _updateRowHeights: () => void; constructor(props: BaseTableProps); /** * Get the DOM node of the table */ getDOMNode(): HTMLDivElement | null; /** * Get the column manager */ getColumnManager(): ColumnManager; /** * Get internal `expandedRowKeys` state */ getExpandedRowKeys(): RowKey[]; /** * Get the expanded state, fallback to normal state if not expandable. */ getExpandedState(): { expandedData: RowData[]; expandedRowKeys: RowKey[]; expandedDepthMap: Record; }; /** * Get the total height of all rows, including expanded rows. */ getTotalRowsHeight(): number; /** * Get the total width of all columns. */ getTotalColumnsWidth(): number; /** * Forcefully re-render the inner Grid component. */ forceUpdateTable(): void; /** * Reset cached offsets for positioning after a specific rowIndex */ resetAfterRowIndex(rowIndex?: number, shouldForceUpdate?: boolean): void; /** * Reset row height cache */ resetRowHeightCache(): void; /** * Scroll to the specified offset. */ scrollToPosition(offset: { scrollLeft: number; scrollTop: number; }): void; /** * Scroll to the specified offset vertically. */ scrollToTop(scrollTop: number): void; /** * Scroll to the specified offset horizontally. */ scrollToLeft(scrollLeft: number): void; /** * Scroll to the specified row. */ scrollToRow(rowIndex?: number, align?: string): void; /** * Set `expandedRowKeys` manually. */ setExpandedRowKeys(expandedRowKeys: RowKey[]): void; renderExpandIcon({ rowData, rowIndex, depth, onExpand, }: { rowData: RowData; rowIndex: number; depth: number; onExpand: (expanded: boolean) => void; }): React.JSX.Element | null; renderRow({ isScrolling, columns, rowData, rowIndex, style, }: { isScrolling: boolean; columns: ColumnShape[]; rowData: RowData; rowIndex: number; style: React.CSSProperties; }): React.JSX.Element; renderRowCell({ isScrolling, columns, column, columnIndex, rowData, rowIndex, expandIcon }: any): React.JSX.Element; renderHeader({ columns, headerIndex, style, }: { columns: ColumnShape[]; headerIndex: number; style: React.CSSProperties; }): React.JSX.Element; renderHeaderCell({ columns, column, columnIndex, headerIndex, expandIcon }: any): React.JSX.Element; renderMainTable(): React.JSX.Element; renderLeftTable(): React.JSX.Element | null; renderRightTable(): React.JSX.Element | null; renderResizingLine(): React.JSX.Element | null; renderFooter(): React.JSX.Element | null; renderEmptyLayer(): React.JSX.Element | null; renderOverlay(): React.JSX.Element; render(): React.JSX.Element; componentDidMount(): void; componentDidUpdate(prevProps: BaseTableProps, prevState: BaseTableState): void; _prefixClass(className: string): string; _setContainerRef(ref: HTMLDivElement | null): void; _setMainTableRef(ref: GridTable | null): void; _setLeftTableRef(ref: GridTable | null): void; _setRightTableRef(ref: GridTable | null): void; _getComponent(name: keyof TableComponents): React.ComponentType; __getRowHeight(rowIndex: number): number; _getIsResetting(): boolean; _getHeaderHeight(): number; _getFrozenRowsHeight(): number; _getTableHeight(): number; _getBodyHeight(): number; _getFrozenContainerHeight(): number; _calcScrollbarSizes(): void; _maybeScrollbarPresenceChange(): void; _maybeCallOnEndReached(): void; _handleScroll(args: any): void; _handleVerticalScroll({ scrollTop }: { scrollTop: number; }): void; _handleRowsRendered(args: RowsRenderedArgs): void; _handleRowHover({ hovered, rowKey }: { hovered: boolean; rowKey: RowKey; }): void; _handleRowExpand({ expanded, rowData, rowIndex, rowKey, }: { expanded: boolean; rowData: RowData; rowIndex: number; rowKey: RowKey; }): void; _handleColumnResize({ key }: { key: string; }, width: number): void; _handleColumnResizeStart({ key }: { key: string; }): void; _handleColumnResizeStop(): void; _handleColumnSort(event: React.MouseEvent): void; _handleFrozenRowHeightChange(rowKey: RowKey, size: number, rowIndex: number, frozen: any): void; _handleRowHeightChange(rowKey: RowKey, size: number, rowIndex: number): void; } export default BaseTable;