@pinnacle0/web-ui 0.3.35 → 0.3.36

package/src/core/VirtualTable/TableRow.tsx

@@ -0,0 +1,90 @@
+import React from "react";
+import {classNames} from "../../util/ClassNames";
+import type {VirtualItem} from "react-virtual";
+import type {ColumnFixedPosition, VirtualTableColumn, VirtualTableRowExpand, StickyPosition} from "./type";
+
+interface Props<RowType extends object> {
+    data: RowType;
+    columns: VirtualTableColumn<RowType>[];
+    virtualItem: VirtualItem;
+    columnWidths: number[];
+    rowHeight: number;
+    lastShownColumnIndex: number;
+    scrollBarSize: number;
+    stickyPosition: Record<number, StickyPosition>;
+    getFixedColumnClassNames: (fixed: ColumnFixedPosition | undefined, columnIndex: number) => (string | undefined)[];
+    rowClassName?: string;
+    onRowClick?: (record: RowType, rowIndex: number) => void;
+    rowExpand?: VirtualTableRowExpand<RowType>;
+}
+
+export const TableRow = Object.assign(
+    function <RowType extends object>({
+        virtualItem,
+        getFixedColumnClassNames,
+        data,
+        columns,
+        columnWidths,
+        rowHeight,
+        scrollBarSize,
+        stickyPosition,
+        lastShownColumnIndex,
+        rowClassName,
+        onRowClick,
+        rowExpand,
+    }: Props<RowType>) {
+        const rowRef = React.useRef<HTMLDivElement>(null);
+        const [isExpanded, setIsExpanded] = React.useState(rowExpand?.isDefaultExpanded || false);
+        const rowIndex = virtualItem.index;
+
+        const toggleExpendRow = React.useCallback(() => setIsExpanded(!isExpanded), [isExpanded]);
+
+        React.useEffect(() => {
+            if (rowRef.current) {
+                virtualItem.measureRef(rowRef.current);
+            }
+        }, [isExpanded, virtualItem]);
+
+        return (
+            <div
+                ref={rowRef}
+                key={rowIndex}
+                className={classNames("table-row", rowClassName, rowIndex % 2 ? "odd" : "even")}
+                style={{transform: `translateY(${virtualItem.start}px)`}}
+                onClick={() => onRowClick?.(data, rowIndex)}
+            >
+                {columns.map((column, columnIndex) => {
+                    const colSpan = column.colSpan ? column.colSpan(data, rowIndex, columnIndex) : 1;
+                    // handle colspan > 1
+                    const cellWidth = colSpan > 1 ? columnWidths.slice(columnIndex, columnIndex + colSpan).reduce((acc, curr) => acc + curr, 0) : columnWidths[columnIndex] || column.width;
+
+                    const renderData =
+                        column.display !== "hidden" && (rowExpand && columnIndex === columns.length - 1 ? <rowExpand.ExpandButton onClick={toggleExpendRow} /> : column.renderData(data, rowIndex));
+                    // minus the scroll bar size of the last column & minus the scroll bar size in the right sticky value of the right fixed columns
+                    const isLastShownColumn = lastShownColumnIndex === columnIndex;
+                    const stickyPositionValue = stickyPosition[columnIndex]?.value || 0;
+
+                    return (
+                        renderData && (
+                            <div
+                                className={classNames("table-cell", ...getFixedColumnClassNames(column.fixed, columnIndex))}
+                                key={columnIndex}
+                                style={{
+                                    height: rowHeight,
+                                    width: cellWidth - (isLastShownColumn ? scrollBarSize : 0),
+                                    textAlign: column.align,
+                                    left: column.fixed === "left" ? stickyPositionValue : undefined,
+                                    right: column.fixed === "right" ? stickyPositionValue - (isLastShownColumn ? 0 : scrollBarSize) : undefined,
+                                }}
+                            >
+                                {renderData}
+                            </div>
+                        )
+                    );
+                })}
+                {rowExpand && <div className={classNames("expand-row", {expanded: isExpanded})}>{rowExpand.renderExpandRow(data, rowIndex)}</div>}
+            </div>
+        );
+    },
+    {displayName: "TableRow"}
+);

package/src/core/VirtualTable/hooks/useColumnWidths.ts

@@ -0,0 +1,24 @@
+import React from "react";
+
+/**
+ *
+ * If the Virtual Table is render inside a container with open animation e.g. <Modal />,
+ * the colWidths may be calculated during the transition and get the wrong width with useState & useEffect
+ * useLayoutEffect will be trigged in the transition process and get the final correct column widths
+ */
+
+export const useColumnWidths = (headersRef: React.RefObject<HTMLDivElement>) => {
+    const [colWidths, setColWidths] = React.useState<number[]>([]);
+
+    const calculateColWidths = React.useCallback(() => {
+        if (!headersRef.current) return;
+        const headers = headersRef.current.querySelectorAll(".table-header");
+        const widths: number[] = Array.prototype.slice.call(headers).map(header => {
+            const {width} = header.getBoundingClientRect();
+            return width;
+        });
+        setColWidths(widths);
+    }, [headersRef]);
+
+    return {columnWidths: colWidths, calculateColWidths};
+};

package/src/core/VirtualTable/hooks/useDebounce.ts

@@ -0,0 +1,18 @@
+import React from "react";
+
+export const useDebounce = function <Param extends any[]>(callback: (...args: Param) => void) {
+    const idRef = React.useRef<number>();
+
+    const debounce = () => {
+        return function (...args: Param) {
+            clearTimeout(idRef.current);
+            idRef.current = window.setTimeout(() => {
+                callback(...args);
+            }, 100);
+        };
+    };
+
+    React.useEffect(() => () => clearTimeout(idRef.current), []);
+    // eslint-disable-next-line react-hooks/exhaustive-deps -- callback is not allow to changed
+    return React.useMemo(() => debounce(), []);
+};

package/src/core/VirtualTable/hooks/useLayout.tsx

@@ -0,0 +1,58 @@
+import React from "react";
+import {useDebounce} from "./useDebounce";
+import {useScrollBarSize} from "./useScrollBarSize";
+import {useColumnWidths} from "./useColumnWidths";
+import {useStickyPosition} from "./useStickyPosition";
+import {useScrollToEdge} from "./useScrollToEdge";
+import type {VirtualTableColumn} from "../type";
+
+interface Props<RowType extends object> {
+    headersRef: React.RefObject<HTMLDivElement>;
+    scrollContentRef: React.RefObject<HTMLDivElement>;
+    isScrollable: boolean;
+    columns: VirtualTableColumn<RowType>[];
+}
+
+export const useLayout = function <RowType extends object>({headersRef, scrollContentRef, isScrollable, columns}: Props<RowType>) {
+    const {calculateColWidths, columnWidths} = useColumnWidths(headersRef);
+    const {calculateScrollBarSize, scrollBarSize} = useScrollBarSize(scrollContentRef, isScrollable);
+    const {isScrollToEdge, isScrollToLeft, isScrollToRight} = useScrollToEdge(scrollContentRef);
+    const stickyPosition = useStickyPosition(columns, columnWidths);
+
+    const debouncedCalculateColWidths = useDebounce(calculateColWidths);
+    const debouncedCalculateScrollBarSize = useDebounce(calculateScrollBarSize);
+    const debouncedIsScrollToEdge = useDebounce(isScrollToEdge);
+
+    const handler = React.useCallback(
+        (event: TransitionEvent | AnimationEvent) => {
+            if (event.currentTarget && "querySelector" in event.currentTarget && headersRef.current) {
+                const element = event.currentTarget as HTMLElement;
+                const result = element.querySelector(".g-virtual-table");
+                if (result) {
+                    debouncedCalculateColWidths();
+                    debouncedCalculateScrollBarSize();
+                    debouncedIsScrollToEdge();
+                }
+            }
+        },
+        [debouncedCalculateColWidths, debouncedCalculateScrollBarSize, headersRef, debouncedIsScrollToEdge]
+    );
+
+    React.useEffect(() => {
+        document.body.addEventListener("transitionend", handler);
+        document.body.addEventListener("animationend", handler);
+        return () => {
+            document.body.removeEventListener("transitionend", handler);
+            document.body.removeEventListener("animationend", handler);
+        };
+    }, [handler]);
+
+    return {
+        columnWidths,
+        scrollBarSize,
+        stickyPosition,
+        isScrollToEdge,
+        isScrollToLeft,
+        isScrollToRight,
+    };
+};

package/src/core/VirtualTable/hooks/useRowExpand.tsx

@@ -0,0 +1,27 @@
+import React from "react";
+import type {VirtualTableRowExpand, VirtualTableColumn} from "../type";
+
+interface Props<RowType extends object> {
+    columns: VirtualTableColumn<RowType>[];
+    rowExpand?: VirtualTableRowExpand<RowType>;
+}
+
+export const useRowExpand = function <RowType extends object>({columns, rowExpand}: Props<RowType>) {
+    const transformedColumns = React.useMemo(() => {
+        const resultColumns = columns;
+        if (rowExpand) {
+            const {width, fixed, title} = rowExpand;
+
+            const rowExpandColumn: VirtualTableColumn<RowType> = {
+                width,
+                title: title || "",
+                fixed: fixed ? "right" : undefined,
+                renderData: () => null,
+            };
+            resultColumns.push(rowExpandColumn);
+        }
+        return resultColumns;
+    }, [columns, rowExpand]);
+
+    return transformedColumns;
+};

package/src/core/VirtualTable/hooks/useRowSelection.tsx

@@ -0,0 +1,72 @@
+import React from "react";
+import {Checkbox} from "../../Checkbox";
+import {ArrayUtil} from "../../../internal/ArrayUtil";
+import type {VirtualTableColumn, VirtualTableRowSelection} from "../type";
+
+interface Props<RowType extends object> {
+    columns: VirtualTableColumn<RowType>[];
+    dataSource: RowType[];
+    rowSelection?: VirtualTableRowSelection<RowType>;
+    rowKey: "index" | React.Key;
+}
+
+export const useRowSelection = function <RowType extends object>({columns, dataSource, rowSelection, rowKey}: Props<RowType>) {
+    const transformedColumns = React.useMemo(() => {
+        if (!rowSelection) {
+            return [...columns];
+        }
+
+        const {width, onChange, selectedRowKeys, fixed, isDisabled, isSelectAllDisabled, title} = rowSelection;
+
+        const allSelectionRowKeys: React.Key[] = [];
+        const allSelectionRows: RowType[] = [];
+        const unAllSelectionRowKeys: React.Key[] = [];
+        const unAllSelectionRows: RowType[] = [];
+        const enabledRowKeys: React.Key[] = [];
+        const enabledCheckedRowKeys: React.Key[] = [];
+
+        dataSource.forEach((data, rowIndex) => {
+            const key = rowKey === "index" ? rowIndex : data[rowKey];
+            const isSelected = selectedRowKeys.findIndex(_ => _ === key) !== -1;
+            const isDisabledRow = isDisabled?.(data, rowIndex) || false;
+            if (isDisabledRow) {
+                if (isSelected) {
+                    allSelectionRowKeys.push(key);
+                    allSelectionRows.push(data[rowIndex]);
+                    unAllSelectionRowKeys.push(key);
+                    unAllSelectionRows.push(data[rowIndex]);
+                }
+            } else {
+                enabledRowKeys.push(key);
+                isSelected && enabledCheckedRowKeys.push(key);
+                allSelectionRowKeys.push(key);
+                allSelectionRows.push(data[rowIndex]);
+            }
+        });
+
+        const onSelectAll = (val: boolean) => {
+            return val ? onChange(allSelectionRowKeys, allSelectionRows) : onChange(unAllSelectionRowKeys, unAllSelectionRows);
+        };
+
+        const isAllSelectionDisabled = isSelectAllDisabled || enabledRowKeys.length === 0;
+        const isAllSelected = enabledCheckedRowKeys.length > 0 && enabledRowKeys.length === enabledCheckedRowKeys.length;
+        const isIndeterminate = enabledCheckedRowKeys.length > 0 && !isAllSelected;
+
+        const rowSelectionColumn: VirtualTableColumn<RowType> = {
+            width,
+            fixed: fixed ? "left" : undefined,
+            title: title || <Checkbox disabled={isAllSelectionDisabled} indeterminate={isIndeterminate} onChange={onSelectAll} value={isAllSelected} />,
+            renderData: (data, rowIndex) => {
+                const key = rowKey === "index" ? rowIndex : data[rowKey];
+                const toggledSelectedRowKeys = ArrayUtil.toggleElement(selectedRowKeys, key);
+                const toggledSelectedRow = ArrayUtil.toggleElement(dataSource, data);
+                const isChecked = selectedRowKeys.findIndex(_ => _ === key) !== -1;
+                return <Checkbox disabled={isDisabled?.(data, rowIndex)} value={isChecked} onChange={() => onChange(toggledSelectedRowKeys, toggledSelectedRow)} />;
+            },
+        };
+
+        return [rowSelectionColumn, ...columns];
+    }, [columns, dataSource, rowKey, rowSelection]);
+
+    return transformedColumns;
+};

package/src/core/VirtualTable/hooks/useScrollBarSize.ts

@@ -0,0 +1,23 @@
+import React from "react";
+
+export const useScrollBarSize = (scrollContentRef: React.RefObject<HTMLDivElement>, isScrollable: boolean) => {
+    const [scrollBarSize, setScrollBarSize] = React.useState<number>(0);
+
+    const calculateScrollBarSize = React.useCallback(() => {
+        if (scrollContentRef.current) {
+            const {clientWidth, offsetWidth} = scrollContentRef.current;
+            setScrollBarSize(offsetWidth - clientWidth);
+        }
+    }, [scrollContentRef, setScrollBarSize]);
+
+    React.useEffect(() => {
+        if (isScrollable && !scrollBarSize) {
+            calculateScrollBarSize();
+        }
+    }, [calculateScrollBarSize, isScrollable, scrollBarSize]);
+
+    return {
+        calculateScrollBarSize,
+        scrollBarSize,
+    };
+};

package/src/core/VirtualTable/hooks/useScrollToEdge.ts

@@ -0,0 +1,36 @@
+import React, {useEffect} from "react";
+
+export const useScrollToEdge = (scrollContentRef: React.RefObject<HTMLElement>) => {
+    const [isScrollToLeft, setIsScrollToLeft] = React.useState(false);
+    const [isScrollToRight, setIsScrollToRight] = React.useState(false);
+    const [isScrollToTop, setIsScrollToTop] = React.useState(false);
+    const [isScrollToBottom, setIsScrollToBottom] = React.useState(false);
+
+    const isScrollToEdge = React.useCallback(() => {
+        if (scrollContentRef.current) {
+            const {scrollLeft, scrollWidth, clientWidth, scrollTop, scrollHeight, clientHeight} = scrollContentRef.current;
+            const isScrollLeft = scrollLeft <= 1;
+            const isScrollRight = scrollLeft >= scrollWidth - clientWidth;
+
+            const isScrollTop = scrollTop <= 1;
+            const isScrollBottom = scrollTop >= scrollHeight - clientHeight;
+            setIsScrollToLeft(isScrollLeft);
+            setIsScrollToRight(isScrollRight);
+            setIsScrollToTop(isScrollTop);
+            setIsScrollToBottom(isScrollBottom);
+        }
+    }, [scrollContentRef]);
+
+    // initialize
+    useEffect(() => {
+        isScrollToEdge();
+    }, [isScrollToEdge]);
+
+    return {
+        isScrollToEdge,
+        isScrollToLeft,
+        isScrollToRight,
+        isScrollToTop,
+        isScrollToBottom,
+    };
+};

package/src/core/VirtualTable/hooks/useStickyPosition.ts

@@ -0,0 +1,28 @@
+import React from "react";
+import {ArrayUtil} from "../../../internal/ArrayUtil";
+import type {VirtualTableColumn, StickyPosition} from "../type";
+
+export const useStickyPosition = <RowType extends object>(columns: VirtualTableColumn<RowType>[], columnWidths: number[]): Record<number, StickyPosition> => {
+    return React.useMemo(() => {
+        const result: Record<number, StickyPosition> = {};
+        const left: number[] = [];
+        const right: number[] = [];
+
+        const leftFixedCols = ArrayUtil.compactMap(columns, (_, columnIndex) => (_.fixed === "left" ? {columnIndex, width: columnWidths[columnIndex]} : null));
+        // the right sticky value stack in reverse direction
+        const rightFixedCols = ArrayUtil.compactMap(columns, (_, columnIndex) => (_.fixed === "right" ? {columnIndex, width: columnWidths[columnIndex]} : null)).reverse();
+
+        leftFixedCols.forEach((column, idx) => {
+            const stackedPositionValue = left.reduce((acc, prev) => acc + prev, 0);
+            left.push(column.width);
+            result[column.columnIndex] = {value: stackedPositionValue, isLast: idx === leftFixedCols.length - 1};
+        });
+
+        rightFixedCols.forEach((column, idx) => {
+            const stackedPositionValue = right.reduce((acc, prev) => acc + prev, 0);
+            right.unshift(column.width);
+            result[column.columnIndex] = {value: stackedPositionValue, isLast: idx === rightFixedCols.length - 1};
+        });
+        return result;
+    }, [columnWidths, columns]);
+};

package/src/core/VirtualTable/hooks/useTransformColumn.ts

@@ -0,0 +1,19 @@
+import type React from "react";
+import {useRowExpand} from "./useRowExpand";
+import {useRowSelection} from "./useRowSelection";
+import type {VirtualTableColumn, VirtualTableRowExpand, VirtualTableRowSelection} from "../type";
+
+interface Props<RowType extends object> {
+    columns: VirtualTableColumn<RowType>[];
+    dataSource: RowType[];
+    rowKey: "index" | React.Key;
+    rowSelection?: VirtualTableRowSelection<RowType>;
+    rowExpand?: VirtualTableRowExpand<RowType>;
+}
+
+export const useTransformColumn = function <RowType extends object>({columns, dataSource, rowKey, rowExpand, rowSelection}: Props<RowType>) {
+    const columnsWithRowSelection = useRowSelection({columns, dataSource, rowSelection, rowKey});
+    const transformedColumns = useRowExpand({columns: columnsWithRowSelection, rowExpand});
+
+    return transformedColumns;
+};

package/src/core/VirtualTable/index.tsx

@@ -0,0 +1,143 @@
+import React from "react";
+import {useVirtual} from "react-virtual";
+import {classNames} from "../../util/ClassNames";
+import {Spin} from "../Spin";
+import {useLayout} from "./hooks/useLayout";
+import {useTransformColumn} from "./hooks/useTransformColumn";
+import {TableRow} from "./TableRow";
+import {TableHeader} from "./TableHeader";
+import type {SafeReactChild, StringKey} from "../../internal/type";
+import type {ColumnFixedPosition, VirtualTableColumn, VirtualTableRowExpand, VirtualTableRowSelection} from "./type";
+import "./index.less";
+
+export interface VirtualTableProps<RowType extends object> {
+    dataSource: RowType[];
+    columns: VirtualTableColumn<RowType>[];
+    scrollY: number;
+    rowHeight: number;
+    className?: string;
+    rowClassName?: string;
+    /**
+     * if scrollX is not provided, width: 100% will be used
+     * if width: 100% is used, please wrap the table with a container
+     */
+    scrollX?: number;
+    loading?: boolean;
+    emptyPlaceholder?: SafeReactChild;
+    rowSelection?: VirtualTableRowSelection<RowType>;
+    onRowClick?: (record: RowType, rowIndex: number) => void;
+    /**
+     * Default: index
+     */
+    rowKey?: StringKey<RowType> | "index";
+    headerHeight?: number;
+    rowExpand?: VirtualTableRowExpand<RowType>;
+}
+
+export const VirtualTable = Object.assign(
+    function <RowType extends object>({
+        columns,
+        rowHeight,
+        scrollY,
+        dataSource,
+        className,
+        rowClassName,
+        loading,
+        emptyPlaceholder,
+        rowSelection,
+        onRowClick,
+        scrollX,
+        rowExpand,
+        rowKey = "index",
+        headerHeight = 50,
+    }: VirtualTableProps<RowType>) {
+        const size = dataSource.length;
+        const scrollContentRef = React.useRef<HTMLDivElement>(null);
+        const headersRef = React.useRef<HTMLDivElement>(null);
+        const estimateSize = React.useCallback(() => rowHeight, [rowHeight]);
+        const overscan = rowExpand ? Math.floor(scrollY / rowHeight) : 1;
+
+        const {virtualItems, totalSize} = useVirtual({
+            size,
+            parentRef: scrollContentRef,
+            estimateSize,
+            overscan,
+        });
+        const transformedColumns = useTransformColumn({columns, dataSource, rowSelection, rowKey, rowExpand});
+
+        const isScrollable = totalSize > scrollY;
+        const tableHeight = scrollY + headerHeight;
+        const tableBodyHeight = scrollY;
+        const emptyElement = emptyPlaceholder || "暂无数据";
+        const {scrollBarSize, stickyPosition, columnWidths, isScrollToEdge, isScrollToLeft, isScrollToRight} = useLayout({headersRef, scrollContentRef, isScrollable, columns: transformedColumns});
+
+        const lastShownColumnIndex: number = React.useMemo(() => transformedColumns.length - 1 - [...transformedColumns].reverse().findIndex(_ => _.display !== "hidden"), [transformedColumns]);
+
+        // handle the edge position & shadow of the fixed columns
+        const getFixedColumnClassNames = React.useCallback(
+            (fixed: ColumnFixedPosition | undefined, columnIndex: number): (string | undefined)[] => {
+                const isFixedClassName = fixed ? "fixed" : "";
+                const isLastFixedClassName = fixed && stickyPosition[columnIndex]?.isLast ? "last" : "";
+                const fixedPositionClassName = fixed;
+                const hideShadowClassName = (fixed === "left" && isScrollToLeft) || (fixed === "right" && isScrollToRight) ? "hide-shadow" : "";
+                return [isFixedClassName, isLastFixedClassName, fixedPositionClassName, hideShadowClassName];
+            },
+            [isScrollToLeft, isScrollToRight, stickyPosition]
+        );
+
+        const onScroll = React.useCallback(() => {
+            requestAnimationFrame(() => {
+                // only trigger in horizontal direction
+                if (!scrollContentRef.current || !headersRef.current || scrollContentRef.current.scrollLeft === headersRef.current.scrollLeft) return;
+
+                isScrollToEdge();
+                // sync scrolling in header
+                headersRef.current.scrollLeft = scrollContentRef.current.scrollLeft;
+            });
+        }, [isScrollToEdge]);
+
+        return (
+            <div className={classNames("g-virtual-table", className)} style={{width: scrollX || "100%", height: tableHeight}}>
+                {loading && (
+                    <div className="mask">
+                        <Spin spinning={loading} />
+                    </div>
+                )}
+                <div className="scroll-content" ref={scrollContentRef} style={{height: tableBodyHeight, top: headerHeight}} onScroll={onScroll}>
+                    <div className="table" style={{height: totalSize}}>
+                        <TableHeader
+                            headersRef={headersRef}
+                            headerHeight={headerHeight}
+                            columns={transformedColumns}
+                            stickyPosition={stickyPosition}
+                            getFixedColumnClassNames={getFixedColumnClassNames}
+                        />
+                        <div className="table-body">
+                            {dataSource.length === 0
+                                ? emptyElement
+                                : columnWidths.length > 0 &&
+                                  virtualItems.map(virtualItem => (
+                                      <TableRow
+                                          key={virtualItem.index}
+                                          rowHeight={rowHeight}
+                                          onRowClick={onRowClick}
+                                          virtualItem={virtualItem}
+                                          data={dataSource[virtualItem.index]}
+                                          columns={transformedColumns}
+                                          columnWidths={columnWidths}
+                                          scrollBarSize={scrollBarSize}
+                                          stickyPosition={stickyPosition}
+                                          lastShownColumnIndex={lastShownColumnIndex}
+                                          rowClassName={rowClassName}
+                                          getFixedColumnClassNames={getFixedColumnClassNames}
+                                          rowExpand={rowExpand}
+                                      />
+                                  ))}
+                        </div>
+                    </div>
+                </div>
+            </div>
+        );
+    },
+    {displayName: "VirtualTable"}
+);

package/src/core/VirtualTable/type.ts

@@ -0,0 +1,59 @@
+import type {SafeReactChild, SafeReactChildren} from "../../internal/type";
+
+export type ColumnFixedPosition = "left" | "right";
+
+export interface StickyPosition {
+    value: number;
+    isLast: boolean;
+}
+
+/**
+ * Similar usage of Antd Table but only support partial features: fixed columns, row selection, on row click
+ */
+export type VirtualTableRowSelection<RowType extends object> = {
+    width: number;
+    selectedRowKeys: React.Key[];
+    onChange: (selectedRowKeys: React.Key[], selectedRows: RowType[]) => void;
+    /**
+     * Can only sticky in left
+     */
+    fixed?: boolean;
+    isDisabled?: (data: RowType, rowIndex: number) => boolean;
+    isSelectAllDisabled?: boolean;
+    /**
+     * Attention:
+     * If title is provided, the select all checkbox wil be overridden
+     */
+    title?: SafeReactChild;
+};
+
+export type VirtualTableRowExpand<RowType extends object> = {
+    width: number;
+    renderExpandRow: (record: RowType, rowIndex: number) => SafeReactChild;
+    ExpandButton: React.ComponentType<{onClick: () => void}>;
+    title?: SafeReactChild;
+    /**
+     * Can only sticky in right
+     */
+    fixed?: boolean;
+    isDefaultExpanded?: boolean;
+};
+
+export type VirtualTableColumn<RowType extends object> = {
+    title: SafeReactChild;
+    width: number;
+    /**
+     * Attention:
+     * If renderData return null, the corresponding table cell will not render
+     */
+    renderData: (record: RowType, rowIndex: number) => SafeReactChildren | undefined;
+    align?: "left" | "right" | "center";
+    display?: "default" | "hidden";
+    fixed?: "left" | "right";
+    /**
+     * Attention:
+     * The overridden cell should return null in renderData props:
+     * e.g. [{colSpan: 3, renderData: () => <div />}, {renderData: () => null}], {renderData: () => null}
+     */
+    colSpan?: (record: RowType, rowIndex: number, colIndex: number) => number;
+};

package/src/core/WithExplanation/index.tsx

@@ -0,0 +1,47 @@
+import React from "react";
+import {classNames} from "../../util/ClassNames";
+import {Tooltip} from "../Tooltip";
+import type {PickOptional, SafeReactChildren} from "../../internal/type";
+import type {TooltipPlacement} from "../Tooltip";
+import "./index.less";
+
+export interface Props {
+    /**
+     * If there are multiple children, they should handle inline display by self.
+     */
+    children?: SafeReactChildren;
+    /**
+     * If falsy, tooltip icon will hide.
+     */
+    explanation?: SafeReactChildren;
+    placement?: TooltipPlacement;
+    iconPosition?: "left" | "right";
+}
+
+export class WithExplanation extends React.PureComponent<Props> {
+    static displayName = "WithExplanation";
+
+    static defaultProps: PickOptional<Props> = {
+        iconPosition: "right",
+    };
+
+    render() {
+        const {children, explanation, iconPosition} = this.props;
+        if (explanation) {
+            return (
+                <div className={classNames("g-with-explanation", `with-icon-${iconPosition}`)}>
+                    {children}
+                    <Tooltip className="g-with-explanation-tooltip" title={Array.isArray(explanation) ? explanation.map((_, index) => <p key={index}>{_}</p>) : explanation}>
+                        <div className="icon-container">
+                            <svg viewBox="0 0 1024 1024">
+                                <path d="M512 0C229.322105 0 0 229.914947 0 512S229.322105 1024 512 1024 1024 794.085053 1024 512 794.677895 0 512 0z m45.972211 779.964632a65.428211 65.428211 0 0 1-45.972211 18.378105h-1.239579c-17.785263 0-34.330947-6.736842-46.565053-19.024842a65.320421 65.320421 0 0 1-19.024842-46.565053c0-19.024842 6.736842-34.330947 19.617685-46.618947 11.641263-12.234105 27.594105-18.378105 46.618947-18.378106h15.898947v1.832422c12.288 2.425263 23.336421 7.976421 31.258948 16.545684 12.288 12.288 19.024842 27.594105 19.024842 46.618947 0 18.378105-6.736842 34.330947-19.617684 47.21179z m96.309894-283.270737c-4.311579 5.497263-15.36 16.545684-60.092631 55.781052-11.048421 9.162105-19.671579 20.210526-25.168842 31.258948-6.144 11.641263-9.162105 23.929263-9.162106 38.642526v27.594105H454.332632v-27.594105c0-29.426526 4.850526-53.355789 15.306105-72.973474 10.401684-20.857263 36.163368-49.690947 80.949895-88.279579l11.048421-12.288c10.994526-13.473684 15.898947-26.947368 15.898947-40.421052 0-19.671579-5.497263-35.031579-15.898947-46.026105-10.455579-10.401684-26.408421-15.952842-47.21179-15.952843-25.761684 0-44.193684 7.383579-54.595368 22.689685-10.401684 14.120421-15.952842 34.330947-15.952842 61.33221v15.952842H339.698526v-15.952842c0-53.948632 15.952842-98.088421 47.804632-129.994105 31.905684-32.498526 76.692211-49.044211 131.880421-49.044211 48.397474 0 88.279579 13.473684 118.298947 40.421053 31.258947 27.001263 46.618947 64.404211 46.026106 111.023158 0 36.756211-9.808842 68.661895-29.426527 93.776842z" />
+                            </svg>
+                        </div>
+                    </Tooltip>
+                </div>
+            );
+        } else {
+            return children || "";
+        }
+    }
+}