@pdg/react-table 1.0.69 → 1.0.71

package/dist/@util/companyNo.d.ts

@@ -0,0 +1,6 @@
+/********************************************************************************************************************
+ * 사업자등록번호 하이픈 추가
+ * @param companyNo 사업자등록번호
+ * @returns 하이픈이 추가된 사업자등록번호
+ * ******************************************************************************************************************/
+export declare function companyNoAutoDash(companyNo: string): string;

package/dist/@util/index.d.ts

@@ -5,3 +5,5 @@ export * from './compare';
 export * from './number';
 export * from './table';
 export * from './tel';
+export * from './companyNo';
+export * from './personalNo';

package/dist/@util/personalNo.d.ts

@@ -0,0 +1,6 @@
+/********************************************************************************************************************
+ * 주민등록번호에 하이픈 추가하는 함수
+ * @param personalNo 주민등록번호
+ * @returns 하이픈 추가된 주민등록번호
+ * ******************************************************************************************************************/
+export declare function personalNoAutoDash(personalNo: string): string;

package/dist/InfoTable/InfoTable.types.d.ts

@@ -4,11 +4,17 @@ import { CommonSxProps } from '../@types';
 export interface InfoTableInfo {
     [key: string]: any;
 }
+export type InfoTableItemType = 'text' | 'number' | 'tel' | 'url' | 'email' | 'date' | 'datetime' | 'date-hour' | 'date-minute';
 export interface InfoTableItem<T = InfoTableInfo> {
     label: ReactNode;
     name?: keyof T;
+    type?: InfoTableItemType;
     ellipsis?: boolean;
     className?: string;
+    dateFormat?: string;
+    dateTwoLine?: boolean;
+    numberPrefix?: string;
+    numberSuffix?: string;
     style?: CommonSxProps['style'];
     sx?: BoxProps['sx'];
     labelClassName?: string;

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

@@ -91,7 +91,12 @@ export interface TableProps<T = TableItem> extends CommonSxProps {
     };
     sortable?: boolean;
     onClick?(item: T, index: number): void;
+    onGetBodyRowClassName?(item: T, index: number): CommonSxProps['className'] | undefined;
+    onGetBodyRowStyle?(item: T, index: number): CommonSxProps['style'] | undefined;
     onGetBodyRowSx?(item: T, index: number): CommonSxProps['sx'] | undefined;
+    onGetBodyColumnClassName?(column: TableColumn<T>, item: T, index: number): CommonSxProps['className'] | undefined;
+    onGetBodyColumnStyle?(column: TableColumn<T>, item: T, index: number): CommonSxProps['style'] | undefined;
+    onGetBodyColumnSx?(column: TableColumn<T>, item: T, index: number): CommonSxProps['sx'] | undefined;
     onPageChange?(page: number): void;
     onSortChange?(items: T[]): void;
     onCheckChange?(columnId: string, items: T[]): void;

package/dist/TableBodyCell/TableBodyCell.types.d.ts

@@ -1,9 +1,13 @@
 import { TableColumn, TableItem, TableProps } from '../Table/Table.types';
+import { CommonSxProps } from '../@types';
 export interface TableBodyCellCommands {
     setChecked(checked: boolean): void;
     setCheckDisabled(disabled: boolean): void;
 }
 export interface TableBodyCellProps {
+    className?: CommonSxProps['className'];
+    style?: CommonSxProps['style'];
+    sx?: CommonSxProps['sx'];
     index: number;
     item: TableItem;
     column: TableColumn;

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

@@ -1,15 +1,19 @@
 import { TableCellProps, TableRowProps } from '@mui/material';
 import { TableColumn, TableItem, TableProps } from '../Table';
 import { TableBodyCellProps } from '../TableBodyCell';
+import { CommonSxProps } from '../@types';
 export interface TableBodyRowProps extends Omit<TableRowProps, 'id' | 'onClick'> {
     id: string | number;
     index: number;
     defaultAlign?: TableCellProps['align'];
     defaultEllipsis?: boolean;
     sortable?: boolean;
-    columns: TableColumn<TableItem>[];
+    columns: TableColumn[];
     item: TableItem;
     onClick: TableProps['onClick'];
     onCheckChange: TableBodyCellProps['onCheckChange'];
+    onGetColumnClassName?(column: TableColumn, item: TableItem, index: number): CommonSxProps['className'] | undefined;
+    onGetColumnStyle?(column: TableColumn, item: TableItem, index: number): CommonSxProps['style'] | undefined;
+    onGetColumnSx?(column: TableColumn, item: TableItem, index: number): CommonSxProps['sx'] | undefined;
 }
 export declare const TableBodyRowDefaultProps: {};

package/dist/index.esm.js

@@ -2953,7 +2953,7 @@ var TableCommonCell = function (_a) {
 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) {
     // Use ---------------------------------------------------------------------------------------------------------------
-    var item = _a.item, index = _a.index, column = _a.column, defaultAlign = _a.defaultAlign, defaultEllipsis = _a.defaultEllipsis, onClick = _a.onClick, onCheckChange = _a.onCheckChange;
+    var className = _a.className, style = _a.style, sx = _a.sx, item = _a.item, index = _a.index, column = _a.column, defaultAlign = _a.defaultAlign, defaultEllipsis = _a.defaultEllipsis, onClick = _a.onClick, onCheckChange = _a.onCheckChange;
     var _b = useTableState(), menuOpen = _b.menuOpen, setItemColumnChecked = _b.setItemColumnChecked, setItemColumnCheckDisabled = _b.setItemColumnCheckDisabled, setItemColumnCommands = _b.setItemColumnCommands;
     // State -------------------------------------------------------------------------------------------------------------
     var _c = useState(false), checked = _c[0], setChecked = _c[1];
@@ -3118,7 +3118,7 @@ var TableBodyCell = function (_a) {
         }
     }, [column, onClick]);
     // Render ----------------------------------------------------------------------------------------------------------
-    return (React__default.createElement(TableCommonCell, { type: 'body', className: 'TableBodyCell', column: column, defaultAlign: defaultAlign, defaultEllipsis: defaultEllipsis, item: item, index: index, onClick: column.onClick || onClick ? handleClick : undefined }, !isHidden && data));
+    return (React__default.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) {
     var theme = _a.theme;
@@ -3134,9 +3134,9 @@ var templateObject_1$2;var StyledBodyRow = styled(TableRow)(function (_a) {
 var TableBodyRow = function (_a) {
     var className = _a.className, style = _a.style, 
     //--------------------------------------------------------------------------------------------------------------------
-    id = _a.id, index = _a.index, defaultAlign = _a.defaultAlign, defaultEllipsis = _a.defaultEllipsis, sortable = _a.sortable, columns = _a.columns, item = _a.item, onClick = _a.onClick, onCheckChange = _a.onCheckChange, 
+    id = _a.id, index = _a.index, defaultAlign = _a.defaultAlign, defaultEllipsis = _a.defaultEllipsis, sortable = _a.sortable, columns = _a.columns, item = _a.item, onClick = _a.onClick, onCheckChange = _a.onCheckChange, onGetColumnClassName = _a.onGetColumnClassName, onGetColumnStyle = _a.onGetColumnStyle, onGetColumnSx = _a.onGetColumnSx, 
     // -------------------------------------------------------------------------------------------------------------------
-    props = __rest$2(_a, ["className", "style", "id", "index", "defaultAlign", "defaultEllipsis", "sortable", "columns", "item", "onClick", "onCheckChange"]);
+    props = __rest$2(_a, ["className", "style", "id", "index", "defaultAlign", "defaultEllipsis", "sortable", "columns", "item", "onClick", "onCheckChange", "onGetColumnClassName", "onGetColumnStyle", "onGetColumnSx"]);
     var _b = useSortable({ id: id }), attributes = _b.attributes, listeners = _b.listeners, setNodeRef = _b.setNodeRef, transform = _b.transform, transition = _b.transition;
     var finalStyle = useMemo(function () {
         return sortable
@@ -3146,7 +3146,7 @@ var TableBodyRow = function (_a) {
         return sortable
             ? __assign$3(__assign$3({ ref: setNodeRef }, attributes), listeners) : {};
     }, [attributes, listeners, setNodeRef, sortable]);
-    return (React__default.createElement(StyledBodyRow, __assign$3({ className: classNames('TableBodyRow', className), style: finalStyle }, props, sortableProps), columns.map(function (column, columnIdx) { return (React__default.createElement(TableBodyCell, { key: columnIdx, index: index, item: item, defaultAlign: defaultAlign, defaultEllipsis: defaultEllipsis, column: column, onClick: onClick, onCheckChange: onCheckChange })); })));
+    return (React__default.createElement(StyledBodyRow, __assign$3({ className: classNames('TableBodyRow', className), style: finalStyle }, props, sortableProps), columns.map(function (column, columnIdx) { return (React__default.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 })); })));
 };
 TableBodyRow.displayName = 'TableBodyRow';
 TableBodyRow.defaultProps = TableBodyRowDefaultProps;var TableFooterCell = function (_a) {
@@ -3470,7 +3470,7 @@ var templateObject_1$1;function columnFilter(v) {
 var _columnId = 0;
 var Table = React__default.forwardRef(function (_a, ref) {
     // Ref ---------------------------------------------------------------------------------------------------------------
-    var caption = _a.caption, topHeadRows = _a.topHeadRows, initColumns = _a.columns, initItems = _a.items, initPaging = _a.paging, pagingAlign = _a.pagingAlign, defaultAlign = _a.defaultAlign, defaultEllipsis = _a.defaultEllipsis, initStickyHeader = _a.stickyHeader, height = _a.height, minHeight = _a.minHeight, maxHeight = _a.maxHeight, fullHeight = _a.fullHeight, showOddColor = _a.showOddColor, showEvenColor = _a.showEvenColor, cellPadding = _a.cellPadding, footer = _a.footer, noData = _a.noData, pagination = _a.pagination, sortable = _a.sortable, onClick = _a.onClick, onGetBodyRowSx = _a.onGetBodyRowSx, onPageChange = _a.onPageChange, onSortChange = _a.onSortChange, onCheckChange = _a.onCheckChange, 
+    var caption = _a.caption, topHeadRows = _a.topHeadRows, initColumns = _a.columns, initItems = _a.items, initPaging = _a.paging, pagingAlign = _a.pagingAlign, defaultAlign = _a.defaultAlign, defaultEllipsis = _a.defaultEllipsis, initStickyHeader = _a.stickyHeader, height = _a.height, minHeight = _a.minHeight, maxHeight = _a.maxHeight, fullHeight = _a.fullHeight, showOddColor = _a.showOddColor, showEvenColor = _a.showEvenColor, cellPadding = _a.cellPadding, 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, 
     // ---------------------------------------------------------------------------------------------------------------
     className = _a.className, initStyle = _a.style, sx = _a.sx;
     var localHeaderDataRef = useRef({});
@@ -3930,7 +3930,7 @@ var Table = React__default.forwardRef(function (_a, ref) {
         return finalColumns && (React__default.createElement(TableTopHead, { caption: caption, rows: topHeadRows, columns: finalColumns, defaultAlign: defaultAlign, onCheckChange: handleHeadCheckChange }));
     }, [caption, defaultAlign, finalColumns, handleHeadCheckChange, topHeadRows]);
     var tableBody = useMemo(function () {
-        return finalColumns && (React__default.createElement(TableBody, null, sortableItems ? (sortableItems.length > 0 ? (React__default.createElement(SortableContext, { items: sortableItems, strategy: verticalListSortingStrategy }, sortableItems.map(function (item, idx) { return (React__default.createElement(TableBodyRow, { key: item.id, className: classNames(!!showOddColor && 'odd-color', !!showEvenColor && 'even-color'), hover: true, sx: onGetBodyRowSx ? onGetBodyRowSx(item, idx) : undefined, id: item.id, index: idx, defaultAlign: defaultAlign, defaultEllipsis: defaultEllipsis, sortable: sortable, columns: finalColumns, item: item, onClick: onClick, onCheckChange: handleBodyCheckChange })); }))) : (React__default.createElement(StyledBodyRow$1, null,
+        return finalColumns && (React__default.createElement(TableBody, null, sortableItems ? (sortableItems.length > 0 ? (React__default.createElement(SortableContext, { items: sortableItems, strategy: verticalListSortingStrategy }, sortableItems.map(function (item, idx) { return (React__default.createElement(TableBodyRow, { key: item.id, className: classNames(!!showOddColor && 'odd-color', !!showEvenColor && 'even-color', 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__default.createElement(StyledBodyRow$1, null,
             React__default.createElement(TableCell, { colSpan: finalColumns.length, style: { flex: 1 } }, noData ? (noData) : (React__default.createElement(StyledNoDataDiv, null,
                 React__default.createElement("div", null,
                     React__default.createElement(Icon, null, "error")),
@@ -3942,6 +3942,11 @@ var Table = React__default.forwardRef(function (_a, ref) {
         handleBodyCheckChange,
         noData,
         onClick,
+        onGetBodyColumnClassName,
+        onGetBodyColumnStyle,
+        onGetBodyColumnSx,
+        onGetBodyRowClassName,
+        onGetBodyRowStyle,
         onGetBodyRowSx,
         showEvenColor,
         showOddColor,
@@ -4878,9 +4883,91 @@ var lib = CopyToClipboard;var InfoTable = function (_a) {
                 finalSizeProps.lg = item.lg;
             if (item.xl)
                 finalSizeProps.xl = item.xl;
-            var data = item.name !== undefined ? info[item.name] : undefined;
-            if (item.onRender)
+            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 = numberWithThousandSeparator(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 = getTelAutoDash(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 '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");
             var copyToClipboardText_1 = item.clipboardText || (typeof data === 'string' ? data : typeof data === 'number' ? data.toString() : '');