@mezzanine-ui/react 1.0.0-beta.3 → 1.0.0-beta.4

package/Table/Table.js

@@ -2,7 +2,7 @@
 import { jsx, jsxs } from 'react/jsx-runtime';
 import { forwardRef, useRef, useMemo, useState, useCallback, useEffect } from 'react';
 import throttle from 'lodash/throttle';
-import { TABLE_ACTIONS_KEY, tableClasses } from '@mezzanine-ui/core/table';
+import { TOGGLEABLE_COLUMN_WIDTH, TOGGLEABLE_KEY, COLLECTABLE_COLUMN_WIDTH, COLLECTABLE_KEY, TABLE_ACTIONS_KEY, tableClasses } from '@mezzanine-ui/core/table';
 import { DragDropContext, Droppable } from '@hello-pangea/dnd';
 import { TableSuperContext, TableContext, TableDataContext } from './TableContext.js';
 import { TableBody } from './components/TableBody.js';
@@ -19,10 +19,11 @@ import { getNumericCSSVariablePixelValue } from '../utils/get-css-variable-value
 import { spacingPrefix } from '@mezzanine-ui/system/spacing';
 import TableBulkActions from './components/TableBulkActions.js';
 import { useComposeRefs } from '../hooks/useComposeRefs.js';
+import Scrollbar from '../Scrollbar/Scrollbar.js';
 import cx from 'clsx';
 
 function TableInner(props, ref) {
-    const { actions, className, columns, dataSource, draggable, emptyProps, expandable, fullWidth = false, highlight = 'row', loading = false, loadingRowsCount = 10, minHeight, nested = false, pagination, resizable = false, rowHeightPreset = 'base', rowSelection, scroll, showHeader = true, size = 'main', sticky = true, style, transitionState, zebraStriping, separatorAtRowIndexes, ...restProps } = props;
+    const { actions, className, columns, dataSource, draggable, emptyProps, expandable, fullWidth = false, highlight = 'row', loading = false, loadingRowsCount = 10, minHeight, nested = false, pagination, pinnable, resizable = false, rowHeightPreset = 'base', rowSelection, scroll, showHeader = true, size = 'main', sticky = true, style, toggleable, collectable, transitionState, zebraStriping, separatorAtRowIndexes, ...restProps } = props;
     const hostRef = useRef(null);
     const composedHostRef = useComposeRefs([ref, hostRef]);
     /** Feature: Loading */
@@ -71,19 +72,50 @@ function TableInner(props, ref) {
         columns,
     });
     /** Feature: Actions column */
-    const columnsWithActions = useMemo(() => {
-        var _a;
-        if (!actions)
-            return columns;
-        const actionsColumn = {
-            ...actions,
-            align: (_a = actions.align) !== null && _a !== void 0 ? _a : 'end',
-            ellipsis: false,
-            key: TABLE_ACTIONS_KEY,
-            render: () => null, // Placeholder, actual rendering is handled in TableRow
-        };
-        return [...columns, actionsColumn];
-    }, [actions, columns]);
+    const columnsWithRightControls = useMemo(() => {
+        var _a, _b, _c, _d, _e, _f, _g;
+        const result = [...columns];
+        // Add toggleable column (rightControl area - after data columns)
+        if (toggleable === null || toggleable === void 0 ? void 0 : toggleable.enabled) {
+            const toggleableColumn = {
+                align: (_a = toggleable.align) !== null && _a !== void 0 ? _a : 'start',
+                ellipsis: false,
+                fixed: toggleable.fixed ? 'end' : undefined,
+                key: TOGGLEABLE_KEY,
+                render: () => null, // Placeholder, actual rendering is handled in TableRow
+                title: toggleable.title,
+                width: (_b = toggleable.minWidth) !== null && _b !== void 0 ? _b : TOGGLEABLE_COLUMN_WIDTH,
+                minWidth: (_c = toggleable.minWidth) !== null && _c !== void 0 ? _c : TOGGLEABLE_COLUMN_WIDTH,
+            };
+            result.push(toggleableColumn);
+        }
+        // Add collectable column (rightControl area - after toggleable)
+        if (collectable === null || collectable === void 0 ? void 0 : collectable.enabled) {
+            const collectableColumn = {
+                align: (_d = collectable.align) !== null && _d !== void 0 ? _d : 'start',
+                ellipsis: false,
+                fixed: collectable.fixed ? 'end' : undefined,
+                key: COLLECTABLE_KEY,
+                render: () => null, // Placeholder, actual rendering is handled in TableRow
+                title: collectable.title,
+                width: (_e = collectable === null || collectable === void 0 ? void 0 : collectable.minWidth) !== null && _e !== void 0 ? _e : COLLECTABLE_COLUMN_WIDTH,
+                minWidth: (_f = collectable === null || collectable === void 0 ? void 0 : collectable.minWidth) !== null && _f !== void 0 ? _f : COLLECTABLE_COLUMN_WIDTH,
+            };
+            result.push(collectableColumn);
+        }
+        // Add actions column (rightmost)
+        if (actions) {
+            const actionsColumn = {
+                ...actions,
+                align: (_g = actions.align) !== null && _g !== void 0 ? _g : 'end',
+                ellipsis: false,
+                key: TABLE_ACTIONS_KEY,
+                render: () => null, // Placeholder, actual rendering is handled in TableRow
+            };
+            result.push(actionsColumn);
+        }
+        return result;
+    }, [actions, collectable, columns, toggleable]);
     /** Feature: Row selection */
     const selectionState = useTableSelection({
         dataSource,
@@ -92,27 +124,54 @@ function TableInner(props, ref) {
     /** Feature: Expansion */
     const expansionState = useTableExpansion({
         expandable,
-        hasDragHandle: !!(draggable === null || draggable === void 0 ? void 0 : draggable.enabled),
+        hasDragOrPinHandle: !!(draggable === null || draggable === void 0 ? void 0 : draggable.enabled) || !!(pinnable === null || pinnable === void 0 ? void 0 : pinnable.enabled),
     });
     /** Feature: Column resized */
     const columnState = useTableResizedColumns();
     /** Feature: Scroll and dimensions calculation */
-    const { containerWidth, handleScroll, isScrollingHorizontally, scrollLeft, containerRef: scrollContainerRef, setContainerRef, } = useTableScroll({
+    const { containerWidth, handleScrollbarScroll, handleViewportReady, isContainerReady, isScrollingHorizontally, scrollLeft, containerRef: scrollContainerRef, } = useTableScroll({
         enabled: !nested,
     });
     const virtualScrollEnabled = useMemo(() => !!((scroll === null || scroll === void 0 ? void 0 : scroll.virtualized) && (scroll === null || scroll === void 0 ? void 0 : scroll.y)), [scroll === null || scroll === void 0 ? void 0 : scroll.virtualized, scroll === null || scroll === void 0 ? void 0 : scroll.y]);
     /** Feature: Column fixed */
-    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 actionConfig = useMemo(() => {
+        var _a, _b;
+        return ({
+            hasDragOrPinHandle: !!(draggable === null || draggable === void 0 ? void 0 : draggable.enabled) || !!(pinnable === null || pinnable === void 0 ? void 0 : pinnable.enabled),
+            dragOrPinHandleFixed: !!(draggable === null || draggable === void 0 ? void 0 : draggable.fixed) || !!(pinnable === null || pinnable === void 0 ? void 0 : pinnable.fixed),
+            dragOrPinHandleType: (draggable === null || draggable === void 0 ? void 0 : draggable.enabled)
+                ? 'drag'
+                : (pinnable === null || pinnable === void 0 ? void 0 : pinnable.enabled)
+                    ? 'pin'
+                    : undefined,
+            hasExpansion: !!expandable,
+            expansionFixed: !!(expandable === null || expandable === void 0 ? void 0 : expandable.fixed),
+            hasSelection: !!rowSelection,
+            selectionFixed: !!(rowSelection === null || rowSelection === void 0 ? void 0 : rowSelection.fixed),
+            hasToggleable: !!(toggleable === null || toggleable === void 0 ? void 0 : toggleable.enabled),
+            toggleableMinWidth: (_a = toggleable === null || toggleable === void 0 ? void 0 : toggleable.minWidth) !== null && _a !== void 0 ? _a : TOGGLEABLE_COLUMN_WIDTH,
+            toggleableFixed: !!(toggleable === null || toggleable === void 0 ? void 0 : toggleable.fixed),
+            hasCollectable: !!(collectable === null || collectable === void 0 ? void 0 : collectable.enabled),
+            collectableMinWidth: (_b = collectable === null || collectable === void 0 ? void 0 : collectable.minWidth) !== null && _b !== void 0 ? _b : COLLECTABLE_COLUMN_WIDTH,
+            collectableFixed: !!(collectable === null || collectable === void 0 ? void 0 : collectable.fixed),
+        });
+    }, [
+        collectable === null || collectable === void 0 ? void 0 : collectable.enabled,
+        collectable === null || collectable === void 0 ? void 0 : collectable.minWidth,
+        collectable === null || collectable === void 0 ? void 0 : collectable.fixed,
+        draggable === null || draggable === void 0 ? void 0 : draggable.enabled,
+        draggable === null || draggable === void 0 ? void 0 : draggable.fixed,
+        pinnable === null || pinnable === void 0 ? void 0 : pinnable.enabled,
+        pinnable === null || pinnable === void 0 ? void 0 : pinnable.fixed,
+        expandable,
+        rowSelection,
+        toggleable === null || toggleable === void 0 ? void 0 : toggleable.enabled,
+        toggleable === null || toggleable === void 0 ? void 0 : toggleable.minWidth,
+        toggleable === null || toggleable === void 0 ? void 0 : toggleable.fixed,
+    ]);
     const fixedOffsetsState = useTableFixedOffsets({
         actionConfig,
-        columns: columnsWithActions,
+        columns: columnsWithRightControls,
         getResizedColumnWidth: columnState.getResizedColumnWidth,
     });
     /** Feature: Drag n Drop */
@@ -139,60 +198,96 @@ function TableInner(props, ref) {
             fixed: draggable.fixed,
         }
         : undefined, [draggable]);
+    const pinnableState = useMemo(() => pinnable
+        ? {
+            enabled: pinnable.enabled,
+            fixed: pinnable.fixed,
+            pinnedRowKeys: pinnable.pinnedRowKeys,
+            onPinChange: pinnable.onPinChange,
+        }
+        : undefined, [pinnable]);
+    const toggleableState = useMemo(() => toggleable
+        ? {
+            enabled: toggleable.enabled,
+            fixed: toggleable.fixed,
+            isRowDisabled: toggleable.isRowDisabled,
+            onToggleChange: toggleable.onToggleChange,
+            title: toggleable.title,
+            toggledRowKeys: toggleable.toggledRowKeys,
+        }
+        : undefined, [toggleable]);
+    const collectableState = useMemo(() => collectable
+        ? {
+            enabled: collectable.enabled,
+            collectedRowKeys: collectable.collectedRowKeys,
+            fixed: collectable.fixed,
+            isRowDisabled: collectable.isRowDisabled,
+            onCollectChange: collectable.onCollectChange,
+            title: collectable.title,
+        }
+        : undefined, [collectable]);
     /** Context values */
     const contextValue = useMemo(() => ({
         actions: actions,
+        collectable: collectableState,
         columnState,
         dataSource: dataSourceForRender,
         draggable: draggableState,
         emptyProps,
         expansion: expansionState,
         fixedOffsets: fixedOffsetsState,
-        resizable,
-        rowHeight,
         highlight: highlightValue,
-        isScrollingHorizontally: isScrollingHorizontally,
+        isContainerReady,
         isInsideExpandedContentArea: nested,
+        isScrollingHorizontally: isScrollingHorizontally,
         loading,
         pagination: pagination || undefined,
+        pinnable: pinnableState,
+        resizable,
+        rowHeight,
         scroll,
         scrollContainerRef,
         selection: selectionState,
-        size,
         separatorAtRowIndexes,
+        size,
         sorting: sortingState,
+        toggleable: toggleableState,
         transitionState,
         virtualScrollEnabled,
         zebraStriping,
     }), [
         actions,
+        collectableState,
         columnState,
         dataSourceForRender,
         draggableState,
         emptyProps,
         expansionState,
         fixedOffsetsState,
-        resizable,
-        rowHeight,
         highlightValue,
+        isContainerReady,
+        isScrollingHorizontally,
         loading,
+        nested,
         pagination,
+        pinnableState,
+        resizable,
+        rowHeight,
         scroll,
         scrollContainerRef,
-        isScrollingHorizontally,
         selectionState,
+        separatorAtRowIndexes,
         size,
         sortingState,
+        toggleableState,
         transitionState,
         virtualScrollEnabled,
         zebraStriping,
-        separatorAtRowIndexes,
-        nested,
     ]);
     const dataContextValue = useMemo(() => ({
-        columns: columnsWithActions,
+        columns: columnsWithRightControls,
         dataSource,
-    }), [columnsWithActions, dataSource]);
+    }), [columnsWithRightControls, dataSource]);
     const superContextValue = useMemo(() => {
         var _a;
         return ({
@@ -200,7 +295,8 @@ function TableInner(props, ref) {
             getResizedColumnWidth: columnState.getResizedColumnWidth,
             scrollLeft: scrollLeft,
             expansionLeftPadding: (_a = expansionState === null || expansionState === void 0 ? void 0 : expansionState.expansionLeftPadding) !== null && _a !== void 0 ? _a : 0,
-            hasDragHandleFixed: !!(draggable === null || draggable === void 0 ? void 0 : draggable.enabled) && draggable.fixed,
+            hasDragOrPinHandleFixed: (!!(draggable === null || draggable === void 0 ? void 0 : draggable.enabled) && draggable.fixed) ||
+                (!!(pinnable === null || pinnable === void 0 ? void 0 : pinnable.enabled) && pinnable.fixed),
         });
     }, [
         scrollLeft,
@@ -209,22 +305,17 @@ function TableInner(props, ref) {
         columnState.getResizedColumnWidth,
         draggable === null || draggable === void 0 ? void 0 : draggable.enabled,
         draggable === null || draggable === void 0 ? void 0 : draggable.fixed,
+        pinnable === null || pinnable === void 0 ? void 0 : pinnable.enabled,
+        pinnable === null || pinnable === void 0 ? void 0 : pinnable.fixed,
     ]);
     /** Computed styles */
     const scrollContainerStyle = useMemo(() => {
         const containerStyle = {};
-        if (scroll === null || scroll === void 0 ? void 0 : scroll.y) {
-            containerStyle.maxHeight = scroll.y;
-        }
-        if (nested) {
-            containerStyle.position = 'unset';
-            containerStyle.overflow = 'unset';
-        }
         if (minHeight) {
             containerStyle.minHeight = minHeight;
         }
         return containerStyle;
-    }, [scroll === null || scroll === void 0 ? void 0 : scroll.y, nested, minHeight]);
+    }, [minHeight]);
     const tableStyle = useMemo(() => {
         const baseStyle = {};
         if (fullWidth) {
@@ -234,12 +325,18 @@ function TableInner(props, ref) {
     }, [fullWidth]);
     /** Scroll Container Ref */
     const droppableInnerRefSetter = useRef(null);
-    const composedScrollContainerRef = useCallback((element) => {
-        setContainerRef(element);
+    // Handler for Scrollbar's onViewportReady - composes with handleViewportReady and droppable innerRef
+    const handleScrollbarViewportReady = useCallback((viewport, instance) => {
+        handleViewportReady(viewport, instance);
+        // Also set droppable innerRef to viewport element for DnD
         if (droppableInnerRefSetter.current) {
-            droppableInnerRefSetter.current(element);
+            droppableInnerRefSetter.current(viewport);
         }
-    }, [setContainerRef]);
+    }, [handleViewportReady]);
+    // Scrollbar events for OverlayScrollbars
+    const scrollbarEvents = useMemo(() => ({
+        scroll: handleScrollbarScroll,
+    }), [handleScrollbarScroll]);
     /** Feature: bulk actions */
     const bulkActionsConfig = useMemo(() => {
         if (!selectionState || selectionState.mode !== 'checkbox') {
@@ -314,9 +411,7 @@ function TableInner(props, ref) {
         else {
             droppableInnerRefSetter.current = null;
         }
-        return (jsx(TableContext.Provider, { value: contextValue, children: jsx(TableDataContext.Provider, { value: dataContextValue, children: jsxs("div", { className: cx(tableClasses.host, className), ref: composedHostRef, style: style, ...restProps, children: [jsx("div", { ...droppableProvided === null || droppableProvided === void 0 ? void 0 : droppableProvided.droppableProps, className: cx(tableClasses.scrollContainer, {
-                                [tableClasses.sticky]: !!sticky,
-                            }), onScroll: handleScroll, ref: droppableProvided ? composedScrollContainerRef : setContainerRef, style: scrollContainerStyle, children: jsxs("table", { className: cx(tableClasses.root, size === 'sub' ? tableClasses.sub : tableClasses.main), style: tableStyle, children: [jsx(TableColGroup, {}), showHeader && jsx(TableHeader, {}), jsx(TableBody, {}), (droppableProvided === null || droppableProvided === void 0 ? void 0 : droppableProvided.placeholder) ? (jsx("tbody", { children: droppableProvided.placeholder })) : null] }) }), pagination && (jsx(TablePagination, { ...pagination, ref: paginationRef })), (bulkActionsConfig === null || bulkActionsConfig === void 0 ? void 0 : bulkActionsConfig.enabled) ? (jsx(TableBulkActions, { bulkActions: bulkActionsConfig.bulkActions, isFixed: isBulkActionsFixed, onClearSelection: bulkActionsConfig.onClearSelection, selectedRowKeys: bulkActionsConfig.selectedRowKeys })) : null] }) }) }));
+        return (jsx(TableContext.Provider, { value: contextValue, children: jsx(TableDataContext.Provider, { value: dataContextValue, children: jsxs("div", { className: cx(tableClasses.host, className), ref: composedHostRef, style: style, ...restProps, children: [jsx(Scrollbar, { ...droppableProvided === null || droppableProvided === void 0 ? void 0 : droppableProvided.droppableProps, className: sticky ? tableClasses.sticky : undefined, defer: false, disabled: nested, events: scrollbarEvents, onViewportReady: handleScrollbarViewportReady, style: scrollContainerStyle, maxHeight: scroll === null || scroll === void 0 ? void 0 : scroll.y, children: jsxs("table", { className: cx(tableClasses.root, size === 'sub' ? tableClasses.sub : tableClasses.main), style: tableStyle, children: [jsx(TableColGroup, {}), showHeader && jsx(TableHeader, {}), jsx(TableBody, {}), (droppableProvided === null || droppableProvided === void 0 ? void 0 : droppableProvided.placeholder) ? (jsx("tbody", { children: droppableProvided.placeholder })) : null] }) }), pagination && (jsx(TablePagination, { ...pagination, ref: paginationRef })), (bulkActionsConfig === null || bulkActionsConfig === void 0 ? void 0 : bulkActionsConfig.enabled) ? (jsx(TableBulkActions, { bulkActions: bulkActionsConfig.bulkActions, isFixed: isBulkActionsFixed, onClearSelection: bulkActionsConfig.onClearSelection, selectedRowKeys: bulkActionsConfig.selectedRowKeys })) : null] }) }) }));
     };
     if (nested) {
         return renderMainTable();

package/Table/TableContext.d.ts

@@ -1,4 +1,4 @@
-import type { HighlightMode, TableSize, TableActionsBase, TableColumn, TableDataSource, TableExpandable, TableRowSelection, TableScroll, TableSelectionMode } from '@mezzanine-ui/core/table';
+import type { HighlightMode, TableSize, TableActionsBase, TableColumn, TableDataSource, TableExpandable, TableRowSelection, TableScroll, TableSelectionMode, TableCollectable, TableToggleable, TablePinnable, TableDraggable } from '@mezzanine-ui/core/table';
 import type { EmptyProps } from '../Empty';
 import type { PaginationProps } from '../Pagination';
 import type { UseTableFixedOffsetsReturn } from './hooks/useTableFixedOffsets';
@@ -32,11 +32,6 @@ export interface TableResizedColumnState {
     getResizedColumnWidth: (key: string) => number | undefined;
     setResizedColumnWidth: (key: string, width: number) => void;
 }
-/** Draggable state */
-export interface TableDraggableState {
-    enabled: boolean;
-    fixed?: boolean | 'start';
-}
 /** Highlight state for hover effects */
 export interface TableHighlightState {
     columnIndex: number | null;
@@ -47,30 +42,34 @@ export interface TableHighlightState {
 /** Main table context */
 export interface TableContextValue<T extends TableDataSource = TableDataSource> {
     actions?: TableActionsBase<T>;
+    collectable?: TableCollectable<T>;
     columnState?: TableResizedColumnState;
     dataSource: T[];
-    draggable?: TableDraggableState;
+    draggable?: Omit<TableDraggable<T>, 'onDragEnd'>;
     emptyProps?: EmptyProps & {
         height?: number | string;
     };
     expansion?: TableExpansionState<T>;
     fixedOffsets?: UseTableFixedOffsetsReturn;
-    resizable?: boolean;
-    rowHeight: number;
     highlight?: TableHighlightState;
+    isContainerReady?: boolean;
+    isInsideExpandedContentArea?: boolean;
     isScrollingHorizontally?: boolean;
     loading?: boolean;
     pagination?: PaginationProps;
-    size?: TableSize;
+    pinnable?: TablePinnable;
+    resizable?: boolean;
+    rowHeight: number;
     scroll?: TableScroll;
     scrollContainerRef?: React.RefObject<HTMLDivElement | null>;
     selection?: TableSelectionState<T>;
     separatorAtRowIndexes?: number[];
+    size?: TableSize;
     sorting?: TableSortingState;
+    toggleable?: TableToggleable<T>;
     transitionState?: TableTransitionState;
     virtualScrollEnabled?: boolean;
     zebraStriping?: boolean;
-    isInsideExpandedContentArea?: boolean;
 }
 export declare const TableContext: import("react").Context<TableContextValue<TableDataSource> | null>;
 export declare function useTableContext<T extends TableDataSource = TableDataSource>(): TableContextValue<T>;
@@ -86,7 +85,7 @@ export interface TableSuperContextValue {
     getResizedColumnWidth?: (key: string) => number | undefined;
     scrollLeft?: number;
     expansionLeftPadding?: number;
-    hasDragHandleFixed?: boolean;
+    hasDragOrPinHandleFixed?: boolean;
 }
 export declare const TableSuperContext: import("react").Context<TableSuperContextValue | null>;
 export declare function useTableSuperContext(): TableSuperContextValue;

package/Table/components/TableActionsCell.js

@@ -4,7 +4,8 @@ import { memo, forwardRef, useMemo } from 'react';
 import { getCellAlignClass, tableClasses } from '@mezzanine-ui/core/table';
 import { useTableContext } from '../TableContext.js';
 import Button from '../../Button/Button.js';
-import ButtonGroup from '../../Button/ButtonGroup.js';
+import { DotHorizontalIcon } from '@mezzanine-ui/icons';
+import Dropdown from '../../Dropdown/Dropdown.js';
 import cx from 'clsx';
 
 const TableActionsCellInner = forwardRef(function TableActionsCell(props, ref) {
@@ -67,10 +68,17 @@ const TableActionsCellInner = forwardRef(function TableActionsCell(props, ref) {
             [tableClasses.cellFixedShadow]: showShadow,
             [tableClasses.cellFixedStart]: fixed === 'start',
             [tableClasses.cellHighlight]: isCellHighlighted,
-        }, className), onMouseEnter: handleMouseEnter, ref: ref, style: cellStyle, children: jsx("div", { className: cx(tableClasses.cellContent, alignClass), children: jsx(ButtonGroup, { size: "sub", variant: actions.variant, children: actionItems.map((item) => {
-                    var _a, _b, _c;
+        }, className), onMouseEnter: handleMouseEnter, ref: ref, style: cellStyle, children: jsx("div", { className: cx(tableClasses.cellContent, alignClass), children: jsx("div", { className: tableClasses.actionsCell, children: actionItems.map((item, actionIndex) => {
+                    var _a, _b, _c, _d, _e, _f, _g;
                     const isDisabled = (_b = (_a = item.disabled) === null || _a === void 0 ? void 0 : _a.call(item, record)) !== null && _b !== void 0 ? _b : false;
-                    return (jsx(Button, { disabled: isDisabled, icon: item.icon, onClick: () => item.onClick(record, rowIndex), type: "button", variant: item.variant, children: item.name }, `${item.name || 'name'}-${((_c = item.icon) === null || _c === void 0 ? void 0 : _c.name) || 'icon'}-${rowIndex}`));
+                    const baseKey = `${item.name || 'name'}-${((_c = item.icon) === null || _c === void 0 ? void 0 : _c.name) || 'icon'}-${rowIndex}-${actionIndex}`;
+                    if (item.type === 'dropdown') {
+                        const dropdownItem = item;
+                        return (jsx(Dropdown, { type: "default", maxHeight: dropdownItem.maxHeight, onSelect: (option) => dropdownItem.onSelect(option, record, rowIndex), options: dropdownItem.options, placement: (_d = dropdownItem.placement) !== null && _d !== void 0 ? _d : 'bottom-end', children: jsx(Button, { iconType: "icon-only", icon: (_e = dropdownItem === null || dropdownItem === void 0 ? void 0 : dropdownItem.icon) !== null && _e !== void 0 ? _e : DotHorizontalIcon, size: "sub", type: "button", variant: (_f = dropdownItem.variant) !== null && _f !== void 0 ? _f : 'base-text-link', children: dropdownItem.name }) }, baseKey));
+                    }
+                    // Default to button type
+                    const buttonItem = item;
+                    return (jsx(Button, { disabled: isDisabled, icon: buttonItem.icon, iconType: buttonItem.iconType, onClick: () => buttonItem.onClick(record, rowIndex), size: "sub", type: "button", variant: (_g = buttonItem.variant) !== null && _g !== void 0 ? _g : actions.variant, children: buttonItem.name }, baseKey));
                 }) }) }) }));
 });
 const TableActionsCell = memo(TableActionsCellInner);

package/Table/components/TableBody.js

@@ -13,7 +13,7 @@ import Fade from '../../Transition/Fade.js';
 import cx from 'clsx';
 
 const TableBodyInner = forwardRef(function TableBody(_, ref) {
-    const { dataSource, draggable, emptyProps, expansion, loading, scrollContainerRef, selection, size, virtualScrollEnabled, } = useTableContext();
+    const { dataSource, draggable, emptyProps, expansion, isContainerReady, loading, scrollContainerRef, selection, size, virtualScrollEnabled, } = useTableContext();
     const { columns } = useTableDataContext();
     /** Feature: Empty State */
     const isEmpty = useMemo(() => !dataSource.length, [dataSource.length]);
@@ -21,6 +21,7 @@ const TableBodyInner = forwardRef(function TableBody(_, ref) {
     const virtualization = useTableVirtualization({
         dataSource,
         enabled: virtualScrollEnabled,
+        isContainerReady,
         isRowExpanded: expansion === null || expansion === void 0 ? void 0 : expansion.isRowExpanded,
         scrollContainerRef: scrollContainerRef,
     });

package/Table/components/TableColGroup.d.ts

@@ -1,4 +1 @@
-export interface TableColGroupProps {
-    className?: string;
-}
-export declare const TableColGroup: import("react").NamedExoticComponent<TableColGroupProps>;
+export declare const TableColGroup: import("react").NamedExoticComponent<object>;

package/Table/components/TableColGroup.js

@@ -1,13 +1,12 @@
 'use client';
 import { jsx } from 'react/jsx-runtime';
 import { memo, useMemo } from 'react';
-import { DRAG_HANDLE_COLUMN_WIDTH, SELECTION_COLUMN_WIDTH, EXPANSION_COLUMN_WIDTH, tableClasses, DRAG_HANDLE_KEY, EXPANSION_KEY, SELECTION_KEY } from '@mezzanine-ui/core/table';
+import { DRAG_OR_PIN_HANDLE_COLUMN_WIDTH, SELECTION_COLUMN_WIDTH, EXPANSION_COLUMN_WIDTH, DRAG_OR_PIN_HANDLE_KEY, EXPANSION_KEY, SELECTION_KEY } from '@mezzanine-ui/core/table';
 import { useTableContext, useTableDataContext, useTableSuperContext } from '../TableContext.js';
 import { calculateColumnWidths, shouldCalculateWidths } from '../utils/calculateColumnWidths.js';
 
-const TableColGroupInner = memo(function TableColGroup(props) {
-    const { className } = props;
-    const { columnState, draggable, expansion, isInsideExpandedContentArea, selection, } = useTableContext();
+const TableColGroupInner = memo(function TableColGroup() {
+    const { columnState, draggable, expansion, isInsideExpandedContentArea, pinnable, selection, } = useTableContext();
     const { columns } = useTableDataContext();
     const { containerWidth, getResizedColumnWidth: getParentResizedColumnWidth } = useTableSuperContext();
     // For nested tables, use parent's resized widths; for root tables, use own
@@ -19,14 +18,14 @@ const TableColGroupInner = memo(function TableColGroup(props) {
     // Calculate action columns total width
     const actionColumnsWidth = useMemo(() => {
         let width = 0;
-        if (draggable === null || draggable === void 0 ? void 0 : draggable.enabled)
-            width += DRAG_HANDLE_COLUMN_WIDTH;
+        if ((draggable === null || draggable === void 0 ? void 0 : draggable.enabled) || (pinnable === null || pinnable === void 0 ? void 0 : pinnable.enabled))
+            width += DRAG_OR_PIN_HANDLE_COLUMN_WIDTH;
         if (selection)
             width += SELECTION_COLUMN_WIDTH;
         if (expansion)
             width += EXPANSION_COLUMN_WIDTH;
         return width;
-    }, [draggable === null || draggable === void 0 ? void 0 : draggable.enabled, expansion, selection]);
+    }, [draggable === null || draggable === void 0 ? void 0 : draggable.enabled, expansion, pinnable === null || pinnable === void 0 ? void 0 : pinnable.enabled, selection]);
     // Calculate resolved widths for all columns (only for root tables)
     const resolvedWidths = useMemo(() => {
         if (!enableWidthCalculation) {
@@ -47,22 +46,22 @@ const TableColGroupInner = memo(function TableColGroup(props) {
     ]);
     const renderCols = () => {
         const cols = [];
-        if (draggable === null || draggable === void 0 ? void 0 : draggable.enabled) {
-            cols.push(jsx("col", { className: tableClasses.dragHandleCell, style: {
-                    maxWidth: DRAG_HANDLE_COLUMN_WIDTH,
-                    minWidth: DRAG_HANDLE_COLUMN_WIDTH,
-                    width: DRAG_HANDLE_COLUMN_WIDTH,
-                } }, DRAG_HANDLE_KEY));
+        if ((draggable === null || draggable === void 0 ? void 0 : draggable.enabled) || (pinnable === null || pinnable === void 0 ? void 0 : pinnable.enabled)) {
+            cols.push(jsx("col", { style: {
+                    maxWidth: DRAG_OR_PIN_HANDLE_COLUMN_WIDTH,
+                    minWidth: DRAG_OR_PIN_HANDLE_COLUMN_WIDTH,
+                    width: DRAG_OR_PIN_HANDLE_COLUMN_WIDTH,
+                } }, DRAG_OR_PIN_HANDLE_KEY));
         }
         if (expansion) {
-            cols.push(jsx("col", { className: tableClasses.expandCell, style: {
+            cols.push(jsx("col", { style: {
                     maxWidth: EXPANSION_COLUMN_WIDTH,
                     minWidth: EXPANSION_COLUMN_WIDTH,
                     width: EXPANSION_COLUMN_WIDTH,
                 } }, EXPANSION_KEY));
         }
         if (selection) {
-            cols.push(jsx("col", { className: tableClasses.selectionColumn, style: {
+            cols.push(jsx("col", { style: {
                     maxWidth: SELECTION_COLUMN_WIDTH,
                     minWidth: SELECTION_COLUMN_WIDTH,
                     width: SELECTION_COLUMN_WIDTH,
@@ -97,7 +96,7 @@ const TableColGroupInner = memo(function TableColGroup(props) {
         });
         return cols;
     };
-    return jsx("colgroup", { className: className, children: renderCols() });
+    return jsx("colgroup", { children: renderCols() });
 });
 const TableColGroup = TableColGroupInner;
 

package/Table/components/TableCollectableCell.d.ts

@@ -0,0 +1,17 @@
+import { type TableDataSource } from '@mezzanine-ui/core/table';
+export interface TableCollectableCellProps<T extends TableDataSource = TableDataSource> {
+    className?: string;
+    fixed?: boolean;
+    fixedOffset?: number;
+    isHeader?: boolean;
+    /** Row record - required when isHeader is false */
+    record?: T;
+    showShadow?: boolean;
+    /** Explicit width for dragging state */
+    width?: number;
+}
+declare const ForwardedTableCollectableCell: <T extends TableDataSource = TableDataSource>(props: TableCollectableCellProps<T> & {
+    ref?: React.ForwardedRef<HTMLTableCellElement>;
+}) => React.ReactElement;
+export declare const TableCollectableCell: typeof ForwardedTableCollectableCell;
+export {};

package/Table/components/TableCollectableCell.js

@@ -0,0 +1,54 @@
+'use client';
+import { jsx } from 'react/jsx-runtime';
+import { memo, forwardRef, useCallback } from 'react';
+import { getRowKey, tableClasses } from '@mezzanine-ui/core/table';
+import { StarFilledIcon, StarOutlineIcon } from '@mezzanine-ui/icons';
+import { useTableContext } from '../TableContext.js';
+import Skeleton from '../../Skeleton/Skeleton.js';
+import Icon from '../../Icon/Icon.js';
+import cx from 'clsx';
+
+function TableCollectableCellInner(props, ref) {
+    var _a, _b, _c;
+    const { collectable, loading } = useTableContext();
+    const { className, fixed = false, fixedOffset = 0, record, showShadow = false, width, } = props;
+    const cellStyle = {};
+    // Apply explicit width for dragging state
+    if (width !== undefined) {
+        cellStyle.width = width;
+        cellStyle.minWidth = width;
+        cellStyle.maxWidth = width;
+        cellStyle.flexShrink = 0;
+    }
+    if (fixed) {
+        cellStyle['--fixed-end-offset'] =
+            `${fixedOffset}px`;
+    }
+    const rowKey = record ? getRowKey(record) : '';
+    const isCollected = (_a = collectable === null || collectable === void 0 ? void 0 : collectable.collectedRowKeys.includes(rowKey)) !== null && _a !== void 0 ? _a : false;
+    const isDisabled = record
+        ? ((_c = (_b = collectable === null || collectable === void 0 ? void 0 : collectable.isRowDisabled) === null || _b === void 0 ? void 0 : _b.call(collectable, record)) !== null && _c !== void 0 ? _c : false)
+        : false;
+    const handleCollectClick = useCallback(() => {
+        if (!collectable || !record || isDisabled)
+            return;
+        collectable.onCollectChange(record, !isCollected);
+    }, [collectable, isCollected, isDisabled, record]);
+    const renderChild = () => {
+        if (loading) {
+            return jsx(Skeleton, { variant: "body-highlight", width: "100%" });
+        }
+        return (jsx("button", { "aria-disabled": isDisabled, "aria-label": isCollected ? 'Remove from collection' : 'Add to collection', "aria-pressed": isCollected, className: cx(tableClasses.collectHandleIcon, {
+                [`${tableClasses.collectHandleIcon}--disabled`]: isDisabled,
+            }), disabled: isDisabled, onClick: handleCollectClick, type: "button", children: jsx(Icon, { color: isCollected ? 'brand' : 'neutral', icon: isCollected ? StarFilledIcon : StarOutlineIcon }) }));
+    };
+    return (jsx("td", { className: cx(tableClasses.cell, {
+            [tableClasses.cellFixed]: fixed,
+            [tableClasses.cellFixedEnd]: fixed,
+            [tableClasses.cellFixedShadow]: showShadow,
+        }, className), ref: ref, style: cellStyle, children: renderChild() }));
+}
+const ForwardedTableCollectableCell = forwardRef(TableCollectableCellInner);
+const TableCollectableCell = memo(ForwardedTableCollectableCell);
+
+export { TableCollectableCell };

package/Table/components/TableDragOrPinHandleCell.d.ts

@@ -0,0 +1,20 @@
+import { type TableDataSource } from '@mezzanine-ui/core/table';
+export interface TableDragOrPinHandleCellProps<T extends TableDataSource = TableDataSource> {
+    className?: string;
+    dragHandleProps?: Record<string, unknown>;
+    fixed?: boolean;
+    fixedOffset?: number;
+    isHeader?: boolean;
+    /** The mode of this cell: 'drag' for drag handle, 'pin' for pin handle */
+    mode: 'drag' | 'pin';
+    /** Row record - required when mode is 'pin' and isHeader is false */
+    record?: T;
+    showShadow?: boolean;
+    /** Explicit width for dragging state */
+    width?: number;
+}
+declare const ForwardedTableDragOrPinHandleCell: <T extends TableDataSource = TableDataSource>(props: TableDragOrPinHandleCellProps<T> & {
+    ref?: React.ForwardedRef<HTMLTableCellElement>;
+}) => React.ReactElement;
+export declare const TableDragOrPinHandleCell: typeof ForwardedTableDragOrPinHandleCell;
+export {};