@pdg/react-table 1.0.126 → 1.0.128

package/dist/index.esm.js

@@ -1,4 +1,4 @@
-import React,{createContext,useContext,useMemo,useCallback,useState,useEffect,useRef,useLayoutEffect,useId}from'react';import classNames from'classnames';import {styled,TableRow,lighten,TableCell,Box,Tooltip,Checkbox,Stack,Pagination,useTheme,TableHead,TableBody,Icon,TableFooter,Paper,Table as Table$1,Grid,Popper,Grow,ClickAwayListener,IconButton}from'@mui/material';import {useResizeDetector}from'react-resize-detector';import {useSortable,sortableKeyboardCoordinates,arrayMove,SortableContext,verticalListSortingStrategy}from'@dnd-kit/sortable';import dayjs from'dayjs';import {personalNoAutoDash,companyNoAutoDash,telNoAutoDash,numberFormat,notEmpty,equal,empty}from'@pdg/util';import {useAutoUpdateLayoutState}from'@pdg/react-hook';import {useSensors,useSensor,MouseSensor,TouchSensor,KeyboardSensor,DndContext,closestCenter}from'@dnd-kit/core';import SimpleBar from'simplebar-react';import'simplebar-react/dist/simplebar.min.css';import {v4}from'uuid';import {Search,SearchGroup,FormHidden}from'@pdg/react-form';import {PdgButton,PdgIcon,PdgCopyToClipboard}from'@pdg/react-component';function styleInject(css, ref) {
+import React,{createContext,useContext,useMemo,useCallback,useState,useEffect,useRef,useLayoutEffect,useId}from'react';import classNames from'classnames';import {styled,TableRow,lighten,TableCell,Stack,Pagination,Checkbox,useTheme,TableHead,Box,Tooltip,TableBody,Icon,TableFooter,Paper,Table as Table$1,Grid,Popper,Grow,ClickAwayListener,IconButton}from'@mui/material';import {useResizeDetector}from'react-resize-detector';import {useAutoUpdateLayoutState}from'@pdg/react-hook';import {useSensors,useSensor,MouseSensor,TouchSensor,KeyboardSensor,DndContext,closestCenter}from'@dnd-kit/core';import {useSortable,SortableContext,verticalListSortingStrategy,sortableKeyboardCoordinates,arrayMove}from'@dnd-kit/sortable';import SimpleBar from'simplebar-react';import'simplebar-react/dist/simplebar.min.css';import {v4}from'uuid';import dayjs from'dayjs';import {personalNoAutoDash,companyNoAutoDash,telNoAutoDash,numberFormat,ifUndefined,notEmpty,equal,empty}from'@pdg/util';import {useInView}from'react-intersection-observer';import {Search,SearchGroup,FormHidden}from'@pdg/react-form';import {PdgButton,PdgIcon,PdgCopyToClipboard}from'@pdg/react-component';function styleInject(css, ref) {
   if ( ref === void 0 ) ref = {};
   var insertAt = ref.insertAt;
 
@@ -83,57 +83,7 @@ typeof SuppressedError === "function" ? SuppressedError : function (error, suppr
     });
 });
 var StyledNoDataDiv = styled('div')(templateObject_1$4 || (templateObject_1$4 = __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$4;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;
-    }
-
-  }
-});function getTableColumnAlign(column, defaultAlign) {
+var templateObject_1$4;function getTableColumnAlign(column, defaultAlign) {
     switch (column.type) {
         case 'number':
             return column.align ? column.align : 'right';
@@ -183,7 +133,7 @@ function typographyColorToSxColor(color) {
     }
     return value;
 }var StyledTableCell = styled(TableCell)(templateObject_1$3 || (templateObject_1$3 = __makeTemplateObject(["\n  &.ellipsis {\n    position: relative;\n    max-width: 0;\n    overflow: hidden;\n    text-overflow: ellipsis;\n    white-space: nowrap;\n  }\n"], ["\n  &.ellipsis {\n    position: relative;\n    max-width: 0;\n    overflow: hidden;\n    text-overflow: ellipsis;\n    white-space: nowrap;\n  }\n"])));
-var TableCommonCell = function (_a) {
+var TableCommonCell = React.forwardRef(function (_a, ref) {
     /********************************************************************************************************************
      * Use
      * ******************************************************************************************************************/
@@ -337,10 +287,278 @@ var TableCommonCell = function (_a) {
     /********************************************************************************************************************
      * Render
      * ******************************************************************************************************************/
-    return (React.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));
+    return (React.createElement(StyledTableCell, { ref: ref, 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$3;var TableFooterCell = function (_a) {
+    /********************************************************************************************************************
+     * Memo
+     * ******************************************************************************************************************/
+    var column = _a.column, items = _a.items, defaultAlign = _a.defaultAlign;
+    var data = useMemo(function () {
+        var _a, _b, _c;
+        if ((_a = column.footer) === null || _a === void 0 ? void 0 : _a.onRender) {
+            return (_b = column.footer) === null || _b === void 0 ? void 0 : _b.onRender(items);
+        }
+        else {
+            return (_c = column.footer) === null || _c === void 0 ? void 0 : _c.value;
+        }
+    }, [column.footer, items]);
+    /********************************************************************************************************************
+     * Render
+     * ******************************************************************************************************************/
+    return (React.createElement(TableCommonCell, { type: 'head', className: 'TableFooterCell', column: column, defaultAlign: defaultAlign }, 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.createElement(Stack, { alignItems: align },
+        React.createElement(Pagination, { count: paging.last_page, page: paging.current_page, color: 'primary', className: classNames('TablePagination', className), style: style, sx: sx, onChange: function (e, page) {
+                if (onChange)
+                    onChange(page);
+            } })));
+};var TableContextProvider = function (_a) {
+    var children = _a.children, value = _a.value;
+    return React.createElement(TableContext.Provider, { value: value }, children);
+};var TableTopHeadCaptionRow = styled(TableRow)(function (_a) {
+    var theme = _a.theme;
+    return ({
+        '> th': {
+            backgroundColor: theme.palette.grey.A100,
+            textAlign: 'center',
+            fontWeight: 700,
+        },
+    });
+});var TableHeadCell = function (_a) {
+    /********************************************************************************************************************
+     * Use
+     * ******************************************************************************************************************/
+    var column = _a.column, items = _a.items, defaultAlign = _a.defaultAlign, top = _a.top, onCheckChange = _a.onCheckChange;
+    var _b = useTableState(), setHeadColumnChecked = _b.setHeadColumnChecked, setHeadColumnCommands = _b.setHeadColumnCommands;
+    /********************************************************************************************************************
+     * State
+     * ******************************************************************************************************************/
+    var _c = useState(false), checked = _c[0], setChecked = _c[1];
+    var _d = useState(false), checkDisabled = _d[0], setCheckDisabled = _d[1];
+    /********************************************************************************************************************
+     * Effect
+     * ******************************************************************************************************************/
+    useEffect(function () {
+        if (column.type === 'check') {
+            setHeadColumnChecked(column, checked);
+        }
+    }, [column, checked, setHeadColumnChecked]);
+    useEffect(function () {
+        setHeadColumnCommands(column, {
+            setChecked: function (checked) {
+                if (column.type === 'check') {
+                    setChecked(checked);
+                }
+            },
+            setCheckDisabled: function (checkDisabled) {
+                if (column.type === 'check') {
+                    setCheckDisabled(checkDisabled);
+                }
+            },
+        });
+    }, [setHeadColumnCommands, column]);
+    /********************************************************************************************************************
+     * Memo
+     * ******************************************************************************************************************/
+    var data = useMemo(function () {
+        var _a, _b, _c, _d;
+        if (column.type === 'check') {
+            if (column.hideAllCheck) {
+                if ((_a = column.head) === null || _a === void 0 ? void 0 : _a.onRender) {
+                    return (_b = column.head) === null || _b === void 0 ? void 0 : _b.onRender(items);
+                }
+                else {
+                    if (typeof column.label === 'string') {
+                        return React.createElement("div", { dangerouslySetInnerHTML: { __html: column.label } });
+                    }
+                    else {
+                        return column.label;
+                    }
+                }
+            }
+            else {
+                return (React.createElement(Checkbox, { checked: checked, disabled: checkDisabled, onChange: function (e, newChecked) {
+                        setChecked(newChecked);
+                        onCheckChange && onCheckChange(column, newChecked);
+                    } }));
+            }
+        }
+        else {
+            if ((_c = column.head) === null || _c === void 0 ? void 0 : _c.onRender) {
+                return (_d = column.head) === null || _d === void 0 ? void 0 : _d.onRender(items);
+            }
+            else {
+                if (typeof column.label === 'string') {
+                    return React.createElement("div", { dangerouslySetInnerHTML: { __html: column.label } });
+                }
+                else {
+                    return column.label;
+                }
+            }
+        }
+    }, [checkDisabled, checked, column, items, onCheckChange]);
+    /********************************************************************************************************************
+     * Render
+     * ******************************************************************************************************************/
+    return (React.createElement(TableCommonCell, { type: 'head', className: 'TableHeadCell', style: top !== undefined ? { top: top } : undefined, column: column, defaultAlign: defaultAlign }, data));
+};var BottomLine = styled('div')(templateObject_1$2 || (templateObject_1$2 = __makeTemplateObject(["\n  height: 1px;\n  position: absolute;\n  left: 3px;\n  right: 3px;\n  bottom: 0;\n"], ["\n  height: 1px;\n  position: absolute;\n  left: 3px;\n  right: 3px;\n  bottom: 0;\n"])));
+var TableTopHead = function (_a) {
+    /********************************************************************************************************************
+     * Use
+     * ******************************************************************************************************************/
+    var columns = _a.columns, items = _a.items, rows = _a.rows, caption = _a.caption, defaultAlign = _a.defaultAlign, onCheckChange = _a.onCheckChange;
+    var theme = useTheme();
+    /********************************************************************************************************************
+     * Ref
+     * ******************************************************************************************************************/
+    var captionRef = useRef(null);
+    var row1Ref = useRef(null);
+    var row2Ref = useRef(null);
+    var row3Ref = useRef(null);
+    /********************************************************************************************************************
+     * ResizeDetector
+     * ******************************************************************************************************************/
+    var captionHeight = useResizeDetector({
+        targetRef: captionRef,
+        handleWidth: false,
+        handleHeight: true,
+    }).height;
+    var row1Height = useResizeDetector({ targetRef: row1Ref, handleWidth: false, handleHeight: true }).height;
+    var row2Height = useResizeDetector({ targetRef: row2Ref, handleWidth: false, handleHeight: true }).height;
+    var row3Height = useResizeDetector({ targetRef: row3Ref, handleWidth: false, handleHeight: true }).height;
+    /********************************************************************************************************************
+     * Function
+     * ******************************************************************************************************************/
+    var makeRowCells = useCallback(function (row, top) {
+        var totalColumns = 0;
+        var cells = row
+            .map(function (info, idx) {
+            if (info) {
+                totalColumns += info.colSpan || 1;
+                return (React.createElement(TableCell, { key: idx, colSpan: info.colSpan, align: info.align, style: {
+                        top: top,
+                        borderBottom: 0,
+                    } },
+                    info.label,
+                    info.label != null && React.createElement(BottomLine, { style: { backgroundColor: theme.palette.divider } })));
+            }
+        })
+            .filter(function (cell) { return !!cell; });
+        if (totalColumns < columns.length) {
+            cells.push(React.createElement(TableCell, { key: columns.length, colSpan: columns.length - cells.length, style: { top: top, borderBottom: 0 } }));
+        }
+        return cells;
+    }, [columns, theme.palette.divider]);
+    var columnRow = useMemo(function () {
+        var top = (captionHeight || 0) + (row1Height || 0) + (row2Height || 0) + (row3Height || 0);
+        return (React.createElement(TableRow, null, columns.map(function (column, idx) { return (React.createElement(TableHeadCell, { key: idx, column: column, items: items, defaultAlign: defaultAlign, top: top, onCheckChange: onCheckChange })); })));
+    }, [captionHeight, columns, defaultAlign, items, onCheckChange, row1Height, row2Height, row3Height]);
+    /********************************************************************************************************************
+     * Variable
+     * ******************************************************************************************************************/
+    var captionRow = !!caption && (React.createElement(TableTopHeadCaptionRow, { ref: captionRef, className: 'TableTopHeadCaptionRow' },
+        React.createElement(TableCell, { colSpan: columns.length }, caption)));
+    /********************************************************************************************************************
+     * Render
+     * ******************************************************************************************************************/
+    if (rows) {
+        if (Array.isArray(rows[0])) {
+            return (React.createElement(TableHead, { className: 'TableHead' },
+                captionRow,
+                rows.map(function (row, idx) {
+                    var ref = undefined;
+                    var top = undefined;
+                    switch (idx) {
+                        case 0:
+                            ref = row1Ref;
+                            top = captionHeight;
+                            break;
+                        case 1:
+                            ref = row2Ref;
+                            top = (captionHeight || 0) + (row1Height || 0);
+                            break;
+                        case 2:
+                            ref = row3Ref;
+                            top = (captionHeight || 0) + (row1Height || 0) + (row2Height || 0);
+                            break;
+                        case 3:
+                            top = (captionHeight || 0) + (row1Height || 0) + (row2Height || 0) + (row3Height || 0);
+                    }
+                    return (React.createElement(TableRow, { key: idx, ref: ref, className: 'TableHeadRow' }, makeRowCells(row, top)));
+                })));
+        }
+        else {
+            return (React.createElement(TableHead, { className: 'TableHead' },
+                captionRow,
+                React.createElement(TableRow, { ref: row1Ref, className: 'TableHeadRow' }, makeRowCells(rows, captionHeight)),
+                columnRow));
+        }
+    }
+    else {
+        return (React.createElement(TableHead, { className: 'TableHead' },
+            captionRow,
+            columnRow));
+    }
 };
-var templateObject_1$3;var StyledButtonsBox = styled(Box)(templateObject_1$2 || (templateObject_1$2 = __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) {
+var templateObject_1$2;var makeSortableItems = function (items) {
+    return items === null || items === void 0 ? void 0 : items.map(function (_a, index) {
+        var id = _a.id, item = __rest(_a, ["id"]);
+        return __assign({ id: id == null ? "".concat(v4(), "_").concat(index) : id }, item);
+    });
+};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 StyledButtonsBox = styled(Box)(templateObject_1$1 || (templateObject_1$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 = React.forwardRef(function (_a, ref) {
     /********************************************************************************************************************
      * Use
      * ******************************************************************************************************************/
@@ -529,9 +747,9 @@ var TableBodyCell = function (_a) {
     /********************************************************************************************************************
      * Render
      * ******************************************************************************************************************/
-    return (React.createElement(TableCommonCell, { type: 'body', className: classNames('TableBodyCell', className), style: style, sx: sx, column: column, defaultAlign: defaultAlign, defaultEllipsis: defaultEllipsis, item: item, index: index, onClick: column.onClick || onClick ? handleClick : undefined }, !isHidden && data));
-};
-var templateObject_1$2;var StyledBodyRow = styled(TableRow)(function (_a) {
+    return (React.createElement(TableCommonCell, { ref: ref, type: 'body', className: classNames('TableBodyCell', className), style: style, sx: sx, column: column, defaultAlign: defaultAlign, defaultEllipsis: defaultEllipsis, item: item, index: index, onClick: column.onClick || onClick ? handleClick : undefined }, !isHidden && data));
+});
+var templateObject_1$1;var StyledBodyRow = styled(TableRow)(function (_a) {
     var theme = _a.theme;
     return ({
         '&.odd-color:nth-of-type(odd):not(:hover)': {
@@ -556,226 +774,107 @@ var TableBodyRow = function (_a) {
     /********************************************************************************************************************
      * Render
      * ******************************************************************************************************************/
-    return (React.createElement(StyledBodyRow, __assign({ className: classNames('TableBodyRow', className), style: sortable
-            ? __assign(__assign({}, style), { transform: CSS.Transform.toString(transform), transition: transition }) : style }, props, sortableProps), columns.map(function (column, columnIdx) { return (React.createElement(TableBodyCell, { className: onGetColumnClassName ? onGetColumnClassName(column, item, index) : undefined, sx: onGetColumnSx ? onGetColumnSx(column, item, index) : undefined, style: onGetColumnStyle ? onGetColumnStyle(column, item, index) : undefined, key: columnIdx, index: index, item: item, defaultAlign: defaultAlign, defaultEllipsis: defaultEllipsis, column: column, onClick: onClick, onCheckChange: onCheckChange })); })));
-};var TableFooterCell = function (_a) {
-    /********************************************************************************************************************
-     * Memo
-     * ******************************************************************************************************************/
-    var column = _a.column, items = _a.items, defaultAlign = _a.defaultAlign;
-    var data = useMemo(function () {
-        var _a, _b, _c;
-        if ((_a = column.footer) === null || _a === void 0 ? void 0 : _a.onRender) {
-            return (_b = column.footer) === null || _b === void 0 ? void 0 : _b.onRender(items);
-        }
-        else {
-            return (_c = column.footer) === null || _c === void 0 ? void 0 : _c.value;
-        }
-    }, [column.footer, items]);
-    /********************************************************************************************************************
-     * Render
-     * ******************************************************************************************************************/
-    return (React.createElement(TableCommonCell, { type: 'head', className: 'TableFooterCell', column: column, defaultAlign: defaultAlign }, 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.createElement(Stack, { alignItems: align },
-        React.createElement(Pagination, { count: paging.last_page, page: paging.current_page, color: 'primary', className: classNames('TablePagination', className), style: style, sx: sx, onChange: function (e, page) {
-                if (onChange)
-                    onChange(page);
-            } })));
-};var TableContextProvider = function (_a) {
-    var children = _a.children, value = _a.value;
-    return React.createElement(TableContext.Provider, { value: value }, children);
-};var TableTopHeadCaptionRow = styled(TableRow)(function (_a) {
-    var theme = _a.theme;
-    return ({
-        '> th': {
-            backgroundColor: theme.palette.grey.A100,
-            textAlign: 'center',
-            fontWeight: 700,
-        },
-    });
-});var TableHeadCell = function (_a) {
+    return (React.createElement(React.Fragment, null,
+        React.createElement(StyledBodyRow, __assign({ className: classNames('TableBodyRow', className), style: sortable
+                ? __assign(__assign({}, style), { transform: CSS.Transform.toString(transform), transition: transition }) : style }, props, sortableProps), columns.map(function (column, columnIdx) { return (React.createElement(TableBodyCell, { className: onGetColumnClassName ? onGetColumnClassName(column, item, index) : undefined, sx: onGetColumnSx ? onGetColumnSx(column, item, index) : undefined, style: onGetColumnStyle ? onGetColumnStyle(column, item, index) : undefined, key: columnIdx, index: index, item: item, defaultAlign: defaultAlign, defaultEllipsis: defaultEllipsis, column: column, onClick: onClick, onCheckChange: onCheckChange })); }))));
+};var TableSortableBodyBlock = function (_a) {
+    var items = _a.items, baseIndex = _a.baseIndex, columns = _a.columns, showOddColor = _a.showOddColor, showEvenColor = _a.showEvenColor, onGetBodyRowStyle = _a.onGetBodyRowStyle, onGetBodyRowSx = _a.onGetBodyRowSx, onGetBodyRowClassName = _a.onGetBodyRowClassName, onGetBodyColumnClassName = _a.onGetBodyColumnClassName, onGetBodyColumnStyle = _a.onGetBodyColumnStyle, onGetBodyColumnSx = _a.onGetBodyColumnSx, defaultAlign = _a.defaultAlign, defaultEllipsis = _a.defaultEllipsis, sortable = _a.sortable, onClick = _a.onClick, onCheckChange = _a.onCheckChange;
+    var progressiveVisible = useTableState().progressiveVisible;
     /********************************************************************************************************************
      * Use
      * ******************************************************************************************************************/
-    var column = _a.column, items = _a.items, defaultAlign = _a.defaultAlign, top = _a.top, onCheckChange = _a.onCheckChange;
-    var _b = useTableState(), setHeadColumnChecked = _b.setHeadColumnChecked, setHeadColumnCommands = _b.setHeadColumnCommands;
+    var _b = useInView({ threshold: 0, triggerOnce: true }), ref = _b.ref, inView = _b.inView;
     /********************************************************************************************************************
      * State
      * ******************************************************************************************************************/
-    var _c = useState(false), checked = _c[0], setChecked = _c[1];
-    var _d = useState(false), checkDisabled = _d[0], setCheckDisabled = _d[1];
+    var _c = useState(baseIndex === 0), canInView = _c[0], setCanInView = _c[1];
     /********************************************************************************************************************
      * Effect
      * ******************************************************************************************************************/
     useEffect(function () {
-        if (column.type === 'check') {
-            setHeadColumnChecked(column, checked);
+        if (progressiveVisible && baseIndex > 0) {
+            setTimeout(function () {
+                setCanInView(true);
+            }, baseIndex * ifUndefined(progressiveVisible.delay, 300));
         }
-    }, [column, checked, setHeadColumnChecked]);
-    useEffect(function () {
-        setHeadColumnCommands(column, {
-            setChecked: function (checked) {
-                if (column.type === 'check') {
-                    setChecked(checked);
-                }
-            },
-            setCheckDisabled: function (checkDisabled) {
-                if (column.type === 'check') {
-                    setCheckDisabled(checkDisabled);
-                }
-            },
-        });
-    }, [setHeadColumnCommands, column]);
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [progressiveVisible]);
     /********************************************************************************************************************
      * Memo
      * ******************************************************************************************************************/
-    var data = useMemo(function () {
-        var _a, _b, _c, _d;
-        if (column.type === 'check') {
-            if (column.hideAllCheck) {
-                if ((_a = column.head) === null || _a === void 0 ? void 0 : _a.onRender) {
-                    return (_b = column.head) === null || _b === void 0 ? void 0 : _b.onRender(items);
-                }
-                else {
-                    if (typeof column.label === 'string') {
-                        return React.createElement("div", { dangerouslySetInnerHTML: { __html: column.label } });
-                    }
-                    else {
-                        return column.label;
-                    }
-                }
-            }
-            else {
-                return (React.createElement(Checkbox, { checked: checked, disabled: checkDisabled, onChange: function (e, newChecked) {
-                        setChecked(newChecked);
-                        onCheckChange && onCheckChange(column, newChecked);
-                    } }));
-            }
-        }
-        else {
-            if ((_c = column.head) === null || _c === void 0 ? void 0 : _c.onRender) {
-                return (_d = column.head) === null || _d === void 0 ? void 0 : _d.onRender(items);
-            }
-            else {
-                if (typeof column.label === 'string') {
-                    return React.createElement("div", { dangerouslySetInnerHTML: { __html: column.label } });
-                }
-                else {
-                    return column.label;
-                }
-            }
-        }
-    }, [checkDisabled, checked, column, items, onCheckChange]);
+    var renderItems = useMemo(function () {
+        return !progressiveVisible || inView ? (items.map(function (item, idx) { return (React.createElement(TableBodyRow, { key: item.id, id: item.id, index: baseIndex + idx, className: classNames(showOddColor && 'odd-color', showEvenColor && 'even-color', onGetBodyRowClassName ? onGetBodyRowClassName(item, baseIndex + idx) : undefined), style: onGetBodyRowStyle ? onGetBodyRowStyle(item, baseIndex + idx) : undefined, sx: onGetBodyRowSx ? onGetBodyRowSx(item, baseIndex + idx) : undefined, hover: true, onGetColumnClassName: onGetBodyColumnClassName, onGetColumnStyle: onGetBodyColumnStyle, onGetColumnSx: onGetBodyColumnSx, defaultAlign: defaultAlign, defaultEllipsis: defaultEllipsis, sortable: sortable, columns: columns, item: item, onClick: onClick, onCheckChange: onCheckChange })); })) : (React.createElement(TableRow, { ref: canInView ? ref : undefined },
+            React.createElement(TableCell, { colSpan: columns.length, style: { height: 50 * items.length, border: 'none', textAlign: 'center' } }, canInView && '...')));
+    }, [
+        baseIndex,
+        canInView,
+        columns,
+        defaultAlign,
+        defaultEllipsis,
+        inView,
+        items,
+        onCheckChange,
+        onClick,
+        onGetBodyColumnClassName,
+        onGetBodyColumnStyle,
+        onGetBodyColumnSx,
+        onGetBodyRowClassName,
+        onGetBodyRowStyle,
+        onGetBodyRowSx,
+        progressiveVisible,
+        ref,
+        showEvenColor,
+        showOddColor,
+        sortable,
+    ]);
     /********************************************************************************************************************
      * Render
      * ******************************************************************************************************************/
-    return (React.createElement(TableCommonCell, { type: 'head', className: 'TableHeadCell', style: top !== undefined ? { top: top } : undefined, column: column, defaultAlign: defaultAlign }, data));
-};var BottomLine = styled('div')(templateObject_1$1 || (templateObject_1$1 = __makeTemplateObject(["\n  height: 1px;\n  position: absolute;\n  left: 3px;\n  right: 3px;\n  bottom: 0;\n"], ["\n  height: 1px;\n  position: absolute;\n  left: 3px;\n  right: 3px;\n  bottom: 0;\n"])));
-var TableTopHead = function (_a) {
+    return React.createElement(React.Fragment, null, renderItems);
+};var chunkArray = function (array, size) {
+    var result = [];
+    for (var i = 0; i < array.length; i += size) {
+        result.push(array.slice(i, i + size));
+    }
+    return result;
+};var TableSortableBody = function (_a) {
     /********************************************************************************************************************
      * Use
      * ******************************************************************************************************************/
-    var columns = _a.columns, items = _a.items, rows = _a.rows, caption = _a.caption, defaultAlign = _a.defaultAlign, onCheckChange = _a.onCheckChange;
-    var theme = useTheme();
-    /********************************************************************************************************************
-     * Ref
-     * ******************************************************************************************************************/
-    var captionRef = useRef(null);
-    var row1Ref = useRef(null);
-    var row2Ref = useRef(null);
-    var row3Ref = useRef(null);
-    /********************************************************************************************************************
-     * ResizeDetector
-     * ******************************************************************************************************************/
-    var captionHeight = useResizeDetector({
-        targetRef: captionRef,
-        handleWidth: false,
-        handleHeight: true,
-    }).height;
-    var row1Height = useResizeDetector({ targetRef: row1Ref, handleWidth: false, handleHeight: true }).height;
-    var row2Height = useResizeDetector({ targetRef: row2Ref, handleWidth: false, handleHeight: true }).height;
-    var row3Height = useResizeDetector({ targetRef: row3Ref, handleWidth: false, handleHeight: true }).height;
+    var items = _a.items, columns = _a.columns, showOddColor = _a.showOddColor, showEvenColor = _a.showEvenColor, onGetBodyRowStyle = _a.onGetBodyRowStyle, onGetBodyRowSx = _a.onGetBodyRowSx, onGetBodyRowClassName = _a.onGetBodyRowClassName, onGetBodyColumnClassName = _a.onGetBodyColumnClassName, onGetBodyColumnStyle = _a.onGetBodyColumnStyle, onGetBodyColumnSx = _a.onGetBodyColumnSx, defaultAlign = _a.defaultAlign, defaultEllipsis = _a.defaultEllipsis, sortable = _a.sortable, onClick = _a.onClick, onCheckChange = _a.onCheckChange;
+    var progressiveVisible = useTableState().progressiveVisible;
     /********************************************************************************************************************
-     * Function
+     * Memo
      * ******************************************************************************************************************/
-    var makeRowCells = useCallback(function (row, top) {
-        var totalColumns = 0;
-        var cells = row
-            .map(function (info, idx) {
-            if (info) {
-                totalColumns += info.colSpan || 1;
-                return (React.createElement(TableCell, { key: idx, colSpan: info.colSpan, align: info.align, style: {
-                        top: top,
-                        borderBottom: 0,
-                    } },
-                    info.label,
-                    info.label != null && React.createElement(BottomLine, { style: { backgroundColor: theme.palette.divider } })));
-            }
-        })
-            .filter(function (cell) { return !!cell; });
-        if (totalColumns < columns.length) {
-            cells.push(React.createElement(TableCell, { key: columns.length, colSpan: columns.length - cells.length, style: { top: top, borderBottom: 0 } }));
+    var renderBlock = useMemo(function () {
+        if (progressiveVisible) {
+            return (React.createElement(React.Fragment, null, chunkArray(items, 5).map(function (bItems, index) { return (React.createElement(TableSortableBodyBlock, { key: index, items: bItems, baseIndex: index, columns: columns, showOddColor: showOddColor, showEvenColor: showEvenColor, onGetBodyRowStyle: onGetBodyRowStyle, onGetBodyRowSx: onGetBodyRowSx, onGetBodyRowClassName: onGetBodyRowClassName, onGetBodyColumnClassName: onGetBodyColumnClassName, onGetBodyColumnStyle: onGetBodyColumnStyle, onGetBodyColumnSx: onGetBodyColumnSx, defaultAlign: defaultAlign, defaultEllipsis: defaultEllipsis, sortable: sortable, onClick: onClick, onCheckChange: onCheckChange })); })));
         }
-        return cells;
-    }, [columns, theme.palette.divider]);
-    var columnRow = useMemo(function () {
-        var top = (captionHeight || 0) + (row1Height || 0) + (row2Height || 0) + (row3Height || 0);
-        return (React.createElement(TableRow, null, columns.map(function (column, idx) { return (React.createElement(TableHeadCell, { key: idx, column: column, items: items, defaultAlign: defaultAlign, top: top, onCheckChange: onCheckChange })); })));
-    }, [captionHeight, columns, defaultAlign, items, onCheckChange, row1Height, row2Height, row3Height]);
-    /********************************************************************************************************************
-     * Variable
-     * ******************************************************************************************************************/
-    var captionRow = !!caption && (React.createElement(TableTopHeadCaptionRow, { ref: captionRef, className: 'TableTopHeadCaptionRow' },
-        React.createElement(TableCell, { colSpan: columns.length }, caption)));
+        else {
+            return (React.createElement(TableSortableBodyBlock, { items: items, baseIndex: 0, columns: columns, showOddColor: showOddColor, showEvenColor: showEvenColor, onGetBodyRowStyle: onGetBodyRowStyle, onGetBodyRowSx: onGetBodyRowSx, onGetBodyRowClassName: onGetBodyRowClassName, onGetBodyColumnClassName: onGetBodyColumnClassName, onGetBodyColumnStyle: onGetBodyColumnStyle, onGetBodyColumnSx: onGetBodyColumnSx, defaultAlign: defaultAlign, defaultEllipsis: defaultEllipsis, sortable: sortable, onClick: onClick, onCheckChange: onCheckChange }));
+        }
+    }, [
+        columns,
+        defaultAlign,
+        defaultEllipsis,
+        items,
+        onCheckChange,
+        onClick,
+        onGetBodyColumnClassName,
+        onGetBodyColumnStyle,
+        onGetBodyColumnSx,
+        onGetBodyRowClassName,
+        onGetBodyRowStyle,
+        onGetBodyRowSx,
+        progressiveVisible,
+        showEvenColor,
+        showOddColor,
+        sortable,
+    ]);
     /********************************************************************************************************************
      * Render
      * ******************************************************************************************************************/
-    if (rows) {
-        if (Array.isArray(rows[0])) {
-            return (React.createElement(TableHead, { className: 'TableHead' },
-                captionRow,
-                rows.map(function (row, idx) {
-                    var ref = undefined;
-                    var top = undefined;
-                    switch (idx) {
-                        case 0:
-                            ref = row1Ref;
-                            top = captionHeight;
-                            break;
-                        case 1:
-                            ref = row2Ref;
-                            top = (captionHeight || 0) + (row1Height || 0);
-                            break;
-                        case 2:
-                            ref = row3Ref;
-                            top = (captionHeight || 0) + (row1Height || 0) + (row2Height || 0);
-                            break;
-                        case 3:
-                            top = (captionHeight || 0) + (row1Height || 0) + (row2Height || 0) + (row3Height || 0);
-                    }
-                    return (React.createElement(TableRow, { key: idx, ref: ref, className: 'TableHeadRow' }, makeRowCells(row, top)));
-                })));
-        }
-        else {
-            return (React.createElement(TableHead, { className: 'TableHead' },
-                captionRow,
-                React.createElement(TableRow, { ref: row1Ref, className: 'TableHeadRow' }, makeRowCells(rows, captionHeight)),
-                columnRow));
-        }
-    }
-    else {
-        return (React.createElement(TableHead, { className: 'TableHead' },
-            captionRow,
-            columnRow));
-    }
-};
-var templateObject_1$1;var makeSortableItems = function (items) {
-    return items === null || items === void 0 ? void 0 : items.map(function (_a, index) {
-        var id = _a.id, item = __rest(_a, ["id"]);
-        return __assign({ id: id == null ? "".concat(v4(), "_").concat(index) : id }, item);
-    });
+    return sortable ? (React.createElement(SortableContext, { items: items, strategy: verticalListSortingStrategy }, renderBlock)) : (renderBlock);
 };function columnFilter(v) {
     return v !== undefined && v !== null && v !== false;
 }
@@ -784,7 +883,7 @@ var Table = React.forwardRef(function (_a, ref) {
     /********************************************************************************************************************
      * Ref
      * ******************************************************************************************************************/
-    var className = _a.className, initStyle = _a.style, sx = _a.sx, caption = _a.caption, topHeadRows = _a.topHeadRows, initColumns = _a.columns, initItems = _a.items, initPaging = _a.paging, _b = _a.pagingAlign, pagingAlign = _b === void 0 ? 'center' : _b, _c = _a.defaultAlign, defaultAlign = _c === void 0 ? 'left' : _c, defaultEllipsis = _a.defaultEllipsis, initStickyHeader = _a.stickyHeader, height = _a.height, minHeight = _a.minHeight, maxHeight = _a.maxHeight, fullHeight = _a.fullHeight, showOddColor = _a.showOddColor, showEvenColor = _a.showEvenColor, _d = _a.cellPadding, cellPadding = _d === void 0 ? 13 : _d, footer = _a.footer, noData = _a.noData, pagination = _a.pagination, sortable = _a.sortable, onClick = _a.onClick, onGetBodyRowClassName = _a.onGetBodyRowClassName, onGetBodyRowStyle = _a.onGetBodyRowStyle, onGetBodyRowSx = _a.onGetBodyRowSx, onGetBodyColumnClassName = _a.onGetBodyColumnClassName, onGetBodyColumnStyle = _a.onGetBodyColumnStyle, onGetBodyColumnSx = _a.onGetBodyColumnSx, onPageChange = _a.onPageChange, onSortChange = _a.onSortChange, onCheckChange = _a.onCheckChange;
+    var className = _a.className, initStyle = _a.style, sx = _a.sx, caption = _a.caption, topHeadRows = _a.topHeadRows, initColumns = _a.columns, initItems = _a.items, initPaging = _a.paging, _b = _a.pagingAlign, pagingAlign = _b === void 0 ? 'center' : _b, _c = _a.defaultAlign, defaultAlign = _c === void 0 ? 'left' : _c, defaultEllipsis = _a.defaultEllipsis, initStickyHeader = _a.stickyHeader, height = _a.height, minHeight = _a.minHeight, maxHeight = _a.maxHeight, fullHeight = _a.fullHeight, showOddColor = _a.showOddColor, showEvenColor = _a.showEvenColor, _d = _a.cellPadding, cellPadding = _d === void 0 ? 13 : _d, footer = _a.footer, noData = _a.noData, pagination = _a.pagination, sortable = _a.sortable, progressiveVisible = _a.progressiveVisible, onClick = _a.onClick, onGetBodyRowClassName = _a.onGetBodyRowClassName, onGetBodyRowStyle = _a.onGetBodyRowStyle, onGetBodyRowSx = _a.onGetBodyRowSx, onGetBodyColumnClassName = _a.onGetBodyColumnClassName, onGetBodyColumnStyle = _a.onGetBodyColumnStyle, onGetBodyColumnSx = _a.onGetBodyColumnSx, onPageChange = _a.onPageChange, onSortChange = _a.onSortChange, onCheckChange = _a.onCheckChange;
     var localHeaderDataRef = useRef({});
     var localBodyDataRef = useRef({});
     var updateHeadCheckTimer = useRef(undefined);
@@ -850,19 +949,6 @@ var Table = React.forwardRef(function (_a, ref) {
             }
         },
     }).ref;
-    /********************************************************************************************************************
-     * Memo
-     * ******************************************************************************************************************/
-    var tableSx = useMemo(function () {
-        var sx = {
-            padding: typeof cellPadding === 'number' ? "".concat(cellPadding, "px") : cellPadding,
-        };
-        return {
-            '> .MuiTableHead-root > .MuiTableRow-root > .MuiTableCell-root ': sx,
-            '> .MuiTableBody-root > .MuiTableRow-root > .MuiTableCell-root ': sx,
-            '> .MuiTableFooter-root > .MuiTableRow-root > .MuiTableCell-root ': sx,
-        };
-    }, [cellPadding]);
     /********************************************************************************************************************
      * Function
      * ******************************************************************************************************************/
@@ -1256,28 +1342,42 @@ var Table = React.forwardRef(function (_a, ref) {
     var isNoData = !!sortableItems && sortableItems.length <= 0;
     var finalPagingHeight = paging && paging.total > 0 ? pagingHeight || 0 : 0;
     var stickyHeader = !isNoData && initStickyHeader;
-    var style = fullHeight
-        ? __assign(__assign({ width: '100%' }, initStyle), { flex: 1, justifyContent: 'flex-end', height: '100%', display: 'flex', flexDirection: 'column', position: 'relative' }) : __assign({ width: '100%' }, initStyle);
-    var simpleBarStyle = fullHeight
-        ? {
-            height: (containerHeight || 0) - (finalPagingHeight || 0) - 1,
-            flex: 1,
-            position: 'absolute',
-            top: 0,
-            left: 0,
-            right: 0,
-            marginBottom: finalPagingHeight || 0,
-        }
-        : { height: height, minHeight: minHeight, maxHeight: maxHeight, marginBottom: -1 };
-    var tableStyle = fullHeight && isNoData ? { flex: 1, height: (containerHeight || 0) - finalPagingHeight - 2 } : undefined;
-    // pageStyle
-    var pagingStyle = { padding: '13px 0', borderTop: '1px solid rgba(224, 224, 224, 1)' };
-    if (fullHeight) {
-        pagingStyle.position = 'sticky';
-    }
-    var tableTopHead = finalColumns && (React.createElement(TableTopHead, { caption: caption, rows: topHeadRows, columns: finalColumns, items: items, defaultAlign: defaultAlign, onCheckChange: handleHeadCheckChange }));
+    var _p = useMemo(function () {
+        var style = fullHeight
+            ? __assign(__assign({ width: '100%' }, initStyle), { flex: 1, justifyContent: 'flex-end', height: '100%', display: 'flex', flexDirection: 'column', position: 'relative' }) : __assign({ width: '100%' }, initStyle);
+        var sx = { padding: typeof cellPadding === 'number' ? "".concat(cellPadding, "px") : cellPadding };
+        var tableSx = {
+            '> .MuiTableHead-root > .MuiTableRow-root > .MuiTableCell-root ': sx,
+            '> .MuiTableBody-root > .MuiTableRow-root > .MuiTableCell-root ': sx,
+            '> .MuiTableFooter-root > .MuiTableRow-root > .MuiTableCell-root ': sx,
+        };
+        // pageStyle
+        var pagingStyle = { padding: '13px 0', borderTop: '1px solid rgba(224, 224, 224, 1)' };
+        if (fullHeight) {
+            pagingStyle.position = 'sticky';
+        }
+        return { style: style, tableSx: tableSx, pagingStyle: pagingStyle };
+    }, [cellPadding, fullHeight, initStyle]), style = _p.style, tableSx = _p.tableSx, pagingStyle = _p.pagingStyle;
+    var _q = useMemo(function () {
+        var simpleBarStyle = fullHeight
+            ? {
+                height: (containerHeight || 0) - (finalPagingHeight || 0) - 1,
+                flex: 1,
+                position: 'absolute',
+                top: 0,
+                left: 0,
+                right: 0,
+                marginBottom: finalPagingHeight || 0,
+            }
+            : { height: height, minHeight: minHeight, maxHeight: maxHeight, marginBottom: -1 };
+        var tableStyle = fullHeight && isNoData ? { flex: 1, height: (containerHeight || 0) - finalPagingHeight - 2 } : undefined;
+        return { simpleBarStyle: simpleBarStyle, tableStyle: tableStyle };
+    }, [containerHeight, finalPagingHeight, fullHeight, height, isNoData, maxHeight, minHeight]), simpleBarStyle = _q.simpleBarStyle, tableStyle = _q.tableStyle;
+    var tableTopHead = useMemo(function () {
+        return finalColumns && (React.createElement(TableTopHead, { caption: caption, rows: topHeadRows, columns: finalColumns, items: items, defaultAlign: defaultAlign, onCheckChange: handleHeadCheckChange }));
+    }, [caption, defaultAlign, finalColumns, handleHeadCheckChange, items, topHeadRows]);
     var tableBody = useMemo(function () {
-        return finalColumns && (React.createElement(TableBody, null, sortableItems ? (sortableItems.length > 0 ? (React.createElement(SortableContext, { items: sortableItems, strategy: verticalListSortingStrategy }, sortableItems.map(function (item, idx) { return (React.createElement(TableBodyRow, { key: item.id, className: classNames(!!showOddColor && 'odd-color', !!showEvenColor && 'even-color', onGetBodyRowClassName ? onGetBodyRowClassName(item, idx) : undefined), style: onGetBodyRowStyle ? onGetBodyRowStyle(item, idx) : undefined, sx: onGetBodyRowSx ? onGetBodyRowSx(item, idx) : undefined, onGetColumnClassName: onGetBodyColumnClassName, onGetColumnStyle: onGetBodyColumnStyle, onGetColumnSx: onGetBodyColumnSx, hover: true, id: item.id, index: idx, defaultAlign: defaultAlign, defaultEllipsis: defaultEllipsis, sortable: sortable, columns: finalColumns, item: item, onClick: onClick, onCheckChange: handleBodyCheckChange })); }))) : (React.createElement(StyledBodyRow$1, null,
+        return finalColumns && (React.createElement(TableBody, null, sortableItems ? (sortableItems.length > 0 ? (React.createElement(TableSortableBody, { items: sortableItems, columns: finalColumns, showOddColor: showOddColor, showEvenColor: showEvenColor, defaultAlign: defaultAlign, defaultEllipsis: defaultEllipsis, sortable: sortable, onClick: onClick, onCheckChange: handleBodyCheckChange, onGetBodyRowClassName: onGetBodyRowClassName, onGetBodyRowStyle: onGetBodyRowStyle, onGetBodyRowSx: onGetBodyRowSx, onGetBodyColumnClassName: onGetBodyColumnClassName, onGetBodyColumnSx: onGetBodyColumnSx, onGetBodyColumnStyle: onGetBodyColumnStyle })) : (React.createElement(StyledBodyRow$1, null,
             React.createElement(TableCell, { colSpan: finalColumns.length, style: { flex: 1 } }, noData ? (noData) : (React.createElement(StyledNoDataDiv, null,
                 React.createElement("div", null,
                     React.createElement(Icon, null, "error")),
@@ -1312,6 +1412,7 @@ var Table = React.forwardRef(function (_a, ref) {
     return finalColumns ? (React.createElement(TableContextProvider, { value: {
             menuOpen: menuOpen,
             openMenuId: openMenuId,
+            progressiveVisible: progressiveVisible,
             setMenuOpen: TableContextSetMenuOpen,
             setItemColumnChecked: TableContextSetItemColumnChecked,
             setItemColumnCheckDisabled: TableContextSetItemColumnCheckDisabled,