@pdg/react-table 1.1.0 → 1.1.2

package/dist/index.esm.js

@@ -1,4 +1,4 @@
-import*as React from'react';import React__default,{useRef,useState,useCallback,useEffect,createContext,useContext,useMemo,useLayoutEffect,useId}from'react';import {styled,TableRow,lighten,TableCell,Stack,Pagination,Checkbox,useTheme,TableHead,Box,Tooltip,TableBody,Icon,TableFooter,Paper,Table,Grid,Popper,Grow,ClickAwayListener,IconButton}from'@mui/material';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 {v4}from'uuid';import {formatPersonalNo,formatBusinessNo,formatTelNo,formatNumber}from'@pdg/formatting';import {useInView}from'react-intersection-observer';import {ifUndefined,notEmpty,equal,empty}from'@pdg/compare';import {PSearch,PSearchGroup,PFormHidden}from'@pdg/react-form';import {PButton,PIcon,PCopyToClipboard}from'@pdg/react-component';function insertStyle(css) {
+import*as React from'react';import React__default,{useMemo,useRef,useState,useCallback,useEffect,createContext,useContext,useLayoutEffect,useId}from'react';import {styled,Box,IconButton,Grid,Stack,TableRow,lighten,TableCell,Pagination,Checkbox,useTheme,TableHead,Tooltip,TableBody,Icon,TableFooter,Paper,Table,Popper,Grow,ClickAwayListener}from'@mui/material';import {notEmpty,empty,ifUndefined,equal}from'@pdg/compare';import {formatPersonalNo,formatBusinessNo,formatTelNo,formatNumber}from'@pdg/formatting';import {PIcon,PCopyToClipboard,PButton}from'@pdg/react-component';import {PSearch,PSearchGroup,PFormHidden}from'@pdg/react-form';import {useAutoUpdateLayoutState,useForwardLayoutRef}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 {v4}from'uuid';import {useInView}from'react-intersection-observer';function insertStyle(css) {
     if (typeof window === 'undefined')
         return;
     const style = document.createElement('style');
@@ -138,7 +138,250 @@ function requireClassnames () {
 	} (classnames));
 	return classnames.exports;
 }var classnamesExports = requireClassnames();
-var classNames = /*@__PURE__*/getDefaultExportFromCjs(classnamesExports);/**
+var classNames = /*@__PURE__*/getDefaultExportFromCjs(classnamesExports);var Label = styled(Box)(templateObject_1$4 || (templateObject_1$4 = __makeTemplateObject(["\n  font-size: 12px;\n  font-weight: bold;\n"], ["\n  font-size: 12px;\n  font-weight: bold;\n"])));
+var ValueWrap = styled(Box)(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  margin-top: 3px;\n  position: relative;\n  display: flex;\n  flex-direction: row;\n"], ["\n  margin-top: 3px;\n  position: relative;\n  display: flex;\n  flex-direction: row;\n"])));
+var Value = styled('div')(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n  flex: 1;\n"], ["\n  flex: 1;\n"])));
+var ValueEllipsis = styled('div')(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n  flex: 1;\n  position: relative;\n  overflow: hidden;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n"], ["\n  flex: 1;\n  position: relative;\n  overflow: hidden;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n"])));
+var ValueClipboard = styled('div')(templateObject_5 || (templateObject_5 = __makeTemplateObject([""], [""])));
+var ClipboardIconButton = styled(IconButton)(templateObject_6 || (templateObject_6 = __makeTemplateObject(["\n  margin-top: -10px;\n  margin-bottom: -10px;\n"], ["\n  margin-top: -10px;\n  margin-bottom: -10px;\n"])));
+var Line = styled('div')(templateObject_7 || (templateObject_7 = __makeTemplateObject(["\n  border-top: 1px solid #efefef;\n  height: 1px;\n  flex: 1;\n"], ["\n  border-top: 1px solid #efefef;\n  height: 1px;\n  flex: 1;\n"])));
+var templateObject_1$4, templateObject_2, templateObject_3, templateObject_4, templateObject_5, templateObject_6, templateObject_7;function getTableColumnAlign(column, defaultAlign) {
+    switch (column.type) {
+        case 'number':
+            return column.align ? column.align : 'right';
+        default:
+            return column.align || defaultAlign;
+    }
+}
+function combineSx() {
+    var sx = [];
+    for (var _i = 0; _i < arguments.length; _i++) {
+        sx[_i] = arguments[_i];
+    }
+    var finalSx = [];
+    if (Array.isArray(finalSx)) {
+        sx.forEach(function (v) { return v && finalSx.push.apply(finalSx, (Array.isArray(v) ? v : [v])); });
+    }
+    return finalSx;
+}
+function typographyColorToSxColor(color) {
+    if (typeof color === 'string') {
+        if (['primary', 'secondary', 'info', 'warning', 'error'].includes(color)) {
+            return "".concat(color, ".main");
+        }
+        else if (color === 'text') {
+            return 'text.primary';
+        }
+        else {
+            return color;
+        }
+    }
+    else {
+        return color;
+    }
+}var dayjs_min$1 = {exports: {}};var dayjs_min = dayjs_min$1.exports;
+
+var hasRequiredDayjs_min;
+
+function requireDayjs_min () {
+	if (hasRequiredDayjs_min) return dayjs_min$1.exports;
+	hasRequiredDayjs_min = 1;
+	(function (module, exports) {
+		!function(t,e){module.exports=e();}(dayjs_min,(function(){var t=1e3,e=6e4,n=36e5,r="millisecond",i="second",s="minute",u="hour",a="day",o="week",c="month",f="quarter",h="year",d="date",l="Invalid Date",$=/^(\d{4})[-/]?(\d{1,2})?[-/]?(\d{0,2})[Tt\s]*(\d{1,2})?:?(\d{1,2})?:?(\d{1,2})?[.:]?(\d+)?$/,y=/\[([^\]]+)]|Y{1,4}|M{1,4}|D{1,2}|d{1,4}|H{1,2}|h{1,2}|a|A|m{1,2}|s{1,2}|Z{1,2}|SSS/g,M={name:"en",weekdays:"Sunday_Monday_Tuesday_Wednesday_Thursday_Friday_Saturday".split("_"),months:"January_February_March_April_May_June_July_August_September_October_November_December".split("_"),ordinal:function(t){var e=["th","st","nd","rd"],n=t%100;return "["+t+(e[(n-20)%10]||e[n]||e[0])+"]"}},m=function(t,e,n){var r=String(t);return !r||r.length>=e?t:""+Array(e+1-r.length).join(n)+t},v={s:m,z:function(t){var e=-t.utcOffset(),n=Math.abs(e),r=Math.floor(n/60),i=n%60;return (e<=0?"+":"-")+m(r,2,"0")+":"+m(i,2,"0")},m:function t(e,n){if(e.date()<n.date())return -t(n,e);var r=12*(n.year()-e.year())+(n.month()-e.month()),i=e.clone().add(r,c),s=n-i<0,u=e.clone().add(r+(s?-1:1),c);return +(-(r+(n-i)/(s?i-u:u-i))||0)},a:function(t){return t<0?Math.ceil(t)||0:Math.floor(t)},p:function(t){return {M:c,y:h,w:o,d:a,D:d,h:u,m:s,s:i,ms:r,Q:f}[t]||String(t||"").toLowerCase().replace(/s$/,"")},u:function(t){return void 0===t}},g="en",D={};D[g]=M;var p="$isDayjsObject",S=function(t){return t instanceof _||!(!t||!t[p])},w=function t(e,n,r){var i;if(!e)return g;if("string"==typeof e){var s=e.toLowerCase();D[s]&&(i=s),n&&(D[s]=n,i=s);var u=e.split("-");if(!i&&u.length>1)return t(u[0])}else {var a=e.name;D[a]=e,i=a;}return !r&&i&&(g=i),i||!r&&g},O=function(t,e){if(S(t))return t.clone();var n="object"==typeof e?e:{};return n.date=t,n.args=arguments,new _(n)},b=v;b.l=w,b.i=S,b.w=function(t,e){return O(t,{locale:e.$L,utc:e.$u,x:e.$x,$offset:e.$offset})};var _=function(){function M(t){this.$L=w(t.locale,null,true),this.parse(t),this.$x=this.$x||t.x||{},this[p]=true;}var m=M.prototype;return m.parse=function(t){this.$d=function(t){var e=t.date,n=t.utc;if(null===e)return new Date(NaN);if(b.u(e))return new Date;if(e instanceof Date)return new Date(e);if("string"==typeof e&&!/Z$/i.test(e)){var r=e.match($);if(r){var i=r[2]-1||0,s=(r[7]||"0").substring(0,3);return n?new Date(Date.UTC(r[1],i,r[3]||1,r[4]||0,r[5]||0,r[6]||0,s)):new Date(r[1],i,r[3]||1,r[4]||0,r[5]||0,r[6]||0,s)}}return new Date(e)}(t),this.init();},m.init=function(){var t=this.$d;this.$y=t.getFullYear(),this.$M=t.getMonth(),this.$D=t.getDate(),this.$W=t.getDay(),this.$H=t.getHours(),this.$m=t.getMinutes(),this.$s=t.getSeconds(),this.$ms=t.getMilliseconds();},m.$utils=function(){return b},m.isValid=function(){return !(this.$d.toString()===l)},m.isSame=function(t,e){var n=O(t);return this.startOf(e)<=n&&n<=this.endOf(e)},m.isAfter=function(t,e){return O(t)<this.startOf(e)},m.isBefore=function(t,e){return this.endOf(e)<O(t)},m.$g=function(t,e,n){return b.u(t)?this[e]:this.set(n,t)},m.unix=function(){return Math.floor(this.valueOf()/1e3)},m.valueOf=function(){return this.$d.getTime()},m.startOf=function(t,e){var n=this,r=!!b.u(e)||e,f=b.p(t),l=function(t,e){var i=b.w(n.$u?Date.UTC(n.$y,e,t):new Date(n.$y,e,t),n);return r?i:i.endOf(a)},$=function(t,e){return b.w(n.toDate()[t].apply(n.toDate("s"),(r?[0,0,0,0]:[23,59,59,999]).slice(e)),n)},y=this.$W,M=this.$M,m=this.$D,v="set"+(this.$u?"UTC":"");switch(f){case h:return r?l(1,0):l(31,11);case c:return r?l(1,M):l(0,M+1);case o:var g=this.$locale().weekStart||0,D=(y<g?y+7:y)-g;return l(r?m-D:m+(6-D),M);case a:case d:return $(v+"Hours",0);case u:return $(v+"Minutes",1);case s:return $(v+"Seconds",2);case i:return $(v+"Milliseconds",3);default:return this.clone()}},m.endOf=function(t){return this.startOf(t,false)},m.$set=function(t,e){var n,o=b.p(t),f="set"+(this.$u?"UTC":""),l=(n={},n[a]=f+"Date",n[d]=f+"Date",n[c]=f+"Month",n[h]=f+"FullYear",n[u]=f+"Hours",n[s]=f+"Minutes",n[i]=f+"Seconds",n[r]=f+"Milliseconds",n)[o],$=o===a?this.$D+(e-this.$W):e;if(o===c||o===h){var y=this.clone().set(d,1);y.$d[l]($),y.init(),this.$d=y.set(d,Math.min(this.$D,y.daysInMonth())).$d;}else l&&this.$d[l]($);return this.init(),this},m.set=function(t,e){return this.clone().$set(t,e)},m.get=function(t){return this[b.p(t)]()},m.add=function(r,f){var d,l=this;r=Number(r);var $=b.p(f),y=function(t){var e=O(l);return b.w(e.date(e.date()+Math.round(t*r)),l)};if($===c)return this.set(c,this.$M+r);if($===h)return this.set(h,this.$y+r);if($===a)return y(1);if($===o)return y(7);var M=(d={},d[s]=e,d[u]=n,d[i]=t,d)[$]||1,m=this.$d.getTime()+r*M;return b.w(m,this)},m.subtract=function(t,e){return this.add(-1*t,e)},m.format=function(t){var e=this,n=this.$locale();if(!this.isValid())return n.invalidDate||l;var r=t||"YYYY-MM-DDTHH:mm:ssZ",i=b.z(this),s=this.$H,u=this.$m,a=this.$M,o=n.weekdays,c=n.months,f=n.meridiem,h=function(t,n,i,s){return t&&(t[n]||t(e,r))||i[n].slice(0,s)},d=function(t){return b.s(s%12||12,t,"0")},$=f||function(t,e,n){var r=t<12?"AM":"PM";return n?r.toLowerCase():r};return r.replace(y,(function(t,r){return r||function(t){switch(t){case "YY":return String(e.$y).slice(-2);case "YYYY":return b.s(e.$y,4,"0");case "M":return a+1;case "MM":return b.s(a+1,2,"0");case "MMM":return h(n.monthsShort,a,c,3);case "MMMM":return h(c,a);case "D":return e.$D;case "DD":return b.s(e.$D,2,"0");case "d":return String(e.$W);case "dd":return h(n.weekdaysMin,e.$W,o,2);case "ddd":return h(n.weekdaysShort,e.$W,o,3);case "dddd":return o[e.$W];case "H":return String(s);case "HH":return b.s(s,2,"0");case "h":return d(1);case "hh":return d(2);case "a":return $(s,u,true);case "A":return $(s,u,false);case "m":return String(u);case "mm":return b.s(u,2,"0");case "s":return String(e.$s);case "ss":return b.s(e.$s,2,"0");case "SSS":return b.s(e.$ms,3,"0");case "Z":return i}return null}(t)||i.replace(":","")}))},m.utcOffset=function(){return 15*-Math.round(this.$d.getTimezoneOffset()/15)},m.diff=function(r,d,l){var $,y=this,M=b.p(d),m=O(r),v=(m.utcOffset()-this.utcOffset())*e,g=this-m,D=function(){return b.m(y,m)};switch(M){case h:$=D()/12;break;case c:$=D();break;case f:$=D()/3;break;case o:$=(g-v)/6048e5;break;case a:$=(g-v)/864e5;break;case u:$=g/n;break;case s:$=g/e;break;case i:$=g/t;break;default:$=g;}return l?$:b.a($)},m.daysInMonth=function(){return this.endOf(c).$D},m.$locale=function(){return D[this.$L]},m.locale=function(t,e){if(!t)return this.$L;var n=this.clone(),r=w(t,e,true);return r&&(n.$L=r),n},m.clone=function(){return b.w(this.$d,this)},m.toDate=function(){return new Date(this.valueOf())},m.toJSON=function(){return this.isValid()?this.toISOString():null},m.toISOString=function(){return this.$d.toISOString()},m.toString=function(){return this.$d.toUTCString()},M}(),k=_.prototype;return O.prototype=k,[["$ms",r],["$s",i],["$m",s],["$H",u],["$W",a],["$M",c],["$y",h],["$D",d]].forEach((function(t){k[t[1]]=function(e){return this.$g(e,t[0],t[1])};})),O.extend=function(t,e){return t.$i||(t(e,_,O),t.$i=true),O},O.locale=w,O.isDayjs=S,O.unix=function(t){return O(1e3*t)},O.en=D[g],O.Ls=D,O.p={},O})); 
+	} (dayjs_min$1));
+	return dayjs_min$1.exports;
+}var dayjs_minExports = requireDayjs_min();
+var dayjs = /*@__PURE__*/getDefaultExportFromCjs(dayjs_minExports);var PInfoTable = function (_a) {
+    /********************************************************************************************************************
+     * Memo
+     * ******************************************************************************************************************/
+    var cols = _a.cols, _b = _a.spacing, spacing = _b === void 0 ? 2 : _b, columnSpacing = _a.columnSpacing, _c = _a.rowSpacing, rowSpacing = _c === void 0 ? 3 : _c, className = _a.className, style = _a.style, sx = _a.sx, labelClassName = _a.labelClassName, _d = _a.labelColor, labelColor = _d === void 0 ? 'primary' : _d, labelStyle = _a.labelStyle, labelSx = _a.labelSx, _e = _a.dividerColor, dividerColor = _e === void 0 ? 'gray' : _e, valueClassName = _a.valueClassName, valueStyle = _a.valueStyle, valueSx = _a.valueSx, ellipsis = _a.ellipsis, valueUnderline = _a.valueUnderline, info = _a.info, items = _a.items, onCopyToClipboard = _a.onCopyToClipboard;
+    var renderItems = useMemo(function () {
+        return items.filter(function (item) { return !!item && (!item.onHide || !item.onHide(info)); }).map(function (item) {
+            /** data */
+            var data = undefined;
+            if (item.name !== undefined) {
+                if (info[item.name] !== undefined) {
+                    if (info[item.name] instanceof Date) {
+                        data = dayjs(info[item.name]).format('YYYY-MM-DD HH:mm:ss');
+                    }
+                    else if (info[item.name] instanceof dayjs) {
+                        data = info[item.name].format('YYYY-MM-DD HH:mm:ss');
+                    }
+                    else {
+                        data = info[item.name];
+                    }
+                }
+            }
+            if (item.onRender) {
+                data = item.onRender(info);
+            }
+            else if (notEmpty(data)) {
+                switch (item.type) {
+                    case 'number':
+                        if (typeof data === 'string' || typeof data === 'number') {
+                            data = formatNumber(data);
+                            if (item.numberPrefix) {
+                                data = (React__default.createElement(React__default.Fragment, null,
+                                    React__default.createElement("span", { style: { opacity: 0.5, marginRight: 2 } }, item.numberPrefix),
+                                    data));
+                            }
+                            if (item.numberSuffix) {
+                                data = (React__default.createElement(React__default.Fragment, null,
+                                    data,
+                                    React__default.createElement("span", { style: { opacity: 0.5, marginLeft: 2 } }, item.numberSuffix)));
+                            }
+                        }
+                        break;
+                    case 'tel':
+                        if (typeof data === 'string') {
+                            data = formatTelNo(data);
+                        }
+                        break;
+                    case 'email':
+                        if (typeof data === 'string') {
+                            data = (React__default.createElement(React__default.Fragment, null,
+                                React__default.createElement("a", { href: "mailto:".concat(data) }, data)));
+                        }
+                        break;
+                    case 'url':
+                        if (typeof data === 'string' && data.toLowerCase().startsWith('http')) {
+                            data = (React__default.createElement(React__default.Fragment, null,
+                                React__default.createElement("a", { href: data, target: '_blank' }, data)));
+                        }
+                        break;
+                    case 'business_no':
+                        if (typeof data === 'string') {
+                            data = formatBusinessNo(data);
+                        }
+                        break;
+                    case 'personal_no':
+                        if (typeof data === 'string') {
+                            data = formatPersonalNo(data);
+                        }
+                        break;
+                    case 'date':
+                        if (typeof data === 'string' || typeof data === 'number') {
+                            data = dayjs(data, item.dateFormat).format('YYYY-MM-DD');
+                        }
+                        break;
+                    case 'datetime':
+                        if (typeof data === 'string' || typeof data === 'number') {
+                            var dt = dayjs(data, item.dateFormat);
+                            data = (React__default.createElement(React__default.Fragment, null,
+                                React__default.createElement("span", null, dt.format('YYYY-MM-DD')),
+                                item.dateTwoLine ? React__default.createElement("br", null) : ' ',
+                                React__default.createElement("span", { style: { opacity: 0.5 } }, dt.format('HH:mm:ss'))));
+                        }
+                        break;
+                    case 'date-hour':
+                        if (typeof data === 'string' || typeof data === 'number') {
+                            var dt = dayjs(data, item.dateFormat);
+                            data = (React__default.createElement(React__default.Fragment, null,
+                                React__default.createElement("span", null, dt.format('YYYY-MM-DD')),
+                                item.dateTwoLine ? React__default.createElement("br", null) : ' ',
+                                React__default.createElement("span", { style: { opacity: 0.5 } }, dt.format('HH시'))));
+                        }
+                        break;
+                    case 'date-minute':
+                        if (typeof data === 'string' || typeof data === 'number') {
+                            var dt = dayjs(data, item.dateFormat);
+                            data = (React__default.createElement(React__default.Fragment, null,
+                                React__default.createElement("span", null, dt.format('YYYY-MM-DD')),
+                                item.dateTwoLine ? React__default.createElement("br", null) : ' ',
+                                React__default.createElement("span", { style: { opacity: 0.5 } }, dt.format('HH시 MM분'))));
+                        }
+                        break;
+                }
+            }
+            if (empty(data))
+                data = item.onRenderEmpty ? item.onRenderEmpty(info) : React__default.createElement(React__default.Fragment, null, "\u00A0");
+            /** copyToClipboardText */
+            var copyToClipboardText = item.clipboardText || (typeof data === 'string' ? data : typeof data === 'number' ? data.toString() : '');
+            /** sizeProps */
+            var sizeProps = {};
+            if (typeof cols === 'number') {
+                sizeProps.xs = 12 / cols;
+            }
+            else {
+                if (cols.xs)
+                    sizeProps.xs = 12 / cols.xs;
+                if (cols.sm)
+                    sizeProps.sm = 12 / cols.sm;
+                if (cols.md)
+                    sizeProps.md = 12 / cols.md;
+                if (cols.lg)
+                    sizeProps.lg = 12 / cols.lg;
+                if (cols.xl)
+                    sizeProps.xl = 12 / cols.xl;
+            }
+            if (item.xs)
+                sizeProps.xs = item.xs;
+            if (item.sm)
+                sizeProps.sm = item.sm;
+            if (item.md)
+                sizeProps.md = item.md;
+            if (item.lg)
+                sizeProps.lg = item.lg;
+            if (item.xl)
+                sizeProps.xl = item.xl;
+            if (item.onXs)
+                sizeProps.xs = item.onXs(info);
+            if (item.onSm)
+                sizeProps.sm = item.onSm(info);
+            if (item.onMd)
+                sizeProps.md = item.onMd(info);
+            if (item.onLg)
+                sizeProps.lg = item.onLg(info);
+            if (item.onXl)
+                sizeProps.xl = item.onXl(info);
+            return { item: item, data: data, copyToClipboardText: copyToClipboardText, sizeProps: sizeProps };
+        });
+    }, [info, items, cols]);
+    var content = useMemo(function () {
+        return renderItems.map(function (_a, idx) {
+            var item = _a.item, data = _a.data, copyToClipboardText = _a.copyToClipboardText, sizeProps = _a.sizeProps;
+            var finalLabelColor = typographyColorToSxColor(item.type === 'divider' ? item.dividerColor || dividerColor : item.labelColor || labelColor);
+            var finalLabelSx = combineSx(labelSx, item.labelSx, !!finalLabelColor && { color: finalLabelColor });
+            var finalValueSx = combineSx(valueSx, item.valueSx);
+            var valueUnderlineStyle = valueUnderline
+                ? { borderBottom: '1px solid #efefef', paddingBottom: 5 }
+                : undefined;
+            return item.type === 'divider' ? (React__default.createElement(Grid, { key: idx, size: { xs: 12 } },
+                React__default.createElement(Stack, { direction: 'row', spacing: 0.5, alignItems: 'center' },
+                    item.icon && (React__default.createElement(PIcon, { sx: { color: item.dividerColor || dividerColor }, size: 'small' }, item.icon)),
+                    item.label && (React__default.createElement(Label, { className: classNames(labelClassName, item.labelClassName), style: __assign$2(__assign$2({}, item.labelStyle), labelStyle), sx: finalLabelSx }, item.label)),
+                    item.dividerLine && (React__default.createElement(React__default.Fragment, null, item.icon || item.label ? (React__default.createElement("div", { style: { flex: 1, paddingLeft: 5 } },
+                        React__default.createElement(Line, null))) : (React__default.createElement(Line, null))))))) : (React__default.createElement(Grid, { key: idx, size: sizeProps, className: item.className, style: item.style, sx: item.sx },
+                React__default.createElement(Stack, { direction: 'row', spacing: 0.5, alignItems: 'center' },
+                    item.icon && (React__default.createElement(PIcon, { sx: { color: finalLabelColor }, size: 'small' }, "CalendarMonth")),
+                    React__default.createElement(Label, { className: classNames(labelClassName, item.labelClassName), style: __assign$2(__assign$2({}, item.labelStyle), labelStyle), sx: finalLabelSx }, item.label)),
+                React__default.createElement(ValueWrap, { className: classNames(valueClassName, item.valueClassName), style: __assign$2(__assign$2(__assign$2({}, valueStyle), item.valueStyle), valueUnderlineStyle), sx: finalValueSx },
+                    item.ellipsis || ellipsis ? React__default.createElement(ValueEllipsis, null, data) : React__default.createElement(Value, null, data),
+                    item.clipboard && notEmpty(copyToClipboardText) && (React__default.createElement(ValueClipboard, null,
+                        React__default.createElement(PCopyToClipboard, { text: copyToClipboardText, onCopy: onCopyToClipboard ? function () { return onCopyToClipboard(item, copyToClipboardText); } : undefined },
+                            React__default.createElement(ClipboardIconButton, __assign$2({ size: 'small', color: 'primary' }, item.clipboardProps),
+                                React__default.createElement(PIcon, null, item.clipboardIcon || 'ContentPaste'))))))));
+        });
+    }, [
+        dividerColor,
+        ellipsis,
+        labelClassName,
+        labelColor,
+        labelStyle,
+        labelSx,
+        onCopyToClipboard,
+        renderItems,
+        valueClassName,
+        valueStyle,
+        valueSx,
+        valueUnderline,
+    ]);
+    /********************************************************************************************************************
+     * Render
+     * ******************************************************************************************************************/
+    return (React__default.createElement(Grid, { container: true, spacing: spacing, columnSpacing: columnSpacing, rowSpacing: rowSpacing, className: classNames('PInfoTable', className), style: style, sx: sx }, content));
+};/**
  * Checks if `value` is the
  * [language type](http://www.ecma-international.org/ecma-262/7.0/#sec-ecmascript-language-types)
  * of `Object`. (e.g. arrays, functions, objects, regexes, `new Number(0)`, and `new String('')`)
@@ -1006,55 +1249,21 @@ function useResizeDetector({ skipOnMount = false, refreshMode, refreshRate = 100
             (_a = resizeObserver === null || resizeObserver === void 0 ? void 0 : resizeObserver.disconnect) === null || _a === void 0 ? void 0 : _a.call(resizeObserver);
             (_c = (_b = resizeHandler).cancel) === null || _c === void 0 ? void 0 : _c.call(_b);
         };
-    }, [resizeHandler, refElement]);
-    return Object.assign({ ref: refProxy }, size);
-}var StyledBodyRow = styled(TableRow)(function (_a) {
-    var theme = _a.theme;
-    return ({
-        '&.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 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;function getTableColumnAlign(column, defaultAlign) {
-    switch (column.type) {
-        case 'number':
-            return column.align ? column.align : 'right';
-        default:
-            return column.align || defaultAlign;
-    }
-}
-function combineSx() {
-    var sx = [];
-    for (var _i = 0; _i < arguments.length; _i++) {
-        sx[_i] = arguments[_i];
-    }
-    var finalSx = [];
-    if (Array.isArray(finalSx)) {
-        sx.forEach(function (v) { return v && finalSx.push.apply(finalSx, (Array.isArray(v) ? v : [v])); });
-    }
-    return finalSx;
-}
-function typographyColorToSxColor(color) {
-    if (typeof color === 'string') {
-        if (['primary', 'secondary', 'info', 'warning', 'error'].includes(color)) {
-            return "".concat(color, ".main");
-        }
-        else if (color === 'text') {
-            return 'text.primary';
-        }
-        else {
-            return color;
-        }
-    }
-    else {
-        return color;
-    }
-}var PTableContextDefaultValue = {
+    }, [resizeHandler, refElement]);
+    return Object.assign({ ref: refProxy }, size);
+}var StyledBodyRow = styled(TableRow)(function (_a) {
+    var theme = _a.theme;
+    return ({
+        '&.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 StyledNoDataDiv = styled('div')(templateObject_1$3 || (templateObject_1$3 = __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$3;var PTableContextDefaultValue = {
     menuOpen: false,
     openMenuId: undefined,
     setMenuOpen: function () { },
@@ -1069,7 +1278,7 @@ function typographyColorToSxColor(color) {
         throw new Error('useFormState should be used within TableContext.Provider');
     }
     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 StyledTableCell = styled(TableCell)(templateObject_1$2 || (templateObject_1$2 = __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 PTableCommonCell = React__default.forwardRef(function (_a, ref) {
     /********************************************************************************************************************
      * Use
@@ -1226,7 +1435,7 @@ var PTableCommonCell = React__default.forwardRef(function (_a, ref) {
      * ******************************************************************************************************************/
     return (React__default.createElement(StyledTableCell, { ref: ref, align: align, className: classNames(className, 'PTableCommonCell', 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 PTableFooterCell = function (_a) {
+var templateObject_1$2;var PTableFooterCell = function (_a) {
     /********************************************************************************************************************
      * Memo
      * ******************************************************************************************************************/
@@ -1340,7 +1549,7 @@ var templateObject_1$3;var PTableFooterCell = function (_a) {
      * Render
      * ******************************************************************************************************************/
     return (React__default.createElement(PTableCommonCell, { type: 'head', className: 'PTableHeadCell', 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 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 PTableTopHead = function (_a) {
     /********************************************************************************************************************
      * Use
@@ -1439,7 +1648,7 @@ var PTableTopHead = function (_a) {
             columnRow));
     }
 };
-var templateObject_1$2;/**
+var templateObject_1$1;/**
  * Checks if `value` is the
  * [language type](http://www.ecma-international.org/ecma-262/7.0/#sec-ecmascript-language-types)
  * of `Object`. (e.g. arrays, functions, objects, regexes, `new Number(0)`, and `new String('')`)
@@ -3046,19 +3255,7 @@ SimpleBar.displayName = 'SimpleBar';var makeSortableItems = function (items) {
     }
 
   }
-});var dayjs_min$1 = {exports: {}};var dayjs_min = dayjs_min$1.exports;
-
-var hasRequiredDayjs_min;
-
-function requireDayjs_min () {
-	if (hasRequiredDayjs_min) return dayjs_min$1.exports;
-	hasRequiredDayjs_min = 1;
-	(function (module, exports) {
-		!function(t,e){module.exports=e();}(dayjs_min,(function(){var t=1e3,e=6e4,n=36e5,r="millisecond",i="second",s="minute",u="hour",a="day",o="week",c="month",f="quarter",h="year",d="date",l="Invalid Date",$=/^(\d{4})[-/]?(\d{1,2})?[-/]?(\d{0,2})[Tt\s]*(\d{1,2})?:?(\d{1,2})?:?(\d{1,2})?[.:]?(\d+)?$/,y=/\[([^\]]+)]|Y{1,4}|M{1,4}|D{1,2}|d{1,4}|H{1,2}|h{1,2}|a|A|m{1,2}|s{1,2}|Z{1,2}|SSS/g,M={name:"en",weekdays:"Sunday_Monday_Tuesday_Wednesday_Thursday_Friday_Saturday".split("_"),months:"January_February_March_April_May_June_July_August_September_October_November_December".split("_"),ordinal:function(t){var e=["th","st","nd","rd"],n=t%100;return "["+t+(e[(n-20)%10]||e[n]||e[0])+"]"}},m=function(t,e,n){var r=String(t);return !r||r.length>=e?t:""+Array(e+1-r.length).join(n)+t},v={s:m,z:function(t){var e=-t.utcOffset(),n=Math.abs(e),r=Math.floor(n/60),i=n%60;return (e<=0?"+":"-")+m(r,2,"0")+":"+m(i,2,"0")},m:function t(e,n){if(e.date()<n.date())return -t(n,e);var r=12*(n.year()-e.year())+(n.month()-e.month()),i=e.clone().add(r,c),s=n-i<0,u=e.clone().add(r+(s?-1:1),c);return +(-(r+(n-i)/(s?i-u:u-i))||0)},a:function(t){return t<0?Math.ceil(t)||0:Math.floor(t)},p:function(t){return {M:c,y:h,w:o,d:a,D:d,h:u,m:s,s:i,ms:r,Q:f}[t]||String(t||"").toLowerCase().replace(/s$/,"")},u:function(t){return void 0===t}},g="en",D={};D[g]=M;var p="$isDayjsObject",S=function(t){return t instanceof _||!(!t||!t[p])},w=function t(e,n,r){var i;if(!e)return g;if("string"==typeof e){var s=e.toLowerCase();D[s]&&(i=s),n&&(D[s]=n,i=s);var u=e.split("-");if(!i&&u.length>1)return t(u[0])}else {var a=e.name;D[a]=e,i=a;}return !r&&i&&(g=i),i||!r&&g},O=function(t,e){if(S(t))return t.clone();var n="object"==typeof e?e:{};return n.date=t,n.args=arguments,new _(n)},b=v;b.l=w,b.i=S,b.w=function(t,e){return O(t,{locale:e.$L,utc:e.$u,x:e.$x,$offset:e.$offset})};var _=function(){function M(t){this.$L=w(t.locale,null,true),this.parse(t),this.$x=this.$x||t.x||{},this[p]=true;}var m=M.prototype;return m.parse=function(t){this.$d=function(t){var e=t.date,n=t.utc;if(null===e)return new Date(NaN);if(b.u(e))return new Date;if(e instanceof Date)return new Date(e);if("string"==typeof e&&!/Z$/i.test(e)){var r=e.match($);if(r){var i=r[2]-1||0,s=(r[7]||"0").substring(0,3);return n?new Date(Date.UTC(r[1],i,r[3]||1,r[4]||0,r[5]||0,r[6]||0,s)):new Date(r[1],i,r[3]||1,r[4]||0,r[5]||0,r[6]||0,s)}}return new Date(e)}(t),this.init();},m.init=function(){var t=this.$d;this.$y=t.getFullYear(),this.$M=t.getMonth(),this.$D=t.getDate(),this.$W=t.getDay(),this.$H=t.getHours(),this.$m=t.getMinutes(),this.$s=t.getSeconds(),this.$ms=t.getMilliseconds();},m.$utils=function(){return b},m.isValid=function(){return !(this.$d.toString()===l)},m.isSame=function(t,e){var n=O(t);return this.startOf(e)<=n&&n<=this.endOf(e)},m.isAfter=function(t,e){return O(t)<this.startOf(e)},m.isBefore=function(t,e){return this.endOf(e)<O(t)},m.$g=function(t,e,n){return b.u(t)?this[e]:this.set(n,t)},m.unix=function(){return Math.floor(this.valueOf()/1e3)},m.valueOf=function(){return this.$d.getTime()},m.startOf=function(t,e){var n=this,r=!!b.u(e)||e,f=b.p(t),l=function(t,e){var i=b.w(n.$u?Date.UTC(n.$y,e,t):new Date(n.$y,e,t),n);return r?i:i.endOf(a)},$=function(t,e){return b.w(n.toDate()[t].apply(n.toDate("s"),(r?[0,0,0,0]:[23,59,59,999]).slice(e)),n)},y=this.$W,M=this.$M,m=this.$D,v="set"+(this.$u?"UTC":"");switch(f){case h:return r?l(1,0):l(31,11);case c:return r?l(1,M):l(0,M+1);case o:var g=this.$locale().weekStart||0,D=(y<g?y+7:y)-g;return l(r?m-D:m+(6-D),M);case a:case d:return $(v+"Hours",0);case u:return $(v+"Minutes",1);case s:return $(v+"Seconds",2);case i:return $(v+"Milliseconds",3);default:return this.clone()}},m.endOf=function(t){return this.startOf(t,false)},m.$set=function(t,e){var n,o=b.p(t),f="set"+(this.$u?"UTC":""),l=(n={},n[a]=f+"Date",n[d]=f+"Date",n[c]=f+"Month",n[h]=f+"FullYear",n[u]=f+"Hours",n[s]=f+"Minutes",n[i]=f+"Seconds",n[r]=f+"Milliseconds",n)[o],$=o===a?this.$D+(e-this.$W):e;if(o===c||o===h){var y=this.clone().set(d,1);y.$d[l]($),y.init(),this.$d=y.set(d,Math.min(this.$D,y.daysInMonth())).$d;}else l&&this.$d[l]($);return this.init(),this},m.set=function(t,e){return this.clone().$set(t,e)},m.get=function(t){return this[b.p(t)]()},m.add=function(r,f){var d,l=this;r=Number(r);var $=b.p(f),y=function(t){var e=O(l);return b.w(e.date(e.date()+Math.round(t*r)),l)};if($===c)return this.set(c,this.$M+r);if($===h)return this.set(h,this.$y+r);if($===a)return y(1);if($===o)return y(7);var M=(d={},d[s]=e,d[u]=n,d[i]=t,d)[$]||1,m=this.$d.getTime()+r*M;return b.w(m,this)},m.subtract=function(t,e){return this.add(-1*t,e)},m.format=function(t){var e=this,n=this.$locale();if(!this.isValid())return n.invalidDate||l;var r=t||"YYYY-MM-DDTHH:mm:ssZ",i=b.z(this),s=this.$H,u=this.$m,a=this.$M,o=n.weekdays,c=n.months,f=n.meridiem,h=function(t,n,i,s){return t&&(t[n]||t(e,r))||i[n].slice(0,s)},d=function(t){return b.s(s%12||12,t,"0")},$=f||function(t,e,n){var r=t<12?"AM":"PM";return n?r.toLowerCase():r};return r.replace(y,(function(t,r){return r||function(t){switch(t){case "YY":return String(e.$y).slice(-2);case "YYYY":return b.s(e.$y,4,"0");case "M":return a+1;case "MM":return b.s(a+1,2,"0");case "MMM":return h(n.monthsShort,a,c,3);case "MMMM":return h(c,a);case "D":return e.$D;case "DD":return b.s(e.$D,2,"0");case "d":return String(e.$W);case "dd":return h(n.weekdaysMin,e.$W,o,2);case "ddd":return h(n.weekdaysShort,e.$W,o,3);case "dddd":return o[e.$W];case "H":return String(s);case "HH":return b.s(s,2,"0");case "h":return d(1);case "hh":return d(2);case "a":return $(s,u,true);case "A":return $(s,u,false);case "m":return String(u);case "mm":return b.s(u,2,"0");case "s":return String(e.$s);case "ss":return b.s(e.$s,2,"0");case "SSS":return b.s(e.$ms,3,"0");case "Z":return i}return null}(t)||i.replace(":","")}))},m.utcOffset=function(){return 15*-Math.round(this.$d.getTimezoneOffset()/15)},m.diff=function(r,d,l){var $,y=this,M=b.p(d),m=O(r),v=(m.utcOffset()-this.utcOffset())*e,g=this-m,D=function(){return b.m(y,m)};switch(M){case h:$=D()/12;break;case c:$=D();break;case f:$=D()/3;break;case o:$=(g-v)/6048e5;break;case a:$=(g-v)/864e5;break;case u:$=g/n;break;case s:$=g/e;break;case i:$=g/t;break;default:$=g;}return l?$:b.a($)},m.daysInMonth=function(){return this.endOf(c).$D},m.$locale=function(){return D[this.$L]},m.locale=function(t,e){if(!t)return this.$L;var n=this.clone(),r=w(t,e,true);return r&&(n.$L=r),n},m.clone=function(){return b.w(this.$d,this)},m.toDate=function(){return new Date(this.valueOf())},m.toJSON=function(){return this.isValid()?this.toISOString():null},m.toISOString=function(){return this.$d.toISOString()},m.toString=function(){return this.$d.toUTCString()},M}(),k=_.prototype;return O.prototype=k,[["$ms",r],["$s",i],["$m",s],["$H",u],["$W",a],["$M",c],["$y",h],["$D",d]].forEach((function(t){k[t[1]]=function(e){return this.$g(e,t[0],t[1])};})),O.extend=function(t,e){return t.$i||(t(e,_,O),t.$i=true),O},O.locale=w,O.isDayjs=S,O.unix=function(t){return O(1e3*t)},O.en=D[g],O.Ls=D,O.p={},O})); 
-	} (dayjs_min$1));
-	return dayjs_min$1.exports;
-}var dayjs_minExports = requireDayjs_min();
-var dayjs = /*@__PURE__*/getDefaultExportFromCjs(dayjs_minExports);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 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 PTableBodyCell = React__default.forwardRef(function (_a, ref) {
     /********************************************************************************************************************
      * Use
@@ -3250,7 +3447,7 @@ var PTableBodyCell = React__default.forwardRef(function (_a, ref) {
      * ******************************************************************************************************************/
     return (React__default.createElement(PTableCommonCell, { ref: ref, type: 'body', className: classNames('PTableBodyCell', 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 PStyledBodyRow = styled(TableRow)(function (_a) {
+var templateObject_1;var PStyledBodyRow = styled(TableRow)(function (_a) {
     var theme = _a.theme;
     return ({
         '&.odd-color:nth-of-type(odd):not(:hover)': {
@@ -3679,61 +3876,52 @@ var PTable = React__default.forwardRef(function (_a, ref) {
     /********************************************************************************************************************
      * Commands
      * ******************************************************************************************************************/
-    useLayoutEffect(function () {
-        if (ref) {
-            var lastColumns_1 = columns;
-            var lastItems_1 = items;
-            var lastPaging_1 = paging;
-            var commands = {
-                getColumns: function () { return lastColumns_1; },
-                setColumns: function (columns) {
-                    lastColumns_1 = columns;
-                    setColumns(lastColumns_1);
-                },
-                getItems: function () { return lastItems_1; },
-                setItems: function (items) {
-                    lastItems_1 = items;
-                    setItems(items);
-                },
-                getPaging: function () { return lastPaging_1; },
-                setItemsPaging: function (items, paging) {
-                    lastItems_1 = items;
-                    lastPaging_1 = paging;
-                    setItems(lastItems_1);
-                    setPaging(lastPaging_1);
-                },
-                resetSort: function () {
-                    setSortableItems(makeSortableItems(lastItems_1));
-                },
-                getCheckedItems: getCheckedItems,
-                getChecked: getChecked,
-                setChecked: setChecked,
-                toggleChecked: toggleChecked,
-                setCheckedAll: setCheckedAll,
-                scrollToTop: simpleBarScrollToTop,
-            };
-            if (typeof ref === 'function') {
-                ref(commands);
-            }
-            else {
-                ref.current = commands;
-            }
-        }
+    useForwardLayoutRef(ref, useMemo(function () {
+        var lastColumns = columns;
+        var lastItems = items;
+        var lastPaging = paging;
+        return {
+            getColumns: function () { return lastColumns; },
+            setColumns: function (columns) {
+                lastColumns = columns;
+                setColumns(lastColumns);
+            },
+            getItems: function () { return lastItems; },
+            setItems: function (items) {
+                lastItems = items;
+                setItems(items);
+            },
+            getPaging: function () { return lastPaging; },
+            setItemsPaging: function (items, paging) {
+                lastItems = items;
+                lastPaging = paging;
+                setItems(lastItems);
+                setPaging(lastPaging);
+            },
+            resetSort: function () {
+                setSortableItems(makeSortableItems(lastItems));
+            },
+            getCheckedItems: getCheckedItems,
+            getChecked: getChecked,
+            setChecked: setChecked,
+            toggleChecked: toggleChecked,
+            setCheckedAll: setCheckedAll,
+            scrollToTop: simpleBarScrollToTop,
+        };
     }, [
-        ref,
         columns,
+        getChecked,
+        getCheckedItems,
         items,
         paging,
+        setChecked,
+        setCheckedAll,
         setColumns,
         setItems,
         setPaging,
-        getCheckedItems,
         simpleBarScrollToTop,
-        setChecked,
         toggleChecked,
-        getChecked,
-        setCheckedAll,
-    ]);
+    ]));
     /********************************************************************************************************************
      * Event Handler
      * ******************************************************************************************************************/
@@ -4138,45 +4326,35 @@ var deHash = function () {
     /********************************************************************************************************************
      * Commands
      * ******************************************************************************************************************/
-    useLayoutEffect(function () {
-        if (ref) {
-            var commands = {
-                reload: function (page) {
-                    var _a, _b, _c, _d;
-                    if (page != null) {
-                        (_a = tableRef.current) === null || _a === void 0 ? void 0 : _a.scrollToTop();
-                    }
-                    var finalData;
-                    if (lastGetDataDataRef.current) {
-                        finalData = __assign$2({}, lastGetDataDataRef.current);
-                        if (page != null) {
-                            (_b = searchRef.current) === null || _b === void 0 ? void 0 : _b.setValue('page', page);
-                            finalData.page = page;
-                        }
-                    }
-                    else {
-                        if (hash) {
-                            hashToSearchValue();
-                        }
-                        if (page != null) {
-                            (_c = searchRef.current) === null || _c === void 0 ? void 0 : _c.setValue('page', page);
-                        }
-                        finalData = ((_d = searchRef.current) === null || _d === void 0 ? void 0 : _d.getAllFormValue()) || {};
-                    }
-                    getData(finalData);
-                },
-                getLastLoadData: function () { return lastGetDataDataRef.current || {}; },
-                getSearch: function () { return searchRef.current; },
-                getTable: function () { return tableRef.current; },
-            };
-            if (typeof ref === 'function') {
-                ref(commands);
+    useForwardLayoutRef(ref, useMemo(function () { return ({
+        reload: function (page) {
+            var _a, _b, _c, _d;
+            if (page != null) {
+                (_a = tableRef.current) === null || _a === void 0 ? void 0 : _a.scrollToTop();
+            }
+            var finalData;
+            if (lastGetDataDataRef.current) {
+                finalData = __assign$2({}, lastGetDataDataRef.current);
+                if (page != null) {
+                    (_b = searchRef.current) === null || _b === void 0 ? void 0 : _b.setValue('page', page);
+                    finalData.page = page;
+                }
             }
             else {
-                ref.current = commands;
+                if (hash) {
+                    hashToSearchValue();
+                }
+                if (page != null) {
+                    (_c = searchRef.current) === null || _c === void 0 ? void 0 : _c.setValue('page', page);
+                }
+                finalData = ((_d = searchRef.current) === null || _d === void 0 ? void 0 : _d.getAllFormValue()) || {};
             }
-        }
-    }, [ref, hash, lastGetDataDataRef, searchRef, tableRef, getData, hashToSearchValue]);
+            getData(finalData);
+        },
+        getLastLoadData: function () { return lastGetDataDataRef.current || {}; },
+        getSearch: function () { return searchRef.current; },
+        getTable: function () { return tableRef.current; },
+    }); }, [getData, hash, hashToSearchValue]));
     /********************************************************************************************************************
      * hash
      * ******************************************************************************************************************/
@@ -4513,201 +4691,4 @@ var PTableButton$1 = React__default.memo(PTableButton);var PTableMenuButton = Re
                 React__default.createElement(Paper, null,
                     React__default.createElement(ClickAwayListener, { onClickAway: handleClose }, finalMenuList))));
         })));
-});var Label = styled(Box)(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  font-size: 12px;\n  font-weight: bold;\n"], ["\n  font-size: 12px;\n  font-weight: bold;\n"])));
-var ValueWrap = styled(Box)(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  margin-top: 3px;\n  position: relative;\n  display: flex;\n  flex-direction: row;\n"], ["\n  margin-top: 3px;\n  position: relative;\n  display: flex;\n  flex-direction: row;\n"])));
-var Value = styled('div')(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n  flex: 1;\n"], ["\n  flex: 1;\n"])));
-var ValueEllipsis = styled('div')(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n  flex: 1;\n  position: relative;\n  overflow: hidden;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n"], ["\n  flex: 1;\n  position: relative;\n  overflow: hidden;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n"])));
-var ValueClipboard = styled('div')(templateObject_5 || (templateObject_5 = __makeTemplateObject([""], [""])));
-var ClipboardIconButton = styled(IconButton)(templateObject_6 || (templateObject_6 = __makeTemplateObject(["\n  margin-top: -10px;\n  margin-bottom: -10px;\n"], ["\n  margin-top: -10px;\n  margin-bottom: -10px;\n"])));
-var Line = styled('div')(templateObject_7 || (templateObject_7 = __makeTemplateObject(["\n  border-top: 1px solid #efefef;\n  height: 1px;\n  flex: 1;\n"], ["\n  border-top: 1px solid #efefef;\n  height: 1px;\n  flex: 1;\n"])));
-var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5, templateObject_6, templateObject_7;var PInfoTable = function (_a) {
-    /********************************************************************************************************************
-     * Memo
-     * ******************************************************************************************************************/
-    var cols = _a.cols, _b = _a.spacing, spacing = _b === void 0 ? 2 : _b, columnSpacing = _a.columnSpacing, _c = _a.rowSpacing, rowSpacing = _c === void 0 ? 3 : _c, className = _a.className, style = _a.style, sx = _a.sx, labelClassName = _a.labelClassName, _d = _a.labelColor, labelColor = _d === void 0 ? 'primary' : _d, labelStyle = _a.labelStyle, labelSx = _a.labelSx, _e = _a.dividerColor, dividerColor = _e === void 0 ? 'gray' : _e, valueClassName = _a.valueClassName, valueStyle = _a.valueStyle, valueSx = _a.valueSx, ellipsis = _a.ellipsis, valueUnderline = _a.valueUnderline, info = _a.info, items = _a.items, onCopyToClipboard = _a.onCopyToClipboard;
-    var renderItems = useMemo(function () {
-        return items.filter(function (item) { return !!item && (!item.onHide || !item.onHide(info)); }).map(function (item) {
-            /** data */
-            var data = undefined;
-            if (item.name !== undefined) {
-                if (info[item.name] !== undefined) {
-                    if (info[item.name] instanceof Date) {
-                        data = dayjs(info[item.name]).format('YYYY-MM-DD HH:mm:ss');
-                    }
-                    else if (info[item.name] instanceof dayjs) {
-                        data = info[item.name].format('YYYY-MM-DD HH:mm:ss');
-                    }
-                    else {
-                        data = info[item.name];
-                    }
-                }
-            }
-            if (item.onRender) {
-                data = item.onRender(info);
-            }
-            else if (notEmpty(data)) {
-                switch (item.type) {
-                    case 'number':
-                        if (typeof data === 'string' || typeof data === 'number') {
-                            data = formatNumber(data);
-                            if (item.numberPrefix) {
-                                data = (React__default.createElement(React__default.Fragment, null,
-                                    React__default.createElement("span", { style: { opacity: 0.5, marginRight: 2 } }, item.numberPrefix),
-                                    data));
-                            }
-                            if (item.numberSuffix) {
-                                data = (React__default.createElement(React__default.Fragment, null,
-                                    data,
-                                    React__default.createElement("span", { style: { opacity: 0.5, marginLeft: 2 } }, item.numberSuffix)));
-                            }
-                        }
-                        break;
-                    case 'tel':
-                        if (typeof data === 'string') {
-                            data = formatTelNo(data);
-                        }
-                        break;
-                    case 'email':
-                        if (typeof data === 'string') {
-                            data = (React__default.createElement(React__default.Fragment, null,
-                                React__default.createElement("a", { href: "mailto:".concat(data) }, data)));
-                        }
-                        break;
-                    case 'url':
-                        if (typeof data === 'string' && data.toLowerCase().startsWith('http')) {
-                            data = (React__default.createElement(React__default.Fragment, null,
-                                React__default.createElement("a", { href: data, target: '_blank' }, data)));
-                        }
-                        break;
-                    case 'business_no':
-                        if (typeof data === 'string') {
-                            data = formatBusinessNo(data);
-                        }
-                        break;
-                    case 'personal_no':
-                        if (typeof data === 'string') {
-                            data = formatPersonalNo(data);
-                        }
-                        break;
-                    case 'date':
-                        if (typeof data === 'string' || typeof data === 'number') {
-                            data = dayjs(data, item.dateFormat).format('YYYY-MM-DD');
-                        }
-                        break;
-                    case 'datetime':
-                        if (typeof data === 'string' || typeof data === 'number') {
-                            var dt = dayjs(data, item.dateFormat);
-                            data = (React__default.createElement(React__default.Fragment, null,
-                                React__default.createElement("span", null, dt.format('YYYY-MM-DD')),
-                                item.dateTwoLine ? React__default.createElement("br", null) : ' ',
-                                React__default.createElement("span", { style: { opacity: 0.5 } }, dt.format('HH:mm:ss'))));
-                        }
-                        break;
-                    case 'date-hour':
-                        if (typeof data === 'string' || typeof data === 'number') {
-                            var dt = dayjs(data, item.dateFormat);
-                            data = (React__default.createElement(React__default.Fragment, null,
-                                React__default.createElement("span", null, dt.format('YYYY-MM-DD')),
-                                item.dateTwoLine ? React__default.createElement("br", null) : ' ',
-                                React__default.createElement("span", { style: { opacity: 0.5 } }, dt.format('HH시'))));
-                        }
-                        break;
-                    case 'date-minute':
-                        if (typeof data === 'string' || typeof data === 'number') {
-                            var dt = dayjs(data, item.dateFormat);
-                            data = (React__default.createElement(React__default.Fragment, null,
-                                React__default.createElement("span", null, dt.format('YYYY-MM-DD')),
-                                item.dateTwoLine ? React__default.createElement("br", null) : ' ',
-                                React__default.createElement("span", { style: { opacity: 0.5 } }, dt.format('HH시 MM분'))));
-                        }
-                        break;
-                }
-            }
-            if (empty(data))
-                data = item.onRenderEmpty ? item.onRenderEmpty(info) : React__default.createElement(React__default.Fragment, null, "\u00A0");
-            /** copyToClipboardText */
-            var copyToClipboardText = item.clipboardText || (typeof data === 'string' ? data : typeof data === 'number' ? data.toString() : '');
-            /** sizeProps */
-            var sizeProps = {};
-            if (typeof cols === 'number') {
-                sizeProps.xs = 12 / cols;
-            }
-            else {
-                if (cols.xs)
-                    sizeProps.xs = 12 / cols.xs;
-                if (cols.sm)
-                    sizeProps.sm = 12 / cols.sm;
-                if (cols.md)
-                    sizeProps.md = 12 / cols.md;
-                if (cols.lg)
-                    sizeProps.lg = 12 / cols.lg;
-                if (cols.xl)
-                    sizeProps.xl = 12 / cols.xl;
-            }
-            if (item.xs)
-                sizeProps.xs = item.xs;
-            if (item.sm)
-                sizeProps.sm = item.sm;
-            if (item.md)
-                sizeProps.md = item.md;
-            if (item.lg)
-                sizeProps.lg = item.lg;
-            if (item.xl)
-                sizeProps.xl = item.xl;
-            if (item.onXs)
-                sizeProps.xs = item.onXs(info);
-            if (item.onSm)
-                sizeProps.sm = item.onSm(info);
-            if (item.onMd)
-                sizeProps.md = item.onMd(info);
-            if (item.onLg)
-                sizeProps.lg = item.onLg(info);
-            if (item.onXl)
-                sizeProps.xl = item.onXl(info);
-            return { item: item, data: data, copyToClipboardText: copyToClipboardText, sizeProps: sizeProps };
-        });
-    }, [info, items, cols]);
-    var content = useMemo(function () {
-        return renderItems.map(function (_a, idx) {
-            var item = _a.item, data = _a.data, copyToClipboardText = _a.copyToClipboardText, sizeProps = _a.sizeProps;
-            var finalLabelColor = typographyColorToSxColor(item.type === 'divider' ? item.dividerColor || dividerColor : item.labelColor || labelColor);
-            var finalLabelSx = combineSx(labelSx, item.labelSx, !!finalLabelColor && { color: finalLabelColor });
-            var finalValueSx = combineSx(valueSx, item.valueSx);
-            var valueUnderlineStyle = valueUnderline
-                ? { borderBottom: '1px solid #efefef', paddingBottom: 5 }
-                : undefined;
-            return item.type === 'divider' ? (React__default.createElement(Grid, { key: idx, size: { xs: 12 } },
-                React__default.createElement(Stack, { direction: 'row', spacing: 0.5, alignItems: 'center' },
-                    item.icon && (React__default.createElement(PIcon, { sx: { color: item.dividerColor || dividerColor }, size: 'small' }, item.icon)),
-                    item.label && (React__default.createElement(Label, { className: classNames(labelClassName, item.labelClassName), style: __assign$2(__assign$2({}, item.labelStyle), labelStyle), sx: finalLabelSx }, item.label)),
-                    item.dividerLine && (React__default.createElement(React__default.Fragment, null, item.icon || item.label ? (React__default.createElement("div", { style: { flex: 1, paddingLeft: 5 } },
-                        React__default.createElement(Line, null))) : (React__default.createElement(Line, null))))))) : (React__default.createElement(Grid, { key: idx, size: sizeProps, className: item.className, style: item.style, sx: item.sx },
-                React__default.createElement(Stack, { direction: 'row', spacing: 0.5, alignItems: 'center' },
-                    item.icon && (React__default.createElement(PIcon, { sx: { color: finalLabelColor }, size: 'small' }, "CalendarMonth")),
-                    React__default.createElement(Label, { className: classNames(labelClassName, item.labelClassName), style: __assign$2(__assign$2({}, item.labelStyle), labelStyle), sx: finalLabelSx }, item.label)),
-                React__default.createElement(ValueWrap, { className: classNames(valueClassName, item.valueClassName), style: __assign$2(__assign$2(__assign$2({}, valueStyle), item.valueStyle), valueUnderlineStyle), sx: finalValueSx },
-                    item.ellipsis || ellipsis ? React__default.createElement(ValueEllipsis, null, data) : React__default.createElement(Value, null, data),
-                    item.clipboard && notEmpty(copyToClipboardText) && (React__default.createElement(ValueClipboard, null,
-                        React__default.createElement(PCopyToClipboard, { text: copyToClipboardText, onCopy: onCopyToClipboard ? function () { return onCopyToClipboard(item, copyToClipboardText); } : undefined },
-                            React__default.createElement(ClipboardIconButton, __assign$2({ size: 'small', color: 'primary' }, item.clipboardProps),
-                                React__default.createElement(PIcon, null, item.clipboardIcon || 'ContentPaste'))))))));
-        });
-    }, [
-        dividerColor,
-        ellipsis,
-        labelClassName,
-        labelColor,
-        labelStyle,
-        labelSx,
-        onCopyToClipboard,
-        renderItems,
-        valueClassName,
-        valueStyle,
-        valueSx,
-        valueUnderline,
-    ]);
-    /********************************************************************************************************************
-     * Render
-     * ******************************************************************************************************************/
-    return (React__default.createElement(Grid, { container: true, spacing: spacing, columnSpacing: columnSpacing, rowSpacing: rowSpacing, className: classNames('PInfoTable', className), style: style, sx: sx }, content));
-};export{PInfoTable,PSearchTable,PTable,PTableButton$1 as PTableButton,PTableMenuButton};
+});export{PInfoTable,PSearchTable,PTable,PTableBodyCell,PTableBodyRow,PTableButton$1 as PTableButton,PTableCommonCell,PTableFooterCell,PTableHeadCell,PTableMenuButton,PTablePagination,PTableSortableBody,PTableSortableBodyBlock,PTableTopHead};