@gpa-gemstone/react-table 1.2.50 → 1.2.52

package/lib/AdjustableTable/AdjustableColumn.d.ts

@@ -1,20 +1,18 @@
 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;
+import { IColumnProps, IDataWrapperProps, IHeaderWrapperProps } from './Column';
+export default function AdjustableColumn<T>(props: React.PropsWithChildren<IColumnProps<T>>): JSX.Element;
+interface IAdjustableHeaderWrapperProps extends IHeaderWrapperProps {
+    adjustment: number;
+    startAdjustment: React.MouseEventHandler<HTMLDivElement>;
+    setMinWidth: (w: number) => void;
+    minWidth?: number;
+    setMaxWidth: (w: number) => void;
+    maxWidth?: number;
+    extraWidth: 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 AdjustableColumnHeaderWrapper(props: React.PropsWithChildren<IAdjustableHeaderWrapperProps>): JSX.Element | null;
+interface IAdjustableDataWrapperProps extends IDataWrapperProps {
+    adjustment?: number;
 }
-export declare function AdjColumnHeaderWrapper<T>(props: React.PropsWithChildren<IHeaderWrapperProps<T>>): JSX.Element;
+export declare function AdjustableColumnDataWrapper(props: React.PropsWithChildren<IAdjustableDataWrapperProps>): JSX.Element | null;
 export {};

package/lib/AdjustableTable/AdjustableColumn.js

@@ -1,4 +1,8 @@
 "use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.default = AdjustableColumn;
+exports.AdjustableColumnHeaderWrapper = AdjustableColumnHeaderWrapper;
+exports.AdjustableColumnDataWrapper = AdjustableColumnDataWrapper;
 //  ******************************************************************************************************
 //  AdjustableColumn.tsx - Gbtc
 //
@@ -19,68 +23,115 @@
 //  ----------------------------------------------------------------------------------------------------
 //  11/19/2023 - C. Lackner
 //       Generated original version of source code.
+//  05/31/2024 - C. Lackner
+//       Refactored to fix sizing issues.
 //
 //  ******************************************************************************************************
-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.default = AdjustableCol;
-exports.AdjColumnHeaderWrapper = AdjColumnHeaderWrapper;
-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) {
+const gpa_symbols_1 = require("@gpa-gemstone/gpa-symbols");
+const helper_functions_1 = require("@gpa-gemstone/helper-functions");
+const React = require("react");
+function AdjustableColumn(props) {
     return React.createElement(React.Fragment, null, props.children);
 }
-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;
+function AdjustableColumnHeaderWrapper(props) {
+    var _a, _b, _c, _d, _e, _f, _g;
+    const thref = React.useRef(null);
+    const [mode, setMode] = React.useState('minWidth');
+    //const [width, setWidth] = React.useState<number>();
+    const [minWidth, setMinWidth] = React.useState();
+    const [maxWidth, setMaxWidth] = React.useState();
+    const [showBorder, setShowBorder] = React.useState(false);
+    const onHover = React.useCallback(() => { setShowBorder(true); }, []);
+    const onLeave = React.useCallback(() => { setShowBorder(false); }, []);
+    const style = (props.style !== undefined) ? Object.assign({}, props.style) : {};
+    style.overflowX = (_a = style.overflowX) !== null && _a !== void 0 ? _a : 'hidden';
+    style.display = (_b = style.display) !== null && _b !== void 0 ? _b : 'inline-block';
+    style.position = (_c = style.position) !== null && _c !== void 0 ? _c : 'relative';
+    style.borderTop = (_d = style.borderTop) !== null && _d !== void 0 ? _d : 'none';
+    style.minWidth = (_e = style.minWidth) !== null && _e !== void 0 ? _e : 100;
+    const isAuto = style.width == 'auto';
+    const isUndefined = style.width === undefined;
+    if ((style.width == undefined || style.width == 'auto') && props.width !== undefined && mode === 'width') {
+        style.width = (props.width) + props.extraWidth;
     }
-    if (style.cursor === undefined && ((_a = props.AllowSort) !== null && _a !== void 0 ? _a : true)) {
-        style.cursor = 'pointer';
+    if (mode === 'minWidth') {
+        style.width = style.minWidth;
     }
-    if (style.position === undefined) {
-        style.position = 'relative';
+    if (mode === 'maxWidth') {
+        style.width = style.maxWidth;
     }
-    if (style.borderTop === undefined) {
-        style.borderTop = 'none';
+    if (mode === 'width' && props.adjustment !== undefined && props.adjustment !== 0 && style.width !== undefined) {
+        style.width = `calc(${formatwidth(style.width).toString()} ${props.adjustment < 0 ? '-' : '+'} ${Math.abs(props.adjustment).toString()}px)`;
     }
-    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)
+    if (style.cursor === undefined && ((_f = props.allowSort) !== null && _f !== void 0 ? _f : true)) {
+        style.cursor = 'pointer';
+    }
+    React.useLayoutEffect(() => {
+        var _a, _b, _c;
+        if (thref.current == null)
             return;
-        props.setWidth(w, (_b = props.MinWidth) !== null && _b !== void 0 ? _b : 100);
+        if (mode == 'minWidth') {
+            const w = (_a = (0, helper_functions_1.GetNodeSize)(thref.current)) === null || _a === void 0 ? void 0 : _a.width;
+            if (w === undefined)
+                return;
+            if (w !== minWidth) {
+                setMinWidth(w);
+            }
+            if (maxWidth === undefined && style.maxWidth !== undefined) {
+                setMode('maxWidth');
+            }
+            else if (props.width === undefined) {
+                setMode('width');
+            }
+        }
+        if (mode == 'maxWidth') {
+            const w = (_b = (0, helper_functions_1.GetNodeSize)(thref.current)) === null || _b === void 0 ? void 0 : _b.width;
+            if (w === undefined)
+                return;
+            if (w !== maxWidth) {
+                setMaxWidth(w);
+            }
+            if (props.width === undefined) {
+                setMode('width');
+            }
+            else if (props.minWidth === undefined && style.minWidth !== undefined) {
+                setMode('minWidth');
+            }
+        }
+        if (mode == 'width') {
+            const w = (_c = (0, helper_functions_1.GetNodeSize)(thref.current)) === null || _c === void 0 ? void 0 : _c.width;
+            if (w === undefined)
+                return;
+            if (props.width === undefined || (w !== (props.width + props.extraWidth))) {
+                props.setWidth(w, isAuto, isUndefined);
+            }
+            if (maxWidth === undefined && style.maxWidth !== undefined) {
+                setMode('maxWidth');
+            }
+            else if (minWidth === undefined && style.minWidth !== undefined) {
+                setMode('minWidth');
+            }
+        }
     });
-    var onClick = React.useCallback(function (e) {
+    React.useEffect(() => {
+        if (minWidth !== props.minWidth)
+            props.setMinWidth(minWidth);
+    }, [minWidth]);
+    React.useEffect(() => {
+        if (maxWidth !== props.maxWidth)
+            props.setMaxWidth(maxWidth);
+    }, [maxWidth]);
+    const onClick = React.useCallback((e) => {
         var _a;
-        if ((_a = props.AllowSort) !== null && _a !== void 0 ? _a : true)
-            props.onSort(props.Key, e, props.Field);
-        e.stopPropagation();
-    }, [props.onSort]);
-    var onClickBorder = React.useCallback(function (e) {
+        if ((_a = props.allowSort) !== null && _a !== void 0 ? _a : true)
+            props.onSort(e);
+    }, [props.onSort, props.allowSort]);
+    const onClickBorder = React.useCallback((e) => {
         props.startAdjustment(e);
     }, [props.startAdjustment]);
-    return React.createElement("th", { ref: thref, style: style, onClick: onClick, onDrag: function (e) { e.stopPropagation(); } },
+    if (props.width != undefined && !props.enabled)
+        return null;
+    return React.createElement("th", { ref: thref, style: style, onClick: onClick, onDrag: (e) => { e.stopPropagation(); } },
         React.createElement("div", { style: {
                 width: 5,
                 height: '100%',
@@ -91,9 +142,47 @@ function AdjColumnHeaderWrapper(props) {
                 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,
+        props.sorted ? React.createElement("div", { style: { position: 'absolute', width: 25 } }, props.asc ? React.createElement(gpa_symbols_1.ReactIcons.ArrowDropUp, null) : React.createElement(gpa_symbols_1.ReactIcons.ArrowDropDown, null)) : null,
         React.createElement("div", { style: {
                 marginLeft: (props.sorted ? 25 : 0),
-            } }, (_b = props.children) !== null && _b !== void 0 ? _b : props.Key));
+            } }, (_g = props.children) !== null && _g !== void 0 ? _g : props.colKey));
+}
+function AdjustableColumnDataWrapper(props) {
+    var _a, _b;
+    const tdref = React.useRef(null);
+    const style = (props.style !== undefined) ? Object.assign({}, props.style) : {};
+    style.overflowX = (_a = style.overflowX) !== null && _a !== void 0 ? _a : 'hidden';
+    style.display = (_b = style.display) !== null && _b !== void 0 ? _b : 'inline-block';
+    const isAuto = style.width == 'auto';
+    const isUndefined = style.width === undefined;
+    if ((style.width == undefined || style.width == 'auto') && props.width !== undefined) {
+        style.width = (props.width) + props.extraWidth;
+    }
+    if (props.dragStart !== undefined)
+        style.cursor = "grab";
+    React.useLayoutEffect(() => {
+        var _a;
+        if (tdref.current == null)
+            return;
+        const w = (_a = (0, helper_functions_1.GetNodeSize)(tdref.current)) === null || _a === void 0 ? void 0 : _a.width;
+        if (style.width === undefined && props.width === undefined) {
+            props.setWidth(w, isAuto, isUndefined);
+            return;
+        }
+        if (props.adjustment !== undefined && props.adjustment !== 0)
+            return;
+        if (w === undefined || (props.width !== undefined && w == (props.width + props.extraWidth)))
+            return;
+        props.setWidth(w, isAuto, isUndefined);
+    });
+    if (props.adjustment !== undefined && props.adjustment !== 0 && style.width !== undefined)
+        style.width = `calc(${formatwidth(style.width)} ${props.adjustment < 0 ? '-' : '+'} ${Math.abs(props.adjustment).toString()}px)`;
+    if (props.width != undefined && !props.enabled)
+        return null;
+    return (React.createElement("td", { ref: tdref, style: style, onClick: props.onClick, draggable: props.dragStart !== undefined, onDragStart: props.dragStart }, props.children));
+}
+function formatwidth(style) {
+    if (style.toString().endsWith('%') || style.toString().endsWith('px'))
+        return style;
+    return style.toString() + "px";
 }

package/lib/AdjustableTable/Column.d.ts

@@ -12,16 +12,16 @@ export interface IColumnProps<T> {
      * 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
+     * The Default style for the td element
+     */
+    RowStyle?: React.CSSProperties;
+    /**
+     * Determines the Content to be displayed
      * @param d the data to be turned into content
      * @returns the content displayed
      */
@@ -34,34 +34,26 @@ export interface IColumnProps<T> {
     }) => 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;
+export interface IHeaderWrapperProps {
+    setWidth: (w: number, a: boolean, u: boolean) => void;
+    onSort: React.MouseEventHandler<HTMLTableCellElement>;
     sorted: boolean;
     asc: boolean;
-    fixedLayout: boolean;
+    style: React.CSSProperties;
+    allowSort?: boolean;
+    colKey: string;
+    width?: number;
+    enabled: boolean;
+    extraWidth: number;
 }
-export declare function ColumnHeaderWrapper<T>(props: React.PropsWithChildren<IHeaderWrapperProps<T>>): JSX.Element;
-interface IDataWrapperProps<T> extends IColumnProps<T> {
+export declare function ColumnHeaderWrapper(props: React.PropsWithChildren<IHeaderWrapperProps>): JSX.Element | null;
+export interface IDataWrapperProps {
+    setWidth: (w: number, a: boolean, u: boolean) => void;
     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;
+    enabled: boolean;
+    dragStart?: (e: React.DragEvent) => void;
+    onClick?: (e: React.MouseEvent<HTMLElement, MouseEvent>) => void;
+    style: React.CSSProperties;
+    extraWidth: number;
 }
-export declare function ColumnDataWrapper<T>(props: IDataWrapperProps<T>): JSX.Element;
-export {};
+export declare function ColumnDataWrapper(props: React.PropsWithChildren<IDataWrapperProps>): JSX.Element | null;

package/lib/AdjustableTable/Column.js

@@ -19,106 +19,81 @@
 //  ----------------------------------------------------------------------------------------------------
 //  08/02/2018 - Billy Ernest
 //       Generated original version of source code.
+//  05/31/2024 - C. Lackner
+//       Refactored to fix sizing issues.
 //
 //  ******************************************************************************************************
-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.default = Column;
 exports.ColumnHeaderWrapper = ColumnHeaderWrapper;
 exports.ColumnDataWrapper = ColumnDataWrapper;
-var gpa_symbols_1 = require("@gpa-gemstone/gpa-symbols");
-var helper_functions_1 = require("@gpa-gemstone/helper-functions");
-var React = require("react");
+const gpa_symbols_1 = require("@gpa-gemstone/gpa-symbols");
+const helper_functions_1 = require("@gpa-gemstone/helper-functions");
+const React = require("react");
 function Column(props) {
     return React.createElement(React.Fragment, null, props.children);
 }
 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';
+    var _a, _b, _c, _d, _e, _f;
+    const thref = React.useRef(null);
+    const style = (props.style !== undefined) ? Object.assign({}, props.style) : {};
+    style.overflowX = (_a = style.overflowX) !== null && _a !== void 0 ? _a : 'hidden';
+    style.display = (_b = style.display) !== null && _b !== void 0 ? _b : 'inline-block';
+    style.position = (_c = style.position) !== null && _c !== void 0 ? _c : 'relative';
+    style.borderTop = (_d = style.borderTop) !== null && _d !== void 0 ? _d : 'none';
+    const isAuto = style.width == 'auto';
+    const isUndefined = style.width === undefined;
+    if ((style.width == undefined || style.width == 'auto') && props.width !== undefined) {
+        style.width = (props.width) + props.extraWidth;
     }
-    if (style.cursor === undefined && ((_a = props.AllowSort) !== null && _a !== void 0 ? _a : true)) {
+    if (style.cursor === undefined && ((_e = props.allowSort) !== null && _e !== void 0 ? _e : true)) {
         style.cursor = 'pointer';
     }
-    if (style.position === undefined) {
-        style.position = 'relative';
-    }
-    if (style.borderTop === undefined) {
-        style.borderTop = 'none';
-    }
-    React.useLayoutEffect(function () {
+    React.useLayoutEffect(() => {
         var _a;
-        if (thref.current == null || props.width !== undefined)
+        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)
+        const w = (_a = (0, helper_functions_1.GetNodeSize)(thref.current)) === null || _a === void 0 ? void 0 : _a.width;
+        if (props.width !== undefined && (w === undefined || w == (props.width + props.extraWidth)))
             return;
-        props.setWidth(w);
+        props.setWidth(w, isAuto, isUndefined);
     });
-    var onClick = React.useCallback(function (e) {
+    const onClick = React.useCallback((e) => {
         var _a;
-        if ((_a = props.AllowSort) !== null && _a !== void 0 ? _a : true)
-            props.onSort(props.Key, e, props.Field);
-    }, [props.onSort, props.AllowSort]);
-    return React.createElement("th", { ref: thref, style: style, onClick: onClick, onDrag: function (e) { e.stopPropagation(); } },
-        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,
+        if ((_a = props.allowSort) !== null && _a !== void 0 ? _a : true)
+            props.onSort(e);
+    }, [props.onSort, props.allowSort]);
+    if (props.width != undefined && !props.enabled)
+        return null;
+    return React.createElement("th", { ref: thref, style: style, onClick: onClick, onDrag: (e) => { e.stopPropagation(); } },
+        props.sorted ? React.createElement("div", { style: { position: 'absolute', width: 25 } }, props.asc ? React.createElement(gpa_symbols_1.ReactIcons.ArrowDropUp, null) : React.createElement(gpa_symbols_1.ReactIcons.ArrowDropDown, null)) : null,
         React.createElement("div", { style: {
                 marginLeft: (props.sorted ? 25 : 0),
-            } }, (_b = props.children) !== null && _b !== void 0 ? _b : props.Key));
+            } }, (_f = props.children) !== null && _f !== void 0 ? _f : props.colKey));
 }
 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';
+    var _a, _b;
+    const tdref = React.useRef(null);
+    const style = (props.style !== undefined) ? Object.assign({}, props.style) : {};
+    style.overflowX = (_a = style.overflowX) !== null && _a !== void 0 ? _a : 'hidden';
+    style.display = (_b = style.display) !== null && _b !== void 0 ? _b : 'inline-block';
+    const isAuto = style.width == 'auto';
+    const isUndefined = style.width === undefined;
+    if ((style.width == undefined || style.width == 'auto') && props.width !== undefined) {
+        style.width = (props.width) + props.extraWidth;
     }
     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,
-        style: css,
-        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()));
+        style.cursor = "grab";
+    React.useLayoutEffect(() => {
+        var _a;
+        if (tdref.current == null)
+            return;
+        const w = (_a = (0, helper_functions_1.GetNodeSize)(tdref.current)) === null || _a === void 0 ? void 0 : _a.width;
+        if (props.width !== undefined && (w === undefined || w == (props.width + props.extraWidth)))
+            return;
+        props.setWidth(w, isAuto, isUndefined);
+    });
+    if (props.width != undefined && !props.enabled)
+        return null;
+    return (React.createElement("td", { ref: tdref, style: style, onClick: props.onClick, draggable: props.dragStart !== undefined, onDragStart: props.dragStart }, props.children));
 }

package/lib/AdjustableTable/Table.d.ts

@@ -0,0 +1,107 @@
+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: React.MouseEvent<HTMLElement, MouseEvent>) => 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: React.MouseEvent<HTMLElement, MouseEvent>): 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, index: number) => boolean;
+    /**
+    *
+    * @param data the 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: React.DragEvent<Element>) => 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, index?: number) => 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;
+    /**
+    * Optional Callback that gets called when there is not enough space to display columns
+    * @param disabled takes in string of disabled keys
+    */
+    ReduceWidthCallback?: (disabled: string[]) => void;
+}
+export default function AdjustableTable<T>(props: React.PropsWithChildren<TableProps<T>>): JSX.Element;
+export {};