@pdg/react-table 1.0.11 → 1.0.13

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

@@ -55,6 +55,7 @@ export interface TableProps<T = TableItem> extends CommonSxProps {
     height?: string | number;
     maxHeight?: string | number;
     minHeight?: string | number;
+    fullHeight?: boolean;
     showOddColor?: boolean;
     showEvenColor?: boolean;
     cellPadding?: string | number;

package/dist/index.esm.js

@@ -8558,9 +8558,11 @@ var templateObject_1;var StyledBodyRow = styled(TableRow)(function (_a) {
     });
 });
 var TableBodyRow = function (_a) {
-    var style = _a.style, 
+    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, props = __rest$1(_a, ["style", "id", "index", "defaultAlign", "defaultEllipsis", "sortable", "columns", "item", "onClick"]);
+    id = _a.id, index = _a.index, defaultAlign = _a.defaultAlign, defaultEllipsis = _a.defaultEllipsis, sortable = _a.sortable, columns = _a.columns, item = _a.item, onClick = _a.onClick, 
+    // -------------------------------------------------------------------------------------------------------------------
+    props = __rest$1(_a, ["className", "style", "id", "index", "defaultAlign", "defaultEllipsis", "sortable", "columns", "item", "onClick"]);
     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
@@ -8570,7 +8572,7 @@ var TableBodyRow = function (_a) {
         return sortable
             ? __assign$1(__assign$1({ ref: setNodeRef }, attributes), listeners) : {};
     }, [attributes, listeners, setNodeRef, sortable]);
-    return (React__default.createElement(StyledBodyRow, __assign$1({ style: finalStyle }, props, sortableProps), columns.map(function (column, columnIdx) { return (React__default.createElement(TableBodyCell, { key: columnIdx, index: index, item: item, defaultAlign: defaultAlign, defaultEllipsis: defaultEllipsis, column: column, onClick: onClick })); })));
+    return (React__default.createElement(StyledBodyRow, __assign$1({ 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 })); })));
 };
 TableBodyRow.displayName = 'TableBodyRow';
 TableBodyRow.defaultProps = TableBodyRowDefaultProps;var TableHeadCell = function (_a) {
@@ -8600,7 +8602,7 @@ TableBodyRow.defaultProps = TableBodyRowDefaultProps;var TableHeadCell = functio
 };var TablePagination = function (_a) {
     var className = _a.className, style = _a.style, sx = _a.sx, paging = _a.paging, align = _a.align, onChange = _a.onChange;
     return (React__default.createElement(Stack, { alignItems: align },
-        React__default.createElement(Pagination, { count: paging.last_page, page: paging.current_page, color: 'primary', className: className, style: style, sx: sx, onChange: function (e, page) {
+        React__default.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);
             } })));
@@ -8697,7 +8699,9 @@ styleInject(css_248z);function columnFilter(v) {
 }
 var Table = React__default.forwardRef(function (_a, ref) {
     // sortable --------------------------------------------------------------------------------------------------------
-    var initColumns = _a.columns, initItems = _a.items, initPaging = _a.paging, pagingAlign = _a.pagingAlign, defaultAlign = _a.defaultAlign, defaultEllipsis = _a.defaultEllipsis, stickyHeader = _a.stickyHeader, height = _a.height, minHeight = _a.minHeight, maxHeight = _a.maxHeight, showOddColor = _a.showOddColor, showEvenColor = _a.showEvenColor, cellPadding = _a.cellPadding, footer = _a.footer, noData = _a.noData, pagination = _a.pagination, sortable = _a.sortable, onClick = _a.onClick, onGetBodyRowSx = _a.onGetBodyRowSx, onPageChange = _a.onPageChange, onSortChange = _a.onSortChange;
+    var initColumns = _a.columns, initItems = _a.items, initPaging = _a.paging, pagingAlign = _a.pagingAlign, defaultAlign = _a.defaultAlign, defaultEllipsis = _a.defaultEllipsis, stickyHeader = _a.stickyHeader, height = _a.height, minHeight = _a.minHeight, maxHeight = _a.maxHeight, 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, 
+    // ---------------------------------------------------------------------------------------------------------------
+    className = _a.className, initStyle = _a.style, sx = _a.sx;
     var sensors = useSensors(useSensor(MouseSensor, {
         // Require the mouse to move by 10 pixels before activating
         activationConstraint: {
@@ -8712,26 +8716,40 @@ var Table = React__default.forwardRef(function (_a, ref) {
     }), useSensor(KeyboardSensor, {
         coordinateGetter: sortableKeyboardCoordinates,
     }));
+    // State - containerHeight -------------------------------------------------------------------------------------------
+    var _b = useState(), containerHeight = _b[0], setContainerHeight = _b[1];
+    var containerHeightDetector = useResizeDetector({
+        handleHeight: true,
+        handleWidth: false,
+        onResize: function () {
+            if (containerHeightDetector.current) {
+                setContainerHeight(containerHeightDetector.current.getBoundingClientRect().height);
+            }
+            else {
+                setContainerHeight(undefined);
+            }
+        },
+    }).ref;
     // State - footerHeight --------------------------------------------------------------------------------------------
-    var _b = useState(), footerHeight = _b[0], setFooterHeight = _b[1];
-    var footerHeightResizeDetector = useResizeDetector({
+    var _c = useState(), pagingHeight = _c[0], setPagingHeight = _c[1];
+    var pagingHeightResizeDetector = useResizeDetector({
         handleHeight: true,
         handleWidth: false,
         onResize: function () {
-            if (footerHeightResizeDetector.current) {
-                setFooterHeight(footerHeightResizeDetector.current.getBoundingClientRect().height);
+            if (pagingHeightResizeDetector.current) {
+                setPagingHeight(pagingHeightResizeDetector.current.getBoundingClientRect().height);
             }
             else {
-                setFooterHeight(undefined);
+                setPagingHeight(undefined);
             }
         },
     }).ref;
     // State -----------------------------------------------------------------------------------------------------------
-    var _c = useAutoUpdateLayoutState(initColumns), columns = _c[0], setColumns = _c[1];
-    var _d = useState(), finalColumns = _d[0], setFinalColumns = _d[1];
-    var _e = useAutoUpdateLayoutState(initItems), items = _e[0], setItems = _e[1];
-    var _f = useState(), sortableItems = _f[0], setSortableItems = _f[1];
-    var _g = useAutoUpdateLayoutState(initPaging), paging = _g[0], setPaging = _g[1];
+    var _d = useAutoUpdateLayoutState(initColumns), columns = _d[0], setColumns = _d[1];
+    var _e = useState(), finalColumns = _e[0], setFinalColumns = _e[1];
+    var _f = useAutoUpdateLayoutState(initItems), items = _f[0], setItems = _f[1];
+    var _g = useState(), sortableItems = _g[0], setSortableItems = _g[1];
+    var _h = useAutoUpdateLayoutState(initPaging), paging = _h[0], setPaging = _h[1];
     // Memo --------------------------------------------------------------------------------------------------------------
     var tableSx = useMemo(function () {
         var sx = {
@@ -8822,38 +8840,63 @@ var Table = React__default.forwardRef(function (_a, ref) {
             });
         }
     }, [onSortChange]);
+    // Memo --------------------------------------------------------------------------------------------------------------
+    var style = useMemo(function () {
+        if (fullHeight) {
+            return __assign$1(__assign$1({ width: '100%' }, initStyle), { flex: 1, justifyContent: 'flex-end', height: '100%', display: 'flex', flexDirection: 'column', position: 'relative' });
+        }
+        else {
+            return __assign$1({ width: '100%' }, initStyle);
+        }
+    }, [initStyle, fullHeight]);
+    var simpleBarStyle = useMemo(function () {
+        if (fullHeight) {
+            return {
+                height: (containerHeight || 0) - (pagingHeight || 0),
+                flex: 1,
+                position: 'absolute',
+                left: 0,
+                right: 0,
+                marginBottom: pagingHeight,
+            };
+        }
+        else {
+            return { height: height, minHeight: minHeight, maxHeight: maxHeight };
+        }
+    }, [containerHeight, fullHeight, height, maxHeight, minHeight, pagingHeight]);
+    var pagingStyle = useMemo(function () {
+        if (fullHeight) {
+            return { position: 'sticky', padding: '13px 0' };
+        }
+        else {
+            return { padding: '13px 0' };
+        }
+    }, [fullHeight]);
     // Render ----------------------------------------------------------------------------------------------------------
-    return finalColumns ? (React__default.createElement(Paper, { className: 'ReactMuiTable', variant: 'outlined', style: { width: '100%' } },
-        React__default.createElement(SimpleBar, { style: { height: height, minHeight: minHeight, maxHeight: maxHeight } },
+    return finalColumns ? (React__default.createElement(Paper, { ref: fullHeight ? containerHeightDetector : undefined, className: classNames('Table', className), variant: 'outlined', style: style, sx: sx },
+        React__default.createElement(SimpleBar, { style: simpleBarStyle },
             React__default.createElement(DndContext, { sensors: sensors, collisionDetection: closestCenter, onDragEnd: handleDragEnd },
                 React__default.createElement(Table$1, { stickyHeader: stickyHeader, sx: tableSx },
                     React__default.createElement(TableHead, null,
                         React__default.createElement(TableRow, null, finalColumns.map(function (column, idx) { return (React__default.createElement(TableHeadCell, { key: idx, column: column, defaultAlign: defaultAlign })); }))),
-                    React__default.createElement(TableBody, { style: { paddingBottom: footerHeight || 65 } }, sortableItems ? (sortableItems.length > 0 ? (React__default.createElement(SortableContext, { items: sortableItems, strategy: verticalListSortingStrategy }, sortableItems.map(function (item, idx) { return (React__default.createElement(TableBodyRow, { key: item.id, className: classNames(!!showOddColor && 'odd-color', !!showEvenColor && 'even-color'), hover: true, sx: onGetBodyRowSx ? onGetBodyRowSx(item, idx) : undefined, id: item.id, index: idx, defaultAlign: defaultAlign, defaultEllipsis: defaultEllipsis, sortable: sortable, columns: finalColumns, item: item, onClick: onClick })); }))) : (React__default.createElement(StyledBodyRow$1, null,
+                    React__default.createElement(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 })); }))) : (React__default.createElement(StyledBodyRow$1, null,
                         React__default.createElement(TableCell, { colSpan: finalColumns.length }, noData ? (noData) : (React__default.createElement(StyledNoDataDiv, null,
                             React__default.createElement("div", null,
                                 React__default.createElement(Icon, null, "error")),
                             React__default.createElement("div", null, "\uAC80\uC0C9\uB41C \uC815\uBCF4\uAC00 \uC5C6\uC2B5\uB2C8\uB2E4."))))))) : undefined),
-                    paging && (React__default.createElement(TableFooter, { ref: footerHeightResizeDetector, sx: {
-                            left: 0,
-                            bottom: 0,
-                            zIndex: 2,
-                            position: 'sticky',
-                            backgroundColor: '#fff',
-                        } },
-                        React__default.createElement(TableRow, null,
-                            React__default.createElement(TableCell, { colSpan: finalColumns.length, style: { borderBottom: 0, borderTop: '1px solid rgba(224, 224, 224, 1)' } },
-                                React__default.createElement(Stack, { alignItems: pagingAlign },
-                                    React__default.createElement(TablePagination, { className: pagination === null || pagination === void 0 ? void 0 : pagination.className, style: pagination === null || pagination === void 0 ? void 0 : pagination.style, sx: pagination === null || pagination === void 0 ? void 0 : pagination.sx, paging: paging, align: pagingAlign, onChange: onPageChange })))))),
                     footer && (React__default.createElement(TableFooter, null,
-                        React__default.createElement(TableRow, null, finalColumns.map(function (column, idx) { return (React__default.createElement(TableFooterCell, { key: idx, column: column, defaultAlign: defaultAlign })); }))))))))) : null;
+                        React__default.createElement(TableRow, null, finalColumns.map(function (column, idx) { return (React__default.createElement(TableFooterCell, { key: idx, column: column, defaultAlign: defaultAlign })); }))))))),
+        paging && (React__default.createElement(Stack, { ref: fullHeight ? pagingHeightResizeDetector : undefined, alignItems: pagingAlign, style: pagingStyle },
+            React__default.createElement(TablePagination, { className: pagination === null || pagination === void 0 ? void 0 : pagination.className, style: pagination === null || pagination === void 0 ? void 0 : pagination.style, sx: pagination === null || pagination === void 0 ? void 0 : pagination.sx, paging: paging, align: pagingAlign, onChange: onPageChange }))))) : null;
 });
 Table.displayName = 'Table';
 Table.defaultProps = TableDefaultProps;var SearchTableDefaultProps = {};var SearchTable = React__default.forwardRef(function (_a, ref) {
-    var hash = _a.hash, search = _a.search, table = _a.table, betweenSearchTableComponent = _a.betweenSearchTableComponent, onGetData = _a.onGetData, onRequestHashChange = _a.onRequestHashChange;
+    var color = _a.color, hash = _a.hash, search = _a.search, table = _a.table, betweenSearchTableComponent = _a.betweenSearchTableComponent, onGetData = _a.onGetData, onRequestHashChange = _a.onRequestHashChange, 
+    // ---------------------------------------------------------------------------------------------------------------
+    className = _a.className, style = _a.style, sx = _a.sx;
     var searchRef = useRef();
     var tableRef = useRef();
-    //--------------------------------------------------------------------------------------------------------------------
+    //------------------------------------------------------------------------------------------------------------------
     var getSearchInfo = useCallback(function (search) {
         var searchInfo = {};
         if (search) {
@@ -9132,9 +9175,9 @@ Table.defaultProps = TableDefaultProps;var SearchTableDefaultProps = {};var Sear
         }
     }, [searchRef, hash, hashChange, getData, isFirstSearchSubmit]);
     //------------------------------------------------------------------------------------------------------------------
-    return (React__default.createElement(Grid, { container: true, direction: 'column', spacing: 1 },
+    return (React__default.createElement(Grid, { container: true, direction: 'column', spacing: 1, className: classNames('SearchTable', className), style: style, sx: sx },
         React__default.createElement(Grid, { item: true, sx: { display: searchInfo.searchGroups ? undefined : 'none' } },
-            React__default.createElement(Search, __assign$1({}, searchInfo.props, { ref: function (commands) {
+            React__default.createElement(Search, __assign$1({ color: color }, searchInfo.props, { ref: function (commands) {
                     if (searchInfo.ref) {
                         if (typeof searchInfo.ref === 'function') {
                             searchInfo.ref(commands);