@gpa-gemstone/react-table 1.2.59 → 1.2.61

package/lib/ConfigurableTable/ConfigurableTable.d.ts

@@ -17,6 +17,10 @@ interface ITableProps<T> extends ReactTableProps.ITable<T> {
     * The key used to store columns in local storage
     */
     LocalStorageKey?: string;
+    /**
+     * Optional flag to show helper alert for configuring table columns
+    */
+    ShowColumnHelper?: boolean;
 }
 /**
 * Table with modal to show and hide columns

package/lib/ConfigurableTable/ConfigurableTable.js

@@ -35,6 +35,7 @@ const ConfigurableColumn_1 = require("./ConfigurableColumn");
 * Table with modal to show and hide columns
 */
 function ConfigurableTable(props) {
+    var _a;
     const getKeyMappings = () => {
         const u = new Map();
         React.Children.forEach(props.children, (element) => {
@@ -59,6 +60,7 @@ function ConfigurableTable(props) {
     const [hover, setHover] = React.useState(false);
     const [guid] = React.useState((0, helper_functions_1.CreateGuid)());
     const [widthDisabledAdd, setWidthDisabledAdd] = React.useState(false);
+    const [showHelperAlert, setShowHelperAlert] = React.useState(true);
     const handleReduceWidthCallback = React.useCallback((hiddenKeys) => {
         if (hiddenKeys.length !== 0) {
             setWidthDisabledAdd(true);
@@ -125,6 +127,7 @@ function ConfigurableTable(props) {
         return ((_a = c === null || c === void 0 ? void 0 : c.Default) !== null && _a !== void 0 ? _a : false) || isSort || isLocal;
     }
     return (React.createElement(React.Fragment, null,
+        ((_a = props.ShowColumnHelper) !== null && _a !== void 0 ? _a : false) ? React.createElement(react_interactive_1.Alert, { AlertColor: "alert-info", Show: showHelperAlert, SetShow: setShowHelperAlert }, "Use the gear at the far right of the header row to choose columns to show or hide.") : null,
         React.createElement(Table_1.Table, Object.assign({}, props, { LastColumn: React.createElement("div", { style: { marginLeft: -5, marginBottom: 12 }, onMouseEnter: () => setHover(true), onMouseLeave: () => setHover(false), id: guid + '-tooltip', onClick: () => setShowSettings(true) },
                 React.createElement(gpa_symbols_1.ReactIcons.Settings, null)), ReduceWidthCallback: handleReduceWidthCallback }), React.Children.map(props.children, (element) => {
             var _a, _b;

package/lib/Table/Table.js

@@ -76,6 +76,8 @@ const IsColumnAdjustable = (props) => {
         return propValue;
     return false;
 };
+const scrollBarWidth = getScrollbarWidth();
+const lastColumnWidth = 17;
 function Table(props) {
     const bodyRef = React.useRef(null);
     const colWidthsRef = React.useRef(new Map());
@@ -119,7 +121,7 @@ function Table(props) {
             if (React.isValidElement(element) && IsColumnProps(element.props)) {
                 if (newMap.get(element.props.Key) != null)
                     console.error("Multiple of the same key detected in table, this will cause issues.");
-                newMap.set(element.props.Key, { minWidth: 10, maxWidth: 1000, width: 100 });
+                newMap.set(element.props.Key, { minWidth: 10, maxWidth: undefined, width: 100 });
             }
         });
         // If width is the same and keys are identical, we can skip the operation
@@ -162,11 +164,12 @@ function Table(props) {
             let autoSpace = currentTableWidth;
             measureKeys.forEach(key => {
                 const element = document.getElementById(key + "_measurement");
-                if (element != null) {
+                const elementWidth = element === null || element === void 0 ? void 0 : element.getBoundingClientRect().width;
+                if (elementWidth != null) {
                     const widthObj = newMap.get(key);
                     if (widthObj != null) {
-                        autoSpace -= element.clientWidth;
-                        widthObj[type] = element.clientWidth;
+                        autoSpace -= elementWidth;
+                        widthObj[type] = elementWidth;
                     }
                     else
                         console.error("Could not find width object for Key: " + key);
@@ -177,7 +180,7 @@ function Table(props) {
             document.body.removeChild(widthsContainer);
             // Handle Autos (width type only)
             if (type === 'width' && autoKeys.length > 0) {
-                const spacePerElement = Math.floor(autoSpace / autoKeys.length);
+                const spacePerElement = autoSpace / autoKeys.length;
                 autoKeys.forEach(key => {
                     const widthObj = newMap.get(key);
                     if (widthObj != null)
@@ -194,9 +197,9 @@ function Table(props) {
                         // This follows behavior consistent with MDN documentation on how these width types should behave
                         if (widthObj.minWidth > widthObj.width)
                             widthObj.width = widthObj.minWidth;
-                        if (widthObj.minWidth > widthObj.maxWidth)
+                        if (widthObj.maxWidth != null && widthObj.minWidth > widthObj.maxWidth)
                             widthObj.maxWidth = widthObj.minWidth;
-                        if (widthObj.width > widthObj.maxWidth)
+                        if (widthObj.maxWidth != null && widthObj.width > widthObj.maxWidth)
                             widthObj.width = widthObj.maxWidth;
                         // Constrain Width to remainingSpace
                         if (widthObj.width > remainingSpace)
@@ -223,12 +226,17 @@ function Table(props) {
             return;
         // Note: certain body classes may break this check if they set overflow to scroll
         let newScroll = false;
-        if (((_a = props.TbodyStyle) === null || _a === void 0 ? void 0 : _a.overflowY) === 'scroll' || ((_b = props.TbodyStyle) === null || _b === void 0 ? void 0 : _b.overflow) === 'scroll')
+        const dims = (_a = bodyRef.current) === null || _a === void 0 ? void 0 : _a.getBoundingClientRect(); //use getBoundClientRect() to get un rounded values
+        if (((_b = props.TbodyStyle) === null || _b === void 0 ? void 0 : _b.overflowY) === 'scroll' || ((_c = props.TbodyStyle) === null || _c === void 0 ? void 0 : _c.overflow) === 'scroll')
             newScroll = true;
         else
-            newScroll = bodyRef.current.clientHeight < bodyRef.current.scrollHeight;
+            newScroll = (dims === null || dims === void 0 ? void 0 : dims.height) < bodyRef.current.scrollHeight;
         setScrolled(newScroll);
-        setCurrentTableWidth(((_d = (_c = bodyRef.current) === null || _c === void 0 ? void 0 : _c.clientWidth) !== null && _d !== void 0 ? _d : 17) - (newScroll ? 0 : 17));
+        // Pick whichever is larger so we dont double subtract
+        const scrollbar = newScroll ? scrollBarWidth : 0;
+        const last = props.LastColumn !== undefined ? lastColumnWidth : 0;
+        const spacer = Math.max(scrollbar, last);
+        setCurrentTableWidth(((_d = dims.width) !== null && _d !== void 0 ? _d : 17) - spacer);
     }, 100), []);
     React.useEffect(() => {
         let resizeObserver;
@@ -258,7 +266,7 @@ function Table(props) {
             React.createElement("tr", { style: props.RowStyle !== undefined ? Object.assign({}, props.RowStyle) : {} }, props.LastRow))) : null));
 }
 function Rows(props) {
-    const bodyStyle = React.useMemo(() => (Object.assign(Object.assign({}, props.BodyStyle), { paddingRight: (props.BodyScrolled ? 0 : 17), display: "block" })), [props.BodyStyle, props.BodyScrolled]);
+    const bodyStyle = React.useMemo(() => (Object.assign(Object.assign({}, props.BodyStyle), { display: "block" })), [props.BodyStyle]);
     const onClick = React.useCallback((e, item, index) => {
         if (props.OnClick !== undefined)
             props.OnClick({
@@ -368,9 +376,9 @@ function Header(props) {
         if (widthObjLeft == null || widthObjRight == null)
             return ({ min: -Infinity, max: Infinity });
         const limitByShrinkLeft = widthObjLeft.width - widthObjLeft.minWidth;
-        const limitByGrowthLeft = widthObjLeft.maxWidth - widthObjLeft.width;
+        const limitByGrowthLeft = widthObjLeft.maxWidth == null ? Number.MAX_SAFE_INTEGER : (widthObjLeft.maxWidth - widthObjLeft.width);
         const limitByShrinkRight = widthObjRight.width - widthObjRight.minWidth;
-        const limitByGrowthRight = widthObjRight.maxWidth - widthObjRight.width;
+        const limitByGrowthRight = widthObjRight.maxWidth == null ? Number.MAX_SAFE_INTEGER : (widthObjRight.maxWidth - widthObjRight.width);
         // Recall that a left movement is a negative deltaW
         const minDeltaW = -(limitByShrinkLeft < limitByGrowthRight ? limitByShrinkLeft : limitByGrowthRight);
         const maxDeltaW = limitByShrinkRight < limitByGrowthLeft ? limitByShrinkRight : limitByGrowthLeft;
@@ -494,5 +502,22 @@ function Header(props) {
                         ((_r = element.props.children) !== null && _r !== void 0 ? _r : element.props.Key),
                     ' '));
             }),
-            React.createElement("th", { style: { width: 17, padding: 0, maxWidth: 17 } }, props.LastColumn))));
+            props.LastColumn !== undefined ?
+                React.createElement("th", { style: { width: lastColumnWidth, padding: 0, maxWidth: lastColumnWidth } }, props.LastColumn)
+                : null)));
+}
+function getScrollbarWidth() {
+    // Creating invisible container
+    const outer = document.createElement('div');
+    outer.style.visibility = 'hidden';
+    outer.style.overflow = 'scroll'; // forcing scrollbar to appear
+    document.body.appendChild(outer);
+    // Creating inner element and placing it in the container
+    const inner = document.createElement('div');
+    outer.appendChild(inner);
+    // Calculating difference between container's full width and the child width
+    const scrollbarWidth = (outer.offsetWidth - inner.offsetWidth);
+    // Removing temporary elements from the DOM
+    outer.parentNode.removeChild(outer);
+    return scrollbarWidth;
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@gpa-gemstone/react-table",
-  "version": "1.2.59",
+  "version": "1.2.61",
   "description": "Table for GPA web applications",
   "main": "lib/index.js",
   "types": "lib/index.d.ts",
@@ -45,7 +45,7 @@
   "dependencies":   {
     "@gpa-gemstone/gpa-symbols": "0.0.46",
     "@gpa-gemstone/helper-functions": "0.0.37",
-    "@gpa-gemstone/react-interactive": "1.0.138",
+    "@gpa-gemstone/react-interactive": "1.0.139",
     "@types/lodash": "^4.14.171",
     "@types/react": "^17.0.14",
     "lodash": "^4.17.21",