@symply.io/basic-components 1.0.0-beta.8 → 1.0.0-beta.9

package/BasicTable/TableBody.js

@@ -15,19 +15,19 @@ import Grid from "@mui/material/Grid";
 import useCustomTheme from "../useCustomTheme";
 import TableBodyRow from "./TableBodyRow";
 var BasicTableBody = forwardRef(function (props, ref) {
-    var rows = props.rows, columns = props.columns, forFrozen = props.forFrozen, noDataText = props.noDataText;
+    var rows = props.rows, columns = props.columns, forFrozen = props.forFrozen, noDataText = props.noDataText, cellMinWidth = props.cellMinWidth;
     var theme = useCustomTheme();
     return (_jsx(Grid, __assign({ item: true, sx: {
             maxHeight: "41vh",
             overflowY: "auto",
             display: "block",
             minWidth: "100%",
-            scrollbarWidth: forFrozen ? "none" : "inherit",
+            scrollbarWidth: forFrozen ? "none" : "initial",
             "&::-webkit-scrollbar": {
-                width: forFrozen ? 0 : "inherit"
+                width: forFrozen ? 0 : "initial"
             }
         } }, { children: _jsx("div", __assign({ ref: ref }, { children: rows && rows.length > 0 ? (rows.map(function (row, index) {
-                return (_jsx(TableBodyRow, { row: row, rows: rows, columns: columns }, "BasicTable_".concat(index)));
+                return (_jsx(TableBodyRow, { row: row, rows: rows, columns: columns, cellMinWidth: cellMinWidth }, "BasicTable_".concat(index)));
             })) : (_jsx(Grid, __assign({ container: true, justifyContent: "space-around", alignItems: "center", wrap: "nowrap", sx: {
                     height: "60px",
                     borderBottomWidth: "thin",
@@ -43,7 +43,7 @@ var BasicTableBody = forwardRef(function (props, ref) {
                         fontWeight: 600
                     }
                 } }, { children: _jsx(Grid, __assign({ item: true, xs: 4, md: 3, lg: 2, textAlign: "center", sx: {
-                        minWidth: "135px",
+                        minWidth: cellMinWidth,
                         paddingLeft: theme.spacing(0.625),
                         paddingRight: theme.spacing(0.625)
                     } }, { children: noDataText })) }))) })) })));

package/BasicTable/TableBodyRow.js

@@ -14,7 +14,7 @@ import { cloneElement } from "react";
 import Grid from "@mui/material/Grid";
 import useCustomTheme from "../useCustomTheme";
 function BasicTableBodyRow(props) {
-    var row = props.row, rows = props.rows, columns = props.columns;
+    var row = props.row, rows = props.rows, columns = props.columns, cellMinWidth = props.cellMinWidth;
     var theme = useCustomTheme();
     return (_jsx(Grid, __assign({ container: true, justifyContent: "space-evenly", alignItems: "center", wrap: "nowrap", sx: {
             height: "60px",
@@ -31,9 +31,9 @@ function BasicTableBodyRow(props) {
                 fontWeight: 600
             }
         } }, { children: columns.map(function (col) {
-            var accessor = col.accessor, Cell = col.Cell, canBeFrozen = col.canBeFrozen, _a = col.align, align = _a === void 0 ? "center" : _a;
+            var accessor = col.accessor, Cell = col.Cell, _a = col.align, align = _a === void 0 ? "center" : _a;
             return (_jsx(Grid, __assign({ item: true, xs: 4, md: 3, lg: 2, textAlign: align, sx: {
-                    minWidth: canBeFrozen ? "112px!important" : "135px",
+                    minWidth: cellMinWidth,
                     paddingLeft: theme.spacing(0.625),
                     paddingRight: theme.spacing(0.625)
                 } }, { children: cloneElement(Cell, { column: col, rows: rows, row: row }) }), accessor));

package/BasicTable/TableFooter.js

@@ -14,7 +14,7 @@ import { cloneElement } from "react";
 import Grid from "@mui/material/Grid";
 import useCustomTheme from "../useCustomTheme";
 function BasicTableFooter(props) {
-    var footers = props.footers;
+    var footers = props.footers, cellMinWidth = props.cellMinWidth;
     var theme = useCustomTheme();
     return footers && footers.length > 0 ? (_jsx(Grid, __assign({ item: true, sx: {
             backgroundColor: "#eaf0f6",
@@ -29,9 +29,9 @@ function BasicTableFooter(props) {
                     fontWeight: 600
                 }
             } }, { children: footers.map(function (footer) {
-                var accessor = footer.accessor, Cell = footer.Cell, _a = footer.align, align = _a === void 0 ? "center" : _a, canBeFrozen = footer.canBeFrozen;
+                var accessor = footer.accessor, Cell = footer.Cell, _a = footer.align, align = _a === void 0 ? "center" : _a;
                 return (_jsx(Grid, __assign({ item: true, xs: 4, md: 3, lg: 2, textAlign: align, sx: {
-                        minWidth: canBeFrozen ? "112px!important" : "135px",
+                        minWidth: cellMinWidth,
                         paddingLeft: theme.spacing(0.625),
                         paddingRight: theme.spacing(0.625),
                         whiteSpace: "nowrap",

package/BasicTable/TableHeader.js

@@ -14,7 +14,7 @@ import { cloneElement } from "react";
 import Grid from "@mui/material/Grid";
 import useCustomTheme from "../useCustomTheme";
 function BasicTableHeader(props) {
-    var headers = props.headers;
+    var headers = props.headers, cellMinWidth = props.cellMinWidth;
     var theme = useCustomTheme();
     return headers && headers.length > 0 ? (_jsx(Grid, __assign({ item: true, sx: {
             backgroundColor: "#eaf0f6",
@@ -29,9 +29,9 @@ function BasicTableHeader(props) {
                     fontWeight: 600
                 }
             } }, { children: headers.map(function (header) {
-                var accessor = header.accessor, Cell = header.Cell, _a = header.align, align = _a === void 0 ? "center" : _a, title = header.title, onSort = header.onSort, canBeFrozen = header.canBeFrozen, _b = header.canSort, canSort = _b === void 0 ? false : _b;
+                var accessor = header.accessor, Cell = header.Cell, _a = header.align, align = _a === void 0 ? "center" : _a, title = header.title, onSort = header.onSort, _b = header.canSort, canSort = _b === void 0 ? false : _b;
                 return (_jsx(Grid, __assign({ item: true, xs: 4, md: 3, lg: 2, title: title, textAlign: align, sx: {
-                        minWidth: canBeFrozen ? "112px!important" : "135px",
+                        minWidth: cellMinWidth,
                         paddingLeft: theme.spacing(0.625),
                         paddingRight: theme.spacing(0.625),
                         whiteSpace: "nowrap",

package/BasicTable/index.js

@@ -23,14 +23,14 @@ import TableFooter from "./TableFooter";
 function BasicTable(props) {
     var _a;
     var _b;
-    var _c = props.columns, columns = _c === void 0 ? [] : _c, _d = props.rows, rows = _d === void 0 ? [] : _d, _e = props.headers, headers = _e === void 0 ? [] : _e, _f = props.footers, footers = _f === void 0 ? [] : _f, _g = props.noDataText, noDataText = _g === void 0 ? "No Data!" : _g, primaryColor = props.primaryColor, secondaryColor = props.secondaryColor;
+    var _c = props.columns, columns = _c === void 0 ? [] : _c, _d = props.rows, rows = _d === void 0 ? [] : _d, _e = props.headers, headers = _e === void 0 ? [] : _e, _f = props.footers, footers = _f === void 0 ? [] : _f, _g = props.noDataText, noDataText = _g === void 0 ? "No Data!" : _g, primaryColor = props.primaryColor, secondaryColor = props.secondaryColor, _h = props.cellMinWidth, cellMinWidth = _h === void 0 ? "initial" : _h;
     var theme = useCustomTheme({ primaryColor: primaryColor, secondaryColor: secondaryColor });
     var isUpMd = useMediaQuery(theme.breakpoints.up("md"));
     var fronzenColsCount = useMemo(function () { var _a; return (_a = columns.filter(function (col) { return col.canBeFrozen; })) === null || _a === void 0 ? void 0 : _a.length; }, [columns]);
     var canFreeze = useMemo(function () { return isUpMd && (rows === null || rows === void 0 ? void 0 : rows.length) > 0 && fronzenColsCount > 0; }, [fronzenColsCount, isUpMd, rows.length]);
-    var _h = useScroll({
+    var _j = useScroll({
         canFreeze: canFreeze
-    }), frozenWidth = _h.frozenWidth, setFrozenWidth = _h.setFrozenWidth, fixedRef = _h.fixedRef, dynamicRef = _h.dynamicRef;
+    }), frozenWidth = _j.frozenWidth, setFrozenWidth = _j.setFrozenWidth, fixedRef = _j.fixedRef, dynamicRef = _j.dynamicRef;
     useEffect(function () {
         var _a, _b;
         var initFrozenWidth = ((_a = document.getElementById("frozenContainer")) === null || _a === void 0 ? void 0 : _a.clientWidth) ||
@@ -67,7 +67,7 @@ function BasicTable(props) {
                             zIndex: 999,
                             backgroundColor: "Menu",
                             boxShadow: "6px 0 6px -4px rgba(0,0,0,0.15)"
-                        } }, { children: _jsxs(Grid, __assign({ container: true, direction: "column", justifyContent: "center" }, { children: [_jsx(TableHeader, { headers: headers.filter(function (header) { return header.canBeFrozen; }) }), _jsx(TableBody, { forFrozen: true, rows: rows, ref: fixedRef, columns: columns.filter(function (col) { return col.canBeFrozen; }) }), _jsx(TableFooter, { footers: footers.filter(function (footer) { return footer.canBeFrozen; }) })] })) }))), _jsx(Grid, __assign({ item: true, style: {
+                        } }, { children: _jsxs(Grid, __assign({ container: true, direction: "column", justifyContent: "center" }, { children: [_jsx(TableHeader, { cellMinWidth: cellMinWidth, headers: headers.filter(function (header) { return header.canBeFrozen; }) }), _jsx(TableBody, { forFrozen: true, rows: rows, ref: fixedRef, cellMinWidth: cellMinWidth, columns: columns.filter(function (col) { return col.canBeFrozen; }) }), _jsx(TableFooter, { cellMinWidth: cellMinWidth, footers: footers.filter(function (footer) { return footer.canBeFrozen; }) })] })) }))), _jsx(Grid, __assign({ item: true, style: {
                             width: "100%",
                             marginLeft: canFreeze
                                 ? ((_b = document.getElementById("frozenContainer")) === null || _b === void 0 ? void 0 : _b.clientWidth) ||
@@ -75,13 +75,13 @@ function BasicTable(props) {
                                     0
                                 : 0,
                             overflow: "auto"
-                        } }, { children: _jsxs(Grid, __assign({ container: true, direction: "column", justifyContent: "center" }, { children: [_jsx(TableHeader, { headers: headers.filter(function (header) {
+                        } }, { children: _jsxs(Grid, __assign({ container: true, direction: "column", justifyContent: "center" }, { children: [_jsx(TableHeader, { cellMinWidth: cellMinWidth, headers: headers.filter(function (header) {
                                         return isUpMd ? !header.canBeFrozen : true;
                                     }) }), _jsx(TableBody, { rows: rows, ref: dynamicRef, noDataText: noDataText, columns: columns.filter(function (col) {
                                         return isUpMd ? !col.canBeFrozen : true;
-                                    }) }), _jsx(TableFooter, { footers: footers.filter(function (footer) {
+                                    }), cellMinWidth: cellMinWidth }), _jsx(TableFooter, { footers: footers.filter(function (footer) {
                                         return isUpMd ? !footer.canBeFrozen : true;
-                                    }) })] })) }))] })) })) })));
+                                    }), cellMinWidth: cellMinWidth })] })) }))] })) })) })));
 }
 export default BasicTable;
 export * from "./types";

package/BasicTable/types.d.ts

@@ -8,6 +8,7 @@ interface InitialStateProps {
 }
 export interface IColumn {
     Header: ReactElement;
+    headerTip?: string;
     Body: ReactElement;
     Footer?: ReactElement;
     align?: "left" | "center" | "right";
@@ -46,19 +47,22 @@ export interface UseTableProps {
 export interface UseScrollProps {
     canFreeze?: boolean;
 }
-export interface BasicTableHeaderProps {
+interface BasicTableBaseProps {
+    cellMinWidth?: CSSProperties["minWidth"];
+}
+export interface BasicTableHeaderProps extends BasicTableBaseProps {
     headers: Array<IHeader>;
 }
-export interface BasicTableFooterProps {
+export interface BasicTableFooterProps extends BasicTableBaseProps {
     footers: Array<IFooter>;
 }
-export interface BasicTableBodyProps {
+export interface BasicTableBodyProps extends BasicTableBaseProps {
     columns: Array<IBodyColumn>;
     rows: Array<IRow>;
     noDataText?: string;
     forFrozen?: boolean;
 }
-export interface BasicTableBodyRowProps {
+export interface BasicTableBodyRowProps extends BasicTableBaseProps {
     columns: Array<IBodyColumn>;
     rows: Array<IRow>;
     row: IRow;

package/BasicTable/useTable.d.ts

@@ -3,6 +3,7 @@ import { UseTableProps, SortingProps } from "./types";
 declare function useTable(props: UseTableProps): {
     headers: {
         Header: import("react").ReactElement<any, string | import("react").JSXElementConstructor<any>>;
+        headerTip?: string | undefined;
         Body: import("react").ReactElement<any, string | import("react").JSXElementConstructor<any>>;
         Footer?: import("react").ReactElement<any, string | import("react").JSXElementConstructor<any>> | undefined;
         align?: "left" | "right" | "center" | undefined;
@@ -15,6 +16,7 @@ declare function useTable(props: UseTableProps): {
     }[];
     footers: {
         Header: import("react").ReactElement<any, string | import("react").JSXElementConstructor<any>>;
+        headerTip?: string | undefined;
         Body: import("react").ReactElement<any, string | import("react").JSXElementConstructor<any>>;
         Footer?: import("react").ReactElement<any, string | import("react").JSXElementConstructor<any>> | undefined;
         align?: "left" | "right" | "center" | undefined;
@@ -25,6 +27,7 @@ declare function useTable(props: UseTableProps): {
     }[];
     columns: {
         Header: import("react").ReactElement<any, string | import("react").JSXElementConstructor<any>>;
+        headerTip?: string | undefined;
         Body: import("react").ReactElement<any, string | import("react").JSXElementConstructor<any>>;
         Footer?: import("react").ReactElement<any, string | import("react").JSXElementConstructor<any>> | undefined;
         align?: "left" | "right" | "center" | undefined;

package/BasicTable/useTable.js

@@ -75,9 +75,9 @@ function useTable(props) {
     }, [columns, rest]);
     var headers = useMemo(function () {
         return columns.map(function (col) {
-            var Header = col.Header, accessor = col.accessor, canSort = col.canSort;
+            var Header = col.Header, accessor = col.accessor, canSort = col.canSort, headerTip = col.headerTip;
             var canSortBy = canSort && !disableSortBy;
-            return __assign(__assign({ Cell: (_jsxs(_Fragment, { children: [cloneElement(Header || _jsx(_Fragment, {}), { column: col }), canSortBy && renderSortingSymbol(accessor)] })), title: "".concat(canSortBy ? " (Click to sort)" : ""), canSort: canSortBy, onSort: canSortBy ? handleSort : function () { } }, col), rest);
+            return __assign(__assign({ Cell: (_jsxs(_Fragment, { children: [cloneElement(Header || _jsx(_Fragment, {}), { column: col }), canSortBy && renderSortingSymbol(accessor)] })), title: "".concat(headerTip || "").concat(canSortBy ? " (Click to sort)" : ""), canSort: canSortBy, onSort: canSortBy ? handleSort : function () { } }, col), rest);
         });
     }, [columns, disableSortBy, handleSort, renderSortingSymbol, rest]);
     var footers = useMemo(function () {

package/package.json

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