@gpa-gemstone/react-table 1.2.30 → 1.2.32

package/lib/AdjustableTable/AdjustableColumn.d.ts

@@ -0,0 +1,20 @@
+import * as React from 'react';
+import { IColumnProps } from './Column';
+interface IAdjustableColProps<T> extends IColumnProps<T> {
+    /**
+     * The minimum Width used for this Collumn - default is 100px
+     */
+    MinWidth?: number;
+}
+export default function AdjustableCol<T>(props: React.PropsWithChildren<IAdjustableColProps<T>>): JSX.Element;
+interface IHeaderWrapperProps<T> extends IAdjustableColProps<T> {
+    setWidth: (w: number, m: number) => void;
+    width?: number;
+    onSort: (key: string, event: any, field?: keyof T) => void;
+    sorted: boolean;
+    asc: boolean;
+    startAdjustment: (e: any) => void;
+    fixedLayout: boolean;
+}
+export declare function AdjColumnHeaderWrapper<T>(props: React.PropsWithChildren<IHeaderWrapperProps<T>>): JSX.Element;
+export {};

package/lib/AdjustableTable/AdjustableColumn.js

@@ -0,0 +1,100 @@
+"use strict";
+//  ******************************************************************************************************
+//  AdjustableColumn.tsx - Gbtc
+//
+//  Copyright © 2023, 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:
+//  ----------------------------------------------------------------------------------------------------
+//  11/19/2023 - C. Lackner
+//       Generated original version of source code.
+//
+//  ******************************************************************************************************
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.AdjColumnHeaderWrapper = void 0;
+var gpa_symbols_1 = require("@gpa-gemstone/gpa-symbols");
+var helper_functions_1 = require("@gpa-gemstone/helper-functions");
+var React = require("react");
+function AdjustableCol(props) {
+    return React.createElement(React.Fragment, null, props.children);
+}
+exports.default = AdjustableCol;
+function AdjColumnHeaderWrapper(props) {
+    var _a, _b;
+    var thref = React.useRef(null);
+    var _c = React.useState(false), showBorder = _c[0], setShowBorder = _c[1];
+    var onHover = React.useCallback(function () { setShowBorder(true); }, []);
+    var onLeave = React.useCallback(function () { setShowBorder(false); }, []);
+    var style = (props.RowStyle !== undefined) ? __assign({}, props.HeaderStyle) : {};
+    if (props.width !== undefined && props.fixedLayout) {
+        style.width = props.width;
+        style.minWidth = props.width;
+        style.maxWidth = props.width;
+    }
+    if (style.cursor === undefined && ((_a = props.AllowSort) !== null && _a !== void 0 ? _a : true)) {
+        style.cursor = 'pointer';
+    }
+    if (style.position === undefined) {
+        style.position = 'relative';
+    }
+    if (style.borderTop === undefined) {
+        style.borderTop = 'none';
+    }
+    React.useLayoutEffect(function () {
+        var _a, _b;
+        if (thref.current == null || props.width !== undefined)
+            return;
+        var w = (_a = (0, helper_functions_1.GetNodeSize)(thref.current)) === null || _a === void 0 ? void 0 : _a.width;
+        if (w === undefined)
+            return;
+        props.setWidth(w, (_b = props.MinWidth) !== null && _b !== void 0 ? _b : 100);
+    });
+    var onClick = React.useCallback(function (e) {
+        props.onSort(props.Key, e, props.Field);
+        e.stopPropagation();
+        console.log('onCLick th');
+    }, [props.onSort]);
+    var onClickBorder = React.useCallback(function (e) {
+        props.startAdjustment(e);
+        console.log('onCLick border div');
+    }, [props.startAdjustment]);
+    return React.createElement("th", { ref: thref, style: style, onClick: onClick },
+        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 }),
+        props.sorted && props.asc ? React.createElement("div", { style: { position: 'absolute', width: 25 } }, gpa_symbols_1.SVGIcons.ArrowDropDown) : null,
+        props.sorted && !props.asc ? React.createElement("div", { style: { position: 'absolute', width: 25 } }, gpa_symbols_1.SVGIcons.ArrowDropUp) : null,
+        React.createElement("div", { style: {
+                marginLeft: (props.sorted ? 25 : 0),
+            } }, (_b = props.children) !== null && _b !== void 0 ? _b : props.Key));
+}
+exports.AdjColumnHeaderWrapper = AdjColumnHeaderWrapper;

package/lib/AdjustableTable/AdjustableTable.d.ts

@@ -0,0 +1,102 @@
+import * as React from 'react';
+interface TableProps<T> {
+    /**
+     * List of T objects used to generate rows
+     */
+    Data: T[];
+    /**
+     * Callback when the user clicks on a data entry
+     * @param data contains the data including the columnKey
+     * @param event the onClick Event to allow propagation as needed
+     * @returns
+     */
+    OnClick?: (data: {
+        colKey: string;
+        colField?: keyof T;
+        row: T;
+        data: T[keyof T] | null;
+        index: number;
+    }, event: any) => void;
+    /**
+     * Key of the collumn to sort by
+     */
+    SortKey: string;
+    /**
+     * Boolen to indicate whether the sort is ascending or descending
+     */
+    Ascending: boolean;
+    /**
+     * Callback when the data should be sorted
+     * @param data the information of the collumn including the Key of the collumn
+     * @param event The onCLick event to allow Propagation as needed
+     */
+    OnSort(data: {
+        colKey: string;
+        colField?: keyof T;
+        ascending: boolean;
+    }, event: any): void;
+    /**
+     * Class of the table component
+     */
+    TableClass?: string;
+    /**
+     * style of the table component
+     */
+    TableStyle?: React.CSSProperties;
+    /**
+     * style of the thead component
+     */
+    TheadStyle?: React.CSSProperties;
+    /**
+     * Class of the thead component
+     */
+    TheadClass?: string;
+    /**
+     * style of the tbody component
+     */
+    TbodyStyle?: React.CSSProperties;
+    /**
+     * Class of the tbody component
+     */
+    TbodyClass?: string;
+    /**
+     * determines if a row should be styled as selected
+     * @param data the item to be checked
+     * @returns true if the row should be styled as selected
+     */
+    Selected?: (data: T) => boolean;
+    /**
+     *
+     * @param data he information of the row including the item of the row
+     * @param e the event triggering this
+     * @returns
+     */
+    OnDragStart?: (data: {
+        colKey: string;
+        colField?: keyof T;
+        row: T;
+        data: T[keyof T] | null;
+        index: number;
+    }, e: any) => void;
+    /**
+     * The default style for the tr element
+     */
+    RowStyle?: React.CSSProperties;
+    /**
+     * a Function that retrieves a unique key used for React key properties
+     * @param data the item to be turned into a key
+     * @returns a unique Key
+     */
+    KeySelector: (data: T) => string | number;
+    /**
+     * Optional Element to display in the last row of the Table
+     * use this for displaying warnings when the Table content gets cut off
+     */
+    LastRow?: string | React.ReactNode;
+    /**
+     * Optional Element to display on upper Right corner
+     */
+    LastColumn?: string | React.ReactNode;
+}
+export default function AdjustableTable<T>(props: React.PropsWithChildren<TableProps<T>>): JSX.Element;
+export {};

package/lib/AdjustableTable/AdjustableTable.js

@@ -0,0 +1,255 @@
+"use strict";
+//  ******************************************************************************************************
+//  Adjustable.tsx - Gbtc
+//
+//  Copyright © 2023, 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:
+//  ----------------------------------------------------------------------------------------------------
+//  11/18/2023 - C. Lackner
+//       Generated original version of source code.
+//
+//  ******************************************************************************************************
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+var React = require("react");
+var _ = require("lodash");
+var Column_1 = require("./Column");
+var AdjustableColumn_1 = require("./AdjustableColumn");
+function AdjustableTable(props) {
+    var _a, _b, _c, _d;
+    var _e = React.useState(false), fixLayout = _e[0], setFixLayout = _e[1];
+    var _f = React.useState(new Map()), fixedWidths = _f[0], setFixedWidths = _f[1];
+    var _g = React.useState(new Map()), adjustedWidths = _g[0], setAdjustedWidths = _g[1];
+    var _h = React.useState((_b = (_a = React.Children.map(props.children, function (element) {
+        if (!React.isValidElement(element))
+            return undefined;
+        if (element.type === Column_1.default)
+            return element.props.Key;
+        return undefined;
+    })) === null || _a === void 0 ? void 0 : _a.filter(function (s) { return s !== undefined; })) !== null && _b !== void 0 ? _b : []), fixedkeys = _h[0], setFixedKeys = _h[1];
+    var _j = React.useState((_d = (_c = React.Children.map(props.children, function (element) {
+        if (!React.isValidElement(element))
+            return undefined;
+        if (element.type === AdjustableColumn_1.default)
+            return element.props.Key;
+        return undefined;
+    })) === null || _c === void 0 ? void 0 : _c.filter(function (d) { return d !== undefined; })) !== null && _d !== void 0 ? _d : []), adjKeys = _j[0], setAdjKeys = _j[1];
+    React.useEffect(function () {
+        var _a, _b;
+        var keysFixed = (_b = (_a = React.Children.map(props.children, function (element) {
+            if (!React.isValidElement(element))
+                return undefined;
+            if (element.type === Column_1.default)
+                return element.props.Key;
+            return undefined;
+        })) === null || _a === void 0 ? void 0 : _a.filter(function (k) { return k !== undefined; })) !== null && _b !== void 0 ? _b : [];
+        var keysAdj = React.Children.map(props.children, function (element) {
+            if (!React.isValidElement(element))
+                return undefined;
+            if (element.type === AdjustableColumn_1.default)
+                return element.props.Key;
+            return undefined;
+        });
+        setFixedKeys(function (k) {
+            var _a;
+            var u = (_a = keysFixed === null || keysFixed === void 0 ? void 0 : keysFixed.filter(function (d) { return d !== undefined; })) !== null && _a !== void 0 ? _a : [];
+            if (_.isEqual(k, u))
+                return k;
+            return u;
+        });
+        setAdjKeys(function (k) {
+            var _a;
+            var u = (_a = keysAdj === null || keysAdj === void 0 ? void 0 : keysAdj.filter(function (d) { return d !== undefined; })) !== null && _a !== void 0 ? _a : [];
+            if (_.isEqual(k, u))
+                return k;
+            return u;
+        });
+    }, [props.children]);
+    React.useEffect(function () {
+        setFixLayout(false);
+        setFixedWidths(new Map());
+        setAdjustedWidths(new Map());
+    }, [fixedkeys.length, adjKeys.length]);
+    React.useEffect(function () {
+        var fixed = fixedkeys.length == fixedWidths.size;
+        var adj = adjKeys.length == adjustedWidths.size;
+        setFixLayout(fixed && adj);
+    }, [fixedkeys, adjKeys, fixedWidths, adjustedWidths]);
+    var handleSort = React.useCallback(function (data, event) {
+        if (data.colKey !== null)
+            props.OnSort(data, event);
+    }, [props.OnSort]);
+    var getWidth = React.useCallback(function (key, type) {
+        var _a;
+        if (type === 'fixed' && fixedWidths.has(key))
+            return fixedWidths.get(key);
+        if (type === 'adjustable' && adjustedWidths.has(key))
+            return (_a = adjustedWidths.get(key)) === null || _a === void 0 ? void 0 : _a.width;
+        return undefined;
+    }, [fixedWidths, adjustedWidths]);
+    var getMinWidth = React.useCallback(function (key) {
+        var _a, _b;
+        if (adjustedWidths.has(key))
+            return (_b = (_a = adjustedWidths.get(key)) === null || _a === void 0 ? void 0 : _a.minWidth) !== null && _b !== void 0 ? _b : 100;
+        return 100;
+    }, [fixedWidths, adjustedWidths]);
+    var getPrevKey = React.useCallback(function (key) {
+        var i = adjKeys.findIndex(function (a) { return a === key; });
+        if (i < 1)
+            return undefined;
+        return adjKeys[i - 1];
+    }, [adjKeys]);
+    var setWidth = React.useCallback(function (key, width, type, minWidth) {
+        var _a, _b;
+        if (type === 'fixed')
+            setFixedWidths(function (d) {
+                var u = new Map(d);
+                u.set(key, width);
+                return u;
+            });
+        if (type === 'adjustable') {
+            if (adjustedWidths.has(key))
+                minWidth = (_b = (_a = adjustedWidths.get(key)) === null || _a === void 0 ? void 0 : _a.minWidth) !== null && _b !== void 0 ? _b : 100;
+            setAdjustedWidths(function (d) {
+                var u = new Map(d);
+                u.set(key, { width: width, minWidth: minWidth !== null && minWidth !== void 0 ? minWidth : 100 });
+                return u;
+            });
+        }
+    }, []);
+    return (React.createElement("table", { className: props.TableClass !== undefined ? props.TableClass : '', style: props.TableStyle },
+        React.createElement(Header, { Class: props.TheadClass, Style: props.TheadStyle, SortKey: props.SortKey, Ascending: props.Ascending, OnSort: handleSort, SetWidth: setWidth, GetWidth: getWidth, GetMinWidth: getMinWidth, GetLeftKey: getPrevKey, LastColumn: props.LastColumn, FixedLayout: fixLayout }, props.children),
+        React.createElement(Rows, { DragStart: props.OnDragStart, Data: props.Data, RowStyle: props.RowStyle, BodyStyle: props.TbodyStyle, BodyClass: props.TbodyClass, OnClick: props.OnClick, Selected: props.Selected, KeySelector: props.KeySelector, AdjWidth: adjustedWidths, FixedWidth: fixedWidths, FixedLayout: fixLayout }, props.children),
+        props.LastRow !== undefined ? React.createElement("tr", { style: (props.RowStyle !== undefined) ? __assign({}, props.RowStyle) : {}, key: -1 }, props.LastRow) : null));
+}
+exports.default = AdjustableTable;
+function Rows(props) {
+    if (props.Data.length === 0)
+        return null;
+    var getWidth = React.useCallback(function (key, type) {
+        var _a;
+        if (type === 'fixed' && props.FixedWidth.has(key))
+            return props.FixedWidth.get(key);
+        if (type === 'adjustable' && props.AdjWidth.has(key))
+            return (_a = props.AdjWidth.get(key)) === null || _a === void 0 ? void 0 : _a.width;
+        return undefined;
+    }, [props.FixedWidth, props.AdjWidth]);
+    return (React.createElement("tbody", { style: props.BodyStyle, className: props.BodyClass }, props.Data.map(function (d, i) {
+        var style = (props.RowStyle !== undefined) ? __assign({}, props.RowStyle) : {};
+        if (style.cursor === undefined && (props.OnClick !== undefined || props.DragStart !== undefined))
+            style.cursor = 'pointer';
+        if (props.Selected !== undefined && props.Selected(d))
+            style.backgroundColor = 'yellow';
+        var key = props.KeySelector(d);
+        return React.createElement("tr", { key: key, style: { display: (props.FixedLayout ? 'block' : undefined) } },
+            React.Children.map(props.children, function (element) {
+                if (!React.isValidElement(element))
+                    return null;
+                if (element.type === AdjustableColumn_1.default)
+                    return React.createElement(Column_1.ColumnDataWrapper, __assign({}, element.props, { width: getWidth(element.props.Key, 'adjustable'), item: d, index: i, key: element.key, fixedLayout: props.FixedLayout }));
+                return null;
+            }),
+            React.Children.map(props.children, function (element) {
+                if (!React.isValidElement(element))
+                    return null;
+                if (element.type === Column_1.default)
+                    return React.createElement(Column_1.ColumnDataWrapper, __assign({}, element.props, { width: getWidth(element.props.Key, 'fixed'), item: d, index: i, key: element.key, fixedLayout: props.FixedLayout }));
+                return null;
+            }));
+    })));
+}
+function Header(props) {
+    var trRef = React.useRef(null);
+    var _a = React.useState(undefined), adjKeys = _a[0], setAdjKeys = _a[1];
+    var _b = React.useState(0), mouseDown = _b[0], setMouseDown = _b[1];
+    var _c = React.useState(0), deltaX = _c[0], setDeltaX = _c[1];
+    var finishAdjustment = React.useCallback(function (e) {
+        var _a, _b;
+        var d = deltaX;
+        if (adjKeys === undefined)
+            return;
+        var w = limitMovement(adjKeys[0], adjKeys[1], d);
+        var leftWidth = (_a = props.GetWidth(adjKeys[0], 'adjustable')) !== null && _a !== void 0 ? _a : 100;
+        var rightWidth = (_b = props.GetWidth(adjKeys[1], 'adjustable')) !== null && _b !== void 0 ? _b : 100;
+        props.SetWidth(adjKeys[0], (leftWidth - w), 'adjustable');
+        props.SetWidth(adjKeys[1], (rightWidth + w), 'adjustable');
+        setMouseDown(0);
+        setAdjKeys(undefined);
+        setDeltaX(0);
+    }, [adjKeys]);
+    var onMove = React.useCallback(function (e) {
+        if (adjKeys === undefined)
+            return;
+        var w = limitMovement(adjKeys[0], adjKeys[1], mouseDown - e.screenX);
+        setDeltaX(w);
+    }, [mouseDown, adjKeys]);
+    function limitMovement(leftKey, rightKey, delta) {
+        var w = delta;
+        var leftWidth = props.GetWidth(leftKey, 'adjustable');
+        var rightWidth = props.GetWidth(rightKey, 'adjustable');
+        var leftMin = props.GetMinWidth(leftKey);
+        var rightMin = props.GetMinWidth(rightKey);
+        if ((leftWidth !== null && leftWidth !== void 0 ? leftWidth : 100) - w < leftMin) {
+            w = (leftWidth !== null && leftWidth !== void 0 ? leftWidth : 100) - leftMin;
+        }
+        if ((rightWidth !== null && rightWidth !== void 0 ? rightWidth : 100) + w < rightMin) {
+            w = (rightWidth !== null && rightWidth !== void 0 ? rightWidth : 100) - rightMin;
+        }
+        return w;
+    }
+    var adjustWidth = function (w, key) {
+        if (w === undefined)
+            return w;
+        if (adjKeys === undefined)
+            return w;
+        if (key === adjKeys[0])
+            return w - deltaX;
+        if (key === adjKeys[1])
+            return w + deltaX;
+    };
+    return (React.createElement("thead", { className: props.Class, style: props.Style, onMouseMove: function (e) { onMove(e.nativeEvent); e.stopPropagation(); }, onMouseUp: function (e) { finishAdjustment(e.nativeEvent); e.stopPropagation(); }, onMouseLeave: function (e) { finishAdjustment(e.nativeEvent); e.stopPropagation(); } },
+        React.createElement("tr", { ref: trRef },
+            React.Children.map(props.children, function (element) {
+                var _a;
+                if (!React.isValidElement(element))
+                    return null;
+                if (element.type === AdjustableColumn_1.default)
+                    return React.createElement(AdjustableColumn_1.AdjColumnHeaderWrapper, __assign({}, element.props, { setWidth: function (w, min) { return props.SetWidth(element.props.Key, w, 'adjustable', min); }, onSort: function (key, e, fld) { return props.OnSort({ colKey: key, colField: fld, ascending: props.Ascending }, e); }, sorted: props.SortKey === element.props.Key && ((_a = element.props.AllowSort) !== null && _a !== void 0 ? _a : true), asc: props.Ascending, width: adjustWidth(props.GetWidth(element.props.Key, 'adjustable'), element.props.Key), startAdjustment: function (e) {
+                            if (props.GetLeftKey(element.props.Key) !== undefined)
+                                setAdjKeys([props.GetLeftKey(element.props.Key), element.props.Key]);
+                            setMouseDown(e.screenX);
+                        }, fixedLayout: props.FixedLayout }));
+                return null;
+            }),
+            React.Children.map(props.children, function (element) {
+                var _a;
+                if (!React.isValidElement(element))
+                    return null;
+                if (element.type === Column_1.default)
+                    return React.createElement(Column_1.ColumnHeaderWrapper, __assign({}, element.props, { setWidth: function (w) { return props.SetWidth(element.props.Key, w, 'fixed'); }, onSort: function (key, e, fld) { return props.OnSort({ colKey: key, colField: fld, ascending: props.Ascending }, e); }, sorted: props.SortKey === element.props.Key && ((_a = element.props.AllowSort) !== null && _a !== void 0 ? _a : true), asc: props.Ascending, width: props.GetWidth(element.props.Key, 'fixed'), fixedLayout: props.FixedLayout }));
+                return null;
+            }),
+            React.createElement("th", { style: { width: 17, padding: 0 } }, props.LastColumn))));
+}

package/lib/AdjustableTable/Column.d.ts

@@ -0,0 +1,66 @@
+import * as React from 'react';
+export interface IColumnProps<T> {
+    /**
+     * a unique Key for this Collumn
+     */
+    Key: string;
+    /**
+     * Flag indicating whether sorting by this Collumn is allowed
+     */
+    AllowSort?: boolean;
+    /**
+     * Optional - the Field to be used
+     */
+    Field?: keyof T;
+    /**
+     * The Default style for the td element
+     */
+    RowStyle?: React.CSSProperties;
+    /**
+     * The Default style for the th element
+     */
+    HeaderStyle?: React.CSSProperties;
+    /**
+     * Determines the Content to be displaye
+     * @param d the data to be turned into content
+     * @returns the content displayed
+     */
+    Content?: (d: {
+        item: T;
+        key: string;
+        field: keyof T | undefined;
+        index: number;
+    }) => React.ReactNode;
+}
+export default function Column<T>(props: React.PropsWithChildren<IColumnProps<T>>): JSX.Element;
+interface IHeaderWrapperProps<T> extends IColumnProps<T> {
+    setWidth: (w: number) => void;
+    width?: number;
+    onSort: (key: string, event: any, field?: keyof T) => void;
+    sorted: boolean;
+    asc: boolean;
+    fixedLayout: boolean;
+}
+export declare function ColumnHeaderWrapper<T>(props: React.PropsWithChildren<IHeaderWrapperProps<T>>): JSX.Element;
+interface IDataWrapperProps<T> extends IColumnProps<T> {
+    width?: number;
+    item: T;
+    index: number;
+    dragStart: (data: {
+        colKey: string;
+        colField?: keyof T;
+        row: T;
+        data: T[keyof T] | null;
+        index: number;
+    }, e: any) => void;
+    onClick?: (data: {
+        colKey: string;
+        colField?: keyof T;
+        row: T;
+        data: T[keyof T] | null;
+        index: number;
+    }, e: React.MouseEvent<HTMLElement, MouseEvent>) => void;
+    fixedLayout: boolean;
+}
+export declare function ColumnDataWrapper<T>(props: IDataWrapperProps<T>): JSX.Element;
+export {};

package/lib/AdjustableTable/Column.js

@@ -0,0 +1,122 @@
+"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.
+//
+//  ******************************************************************************************************
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.ColumnDataWrapper = exports.ColumnHeaderWrapper = void 0;
+var gpa_symbols_1 = require("@gpa-gemstone/gpa-symbols");
+var helper_functions_1 = require("@gpa-gemstone/helper-functions");
+var React = require("react");
+function Column(props) {
+    return React.createElement(React.Fragment, null, props.children);
+}
+exports.default = Column;
+function ColumnHeaderWrapper(props) {
+    var _a, _b;
+    var thref = React.useRef(null);
+    var style = (props.RowStyle !== undefined) ? __assign({}, props.HeaderStyle) : {};
+    if (props.width !== undefined && props.fixedLayout) {
+        style.width = props.width;
+        style.minWidth = props.width;
+        style.maxWidth = props.width;
+        style.overflowX = 'hidden';
+        style.display = 'inline-block';
+    }
+    if (style.cursor === undefined && ((_a = props.AllowSort) !== null && _a !== void 0 ? _a : true)) {
+        style.cursor = 'pointer';
+    }
+    if (style.position === undefined) {
+        style.position = 'relative';
+    }
+    if (style.borderTop === undefined) {
+        style.borderTop = 'none';
+    }
+    React.useLayoutEffect(function () {
+        var _a;
+        if (thref.current == null || props.width !== undefined)
+            return;
+        var w = (_a = (0, helper_functions_1.GetNodeSize)(thref.current)) === null || _a === void 0 ? void 0 : _a.width;
+        if (w === undefined)
+            return;
+        props.setWidth(w);
+    });
+    var onClick = React.useCallback(function (e) {
+        props.onSort(props.Key, e, props.Field);
+    }, [props.onSort]);
+    return React.createElement("th", { ref: thref, style: style, onClick: onClick },
+        props.sorted && props.asc ? React.createElement("div", { style: { position: 'absolute', width: 25 } }, gpa_symbols_1.SVGIcons.ArrowDropDown) : null,
+        props.sorted && !props.asc ? React.createElement("div", { style: { position: 'absolute', width: 25 } }, gpa_symbols_1.SVGIcons.ArrowDropUp) : null,
+        React.createElement("div", { style: {
+                marginLeft: (props.sorted ? 25 : 0),
+            } }, (_b = props.children) !== null && _b !== void 0 ? _b : props.Key));
+}
+exports.ColumnHeaderWrapper = ColumnHeaderWrapper;
+function ColumnDataWrapper(props) {
+    var css = (props.RowStyle !== undefined) ? __assign({}, props.RowStyle) : {};
+    if (props.width !== undefined && props.fixedLayout) {
+        css.width = props.width;
+        css.minWidth = props.width;
+        css.maxWidth = props.width;
+        css.overflowX = 'hidden';
+        css.display = 'inline-block';
+    }
+    if (props.dragStart !== undefined)
+        css.cursor = "grab";
+    var getFieldValue = function () { return props.Field !== undefined ? props.item[props.Field] : null; };
+    var getFieldContent = function () { return props.Content !== undefined ? props.Content({
+        item: props.item,
+        key: props.Key,
+        field: props.Field,
+        index: props.index
+    }) : getFieldValue(); };
+    var onClick = React.useCallback(function (e) {
+        if (props.onClick !== undefined)
+            props.onClick({
+                colKey: props.Key,
+                colField: props.Field,
+                row: props.item,
+                data: getFieldValue(),
+                index: props.index
+            }, e);
+    }, [props.Key, props.Field, props.item, props.index, props.onClick]);
+    return (React.createElement("td", { style: css, onClick: onClick, draggable: props.dragStart !== undefined, onDragStart: function (e) {
+            props.dragStart({
+                colKey: props.Key,
+                colField: props.Field,
+                row: props.item,
+                data: getFieldValue(),
+                index: props.index
+            }, e);
+        } }, getFieldContent()));
+}
+exports.ColumnDataWrapper = ColumnDataWrapper;

package/lib/DynamicTable.js

@@ -25,7 +25,6 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.DynamicTable = void 0;
 var React = require("react");
 var Table_1 = require("./Table");
-var lodash_1 = require("lodash");
 var empty = new Map();
 function DynamicTable(props) {
     if (props.data.length <= 0)
@@ -37,8 +36,8 @@ function DynamicTable(props) {
         cols.push({ key: key, label: key, field: key });
     }
     return (React.createElement("table", { className: props.tableClass !== undefined ? props.tableClass : '', style: props.tableStyle },
-        React.createElement(Table_1.Header, { Class: props.theadClass, Style: props.theadStyle, Cols: cols, SortKey: props.sortKey, Ascending: props.ascending, Click: function (d) { return handleSort(d); }, SetResizeColIndex: function () { lodash_1.noop; }, AllowResize: false, Width: empty, MeasureWidth: function () { lodash_1.noop; } }),
-        React.createElement(Table_1.Rows, { Data: props.data, Cols: cols, RowStyle: props.rowStyle, BodyStyle: props.tbodyStyle, BodyClass: props.tbodyClass, Click: function (data, e) { return props.onClick(data, e); }, Selected: props.selected, KeySelector: props.keySelector, Width: empty, MeasureWidth: function () { lodash_1.noop; }, SetTBodyWidth: function () { lodash_1.noop; } })));
+        React.createElement(Table_1.Header, { Class: props.theadClass, Style: props.theadStyle, Cols: cols, SortKey: props.sortKey, Ascending: props.ascending, Click: function (d) { return handleSort(d); } }),
+        React.createElement(Table_1.Rows, { Data: props.data, Cols: cols, RowStyle: props.rowStyle, BodyStyle: props.tbodyStyle, BodyClass: props.tbodyClass, Click: function (data, e) { return props.onClick(data, e); }, Selected: props.selected, KeySelector: props.keySelector })));
     function handleSort(data) {
         if (data.colKey !== null)
             props.onSort(data);

package/lib/Table.d.ts

@@ -6,7 +6,6 @@ export interface Column<T> {
     headerStyle?: React.CSSProperties;
     rowStyle?: React.CSSProperties;
     content?(item: T, key: string, field: keyof T | undefined, style: React.CSSProperties, index: number): React.ReactNode;
-    allowResize?: boolean;
 }
 export interface TableProps<T> {
     /**
@@ -53,30 +52,11 @@ export interface TableProps<T> {
     }, e: any) => void);
     rowStyle?: React.CSSProperties;
     keySelector?: (data: T) => string;
-    /**
-     * Flag indicating if the collumns are resizable
-     * Default is <code>false</code>
-     */
-    allowResize?: boolean;
     /**
      * Optional Element to display in the last row of the Table
      * use this for displaying warnings when the Table content gets cut off
      */
     lastRow?: string | React.ReactNode;
-    /**
-     * Minimum width of a collumn when allowResize is true
-     */
-    MinColWidth?: number;
-    /**
-     * Function that updates the width of the Table - primary use is for collumn counting in Cnfigurable Table
-     * @param w - the width of the table in px
-     * @returns - void
-     */
-    UpdateWidth?: (w: number) => void;
-}
-interface IWidth {
-    header: number | undefined;
-    row: number | undefined;
 }
 export default function Table<T>(props: TableProps<T>): JSX.Element;
 interface IRowProps<T> {
@@ -101,9 +81,6 @@ interface IRowProps<T> {
     }, e: any) => void);
     Selected?: ((data: T) => boolean);
     KeySelector?: (data: T) => string;
-    Width: Map<string, IWidth>;
-    MeasureWidth: (key: string, width: number) => void;
-    SetTBodyWidth: (w: number) => void;
 }
 export declare function Rows<T>(props: IRowProps<T>): JSX.Element | null;
 interface IHeaderProps<T> {
@@ -112,16 +89,11 @@ interface IHeaderProps<T> {
     Cols: Column<T>[];
     SortKey: string;
     Ascending: boolean;
-    ResizeColIndex?: number;
-    SetResizeColIndex: (index: number, e: MouseEvent) => void;
     Click: (data: {
         colKey: string;
         colField?: keyof T;
         ascending: boolean;
     }, event: React.MouseEvent<HTMLElement, MouseEvent>) => void;
-    AllowResize: boolean;
-    Width: Map<string, IWidth>;
-    MeasureWidth: (key: string, width: number) => void;
 }
 export declare function Header<T>(props: IHeaderProps<T>): JSX.Element;
 export {};

package/lib/Table.js

@@ -35,225 +35,24 @@ var __assign = (this && this.__assign) || function () {
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.Header = exports.Rows = void 0;
 var gpa_symbols_1 = require("@gpa-gemstone/gpa-symbols");
-var helper_functions_1 = require("@gpa-gemstone/helper-functions");
 var React = require("react");
-var _ = require("lodash");
 function Table(props) {
-    var _a, _b;
-    var measuredWidth = React.useRef(new Map());
-    var incWidthChange = React.useRef(0);
-    var minimumColWidth = (_a = props.MinColWidth) !== null && _a !== void 0 ? _a : 100;
-    var _c = React.useState(null), resizingCol = _c[0], setResizingCol = _c[1];
-    var allowResize = (_b = props.allowResize) !== null && _b !== void 0 ? _b : false;
-    var _d = React.useState(new Map()), fixedWidths = _d[0], setFixedWidths = _d[1];
-    var _e = React.useState(0), positionX = _e[0], setPositionX = _e[1];
-    var _f = React.useState(0), totalWidth = _f[0], setTotalWidth = _f[1];
-    var nRow = React.useMemo(function () { return props.cols.length; }, [props.cols]);
-    React.useEffect(function () { if (props.UpdateWidth !== undefined)
-        props.UpdateWidth(totalWidth); }, [totalWidth]);
-    (0, helper_functions_1.useEffectWithPrevious)(function (r) {
-        if (r === 0 || r === undefined)
-            return;
-        var updatedWidth = _.cloneDeep(fixedWidths);
-        var measuredPrevTotal = Array.from(measuredWidth.current.keys()).reduce(function (s, k) {
-            var _a, _b;
-            return s + Math.max(((_b = (_a = measuredWidth.current.get(k)) === null || _a === void 0 ? void 0 : _a.header) !== null && _b !== void 0 ? _b : 0), minimumColWidth);
-        }, 0);
-        var diff = measuredPrevTotal - totalWidth;
-        props.cols.forEach(function (c) {
-            if (!measuredWidth.current.has(c.key))
-                updatedWidth.set(c.key, { row: minimumColWidth, header: minimumColWidth });
-        });
-        var keys = props.cols
-            .filter(function (c) {
-            var _a, _b, _c, _d, _e;
-            return ((_a = c.allowResize) !== null && _a !== void 0 ? _a : true) && updatedWidth.has(c.key) &&
-                ((_c = (_b = updatedWidth === null || updatedWidth === void 0 ? void 0 : updatedWidth.get(c.key)) === null || _b === void 0 ? void 0 : _b.header) !== null && _c !== void 0 ? _c : 0) > minimumColWidth && ((_e = (_d = updatedWidth === null || updatedWidth === void 0 ? void 0 : updatedWidth.get(c.key)) === null || _d === void 0 ? void 0 : _d.row) !== null && _e !== void 0 ? _e : 0) > minimumColWidth;
-        }).map(function (c) { return c.key; });
-        var _loop_1 = function () {
-            var deltaCol = diff / keys.length;
-            keys.forEach(function (k) {
-                var _a, _b, _c, _d;
-                var dCol = determineMaxMovement(updatedWidth === null || updatedWidth === void 0 ? void 0 : updatedWidth.get(k), deltaCol);
-                updatedWidth.get(k).header = ((_b = (_a = updatedWidth.get(k)) === null || _a === void 0 ? void 0 : _a.header) !== null && _b !== void 0 ? _b : 0) - dCol;
-                updatedWidth.get(k).row = ((_d = (_c = updatedWidth.get(k)) === null || _c === void 0 ? void 0 : _c.row) !== null && _d !== void 0 ? _d : 0) - dCol;
-                diff = diff - dCol;
-            });
-            keys = keys.filter(function (c) { var _a, _b, _c, _d; return ((_b = (_a = updatedWidth === null || updatedWidth === void 0 ? void 0 : updatedWidth.get(c)) === null || _a === void 0 ? void 0 : _a.header) !== null && _b !== void 0 ? _b : 0) > minimumColWidth && ((_d = (_c = updatedWidth === null || updatedWidth === void 0 ? void 0 : updatedWidth.get(c)) === null || _c === void 0 ? void 0 : _c.row) !== null && _d !== void 0 ? _d : 0) > minimumColWidth; });
-        };
-        while (keys.length > 0 && Math.abs(diff) > 1) {
-            _loop_1();
-        }
-        setFixedWidths(updatedWidth);
-    }, nRow);
-    (0, helper_functions_1.useEffectWithPrevious)(function (prevWidth) {
-        if (totalWidth === 0 || prevWidth === 0 || prevWidth === undefined)
-            return;
-        if (props.allowResize === undefined || !props.allowResize)
-            return;
-        var change = prevWidth - totalWidth;
-        if (Math.abs(change + incWidthChange.current) < 10) {
-            incWidthChange.current = incWidthChange.current + change;
-            return;
-        }
-        incWidthChange.current = 0;
-        var measuredPrevTotal = Array.from(measuredWidth.current.keys()).reduce(function (s, k) {
-            var _a, _b;
-            return s + ((_b = (_a = measuredWidth.current.get(k)) === null || _a === void 0 ? void 0 : _a.header) !== null && _b !== void 0 ? _b : 0);
-        }, 0);
-        var updatedWidth = _.cloneDeep(fixedWidths);
-        var diff = measuredPrevTotal - totalWidth;
-        //return;
-        var keys = props.cols
-            .filter(function (c) {
-            var _a, _b, _c, _d, _e;
-            return ((_a = c.allowResize) !== null && _a !== void 0 ? _a : true) && updatedWidth.has(c.key) &&
-                ((_c = (_b = updatedWidth === null || updatedWidth === void 0 ? void 0 : updatedWidth.get(c.key)) === null || _b === void 0 ? void 0 : _b.header) !== null && _c !== void 0 ? _c : 0) > minimumColWidth && ((_e = (_d = updatedWidth === null || updatedWidth === void 0 ? void 0 : updatedWidth.get(c.key)) === null || _d === void 0 ? void 0 : _d.row) !== null && _e !== void 0 ? _e : 0) > minimumColWidth;
-        }).map(function (c) { return c.key; });
-        var _loop_2 = function () {
-            var deltaCol = diff / keys.length;
-            keys.forEach(function (k) {
-                var _a, _b, _c, _d;
-                var dCol = determineMaxMovement(updatedWidth.get(k), deltaCol);
-                updatedWidth.get(k).header = ((_b = (_a = updatedWidth.get(k)) === null || _a === void 0 ? void 0 : _a.header) !== null && _b !== void 0 ? _b : 0) - dCol;
-                updatedWidth.get(k).row = ((_d = (_c = updatedWidth.get(k)) === null || _c === void 0 ? void 0 : _c.row) !== null && _d !== void 0 ? _d : 0) - dCol;
-                diff = diff - dCol;
-            });
-            keys = keys.filter(function (c) { var _a, _b, _c, _d; return ((_b = (_a = updatedWidth === null || updatedWidth === void 0 ? void 0 : updatedWidth.get(c)) === null || _a === void 0 ? void 0 : _a.header) !== null && _b !== void 0 ? _b : 0) > minimumColWidth && ((_d = (_c = updatedWidth === null || updatedWidth === void 0 ? void 0 : updatedWidth.get(c)) === null || _c === void 0 ? void 0 : _c.row) !== null && _d !== void 0 ? _d : 0) > minimumColWidth; });
-        };
-        while (keys.length > 0 && Math.abs(diff) > 1) {
-            _loop_2();
-        }
-        setFixedWidths(updatedWidth);
-    }, totalWidth);
-    var handleSort = React.useCallback(function (data, event) {
+    return (React.createElement("table", { className: props.tableClass !== undefined ? props.tableClass : '', style: props.tableStyle },
+        React.createElement(Header, { Class: props.theadClass, Style: props.theadStyle, Cols: props.cols, SortKey: props.sortKey, Ascending: props.ascending, Click: function (d, e) { return handleSort(d, e); } }),
+        React.createElement(Rows, { DragStart: props.onDragStart, Data: props.data, Cols: props.cols, RowStyle: props.rowStyle, BodyStyle: props.tbodyStyle, BodyClass: props.tbodyClass, Click: function (data, e) { return (props.onClick === undefined ? null : props.onClick(data, e)); }, Selected: props.selected, KeySelector: props.keySelector }),
+        props.lastRow !== undefined ? React.createElement("tr", { style: (props.rowStyle !== undefined) ? __assign({}, props.rowStyle) : {}, key: -1 }, props.lastRow) : null));
+    function handleSort(data, event) {
         if (data.colKey !== null)
             props.onSort(data, event);
-    }, [props.onSort]);
-    var handleResizeSelect = React.useCallback(function (i, e) {
-        var _a;
-        if ((_a = props.allowResize) !== null && _a !== void 0 ? _a : false) {
-            setResizingCol(i);
-            setPositionX(e.clientX);
-        }
-    }, [props.allowResize]);
-    var handleMouseUp = React.useCallback(function (i) {
-        if (resizingCol === null)
-            return;
-        setResizingCol(null);
-    }, [resizingCol]);
-    var handleMouseMove = React.useCallback(function (e) {
-        var _a, _b, _c, _d, _e, _f, _g, _h;
-        if (resizingCol === null)
-            return;
-        var dW = positionX - e.clientX;
-        if (dW == 0)
-            return;
-        // try to reduce index on left by dW
-        var wLeft = 0, whLeft = 0;
-        var wRight = 0, whRight = 0;
-        if (!measuredWidth.current.has(props.cols[resizingCol - 1].key) ||
-            !measuredWidth.current.has(props.cols[resizingCol].key))
-            return;
-        whLeft = (_b = (_a = measuredWidth.current.get(props.cols[resizingCol - 1].key)) === null || _a === void 0 ? void 0 : _a.header) !== null && _b !== void 0 ? _b : 0;
-        whRight = (_d = (_c = measuredWidth.current.get(props.cols[resizingCol].key)) === null || _c === void 0 ? void 0 : _c.header) !== null && _d !== void 0 ? _d : 0;
-        wLeft = (_f = (_e = measuredWidth.current.get(props.cols[resizingCol - 1].key)) === null || _e === void 0 ? void 0 : _e.row) !== null && _f !== void 0 ? _f : 0;
-        wRight = (_h = (_g = measuredWidth.current.get(props.cols[resizingCol].key)) === null || _g === void 0 ? void 0 : _g.row) !== null && _h !== void 0 ? _h : 0;
-        if (dW > 0)
-            dW = determineMaxMovement(measuredWidth.current.get(props.cols[resizingCol - 1].key), dW);
-        else
-            dW = -determineMaxMovement(measuredWidth.current.get(props.cols[resizingCol].key), -dW);
-        if (dW === 0)
-            return;
-        setPositionX(e.clientX);
-        setFixedWidths(function (d) {
-            var _a, _b, _c, _d, _e, _f, _g, _h;
-            var u = new Map(d);
-            if (!u.has(props.cols[resizingCol - 1].key))
-                u.set(props.cols[resizingCol - 1].key, { header: undefined, row: undefined });
-            else {
-                whLeft = (_b = (_a = u.get(props.cols[resizingCol - 1].key)) === null || _a === void 0 ? void 0 : _a.header) !== null && _b !== void 0 ? _b : 0;
-                wLeft = (_d = (_c = u.get(props.cols[resizingCol - 1].key)) === null || _c === void 0 ? void 0 : _c.row) !== null && _d !== void 0 ? _d : 0;
-            }
-            if (!u.has(props.cols[resizingCol].key))
-                u.set(props.cols[resizingCol].key, { header: undefined, row: undefined });
-            else {
-                whRight = (_f = (_e = u.get(props.cols[resizingCol].key)) === null || _e === void 0 ? void 0 : _e.header) !== null && _f !== void 0 ? _f : 0;
-                wRight = (_h = (_g = u.get(props.cols[resizingCol].key)) === null || _g === void 0 ? void 0 : _g.row) !== null && _h !== void 0 ? _h : 0;
-            }
-            u.get(props.cols[resizingCol - 1].key).header = whLeft - dW;
-            u.get(props.cols[resizingCol].key).header = whRight + dW;
-            u.get(props.cols[resizingCol - 1].key).row = wLeft - dW;
-            u.get(props.cols[resizingCol].key).row = wRight + dW;
-            return u;
-        });
-    }, [resizingCol, positionX]);
-    var determineMaxMovement = function (w, dW) {
-        var _a, _b, _c;
-        if (dW < 0)
-            return dW;
-        if (w === undefined)
-            return 0;
-        if (((_a = w.header) !== null && _a !== void 0 ? _a : 0) <= minimumColWidth || ((_b = w.row) !== null && _b !== void 0 ? _b : 0) <= minimumColWidth)
-            return 0;
-        if (w.row === undefined || w.row === 0)
-            return Math.min(dW, (((_c = w.header) !== null && _c !== void 0 ? _c : 0) - minimumColWidth));
-        if (w.header === undefined || w.header === 0)
-            return Math.min(dW, (w.row - minimumColWidth));
-        var ratio = w.header / w.row;
-        if (ratio > 1)
-            return Math.min(dW, (w.row - minimumColWidth));
-        return Math.min(dW, (w.header - minimumColWidth));
-    };
-    var measureRowWidth = React.useCallback(function (key, width) {
-        var _a, _b, _c;
-        if (measuredWidth.current.has(key))
-            measuredWidth.current.get(key).row = width;
-        else
-            measuredWidth.current.set(key, { header: undefined, row: width });
-        var canResize = (_b = (_a = props.cols.find(function (c) { return c.key === key; })) === null || _a === void 0 ? void 0 : _a.allowResize) !== null && _b !== void 0 ? _b : true;
-        if ((!fixedWidths.has(key) || (((_c = fixedWidths.get(key)) === null || _c === void 0 ? void 0 : _c.row) === undefined)))
-            setFixedWidths(function (d) {
-                var _a;
-                var u = new Map(d);
-                u.set(key, { header: (_a = u.get(key)) === null || _a === void 0 ? void 0 : _a.header, row: width });
-                return u;
-            });
-    }, [props.cols, fixedWidths]);
-    var measureHeaderWidth = React.useCallback(function (key, width) {
-        if (measuredWidth.current.has(key))
-            measuredWidth.current.get(key).header = width;
-        else
-            measuredWidth.current.set(key, { header: width, row: undefined });
-        if ((!fixedWidths.has(key) || fixedWidths.get(key).header === undefined))
-            setFixedWidths(function (d) {
-                var _a;
-                var u = new Map(d);
-                u.set(key, { row: (_a = u.get(key)) === null || _a === void 0 ? void 0 : _a.row, header: width });
-                return u;
-            });
-    }, [props.cols, fixedWidths]);
-    return (React.createElement("table", { className: props.tableClass !== undefined ? props.tableClass : '', style: props.tableStyle, onMouseLeave: handleMouseUp, onMouseMove: handleMouseMove, onMouseUp: handleMouseUp },
-        React.createElement(Header, { Class: props.theadClass, Style: props.theadStyle, Cols: props.cols, SortKey: props.sortKey, Ascending: props.ascending, Click: function (d, e) { return handleSort(d, e); }, SetResizeColIndex: handleResizeSelect, AllowResize: allowResize, MeasureWidth: measureHeaderWidth, Width: fixedWidths }),
-        React.createElement(Rows, { MeasureWidth: measureRowWidth, Width: fixedWidths, DragStart: props.onDragStart, Data: props.data, Cols: props.cols, RowStyle: props.rowStyle, BodyStyle: props.tbodyStyle, BodyClass: props.tbodyClass, Click: function (data, e) { return (props.onClick === undefined ? null : props.onClick(data, e)); }, Selected: props.selected, KeySelector: props.keySelector, SetTBodyWidth: setTotalWidth }),
-        props.lastRow !== undefined ? React.createElement("tr", { style: (props.rowStyle !== undefined) ? __assign({}, props.rowStyle) : {}, key: -1 }, props.lastRow) : null));
+    }
 }
 exports.default = Table;
 function Rows(props) {
-    var tbody = React.useRef(null);
-    React.useLayoutEffect(function () {
-        var _a, _b;
-        if (tbody.current == null)
-            return;
-        var w = (_b = (_a = (0, helper_functions_1.GetNodeSize)(tbody.current)) === null || _a === void 0 ? void 0 : _a.width) !== null && _b !== void 0 ? _b : 0;
-        props.SetTBodyWidth(w);
-    });
     if (props.Data.length === 0)
         return null;
     var rows = props.Data.map(function (item, rowIndex) {
         var cells = props.Cols.map(function (colData) {
-            var _a;
-            return React.createElement(Cell, { key: colData.key, Style: colData.rowStyle, DataKey: colData.key, DataField: colData.field, Object: item, RowIndex: rowIndex, Content: colData.content, Click: function (data, e) { return props.Click(data, e); }, DragStart: props.DragStart, MeasureWidth: function (w) { return props.MeasureWidth(colData.key, w); }, Width: (_a = props.Width.get(colData.key)) === null || _a === void 0 ? void 0 : _a.row });
+            return React.createElement(Cell, { key: colData.key, Style: colData.rowStyle, DataKey: colData.key, DataField: colData.field, Object: item, RowIndex: rowIndex, Content: colData.content, Click: function (data, e) { return props.Click(data, e); }, DragStart: props.DragStart });
         });
         var style = (props.RowStyle !== undefined) ? __assign({}, props.RowStyle) : {};
         if (style.cursor === undefined)
@@ -267,95 +66,34 @@ function Rows(props) {
         }
         return (React.createElement("tr", { style: style, key: ToKey(rowIndex, item) }, cells));
     });
-    return (React.createElement("tbody", { ref: tbody, style: props.BodyStyle, className: props.BodyClass }, rows));
+    return (React.createElement("tbody", { style: props.BodyStyle, className: props.BodyClass }, rows));
 }
 exports.Rows = Rows;
 function Cell(props) {
-    var tdRef = React.useRef(null);
-    var css = React.useMemo(function () { return (props.Style !== undefined) ? __assign(__assign({}, props.Style), { width: (props.Width !== undefined) ? props.Width : props.Style.width }) : {
-        width: (props.Width !== undefined) ? props.Width : undefined
-    }; }, [props.Width, props.Style]);
+    var css = (props.Style !== undefined) ? __assign({}, props.Style) : {};
     if (props.DragStart !== undefined)
         css.cursor = "grab";
     var getFieldValue = function () { return props.DataField !== undefined ? props.Object[props.DataField] : null; };
     var getFieldContent = function () { return props.Content !== undefined ? props.Content(props.Object, props.DataKey, props.DataField, css, props.RowIndex) : getFieldValue(); };
-    React.useEffect(function () {
-        var _a, _b;
-        if (tdRef.current == null)
-            return;
-        var w = (_b = (_a = (0, helper_functions_1.GetNodeSize)(tdRef.current)) === null || _a === void 0 ? void 0 : _a.width) !== null && _b !== void 0 ? _b : 0;
-        props.MeasureWidth(w - 1);
-    });
-    return (React.createElement("td", { ref: tdRef, style: css, onClick: function (e) { return props.Click({ colKey: props.DataKey, colField: props.DataField, row: props.Object, data: getFieldValue(), index: props.RowIndex }, e); }, draggable: props.DragStart !== undefined, onDragStart: function (e) { if (props.DragStart !== undefined)
+    return (React.createElement("td", { style: css, onClick: function (e) { return props.Click({ colKey: props.DataKey, colField: props.DataField, row: props.Object, data: getFieldValue(), index: props.RowIndex }, e); }, draggable: props.DragStart !== undefined, onDragStart: function (e) { if (props.DragStart !== undefined)
             props.DragStart({ colKey: props.DataKey, colField: props.DataField, row: props.Object, data: getFieldValue(), index: props.RowIndex }, e); } }, getFieldContent()));
 }
 function Header(props) {
-    var _a = React.useState(-1), lastResize = _a[0], setLastResize = _a[1];
-    var _b = React.useState(-1), firstResize = _b[0], setFirstResize = _b[1];
-    React.useEffect(function () {
-        var last = (0, helper_functions_1.findLastIndex)(props.Cols, function (c) { return c.allowResize === undefined || c.allowResize; });
-        var first = props.Cols.findIndex(function (c) { return c.allowResize === undefined || c.allowResize; });
-        setFirstResize(first);
-        setLastResize(last);
-    }, [props.Cols]);
-    var allowResize = React.useCallback(function (col, i) {
-        if (i == 0 || !props.AllowResize)
-            return false;
-        if (firstResize > -1 && i <= firstResize)
-            return false;
-        if (lastResize > -1 && i > lastResize)
-            return false;
-        return true;
-    }, [firstResize, lastResize]);
     return (React.createElement("thead", { className: props.Class, style: props.Style },
-        React.createElement("tr", null, props.Cols.map(function (col, i) {
-            var _a;
-            return React.createElement(HeaderCell, { key: col.key, HeaderStyle: col.headerStyle, DataKey: col.key, Click: function (e) { return props.Click({ colKey: col.key, colField: col.field, ascending: props.Ascending }, e); }, Label: col.label, SortKey: props.SortKey, Ascending: props.Ascending, PullBorder: allowResize(col, i) ? function (e) { props.SetResizeColIndex(i, e); } : undefined, MeasureWidth: function (width) { return props.MeasureWidth(col.key, width); }, Width: (_a = props.Width.get(col.key)) === null || _a === void 0 ? void 0 : _a.header });
-        }))));
+        React.createElement("tr", null, props.Cols.map(function (col) { return React.createElement(HeaderCell, { key: col.key, HeaderStyle: col.headerStyle, DataKey: col.key, Click: function (e) { return props.Click({ colKey: col.key, colField: col.field, ascending: props.Ascending }, e); }, Label: col.label, SortKey: props.SortKey, Ascending: props.Ascending }); }))));
 }
 exports.Header = Header;
 function HeaderCell(props) {
-    var thRef = React.useRef(null);
-    var _a = React.useState(false), showBorder = _a[0], setShowBorder = _a[1];
-    var style = React.useMemo(function () { return (props.HeaderStyle !== undefined) ? __assign(__assign({}, props.HeaderStyle), { width: (props.Width !== undefined) ? props.Width : props.HeaderStyle.width }) : {
-        width: (props.Width !== undefined) ? props.Width : undefined
-    }; }, [props.Width, props.HeaderStyle]);
+    var style = (props.HeaderStyle !== undefined) ? props.HeaderStyle : {};
     if (style.cursor === undefined && props.DataKey !== null) {
         style.cursor = 'pointer';
     }
     if (style.position === undefined) {
         style.position = 'relative';
     }
-    React.useEffect(function () {
-        var _a;
-        if (thRef.current == null)
-            return;
-        var w = (_a = (0, helper_functions_1.GetNodeSize)(thRef.current)) === null || _a === void 0 ? void 0 : _a.width;
-        if (w === undefined)
-            return;
-        props.MeasureWidth(w - 1);
-    });
-    var onHover = React.useCallback(function () { setShowBorder(true); }, []);
-    var onLeave = React.useCallback(function () { setShowBorder(false); }, []);
-    var onClick = React.useCallback(function (e) { if (showBorder) {
-        props.PullBorder(e.nativeEvent);
-        e.stopPropagation();
-    } }, [showBorder]);
-    return (React.createElement("th", { ref: thRef, style: style, onClick: function (e) { return props.Click(e); } },
-        props.PullBorder != undefined ? 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: onClick }) : null,
+    return (React.createElement("th", { style: style, onClick: function (e) { return props.Click(e); } },
         React.createElement(RenderAngleIcon, { SortKey: props.SortKey, Key: props.DataKey, Ascending: props.Ascending }),
-        React.createElement("div", { style: {
-                marginLeft: (props.SortKey === props.DataKey ? 25 : 0),
-            } }, props.Label)));
+        React.createElement("div", { style: { marginLeft: (props.SortKey === props.DataKey ? 25 : 0) } }, props.Label)));
 }
 function RenderAngleIcon(props) {
     var AngleIcon = function (a) { return a.ascending ? gpa_symbols_1.SVGIcons.ArrowDropUp : gpa_symbols_1.SVGIcons.ArrowDropDown; };

package/lib/index.d.ts

@@ -3,5 +3,13 @@ import { SelectTable, ISelectTableProps } from './SelectTable';
 import { SearchableTable } from './SearchableTable';
 import { DynamicTableProps, DynamicTable } from './DynamicTable';
 import Paging from './Paging';
-export { TableProps, SelectTable, ISelectTableProps, SearchableTable, DynamicTable, DynamicTableProps, Rows, Column, Paging };
+import AdjustableTable from './AdjustableTable/AdjustableTable';
+import UpdatedColumn from './AdjustableTable/Column';
+import AdjustableCol from './AdjustableTable/AdjustableColumn';
+declare const ReactTable: {
+    Table: typeof AdjustableTable;
+    Column: typeof UpdatedColumn;
+    AdjustableCol: typeof AdjustableCol;
+};
+export { ReactTable, TableProps, SelectTable, ISelectTableProps, SearchableTable, DynamicTable, DynamicTableProps, Rows, Column, Paging };
 export default Table;

package/lib/index.js

@@ -24,7 +24,7 @@
 //
 //  ******************************************************************************************************
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.Paging = exports.Rows = exports.DynamicTable = exports.SearchableTable = exports.SelectTable = void 0;
+exports.Paging = exports.Rows = exports.DynamicTable = exports.SearchableTable = exports.SelectTable = exports.ReactTable = void 0;
 var Table_1 = require("./Table");
 Object.defineProperty(exports, "Rows", { enumerable: true, get: function () { return Table_1.Rows; } });
 var SelectTable_1 = require("./SelectTable");
@@ -35,4 +35,13 @@ var DynamicTable_1 = require("./DynamicTable");
 Object.defineProperty(exports, "DynamicTable", { enumerable: true, get: function () { return DynamicTable_1.DynamicTable; } });
 var Paging_1 = require("./Paging");
 exports.Paging = Paging_1.default;
+var AdjustableTable_1 = require("./AdjustableTable/AdjustableTable");
+var Column_1 = require("./AdjustableTable/Column");
+var AdjustableColumn_1 = require("./AdjustableTable/AdjustableColumn");
+var ReactTable = {
+    Table: AdjustableTable_1.default,
+    Column: Column_1.default,
+    AdjustableCol: AdjustableColumn_1.default,
+};
+exports.ReactTable = ReactTable;
 exports.default = Table_1.default;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@gpa-gemstone/react-table",
-  "version": "1.2.30",
+  "version": "1.2.32",
   "description": "Table for GPA web applications",
   "main": "lib/index.js",
   "types": "lib/index.d.ts",
@@ -43,7 +43,7 @@
   },
   "dependencies":   {
     "@gpa-gemstone/gpa-symbols": "0.0.28",
-    "@gpa-gemstone/helper-functions": "0.0.26",
+    "@gpa-gemstone/helper-functions": "0.0.27",
     "@types/lodash": "^4.14.171",
     "@types/react": "^17.0.14",
     "lodash": "^4.17.21",