@mezzanine-ui/react 1.0.0-alpha.0 → 1.0.0-beta.0

package/Table/Table.d.ts

@@ -1,110 +1,91 @@
-import { ReactNode } from 'react';
-import { TableColumn, TableComponents, TableDataSource, TableRowSelection, TableExpandable, TableFetchMore, TablePagination as TablePaginationType, TableRefresh as TableRefreshType, ExpandRowBySources, TableScrolling, TableDraggable } from '@mezzanine-ui/core/table';
-import { EmptyProps } from '../Empty';
-import { NativeElementPropsWithoutKeyAndRef } from '../utils/jsx-types';
-export interface TableBaseProps<T> extends Omit<NativeElementPropsWithoutKeyAndRef<'div'>, 'role' | 'draggable'> {
-    /**
-     * customized body className
-     */
-    bodyClassName?: string;
-    /**
-     * customized body row className
-     */
-    bodyRowClassName?: string | ((source: T) => string);
-    /**
-     * Columns of table <br />
-     * `column.render` allowed customizing the column body cell rendering. <br />
-     * `column.renderTitle` allowed customizing the column header cell rendering. <br />
-     * `column.sorter` is the sorting method that you want to apply to your column. <br />
-     * `column.onSorted` is the callback triggered whenever sort icon clicked.
-     */
+import { TableSize, type HighlightMode, type TableColumn, type TableDataSource, type TableDraggable, type TableExpandable, type TableRowSelection, type TableScroll } from '@mezzanine-ui/core/table';
+import type { NativeElementPropsWithoutKeyAndRef } from '../utils/jsx-types';
+import { type TableTransitionState } from './TableContext';
+import { TablePaginationProps } from './components/TablePagination';
+import type { EmptyProps } from '../Empty';
+export interface TableBaseProps<T extends TableDataSource = TableDataSource> extends Omit<NativeElementPropsWithoutKeyAndRef<'table'>, 'children' | 'draggable' | 'summary' | 'onChange'> {
+    /** Column configuration */
     columns: TableColumn<T>[];
-    /**
-     * Custom table components <br />
-     */
-    components?: TableComponents;
-    /**
-     * Data record array to be displayed. <br />
-     * Notice that each source should contain `key` or `id` prop as data primary key.
-     */
-    dataSource: TableDataSource[];
-    /**
-     * Draggable table row. This feature allows sort items by mouse dragging. Not supported when `fetchMore` is enabled and also buggy when use finger touch (mobile device).
-     * When `draggable.enabled` is true, draggable will be enabled.
-     * `draggable.onDragEnd` return new dataSource for you
-     */
-    draggable?: TableDraggable;
-    /**
-     * props exported from `<Empty />` component.
-     */
+    /** Data source */
+    dataSource: T[];
+    /** Props for Empty component when no data */
     emptyProps?: EmptyProps;
-    /**
-     * When `expandable.rowExpandable` is given, it will control whether row data is expandable or not
-     * `expandable.expandedRowRender` is a callback to helps you decides what data should be rendered.
-     */
-    expandable?: Omit<TableExpandable<T>, 'expandedRowRender'> & {
-        expandedRowRender(record: T): ReactNode | ExpandRowBySources;
-    };
-    /**
-     * customized header className
-     */
-    headerClassName?: string;
-    /**
-     * Whether table is loading or not
+    /** Expandable row configuration */
+    expandable?: TableExpandable<T>;
+    /** Highlight mode for hover effects
+     * @default 'row'
      */
+    highlight?: HighlightMode;
+    /** Loading state */
     loading?: boolean;
+    /** Number of rows to display when loading */
+    loadingRowsCount?: number;
     /**
-     * When loading is true, show specific loadingTip
-     * @default '資料載入中...'
+     * Whether the table is nested inside an expanded row content area
      */
-    loadingTip?: string;
+    nested?: boolean;
+    /** Pagination configuration */
+    pagination?: TablePaginationProps;
     /**
-     * `refresh.show` is true, refresh button will display at the top-start of table. <br />
-     * `refresh.onClick` is the callback of the refresh button.
+     * Whether columns are resizable by user interaction
+     * @default false
      */
-    refresh?: TableRefreshType;
+    resizable?: boolean;
     /**
-     * Enable row selection feature <br />
-     * `rowSelection.selectedRowKey` is the dataSource keys that are currently selected. <br />
-     * `rowSelection.onChange` is the callback when selection changed. <br />
-     * `rowSelection.actions` are the actions that you want to do for selected data.
+     * Row height preset token.
      */
-    rowSelection?: TableRowSelection;
-    /**
-     * Enable table scroll feature <br />
-     * `scroll.x` set horizontal scrolling, can also be used to specify the width of the scroll area <br />
-     * `scroll.y` Set vertical scrolling, can also be used to specify the height of the scroll area <br />
-     * `scroll.fixedFirstColumn` set first column fixed when horizontal scrolling.
+    rowHeightPreset?: 'base' | 'condensed' | 'detailed' | 'roomy';
+    /** Row selection configuration */
+    rowSelection?: TableRowSelection<T>;
+    /** Show header row */
+    showHeader?: boolean;
+    /** Custom size variant
+     * @default 'main'
      */
-    scroll?: TableScrolling;
-    /**
-     * customize scroll container className
+    size?: TableSize;
+    /** Whether to enable sticky header
+     *  @default true
      */
-    scrollContainerClassName?: string;
+    sticky?: boolean;
+    /** Transition state for row add/remove animations (from useTableDataSource hook) */
+    transitionState?: TableTransitionState;
 }
-export interface TableWithFetchMore<T> extends TableBaseProps<T> {
-    /**
-     * If `fetchMore.callback` is given, table will automatically trigger it when scrolling position reach end. <br />
-     * If `fetchMore.isReachEnd` is true, table will stop triggering callback. <br />
-     * If `fetchMore.isFetching` is true, a loading spinner will display at the end of table and stop triggering callback.
-     * <br />
-     * Notice that when `fetchMore.isFetching` is `undefined`, table will take control of it when source length changed.
-     */
-    fetchMore?: TableFetchMore;
-    pagination?: undefined;
+/**
+ * Props when virtualized scrolling is enabled.
+ * Draggable is not allowed in this mode.
+ */
+export interface TableVirtualizedProps<T extends TableDataSource = TableDataSource> extends TableBaseProps<T> {
+    /** Draggable row configuration - not available when virtualized is enabled */
+    draggable?: never;
+    /** Scroll configuration with virtualized enabled */
+    scroll: TableScroll & {
+        virtualized: true;
+        y: number | string;
+    };
 }
-export interface TableWithPagination<T> extends TableBaseProps<T> {
-    /**
-     * `pagination.current` is the current page number. (required) <br />
-     * `pagination.onChange` is the callback when page number changed. (required) <br />
-     * `pagination.disableAutoSlicing` set this to true if you don't want auto data slicing. <br />
-     * `pagination.total` is the total amount of your data. (default will be dataSource length) <br />
-     * `pagination.options` is the 'Pagination' component props. <br />
-     * Notice that if `pagination` object is given, table will disable fetchMore and use pagination instead.
-     */
-    pagination?: TablePaginationType;
-    fetchMore?: undefined;
+/**
+ * Props when virtualized scrolling is disabled or not specified.
+ * Draggable is allowed in this mode.
+ */
+export interface TableNonVirtualizedProps<T extends TableDataSource = TableDataSource> extends TableBaseProps<T> {
+    /** Draggable row configuration */
+    draggable?: TableDraggable<T>;
+    /** Scroll configuration for scrolling (virtualized defaults to false) */
+    scroll?: TableScroll & {
+        virtualized?: false;
+    };
 }
-export type TableProps<T> = TableWithFetchMore<T> | TableWithPagination<T>;
-declare const Table: import("react").ForwardRefExoticComponent<TableProps<Record<string, unknown>> & import("react").RefAttributes<HTMLTableElement>>;
+/**
+ * TableProps - discriminated union to ensure draggable and virtualized
+ * scrolling are mutually exclusive at the type level.
+ */
+export type TableProps<T extends TableDataSource = TableDataSource> = TableVirtualizedProps<T> | TableNonVirtualizedProps<T>;
+/**
+ * Table is a high-performance data table component with support for
+ * virtual scrolling, column resizing, fixed columns, row selection,
+ * sorting, expandable rows, and drag-and-drop row reordering.
+ */
+export declare const Table: <T extends TableDataSource = TableDataSource>(props: TableProps<T> & {
+    ref?: React.ForwardedRef<HTMLDivElement>;
+}) => React.ReactElement;
 export default Table;

package/Table/Table.js

@@ -1,182 +1,237 @@
+'use client';
 import { jsx, jsxs } from 'react/jsx-runtime';
-import { forwardRef, useRef, useMemo, Fragment } from 'react';
-import { DragDropContext, Droppable } from '@hello-pangea/dnd';
+import { forwardRef, useRef, useMemo, useState, useCallback } from 'react';
 import { tableClasses } from '@mezzanine-ui/core/table';
-import { TableContext, TableDataContext, TableComponentContext } from './TableContext.js';
-import TableHeader from './TableHeader.js';
-import TableBody from './TableBody.js';
-import TablePagination from './pagination/TablePagination.js';
-import TableRefresh from './refresh/TableRefresh.js';
-import { useTableRowSelection } from './rowSelection/useTableRowSelection.js';
-import { useTableSorting } from './sorting/useTableSorting.js';
-import { useTableLoading } from './useTableLoading.js';
-import { useTableFetchMore } from './useTableFetchMore.js';
-import { useTableDraggable } from './draggable/useTableDraggable.js';
-import useTableScroll from './useTableScroll.js';
-import { useComposeRefs } from '../hooks/useComposeRefs.js';
+import { DragDropContext, Droppable } from '@hello-pangea/dnd';
+import { TableContext, TableDataContext, TableSuperContext } from './TableContext.js';
+import { TableBody } from './components/TableBody.js';
+import { TableColGroup } from './components/TableColGroup.js';
+import { TableHeader } from './components/TableHeader.js';
+import { TablePagination } from './components/TablePagination.js';
+import { useTableColumns } from './hooks/useTableColumns.js';
+import { useTableExpansion } from './hooks/useTableExpansion.js';
+import { useTableFixedOffsets } from './hooks/useTableFixedOffsets.js';
+import { useTableScroll } from './hooks/useTableScroll.js';
+import { useTableSelection } from './hooks/useTableSelection.js';
+import { useTableSorting } from './hooks/useTableSorting.js';
 import { composeRefs } from '../utils/composeRefs.js';
-import Spin from '../Spin/Spin.js';
+import { getNumericCSSVariablePixelValue } from '../utils/get-css-variable-value.js';
+import { spacingPrefix } from '@mezzanine-ui/system/spacing';
 import cx from 'clsx';
 
-const Table = forwardRef(function Table(props, ref) {
-    var _a;
-    const { bodyClassName, bodyRowClassName, className, columns, components, dataSource: dataSourceProp, draggable: draggableProp, emptyProps, expandable: expandableProp, fetchMore: fetchMoreProp, headerClassName, loading: loadingProp, loadingTip = '資料載入中...', pagination: paginationProp, refresh: refreshProp, rowSelection: rowSelectionProp, scroll: scrollProp, scrollContainerClassName, ...rest } = props;
-    const bodyRef = useRef(null);
-    /** Feature rowSelection */
-    const [selectedRowKeys, setSelectedRowKey] = useTableRowSelection({
-        selectedRowKey: rowSelectionProp === null || rowSelectionProp === void 0 ? void 0 : rowSelectionProp.selectedRowKey,
-        onChange: rowSelectionProp === null || rowSelectionProp === void 0 ? void 0 : rowSelectionProp.onChange,
-        dataSource: dataSourceProp,
-        disabledRowKeys: rowSelectionProp === null || rowSelectionProp === void 0 ? void 0 : rowSelectionProp.disabledRowKeys,
-    });
-    const rowSelection = useMemo(() => rowSelectionProp
-        ? {
-            selectedRowKeys,
-            onChange: setSelectedRowKey,
-            actions: rowSelectionProp.actions,
-            disabledRowKeys: rowSelectionProp.disabledRowKeys,
+function TableInner(props, ref) {
+    const { className, columns, dataSource, draggable, emptyProps, expandable, highlight = 'row', loading = false, loadingRowsCount = 10, nested = false, pagination, resizable = false, rowHeightPreset = 'base', rowSelection, scroll, showHeader = true, size = 'main', sticky = true, style, transitionState, ...restProps } = props;
+    const hostRef = useRef(null);
+    const scrollContainerRef = useRef(null);
+    const tableRef = useRef(null);
+    // mock loading dataSource
+    const dataSourceForRender = loading
+        ? Array.from({ length: Math.max(loadingRowsCount, 1) }).map((_, idx) => ({
+            key: idx,
+        }))
+        : dataSource;
+    // get row height from preset
+    const rowHeight = useMemo(() => {
+        switch (rowHeightPreset) {
+            case 'condensed':
+                return size === 'main'
+                    ? getNumericCSSVariablePixelValue(`--${spacingPrefix}-size-container-condensed`)
+                    : getNumericCSSVariablePixelValue(`--${spacingPrefix}-size-container-reduced`);
+            case 'detailed':
+                return size === 'main'
+                    ? getNumericCSSVariablePixelValue(`--${spacingPrefix}-size-container-tiny`)
+                    : getNumericCSSVariablePixelValue(`--${spacingPrefix}-size-container-tightened`);
+            case 'roomy':
+                return size === 'main'
+                    ? getNumericCSSVariablePixelValue(`--${spacingPrefix}-size-container-small`)
+                    : getNumericCSSVariablePixelValue(`--${spacingPrefix}-size-container-medium`);
+            case 'base':
+            default:
+                return size === 'main'
+                    ? getNumericCSSVariablePixelValue(`--${spacingPrefix}-size-container-minimized`)
+                    : getNumericCSSVariablePixelValue(`--${spacingPrefix}-size-container-minimal`);
         }
-        : undefined, [rowSelectionProp, selectedRowKeys, setSelectedRowKey]);
-    /** Feature sorting */
-    const [dataSource, onSort, { sortedOn, sortedType, onResetAll, setDataSource },] = useTableSorting({
-        dataSource: dataSourceProp,
-    });
-    /** Feature loading */
-    const [loading, setLoading] = useTableLoading({
-        loading: loadingProp,
+    }, [rowHeightPreset, size]);
+    // Highlight state for hover effects
+    const [hoveredRowIndex, setHoveredRowIndex] = useState(null);
+    const [hoveredColumnIndex, setHoveredColumnIndex] = useState(null);
+    const setHoveredCell = useCallback((rowIndex, columnIndex) => {
+        setHoveredRowIndex(rowIndex);
+        setHoveredColumnIndex(columnIndex);
+    }, []);
+    // Hooks
+    const sortingState = useTableSorting({
+        columns,
     });
-    /** Feature fetchMore */
-    const { fetchMore: onFetchMore, isFetching, isReachEnd, } = useTableFetchMore({
-        callback: fetchMoreProp === null || fetchMoreProp === void 0 ? void 0 : fetchMoreProp.callback,
+    const selectionState = useTableSelection({
         dataSource,
-        /** when pagination is given, fetchMore feature should be disabled */
-        disabled: !!paginationProp,
-        isReachEnd: fetchMoreProp === null || fetchMoreProp === void 0 ? void 0 : fetchMoreProp.isReachEnd,
-        isFetching: fetchMoreProp === null || fetchMoreProp === void 0 ? void 0 : fetchMoreProp.isFetching,
+        rowSelection,
     });
-    /** Feature refresh */
-    const isRefreshShow = useMemo(() => { var _a; 
-    /** @default false */
-    return (_a = refreshProp === null || refreshProp === void 0 ? void 0 : refreshProp.show) !== null && _a !== void 0 ? _a : false; }, [refreshProp === null || refreshProp === void 0 ? void 0 : refreshProp.show]);
-    /** Feature Scrolling */
-    const [scrollBody, scrollElement, isHorizontalScrolling] = useTableScroll({
-        onFetchMore,
-        loading,
-        scrollBarSize: 4,
+    const expansionState = useTableExpansion({
+        expandable,
+        hasDragHandle: !!(draggable === null || draggable === void 0 ? void 0 : draggable.enabled),
     });
-    /** Feature drag and drop */
-    const { draggingId, onBeforeDragStart, onDragEnd } = useTableDraggable({
-        dataSource,
-        setDataSource,
-        draggable: draggableProp,
+    const actionConfig = useMemo(() => ({
+        hasDragHandle: !!(draggable === null || draggable === void 0 ? void 0 : draggable.enabled),
+        dragHandleFixed: !!(draggable === null || draggable === void 0 ? void 0 : draggable.fixed),
+        hasExpansion: !!expandable,
+        expansionFixed: !!(expandable === null || expandable === void 0 ? void 0 : expandable.fixed),
+        hasSelection: !!rowSelection,
+        selectionFixed: !!(rowSelection === null || rowSelection === void 0 ? void 0 : rowSelection.fixed),
+    }), [draggable === null || draggable === void 0 ? void 0 : draggable.enabled, draggable === null || draggable === void 0 ? void 0 : draggable.fixed, expandable, rowSelection]);
+    const columnState = useTableColumns({
+        actionConfig,
+        columns,
     });
-    /** context */
-    const tableContextValue = useMemo(() => {
-        var _a, _b, _c, _d, _e, _f, _g, _h, _j;
-        return ({
-            emptyProps,
-            rowSelection,
-            isHorizontalScrolling,
-            sorting: {
-                onSort,
-                onResetAll,
-                sortedOn,
-                sortedType,
-            },
-            loading,
-            setLoading,
-            expanding: expandableProp,
-            fetchMore: onFetchMore
-                ? {
-                    onFetchMore,
-                    isFetching,
-                    isReachEnd,
-                }
-                : undefined,
-            pagination: paginationProp
-                ? {
-                    current: paginationProp.current,
-                    disableAutoSlicing: (_a = paginationProp.disableAutoSlicing) !== null && _a !== void 0 ? _a : false,
-                    onChange: paginationProp.onChange,
-                    total: (_b = paginationProp.total) !== null && _b !== void 0 ? _b : dataSource.length,
-                    options: {
-                        ...((_c = paginationProp.options) !== null && _c !== void 0 ? _c : {}),
-                        boundaryCount: (_e = (_d = paginationProp.options) === null || _d === void 0 ? void 0 : _d.boundaryCount) !== null && _e !== void 0 ? _e : 1,
-                        pageSize: (_g = (_f = paginationProp.options) === null || _f === void 0 ? void 0 : _f.pageSize) !== null && _g !== void 0 ? _g : 10,
-                        siblingCount: (_j = (_h = paginationProp.options) === null || _h === void 0 ? void 0 : _h.siblingCount) !== null && _j !== void 0 ? _j : 1,
-                    },
-                }
-                : undefined,
-            scroll: scrollProp,
-            draggable: draggableProp
-                ? {
-                    ...draggableProp,
-                    draggingId,
-                }
-                : undefined,
-        });
-    }, [
-        dataSource,
+    const scrollState = useTableScroll({
+        enabled: !nested,
+    });
+    // Fixed column offset calculations
+    const fixedOffsetsState = useTableFixedOffsets({
+        actionConfig,
+        columns: columns,
+        getResizedColumnWidth: columnState.getResizedColumnWidth,
+    });
+    // Stabilize draggable object
+    const draggableValue = useMemo(() => draggable
+        ? {
+            draggingId: null,
+            enabled: true,
+            fixed: draggable.fixed,
+        }
+        : undefined, [draggable]);
+    // Stabilize highlight object
+    const highlightValue = useMemo(() => ({
+        columnIndex: hoveredColumnIndex,
+        mode: highlight,
+        rowIndex: hoveredRowIndex,
+        setHoveredCell,
+    }), [highlight, hoveredColumnIndex, hoveredRowIndex, setHoveredCell]);
+    // Determine if virtual scrolling should be enabled
+    // Requires scroll.virtualized to be true AND scroll.y to be set
+    const virtualScrollEnabled = !!((scroll === null || scroll === void 0 ? void 0 : scroll.virtualized) && (scroll === null || scroll === void 0 ? void 0 : scroll.y));
+    // Context value - cast to any to avoid complex generic issues
+    const contextValue = useMemo(() => ({
+        columnState,
+        columns: columns,
+        dataSource: dataSourceForRender,
+        draggable: draggableValue,
         emptyProps,
-        expandableProp,
-        rowSelection,
-        onSort,
-        onResetAll,
-        sortedOn,
-        sortedType,
+        expansion: expansionState,
+        fixedOffsets: fixedOffsetsState,
+        resizable,
+        rowHeight,
+        highlight: highlightValue,
+        isScrollingHorizontally: scrollState.isScrollingHorizontally,
+        isInsideExpandedContentArea: nested,
         loading,
-        setLoading,
-        onFetchMore,
-        isFetching,
-        isReachEnd,
-        paginationProp,
-        isHorizontalScrolling,
-        scrollProp,
-        draggableProp,
-        draggingId,
-    ]);
-    const tableDataContextValue = useMemo(() => ({
+        pagination: pagination || undefined,
+        scroll,
+        scrollContainerRef,
+        selection: selectionState,
+        size,
+        sorting: sortingState,
+        transitionState,
+        virtualScrollEnabled,
+    }), [
+        columnState,
         columns,
+        dataSourceForRender,
+        draggableValue,
+        emptyProps,
+        expansionState,
+        fixedOffsetsState,
+        resizable,
+        rowHeight,
+        highlightValue,
+        loading,
+        pagination,
+        scroll,
+        scrollContainerRef,
+        scrollState.isScrollingHorizontally,
+        selectionState,
+        size,
+        sortingState,
+        transitionState,
+        virtualScrollEnabled,
+        nested,
+    ]);
+    const dataContextValue = useMemo(() => ({
+        columns: columns,
         dataSource,
     }), [columns, dataSource]);
-    const tableComponentContextValue = useMemo(() => {
+    const superContextValue = useMemo(() => {
         var _a;
         return ({
-            bodyCell: (_a = components === null || components === void 0 ? void 0 : components.body) === null || _a === void 0 ? void 0 : _a.cell,
+            containerWidth: scrollState.containerWidth,
+            getResizedColumnWidth: columnState.getResizedColumnWidth,
+            scrollLeft: scrollState.scrollLeft,
+            expansionLeftPadding: (_a = expansionState === null || expansionState === void 0 ? void 0 : expansionState.expansionLeftPadding) !== null && _a !== void 0 ? _a : 0,
         });
-    }, [(_a = components === null || components === void 0 ? void 0 : components.body) === null || _a === void 0 ? void 0 : _a.cell]);
-    const tableRefs = useComposeRefs([ref, scrollBody.target]);
-    const rowClassName = useMemo(() => {
-        if (bodyRowClassName) {
-            if (typeof bodyRowClassName === 'string') {
-                return () => bodyRowClassName;
-            }
-            return (source) => bodyRowClassName === null || bodyRowClassName === void 0 ? void 0 : bodyRowClassName(source);
+    }, [
+        scrollState.scrollLeft,
+        expansionState === null || expansionState === void 0 ? void 0 : expansionState.expansionLeftPadding,
+        scrollState.containerWidth,
+        columnState.getResizedColumnWidth,
+    ]);
+    // Drag and drop handler
+    const handleDragEnd = useCallback((result) => {
+        var _a;
+        if (!result.destination || !draggable)
+            return;
+        const sourceIndex = result.source.index;
+        const destIndex = result.destination.index;
+        if (sourceIndex === destIndex)
+            return;
+        const newData = [...dataSource];
+        const [removed] = newData.splice(sourceIndex, 1);
+        newData.splice(destIndex, 0, removed);
+        (_a = draggable.onDragEnd) === null || _a === void 0 ? void 0 : _a.call(draggable, newData);
+    }, [dataSource, draggable]);
+    const sizeClass = size === 'sub' ? tableClasses.sub : tableClasses.main;
+    // Scroll container style
+    const scrollContainerStyle = useMemo(() => {
+        const containerStyle = {};
+        if (scroll === null || scroll === void 0 ? void 0 : scroll.y) {
+            containerStyle.maxHeight = scroll.y;
+            containerStyle.overflowY = 'auto';
+        }
+        if (scroll === null || scroll === void 0 ? void 0 : scroll.x) {
+            containerStyle.overflowX = 'auto';
+        }
+        if (nested) {
+            containerStyle.position = 'unset';
+            containerStyle.overflow = 'unset';
+        }
+        return containerStyle;
+    }, [scroll === null || scroll === void 0 ? void 0 : scroll.x, scroll === null || scroll === void 0 ? void 0 : scroll.y, nested]);
+    // Table style with min-width for horizontal scroll
+    const tableStyle = useMemo(() => {
+        const baseStyle = {};
+        if (scroll === null || scroll === void 0 ? void 0 : scroll.x) {
+            baseStyle.minWidth = scroll.x;
+            baseStyle.width = '100%';
         }
-        return undefined;
-    }, [bodyRowClassName]);
-    return (jsx(TableContext.Provider, { value: tableContextValue, children: jsx(TableDataContext.Provider, { value: tableDataContextValue, children: jsx(TableComponentContext.Provider, { value: tableComponentContextValue, children: jsx(DragDropContext, { onBeforeDragStart: onBeforeDragStart, onDragEnd: onDragEnd, children: jsx(Spin, { loading: loading, stretch: true, description: loadingTip, backdropProps: {
-                            className: tableClasses.loading,
-                        }, children: jsx(Droppable, { droppableId: "mzn-table-dnd", isDropDisabled: !(draggableProp === null || draggableProp === void 0 ? void 0 : draggableProp.enabled), children: (provided) => (jsxs(Fragment, { children: [jsx("div", { ...provided.droppableProps, ref: composeRefs([scrollBody.ref, provided.innerRef]), className: cx(tableClasses.scrollContainer, scrollContainerClassName), onScroll: scrollBody.onScroll, style: tableContextValue.scroll
-                                            ? {
-                                                '--table-scroll-x': tableContextValue.scroll.x
-                                                    ? `${tableContextValue.scroll.x}px`
-                                                    : '100%',
-                                                '--table-scroll-y': tableContextValue.scroll.y
-                                                    ? `${tableContextValue.scroll.y}px`
-                                                    : 'unset',
-                                            }
-                                            : undefined, children: jsxs("table", { ref: tableRefs, ...rest, className: cx(tableClasses.host, className), children: [isRefreshShow ? (jsx("tbody", { children: jsx("tr", { children: jsx("td", { "aria-label": "Refresh", children: jsx(TableRefresh, { onClick: refreshProp.onClick }) }) }) })) : null, jsx(TableHeader, { className: headerClassName }), jsx(TableBody, { ref: bodyRef, className: bodyClassName, rowClassName: rowClassName }), jsx("tbody", { children: provided.placeholder })] }) }), paginationProp ? (jsx(TablePagination, { bodyRef: bodyRef })) : null, jsx("div", { ref: scrollElement.trackRef, "aria-label": "Scroll Track", style: scrollElement.trackStyle, onMouseDown: scrollElement.onMouseDown, onMouseUp: scrollElement.onMouseUp, role: "button", tabIndex: -1, className: "mzn-table-scroll-bar-track", children: jsx("div", { style: {
-                                                width: '100%',
-                                                height: '100%',
-                                                position: 'relative',
-                                            }, children: jsx("div", { ref: scrollElement.ref, "aria-label": "Scroll Bar", onMouseDown: scrollElement.onMouseDown, onMouseUp: scrollElement.onMouseUp, onMouseEnter: scrollElement.onMouseEnter, onMouseLeave: scrollElement.onMouseLeave, role: "button", style: scrollElement.style, tabIndex: -1, className: "mzn-table-scroll-bar", children: jsx("div", { style: {
-                                                        width: `${scrollElement.scrollBarSize}px`,
-                                                        height: '100%',
-                                                        borderRadius: '10px',
-                                                        backgroundColor: '#7d7d7d',
-                                                        transition: '0.1s',
-                                                    } }) }) }) })] })) }) }) }) }) }) }));
-});
+        return baseStyle;
+    }, [scroll === null || scroll === void 0 ? void 0 : scroll.x]);
+    const { setContainerRef } = scrollState;
+    const handleScrollContainerRef = useCallback((element) => {
+        scrollContainerRef.current = element;
+        setContainerRef(element);
+    }, [setContainerRef]);
+    const mainTable = (jsx(TableContext.Provider, { value: contextValue, children: jsx(TableDataContext.Provider, { value: dataContextValue, children: jsxs("div", { className: cx(tableClasses.host, className), ref: ref, style: style, ...restProps, children: [jsx("div", { className: cx(tableClasses.scrollContainer, {
+                            [tableClasses.sticky]: !!sticky,
+                        }), onScroll: scrollState.handleScroll, ref: handleScrollContainerRef, style: scrollContainerStyle, children: jsxs("table", { className: cx(tableClasses.root, sizeClass), ref: tableRef, style: tableStyle, children: [jsx(TableColGroup, {}), showHeader && jsx(TableHeader, {}), jsx(TableBody, {})] }) }), pagination && jsx(TablePagination, { ...pagination })] }) }) }));
+    if (nested) {
+        return mainTable;
+    }
+    return (jsx(DragDropContext, { onDragEnd: handleDragEnd, children: jsx(Droppable, { droppableId: "mzn-table-v2-dnd", children: (provided) => (jsxs("div", { ...provided.droppableProps, ref: composeRefs([hostRef, provided.innerRef]), children: [jsx(TableSuperContext.Provider, { value: superContextValue, children: mainTable }), provided.placeholder] })) }) }));
+}
+/**
+ * Table is a high-performance data table component with support for
+ * virtual scrolling, column resizing, fixed columns, row selection,
+ * sorting, expandable rows, and drag-and-drop row reordering.
+ */
+const Table = forwardRef(TableInner);
 
-export { Table as default };
+export { Table, Table as default };