@gpa-gemstone/react-table 1.2.58 → 1.2.60

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: 100, maxWidth: 1000, width: 100 });
+                newMap.set(element.props.Key, { minWidth: 10, maxWidth: 1000, 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)
@@ -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({
@@ -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,57 +1,57 @@
-{
-  "name": "@gpa-gemstone/react-table",
-  "version": "1.2.58",
-  "description": "Table for GPA web applications",
-  "main": "lib/index.js",
-  "types": "lib/index.d.ts",
-  "files": ["lib"],
-  "scripts":   {
-    "test": "jest --config jestconfig.json",
-    "build": "tsc",
-    "format": "prettier --write \"src/**/*.tsx\"",
-    "lint": "eslint . --ext .ts,.tsx",
-    "prepare": "npm run build",
-    "prepublishOnly": "npm test && npm run lint",
-    "preversion": "npm run lint",
-    "version": "npm run format && git add -A src",
-    "postversion": "git push && git push --tags"
-  },
-  "repository":   {
-    "type": "git",
-    "url": "https://github.com/GridProtectionAlliance/gpa-gemstone.git"
-  },
-  "keywords":   [
-    "React",
-    "Table",
-    "GSF",
-    "Gemstone",
-    "GridProtectionAlliance"
-  ],
-  "author": "GridProtectionAlliance",
-  "license": "MIT",
-  "bugs": {"url": "https://github.com/GridProtectionAlliance/gpa-gemstone/issues"},
-  "homepage": "https://github.com/GridProtectionAlliance/gpa-gemstone#readme",
-  "devDependencies":   {
-    "@types/jest": "^27.0.0",
-    "@typescript-eslint/eslint-plugin": "^5.60.0",
-    "@typescript-eslint/parser": "^5.60.0",
-    "@types/react-portal": "4.0.4",
-    "eslint": "^8.43.0",
-    "jest": "^29.0.0",
-    "prettier": "^2.3.2",
-    "ts-jest": "^29.0.0",
-    "typescript": "5.5.3"
-  },
-  "dependencies":   {
-    "@gpa-gemstone/gpa-symbols": "0.0.45",
-    "@gpa-gemstone/helper-functions": "0.0.36",
-    "@gpa-gemstone/react-interactive": "1.0.137",
-    "@types/lodash": "^4.14.171",
-    "@types/react": "^17.0.14",
-    "lodash": "^4.17.21",
-    "react": "^18.2.0",
-    "react-dom": "18.2.0",
-    "react-portal": "4.2.2"
-  },
-  "publishConfig": {"access": "public"}
+{
+  "name": "@gpa-gemstone/react-table",
+  "version": "1.2.60",
+  "description": "Table for GPA web applications",
+  "main": "lib/index.js",
+  "types": "lib/index.d.ts",
+  "files": ["lib"],
+  "scripts":   {
+    "test": "jest --config jestconfig.json",
+    "build": "tsc",
+    "format": "prettier --write \"src/**/*.tsx\"",
+    "lint": "eslint . --ext .ts,.tsx",
+    "prepare": "npm run build",
+    "prepublishOnly": "npm test && npm run lint",
+    "preversion": "npm run lint",
+    "version": "npm run format && git add -A src",
+    "postversion": "git push && git push --tags"
+  },
+  "repository":   {
+    "type": "git",
+    "url": "https://github.com/GridProtectionAlliance/gpa-gemstone.git"
+  },
+  "keywords":   [
+    "React",
+    "Table",
+    "GSF",
+    "Gemstone",
+    "GridProtectionAlliance"
+  ],
+  "author": "GridProtectionAlliance",
+  "license": "MIT",
+  "bugs": {"url": "https://github.com/GridProtectionAlliance/gpa-gemstone/issues"},
+  "homepage": "https://github.com/GridProtectionAlliance/gpa-gemstone#readme",
+  "devDependencies":   {
+    "@types/jest": "^27.0.0",
+    "@typescript-eslint/eslint-plugin": "^5.60.0",
+    "@typescript-eslint/parser": "^5.60.0",
+    "@types/react-portal": "4.0.4",
+    "eslint": "^8.43.0",
+    "jest": "^29.0.0",
+    "prettier": "^2.3.2",
+    "ts-jest": "^29.0.0",
+    "typescript": "5.5.3"
+  },
+  "dependencies":   {
+    "@gpa-gemstone/gpa-symbols": "0.0.46",
+    "@gpa-gemstone/helper-functions": "0.0.37",
+    "@gpa-gemstone/react-interactive": "1.0.139",
+    "@types/lodash": "^4.14.171",
+    "@types/react": "^17.0.14",
+    "lodash": "^4.17.21",
+    "react": "^18.2.0",
+    "react-dom": "18.2.0",
+    "react-portal": "4.2.2"
+  },
+  "publishConfig": {"access": "public"}
 }

package/lib/AdjustableTable/Column.d.ts

@@ -1,20 +0,0 @@
-import * as React from 'react';
-import * as ReactTableProps from './Types';
-export declare function AdjustableColumn<T>(props: React.PropsWithChildren<ReactTableProps.IColumn<T>>): JSX.Element;
-export declare function Column<T>(props: React.PropsWithChildren<ReactTableProps.IColumn<T>>): JSX.Element;
-export interface IHeaderWrapperProps {
-    onSort: React.MouseEventHandler<HTMLTableCellElement>;
-    startAdjustment?: React.MouseEventHandler<HTMLDivElement>;
-    sorted: boolean;
-    asc: boolean;
-    style: React.CSSProperties;
-    allowSort?: boolean;
-    colKey: string;
-}
-export declare function ColumnHeaderWrapper(props: React.PropsWithChildren<IHeaderWrapperProps>): JSX.Element;
-export interface IDataWrapperProps {
-    dragStart?: (e: React.DragEvent) => void;
-    onClick?: (e: React.MouseEvent<HTMLElement, MouseEvent>) => void;
-    style: React.CSSProperties;
-}
-export declare function ColumnDataWrapper(props: React.PropsWithChildren<IDataWrapperProps>): JSX.Element;

package/lib/AdjustableTable/Column.js

@@ -1,77 +0,0 @@
-"use strict";
-//  ******************************************************************************************************
-//  Column.tsx - Gbtc
-//
-//  Copyright © 2018, Grid Protection Alliance.  All Rights Reserved.
-//
-//  Licensed to the Grid Protection Alliance (GPA) under one or more contributor license agreements. See
-//  the NOTICE file distributed with this work for additional information regarding copyright ownership.
-//  The GPA licenses this file to you under the MIT License (MIT), the "License"; you may not use this
-//  file except in compliance with the License. You may obtain a copy of the License at:
-//
-//      http://opensource.org/licenses/MIT
-//
-//  Unless agreed to in writing, the subject software distributed under the License is distributed on an
-//  "AS-IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. Refer to the
-//  License for the specific language governing permissions and limitations.
-//
-//  Code Modification History:
-//  ----------------------------------------------------------------------------------------------------
-//  08/02/2018 - Billy Ernest
-//       Generated original version of source code.
-//  05/31/2024 - C. Lackner
-//       Refactored to fix sizing issues.
-//  12/04/2024 - G. Santos
-//       Refactored to fix performance issues.
-//
-//  ******************************************************************************************************
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.AdjustableColumn = AdjustableColumn;
-exports.Column = Column;
-exports.ColumnHeaderWrapper = ColumnHeaderWrapper;
-exports.ColumnDataWrapper = ColumnDataWrapper;
-const gpa_symbols_1 = require("@gpa-gemstone/gpa-symbols");
-const React = require("react");
-function AdjustableColumn(props) {
-    return React.createElement(React.Fragment, null, props.children);
-}
-function Column(props) {
-    return React.createElement(React.Fragment, null, props.children);
-}
-function ColumnHeaderWrapper(props) {
-    var _a;
-    const [showBorder, setShowBorder] = React.useState(false);
-    const onHover = React.useCallback(() => { setShowBorder(true); }, []);
-    const onLeave = React.useCallback(() => { setShowBorder(false); }, []);
-    const onClickBorder = React.useCallback((e) => {
-        if (props.startAdjustment != null)
-            props.startAdjustment(e);
-    }, [props.startAdjustment]);
-    const onClick = React.useCallback((e) => {
-        var _a;
-        if ((_a = props.allowSort) !== null && _a !== void 0 ? _a : true)
-            props.onSort(e);
-    }, [props.onSort, props.allowSort]);
-    const preventPropagation = React.useCallback((e) => {
-        e.stopPropagation();
-    }, []);
-    return React.createElement("th", { style: props.style, onClick: onClick, onDrag: (e) => { e.stopPropagation(); }, id: props.colKey },
-        props.startAdjustment == null ? React.createElement(React.Fragment, null) :
-            React.createElement("div", { style: {
-                    width: 5,
-                    height: '100%',
-                    position: 'absolute',
-                    top: 0,
-                    left: 0,
-                    opacity: showBorder ? 1 : 0,
-                    background: '#e9ecef',
-                    cursor: 'col-resize',
-                }, onMouseEnter: onHover, onMouseLeave: onLeave, onMouseDown: onClickBorder, onClick: preventPropagation }),
-        props.sorted ? React.createElement("div", { style: { position: 'absolute', width: 25 } }, props.asc ? React.createElement(gpa_symbols_1.ReactIcons.ArrowDropUp, null) : React.createElement(gpa_symbols_1.ReactIcons.ArrowDropDown, null)) : null,
-        React.createElement("div", { style: {
-                marginLeft: (props.sorted ? 25 : 0),
-            } }, (_a = props.children) !== null && _a !== void 0 ? _a : props.colKey));
-}
-function ColumnDataWrapper(props) {
-    return (React.createElement("td", { style: props.style, onClick: props.onClick, draggable: props.dragStart !== undefined, onDragStart: props.dragStart }, props.children));
-}

package/lib/AdjustableTable/Table.d.ts

@@ -1,3 +0,0 @@
-import * as React from 'react';
-import * as ReactTableProps from './Types';
-export declare function AdjustableTable<T>(props: React.PropsWithChildren<ReactTableProps.ITable<T>>): JSX.Element;