@pdg/react-table 1.0.3 → 1.0.5

package/README.md

@@ -4,5 +4,5 @@ React Table
 
 ## 설치
 ```
-npm install -D @pdg/react-table @pdg/react-form @mui/material @mui/icons-material @emotion/react @emotion/styled @mui/x-date-pickers dayjs
+npm install -D @pdg/react-table @pdg/react-form @mui/material @mui/icons-material @emotion/react @emotion/styled @mui/x-date-pickers dayjs @dnd-kit/core @dnd-kit/sortable
 ```

package/dist/Table/Table.types.d.ts

@@ -65,9 +65,11 @@ export interface TableProps<T = TableItem> extends CommonSxProps {
         style?: CommonSxProps['style'];
         sx?: CommonSxProps['sx'];
     };
+    sortable?: boolean;
     onClick?(item: T, index: number): void;
     onGetBodyRowSx?(item: T, index: number): CommonSxProps['sx'] | undefined;
     onPageChange?(page: number): void;
+    onSortChange?(items: T[]): void;
 }
 export declare const TableDefaultProps: Pick<TableProps, 'defaultAlign' | 'pagingAlign' | 'cellPadding'>;
 export interface TableCommands {

package/dist/TableBodyRow/TableBodyRow.d.ts

@@ -0,0 +1,13 @@
+import React from 'react';
+import { TableBodyRowProps as Props } from './TableBodyRow.types';
+export declare const StyledBodyRow: import("@emotion/styled").StyledComponent<{
+    children?: React.ReactNode;
+    classes?: Partial<import("@mui/material").TableRowClasses> | undefined;
+    hover?: boolean | undefined;
+    selected?: boolean | undefined;
+    sx?: import("@mui/material").SxProps<import("@mui/material").Theme> | undefined;
+} & import("@mui/material/OverridableComponent").CommonProps & Omit<Pick<React.DetailedHTMLProps<React.HTMLAttributes<HTMLTableRowElement>, HTMLTableRowElement>, "key" | keyof React.HTMLAttributes<HTMLTableRowElement>> & {
+    ref?: ((instance: HTMLTableRowElement | null) => void) | React.RefObject<HTMLTableRowElement> | null | undefined;
+}, keyof import("@mui/material/OverridableComponent").CommonProps | "children" | "hover" | "selected" | "sx"> & import("@mui/system").MUIStyledCommonProps<import("@mui/material").Theme>, {}, {}>;
+declare const TableBodyRow: React.FC<Props>;
+export default TableBodyRow;

package/dist/TableBodyRow/TableBodyRow.types.d.ts

@@ -0,0 +1,13 @@
+import { TableCellProps, TableRowProps } from '@mui/material';
+import { TableColumn, TableItem, TableProps } from '../Table';
+export interface TableBodyRowProps extends Omit<TableRowProps, 'id' | 'onClick'> {
+    id: string | number;
+    index: number;
+    defaultAlign?: TableCellProps['align'];
+    defaultEllipsis?: boolean;
+    sortable?: boolean;
+    columns: TableColumn<TableItem>[];
+    item: TableItem;
+    onClick: TableProps['onClick'];
+}
+export declare const TableBodyRowDefaultProps: {};

package/dist/TableBodyRow/index.d.ts

@@ -0,0 +1,4 @@
+import TableBodyRow from './TableBodyRow';
+export default TableBodyRow;
+export { TableBodyRow };
+export * from './TableBodyRow.types';

package/dist/index.esm.js

@@ -1,4 +1,45 @@
-import*as React from'react';import React__default,{useRef,useEffect,cloneElement,useState,isValidElement,createRef,PureComponent,useLayoutEffect,useCallback}from'react';import {styled,TableRow,lighten,TableCell,Box,Tooltip,Stack,Pagination,Paper,Table as Table$1,TableHead,TableBody,Icon,TableFooter,Grid,Button}from'@mui/material';import {findDOMNode}from'react-dom';import dayjs from'dayjs';import {Search,SearchGroup,FormHidden}from'@pdg/react-form';var commonjsGlobal$1 = typeof globalThis !== 'undefined' ? globalThis : typeof window !== 'undefined' ? window : typeof global !== 'undefined' ? global : typeof self !== 'undefined' ? self : {};var classnames = {exports: {}};/*!
+import*as React from'react';import React__default,{useRef,useEffect,cloneElement,useState,isValidElement,createRef,PureComponent,useLayoutEffect,useCallback}from'react';import {styled,TableRow,lighten,TableCell,Box,Tooltip,Stack,Pagination,Paper,Table as Table$1,TableHead,TableBody,Icon,TableFooter,Grid,Button}from'@mui/material';import {findDOMNode}from'react-dom';import {useSortable,sortableKeyboardCoordinates,arrayMove,SortableContext,verticalListSortingStrategy}from'@dnd-kit/sortable';import dayjs from'dayjs';import {useSensors,useSensor,MouseSensor,TouchSensor,KeyboardSensor,DndContext,closestCenter}from'@dnd-kit/core';import {Search,SearchGroup,FormHidden}from'@pdg/react-form';/******************************************************************************
+Copyright (c) Microsoft Corporation.
+
+Permission to use, copy, modify, and/or distribute this software for any
+purpose with or without fee is hereby granted.
+
+THE SOFTWARE IS PROVIDED "AS IS" AND THE AUTHOR DISCLAIMS ALL WARRANTIES WITH
+REGARD TO THIS SOFTWARE INCLUDING ALL IMPLIED WARRANTIES OF MERCHANTABILITY
+AND FITNESS. IN NO EVENT SHALL THE AUTHOR BE LIABLE FOR ANY SPECIAL, DIRECT,
+INDIRECT, OR CONSEQUENTIAL DAMAGES OR ANY DAMAGES WHATSOEVER RESULTING FROM
+LOSS OF USE, DATA OR PROFITS, WHETHER IN AN ACTION OF CONTRACT, NEGLIGENCE OR
+OTHER TORTIOUS ACTION, ARISING OUT OF OR IN CONNECTION WITH THE USE OR
+PERFORMANCE OF THIS SOFTWARE.
+***************************************************************************** */
+
+var __assign$1 = function() {
+    __assign$1 = Object.assign || function __assign(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p)) t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign$1.apply(this, arguments);
+};
+
+function __rest$1(s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+}
+
+function __makeTemplateObject(cooked, raw) {
+    if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
+    return cooked;
+}var commonjsGlobal$1 = typeof globalThis !== 'undefined' ? globalThis : typeof window !== 'undefined' ? window : typeof global !== 'undefined' ? global : typeof self !== 'undefined' ? self : {};var classnames = {exports: {}};/*!
 	Copyright (c) 2018 Jed Watson.
 	Licensed under the MIT License (MIT), see
 	http://jedwatson.github.io/classnames
@@ -7350,18 +7391,18 @@ function __extends(d, b) {
     d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
 }
 
-var __assign$1 = function() {
-    __assign$1 = Object.assign || function __assign(t) {
+var __assign = function() {
+    __assign = Object.assign || function __assign(t) {
         for (var s, i = 1, n = arguments.length; i < n; i++) {
             s = arguments[i];
             for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p)) t[p] = s[p];
         }
         return t;
     };
-    return __assign$1.apply(this, arguments);
+    return __assign.apply(this, arguments);
 };
 
-function __rest$1(s, e) {
+function __rest(s, e) {
     var t = {};
     for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
         t[p] = s[p];
@@ -8123,7 +8164,7 @@ var createNotifier = function (onResize, setSize, handleWidth, handleHeight) {
                 typedChildren = children;
                 if (typedChildren.type && typeof typedChildren.type === 'string') {
                     // child is a native DOM elements such as div, span etc
-                    childProps.targetRef; var nativeProps = __rest$1(childProps, ["targetRef"]);
+                    childProps.targetRef; var nativeProps = __rest(childProps, ["targetRef"]);
                     return cloneElement(typedChildren, nativeProps);
                 }
                 // class or functional component otherwise
@@ -8179,53 +8220,12 @@ function useResizeDetector(props) {
             }
         };
     }, [refreshMode, refreshRate, refreshOptions, handleWidth, handleHeight, onResize, observerOptions, ref.current]);
-    return __assign$1({ ref: ref }, size);
+    return __assign({ ref: ref }, size);
 }var TableDefaultProps = {
     defaultAlign: 'left',
     pagingAlign: 'center',
     cellPadding: 13,
-};/******************************************************************************
-Copyright (c) Microsoft Corporation.
-
-Permission to use, copy, modify, and/or distribute this software for any
-purpose with or without fee is hereby granted.
-
-THE SOFTWARE IS PROVIDED "AS IS" AND THE AUTHOR DISCLAIMS ALL WARRANTIES WITH
-REGARD TO THIS SOFTWARE INCLUDING ALL IMPLIED WARRANTIES OF MERCHANTABILITY
-AND FITNESS. IN NO EVENT SHALL THE AUTHOR BE LIABLE FOR ANY SPECIAL, DIRECT,
-INDIRECT, OR CONSEQUENTIAL DAMAGES OR ANY DAMAGES WHATSOEVER RESULTING FROM
-LOSS OF USE, DATA OR PROFITS, WHETHER IN AN ACTION OF CONTRACT, NEGLIGENCE OR
-OTHER TORTIOUS ACTION, ARISING OUT OF OR IN CONNECTION WITH THE USE OR
-PERFORMANCE OF THIS SOFTWARE.
-***************************************************************************** */
-
-var __assign = function() {
-    __assign = Object.assign || function __assign(t) {
-        for (var s, i = 1, n = arguments.length; i < n; i++) {
-            s = arguments[i];
-            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p)) t[p] = s[p];
-        }
-        return t;
-    };
-    return __assign.apply(this, arguments);
-};
-
-function __rest(s, e) {
-    var t = {};
-    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
-        t[p] = s[p];
-    if (s != null && typeof Object.getOwnPropertySymbols === "function")
-        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
-            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
-                t[p[i]] = s[p[i]];
-        }
-    return t;
-}
-
-function __makeTemplateObject(cooked, raw) {
-    if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
-    return cooked;
-}var StyledBodyRow = styled(TableRow)(function (_a) {
+};var StyledBodyRow$1 = styled(TableRow)(function (_a) {
     var theme = _a.theme;
     return ({
         '&:last-child > .MuiTableCell-root': {
@@ -8240,7 +8240,57 @@ function __makeTemplateObject(cooked, raw) {
     });
 });
 var StyledNoDataDiv = styled('div')(templateObject_1$2 || (templateObject_1$2 = __makeTemplateObject(["\n  text-align: center;\n  padding: 30px 0;\n  font-weight: 500;\n  font-size: 13px;\n  color: #94a0b2;\n  opacity: 0.8;\n\n  .material-icons {\n    font-size: 40px;\n    margin-bottom: 5px;\n  }\n"], ["\n  text-align: center;\n  padding: 30px 0;\n  font-weight: 500;\n  font-size: 13px;\n  color: #94a0b2;\n  opacity: 0.8;\n\n  .material-icons {\n    font-size: 40px;\n    margin-bottom: 5px;\n  }\n"])));
-var templateObject_1$2;var empty = function (v) {
+var templateObject_1$2;var TableBodyRowDefaultProps = {};const CSS = /*#__PURE__*/Object.freeze({
+  Translate: {
+    toString(transform) {
+      if (!transform) {
+        return;
+      }
+
+      const {
+        x,
+        y
+      } = transform;
+      return "translate3d(" + (x ? Math.round(x) : 0) + "px, " + (y ? Math.round(y) : 0) + "px, 0)";
+    }
+
+  },
+  Scale: {
+    toString(transform) {
+      if (!transform) {
+        return;
+      }
+
+      const {
+        scaleX,
+        scaleY
+      } = transform;
+      return "scaleX(" + scaleX + ") scaleY(" + scaleY + ")";
+    }
+
+  },
+  Transform: {
+    toString(transform) {
+      if (!transform) {
+        return;
+      }
+
+      return [CSS.Translate.toString(transform), CSS.Scale.toString(transform)].join(' ');
+    }
+
+  },
+  Transition: {
+    toString(_ref) {
+      let {
+        property,
+        duration,
+        easing
+      } = _ref;
+      return property + " " + duration + "ms " + easing;
+    }
+
+  }
+});var empty = function (v) {
     var result = false;
     if (v == null) {
         result = true;
@@ -8407,7 +8457,7 @@ var TableCommonCell = function (_a) {
                 getStyle = ((_e = column.footer) === null || _e === void 0 ? void 0 : _e.onGetStyle) ? (_f = column.footer) === null || _f === void 0 ? void 0 : _f.onGetStyle() : undefined;
                 break;
         }
-        return __assign(__assign(__assign(__assign({}, initStyle), { width: column.width, minWidth: column.minWidth, cursor: type === 'body' && (column.onClick || onClick) ? 'pointer' : undefined }), style), getStyle);
+        return __assign$1(__assign$1(__assign$1(__assign$1({}, initStyle), { width: column.width, minWidth: column.minWidth, cursor: type === 'body' && (column.onClick || onClick) ? 'pointer' : undefined }), style), getStyle);
     }, [initStyle, column, onClick, item, index]))[0];
     var sx = useAutoUpdateState(useCallback(function () {
         var _a, _b, _c, _d, _e, _f;
@@ -8443,7 +8493,7 @@ var TableCommonCell = function (_a) {
             else {
                 if (!sxList.find(function (sx) { return typeof sx !== 'object'; })) {
                     return sxList.reduce(function (res, sx) {
-                        res = __assign(__assign({}, res), sx);
+                        res = __assign$1(__assign$1({}, res), sx);
                         return res;
                     }, {});
                 }
@@ -8466,24 +8516,22 @@ var TableCommonCell = function (_a) {
         }
     }, [type, column, onClick, item, index]);
     // Render ----------------------------------------------------------------------------------------------------------
-    return (React__default.createElement(StyledTableCell, { align: align, className: classNames(className, 'TableCommonCell', ellipsis && 'ellipsis'), style: style, sx: sx, onClick: type === 'body' ? handleClick : undefined }, children));
+    return (React__default.createElement(StyledTableCell, { align: align, className: classNames(className, 'TableCommonCell', ellipsis && 'ellipsis', column.type ? "column-type-".concat(column.type) : false), style: style, sx: sx, onClick: type === 'body' ? handleClick : undefined }, children));
 };
-var templateObject_1$1;var TableHeadCell = function (_a) {
-    var column = _a.column, defaultAlign = _a.defaultAlign;
-    var data = useAutoUpdateState(useCallback(function () {
-        var _a, _b;
-        if ((_a = column.head) === null || _a === void 0 ? void 0 : _a.onRender) {
-            return (_b = column.head) === null || _b === void 0 ? void 0 : _b.onRender();
-        }
-        else {
-            return column.label;
-        }
-    }, [column]))[0];
-    return (React__default.createElement(TableCommonCell, { type: 'head', column: column, defaultAlign: defaultAlign }, data));
-};var StyledButtonsBox = styled(Box)(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  display: inline-flex;\n  flex-wrap: wrap;\n  gap: 5px;\n"], ["\n  display: inline-flex;\n  flex-wrap: wrap;\n  gap: 5px;\n"])));
+var templateObject_1$1;var StyledButtonsBox = styled(Box)(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  display: flex;\n  flex-wrap: wrap;\n  gap: 5px;\n"], ["\n  display: flex;\n  flex-wrap: wrap;\n  gap: 5px;\n"])));
 var TableBodyCell = function (_a) {
     // State -----------------------------------------------------------------------------------------------------------
     var item = _a.item, index = _a.index, column = _a.column, defaultAlign = _a.defaultAlign, defaultEllipsis = _a.defaultEllipsis, onClick = _a.onClick;
+    var buttonsBoxJustifyContent = useAutoUpdateState(useCallback(function () {
+        switch (getTableColumnAlign(column, defaultAlign)) {
+            case 'center':
+                return 'center';
+            case 'right':
+                return 'end';
+            default:
+                return 'start';
+        }
+    }, [column, defaultAlign]))[0];
     var _b = useState(), data = _b[0], setData = _b[1];
     // Effect ----------------------------------------------------------------------------------------------------------
     useEffect(function () {
@@ -8505,10 +8553,10 @@ var TableBodyCell = function (_a) {
                 }
                 break;
             case 'button':
-                data = React__default.createElement(Box, { onClick: function (e) { return e.stopPropagation(); } }, data);
+                data = (React__default.createElement(Box, { className: 'TableBoxyCell-button-box', onClick: function (e) { return e.stopPropagation(); } }, data));
                 break;
             case 'buttons':
-                data = React__default.createElement(StyledButtonsBox, { onClick: function (e) { return e.stopPropagation(); } }, data);
+                data = (React__default.createElement(StyledButtonsBox, { className: 'TableBodyCell-buttons-box', justifyContent: buttonsBoxJustifyContent, onClick: function (e) { return e.stopPropagation(); } }, data));
                 break;
         }
         switch (column.type) {
@@ -8519,7 +8567,7 @@ var TableBodyCell = function (_a) {
                     data = (React__default.createElement("a", { href: data, target: '_blank', onClick: function (e) {
                             e.stopPropagation();
                         } },
-                        React__default.createElement(Tooltip, __assign({ title: React__default.createElement("div", { style: { paddingTop: 3, paddingBottom: 3 } }, img) }, column.tooltipProps, { placement: placement }), img)));
+                        React__default.createElement(Tooltip, __assign$1({ className: 'TableBodyCell-tooltip', title: React__default.createElement("div", { style: { paddingTop: 3, paddingBottom: 3 } }, img) }, column.tooltipProps, { placement: placement }), img)));
                 }
                 break;
             case 'date':
@@ -8539,7 +8587,7 @@ var TableBodyCell = function (_a) {
                         tooltip = column.onGetTooltip(item, index);
                     }
                     if (tooltip) {
-                        data = (React__default.createElement(Tooltip, __assign({ title: tooltip }, column.tooltipProps), React__default.isValidElement(data) ? data : React__default.createElement("span", null, data)));
+                        data = (React__default.createElement(Tooltip, __assign$1({ className: 'TableBodyCell-tooltip', title: tooltip }, column.tooltipProps), React__default.isValidElement(data) ? data : React__default.createElement("span", null, data)));
                     }
                 }
                 break;
@@ -8557,9 +8605,52 @@ var TableBodyCell = function (_a) {
         }
     }, [column, onClick]);
     // Render ----------------------------------------------------------------------------------------------------------
-    return (React__default.createElement(TableCommonCell, { type: 'body', column: column, defaultAlign: defaultAlign, defaultEllipsis: defaultEllipsis, item: item, index: index, onClick: column.onClick || onClick ? handleClick : undefined }, data));
+    return (React__default.createElement(TableCommonCell, { type: 'body', className: 'TableBodyCell', column: column, defaultAlign: defaultAlign, defaultEllipsis: defaultEllipsis, item: item, index: index, onClick: column.onClick || onClick ? handleClick : undefined }, data));
 };
-var templateObject_1;var TableFooterCell = function (_a) {
+var templateObject_1;var StyledBodyRow = styled(TableRow)(function (_a) {
+    var theme = _a.theme;
+    return ({
+        '&:last-child > .MuiTableCell-root': {
+            borderBottom: 0,
+        },
+        '&.odd-color:nth-of-type(odd):not(:hover)': {
+            backgroundColor: lighten(theme.palette.action.hover, 0.4),
+        },
+        '&.even-color:nth-of-type(even):not(:hover)': {
+            backgroundColor: lighten(theme.palette.action.hover, 0.4),
+        },
+    });
+});
+var TableBodyRow = function (_a) {
+    var style = _a.style, 
+    //--------------------------------------------------------------------------------------------------------------------
+    id = _a.id, index = _a.index, defaultAlign = _a.defaultAlign, defaultEllipsis = _a.defaultEllipsis, sortable = _a.sortable, columns = _a.columns, item = _a.item, onClick = _a.onClick, props = __rest$1(_a, ["style", "id", "index", "defaultAlign", "defaultEllipsis", "sortable", "columns", "item", "onClick"]);
+    var finalStyle;
+    var sortableProps = {};
+    if (sortable) {
+        var _b = useSortable({ id: id }), attributes = _b.attributes, listeners = _b.listeners, setNodeRef = _b.setNodeRef, transform = _b.transform, transition = _b.transition;
+        finalStyle = __assign$1(__assign$1({}, style), { transform: CSS.Transform.toString(transform), transition: transition });
+        sortableProps = __assign$1(__assign$1({ ref: setNodeRef }, attributes), listeners);
+    }
+    else {
+        finalStyle = style;
+    }
+    return (React__default.createElement(StyledBodyRow, __assign$1({ style: finalStyle }, props, sortableProps), columns.map(function (column, columnIdx) { return (React__default.createElement(TableBodyCell, { key: columnIdx, index: index, item: item, defaultAlign: defaultAlign, defaultEllipsis: defaultEllipsis, column: column, onClick: onClick })); })));
+};
+TableBodyRow.displayName = 'TableBodyRow';
+TableBodyRow.defaultProps = TableBodyRowDefaultProps;var TableHeadCell = function (_a) {
+    var column = _a.column, defaultAlign = _a.defaultAlign;
+    var data = useAutoUpdateState(useCallback(function () {
+        var _a, _b;
+        if ((_a = column.head) === null || _a === void 0 ? void 0 : _a.onRender) {
+            return (_b = column.head) === null || _b === void 0 ? void 0 : _b.onRender();
+        }
+        else {
+            return column.label;
+        }
+    }, [column]))[0];
+    return (React__default.createElement(TableCommonCell, { type: 'head', className: 'TableHeadCell', column: column, defaultAlign: defaultAlign }, data));
+};var TableFooterCell = function (_a) {
     var column = _a.column, defaultAlign = _a.defaultAlign;
     var data = useAutoUpdateState(useCallback(function () {
         var _a, _b, _c;
@@ -8570,7 +8661,7 @@ var templateObject_1;var TableFooterCell = function (_a) {
             return (_c = column.footer) === null || _c === void 0 ? void 0 : _c.value;
         }
     }, [column]))[0];
-    return (React__default.createElement(TableCommonCell, { type: 'head', column: column, defaultAlign: defaultAlign, style: { borderTop: '1px solid rgba(224, 224, 224, 1)' } }, data));
+    return (React__default.createElement(TableCommonCell, { type: 'head', className: 'TableFooterCell', column: column, defaultAlign: defaultAlign, style: { borderTop: '1px solid rgba(224, 224, 224, 1)' } }, data));
 };var TablePagination = function (_a) {
     var className = _a.className, style = _a.style, sx = _a.sx, paging = _a.paging, align = _a.align, onChange = _a.onChange;
     return (React__default.createElement(Stack, { alignItems: align },
@@ -8608,8 +8699,23 @@ styleInject(css_248z);function columnFilter(v) {
     return v !== undefined && v !== null && v !== false;
 }
 var Table = React__default.forwardRef(function (_a, ref) {
+    // sortable --------------------------------------------------------------------------------------------------------
+    var initColumns = _a.columns, initItems = _a.items, initPaging = _a.paging, pagingAlign = _a.pagingAlign, defaultAlign = _a.defaultAlign, defaultEllipsis = _a.defaultEllipsis, stickyHeader = _a.stickyHeader, height = _a.height, minHeight = _a.minHeight, maxHeight = _a.maxHeight, showOddColor = _a.showOddColor, showEvenColor = _a.showEvenColor, cellPadding = _a.cellPadding, footer = _a.footer, noData = _a.noData, pagination = _a.pagination, sortable = _a.sortable, onClick = _a.onClick, onGetBodyRowSx = _a.onGetBodyRowSx, onPageChange = _a.onPageChange, onSortChange = _a.onSortChange;
+    var sensors = useSensors(useSensor(MouseSensor, {
+        // Require the mouse to move by 10 pixels before activating
+        activationConstraint: {
+            distance: 10,
+        },
+    }), useSensor(TouchSensor, {
+        // Press delay of 250ms, with tolerance of 5px of movement
+        activationConstraint: {
+            delay: 250,
+            tolerance: 5,
+        },
+    }), useSensor(KeyboardSensor, {
+        coordinateGetter: sortableKeyboardCoordinates,
+    }));
     // State - footerHeight --------------------------------------------------------------------------------------------
-    var initColumns = _a.columns, initItems = _a.items, initPaging = _a.paging, pagingAlign = _a.pagingAlign, defaultAlign = _a.defaultAlign, defaultEllipsis = _a.defaultEllipsis, stickyHeader = _a.stickyHeader, height = _a.height, minHeight = _a.minHeight, maxHeight = _a.maxHeight, showOddColor = _a.showOddColor, showEvenColor = _a.showEvenColor, cellPadding = _a.cellPadding, footer = _a.footer, noData = _a.noData, pagination = _a.pagination, onClick = _a.onClick, onGetBodyRowSx = _a.onGetBodyRowSx, onPageChange = _a.onPageChange;
     var _b = useState(), footerHeight = _b[0], setFooterHeight = _b[1];
     var footerHeightResizeDetector = useResizeDetector({
         handleHeight: true,
@@ -8627,7 +8733,8 @@ var Table = React__default.forwardRef(function (_a, ref) {
     var _c = useAutoUpdateState(initColumns), columns = _c[0], setColumns = _c[1];
     var _d = useState(), finalColumns = _d[0], setFinalColumns = _d[1];
     var _e = useAutoUpdateState(initItems), items = _e[0], setItems = _e[1];
-    var _f = useAutoUpdateState(initPaging), paging = _f[0], setPaging = _f[1];
+    var _f = useState(), sortableItems = _f[0], setSortableItems = _f[1];
+    var _g = useAutoUpdateState(initPaging), paging = _g[0], setPaging = _g[1];
     var tableSx = useAutoUpdateState(useCallback(function () {
         var sx = {
             padding: typeof cellPadding === 'number' ? "".concat(cellPadding, "px") : cellPadding,
@@ -8639,6 +8746,12 @@ var Table = React__default.forwardRef(function (_a, ref) {
         };
     }, [cellPadding]))[0];
     // Effect ----------------------------------------------------------------------------------------------------------
+    useEffect(function () {
+        setSortableItems(items === null || items === void 0 ? void 0 : items.map(function (_a, index) {
+            var id = _a.id, item = __rest$1(_a, ["id"]);
+            return __assign$1({ id: id == null ? index : id }, item);
+        }));
+    }, [items]);
     useEffect(function () {
         setFinalColumns(columns === null || columns === void 0 ? void 0 : columns.filter(columnFilter));
     }, [columns]);
@@ -8671,30 +8784,63 @@ var Table = React__default.forwardRef(function (_a, ref) {
             }
         }
     }, [ref, columns, items, paging]);
+    // Event Handler ---------------------------------------------------------------------------------------------------
+    var handleDragEnd = useCallback(function (event) {
+        var active = event.active, over = event.over;
+        if (active && over) {
+            setSortableItems(function (items) {
+                if (items) {
+                    var oldIndex_1 = null;
+                    var newIndex_1 = null;
+                    items.find(function (item, idx) {
+                        if (item.id === active.id) {
+                            oldIndex_1 = idx;
+                        }
+                        else if (item.id === over.id) {
+                            newIndex_1 = idx;
+                        }
+                        return oldIndex_1 != null && newIndex_1 != null;
+                    });
+                    if (oldIndex_1 != null && newIndex_1 != null) {
+                        var finalItems = arrayMove(items, oldIndex_1, newIndex_1);
+                        onSortChange && onSortChange(finalItems);
+                        return finalItems;
+                    }
+                    else {
+                        return items;
+                    }
+                }
+                else {
+                    return items;
+                }
+            });
+        }
+    }, [onSortChange]);
     // Render ----------------------------------------------------------------------------------------------------------
     return finalColumns ? (React__default.createElement(Paper, { className: 'ReactMuiTable', variant: 'outlined', style: { width: '100%' } },
         React__default.createElement(SimpleBar, { style: { height: height, minHeight: minHeight, maxHeight: maxHeight } },
-            React__default.createElement(Table$1, { stickyHeader: stickyHeader, sx: tableSx },
-                React__default.createElement(TableHead, null,
-                    React__default.createElement(TableRow, null, finalColumns.map(function (column, idx) { return (React__default.createElement(TableHeadCell, { key: idx, column: column, defaultAlign: defaultAlign })); }))),
-                React__default.createElement(TableBody, { style: { paddingBottom: footerHeight || 65 } }, items ? (items.length > 0 ? (items.map(function (item, idx) { return (React__default.createElement(StyledBodyRow, { className: classNames(!!showOddColor && 'odd-color', !!showEvenColor && 'even-color'), key: idx, hover: true, sx: onGetBodyRowSx ? onGetBodyRowSx(item, idx) : undefined }, finalColumns.map(function (column, columnIdx) { return (React__default.createElement(TableBodyCell, { key: columnIdx, index: idx, item: item, defaultAlign: defaultAlign, defaultEllipsis: defaultEllipsis, column: column, onClick: onClick })); }))); })) : (React__default.createElement(StyledBodyRow, null,
-                    React__default.createElement(TableCell, { colSpan: finalColumns.length }, noData ? (noData) : (React__default.createElement(StyledNoDataDiv, null,
-                        React__default.createElement("div", null,
-                            React__default.createElement(Icon, null, "error")),
-                        React__default.createElement("div", null, "\uAC80\uC0C9\uB41C \uC815\uBCF4\uAC00 \uC5C6\uC2B5\uB2C8\uB2E4."))))))) : undefined),
-                paging && (React__default.createElement(TableFooter, { ref: footerHeightResizeDetector, sx: {
-                        left: 0,
-                        bottom: 0,
-                        zIndex: 2,
-                        position: 'sticky',
-                        backgroundColor: '#fff',
-                    } },
-                    React__default.createElement(TableRow, null,
-                        React__default.createElement(TableCell, { colSpan: finalColumns.length, style: { borderBottom: 0, borderTop: '1px solid rgba(224, 224, 224, 1)' } },
-                            React__default.createElement(Stack, { alignItems: pagingAlign },
-                                React__default.createElement(TablePagination, { className: pagination === null || pagination === void 0 ? void 0 : pagination.className, style: pagination === null || pagination === void 0 ? void 0 : pagination.style, sx: pagination === null || pagination === void 0 ? void 0 : pagination.sx, paging: paging, align: pagingAlign, onChange: onPageChange })))))),
-                footer && (React__default.createElement(TableFooter, null,
-                    React__default.createElement(TableRow, null, finalColumns.map(function (column, idx) { return (React__default.createElement(TableFooterCell, { key: idx, column: column, defaultAlign: defaultAlign })); })))))))) : null;
+            React__default.createElement(DndContext, { sensors: sensors, collisionDetection: closestCenter, onDragEnd: handleDragEnd },
+                React__default.createElement(Table$1, { stickyHeader: stickyHeader, sx: tableSx },
+                    React__default.createElement(TableHead, null,
+                        React__default.createElement(TableRow, null, finalColumns.map(function (column, idx) { return (React__default.createElement(TableHeadCell, { key: idx, column: column, defaultAlign: defaultAlign })); }))),
+                    React__default.createElement(TableBody, { style: { paddingBottom: footerHeight || 65 } }, sortableItems ? (sortableItems.length > 0 ? (React__default.createElement(SortableContext, { items: sortableItems, strategy: verticalListSortingStrategy }, sortableItems.map(function (item, idx) { return (React__default.createElement(TableBodyRow, { key: item.id, className: classNames(!!showOddColor && 'odd-color', !!showEvenColor && 'even-color'), hover: true, sx: onGetBodyRowSx ? onGetBodyRowSx(item, idx) : undefined, id: item.id, index: idx, defaultAlign: defaultAlign, defaultEllipsis: defaultEllipsis, sortable: sortable, columns: finalColumns, item: item, onClick: onClick })); }))) : (React__default.createElement(StyledBodyRow$1, null,
+                        React__default.createElement(TableCell, { colSpan: finalColumns.length }, noData ? (noData) : (React__default.createElement(StyledNoDataDiv, null,
+                            React__default.createElement("div", null,
+                                React__default.createElement(Icon, null, "error")),
+                            React__default.createElement("div", null, "\uAC80\uC0C9\uB41C \uC815\uBCF4\uAC00 \uC5C6\uC2B5\uB2C8\uB2E4."))))))) : undefined),
+                    paging && (React__default.createElement(TableFooter, { ref: footerHeightResizeDetector, sx: {
+                            left: 0,
+                            bottom: 0,
+                            zIndex: 2,
+                            position: 'sticky',
+                            backgroundColor: '#fff',
+                        } },
+                        React__default.createElement(TableRow, null,
+                            React__default.createElement(TableCell, { colSpan: finalColumns.length, style: { borderBottom: 0, borderTop: '1px solid rgba(224, 224, 224, 1)' } },
+                                React__default.createElement(Stack, { alignItems: pagingAlign },
+                                    React__default.createElement(TablePagination, { className: pagination === null || pagination === void 0 ? void 0 : pagination.className, style: pagination === null || pagination === void 0 ? void 0 : pagination.style, sx: pagination === null || pagination === void 0 ? void 0 : pagination.sx, paging: paging, align: pagingAlign, onChange: onPageChange })))))),
+                    footer && (React__default.createElement(TableFooter, null,
+                        React__default.createElement(TableRow, null, finalColumns.map(function (column, idx) { return (React__default.createElement(TableFooterCell, { key: idx, column: column, defaultAlign: defaultAlign })); }))))))))) : null;
 });
 Table.displayName = 'Table';
 Table.defaultProps = TableDefaultProps;var SearchTableDefaultProps = {};var SearchTable = React__default.forwardRef(function (_a, ref) {
@@ -8705,7 +8851,7 @@ Table.defaultProps = TableDefaultProps;var SearchTableDefaultProps = {};var Sear
     var getSearchInfo = useCallback(function (search) {
         var searchInfo = {};
         if (search) {
-            var ref_1 = search.ref, searchGroups = search.searchGroups, props = __rest(search, ["ref", "searchGroups"]);
+            var ref_1 = search.ref, searchGroups = search.searchGroups, props = __rest$1(search, ["ref", "searchGroups"]);
             searchInfo.ref = ref_1;
             searchInfo.searchGroups = searchGroups;
             searchInfo.props = props;
@@ -8715,7 +8861,7 @@ Table.defaultProps = TableDefaultProps;var SearchTableDefaultProps = {};var Sear
     var getTableInfo = useCallback(function (table) {
         var tableInfo = {};
         if (table) {
-            var ref_2 = table.ref, props = __rest(table, ["ref"]);
+            var ref_2 = table.ref, props = __rest$1(table, ["ref"]);
             tableInfo.ref = ref_2;
             tableInfo.props = props;
         }
@@ -8763,7 +8909,7 @@ Table.defaultProps = TableDefaultProps;var SearchTableDefaultProps = {};var Sear
                     var _a, _b, _c;
                     var finalData;
                     if (lastGetDataDataRef.current) {
-                        finalData = __assign({}, lastGetDataDataRef.current);
+                        finalData = __assign$1({}, lastGetDataDataRef.current);
                         if (page != null) {
                             (_a = searchRef.current) === null || _a === void 0 ? void 0 : _a.setValue('page', page);
                             finalData.page = page;
@@ -8932,7 +9078,7 @@ Table.defaultProps = TableDefaultProps;var SearchTableDefaultProps = {};var Sear
         (_a = searchRef.current) === null || _a === void 0 ? void 0 : _a.setValue('page', page);
         var finalData;
         if (lastGetDataDataRef.current) {
-            finalData = __assign({}, lastGetDataDataRef.current);
+            finalData = __assign$1({}, lastGetDataDataRef.current);
             finalData.page = page;
         }
         else {
@@ -8955,7 +9101,7 @@ Table.defaultProps = TableDefaultProps;var SearchTableDefaultProps = {};var Sear
         }
         else {
             (_a = searchRef.current) === null || _a === void 0 ? void 0 : _a.setValue('page', 1);
-            var finalData = __assign(__assign({}, data), { page: 1 });
+            var finalData = __assign$1(__assign$1({}, data), { page: 1 });
             if (hash) {
                 hashChange(finalData);
             }
@@ -8967,7 +9113,7 @@ Table.defaultProps = TableDefaultProps;var SearchTableDefaultProps = {};var Sear
     //------------------------------------------------------------------------------------------------------------------
     return (React__default.createElement(Grid, { container: true, direction: 'column', spacing: 1 },
         React__default.createElement(Grid, { item: true, sx: { display: searchInfo.searchGroups ? undefined : 'none' } },
-            React__default.createElement(Search, __assign({}, searchInfo.props, { ref: function (commands) {
+            React__default.createElement(Search, __assign$1({}, searchInfo.props, { ref: function (commands) {
                     if (searchInfo.ref) {
                         if (typeof searchInfo.ref === 'function') {
                             searchInfo.ref(commands);
@@ -8982,7 +9128,7 @@ Table.defaultProps = TableDefaultProps;var SearchTableDefaultProps = {};var Sear
                     React__default.createElement(FormHidden, { name: 'page', value: 1 })),
                 searchInfo.searchGroups)),
         React__default.createElement(Grid, { item: true },
-            React__default.createElement(Table, __assign({}, tableInfo.props, { ref: function (commands) {
+            React__default.createElement(Table, __assign$1({}, tableInfo.props, { ref: function (commands) {
                     if (tableInfo.ref) {
                         if (typeof tableInfo.ref === 'function') {
                             tableInfo.ref(commands);
@@ -9000,22 +9146,22 @@ SearchTable.defaultProps = SearchTableDefaultProps;var TableButtonDefaultProps =
     color: 'primary',
 };var TableIconDefaultProps = {};var TableIcon = React__default.forwardRef(function (_a, ref) {
     // State - children ------------------------------------------------------------------------------------------------
-    var className = _a.className, initChildren = _a.children, props = __rest(_a, ["className", "children"]);
+    var className = _a.className, initChildren = _a.children, props = __rest$1(_a, ["className", "children"]);
     var children = useAutoUpdateState(useCallback(function () {
         return initChildren.replace(/[A-Z]/g, function (letter, idx) { return "".concat(idx > 0 ? '_' : '').concat(letter.toLowerCase()); });
     }, [initChildren]))[0];
     // Render ----------------------------------------------------------------------------------------------------------
-    return (React__default.createElement(Icon, __assign({ ref: ref }, props, { className: classNames('TableIcon', className) }), children));
+    return (React__default.createElement(Icon, __assign$1({ ref: ref }, props, { className: classNames('TableIcon', className) }), children));
 });
 TableIcon.displayName = 'TableIcon';
 TableIcon.defaultProps = TableIconDefaultProps;var TableButton = React__default.forwardRef(function (_a, ref) {
     // State -----------------------------------------------------------------------------------------------------------
-    var children = _a.children, className = _a.className, initSx = _a.sx, color = _a.color, icon = _a.icon, startIcon = _a.startIcon, endIcon = _a.endIcon, onClick = _a.onClick, props = __rest(_a, ["children", "className", "sx", "color", "icon", "startIcon", "endIcon", "onClick"]);
+    var children = _a.children, className = _a.className, initSx = _a.sx, color = _a.color, icon = _a.icon, startIcon = _a.startIcon, endIcon = _a.endIcon, onClick = _a.onClick, props = __rest$1(_a, ["children", "className", "sx", "color", "icon", "startIcon", "endIcon", "onClick"]);
     var sx = useAutoUpdateState(useCallback(function () {
-        return __assign({ minWidth: 0, px: !startIcon && !endIcon ? 0.7 : 1.7 }, initSx);
+        return __assign$1({ minWidth: 0, px: !startIcon && !endIcon ? 0.7 : 1.7 }, initSx);
     }, [initSx]))[0];
     // Render ----------------------------------------------------------------------------------------------------------
-    return (React__default.createElement(Button, __assign({ ref: ref, className: classNames(className, 'TableButton'), type: 'button', size: 'small', sx: sx, color: color, onClick: onClick, startIcon: startIcon ? (React__default.createElement(TableIcon, { fontSize: 'small', sx: { mr: -0.5 } }, startIcon)) : undefined, endIcon: endIcon ? (React__default.createElement(TableIcon, { fontSize: 'small', sx: { ml: -0.5 } }, endIcon)) : undefined }, props),
+    return (React__default.createElement(Button, __assign$1({ ref: ref, className: classNames(className, 'TableButton'), type: 'button', size: 'small', sx: sx, color: color, onClick: onClick, startIcon: startIcon ? (React__default.createElement(TableIcon, { fontSize: 'small', sx: { mr: -0.5 } }, startIcon)) : undefined, endIcon: endIcon ? (React__default.createElement(TableIcon, { fontSize: 'small', sx: { ml: -0.5 } }, endIcon)) : undefined }, props),
         icon && (React__default.createElement(TableIcon, { fontSize: 'small', color: color }, icon)),
         children));
 });