@gpa-gemstone/react-table 1.2.57 → 1.2.58

package/lib/AdjustableTable/Table.js

@@ -1,6 +1,6 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.default = AdjustableTable;
+exports.AdjustableTable = AdjustableTable;
 //  ******************************************************************************************************
 //  Table.tsx - Gbtc
 //
@@ -23,32 +23,192 @@ exports.default = AdjustableTable;
 //       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.
 //
 //  ******************************************************************************************************
 const React = require("react");
 const _ = require("lodash");
 const Column_1 = require("./Column");
-const AdjustableColumn_1 = require("./AdjustableColumn");
 const defaultTableStyle = {
     padding: 0,
-    width: '100%',
-    height: '100%',
+    flex: 1,
     tableLayout: 'fixed',
     overflow: 'hidden',
     display: 'flex',
     flexDirection: 'column',
     marginBottom: 0,
+    width: '100%'
 };
+const defaultHeadStyle = {
+    fontSize: 'auto',
+    tableLayout: 'fixed',
+    display: 'table',
+    width: '100%'
+};
+const defaultBodyStyle = {
+    flex: 1,
+    display: 'block',
+    overflow: 'auto'
+};
+const defaultRowStyle = {
+    display: 'table',
+    tableLayout: 'fixed',
+    width: '100%'
+};
+const defaultDataHeadStyle = {
+    display: 'inline-block',
+    position: 'relative',
+    borderTop: 'none',
+    width: 'auto'
+};
+const defaultDataCellStyle = {
+    overflowX: 'hidden',
+    display: 'inline-block',
+    width: 'auto'
+};
+const IsColumnProps = (props) => ((props === null || props === void 0 ? void 0 : props['Key']) != null);
 function AdjustableTable(props) {
-    var _a;
     const bodyRef = React.useRef(null);
-    const throtleRef = React.useRef(null);
-    const colCountRef = React.useRef(null);
-    const autoWidth = React.useRef(new Map());
-    const [autoWidthVersion, setAutoWidthVersion] = React.useState(0);
+    const colWidthsRef = React.useRef(new Map());
+    const oldWidthRef = React.useRef(0);
     const [currentTableWidth, setCurrentTableWidth] = React.useState(0);
     const [scrolled, setScrolled] = React.useState(false);
-    const [extraWidthPerRow, setExtraWidthPerRow] = React.useState(0);
+    const [trigger, setTrigger] = React.useState(0);
+    // Style consts
+    const tableStyle = React.useMemo(() => (Object.assign(Object.assign({}, defaultTableStyle), props.TableStyle)), [props.TableStyle]);
+    const headStyle = React.useMemo(() => (Object.assign(Object.assign({}, defaultHeadStyle), props.TheadStyle)), [props.TheadStyle]);
+    const bodyStyle = React.useMemo(() => (Object.assign(Object.assign({}, defaultBodyStyle), props.TbodyStyle)), [props.TbodyStyle]);
+    const rowStyle = React.useMemo(() => (Object.assign(Object.assign({}, defaultRowStyle), props.RowStyle)), [props.RowStyle]);
+    // Send warning if styles are overridden
+    React.useEffect(() => {
+        if (props.TableStyle !== undefined)
+            console.warn('TableStyle properties may be overridden if needed. consider using the defaults');
+        if (props.TheadStyle !== undefined)
+            console.warn('TheadStyle properties may be overridden if needed. consider using the defaults');
+        if (props.TbodyStyle !== undefined)
+            console.warn('TBodyStyle properties may be overridden if needed. consider using the defaults');
+        if (props.RowStyle !== undefined)
+            console.warn('RowStyle properties may be overridden if needed. consider using the defaults');
+    }, []);
+    // Measure widths and hide columns
+    React.useLayoutEffect(() => {
+        if (currentTableWidth <= 0)
+            return;
+        // Helper functions for the calculations
+        const getWidthfromProps = (p, type) => {
+            var _a, _b;
+            // This priotizes rowstyling for width over header, since it was decided that they need to be the same
+            if (((_a = p === null || p === void 0 ? void 0 : p.RowStyle) === null || _a === void 0 ? void 0 : _a[type]) !== undefined)
+                return p.RowStyle[type];
+            if (((_b = p === null || p === void 0 ? void 0 : p.HeaderStyle) === null || _b === void 0 ? void 0 : _b[type]) !== undefined)
+                return p.HeaderStyle[type];
+            return undefined;
+        };
+        // Construct base map
+        const newMap = new Map();
+        React.Children.forEach(props.children, (element) => {
+            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 });
+            }
+        });
+        // If width is the same and keys are identical, we can skip the operation
+        if (currentTableWidth === oldWidthRef.current &&
+            (newMap.size === colWidthsRef.current.size &&
+                ![...newMap.keys()].some(key => !colWidthsRef.current.has(key))))
+            return;
+        // Find and set widths for map
+        ['minWidth', 'width', 'maxWidth'].forEach(type => {
+            const widthsContainer = document.createElement("div");
+            widthsContainer.style.height = '0px';
+            widthsContainer.style.width = `${currentTableWidth}px`;
+            // Append columns as divs for measurement
+            const autoKeys = [];
+            const measureKeys = [];
+            React.Children.forEach(props.children, (element) => {
+                if (React.isValidElement(element) && IsColumnProps(element.props)) {
+                    let widthValue = getWidthfromProps(element.props, type);
+                    if (type === 'width' && widthValue == null)
+                        widthValue = 'auto';
+                    if (widthValue != null) {
+                        if (widthValue === 'auto')
+                            autoKeys.push(element.props.Key);
+                        else {
+                            const widthElement = document.createElement("div");
+                            widthElement.id = element.props.Key + "_measurement";
+                            widthElement.style.height = '0px';
+                            if ((widthValue === null || widthValue === void 0 ? void 0 : widthValue.length) != null)
+                                widthElement.style.width = widthValue;
+                            else
+                                widthElement.style.width = `${widthValue}px`;
+                            widthsContainer.appendChild(widthElement);
+                            measureKeys.push(element.props.Key);
+                        }
+                    }
+                }
+            });
+            document.body.appendChild(widthsContainer);
+            // Handle Measurements
+            let autoSpace = currentTableWidth;
+            measureKeys.forEach(key => {
+                const element = document.getElementById(key + "_measurement");
+                if (element != null) {
+                    const widthObj = newMap.get(key);
+                    if (widthObj != null) {
+                        autoSpace -= element.clientWidth;
+                        widthObj[type] = element.clientWidth;
+                    }
+                    else
+                        console.error("Could not find width object for Key: " + key);
+                }
+                else
+                    console.error("Could not find measurement div with Key: " + key);
+            });
+            document.body.removeChild(widthsContainer);
+            // Handle Autos (width type only)
+            if (type === 'width' && autoKeys.length > 0) {
+                const spacePerElement = Math.floor(autoSpace / autoKeys.length);
+                autoKeys.forEach(key => {
+                    const widthObj = newMap.get(key);
+                    if (widthObj != null)
+                        widthObj[type] = spacePerElement;
+                    else
+                        console.error("Could not find width object for Key: " + key);
+                });
+            }
+            let remainingSpace = currentTableWidth;
+            [...newMap.keys()].forEach(key => {
+                const widthObj = newMap.get(key);
+                if (widthObj != null) {
+                    if (widthObj.minWidth <= remainingSpace) {
+                        // 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)
+                            widthObj.maxWidth = widthObj.minWidth;
+                        if (widthObj.width > widthObj.maxWidth)
+                            widthObj.width = widthObj.maxWidth;
+                        // Constrain Width to remainingSpace
+                        if (widthObj.width > remainingSpace)
+                            widthObj.width = remainingSpace;
+                        remainingSpace -= widthObj.width;
+                    }
+                    else {
+                        widthObj.minWidth = 0;
+                        widthObj.width = 0;
+                        widthObj.maxWidth = 0;
+                    }
+                }
+                else
+                    console.error("Could not find width object for Key: " + key);
+            });
+        });
+        colWidthsRef.current = newMap;
+        oldWidthRef.current = currentTableWidth;
+        setTrigger(c => c + 1);
+    }, [props.children, currentTableWidth]);
     const setTableWidth = React.useCallback(_.debounce(() => {
         var _a, _b, _c, _d;
         if (bodyRef.current == null)
@@ -79,205 +239,18 @@ function AdjustableTable(props) {
                 resizeObserver.disconnect();
         };
     }, []);
-    React.useEffect(() => {
-        autoWidth.current = new Map();
-        setAutoWidthVersion(0);
-    }, [currentTableWidth]);
-    React.useEffect(() => {
-        var _a;
-        let totalMaxWidth = 0;
-        autoWidth.current.forEach((v) => {
-            totalMaxWidth += v.maxColWidth;
-        });
-        if (totalMaxWidth > currentTableWidth && currentTableWidth > 0) {
-            const hideKeys = [];
-            const showKeys = [];
-            let t = 0;
-            let colW = 0;
-            autoWidth.current.forEach((v, k) => {
-                t = t + v.maxColWidth;
-                if (t < currentTableWidth) {
-                    showKeys.push(k);
-                    colW += v.maxColWidth;
-                }
-                else
-                    hideKeys.push(k);
-            });
-            const numEnabledColumns = showKeys.length;
-            if (Array.from(autoWidth.current.values()).filter(autoWidth => !autoWidth.enabled).length == hideKeys.length) {
-                return;
-            }
-            if (colCountRef.current !== null)
-                clearTimeout(colCountRef.current);
-            colCountRef.current = setTimeout(() => {
-                var _a;
-                hideKeys.forEach((k) => (autoWidth.current.get(k).enabled = false));
-                showKeys.forEach((k) => (autoWidth.current.get(k).enabled = true));
-                const numOfColsWithAutoCSS = Array.from(autoWidth.current.values()).filter(autoWidth => autoWidth.isAuto && autoWidth.enabled).length;
-                const numOfColsWithUndefinedCSS = Array.from(autoWidth.current.values()).filter(autoWidth => autoWidth.isUndefined && autoWidth.enabled).length;
-                let colsToDivideBy = numEnabledColumns; // Split the extra across all cols
-                if (numOfColsWithAutoCSS > 0) { // Split only on the css auto-cols and no css undefined cols
-                    colsToDivideBy = numOfColsWithAutoCSS;
-                }
-                if (numOfColsWithUndefinedCSS > 0 && numOfColsWithAutoCSS == 0) { // Split only on the css undefined if there are no auto-cols
-                    colsToDivideBy = numOfColsWithUndefinedCSS;
-                }
-                const extraSpace = (currentTableWidth - colW) / colsToDivideBy;
-                setExtraWidthPerRow(Math.floor(extraSpace));
-                (_a = props.ReduceWidthCallback) === null || _a === void 0 ? void 0 : _a.call(props, hideKeys);
-                setAutoWidthVersion((v) => v + 1);
-            }, 500);
-        }
-        else if (currentTableWidth > 0) {
-            const numEnabledColumns = Array.from(autoWidth.current.values()).filter(autoWidth => autoWidth.enabled).length;
-            const numOfColsWithAutoCSS = Array.from(autoWidth.current.values()).filter(autoWidth => autoWidth.isAuto && autoWidth.enabled).length;
-            const colsToDivideBy = (numOfColsWithAutoCSS > 0) ? numOfColsWithAutoCSS : numEnabledColumns;
-            const extraSpace = (currentTableWidth - totalMaxWidth - numEnabledColumns) / colsToDivideBy;
-            setExtraWidthPerRow(extraSpace);
-            (_a = props.ReduceWidthCallback) === null || _a === void 0 ? void 0 : _a.call(props, []);
-        }
-    }, [autoWidthVersion]);
-    React.useEffect(() => {
-        // if there are keys in the map not present in children, map is old
-        const children = React.Children.toArray(props.children);
-        const childKeys = [];
-        const mapKeys = autoWidth.current.keys();
-        children.forEach(child => {
-            if (!React.isValidElement(child))
-                return;
-            if (child.type === Column_1.default ||
-                child.type === AdjustableColumn_1.default)
-                childKeys.push(child.props.Key);
-        });
-        for (const key of mapKeys) {
-            if (childKeys.includes(key)) {
-                continue;
-            }
-            else {
-                autoWidth.current.clear();
-                setAutoWidthVersion(0);
-                break;
-            }
-        }
-    }, [props.children]);
     const handleSort = React.useCallback((data, event) => {
         if (data.colKey !== null)
             props.OnSort(data, event);
     }, [props.OnSort]);
-    const setWidth = React.useCallback((colKey, key, width, isAuto, isUndefined) => {
-        var _a, _b, _c, _d, _e, _f;
-        const flooredWidth = Math.floor(width);
-        if (!autoWidth.current.has(colKey)) { // does the column exist
-            autoWidth.current.set(colKey, {
-                maxColWidth: flooredWidth,
-                width: new Map([[key, flooredWidth]]),
-                enabled: true,
-                adjustement: 0,
-                isAuto: isAuto,
-                isUndefined: isUndefined
-            });
-        }
-        else if (!((_b = (_a = autoWidth.current.get(colKey)) === null || _a === void 0 ? void 0 : _a.width.has(key)) !== null && _b !== void 0 ? _b : false)) { // it exists but the key does not
-            (_c = autoWidth.current.get(colKey)) === null || _c === void 0 ? void 0 : _c.width.set(key, flooredWidth); // add the width for this key
-            autoWidth.current.get(colKey).isAuto = isAuto;
-            if (flooredWidth > ((_e = (_d = autoWidth.current.get(colKey)) === null || _d === void 0 ? void 0 : _d.maxColWidth) !== null && _e !== void 0 ? _e : 9e10)) // if width is > to max col
-                autoWidth.current.get(colKey).maxColWidth = flooredWidth; // set max to width
-        }
-        else if (autoWidth.current.get(colKey).width.get(key) == flooredWidth) { // width == newW
-            autoWidth.current.get(colKey).isAuto = isAuto;
-            return;
-        }
-        else {
-            autoWidth.current.get(colKey).width.set(key, flooredWidth); // otherwise, it exists, just set the width
-            autoWidth.current.get(colKey).isAuto = isAuto;
-            if (flooredWidth == ((_f = autoWidth.current.get(colKey)) === null || _f === void 0 ? void 0 : _f.maxColWidth)) // check against max
-                autoWidth.current.get(colKey).maxColWidth = Math.max(...autoWidth.current.get(colKey).width.values());
-        }
-        //cancel ref
-        //Add a Timer - runs within 10 ms from when the Timer started to avoid React thinking this is an indinfinte loop....
-        if (throtleRef.current !== null)
-            clearTimeout(throtleRef.current);
-        throtleRef.current = setTimeout(() => {
-            setAutoWidthVersion((v) => v + 1);
-        }, 10);
-    }, []);
-    const setAdjustment = React.useCallback((colKey, w) => {
-        if (!autoWidth.current.has(colKey) || autoWidth.current.get(colKey) == undefined) { // doesnt exist/is undefined
-            autoWidth.current.set(colKey, {
-                maxColWidth: 0,
-                width: new Map(),
-                enabled: true,
-                adjustement: w,
-                isAuto: false,
-                isUndefined: false
-            });
-        }
-        else {
-            const x = autoWidth.current.get(colKey);
-            if ((x === null || x === void 0 ? void 0 : x.adjustement) != undefined)
-                x.adjustement += w;
-        }
-        //cancel ref
-        //Add a Timer - runs within 10 ms from when the Timer started to avoid React thinking this is an indinfinte loop....
-        if (throtleRef.current !== null)
-            clearTimeout(throtleRef.current);
-        throtleRef.current = setTimeout(() => {
-            setAutoWidthVersion((v) => v + 1);
-        }, 10);
-    }, []);
-    const setMinWidth = React.useCallback((colKey, w) => {
-        var _a;
-        if (!autoWidth.current.has(colKey))
-            autoWidth.current.set(colKey, {
-                maxColWidth: 0,
-                width: new Map(),
-                enabled: true,
-                adjustement: 0,
-                minWidth: w,
-                isAuto: false,
-                isUndefined: false
-            });
-        else if (((_a = autoWidth.current.get(colKey)) === null || _a === void 0 ? void 0 : _a.minWidth) == w)
-            return;
-        autoWidth.current.get(colKey).minWidth = w;
-        //cancel ref
-        //Add a Timer - runs within 10 ms from when the Timer started to avoid React thinking this is an indinfinte loop....
-        if (throtleRef.current !== null)
-            clearTimeout(throtleRef.current);
-        throtleRef.current = setTimeout(() => {
-            setAutoWidthVersion((v) => v + 1);
-        }, 10);
-    }, []);
-    const setMaxWidth = React.useCallback((colKey, w) => {
-        var _a;
-        if (!autoWidth.current.has(colKey))
-            autoWidth.current.set(colKey, {
-                maxColWidth: 0,
-                width: new Map(),
-                enabled: true,
-                adjustement: 0,
-                maxWidth: w,
-                isAuto: false,
-                isUndefined: false
-            });
-        else if (((_a = autoWidth.current.get(colKey)) === null || _a === void 0 ? void 0 : _a.maxWidth) == w)
-            return;
-        autoWidth.current.get(colKey).maxWidth = w;
-        //cancel ref
-        //Add a Timer - runs within 10 ms from when the Timer started to avoid React thinking this is an indinfinte loop....
-        if (throtleRef.current !== null)
-            clearTimeout(throtleRef.current);
-        throtleRef.current = setTimeout(() => {
-            setAutoWidthVersion((v) => v + 1);
-        }, 10);
-    }, []);
-    return (React.createElement("table", { className: props.TableClass !== undefined ? props.TableClass : 'table table-hover', style: (_a = props.TableStyle) !== null && _a !== void 0 ? _a : defaultTableStyle },
-        React.createElement(Header, { Class: props.TheadClass, Style: props.TheadStyle, SortKey: props.SortKey, Ascending: props.Ascending, OnSort: handleSort, SetWidth: (k, w, a, u) => setWidth(k, -1, w, a, u), SetMaxWidth: setMaxWidth, SetMinWidth: setMinWidth, AutoWidth: autoWidth, AutoWidthVersion: autoWidthVersion, LastColumn: props.LastColumn, SetAdjustment: setAdjustment, ExtraWidth: extraWidthPerRow }, 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, AutoWidth: autoWidth, AutoWidthVersion: autoWidthVersion, SetWidth: setWidth, ExtraWidth: extraWidthPerRow, BodyRef: bodyRef, BodyScrolled: scrolled }, props.children),
+    return (React.createElement("table", { className: props.TableClass !== undefined ? props.TableClass : 'table table-hover', style: tableStyle },
+        React.createElement(Header, { Class: props.TheadClass, Style: headStyle, SortKey: props.SortKey, Ascending: props.Ascending, LastColumn: props.LastColumn, OnSort: handleSort, ColWidths: colWidthsRef, Trigger: trigger, TriggerRerender: () => setTrigger(c => c + 1) }, props.children),
+        React.createElement(Rows, { DragStart: props.OnDragStart, Data: props.Data, RowStyle: rowStyle, BodyStyle: bodyStyle, BodyClass: props.TbodyClass, OnClick: props.OnClick, Selected: props.Selected, KeySelector: props.KeySelector, BodyRef: bodyRef, BodyScrolled: scrolled, ColWidths: colWidthsRef, Trigger: trigger }, props.children),
         props.LastRow !== undefined ? (React.createElement("tfoot", { style: props.TfootStyle, className: props.TfootClass },
             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 onClick = React.useCallback((e, item, index) => {
         if (props.OnClick !== undefined)
             props.OnClick({
@@ -288,201 +261,210 @@ function Rows(props) {
                 index: index,
             }, e);
     }, [props.OnClick]);
-    const bodyStyle = React.useMemo(() => (Object.assign(Object.assign({}, props.BodyStyle), { paddingRight: (props.BodyScrolled ? 0 : 17), display: "block" })), [props.BodyStyle, props.BodyScrolled]);
     return (React.createElement("tbody", { style: bodyStyle, className: props.BodyClass, ref: props.BodyRef }, props.Data.map((d, i) => {
         const style = props.RowStyle !== undefined ? Object.assign({}, props.RowStyle) : {};
         if (style.cursor === undefined && (props.OnClick !== undefined || props.DragStart !== undefined))
             style.cursor = 'pointer';
         if (props.Selected !== undefined && props.Selected(d, i))
-            style.backgroundColor = 'var(--warning)';
+            style.backgroundColor = 'yellow';
         const key = props.KeySelector(d, i);
         return (React.createElement("tr", { key: key, style: style, onClick: (e) => onClick(e, d, i) }, React.Children.map(props.children, (element) => {
-            var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q;
+            var _a, _b, _c, _d, _e, _f;
             if (!React.isValidElement(element))
                 return null;
-            if (element.type === Column_1.default)
-                if ((_b = (_a = props.AutoWidth.current.get(element.props.Key)) === null || _a === void 0 ? void 0 : _a.enabled) !== null && _b !== void 0 ? _b : true)
-                    return (React.createElement(Column_1.ColumnDataWrapper, { key: element.key, extraWidth: props.ExtraWidth, onClick: (props.OnClick !== undefined && props.OnClick !== null) ? (e) => props.OnClick({
-                            colKey: element.props.Key,
-                            colField: element.props.Field,
-                            row: d,
-                            data: d[element.props.Field],
-                            index: i,
-                        }, e) : undefined, dragStart: (props.DragStart !== undefined && props.DragStart !== null) ? (e) => props.DragStart({
-                            colKey: element.props.Key,
-                            colField: element.props.Field,
-                            row: d,
-                            data: d[element.props.Field],
-                            index: i,
-                        }, e) : undefined, setWidth: (w, a, u) => props.SetWidth(element.props.Key, key, w, a, u), style: element.props.RowStyle, width: ((_d = (_c = props.AutoWidth.current.get(element.props.Key)) === null || _c === void 0 ? void 0 : _c.width.has(key)) !== null && _d !== void 0 ? _d : false)
-                            ? (_e = props.AutoWidth.current.get(element.props.Key)) === null || _e === void 0 ? void 0 : _e.maxColWidth // if not auto <-
-                            : undefined // otherwise get the extrawidth
-                        , enabled: (_g = (_f = props.AutoWidth.current.get(element.props.Key)) === null || _f === void 0 ? void 0 : _f.enabled) !== null && _g !== void 0 ? _g : true }, element.props.Content !== undefined
-                        ? element.props.Content({
-                            item: d,
-                            key: element.props.Key,
-                            field: element.props.Field,
-                            style: style,
-                            index: i,
-                        })
-                        : element.props.Field !== undefined
-                            ? d[element.props.Field]
-                            : null));
-            if (element.type === AdjustableColumn_1.default)
-                if ((_j = (_h = props.AutoWidth.current.get(element.props.Key)) === null || _h === void 0 ? void 0 : _h.enabled) !== null && _j !== void 0 ? _j : true)
-                    return (React.createElement(AdjustableColumn_1.AdjustableColumnDataWrapper, { adjustment: (_k = props.AutoWidth.current.get(element.props.Key)) === null || _k === void 0 ? void 0 : _k.adjustement, key: element.key, onClick: (props.OnClick !== undefined && props.OnClick !== null) ? (e) => props.OnClick({
-                            colKey: element.props.Key,
-                            colField: element.props.Field,
-                            row: d,
-                            data: d[element.props.Field],
-                            index: i,
-                        }, e) : undefined, dragStart: (props.DragStart !== undefined && props.DragStart !== null) ? (e) => props.DragStart({
-                            colKey: element.props.Key,
-                            colField: element.props.Field,
-                            row: d,
-                            data: d[element.props.Field],
-                            index: i,
-                        }, e) : undefined, setWidth: (w, a, u) => props.SetWidth(element.props.Key, key, w, a, u), style: element.props.RowStyle, width: ((_m = (_l = props.AutoWidth.current.get(element.props.Key)) === null || _l === void 0 ? void 0 : _l.width.has(key)) !== null && _m !== void 0 ? _m : false)
-                            ? (_o = props.AutoWidth.current.get(element.props.Key)) === null || _o === void 0 ? void 0 : _o.maxColWidth
-                            : undefined, enabled: (_q = (_p = props.AutoWidth.current.get(element.props.Key)) === null || _p === void 0 ? void 0 : _p.enabled) !== null && _q !== void 0 ? _q : true, extraWidth: props.ExtraWidth },
-                        ' ',
-                        element.props.Content !== undefined
-                            ? element.props.Content({
-                                item: d,
-                                key: element.props.Key,
-                                field: element.props.Field,
-                                style: style,
-                                index: i,
-                            })
-                            : element.props.Field !== undefined
-                                ? d[element.props.Field]
-                                : null));
-            return null;
+            if (!IsColumnProps(element.props))
+                return null;
+            const colWidth = props.ColWidths.current.get(element.props.Key);
+            if (colWidth == null || colWidth.width === 0)
+                return null;
+            let cursor = undefined;
+            if (((_b = (_a = element.props) === null || _a === void 0 ? void 0 : _a.RowStyle) === null || _b === void 0 ? void 0 : _b.cursor) != null)
+                cursor = element.props.RowStyle.cursor;
+            else if ((props === null || props === void 0 ? void 0 : props.OnClick) != null)
+                cursor = 'pointer';
+            else if ((props === null || props === void 0 ? void 0 : props.DragStart) != null)
+                cursor = 'grab';
+            const style = Object.assign(Object.assign(Object.assign({}, defaultDataCellStyle), ((_c = element.props) === null || _c === void 0 ? void 0 : _c.RowStyle)), { width: colWidth.width, cursor: cursor });
+            return (React.createElement(Column_1.ColumnDataWrapper, { key: element.key, onClick: (props.OnClick != null) ? (e) => {
+                    var _a, _b;
+                    return props.OnClick({
+                        colKey: element.props.Key,
+                        colField: (_a = element.props) === null || _a === void 0 ? void 0 : _a.Field,
+                        row: d,
+                        data: d[(_b = element.props) === null || _b === void 0 ? void 0 : _b.Field],
+                        index: i,
+                    }, e);
+                } : undefined, dragStart: (props.DragStart != null) ? (e) => {
+                    var _a, _b;
+                    return props.DragStart({
+                        colKey: element.props.Key,
+                        colField: (_a = element.props) === null || _a === void 0 ? void 0 : _a.Field,
+                        row: d,
+                        data: d[(_b = element.props) === null || _b === void 0 ? void 0 : _b.Field],
+                        index: i,
+                    }, e);
+                } : undefined, style: style }, ((_d = element.props) === null || _d === void 0 ? void 0 : _d.Content) != null
+                ? element.props.Content({
+                    item: d,
+                    key: element.props.Key,
+                    field: (_e = element.props) === null || _e === void 0 ? void 0 : _e.Field,
+                    style: style,
+                    index: i,
+                })
+                : ((_f = element.props) === null || _f === void 0 ? void 0 : _f.Field) != null
+                    ? d[element.props.Field]
+                    : null));
         })));
     })));
 }
 function Header(props) {
-    const trRef = React.useRef(null);
+    const headStyle = React.useMemo(() => (Object.assign(Object.assign({}, defaultHeadStyle), props.Style)), [props.Style]);
+    // Consts for adjustable columns
     const [mouseDown, setMouseDown] = React.useState(0);
     const [currentKeys, setCurrentKeys] = React.useState(undefined);
     const [deltaW, setDeltaW] = React.useState(0);
     const [tentativeLimits, setTentativeLimits] = React.useState({ min: -Infinity, max: Infinity });
-    const calculateDeltaLimits = React.useCallback((mapKeys, autoWidthRef) => {
-        var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r;
-        if (mapKeys === undefined)
-            return ({ min: -Infinity, max: Infinity });
-        const maxLeftAdjustment = ((_b = (_a = autoWidthRef.current.get(mapKeys[0])) === null || _a === void 0 ? void 0 : _a.maxColWidth) !== null && _b !== void 0 ? _b : 0) +
-            ((_d = (_c = autoWidthRef.current.get(mapKeys[0])) === null || _c === void 0 ? void 0 : _c.adjustement) !== null && _d !== void 0 ? _d : 0);
-        const minWidthLeftAdjusted = ((_f = (_e = autoWidthRef.current.get(mapKeys[0])) === null || _e === void 0 ? void 0 : _e.minWidth) !== null && _f !== void 0 ? _f : 100) - maxLeftAdjustment;
-        const maxWidthLeftAdjusted = ((_h = (_g = autoWidthRef.current.get(mapKeys[0])) === null || _g === void 0 ? void 0 : _g.maxWidth) !== null && _h !== void 0 ? _h : 9e10) - maxLeftAdjustment;
-        const maxRightAdjustment = ((_k = (_j = autoWidthRef.current.get(mapKeys[1])) === null || _j === void 0 ? void 0 : _j.maxColWidth) !== null && _k !== void 0 ? _k : 0) +
-            ((_m = (_l = autoWidthRef.current.get(mapKeys[1])) === null || _l === void 0 ? void 0 : _l.adjustement) !== null && _m !== void 0 ? _m : 0);
-        const minWidthRightAdjusted = ((_p = (_o = autoWidthRef.current.get(mapKeys[1])) === null || _o === void 0 ? void 0 : _o.minWidth) !== null && _p !== void 0 ? _p : 100) - maxRightAdjustment;
-        const maxWidthRightAdjusted = ((_r = (_q = autoWidthRef.current.get(mapKeys[1])) === null || _q === void 0 ? void 0 : _q.maxWidth) !== null && _r !== void 0 ? _r : 9e10) - maxRightAdjustment;
-        // Recall that a right movement is the result of a negative value on deltaW
-        const minDeltaW = Math.abs(minWidthLeftAdjusted) < Math.abs(maxWidthRightAdjusted) ? minWidthLeftAdjusted : -maxWidthRightAdjusted;
-        const maxDeltaW = Math.abs(minWidthRightAdjusted) < Math.abs(maxWidthLeftAdjusted) ? -minWidthRightAdjusted : maxWidthLeftAdjusted;
-        return ({ min: minDeltaW, max: maxDeltaW });
-    }, []);
-    const calculateAdjustment = (key) => {
-        var _a, _b;
-        let adj = 0;
-        let delta;
-        if (deltaW > tentativeLimits.max)
-            delta = tentativeLimits.max;
-        else if (deltaW < tentativeLimits.min)
-            delta = tentativeLimits.min;
-        else
-            delta = deltaW;
-        if (currentKeys !== undefined && currentKeys[0] == key)
-            adj = delta;
-        else if (currentKeys !== undefined && currentKeys[1] == key)
-            adj = -delta;
-        return ((_b = (_a = props.AutoWidth.current.get(key)) === null || _a === void 0 ? void 0 : _a.adjustement) !== null && _b !== void 0 ? _b : 0) + adj;
-    };
-    const finishAdjustment = () => {
-        if (currentKeys === undefined)
-            return;
-        if (Math.abs(deltaW) > 5) {
-            const deltaLimits = calculateDeltaLimits(currentKeys, props.AutoWidth);
-            let delta;
-            if (deltaW > deltaLimits.max)
-                delta = deltaLimits.max;
-            else if (deltaW < deltaLimits.min)
-                delta = deltaLimits.min;
-            else
-                delta = deltaW;
-            props.SetAdjustment(currentKeys[0], delta);
-            props.SetAdjustment(currentKeys[1], -delta);
-        }
-        setMouseDown(0);
-        setTentativeLimits({ min: -Infinity, max: Infinity });
-        setCurrentKeys(undefined);
-        setDeltaW(0);
-    };
-    const getLeftKey = React.useCallback((key) => {
+    const getLeftKey = React.useCallback((key, colWidthsRef) => {
         var _a;
+        // Filtering down to shown adjustables only
         const keys = React.Children.map((_a = props.children) !== null && _a !== void 0 ? _a : [], (element) => {
             var _a;
             if (!React.isValidElement(element)) {
                 return null;
             }
-            if ((_a = !(props.AutoWidth.current.get(element.props.Key).enabled)) !== null && _a !== void 0 ? _a : true) {
+            const keyWidth = (_a = colWidthsRef.current.get(key)) === null || _a === void 0 ? void 0 : _a.width;
+            if (keyWidth == null || keyWidth <= 0) {
                 return null;
             }
-            if (element.type === AdjustableColumn_1.default) {
+            if (element.type === Column_1.AdjustableColumn) {
                 return element.props.Key;
             }
             return null;
         }).filter((item) => item !== null);
         const index = keys.indexOf(key);
-        if (index < 1)
+        if (index <= 0)
             return undefined;
         return keys[index - 1];
     }, [props.children]);
+    const calculateDeltaLimits = React.useCallback((mapKeys, colWidthsRef) => {
+        if (mapKeys === undefined)
+            return ({ min: -Infinity, max: Infinity });
+        const widthObjLeft = colWidthsRef.current.get(mapKeys[0]);
+        const widthObjRight = colWidthsRef.current.get(mapKeys[1]);
+        if (widthObjLeft == null || widthObjRight == null)
+            return ({ min: -Infinity, max: Infinity });
+        const limitByShrinkLeft = widthObjLeft.width - widthObjLeft.minWidth;
+        const limitByGrowthLeft = widthObjLeft.maxWidth - widthObjLeft.width;
+        const limitByShrinkRight = widthObjRight.width - widthObjRight.minWidth;
+        const limitByGrowthRight = 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;
+        return ({ min: minDeltaW, max: maxDeltaW });
+    }, []);
+    const getDeltaSign = React.useCallback((index) => {
+        // Recall that a left movement is a negative deltaW
+        if (index === 0)
+            return 1;
+        else if (index === 1)
+            return -1;
+        else
+            return 0;
+    }, []);
+    const finishAdjustment = React.useCallback((adjustment, adjustKeys, colWidthsRef) => {
+        const deltaLimits = calculateDeltaLimits(adjustKeys, colWidthsRef);
+        let delta;
+        if (adjustment > deltaLimits.max)
+            delta = deltaLimits.max;
+        else if (adjustment < deltaLimits.min)
+            delta = deltaLimits.min;
+        else
+            delta = adjustment;
+        if (Math.abs(delta) > 5) {
+            const leftWidthObj = colWidthsRef.current.get(adjustKeys[0]);
+            const rightWidthObj = colWidthsRef.current.get(adjustKeys[1]);
+            if (leftWidthObj == null || rightWidthObj == null) {
+                console.error(`Unable to finalize adjustment on keys ${adjustKeys[0]}, ${adjustKeys[1]}`);
+            }
+            else {
+                leftWidthObj.width += (getDeltaSign(0) * delta);
+                rightWidthObj.width += (getDeltaSign(1) * delta);
+            }
+        }
+        setMouseDown(0);
+        setTentativeLimits({ min: -Infinity, max: Infinity });
+        setCurrentKeys(undefined);
+        setDeltaW(0);
+    }, [calculateDeltaLimits, getDeltaSign]);
     const onMove = React.useCallback((e) => {
         if (currentKeys === undefined)
             return;
         const w = e.screenX - mouseDown;
         setDeltaW(w);
     }, [mouseDown, currentKeys]);
-    return (React.createElement("thead", { className: props.Class, style: props.Style, onMouseMove: (e) => {
+    return (React.createElement("thead", { className: props.Class, style: headStyle, onMouseMove: (e) => {
             onMove(e.nativeEvent);
             e.stopPropagation();
         }, onMouseUp: (e) => {
-            finishAdjustment();
             e.stopPropagation();
+            if (currentKeys == null)
+                return;
+            finishAdjustment(deltaW, currentKeys, props.ColWidths);
+            props.TriggerRerender();
         }, onMouseLeave: (e) => {
-            finishAdjustment();
             e.stopPropagation();
+            if (currentKeys == null)
+                return;
+            finishAdjustment(deltaW, currentKeys, props.ColWidths);
+            props.TriggerRerender();
         } },
-        React.createElement("tr", { ref: trRef },
+        React.createElement("tr", { style: { width: '100%', display: 'table' } },
             React.Children.map(props.children, (element) => {
-                var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r, _s, _t, _u, _v, _w, _x;
+                var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k;
                 if (!React.isValidElement(element))
                     return null;
-                if (element.type === Column_1.default)
-                    if ((_b = (_a = props.AutoWidth.current.get(element.props.Key)) === null || _a === void 0 ? void 0 : _a.enabled) !== null && _b !== void 0 ? _b : true)
-                        return (React.createElement(Column_1.ColumnHeaderWrapper, { enabled: (_d = (_c = props.AutoWidth.current.get(element.props.Key)) === null || _c === void 0 ? void 0 : _c.enabled) !== null && _d !== void 0 ? _d : true, setWidth: (w, a, u) => props.SetWidth(element.props.Key, w, a, u), onSort: (e) => props.OnSort({ colKey: element.props.Key, colField: element.props.Field, ascending: props.Ascending }, e), sorted: props.SortKey === element.props.Key && ((_e = element.props.AllowSort) !== null && _e !== void 0 ? _e : true), asc: props.Ascending, colKey: element.props.Key, key: element.props.Key, allowSort: element.props.AllowSort, width: ((_g = (_f = props.AutoWidth.current.get(element.props.Key)) === null || _f === void 0 ? void 0 : _f.width.has(-1)) !== null && _g !== void 0 ? _g : false)
-                                ? (_h = props.AutoWidth.current.get(element.props.Key)) === null || _h === void 0 ? void 0 : _h.maxColWidth
-                                : undefined, style: (_j = element.props.HeaderStyle) !== null && _j !== void 0 ? _j : element.props.RowStyle, extraWidth: props.ExtraWidth },
-                            ' ', (_k = element.props.children) !== null && _k !== void 0 ? _k : element.props.Key,
-                            ' '));
-                if (element.type === AdjustableColumn_1.default)
-                    if ((_m = (_l = props.AutoWidth.current.get(element.props.Key)) === null || _l === void 0 ? void 0 : _l.enabled) !== null && _m !== void 0 ? _m : true)
-                        return (React.createElement(AdjustableColumn_1.AdjustableColumnHeaderWrapper, { enabled: (_p = (_o = props.AutoWidth.current.get(element.props.Key)) === null || _o === void 0 ? void 0 : _o.enabled) !== null && _p !== void 0 ? _p : true, setWidth: (w, a, u) => props.SetWidth(element.props.Key, w, a, u), setMinWidth: (w) => props.SetMinWidth(element.props.Key, Math.round(w)), minWidth: (_q = props.AutoWidth.current.get(element.props.Key)) === null || _q === void 0 ? void 0 : _q.minWidth, setMaxWidth: (w) => props.SetMaxWidth(element.props.Key, Math.round(w)), maxWidth: (_r = props.AutoWidth.current.get(element.props.Key)) === null || _r === void 0 ? void 0 : _r.maxWidth, extraWidth: props.ExtraWidth, onSort: (e) => props.OnSort({ colKey: element.props.Key, colField: element.props.Field, ascending: props.Ascending }, e), sorted: props.SortKey === element.props.Key && ((_s = element.props.AllowSort) !== null && _s !== void 0 ? _s : true), key: element.props.Key, colKey: element.props.Key, asc: props.Ascending, allowSort: element.props.AllowSort, width: ((_u = (_t = props.AutoWidth.current.get(element.props.Key)) === null || _t === void 0 ? void 0 : _t.width.has(-1)) !== null && _u !== void 0 ? _u : false)
-                                ? (_v = props.AutoWidth.current.get(element.props.Key)) === null || _v === void 0 ? void 0 : _v.maxColWidth
-                                : undefined, startAdjustment: (e) => {
-                                let newCurrentKeys;
-                                if (getLeftKey(element.props.Key) !== undefined)
-                                    newCurrentKeys = [getLeftKey(element.props.Key), element.props.Key];
-                                setCurrentKeys(newCurrentKeys);
-                                setMouseDown(e.screenX);
-                                setTentativeLimits(calculateDeltaLimits(newCurrentKeys, props.AutoWidth));
-                                setDeltaW(0);
-                            }, adjustment: calculateAdjustment(element.props.Key), style: (_w = element.props.HeaderStyle) !== null && _w !== void 0 ? _w : element.props.RowStyle },
-                            ' ', (_x = element.props.children) !== null && _x !== void 0 ? _x : element.props.Key));
-                return null;
+                if (!IsColumnProps(element.props))
+                    return null;
+                const colWidth = props.ColWidths.current.get(element.props.Key);
+                if (colWidth == null || colWidth.width === 0)
+                    return null;
+                // Handling temporary width changes due to being in mid-adjustments
+                let currentWidth = colWidth.width;
+                const keyIndex = (_a = currentKeys === null || currentKeys === void 0 ? void 0 : currentKeys.indexOf(element.props.Key)) !== null && _a !== void 0 ? _a : -1;
+                if (keyIndex > -1) {
+                    let delta;
+                    if (deltaW > tentativeLimits.max)
+                        delta = tentativeLimits.max;
+                    else if (deltaW < tentativeLimits.min)
+                        delta = tentativeLimits.min;
+                    else
+                        delta = deltaW;
+                    currentWidth += (getDeltaSign(keyIndex) * delta);
+                }
+                let cursor = undefined;
+                if (((_c = (_b = element.props) === null || _b === void 0 ? void 0 : _b.HeaderStyle) === null || _c === void 0 ? void 0 : _c.cursor) != null)
+                    cursor = element.props.HeaderStyle.cursor;
+                else if (((_e = (_d = element.props) === null || _d === void 0 ? void 0 : _d.AllowSort) !== null && _e !== void 0 ? _e : true))
+                    cursor = 'pointer';
+                const style = Object.assign(Object.assign(Object.assign({}, defaultDataHeadStyle), (_f = element.props) === null || _f === void 0 ? void 0 : _f.HeaderStyle), { width: currentWidth, cursor: cursor });
+                let startAdjustment;
+                if (element.type === Column_1.AdjustableColumn)
+                    startAdjustment = (e) => {
+                        const leftKey = getLeftKey(element.props.Key, props.ColWidths);
+                        if (leftKey != null) {
+                            const newCurrentKeys = [leftKey, element.props.Key];
+                            setCurrentKeys(newCurrentKeys);
+                            setMouseDown(e.screenX);
+                            setTentativeLimits(calculateDeltaLimits(newCurrentKeys, props.ColWidths));
+                            setDeltaW(0);
+                        }
+                    };
+                return (React.createElement(Column_1.ColumnHeaderWrapper, { onSort: (e) => {
+                        var _a;
+                        return props.OnSort({ colKey: element.props.Key, colField: (_a = element.props) === null || _a === void 0 ? void 0 : _a.Field, ascending: props.Ascending }, e);
+                    }, sorted: props.SortKey === element.props.Key && ((_h = (_g = element.props) === null || _g === void 0 ? void 0 : _g.AllowSort) !== null && _h !== void 0 ? _h : true), asc: props.Ascending, colKey: element.props.Key, key: element.props.Key, allowSort: (_j = element.props) === null || _j === void 0 ? void 0 : _j.AllowSort, startAdjustment: startAdjustment, style: style },
+                    ' ', (_k = element.props.children) !== null && _k !== void 0 ? _k : element.props.Key,
+                    ' '));
             }),
-            React.createElement("th", { style: { width: 17, padding: 0 } }, props.LastColumn))));
+            React.createElement("th", { style: { width: 17, padding: 0, maxWidth: 17 } }, props.LastColumn))));
 }