@mezzanine-ui/react 0.12.9 → 0.13.1

package/Table/Table.d.ts

@@ -1,8 +1,8 @@
 import { ReactNode } from 'react';
-import { TableColumn, TableComponents, TableDataSource, TableRowSelection, TableExpandable, TableFetchMore, TablePagination as TablePaginationType, TableRefresh as TableRefreshType, ExpandRowBySources } from '@mezzanine-ui/core/table';
+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'> {
+export interface TableBaseProps<T> extends Omit<NativeElementPropsWithoutKeyAndRef<'div'>, 'role' | 'draggable'> {
     /**
      * customized body className
      */
@@ -28,6 +28,12 @@ export interface TableBaseProps<T> extends Omit<NativeElementPropsWithoutKeyAndR
       * 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.
       */
@@ -47,6 +53,11 @@ export interface TableBaseProps<T> extends Omit<NativeElementPropsWithoutKeyAndR
       * Whether table is loading or not
       */
     loading?: boolean;
+    /**
+     * When loading is true, show specific loadingTip
+     * @default '資料載入中...'
+     */
+    loadingTip?: string;
     /**
      * `refresh.show` is true, refresh button will display at the top-start of table. <br />
      * `refresh.onClick` is the callback of the refresh button.
@@ -59,6 +70,17 @@ export interface TableBaseProps<T> extends Omit<NativeElementPropsWithoutKeyAndR
       * `rowSelection.actions` are the actions that you want to do for selected data.
       */
     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.
+     */
+    scroll?: TableScrolling;
+    /**
+     * customize scroll container className
+     */
+    scrollContainerClassName?: string;
 }
 export interface TableWithFetchMore<T> extends TableBaseProps<T> {
     /**
@@ -84,5 +106,5 @@ export interface TableWithPagination<T> extends TableBaseProps<T> {
     fetchMore?: undefined;
 }
 export type TableProps<T> = TableWithFetchMore<T> | TableWithPagination<T>;
-declare const Table: import("react").ForwardRefExoticComponent<TableProps<Record<string, unknown>> & import("react").RefAttributes<HTMLDivElement>>;
+declare const Table: import("react").ForwardRefExoticComponent<TableProps<Record<string, unknown>> & import("react").RefAttributes<HTMLTableElement>>;
 export default Table;

package/Table/Table.js

@@ -1,5 +1,6 @@
 import { jsx, jsxs } from 'react/jsx-runtime';
-import { forwardRef, useRef, useMemo } from 'react';
+import { forwardRef, useRef, useMemo, Fragment } from 'react';
+import { DragDropContext, Droppable } from 'react-beautiful-dnd';
 import { tableClasses } from '@mezzanine-ui/core/table';
 import { TableContext, TableDataContext, TableComponentContext } from './TableContext.js';
 import TableHeader from './TableHeader.js';
@@ -10,12 +11,16 @@ 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 { composeRefs } from '../utils/composeRefs.js';
 import Loading from '../Loading/Loading.js';
 import cx from 'clsx';
 
 const Table = forwardRef(function Table(props, ref) {
     var _a;
-    const { bodyClassName, bodyRowClassName, className, columns, components, dataSource: dataSourceProp, emptyProps, expandable: expandableProp, fetchMore: fetchMoreProp, headerClassName, loading: loadingProp, pagination: paginationProp, refresh: refreshProp, rowSelection: rowSelectionProp, ...rest } = props;
+    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({
@@ -33,7 +38,7 @@ const Table = forwardRef(function Table(props, ref) {
         setSelectedRowKey,
     ]);
     /** Feature sorting */
-    const [dataSource, onSort, { sortedOn, sortedType, onResetAll }] = useTableSorting({
+    const [dataSource, onSort, { sortedOn, sortedType, onResetAll, setDataSource, }] = useTableSorting({
         dataSource: dataSourceProp,
     });
     /** Feature loading */
@@ -56,13 +61,25 @@ const Table = forwardRef(function Table(props, ref) {
         /** @default false */
         (_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,
+    });
+    /** Feature drag and drop */
+    const { draggingId, onBeforeDragStart, onDragEnd, } = useTableDraggable({
+        dataSource,
+        setDataSource,
+        draggable: draggableProp,
+    });
     /** context */
     const tableContextValue = useMemo(() => {
         var _a, _b, _c, _d, _e, _f, _g, _h, _j;
         return ({
-            scrollBarSize: 4,
             emptyProps,
             rowSelection,
+            isHorizontalScrolling,
             sorting: {
                 onSort,
                 onResetAll,
@@ -89,6 +106,11 @@ const Table = forwardRef(function Table(props, ref) {
                     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,
@@ -105,6 +127,10 @@ const Table = forwardRef(function Table(props, ref) {
         isFetching,
         isReachEnd,
         paginationProp,
+        isHorizontalScrolling,
+        scrollProp,
+        draggableProp,
+        draggingId,
     ]);
     const tableDataContextValue = useMemo(() => ({
         columns,
@@ -116,7 +142,27 @@ const Table = forwardRef(function Table(props, ref) {
             bodyCell: (_a = components === null || components === void 0 ? void 0 : components.body) === null || _a === void 0 ? void 0 : _a.cell,
         });
     }, [(_a = components === null || components === void 0 ? void 0 : components.body) === null || _a === void 0 ? void 0 : _a.cell]);
-    return (jsx(Loading, { loading: loading, stretch: true, tip: "\u8CC7\u6599\u8F09\u5165\u4E2D...", children: jsx("div", { ref: ref, ...rest, className: cx(tableClasses.host, className), role: "grid", children: jsx(TableContext.Provider, { value: tableContextValue, children: jsx(TableDataContext.Provider, { value: tableDataContextValue, children: jsxs(TableComponentContext.Provider, { value: tableComponentContextValue, children: [isRefreshShow ? (jsx(TableRefresh, { onClick: refreshProp.onClick })) : null, jsx(TableHeader, { className: headerClassName }), jsx(TableBody, { ref: bodyRef, className: bodyClassName, rowClassName: bodyRowClassName }), paginationProp ? (jsx(TablePagination, { bodyRef: bodyRef })) : null] }) }) }) }) }));
+    const tableRefs = useComposeRefs([ref, scrollBody.target]);
+    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(Loading, { loading: loading, stretch: true, tip: loadingTip, overlayProps: {
+                            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", { children: jsx(TableRefresh, { onClick: refreshProp.onClick }) }) }) })) : null, jsx(TableHeader, { className: headerClassName }), jsx(TableBody, { ref: bodyRef, className: bodyClassName, rowClassName: bodyRowClassName }), jsx("tbody", { children: provided.placeholder })] }) }), paginationProp ? (jsx(TablePagination, { bodyRef: bodyRef })) : null, jsx("div", { ref: scrollElement.trackRef, 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, 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',
+                                                    } }) }) }) })] })) }) }) }) }) }) }));
 });
 var Table$1 = Table;
 

package/Table/TableBody.d.ts

@@ -6,5 +6,5 @@ export interface TableBodyProps extends NativeElementPropsWithoutKeyAndRef<'div'
      */
     rowClassName?: string;
 }
-declare const TableBody: import("react").ForwardRefExoticComponent<TableBodyProps & import("react").RefAttributes<HTMLDivElement>>;
+declare const TableBody: import("react").ForwardRefExoticComponent<TableBodyProps & import("react").RefAttributes<HTMLTableSectionElement>>;
 export default TableBody;

package/Table/TableBody.js

@@ -1,8 +1,6 @@
 import { jsxs, jsx } from 'react/jsx-runtime';
 import { forwardRef, useContext } from 'react';
 import { tableClasses } from '@mezzanine-ui/core/table';
-import { useComposeRefs } from '../hooks/useComposeRefs.js';
-import useTableScroll from './useTableScroll.js';
 import { TableDataContext, TableContext } from './TableContext.js';
 import TableBodyRow from './TableBodyRow.js';
 import Loading from '../Loading/Loading.js';
@@ -12,9 +10,7 @@ import cx from 'clsx';
 const TableBody = forwardRef(function TableBody(props, ref) {
     const { className, rowClassName, ...rest } = props;
     const { dataSource = [], } = useContext(TableDataContext) || {};
-    const { emptyProps, fetchMore, scrollBarSize, pagination, } = useContext(TableContext) || {};
-    const [tableBody, scrollElement] = useTableScroll();
-    const composedRefs = useComposeRefs([ref, tableBody.ref]);
+    const { emptyProps, fetchMore, pagination, } = useContext(TableContext) || {};
     /** customizing empty */
     const { className: emptyComponentClassName = '', children: emptyComponentChildren = '查無資料', fullHeight: emptyComponentFullHeight = true, ...restEmptyProps } = emptyProps || {};
     /** pagination feature */
@@ -22,13 +18,7 @@ const TableBody = forwardRef(function TableBody(props, ref) {
     const currentStartCount = (paginationOptions === null || paginationOptions === void 0 ? void 0 : paginationOptions.pageSize) && currentPage ? ((paginationOptions.pageSize) * (currentPage - 1)) : 0;
     const currentEndCount = (paginationOptions === null || paginationOptions === void 0 ? void 0 : paginationOptions.pageSize) && currentPage && total ? (Math.min(((paginationOptions.pageSize) * currentPage), total)) : 0;
     const currentDataSource = pagination && !disableAutoSlicing ? (dataSource.slice(currentStartCount, currentEndCount)) : dataSource;
-    return (jsxs("div", { ...rest, ref: composedRefs, className: cx(tableClasses.body, className), onScroll: tableBody.onScroll, role: "rowgroup", children: [currentDataSource.length ? currentDataSource.map((rowData, index) => (jsx(TableBodyRow, { className: rowClassName, rowData: rowData, rowIndex: index }, (rowData.key || rowData.id)))) : (jsx(Empty, { ...restEmptyProps, className: cx(tableClasses.bodyEmpty, emptyComponentClassName), fullHeight: emptyComponentFullHeight, children: emptyComponentChildren })), (fetchMore === null || fetchMore === void 0 ? void 0 : fetchMore.isFetching) ? (jsx("div", { className: tableClasses.bodyFetchMore, children: jsx(Loading, { loading: true }) })) : null, jsx("div", { ref: scrollElement.ref, onMouseDown: scrollElement.onMouseDown, onMouseUp: scrollElement.onMouseUp, onMouseEnter: scrollElement.onMouseEnter, onMouseLeave: scrollElement.onMouseLeave, role: "button", style: scrollElement.style, tabIndex: -1, children: jsx("div", { style: {
-                        width: `${scrollBarSize}px`,
-                        height: '100%',
-                        borderRadius: '10px',
-                        backgroundColor: '#7d7d7d',
-                        transition: '0.1s',
-                    } }) })] }));
+    return (jsxs("tbody", { ...rest, ref: ref, className: cx(tableClasses.body, className), children: [currentDataSource.length ? currentDataSource.map((rowData, index) => (jsx(TableBodyRow, { className: rowClassName, rowData: rowData, rowIndex: index }, (rowData.key || rowData.id)))) : (jsx("tr", { children: jsx("td", { children: jsx(Empty, { ...restEmptyProps, className: cx(tableClasses.bodyEmpty, emptyComponentClassName), fullHeight: emptyComponentFullHeight, children: emptyComponentChildren }) }) })), (fetchMore === null || fetchMore === void 0 ? void 0 : fetchMore.isFetching) ? (jsx("tr", { className: tableClasses.bodyFetchMore, children: jsx("td", { children: jsx(Loading, { loading: true }) }) })) : null] }));
 });
 var TableBody$1 = TableBody;
 

package/Table/TableBodyRow.d.ts

@@ -8,5 +8,5 @@ export interface TableBodyRowProps extends NativeElementPropsWithoutKeyAndRef<'d
     rowData: TableDataSource;
     rowIndex: number;
 }
-declare const TableBodyRow: import("react").ForwardRefExoticComponent<TableBodyRowProps & import("react").RefAttributes<HTMLDivElement>>;
+declare const TableBodyRow: import("react").ForwardRefExoticComponent<TableBodyRowProps & import("react").RefAttributes<HTMLTableRowElement>>;
 export default TableBodyRow;

package/Table/TableBodyRow.js

@@ -1,6 +1,7 @@
 import { jsxs, jsx } from 'react/jsx-runtime';
 import { forwardRef, useContext, useState, useMemo, Fragment } from 'react';
 import { tableClasses, getColumnStyle, getCellStyle } from '@mezzanine-ui/core/table';
+import { Draggable } from 'react-beautiful-dnd';
 import get from 'lodash/get';
 import { TableContext, TableDataContext } from './TableContext.js';
 import TableCell from './TableCell.js';
@@ -9,11 +10,12 @@ import TableRowSelection from './rowSelection/TableRowSelection.js';
 import TableExpandable from './expandable/TableExpandable.js';
 import TableEditRenderWrapper from './editable/TableEditRenderWrapper.js';
 import AccordionDetails from '../Accordion/AccordionDetails.js';
+import { composeRefs } from '../utils/composeRefs.js';
 import cx from 'clsx';
 
 const TableBodyRow = forwardRef(function TableBodyRow(props, ref) {
     const { className, rowData, rowIndex, ...rest } = props;
-    const { rowSelection, expanding, } = useContext(TableContext) || {};
+    const { rowSelection, expanding, isHorizontalScrolling, scroll, draggable, } = useContext(TableContext) || {};
     const { columns, } = useContext(TableDataContext) || {};
     /** Feature rowSelection */
     const [selected, setSelected] = useState(false);
@@ -27,14 +29,34 @@ const TableBodyRow = forwardRef(function TableBodyRow(props, ref) {
         var _a, _b;
         return ((_b = (_a = expanding === null || expanding === void 0 ? void 0 : expanding.expandedRowRender) === null || _a === void 0 ? void 0 : _a.call(expanding, rowData)) !== null && _b !== void 0 ? _b : null);
     }, [expanding, rowData]);
-    return (jsxs(Fragment, { children: [jsxs("div", { ...rest, ref: ref, className: cx(tableClasses.bodyRow, {
-                    [tableClasses.bodyRowHighlight]: selected || expanded,
-                }, className), role: "row", children: [rowSelection ? (jsx(TableRowSelection, { role: "gridcell", rowKey: (rowData.key || rowData.id), setChecked: (status) => setSelected(status), showDropdownIcon: false })) : null, expanding ? (jsx(TableExpandable, { expandable: isExpandable, expanded: expanded, role: "gridcell", setExpanded: setExpanded, onExpand: (status) => { var _a; return (_a = expanding.onExpand) === null || _a === void 0 ? void 0 : _a.call(expanding, rowData, status); } })) : null, (columns !== null && columns !== void 0 ? columns : []).map((column) => {
-                        var _a, _b, _c, _d;
-                        const ellipsis = !!(get(rowData, column.dataIndex)) && ((_a = column.ellipsis) !== null && _a !== void 0 ? _a : true);
-                        const tooltipTitle = ((_c = (_b = column.renderTooltipTitle) === null || _b === void 0 ? void 0 : _b.call(column, rowData)) !== null && _c !== void 0 ? _c : get(rowData, column.dataIndex));
-                        return (jsx("div", { className: cx(tableClasses.bodyRowCellWrapper, column.bodyClassName), style: getColumnStyle(column), children: jsx(TableEditRenderWrapper, { ...column, rowData: rowData, children: jsx(TableCell, { ellipsis: ellipsis, forceShownTooltipWhenHovered: column.forceShownTooltipWhenHovered, style: getCellStyle(column), tooltipTitle: tooltipTitle, children: ((_d = column.render) === null || _d === void 0 ? void 0 : _d.call(column, rowData, rowIndex, column)) || get(rowData, column.dataIndex) }) }) }, `${column.dataIndex}-${column.title}`));
-                    })] }), renderedExpandedContent ? (jsx(AccordionDetails, { className: cx(expanding.className, tableClasses.bodyRowExpandedTableWrapper), expanded: expanded, children: (renderedExpandedContent === null || renderedExpandedContent === void 0 ? void 0 : renderedExpandedContent.dataSource) ? (jsx(TableExpandedTable, { renderedExpandedContent: renderedExpandedContent })) : renderedExpandedContent })) : null] }));
+    /** Feature scrolling */
+    const isFirstColumnShouldSticky = useMemo(() => {
+        var _a;
+        /** 前面有 action 時不可 sticky */
+        if (rowSelection || expanding)
+            return false;
+        return ((_a = scroll === null || scroll === void 0 ? void 0 : scroll.fixedFirstColumn) !== null && _a !== void 0 ? _a : false);
+    }, [
+        rowSelection,
+        expanding,
+        scroll === null || scroll === void 0 ? void 0 : scroll.fixedFirstColumn,
+    ]);
+    return (jsxs(Fragment, { children: [jsx(Draggable, { index: rowIndex, draggableId: rowData.key || rowData.id, isDragDisabled: !(draggable === null || draggable === void 0 ? void 0 : draggable.enabled), children: (draggableProvided) => (jsxs("tr", { ...rest, ...draggableProvided.draggableProps, ...draggableProvided.dragHandleProps, ref: composeRefs([ref, draggableProvided.innerRef]), className: cx(tableClasses.bodyRow, {
+                        [tableClasses.bodyRowHighlight]: selected || expanded,
+                        [tableClasses.bodyRowDragging]: (draggable === null || draggable === void 0 ? void 0 : draggable.draggingId)
+                            && draggable.draggingId === (rowData.key || rowData.id),
+                    }, className), children: [rowSelection ? (jsx("td", { className: tableClasses.bodyRowCellWrapper, style: {
+                                flex: 'unset',
+                                minWidth: 'unset',
+                            }, children: jsx(TableRowSelection, { rowKey: (rowData.key || rowData.id), setChecked: (status) => setSelected(status), showDropdownIcon: false }) })) : null, expanding ? (jsx("td", { className: tableClasses.bodyRowCellWrapper, style: {
+                                flex: 'unset',
+                                minWidth: 'unset',
+                            }, children: jsx(TableExpandable, { expandable: isExpandable, expanded: expanded, setExpanded: setExpanded, onExpand: (status) => { var _a; return (_a = expanding.onExpand) === null || _a === void 0 ? void 0 : _a.call(expanding, rowData, status); } }) })) : null, (columns !== null && columns !== void 0 ? columns : []).map((column, idx) => {
+                            var _a, _b, _c, _d;
+                            const ellipsis = !!(get(rowData, column.dataIndex)) && ((_a = column.ellipsis) !== null && _a !== void 0 ? _a : true);
+                            const tooltipTitle = ((_c = (_b = column.renderTooltipTitle) === null || _b === void 0 ? void 0 : _b.call(column, rowData)) !== null && _c !== void 0 ? _c : get(rowData, column.dataIndex));
+                            return (jsx("td", { className: cx(tableClasses.bodyRowCellWrapper, isFirstColumnShouldSticky && idx === 0 && tableClasses.bodyRowCellWrapperFixed, isFirstColumnShouldSticky && idx === 0 && isHorizontalScrolling && tableClasses.bodyRowCellWrapperFixedStuck, column.bodyClassName), style: getColumnStyle(column), children: jsx(TableEditRenderWrapper, { ...column, rowData: rowData, children: jsx(TableCell, { ellipsis: ellipsis, forceShownTooltipWhenHovered: column.forceShownTooltipWhenHovered, style: getCellStyle(column), tooltipTitle: tooltipTitle, children: ((_d = column.render) === null || _d === void 0 ? void 0 : _d.call(column, rowData, rowIndex, column)) || get(rowData, column.dataIndex) }) }) }, `${column.dataIndex}-${column.title}`));
+                        })] })) }, rowData.key || rowData.id), renderedExpandedContent ? (jsx("tr", { children: jsx("td", { style: { padding: 0 }, children: jsx(AccordionDetails, { className: cx(expanding.className, tableClasses.bodyRowExpandedTableWrapper), expanded: expanded, children: (renderedExpandedContent === null || renderedExpandedContent === void 0 ? void 0 : renderedExpandedContent.dataSource) ? (jsx(TableExpandedTable, { renderedExpandedContent: renderedExpandedContent })) : renderedExpandedContent }) }) })) : null] }));
 });
 var TableBodyRow$1 = TableBodyRow;
 

package/Table/TableCell.js

@@ -5,9 +5,9 @@ import Tooltip from '../Tooltip/Tooltip.js';
 import cx from 'clsx';
 
 const TableCell = forwardRef(function TableCell(props, ref) {
-    const { children, className, ellipsis = true, forceShownTooltipWhenHovered = false, role = 'gridcell', tooltipTitle, ...rest } = props;
+    const { children, className, ellipsis = true, forceShownTooltipWhenHovered = false, tooltipTitle, ...rest } = props;
     const ellipsisRef = useRef(null);
-    return (jsx("div", { ref: ref, ...rest, className: cx(tableClasses.cell, className), role: role, children: ellipsis || forceShownTooltipWhenHovered ? (jsx(Tooltip, { title: `${tooltipTitle}`, options: {
+    return (jsx("div", { ref: ref, ...rest, className: cx(tableClasses.cell, className), children: ellipsis || forceShownTooltipWhenHovered ? (jsx(Tooltip, { title: `${tooltipTitle}`, options: {
                 placement: 'top-start',
             }, children: ({ onMouseEnter, onMouseLeave }) => (jsx("div", { ref: ellipsisRef, className: ellipsis ? tableClasses.cellEllipsis : '', onMouseEnter: (e) => {
                     if (ellipsisRef.current) {

package/Table/TableContext.d.ts

@@ -1,5 +1,5 @@
 import { ReactNode } from 'react';
-import { TableRowSelection, TableColumn, TableExpandable, TablePagination, TableDataSource, TableRecord, ExpandRowBySources } from '@mezzanine-ui/core/table';
+import { TableRowSelection, TableColumn, TableExpandable, TablePagination, TableDataSource, TableRecord, ExpandRowBySources, TableScrolling, TableDraggable } from '@mezzanine-ui/core/table';
 import { EmptyProps } from '../Empty';
 /** typeof rowSelection */
 export interface RowSelectionContext extends Pick<TableRowSelection, 'actions'> {
@@ -24,7 +24,7 @@ export interface FetchMoreContext {
     isReachEnd: boolean;
 }
 export interface TableContextProps {
-    scrollBarSize?: number;
+    isHorizontalScrolling?: boolean;
     emptyProps?: EmptyProps;
     rowSelection?: RowSelectionContext;
     sorting?: SortingContext;
@@ -35,6 +35,10 @@ export interface TableContextProps {
     };
     fetchMore?: FetchMoreContext;
     pagination?: TablePagination;
+    scroll?: TableScrolling;
+    draggable?: TableDraggable & {
+        draggingId: string;
+    };
 }
 export declare const TableContext: import("react").Context<TableContextProps | null>;
 export interface TableDataContextProps {

package/Table/TableHeader.d.ts

@@ -1,4 +1,4 @@
 /// <reference types="react" />
 import { NativeElementPropsWithoutKeyAndRef } from '../utils/jsx-types';
-declare const TableHeader: import("react").ForwardRefExoticComponent<NativeElementPropsWithoutKeyAndRef<"div"> & import("react").RefAttributes<HTMLDivElement>>;
+declare const TableHeader: import("react").ForwardRefExoticComponent<NativeElementPropsWithoutKeyAndRef<"div"> & import("react").RefAttributes<HTMLTableRowElement>>;
 export default TableHeader;

package/Table/TableHeader.js

@@ -1,5 +1,5 @@
-import { jsxs, jsx } from 'react/jsx-runtime';
-import { forwardRef, useContext } from 'react';
+import { jsx, jsxs } from 'react/jsx-runtime';
+import { forwardRef, useContext, useMemo } from 'react';
 import { tableClasses, getColumnStyle, getCellStyle } from '@mezzanine-ui/core/table';
 import { TableContext, TableDataContext } from './TableContext.js';
 import { SELECTED_ALL_KEY } from './rowSelection/useTableRowSelection.js';
@@ -11,12 +11,23 @@ import cx from 'clsx';
 
 const TableHeader = forwardRef(function TableHeader(props, ref) {
     const { className, ...rest } = props;
-    const { rowSelection, expanding, } = useContext(TableContext) || {};
+    const { rowSelection, isHorizontalScrolling, scroll, expanding, } = useContext(TableContext) || {};
     const { columns, } = useContext(TableDataContext) || {};
-    return (jsxs("div", { ref: ref, ...rest, className: cx(tableClasses.header, className), role: "rowgroup", children: [rowSelection ? (jsx(TableRowSelection, { rowKey: SELECTED_ALL_KEY, showDropdownIcon: true })) : null, expanding && !rowSelection ? (jsx(TableExpandable, { showIcon: false })) : null, (columns !== null && columns !== void 0 ? columns : []).map((column) => {
-                var _a;
-                return (jsx("div", { className: cx(tableClasses.headerCellWrapper, column.headerClassName), style: getColumnStyle(column), children: jsxs(TableCell, { ellipsis: false, role: "columnheader", style: getCellStyle(column), children: [((_a = column.renderTitle) === null || _a === void 0 ? void 0 : _a.call(column, tableClasses)) || column.title, typeof column.sorter === 'function' || typeof column.onSorted === 'function' ? (jsx(TableSortingIcon, { column: column })) : null] }) }, `${column.dataIndex}-${column.title}`));
-            })] }));
+    const isFirstColumnShouldSticky = useMemo(() => {
+        var _a;
+        /** 前面有 action 時不可 sticky */
+        if (rowSelection || expanding)
+            return false;
+        return ((_a = scroll === null || scroll === void 0 ? void 0 : scroll.fixedFirstColumn) !== null && _a !== void 0 ? _a : false);
+    }, [
+        rowSelection,
+        expanding,
+        scroll === null || scroll === void 0 ? void 0 : scroll.fixedFirstColumn,
+    ]);
+    return (jsx("thead", { className: tableClasses.headerFixed, children: jsxs("tr", { ref: ref, ...rest, className: cx(tableClasses.header, className), children: [rowSelection ? (jsx("th", { style: { display: 'flex' }, children: jsx(TableRowSelection, { rowKey: SELECTED_ALL_KEY, showDropdownIcon: true }) })) : null, expanding && !rowSelection ? (jsx("th", { style: { display: 'flex' }, children: jsx(TableExpandable, { showIcon: false }) })) : null, (columns !== null && columns !== void 0 ? columns : []).map((column, idx) => {
+                    var _a;
+                    return (jsx("th", { className: cx(tableClasses.headerCellWrapper, isFirstColumnShouldSticky && idx === 0 && tableClasses.headerCellWrapperFixed, isFirstColumnShouldSticky && idx === 0 && isHorizontalScrolling && tableClasses.headerCellWrapperFixedStuck, column.headerClassName), style: getColumnStyle(column), children: jsxs(TableCell, { ellipsis: false, style: getCellStyle(column), children: [((_a = column.renderTitle) === null || _a === void 0 ? void 0 : _a.call(column, tableClasses)) || column.title, typeof column.sorter === 'function' || typeof column.onSorted === 'function' ? (jsx(TableSortingIcon, { column: column })) : null] }) }, `${column.dataIndex}-${column.title}`));
+                })] }) }));
 });
 var TableHeader$1 = TableHeader;
 

package/Table/draggable/useTableDraggable.d.ts

@@ -0,0 +1,14 @@
+import { Dispatch, SetStateAction } from 'react';
+import { TableDataSource, TableDraggable } from '@mezzanine-ui/core/table';
+export interface UseTableDraggable {
+    dataSource: TableDataSource[];
+    setDataSource: Dispatch<SetStateAction<TableDataSource[]>>;
+    draggable?: TableDraggable;
+}
+export declare function useTableDraggable(props: UseTableDraggable): {
+    draggingId: string;
+    onBeforeDragStart: (e: {
+        draggableId: SetStateAction<string>;
+    }) => void;
+    onDragEnd: import("react-beautiful-dnd").OnDragEndResponder;
+};

package/Table/draggable/useTableDraggable.js

@@ -0,0 +1,63 @@
+import { useRef, useState, useEffect, useCallback } from 'react';
+import isEqual from 'lodash/isEqual';
+import debounce from 'lodash/debounce';
+import { arrayMove } from '../../utils/array-move.js';
+import { usePreviousValue } from '../../hooks/usePreviousValue.js';
+
+function useTableDraggable(props) {
+    const { dataSource, setDataSource, draggable } = props;
+    const resultSnapshot = useRef(null);
+    const dataSnapShot = useRef(dataSource);
+    const isDragging = useRef(false);
+    const [draggingId, setDraggingId] = useState('');
+    const prevDataSource = usePreviousValue(dataSource);
+    useEffect(() => {
+        if (!isEqual(prevDataSource, dataSource)) {
+            dataSnapShot.current = dataSource;
+        }
+    }, [prevDataSource, dataSource]);
+    const onBeforeDragStart = useCallback((e) => {
+        isDragging.current = true;
+        setDraggingId(e.draggableId);
+    }, []);
+    const onDragEnd = useCallback(async (result, id) => {
+        var _a, _b;
+        resultSnapshot.current = [result, id];
+        isDragging.current = false;
+        setDraggingId('');
+        const temp = [...dataSnapShot.current];
+        const from = result.source.index;
+        const to = (_b = (_a = result.destination) === null || _a === void 0 ? void 0 : _a.index) !== null && _b !== void 0 ? _b : from;
+        const newData = arrayMove(temp, from, to);
+        dataSnapShot.current = newData;
+        setDataSource(newData);
+    }, [setDataSource]);
+    useEffect(() => {
+        if (!(draggable === null || draggable === void 0 ? void 0 : draggable.enabled))
+            return () => { };
+        async function onMouseUp() {
+            var _a, _b, _c;
+            if (isDragging.current)
+                return;
+            const args = resultSnapshot.current;
+            resultSnapshot.current = null;
+            if (!(args === null || args === void 0 ? void 0 : args[0]) || ((_a = args === null || args === void 0 ? void 0 : args[0]) === null || _a === void 0 ? void 0 : _a.source.index) === ((_c = (_b = args === null || args === void 0 ? void 0 : args[0]) === null || _b === void 0 ? void 0 : _b.destination) === null || _c === void 0 ? void 0 : _c.index))
+                return;
+            if ((draggable === null || draggable === void 0 ? void 0 : draggable.onDragEnd) && args) {
+                draggable.onDragEnd(Array.from(dataSnapShot.current));
+            }
+        }
+        const debouncedOnMouseUp = debounce(onMouseUp, 500);
+        window.addEventListener('mouseup', debouncedOnMouseUp, false);
+        return () => {
+            window.removeEventListener('mouseup', debouncedOnMouseUp, false);
+        };
+    }, [draggable]);
+    return {
+        draggingId,
+        onBeforeDragStart,
+        onDragEnd,
+    };
+}
+
+export { useTableDraggable };

package/Table/index.d.ts

@@ -2,3 +2,5 @@ export { TableProps, default, } from './Table';
 export { TableRefreshProps, default as TableRefresh, } from './refresh/TableRefresh';
 export { TableCellProps, default as TableCell, } from './TableCell';
 export { EditableBodyCellProps, } from './editable/TableEditRenderWrapper';
+export { useTableDraggable, } from './draggable/useTableDraggable';
+export { default as useTableScroll, } from './useTableScroll';

package/Table/index.js

@@ -1,3 +1,5 @@
 export { default } from './Table.js';
 export { default as TableRefresh } from './refresh/TableRefresh.js';
 export { default as TableCell } from './TableCell.js';
+export { useTableDraggable } from './draggable/useTableDraggable.js';
+export { default as useTableScroll } from './useTableScroll.js';

package/Table/sorting/useTableSorting.d.ts

@@ -1,3 +1,4 @@
+/// <reference types="react" />
 import { TableDataSource, TableColumn, TableRecord } from '@mezzanine-ui/core/table';
 export interface UseTableSorting {
     dataSource: TableDataSource[];
@@ -7,4 +8,5 @@ export declare function useTableSorting(props: UseTableSorting): readonly [Table
     readonly sortedOn: string;
     readonly sortedType: SortedType;
     readonly onResetAll: () => void;
+    readonly setDataSource: import("react").Dispatch<import("react").SetStateAction<TableDataSource[]>>;
 }];

package/Table/sorting/useTableSorting.js

@@ -107,7 +107,7 @@ function useTableSorting(props) {
             }
         }
     });
-    return [dataSource, onChange, { sortedOn, sortedType, onResetAll }];
+    return [dataSource, onChange, { sortedOn, sortedType, onResetAll, setDataSource }];
 }
 
 export { useTableSorting };