@symply.io/basic-components 1.1.2-beta.11 → 1.1.2-beta.13

package/DataTable/TableBodyRow.js

@@ -10,7 +10,7 @@ var __assign = (this && this.__assign) || function () {
     return __assign.apply(this, arguments);
 };
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { cloneElement, useState } from "react";
+import { cloneElement, useState, useMemo } from "react";
 import TableRow from "@mui/material/TableRow";
 import TableCell from "@mui/material/TableCell";
 import useMediaQuery from "@mui/material/useMediaQuery";
@@ -20,11 +20,17 @@ function TableBodyRow(props) {
     var _a = useState(), rowEl = _a[0], setRowEl = _a[1];
     var theme = useTheme();
     var isUpMd = useMediaQuery(theme.breakpoints.up("md"));
-    var fixedLeftCols = isUpMd ? columns.filter(function (c) { return c.fixable === "left"; }) : [];
-    var fixedRightCols = isUpMd
-        ? columns.filter(function (c) { return c.fixable === "right"; })
-        : [];
-    var dynamicCols = isUpMd ? columns.filter(function (c) { return !c.fixable; }) : columns;
+    var _b = useMemo(function () {
+        if (isUpMd) {
+            var left = columns.filter(function (c) { return c.fixable === "left"; });
+            var right = columns.filter(function (c) { return c.fixable === "right"; });
+            var dynamic = columns.filter(function (c) { return !c.fixable; });
+            return [left, dynamic, right];
+        }
+        else {
+            return [[], columns, []];
+        }
+    }, [isUpMd, columns]), fixedLeftCols = _b[0], dynamicCols = _b[1], fixedRightCols = _b[2];
     return (_jsxs(TableRow, __assign({ sx: {
             "&:hover": {
                 cursor: onRowClick ? "pointer" : "default",

package/DataTable/TableFooter.js

@@ -10,23 +10,27 @@ var __assign = (this && this.__assign) || function () {
     return __assign.apply(this, arguments);
 };
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { cloneElement } from "react";
+import { cloneElement, useMemo } from "react";
 import TableRow from "@mui/material/TableRow";
 import Footer from "@mui/material/TableFooter";
 import TableCell from "@mui/material/TableCell";
 import useMediaQuery from "@mui/material/useMediaQuery";
 import useTheme from "@mui/material/styles/useTheme";
 function TableFooter(props) {
-    var footers = props.footers, leftShadowVisible = props.leftShadowVisible, rightShadowVisible = props.rightShadowVisible;
+    var footers = props.footers, noData = props.noData, leftShadowVisible = props.leftShadowVisible, rightShadowVisible = props.rightShadowVisible;
     var theme = useTheme();
     var isUpMd = useMediaQuery(theme.breakpoints.up("md"));
-    var fixedLeftFooters = isUpMd
-        ? footers.filter(function (f) { return f.fixable === "left"; })
-        : [];
-    var fixedRightFooters = isUpMd
-        ? footers.filter(function (f) { return f.fixable === "right"; })
-        : [];
-    var dynamicFooters = isUpMd ? footers.filter(function (f) { return !f.fixable; }) : footers;
+    var _a = useMemo(function () {
+        if (isUpMd && !noData) {
+            var left = footers.filter(function (f) { return f.fixable === "left"; });
+            var right = footers.filter(function (f) { return f.fixable === "right"; });
+            var dynamic = footers.filter(function (f) { return !f.fixable; });
+            return [left, dynamic, right];
+        }
+        else {
+            return [[], footers, []];
+        }
+    }, [isUpMd, noData, footers]), fixedLeftFooters = _a[0], dynamicFooters = _a[1], fixedRightFooters = _a[2];
     return (_jsx(Footer, { children: _jsxs(TableRow, __assign({ sx: { backgroundColor: "#eaf0f6" } }, { children: [fixedLeftFooters.map(function (footer, index) {
                     var accessor = footer.accessor, Cell = footer.Cell, _a = footer.align, align = _a === void 0 ? "center" : _a, width = footer.width;
                     var left = fixedLeftFooters

package/DataTable/TableHeader.js

@@ -10,23 +10,27 @@ var __assign = (this && this.__assign) || function () {
     return __assign.apply(this, arguments);
 };
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { cloneElement } from "react";
+import { cloneElement, useMemo } from "react";
 import TableRow from "@mui/material/TableRow";
 import TableHead from "@mui/material/TableHead";
 import TableCell from "@mui/material/TableCell";
 import useMediaQuery from "@mui/material/useMediaQuery";
 import useTheme from "@mui/material/styles/useTheme";
 function TableHeader(props) {
-    var headers = props.headers, leftShadowVisible = props.leftShadowVisible, rightShadowVisible = props.rightShadowVisible;
+    var headers = props.headers, noData = props.noData, leftShadowVisible = props.leftShadowVisible, rightShadowVisible = props.rightShadowVisible;
     var theme = useTheme();
     var isUpMd = useMediaQuery(theme.breakpoints.up("md"));
-    var fixedLeftHeaders = isUpMd
-        ? headers.filter(function (h) { return h.fixable === "left"; })
-        : [];
-    var fixedRightHeaders = isUpMd
-        ? headers.filter(function (h) { return h.fixable === "right"; })
-        : [];
-    var dynamicHeaders = isUpMd ? headers.filter(function (h) { return !h.fixable; }) : headers;
+    var _a = useMemo(function () {
+        if (isUpMd && !noData) {
+            var left = headers.filter(function (h) { return h.fixable === "left"; });
+            var right = headers.filter(function (h) { return h.fixable === "right"; });
+            var dynamic = headers.filter(function (h) { return !h.fixable; });
+            return [left, dynamic, right];
+        }
+        else {
+            return [[], headers, []];
+        }
+    }, [isUpMd, noData, headers]), fixedLeftHeaders = _a[0], dynamicHeaders = _a[1], fixedRightHeaders = _a[2];
     return (_jsx(TableHead, { children: _jsxs(TableRow, __assign({ sx: { backgroundColor: "#eaf0f6" } }, { children: [fixedLeftHeaders.map(function (header, index) {
                     var accessor = header.accessor, Cell = header.Cell, _a = header.align, align = _a === void 0 ? "center" : _a, width = header.width, title = header.title, _b = header.sortable, sortable = _b === void 0 ? false : _b, onSort = header.onSort;
                     var left = fixedLeftHeaders

package/DataTable/index.js

@@ -32,7 +32,7 @@ function DataTable(props) {
             var clientWidth = target.clientWidth;
             var hasScrollBar = scrollWidth > clientWidth;
             setLeftShadowVisible(hasScrollBar && scrollLeft > 0);
-            setRightShadowVisible(hasScrollBar && scrollWidth - scrollLeft !== clientWidth);
+            setRightShadowVisible(hasScrollBar && scrollWidth - scrollLeft > clientWidth);
         }
     }, []);
     useEffect(function () {
@@ -53,7 +53,7 @@ function DataTable(props) {
                 borderRadius: "4px",
                 borderCollapse: "unset !important",
                 transition: "all 250ms cubic-bezier(0.4, 0, 0.2, 1) 0ms"
-            } }, { children: _jsxs(Table, __assign({ sx: { minWidth: 600, tableLayout: "fixed" }, stickyHeader: stickyHeader, size: dense ? "small" : "medium" }, { children: [_jsx(TableHeader, { headers: headers, leftShadowVisible: leftShadowVisible, rightShadowVisible: rightShadowVisible }), _jsx(TableBody, { rows: rows, columns: columns, noDataText: noDataText, onRowClick: onRowClick, leftShadowVisible: leftShadowVisible, rightShadowVisible: rightShadowVisible }), footers.length > 0 ? (_jsx(TableFooter, { footers: footers, leftShadowVisible: leftShadowVisible, rightShadowVisible: rightShadowVisible })) : (_jsx(_Fragment, {}))] })) })) })));
+            } }, { children: _jsxs(Table, __assign({ sx: { minWidth: 600, tableLayout: "fixed" }, stickyHeader: stickyHeader, size: dense ? "small" : "medium" }, { children: [_jsx(TableHeader, { headers: headers, noData: rows.length === 0, leftShadowVisible: leftShadowVisible, rightShadowVisible: rightShadowVisible }), _jsx(TableBody, { rows: rows, columns: columns, noDataText: noDataText, onRowClick: onRowClick, leftShadowVisible: leftShadowVisible, rightShadowVisible: rightShadowVisible }), footers.length > 0 ? (_jsx(TableFooter, { footers: footers, noData: rows.length === 0, leftShadowVisible: leftShadowVisible, rightShadowVisible: rightShadowVisible })) : (_jsx(_Fragment, {}))] })) })) })));
 }
 export default DataTable;
 export { default as useDataTable } from "./useTable";

package/DataTable/types.d.ts

@@ -46,6 +46,7 @@ export declare type UserTableReturns<RowProps extends KvProps, ExtendedProps ext
 };
 export declare type TableHeaderProps<RowProps extends KvProps, ExtendedProps extends KvProps> = {
     headers: Array<TableHeaderCellProps<RowProps, ExtendedProps>>;
+    noData?: boolean;
     leftShadowVisible?: boolean;
     rightShadowVisible?: boolean;
 };
@@ -62,10 +63,11 @@ export declare type TableBodyRowProps<RowProps extends KvProps, ExtendedProps ex
 };
 export declare type TableFooterProps<RowProps extends KvProps, ExtendedProps extends KvProps> = {
     footers: Array<TableFooterCellProps<RowProps, ExtendedProps>>;
+    noData?: boolean;
     leftShadowVisible?: boolean;
     rightShadowVisible?: boolean;
 };
-export declare type DataTableProps<RowProps extends KvProps, ExtendedProps extends KvProps> = Omit<TableHeaderProps<RowProps, ExtendedProps>, "leftShadowVisible" | "rightShadowVisible"> & Omit<TableBodyProps<RowProps, ExtendedProps>, "leftShadowVisible" | "rightShadowVisible"> & Omit<TableFooterProps<RowProps, ExtendedProps>, "leftShadowVisible" | "rightShadowVisible"> & {
+export declare type DataTableProps<RowProps extends KvProps, ExtendedProps extends KvProps> = Omit<TableHeaderProps<RowProps, ExtendedProps>, "leftShadowVisible" | "rightShadowVisible" | "noData"> & Omit<TableBodyProps<RowProps, ExtendedProps>, "leftShadowVisible" | "rightShadowVisible"> & Omit<TableFooterProps<RowProps, ExtendedProps>, "leftShadowVisible" | "rightShadowVisible" | "noData"> & {
     dense?: boolean;
     stickyHeader?: boolean;
     primaryColor?: CSSProperties["color"];

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@symply.io/basic-components",
-  "version": "1.1.2-beta.11",
+  "version": "1.1.2-beta.13",
   "description": "Basic and reusable components for all frontend of Symply apps",
   "keywords": [
     "react",