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

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 {};

package/Table/components/TableDragOrPinHandleCell.js

@@ -0,0 +1,58 @@
+'use client';
+import { jsx } from 'react/jsx-runtime';
+import { memo, forwardRef, useCallback } from 'react';
+import { getRowKey, tableClasses } from '@mezzanine-ui/core/table';
+import { DotDragVerticalIcon, PinFilledIcon, PinIcon } 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 TableDragOrPinHandleCellInner(props, ref) {
+    var _a;
+    const { loading, pinnable } = useTableContext();
+    const { className, dragHandleProps, fixed = false, fixedOffset = 0, isHeader = false, mode, record, showShadow = false, width, } = props;
+    const CellComponent = isHeader ? 'th' : 'td';
+    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-start-offset'] =
+            `${fixedOffset}px`;
+    }
+    const rowKey = record ? getRowKey(record) : '';
+    const isPinned = (_a = pinnable === null || pinnable === void 0 ? void 0 : pinnable.pinnedRowKeys.includes(rowKey)) !== null && _a !== void 0 ? _a : false;
+    const handlePinClick = useCallback(() => {
+        if (!pinnable || !record)
+            return;
+        pinnable.onPinChange(record, !isPinned);
+    }, [isPinned, pinnable, record]);
+    const renderChild = () => {
+        if (isHeader) {
+            // Header cell is always empty
+            return null;
+        }
+        if (loading) {
+            return jsx(Skeleton, { variant: "body-highlight", width: "100%" });
+        }
+        if (mode === 'drag') {
+            return (jsx("span", { className: tableClasses.dragOrPinHandle, ...dragHandleProps, children: jsx(Icon, { color: "neutral", icon: DotDragVerticalIcon }) }));
+        }
+        // Pin mode
+        return (jsx("button", { "aria-label": isPinned ? 'Unpin row' : 'Pin row', "aria-pressed": isPinned, className: cx(tableClasses.dragOrPinHandle, tableClasses.pinHandleIcon), onClick: handlePinClick, type: "button", children: jsx(Icon, { color: isPinned ? 'brand' : 'neutral', icon: isPinned ? PinFilledIcon : PinIcon }) }));
+    };
+    return (jsx(CellComponent, { className: cx(isHeader ? tableClasses.headerCell : tableClasses.cell, tableClasses.dragOrPinHandleCell, {
+            [tableClasses.cellFixed]: fixed,
+            [tableClasses.cellFixedStart]: fixed,
+            [tableClasses.cellFixedShadow]: showShadow,
+        }, className), ref: ref, scope: isHeader ? 'col' : undefined, style: cellStyle, children: renderChild() }));
+}
+const ForwardedTableDragOrPinHandleCell = forwardRef(TableDragOrPinHandleCellInner);
+const TableDragOrPinHandleCell = memo(ForwardedTableDragOrPinHandleCell);
+
+export { TableDragOrPinHandleCell };

package/Table/components/TableExpandedRow.js

@@ -7,8 +7,9 @@ import { Table } from '../Table.js';
 import cx from 'clsx';
 
 const TableExpandedRowInner = forwardRef(function TableExpandedRow(props, ref) {
+    var _a, _b, _c;
     const { className, record, style } = props;
-    const { expansion, draggable, selection } = useTableContext();
+    const { expansion, draggable, selection, transitionState } = useTableContext();
     const { columns } = useTableDataContext();
     // Calculate total column span
     const totalColSpan = useMemo(() => {
@@ -24,6 +25,10 @@ const TableExpandedRowInner = forwardRef(function TableExpandedRow(props, ref) {
     }, [columns.length, expansion, draggable === null || draggable === void 0 ? void 0 : draggable.enabled, selection]);
     const rowKey = getRowKey(record);
     const isExpanded = expansion === null || expansion === void 0 ? void 0 : expansion.isRowExpanded(rowKey);
+    // Check transition states for the parent row
+    const isAdding = (_a = transitionState === null || transitionState === void 0 ? void 0 : transitionState.addingKeys.has(rowKey)) !== null && _a !== void 0 ? _a : false;
+    const isDeleting = (_b = transitionState === null || transitionState === void 0 ? void 0 : transitionState.deletingKeys.has(rowKey)) !== null && _b !== void 0 ? _b : false;
+    const isFadingOut = (_c = transitionState === null || transitionState === void 0 ? void 0 : transitionState.fadingOutKeys.has(rowKey)) !== null && _c !== void 0 ? _c : false;
     const { config } = expansion || {};
     const { expandedRowRender } = config || {};
     const childNeededProps = useMemo(() => ({
@@ -36,7 +41,11 @@ const TableExpandedRowInner = forwardRef(function TableExpandedRow(props, ref) {
         return null;
     const children = expandedRowRender(record);
     const clonedChild = cloneElement(children);
-    return (jsx("tr", { className: cx(tableClasses.expandedRow, className), "data-row-key": `${rowKey}-expanded`, ref: ref, style: style, children: jsx("td", { className: tableClasses.expandedRowCell, colSpan: totalColSpan, style: { paddingLeft: expansion === null || expansion === void 0 ? void 0 : expansion.expansionLeftPadding }, children: jsx("div", { className: tableClasses.expandedContent, children: clonedChild.type === Table
+    return (jsx("tr", { className: cx(tableClasses.expandedRow, {
+            [tableClasses.expandedRowAdding]: isAdding,
+            [tableClasses.expandedRowDeleting]: isDeleting,
+            [tableClasses.expandedRowFadingOut]: isFadingOut,
+        }, className), "data-row-key": `${rowKey}-expanded`, ref: ref, style: style, children: jsx("td", { className: tableClasses.expandedRowCell, colSpan: totalColSpan, style: { paddingLeft: expansion === null || expansion === void 0 ? void 0 : expansion.expansionLeftPadding }, children: jsx("div", { className: tableClasses.expandedContent, children: clonedChild.type === Table
                     ? cloneElement(clonedChild, {
                         ...childNeededProps.table,
                     })

package/Table/components/TableHeader.js

@@ -1,10 +1,10 @@
 'use client';
 import { jsx, jsxs } from 'react/jsx-runtime';
 import { memo, forwardRef } from 'react';
-import { tableClasses, DRAG_HANDLE_KEY, EXPANSION_KEY, SELECTION_KEY, getCellAlignClass } from '@mezzanine-ui/core/table';
+import { tableClasses, DRAG_OR_PIN_HANDLE_KEY, EXPANSION_KEY, SELECTION_KEY, getCellAlignClass } from '@mezzanine-ui/core/table';
 import { QuestionOutlineIcon, CaretUpIcon, CaretDownIcon } from '@mezzanine-ui/icons';
 import { useTableContext, useTableDataContext, useTableSuperContext } from '../TableContext.js';
-import { TableDragHandleCell } from './TableDragHandleCell.js';
+import { TableDragOrPinHandleCell } from './TableDragOrPinHandleCell.js';
 import { TableExpandCell } from './TableExpandCell.js';
 import { TableResizeHandle } from './TableResizeHandle.js';
 import { TableSelectionCell } from './TableSelectionCell.js';
@@ -14,7 +14,7 @@ import Icon from '../../Icon/Icon.js';
 import cx from 'clsx';
 
 const TableHeaderInner = forwardRef(function TableHeader(_, ref) {
-    const { draggable, expansion, fixedOffsets, resizable, selection, sorting, } = useTableContext();
+    const { draggable, expansion, fixedOffsets, pinnable, resizable, selection, sorting, } = useTableContext();
     const { columns } = useTableDataContext();
     const { containerWidth, scrollLeft } = useTableSuperContext();
     const parseFixed = (fixed) => {
@@ -24,15 +24,17 @@ const TableHeaderInner = forwardRef(function TableHeader(_, ref) {
             return 'end';
         return null;
     };
-    const renderDragHandleHeader = () => {
+    const renderDragOrPinHandleHeader = () => {
         var _a;
-        if (!(draggable === null || draggable === void 0 ? void 0 : draggable.enabled))
+        const hasDragOrPinHandle = (draggable === null || draggable === void 0 ? void 0 : draggable.enabled) || (pinnable === null || pinnable === void 0 ? void 0 : pinnable.enabled);
+        if (!hasDragOrPinHandle)
             return null;
-        const offsetInfo = fixedOffsets === null || fixedOffsets === void 0 ? void 0 : fixedOffsets.getDragHandleOffset();
-        const isFixed = !!draggable.fixed;
+        const offsetInfo = fixedOffsets === null || fixedOffsets === void 0 ? void 0 : fixedOffsets.getDragOrPinHandleOffset();
+        const isFixed = !!(draggable === null || draggable === void 0 ? void 0 : draggable.fixed) || !!(pinnable === null || pinnable === void 0 ? void 0 : pinnable.fixed);
         const showShadow = isFixed &&
-            (fixedOffsets === null || fixedOffsets === void 0 ? void 0 : fixedOffsets.shouldShowShadow(DRAG_HANDLE_KEY, scrollLeft !== null && scrollLeft !== void 0 ? scrollLeft : 0, containerWidth !== null && containerWidth !== void 0 ? containerWidth : 0));
-        return (jsx(TableDragHandleCell, { fixed: isFixed, fixedOffset: (_a = offsetInfo === null || offsetInfo === void 0 ? void 0 : offsetInfo.offset) !== null && _a !== void 0 ? _a : 0, isHeader: true, showShadow: showShadow !== null && showShadow !== void 0 ? showShadow : false }));
+            (fixedOffsets === null || fixedOffsets === void 0 ? void 0 : fixedOffsets.shouldShowShadow(DRAG_OR_PIN_HANDLE_KEY, scrollLeft !== null && scrollLeft !== void 0 ? scrollLeft : 0, containerWidth !== null && containerWidth !== void 0 ? containerWidth : 0));
+        const mode = (draggable === null || draggable === void 0 ? void 0 : draggable.enabled) ? 'drag' : 'pin';
+        return (jsx(TableDragOrPinHandleCell, { fixed: isFixed, fixedOffset: (_a = offsetInfo === null || offsetInfo === void 0 ? void 0 : offsetInfo.offset) !== null && _a !== void 0 ? _a : 0, isHeader: true, mode: mode, showShadow: showShadow !== null && showShadow !== void 0 ? showShadow : false }));
     };
     const renderSelectionHeader = () => {
         var _a, _b, _c;
@@ -115,7 +117,7 @@ const TableHeaderInner = forwardRef(function TableHeader(_, ref) {
                 }, column.className, column.headerClassName), scope: "col", style: cellStyle, children: [jsxs("div", { className: tableClasses.headerCellContent, children: [jsxs("div", { className: cx(tableClasses.headerCellActions, alignClass), children: [jsx("span", { className: tableClasses.headerCellTitle, children: column.title }), renderHelpIcon(column), renderSortIcon(column)] }), jsx(TableColumnTitleMenu, { column: column })] }), resizable && (jsx(TableResizeHandle, { column: column, columnIndex: columnIndex }))] }, column.key));
         });
     };
-    return (jsx("thead", { className: cx(tableClasses.header), ref: ref, children: jsxs("tr", { children: [renderDragHandleHeader(), renderExpandHeader(), renderSelectionHeader(), renderHeaderCells()] }) }));
+    return (jsx("thead", { className: cx(tableClasses.header), ref: ref, children: jsxs("tr", { children: [renderDragOrPinHandleHeader(), renderExpandHeader(), renderSelectionHeader(), renderHeaderCells()] }) }));
 });
 const TableHeader = memo(TableHeaderInner);
 

package/Table/components/TableRow.js

@@ -1,14 +1,16 @@
 'use client';
 import { jsxs, jsx } from 'react/jsx-runtime';
 import { memo, forwardRef, useMemo, useCallback } from 'react';
-import { getRowKey, tableClasses, DRAG_HANDLE_KEY, DRAG_HANDLE_COLUMN_WIDTH, EXPANSION_KEY, EXPANSION_COLUMN_WIDTH, SELECTION_KEY, SELECTION_COLUMN_WIDTH, TABLE_ACTIONS_KEY } from '@mezzanine-ui/core/table';
+import { getRowKey, TOGGLEABLE_COLUMN_WIDTH, COLLECTABLE_COLUMN_WIDTH, tableClasses, EXPANSION_KEY, EXPANSION_COLUMN_WIDTH, DRAG_OR_PIN_HANDLE_KEY, DRAG_OR_PIN_HANDLE_COLUMN_WIDTH, SELECTION_KEY, SELECTION_COLUMN_WIDTH, TOGGLEABLE_KEY, COLLECTABLE_KEY, TABLE_ACTIONS_KEY } from '@mezzanine-ui/core/table';
 import { calculateColumnWidths } from '../utils/calculateColumnWidths.js';
 import { useTableContext, useTableDataContext, useTableSuperContext } from '../TableContext.js';
 import { TableActionsCell } from './TableActionsCell.js';
 import { TableCell } from './TableCell.js';
-import { TableDragHandleCell } from './TableDragHandleCell.js';
+import { TableCollectableCell } from './TableCollectableCell.js';
+import { TableDragOrPinHandleCell } from './TableDragOrPinHandleCell.js';
 import { TableExpandCell } from './TableExpandCell.js';
 import { TableSelectionCell } from './TableSelectionCell.js';
+import { TableToggleableCell } from './TableToggleableCell.js';
 import { composeRefs } from '../../utils/composeRefs.js';
 import cx from 'clsx';
 
@@ -22,7 +24,7 @@ const parseFixed = (fixed) => {
 const TableRowInner = forwardRef(function TableRow(props, ref) {
     var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o;
     const { className, draggableProvided, record, rowIndex, style } = props;
-    const { actions, draggable, expansion, fixedOffsets, highlight, rowHeight, selection, separatorAtRowIndexes, transitionState, zebraStriping, } = useTableContext();
+    const { actions, collectable, draggable, expansion, fixedOffsets, highlight, pinnable, rowHeight, selection, separatorAtRowIndexes, toggleable, transitionState, zebraStriping, } = useTableContext();
     const { columns } = useTableDataContext();
     const isDragging = useMemo(() => {
         var _a;
@@ -44,16 +46,21 @@ const TableRowInner = forwardRef(function TableRow(props, ref) {
     const isFadingOut = (_o = transitionState === null || transitionState === void 0 ? void 0 : transitionState.fadingOutKeys.has(rowKey)) !== null && _o !== void 0 ? _o : false;
     // Calculate column widths when dragging (since position: fixed breaks colgroup)
     const draggingColumnWidths = useMemo(() => {
+        var _a;
         if (!isDragging || !containerWidth)
             return null;
         // Calculate action columns total width
         let actionColumnsWidth = 0;
-        if (draggable === null || draggable === void 0 ? void 0 : draggable.enabled)
-            actionColumnsWidth += DRAG_HANDLE_COLUMN_WIDTH;
+        if ((draggable === null || draggable === void 0 ? void 0 : draggable.enabled) || (pinnable === null || pinnable === void 0 ? void 0 : pinnable.enabled))
+            actionColumnsWidth += DRAG_OR_PIN_HANDLE_COLUMN_WIDTH;
         if (selection)
             actionColumnsWidth += SELECTION_COLUMN_WIDTH;
         if (expansion)
             actionColumnsWidth += EXPANSION_COLUMN_WIDTH;
+        if (toggleable === null || toggleable === void 0 ? void 0 : toggleable.enabled)
+            actionColumnsWidth += (_a = toggleable.minWidth) !== null && _a !== void 0 ? _a : TOGGLEABLE_COLUMN_WIDTH;
+        if (collectable === null || collectable === void 0 ? void 0 : collectable.enabled)
+            actionColumnsWidth += COLLECTABLE_COLUMN_WIDTH;
         return calculateColumnWidths({
             actionColumnsWidth,
             columns,
@@ -64,10 +71,14 @@ const TableRowInner = forwardRef(function TableRow(props, ref) {
         isDragging,
         containerWidth,
         columns,
+        collectable === null || collectable === void 0 ? void 0 : collectable.enabled,
         draggable === null || draggable === void 0 ? void 0 : draggable.enabled,
         expansion,
         getResizedColumnWidth,
+        pinnable === null || pinnable === void 0 ? void 0 : pinnable.enabled,
         selection,
+        toggleable === null || toggleable === void 0 ? void 0 : toggleable.enabled,
+        toggleable === null || toggleable === void 0 ? void 0 : toggleable.minWidth,
     ]);
     // Check if this row should be highlighted based on highlight mode
     const isRowHighlighted = useMemo(() => {
@@ -87,15 +98,19 @@ const TableRowInner = forwardRef(function TableRow(props, ref) {
     const handleMouseLeave = useCallback(() => {
         highlight === null || highlight === void 0 ? void 0 : highlight.setHoveredCell(null, null);
     }, [highlight]);
-    const renderDragHandleCell = () => {
+    const renderDragOrPinHandleCell = () => {
         var _a;
-        if (!(draggable === null || draggable === void 0 ? void 0 : draggable.enabled))
+        const isDragMode = draggable === null || draggable === void 0 ? void 0 : draggable.enabled;
+        const isPinMode = pinnable === null || pinnable === void 0 ? void 0 : pinnable.enabled;
+        if (!isDragMode && !isPinMode)
             return null;
-        const offsetInfo = fixedOffsets === null || fixedOffsets === void 0 ? void 0 : fixedOffsets.getDragHandleOffset();
-        const isFixed = !!draggable.fixed;
+        const offsetInfo = fixedOffsets === null || fixedOffsets === void 0 ? void 0 : fixedOffsets.getDragOrPinHandleOffset();
+        const isFixed = isDragMode ? !!(draggable === null || draggable === void 0 ? void 0 : draggable.fixed) : !!(pinnable === null || pinnable === void 0 ? void 0 : pinnable.fixed);
         const showShadow = isFixed &&
-            (fixedOffsets === null || fixedOffsets === void 0 ? void 0 : fixedOffsets.shouldShowShadow(DRAG_HANDLE_KEY, scrollLeft !== null && scrollLeft !== void 0 ? scrollLeft : 0, containerWidth !== null && containerWidth !== void 0 ? containerWidth : 0));
-        return (jsx(TableDragHandleCell, { dragHandleProps: draggableProvided === null || draggableProvided === void 0 ? void 0 : draggableProvided.dragHandleProps, fixed: isFixed, fixedOffset: (_a = offsetInfo === null || offsetInfo === void 0 ? void 0 : offsetInfo.offset) !== null && _a !== void 0 ? _a : 0, showShadow: showShadow !== null && showShadow !== void 0 ? showShadow : false, width: isDragging ? DRAG_HANDLE_COLUMN_WIDTH : undefined }));
+            (fixedOffsets === null || fixedOffsets === void 0 ? void 0 : fixedOffsets.shouldShowShadow(DRAG_OR_PIN_HANDLE_KEY, scrollLeft !== null && scrollLeft !== void 0 ? scrollLeft : 0, containerWidth !== null && containerWidth !== void 0 ? containerWidth : 0));
+        return (jsx(TableDragOrPinHandleCell, { dragHandleProps: isDragMode
+                ? draggableProvided === null || draggableProvided === void 0 ? void 0 : draggableProvided.dragHandleProps
+                : undefined, fixed: isFixed, fixedOffset: (_a = offsetInfo === null || offsetInfo === void 0 ? void 0 : offsetInfo.offset) !== null && _a !== void 0 ? _a : 0, mode: isDragMode ? 'drag' : 'pin', record: record, showShadow: showShadow !== null && showShadow !== void 0 ? showShadow : false, width: isDragging ? DRAG_OR_PIN_HANDLE_COLUMN_WIDTH : undefined }));
     };
     const renderSelectionCell = () => {
         var _a, _b;
@@ -124,13 +139,23 @@ const TableRowInner = forwardRef(function TableRow(props, ref) {
     };
     const renderCells = () => {
         return columns.map((column, columnIndex) => {
-            var _a;
+            var _a, _b, _c;
             const fixedPos = parseFixed(column.fixed);
             const offsetInfo = fixedOffsets === null || fixedOffsets === void 0 ? void 0 : fixedOffsets.getColumnOffset(column.key);
             const offset = (_a = offsetInfo === null || offsetInfo === void 0 ? void 0 : offsetInfo.offset) !== null && _a !== void 0 ? _a : 0;
             // Show shadow based on scroll position and sticky state
             const showShadow = !!fixedPos &&
                 (fixedOffsets === null || fixedOffsets === void 0 ? void 0 : fixedOffsets.shouldShowShadow(column.key, scrollLeft !== null && scrollLeft !== void 0 ? scrollLeft : 0, containerWidth !== null && containerWidth !== void 0 ? containerWidth : 0));
+            // Render toggleable cell for TOGGLEABLE_KEY column
+            if (column.key === TOGGLEABLE_KEY && (toggleable === null || toggleable === void 0 ? void 0 : toggleable.enabled)) {
+                const toggleableOffsetInfo = fixedOffsets === null || fixedOffsets === void 0 ? void 0 : fixedOffsets.getToggleableOffset();
+                return (jsx(TableToggleableCell, { fixed: !!toggleable.fixed, fixedOffset: (_b = toggleableOffsetInfo === null || toggleableOffsetInfo === void 0 ? void 0 : toggleableOffsetInfo.offset) !== null && _b !== void 0 ? _b : 0, record: record, showShadow: showShadow !== null && showShadow !== void 0 ? showShadow : false, width: isDragging ? column.width : undefined }, column.key));
+            }
+            // Render collectable cell for COLLECTABLE_KEY column
+            if (column.key === COLLECTABLE_KEY && (collectable === null || collectable === void 0 ? void 0 : collectable.enabled)) {
+                const collectableOffsetInfo = fixedOffsets === null || fixedOffsets === void 0 ? void 0 : fixedOffsets.getCollectableOffset();
+                return (jsx(TableCollectableCell, { fixed: !!collectable.fixed, fixedOffset: (_c = collectableOffsetInfo === null || collectableOffsetInfo === void 0 ? void 0 : collectableOffsetInfo.offset) !== null && _c !== void 0 ? _c : 0, record: record, showShadow: showShadow !== null && showShadow !== void 0 ? showShadow : false, width: isDragging ? column.width : undefined }, column.key));
+            }
             // Render actions cell for TABLE_ACTIONS_KEY column
             if (column.key === TABLE_ACTIONS_KEY && actions) {
                 return (jsx(TableActionsCell, { actions: actions, className: column.className, columnIndex: columnIndex, fixed: fixedPos !== null && fixedPos !== void 0 ? fixedPos : undefined, fixedOffset: offset, record: record, rowIndex: rowIndex, showShadow: showShadow !== null && showShadow !== void 0 ? showShadow : false, width: draggingColumnWidths === null || draggingColumnWidths === void 0 ? void 0 : draggingColumnWidths.get(column.key) }, column.key));
@@ -153,7 +178,7 @@ const TableRowInner = forwardRef(function TableRow(props, ref) {
             [tableClasses.bodyRowSelected]: isSelected,
             [tableClasses.bodyRowSeparator]: isSeparatorRow,
             [tableClasses.bodyRowZebra]: isZebraRow,
-        }, className), "data-index": rowIndex, "data-row-key": rowKey, onMouseLeave: handleMouseLeave, ref: rowRef, tabIndex: 0, ...draggableProvided === null || draggableProvided === void 0 ? void 0 : draggableProvided.draggableProps, style: resolvedStyle, children: [renderDragHandleCell(), renderExpandCell(), renderSelectionCell(), renderCells()] }));
+        }, className), "data-index": rowIndex, "data-row-key": rowKey, onMouseLeave: handleMouseLeave, ref: rowRef, tabIndex: 0, ...draggableProvided === null || draggableProvided === void 0 ? void 0 : draggableProvided.draggableProps, style: resolvedStyle, children: [renderExpandCell(), renderDragOrPinHandleCell(), renderSelectionCell(), renderCells()] }));
 });
 const TableRow = memo(TableRowInner);
 

package/Table/components/TableSelectionCell.js

@@ -2,10 +2,10 @@
 import { jsx } from 'react/jsx-runtime';
 import { memo, forwardRef } from 'react';
 import { tableClasses } from '@mezzanine-ui/core/table';
-import Checkbox from '../../Checkbox/Checkbox.js';
 import { useTableContext } from '../TableContext.js';
 import Skeleton from '../../Skeleton/Skeleton.js';
 import Radio from '../../Radio/Radio.js';
+import Checkbox from '../../Checkbox/Checkbox.js';
 import cx from 'clsx';
 
 const TableSelectionCellInner = forwardRef(function TableSelectionCell(props, ref) {

package/Table/components/TableToggleableCell.d.ts

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

package/Table/components/TableToggleableCell.js

@@ -0,0 +1,51 @@
+'use client';
+import { jsx } from 'react/jsx-runtime';
+import { memo, forwardRef, useCallback } from 'react';
+import { getRowKey, tableClasses } from '@mezzanine-ui/core/table';
+import { useTableContext } from '../TableContext.js';
+import Skeleton from '../../Skeleton/Skeleton.js';
+import Toggle from '../../Toggle/Toggle.js';
+import cx from 'clsx';
+
+function TableToggleableCellInner(props, ref) {
+    var _a, _b, _c;
+    const { loading, toggleable } = 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 isToggled = (_a = toggleable === null || toggleable === void 0 ? void 0 : toggleable.toggledRowKeys.includes(rowKey)) !== null && _a !== void 0 ? _a : false;
+    const isDisabled = record
+        ? ((_c = (_b = toggleable === null || toggleable === void 0 ? void 0 : toggleable.isRowDisabled) === null || _b === void 0 ? void 0 : _b.call(toggleable, record)) !== null && _c !== void 0 ? _c : false)
+        : false;
+    const handleToggleChange = useCallback(() => {
+        if (!toggleable || !record || isDisabled)
+            return;
+        toggleable.onToggleChange(record, !isToggled);
+    }, [isDisabled, isToggled, record, toggleable]);
+    const renderChild = () => {
+        if (loading) {
+            return jsx(Skeleton, { variant: "body-highlight", width: "100%" });
+        }
+        return (jsx(Toggle, { checked: isToggled, disabled: isDisabled, onChange: handleToggleChange, size: "sub" }));
+    };
+    return (jsx("td", { className: cx(tableClasses.cell, {
+            [tableClasses.cellFixed]: fixed,
+            [tableClasses.cellFixedEnd]: fixed,
+            [tableClasses.cellFixedShadow]: showShadow,
+        }, className), ref: ref, style: cellStyle, children: renderChild() }));
+}
+const ForwardedTableToggleableCell = forwardRef(TableToggleableCellInner);
+const TableToggleableCell = memo(ForwardedTableToggleableCell);
+
+export { TableToggleableCell };

package/Table/components/index.d.ts

@@ -1,7 +1,8 @@
 export { TableActionsCell, type TableActionsCellProps, } from './TableActionsCell';
 export { TableBody, type TableBodyProps } from './TableBody';
 export { TableCell, type TableCellProps } from './TableCell';
-export { TableColGroup, type TableColGroupProps } from './TableColGroup';
+export { TableColGroup } from './TableColGroup';
+export { TableDragOrPinHandleCell, type TableDragOrPinHandleCellProps, } from './TableDragOrPinHandleCell';
 export { TableExpandCell, type TableExpandCellProps } from './TableExpandCell';
 export { TableExpandedRow, type TableExpandedRowProps, } from './TableExpandedRow';
 export { TableHeader, type TableHeaderProps } from './TableHeader';
@@ -9,3 +10,5 @@ export { TablePagination, type TablePaginationProps } from './TablePagination';
 export { TableResizeHandle, type TableResizeHandleProps, } from './TableResizeHandle';
 export { TableRow, type TableRowProps } from './TableRow';
 export { TableSelectionCell, type TableSelectionCellProps, } from './TableSelectionCell';
+export { TableToggleableCell, type TableToggleableCellProps, } from './TableToggleableCell';
+export { TableCollectableCell, type TableCollectableCellProps, } from './TableCollectableCell';

package/Table/components/index.js

@@ -2,6 +2,7 @@ export { TableActionsCell } from './TableActionsCell.js';
 export { TableBody } from './TableBody.js';
 export { TableCell } from './TableCell.js';
 export { TableColGroup } from './TableColGroup.js';
+export { TableDragOrPinHandleCell } from './TableDragOrPinHandleCell.js';
 export { TableExpandCell } from './TableExpandCell.js';
 export { TableExpandedRow } from './TableExpandedRow.js';
 export { TableHeader } from './TableHeader.js';
@@ -9,3 +10,5 @@ export { TablePagination } from './TablePagination.js';
 export { TableResizeHandle } from './TableResizeHandle.js';
 export { TableRow } from './TableRow.js';
 export { TableSelectionCell } from './TableSelectionCell.js';
+export { TableToggleableCell } from './TableToggleableCell.js';
+export { TableCollectableCell } from './TableCollectableCell.js';

package/Table/hooks/typings.d.ts

@@ -1,8 +1,10 @@
 export interface ActionColumnConfig {
-    /** Whether drag handle column exists */
-    hasDragHandle: boolean;
-    /** Whether drag handle is fixed */
-    dragHandleFixed: boolean;
+    /** Whether drag or pin handle column exists */
+    hasDragOrPinHandle: boolean;
+    /** Whether drag or pin handle is fixed */
+    dragOrPinHandleFixed: boolean;
+    /** The type of drag or pin handle: 'drag' or 'pin' */
+    dragOrPinHandleType?: 'drag' | 'pin';
     /** Whether selection column exists */
     hasSelection: boolean;
     /** Whether selection is fixed */
@@ -11,4 +13,16 @@ export interface ActionColumnConfig {
     hasExpansion: boolean;
     /** Whether expansion is fixed */
     expansionFixed: boolean;
+    /** Whether toggleable column exists */
+    hasToggleable: boolean;
+    /** The minimum width of the toggleable column */
+    toggleableMinWidth: number;
+    /** Whether toggleable is fixed */
+    toggleableFixed: boolean;
+    /** Whether collectable column exists */
+    hasCollectable: boolean;
+    /** The minimum width of the collectable column */
+    collectableMinWidth: number;
+    /** Whether collectable is fixed */
+    collectableFixed: boolean;
 }

package/Table/hooks/useTableExpansion.d.ts

@@ -2,6 +2,6 @@ import { type TableDataSource, type TableExpandable } from '@mezzanine-ui/core/t
 import type { TableExpansionState } from '../TableContext';
 export interface UseTableExpansionOptions<T extends TableDataSource> {
     expandable?: TableExpandable<T>;
-    hasDragHandle: boolean;
+    hasDragOrPinHandle: boolean;
 }
-export declare function useTableExpansion<T extends TableDataSource>({ expandable, hasDragHandle, }: UseTableExpansionOptions<T>): TableExpansionState<T> | undefined;
+export declare function useTableExpansion<T extends TableDataSource>({ expandable, hasDragOrPinHandle, }: UseTableExpansionOptions<T>): TableExpansionState<T> | undefined;