@pdg/react-table 1.0.17 → 1.0.19

package/dist/index.js

@@ -8228,9 +8228,6 @@ function useResizeDetector(props) {
 };var StyledBodyRow$1 = material.styled(material.TableRow)(function (_a) {
     var theme = _a.theme;
     return ({
-        '&:last-child > .MuiTableCell-root': {
-            borderBottom: 0,
-        },
         '&.odd-color:nth-of-type(odd):not(:hover)': {
             backgroundColor: material.lighten(theme.palette.action.hover, 0.4),
         },
@@ -8546,9 +8543,6 @@ var TableBodyCell = function (_a) {
 var templateObject_1;var StyledBodyRow = material.styled(material.TableRow)(function (_a) {
     var theme = _a.theme;
     return ({
-        '&:last-child > .MuiTableCell-root': {
-            borderBottom: 0,
-        },
         '&.odd-color:nth-of-type(odd):not(:hover)': {
             backgroundColor: material.lighten(theme.palette.action.hover, 0.4),
         },
@@ -8598,7 +8592,7 @@ TableBodyRow.defaultProps = TableBodyRowDefaultProps;var TableHeadCell = functio
             return (_c = column.footer) === null || _c === void 0 ? void 0 : _c.value;
         }
     }, [column]);
-    return (React__default["default"].createElement(TableCommonCell, { type: 'head', className: 'TableFooterCell', column: column, defaultAlign: defaultAlign, style: { borderTop: '1px solid rgba(224, 224, 224, 1)' } }, data));
+    return (React__default["default"].createElement(TableCommonCell, { type: 'head', className: 'TableFooterCell', column: column, defaultAlign: defaultAlign }, data));
 };var TablePagination = function (_a) {
     var className = _a.className, style = _a.style, sx = _a.sx, paging = _a.paging, align = _a.align, onChange = _a.onChange;
     return (React__default["default"].createElement(material.Stack, { alignItems: align },
@@ -8841,6 +8835,8 @@ var Table = React__default["default"].forwardRef(function (_a, ref) {
         }
     }, [onSortChange]);
     // Memo --------------------------------------------------------------------------------------------------------------
+    var isNoData = React.useMemo(function () { return !!sortableItems && sortableItems.length <= 0; }, [sortableItems]);
+    var finalPagingHeight = React.useMemo(function () { return (paging && paging.total > 0 ? pagingHeight || 0 : 0); }, [paging, pagingHeight]);
     var style = React.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' });
@@ -8850,7 +8846,6 @@ var Table = React__default["default"].forwardRef(function (_a, ref) {
         }
     }, [initStyle, fullHeight]);
     var simpleBarStyle = React.useMemo(function () {
-        var finalPagingHeight = paging && paging.total > 0 ? pagingHeight : undefined;
         if (fullHeight) {
             return {
                 height: (containerHeight || 0) - (finalPagingHeight || 0) - 2,
@@ -8865,7 +8860,12 @@ var Table = React__default["default"].forwardRef(function (_a, ref) {
         else {
             return { height: height, minHeight: minHeight, maxHeight: maxHeight, marginBottom: -1 };
         }
-    }, [paging, containerHeight, fullHeight, height, maxHeight, minHeight, pagingHeight]);
+    }, [fullHeight, containerHeight, finalPagingHeight, height, minHeight, maxHeight]);
+    var tableStyle = React.useMemo(function () {
+        if (fullHeight && isNoData) {
+            return { flex: 1, height: (containerHeight || 0) - finalPagingHeight - 2 };
+        }
+    }, [fullHeight, isNoData, containerHeight, finalPagingHeight]);
     var pagingStyle = React.useMemo(function () {
         var style = { padding: '13px 0', borderTop: '1px solid rgba(224, 224, 224, 1)' };
         if (fullHeight) {
@@ -8877,15 +8877,15 @@ var Table = React__default["default"].forwardRef(function (_a, ref) {
     return finalColumns ? (React__default["default"].createElement(material.Paper, { ref: fullHeight ? containerHeightDetector : undefined, className: classNames('Table', className), variant: 'outlined', style: style, sx: sx },
         React__default["default"].createElement(SimpleBar, { style: simpleBarStyle },
             React__default["default"].createElement(core.DndContext, { sensors: sensors, collisionDetection: core.closestCenter, onDragEnd: handleDragEnd },
-                React__default["default"].createElement(material.Table, { stickyHeader: stickyHeader, sx: tableSx },
+                React__default["default"].createElement(material.Table, { stickyHeader: !isNoData && stickyHeader, sx: tableSx, style: tableStyle },
                     React__default["default"].createElement(material.TableHead, null,
                         React__default["default"].createElement(material.TableRow, null, finalColumns.map(function (column, idx) { return (React__default["default"].createElement(TableHeadCell, { key: idx, column: column, defaultAlign: defaultAlign })); }))),
                     React__default["default"].createElement(material.TableBody, null, sortableItems ? (sortableItems.length > 0 ? (React__default["default"].createElement(sortable.SortableContext, { items: sortableItems, strategy: sortable.verticalListSortingStrategy }, sortableItems.map(function (item, idx) { return (React__default["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$1, columns: finalColumns, item: item, onClick: onClick })); }))) : (React__default["default"].createElement(StyledBodyRow$1, null,
-                        React__default["default"].createElement(material.TableCell, { colSpan: finalColumns.length }, noData ? (noData) : (React__default["default"].createElement(StyledNoDataDiv, null,
+                        React__default["default"].createElement(material.TableCell, { colSpan: finalColumns.length, style: { flex: 1 } }, noData ? (noData) : (React__default["default"].createElement(StyledNoDataDiv, null,
                             React__default["default"].createElement("div", null,
                                 React__default["default"].createElement(material.Icon, null, "error")),
                             React__default["default"].createElement("div", null, "\uAC80\uC0C9\uB41C \uC815\uBCF4\uAC00 \uC5C6\uC2B5\uB2C8\uB2E4."))))))) : undefined),
-                    footer && (React__default["default"].createElement(material.TableFooter, null,
+                    !isNoData && footer && (React__default["default"].createElement(material.TableFooter, null,
                         React__default["default"].createElement(material.TableRow, null, finalColumns.map(function (column, idx) { return (React__default["default"].createElement(TableFooterCell, { key: idx, column: column, defaultAlign: defaultAlign })); }))))))),
         paging && paging.total > 0 && (React__default["default"].createElement(material.Stack, { ref: fullHeight ? pagingHeightResizeDetector : undefined, alignItems: pagingAlign, style: pagingStyle },
             React__default["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;