@monolith-forensics/monolith-ui 1.1.90 → 1.2.0

package/dist/Table/Table.js

@@ -9,415 +9,58 @@ var __rest = (this && this.__rest) || function (s, e) {
         }
     return t;
 };
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { FixedSizeList } from "react-window";
-import AutoSizer from "react-virtualized-auto-sizer";
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import { useEffect, useLayoutEffect, useMemo, useRef, useState } from "react";
+import Column from "./Column";
 import { useOverlayScrollbars } from "overlayscrollbars-react";
-import "overlayscrollbars/overlayscrollbars.css";
+import { StyledTable } from "./TableComponents";
+import TableHeader from "./TableHeader";
+import TableProvider from "./TableProvider";
 import shortUUID from "short-uuid";
-import styled from "styled-components";
-import { cloneElement, forwardRef, useEffect, useMemo, useRef, useState, } from "react";
-import { Maximize2Icon } from "lucide-react";
-import { ArrowUpIcon, ArrowDownIcon } from "lucide-react";
-import moment from "moment";
-import { CheckBox } from "..";
-import { Themes } from "../theme";
-const MIN_COLUMN_WIDTH = 125;
-export const Column = () => {
-    return null;
+import VirtualizedRows from "./VirtualIzedRows";
+import StaticRows from "./StaticRows";
+import TableMenu from "./TableMenu";
+import useTable from "./useTable";
+import LoadingIndicator from "./LoadingIndicator";
+const TableContent = () => {
+    const { columnState, tableElement, headerRowElm, tableDimensions, targetElm, listElm, rowHeight, headerRowHeight, compactState, virtualized, loading, } = useTable();
+    const visibleColumnCount = columnState.filter((column) => column.visible === true).length;
+    return (_jsxs(_Fragment, { children: [_jsx(TableMenu, {}), _jsxs(StyledTable, { className: "mfui-table", ref: tableElement, "data-compact": compactState, children: [_jsx(LoadingIndicator, { visible: loading }), _jsx(TableHeader, { headerRowElm: headerRowElm }), visibleColumnCount === 0 && _jsx(_Fragment, {}), virtualized === true ? (_jsx(VirtualizedRows, { tableDimensions: tableDimensions, targetElm: targetElm, listElm: listElm, rowHeight: rowHeight, headerRowHeight: headerRowHeight })) : (_jsx(StaticRows, { targetElm: targetElm, listElm: listElm }))] })] }));
 };
-const StyledTable = styled.table `
-  position: relative;
-  border-collapse: separate;
-  border-spacing: 0;
-  min-width: 100%;
-  border-top: none;
-  border-radius: 4px;
-`;
-const StyledThead = styled.thead `
-  position: relative;
-`;
-const StyledTbody = styled.tbody `
-  & [data-even="true"].tr td {
-    background-color: ${({ stripes, theme }) => stripes ? theme.palette.background.secondary : "transparent"};
-  }
-  & .tr:hover td {
-    background-color: ${({ theme }) => theme.palette.action.hover};
-  }
-`;
-const StyledTr = styled.tr `
-  position: relative;
-  height: ${({ compact, rowHeight }) => rowHeight ? rowHeight : compact ? 28 : 38}px;
-  width: 100%;
-  display: flex;
-
-  & .action-button {
-    opacity: 0;
-    border-radius: 4px;
-  }
-  * .custom-action-button {
-    opacity: 0;
-  }
-
-  &:hover .action-button,
-  &:hover .custom-action-button {
-    opacity: 1;
-  }
-
-  &.focused .td {
-    border-top: 1px solid ${({ theme }) => theme.palette.primary.main};
-    border-bottom: 1px solid ${({ theme }) => theme.palette.primary.main} !important;
-    transition: border 0.3s ease;
-  }
-  &.focused .td:first-child {
-    border-left: 1px solid ${({ theme }) => theme.palette.primary.main};
-  }
-  &.focused .td:last-child {
-    border-right: 1px solid ${({ theme }) => theme.palette.primary.main};
-  }
-
-  // last item in row
-  & .td:last-child {
-    width: auto !important;
-    max-width: none !important;
-  }
-`;
-const StyledHeaderRow = styled(StyledTr) `
-  height: ${({ compact, headerHeight }) => headerHeight ? headerHeight : compact ? 28 : 38}px;
-
-  display: table-row;
-
-  // last item in row
-  & .th:last-child {
-    width: auto !important;
-    max-width: none !important;
-  }
-`;
-const StyledTd = styled.td `
-  position: relative;
-  display: flex;
-  align-items: center;
-  flex: 1;
-  padding: ${({ compact }) => (compact ? "3px" : "8px")};
-  font-size: ${({ compact }) => (compact ? "10px" : "12px")};
-  overflow: hidden;
-  text-overflow: ellipsis;
-  white-space: nowrap;
-
-  background-color: ${({ theme }) => theme.palette.background.default};
-
-  border-bottom: 1px solid ${({ theme }) => theme.palette.divider};
-
-  &:first-child {
-    border-left: 1px solid ${({ theme }) => theme.palette.divider};
-  }
-
-  &:last-child {
-    border-right: 1px solid ${({ theme }) => theme.palette.divider};
-  }
-`;
-const StyledTh = styled.th `
-  position: sticky;
-  top: 0;
-  z-index: 1;
-  flex: 1;
-  vertical-align: middle;
-  user-select: none;
-  padding: ${({ compact }) => (compact ? "3px" : "8px")};
-  font-size: ${({ compact }) => (compact ? "10px" : "12px")};
-  text-align: left;
-  font-weight: bold;
-  overflow: hidden;
-  text-overflow: ellipsis;
-  white-space: nowrap;
-
-  background-color: ${({ theme }) => theme.palette.background.alt};
-
-  border-top: 1px solid ${({ theme }) => theme.palette.divider};
-  border-bottom: 1px solid ${({ theme }) => theme.palette.divider};
-
-  .action-header {
-    display: flex;
-    align-content: center;
-    align-items: center;
-    cursor: pointer;
-    color: ${({ theme }) => theme.palette.text.secondary};
-    margin-right: 5;
-    margin-left: 3;
-  }
-
-  &:first-child {
-    border-left: 1px solid ${({ theme }) => theme.palette.divider};
-    border-top-left-radius: 4px;
-  }
-
-  &:last-child {
-    border-right: 1px solid ${({ theme }) => theme.palette.divider};
-    border-top-right-radius: 4px;
-  }
-
-  &:hover {
-    background-color: ${({ theme }) => theme.name === Themes.DARK ? "#2e2e2e" : "#f5f5f5"};
-    cursor: pointer;
-  }
-  &.dragging:active {
-    cursor: grabbing;
-  }
-  &.dragover .resizer {
-    opacity: 1;
-    background: ${(props) => props.theme.palette.primary.main};
-    cursor: grabbing;
-  }
-`;
-const enableResizeClass = (dataField) => {
-    document
-        .querySelectorAll(`.resizer.column-${dataField}`)
-        .forEach((resizer) => {
-        resizer.classList.add("isResizing");
-    });
-};
-const disableResizeClass = (dataField) => {
-    document
-        .querySelectorAll(`.resizer.column-${dataField}`)
-        .forEach((resizer) => {
-        resizer.classList.remove("isResizing");
+const Table = (_a) => {
+    var { data, children } = _a, props = __rest(_a, ["data", "children"]) // pass through props straight to table context
+    ;
+    const tableElement = useRef(null);
+    const targetElm = useRef(null);
+    const listElm = useRef(null);
+    const headerRowElm = useRef(null);
+    // check if children is array and convert if not
+    if (!Array.isArray(children)) {
+        children = [children];
+    }
+    const [tableDimensions, setTableDimensions] = useState({
+        width: 0,
+        height: 0,
     });
-};
-const resizeHandler = ({ event, columnId, columnProps, onResize, onResizeFinished, }) => {
-    let col = event.target
-        .parentElement;
-    let newColumns = [];
-    let x = 0;
-    let w = 0;
-    const mouseMoveHandler = function (e) {
-        const selectedColumn = document.querySelectorAll(`.col-${columnId}`);
-        const columnHeaders = document.querySelectorAll(`.th.col-${columnId}`);
-        const dx = e.clientX - x;
-        let newWidth = w + dx;
-        if (newWidth < MIN_COLUMN_WIDTH) {
-            newWidth = MIN_COLUMN_WIDTH;
-        }
-        selectedColumn.forEach((col) => {
-            var _a;
-            col.style.width = `${newWidth}px`;
-            col.style.maxWidth = `${newWidth}px`;
-            col.style.minWidth = `${newWidth}px`;
-            newColumns.push({
-                dataField: ((_a = col === null || col === void 0 ? void 0 : col.dataset) === null || _a === void 0 ? void 0 : _a.field) || "",
-                width: newWidth,
-            });
-        });
-        newColumns = Array.from(columnHeaders).map((col) => {
-            var _a;
-            return {
-                dataField: ((_a = col === null || col === void 0 ? void 0 : col.dataset) === null || _a === void 0 ? void 0 : _a.field) || "",
-                width: newWidth,
-            };
-        });
-        onResize({
-            columns: newColumns,
-        });
-    };
-    const mouseUpHandler = function () {
+    const handleOnScroll = (event) => {
         var _a, _b, _c;
-        disableResizeClass(columnId);
-        document.removeEventListener("mousemove", mouseMoveHandler);
-        document.removeEventListener("mouseup", mouseUpHandler);
-        onResizeFinished === null || onResizeFinished === void 0 ? void 0 : onResizeFinished({
-            column: columnProps,
-            columnId: columnId,
-            columns: newColumns,
-            targetColumn: document.querySelector(`.col-${columnId}`),
-            newWidth: ((_c = (_b = (_a = document === null || document === void 0 ? void 0 : document.querySelector) === null || _a === void 0 ? void 0 : _a.call(document, `.col-${columnId}`)) === null || _b === void 0 ? void 0 : _b.style) === null || _c === void 0 ? void 0 : _c.width) || null,
-        });
-    };
-    x = event.clientX;
-    const styles = window.getComputedStyle(col);
-    w = parseInt(styles.width, 10);
-    document.addEventListener("mousemove", mouseMoveHandler);
-    document.addEventListener("mouseup", mouseUpHandler);
-    enableResizeClass(columnId);
-};
-const Resizer = styled(({ className, resizeHandler, onResize = () => { }, onResizeFinished, column, }) => {
-    return (_jsx("div", { className: `${className} resizer column-${column.props.columnId}`, onClick: (e) => {
-            e.stopPropagation();
-            e.nativeEvent.stopImmediatePropagation();
-            e.preventDefault();
-        }, onMouseDown: (e) => {
-            e.stopPropagation();
-            e.nativeEvent.stopImmediatePropagation();
-            e.preventDefault();
-            if (resizeHandler)
-                resizeHandler({
-                    event: e,
-                    columnId: column.props.columnId,
-                    columnProps: column.props,
-                    onResize: onResize,
-                    onResizeFinished: onResizeFinished,
-                });
-        } }));
-}) `
-  &.resizer {
-    position: absolute;
-    right: 0;
-    top: 0;
-    height: 100%;
-    width: 3px;
-    background-color: ${(props) => props.theme.palette.divider};
-    cursor: col-resize;
-    user-select: none;
-    touch-action: none;
-    opacity: 0;
-    &.isResizing {
-      opacity: 1;
-      background: ${(props) => props.theme.palette.primary.main};
-    }
-    // dragover css
-    &.dragover {
-      opacity: 1;
-      background: ${(props) => props.theme.palette.primary.main};
-    }
-  }
-`;
-const HeaderRowComponent = ({ columns, _compact, resizeState, headerHeight, onHeaderClick, onColumnResize, dropColumn, dragColumn, showSelection, selectAll, selectionState, handleSelectAll, handleColumnReorder, }) => {
-    return (_jsx(StyledThead, { children: _jsx(StyledHeaderRow, { compact: _compact, headerHeight: headerHeight, children: columns.map((column) => {
-                var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o;
-                let savedColSize = ((_c = (_b = (_a = resizeState === null || resizeState === void 0 ? void 0 : resizeState.current) === null || _a === void 0 ? void 0 : _a.columns) === null || _b === void 0 ? void 0 : _b.find((col) => col.dataField === column.props.dataField)) === null || _c === void 0 ? void 0 : _c.width) || MIN_COLUMN_WIDTH;
-                if (savedColSize < MIN_COLUMN_WIDTH) {
-                    savedColSize = MIN_COLUMN_WIDTH;
-                }
-                return (_jsxs(StyledTh, Object.assign({}, column.props, { className: `th ${((_d = column === null || column === void 0 ? void 0 : column.props) === null || _d === void 0 ? void 0 : _d.columnId) ? `col-${column.props.columnId}` : ""}`, "data-field": column.props.dataField, "data-type": "th", compact: _compact, onClick: (e) => {
-                        if (column.props.allowSorting !== false)
-                            onHeaderClick === null || onHeaderClick === void 0 ? void 0 : onHeaderClick(column.props);
-                    }, draggable: column.props.allowReorder !== false ? true : false, onDragOver: (e) => {
-                        e.preventDefault();
-                        e.dataTransfer.dropEffect = "move";
-                    }, onDragEnter: (e) => {
-                        e.target.classList.add("dragover");
-                        dropColumn.current = column.props;
-                    }, onDragLeave: (e) => {
-                        e.target.classList.remove("dragover");
-                    }, onDrop: (e) => {
-                        e.preventDefault();
-                        e.target.classList.remove("dragover");
-                        handleColumnReorder(dragColumn.current, dropColumn.current);
-                    }, onDragStart: (e) => {
-                        //set dragging class
-                        dragColumn.current = column.props;
-                        e.target.classList.add("dragging");
-                    }, onDragEnd: (e) => {
-                        e.target.classList.remove("dragging");
-                    }, style: {
-                        width: ((_e = column === null || column === void 0 ? void 0 : column.props) === null || _e === void 0 ? void 0 : _e.width)
-                            ? (_f = column === null || column === void 0 ? void 0 : column.props) === null || _f === void 0 ? void 0 : _f.width
-                            : savedColSize || "auto",
-                        maxWidth: ((_g = column === null || column === void 0 ? void 0 : column.props) === null || _g === void 0 ? void 0 : _g.width)
-                            ? (_h = column === null || column === void 0 ? void 0 : column.props) === null || _h === void 0 ? void 0 : _h.width
-                            : savedColSize || "auto",
-                        minWidth: ((_j = column === null || column === void 0 ? void 0 : column.props) === null || _j === void 0 ? void 0 : _j.width)
-                            ? (_k = column === null || column === void 0 ? void 0 : column.props) === null || _k === void 0 ? void 0 : _k.width
-                            : savedColSize || MIN_COLUMN_WIDTH,
-                    }, children: [_jsxs("div", { style: {
-                                display: "flex",
-                                alignContent: "center",
-                                alignItems: "center",
-                                pointerEvents: column.props.dataField === "action" ? "all" : "none",
-                            }, children: [showSelection && column.props.dataField === "action" ? (_jsx("div", { className: "action-header", children: selectAll && (_jsx(CheckBox, { value: selectionState === "all", partialCheck: selectionState.includes("some"), onChange: handleSelectAll })) })) : (_jsx("div", { children: column.props.caption })), ((_m = (_l = column.props) === null || _l === void 0 ? void 0 : _l.sorting) === null || _m === void 0 ? void 0 : _m.active) && (_jsx("div", { style: { marginLeft: 5 }, children: column.props.sorting.direction === "asc" ? (_jsx(ArrowUpIcon, { size: 12 })) : (_jsx(ArrowDownIcon, { size: 12 })) }))] }), ((_o = column === null || column === void 0 ? void 0 : column.props) === null || _o === void 0 ? void 0 : _o.resizeEnabled) !== false && (_jsx(Resizer, { resizeHandler: resizeHandler, column: column, onResize: (e) => {
-                                resizeState.current = e;
-                            }, onResizeFinished: (e) => {
-                                onColumnResize === null || onColumnResize === void 0 ? void 0 : onColumnResize(e);
-                            } }))] }), shortUUID.generate()));
-            }) }) }));
-};
-const InnerElement = forwardRef((_a, ref) => {
-    var { children, columns, resizeState, _compact, stripes, onHeaderClick, dropColumn, dragColumn, showSelection, selectAll, selectionState, handleSelectAll, handleColumnReorder, onColumnResize, headerHeight } = _a, rest = __rest(_a, ["children", "columns", "resizeState", "_compact", "stripes", "onHeaderClick", "dropColumn", "dragColumn", "showSelection", "selectAll", "selectionState", "handleSelectAll", "handleColumnReorder", "onColumnResize", "headerHeight"]);
-    return (_jsxs(StyledTable, Object.assign({ ref: ref }, rest, { children: [_jsx(HeaderRowComponent, { columns: columns, resizeState: resizeState, _compact: _compact, headerHeight: headerHeight, onHeaderClick: onHeaderClick, dropColumn: dropColumn, dragColumn: dragColumn, showSelection: showSelection, selectAll: selectAll, selectionState: selectionState, handleSelectAll: handleSelectAll, handleColumnReorder: handleColumnReorder, onColumnResize: onColumnResize }), _jsx(StyledTbody, { className: "tbody" + (stripes ? " striped" : ""), stripes: stripes, children: children })] })));
-});
-const Row = ({ data, index, style }) => {
-    const { data: dataRows, columns, focusedRow, keyValue, _compact, queryKey, reloadFn, headerHeight, resizeState, onRowUpdated, onRowClick, onRowDoubleClick, } = data;
-    const item = (dataRows === null || dataRows === void 0 ? void 0 : dataRows[index]) || {};
-    const handleRowUpdated = (data) => {
-        onRowUpdated === null || onRowUpdated === void 0 ? void 0 : onRowUpdated({ rowData: item, updateData: data });
-    };
-    const isRowFocused = focusedRow
-        ? focusedRow[keyValue] === item[keyValue]
-        : false;
-    const row = columns.map((column) => {
-        var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r, _s, _t, _u, _v, _w, _x, _y, _z, _0, _1, _2, _3;
-        let value = null;
-        let savedColSize = ((_c = (_b = (_a = resizeState === null || resizeState === void 0 ? void 0 : resizeState.current) === null || _a === void 0 ? void 0 : _a.columns) === null || _b === void 0 ? void 0 : _b.find((col) => col.dataField === column.props.dataField)) === null || _c === void 0 ? void 0 : _c.width) || MIN_COLUMN_WIDTH;
-        if (savedColSize < MIN_COLUMN_WIDTH) {
-            savedColSize = MIN_COLUMN_WIDTH;
-        }
-        // parse datafield dot syntax
-        if ((_d = column.props.dataField) === null || _d === void 0 ? void 0 : _d.includes(".")) {
-            const fields = (_e = column.props.dataField) === null || _e === void 0 ? void 0 : _e.split(".");
-            value = fields.reduce((acc, field) => {
-                return acc === null || acc === void 0 ? void 0 : acc[field];
-            }, item);
+        (_a = props.onScroll) === null || _a === void 0 ? void 0 : _a.call(props, event);
+        const { scrollTop, scrollHeight, clientHeight, scrollLeft } = event.currentTarget;
+        // move header row horizontally with the scroll
+        const headerRow = headerRowElm.current;
+        if (headerRow) {
+            // shift position of header row
+            headerRow.style.transform = `translateX(-${scrollLeft}px)`; // move header row horizontally with the scroll
+        }
+        // scroll to top
+        if (scrollTop <= 250) {
+            (_b = props.onScrollToTop) === null || _b === void 0 ? void 0 : _b.call(props, event);
+        }
+        // Scroll to bottom
+        if (scrollHeight - scrollTop <= clientHeight + 250) {
+            (_c = props.onScrollToBottom) === null || _c === void 0 ? void 0 : _c.call(props, event);
         }
-        else
-            value = item === null || item === void 0 ? void 0 : item[column.props.dataField];
-        // format date values
-        if (column.props.dataType === "date" &&
-            ((_g = (_f = column === null || column === void 0 ? void 0 : column.props) === null || _f === void 0 ? void 0 : _f.format) === null || _g === void 0 ? void 0 : _g.type) &&
-            value) {
-            const dateFormat = (_j = (_h = column === null || column === void 0 ? void 0 : column.props) === null || _h === void 0 ? void 0 : _h.format) === null || _j === void 0 ? void 0 : _j.type;
-            value = moment(value).format(dateFormat);
-        }
-        if (column.props.render) {
-            return (_jsxs(StyledTd, { className: `td ${((_k = column === null || column === void 0 ? void 0 : column.props) === null || _k === void 0 ? void 0 : _k.columnId) ? `col-${column.props.columnId}` : ""}`, title: ((_l = column === null || column === void 0 ? void 0 : column.props) === null || _l === void 0 ? void 0 : _l.titleRender) ? (_m = column === null || column === void 0 ? void 0 : column.props) === null || _m === void 0 ? void 0 : _m.titleRender(item) : null, compact: _compact, style: Object.assign({ width: ((_o = column === null || column === void 0 ? void 0 : column.props) === null || _o === void 0 ? void 0 : _o.width)
-                        ? (_p = column === null || column === void 0 ? void 0 : column.props) === null || _p === void 0 ? void 0 : _p.width
-                        : savedColSize || "auto", maxWidth: ((_q = column === null || column === void 0 ? void 0 : column.props) === null || _q === void 0 ? void 0 : _q.width)
-                        ? (_r = column === null || column === void 0 ? void 0 : column.props) === null || _r === void 0 ? void 0 : _r.width
-                        : savedColSize || "auto", minWidth: ((_s = column === null || column === void 0 ? void 0 : column.props) === null || _s === void 0 ? void 0 : _s.width)
-                        ? (_t = column === null || column === void 0 ? void 0 : column.props) === null || _t === void 0 ? void 0 : _t.width
-                        : savedColSize || MIN_COLUMN_WIDTH }, (((_u = column === null || column === void 0 ? void 0 : column.props) === null || _u === void 0 ? void 0 : _u.style) || {})), "data-type": "td", children: [column.props.resizeEnabled !== false && _jsx(Resizer, { column: column }), column.props.render(item, {
-                        queryKey: queryKey || "",
-                        reload: reloadFn,
-                        onRowUpdated: handleRowUpdated,
-                    })] }, shortUUID.generate()));
-        }
-        return (_jsxs(StyledTd, { className: `td ${((_v = column === null || column === void 0 ? void 0 : column.props) === null || _v === void 0 ? void 0 : _v.columnId) ? `col-${column.props.columnId}` : ""}`, compact: _compact, title: ((_w = column === null || column === void 0 ? void 0 : column.props) === null || _w === void 0 ? void 0 : _w.titleRender) ? (_x = column === null || column === void 0 ? void 0 : column.props) === null || _x === void 0 ? void 0 : _x.titleRender(item) : null, "data-type": "td", style: {
-                width: ((_y = column === null || column === void 0 ? void 0 : column.props) === null || _y === void 0 ? void 0 : _y.width)
-                    ? (_z = column === null || column === void 0 ? void 0 : column.props) === null || _z === void 0 ? void 0 : _z.width
-                    : savedColSize || "auto",
-                maxWidth: ((_0 = column === null || column === void 0 ? void 0 : column.props) === null || _0 === void 0 ? void 0 : _0.width)
-                    ? (_1 = column === null || column === void 0 ? void 0 : column.props) === null || _1 === void 0 ? void 0 : _1.width
-                    : savedColSize || "auto",
-                minWidth: ((_2 = column === null || column === void 0 ? void 0 : column.props) === null || _2 === void 0 ? void 0 : _2.width)
-                    ? (_3 = column === null || column === void 0 ? void 0 : column.props) === null || _3 === void 0 ? void 0 : _3.width
-                    : savedColSize || MIN_COLUMN_WIDTH,
-            }, children: [column.props.resizeEnabled !== false && _jsx(Resizer, { column: column }), value] }, shortUUID.generate()));
-    });
-    return (_jsx(StyledTr, { className: `tr${isRowFocused ? " focused" : ""}`, "data-key": item[keyValue], "data-type": "tr", "data-even": index % 2 === 0 ? "true" : "false", compact: _compact, onClick: (e) => {
-            // dblclick event
-            if (e.detail === 2) {
-                onRowDoubleClick === null || onRowDoubleClick === void 0 ? void 0 : onRowDoubleClick(item);
-            }
-            else {
-                onRowClick === null || onRowClick === void 0 ? void 0 : onRowClick(item);
-            }
-        }, style: Object.assign(Object.assign({}, style), { top: ((style === null || style === void 0 ? void 0 : style.top) || 0) + headerHeight }), children: row }, shortUUID.generate()));
-};
-export const useTable = () => {
-    const [tableInstance, setTableInstance] = useState(null);
-    return {
-        setTableInstance,
-        toggleCompact: () => tableInstance === null || tableInstance === void 0 ? void 0 : tableInstance.toggleCompact(),
-        toggleStripes: () => tableInstance === null || tableInstance === void 0 ? void 0 : tableInstance.toggleStripes(),
-        isCompact: (tableInstance === null || tableInstance === void 0 ? void 0 : tableInstance.isCompact) || false,
-        isStriped: (tableInstance === null || tableInstance === void 0 ? void 0 : tableInstance.isStriped) || false,
-        getVirtualSelectionTotal: () => (tableInstance === null || tableInstance === void 0 ? void 0 : tableInstance.getVirtualSelectionTotal()) || 0,
-        getSelectedRows: () => (tableInstance === null || tableInstance === void 0 ? void 0 : tableInstance.getSelectedRows()) || [],
-        getExcludedRows: () => (tableInstance === null || tableInstance === void 0 ? void 0 : tableInstance.getExcludedRows()) || [],
-        getSelectionState: () => (tableInstance === null || tableInstance === void 0 ? void 0 : tableInstance.getSelectionState()) || {},
-        clearSelections: () => tableInstance === null || tableInstance === void 0 ? void 0 : tableInstance.clearSelections(),
-        onColumnResize: (e) => tableInstance === null || tableInstance === void 0 ? void 0 : tableInstance.onColumnResize(e),
     };
-};
-const Table = styled(({ className, children, data, rowHeight, headerHeight, tableInstance, queryKey, totalRecords, compact, focusedRow, keyValue, onScroll, allowColumnResize, allowColumnReorder, showActionColumn, showSelection, selectAll, reloadFn, onColumnReorder, onSelectionChanged, onActionButtonClick, onHeaderClick, onColumnResize, onRowUpdated, onRowClick, onRowDoubleClick, }) => {
-    const rootRef = useRef(null);
     const [initialize, getInstance] = useOverlayScrollbars({
         options: {
             scrollbars: {
@@ -425,291 +68,42 @@ const Table = styled(({ className, children, data, rowHeight, headerHeight, tabl
                 autoHideDelay: 500,
             },
         },
-        events: { scroll: (_, event) => onScroll === null || onScroll === void 0 ? void 0 : onScroll(event) },
+        events: {
+            scroll: (_, event) => handleOnScroll(event),
+        },
     });
-    const [targetElm, setTargetElm] = useState(null);
-    const [listElm, setListElm] = useState(null);
-    const dragColumn = useRef(null);
-    const dropColumn = useRef(null);
-    const [_compact, setCompact] = useState(compact);
-    const [stripes, setStripes] = useState(false);
-    const [selectedRows, setSelectedRows] = useState([]);
-    const [virtualSelectionTotal, setVirtualSelectionTotal] = useState(0);
-    const [excludedRows, setExcludedRows] = useState([]);
-    const [selectionState, setSelectionState] = useState("none");
-    const resizeState = useRef([]);
-    // check if children is an array
-    children = useMemo(() => {
-        return Array.isArray(children) ? children : [children];
-    }, [children]);
-    let columns = useMemo(() => children === null || children === void 0 ? void 0 : children.map((column) => {
-        var _a, _b, _c;
-        return cloneElement(column, {
-            columnId: shortUUID.generate(), // Set unique ID for each column
-            allowResize: allowColumnResize !== undefined
-                ? allowColumnResize
-                : (_a = column === null || column === void 0 ? void 0 : column.props) === null || _a === void 0 ? void 0 : _a.allowResize,
-            allowReorder: allowColumnReorder !== undefined
-                ? allowColumnReorder
-                : (_b = column === null || column === void 0 ? void 0 : column.props) === null || _b === void 0 ? void 0 : _b.allowReorder,
-            resizeEnabled: allowColumnResize !== undefined
-                ? allowColumnResize
-                : (_c = column === null || column === void 0 ? void 0 : column.props) === null || _c === void 0 ? void 0 : _c.resizeEnabled,
-        });
-    }), [children]);
-    const [columnOrder, setColumnOrder] = useState(columns.map((col, index) => {
-        var _a, _b;
-        return {
-            column: (_a = col.props) === null || _a === void 0 ? void 0 : _a.dataField,
-            order: ((_b = col.props) === null || _b === void 0 ? void 0 : _b.order) || index,
-        };
-    }));
-    const handleColumnReorder = (dragColumn, dropColumn) => {
-        var _a;
-        const dropColumnOrder = (_a = columnOrder.find((col) => col.column === dropColumn.dataField)) === null || _a === void 0 ? void 0 : _a.order;
-        const newColumnOrder = columnOrder.map((col) => {
-            if (col.column === dragColumn.dataField) {
-                return { column: col.column, order: dropColumnOrder + 1 };
-            }
-            else {
-                return col.order > dropColumnOrder
-                    ? Object.assign(Object.assign({}, col), { order: col.order + 1 }) : col;
-            }
-        });
-        onColumnReorder === null || onColumnReorder === void 0 ? void 0 : onColumnReorder(newColumnOrder);
-        setColumnOrder(newColumnOrder);
-    };
-    const handleSelectAll = () => {
-        let newSelectionState = null;
-        let newVirtualSelectionTotal = null;
-        if (selectionState === "all") {
-            // clear current selections
-            setSelectedRows([]);
-            // turn off all rows selected
-            newSelectionState = "none";
-            setSelectionState("none");
-            // clear excluded rows
-            setExcludedRows([]);
-            newVirtualSelectionTotal = 0;
-            setVirtualSelectionTotal(newVirtualSelectionTotal);
-        }
-        else {
-            // turn on all rows selected
-            newSelectionState = "all";
-            setSelectionState("all");
-            // clear excluded rows
-            setExcludedRows([]);
-            newVirtualSelectionTotal = totalRecords;
-            setVirtualSelectionTotal(newVirtualSelectionTotal);
-        }
-        onSelectionChanged === null || onSelectionChanged === void 0 ? void 0 : onSelectionChanged({
-            selectedRows: [],
-            excludedRows: [],
-            selectionState: newSelectionState,
-            virtualSelectionTotal: newVirtualSelectionTotal,
-        });
-    };
-    const handleSelectRow = ({ rowData, checked, }) => {
-        let newSelectedRows = [];
-        let newExcludedRows = [];
-        let newSelectionState = null;
-        let newVirtualSelectionTotal = null;
-        if (selectionState === "all") {
-            newExcludedRows = [...excludedRows, rowData];
-            newSelectionState = "someExcluded";
-            newVirtualSelectionTotal = totalRecords ? totalRecords - 1 : 0;
-        }
-        else if (selectionState === "none") {
-            newSelectedRows = [rowData];
-            newSelectionState = "someIncluded";
-            newVirtualSelectionTotal = 1;
-        }
-        else if (selectionState === "someExcluded") {
-            newSelectionState = "someExcluded";
-            newSelectedRows = selectedRows;
-            if (checked) {
-                // remove from excluded rows
-                newExcludedRows = excludedRows.filter((row) => keyValue ? (row === null || row === void 0 ? void 0 : row[keyValue]) !== (rowData === null || rowData === void 0 ? void 0 : rowData[keyValue]) : false);
-                newVirtualSelectionTotal = virtualSelectionTotal
-                    ? virtualSelectionTotal + 1
-                    : 0;
-            }
-            else {
-                // add to excluded rows
-                newExcludedRows = [...excludedRows, rowData];
-                newVirtualSelectionTotal = virtualSelectionTotal
-                    ? virtualSelectionTotal - 1
-                    : 0;
-            }
-        }
-        else if (selectionState === "someIncluded") {
-            newSelectionState = "someIncluded";
-            newExcludedRows = excludedRows;
-            if (checked) {
-                // add to selected rows
-                newSelectedRows = [...selectedRows, rowData];
-                newVirtualSelectionTotal = virtualSelectionTotal
-                    ? virtualSelectionTotal + 1
-                    : 0;
-            }
-            else {
-                // remove from selected rows
-                newSelectedRows = selectedRows.filter((row) => keyValue ? row[keyValue] !== rowData[keyValue] : false);
-                newVirtualSelectionTotal = virtualSelectionTotal
-                    ? virtualSelectionTotal - 1
-                    : 0;
-            }
+    const getTableDimensions = () => {
+        if (tableElement.current) {
+            const { width, height } = tableElement.current.getBoundingClientRect();
+            setTableDimensions({ width, height });
         }
-        if (newVirtualSelectionTotal === totalRecords) {
-            newSelectionState = "all";
-        }
-        else if (newVirtualSelectionTotal === 0) {
-            newSelectionState = "none";
-        }
-        setSelectedRows(newSelectedRows);
-        setExcludedRows(newExcludedRows);
-        setVirtualSelectionTotal(newVirtualSelectionTotal);
-        setSelectionState(newSelectionState);
-        onSelectionChanged === null || onSelectionChanged === void 0 ? void 0 : onSelectionChanged({
-            selectedRows: newSelectedRows,
-            excludedRows: newExcludedRows,
-            selectionState: newSelectionState,
-            virtualSelectionTotal: newVirtualSelectionTotal,
-        });
     };
-    // sort columns
-    columns = useMemo(() => columns.sort((a, b) => {
-        var _a, _b;
-        const aOrder = (_a = columnOrder.find((col) => col.column === a.props.dataField)) === null || _a === void 0 ? void 0 : _a.order;
-        const bOrder = (_b = columnOrder.find((col) => col.column === b.props.dataField)) === null || _b === void 0 ? void 0 : _b.order;
-        return aOrder - bOrder;
-    }), [columnOrder, columns]);
-    const hiddenColumns = columns
-        .filter((col) => col.props.visible === false)
-        .map((col) => col.props.dataField);
-    // insert action column as first column
-    showActionColumn &&
-        (columns = [
-            _jsx(Column, { className: "action-column", dataField: "action", allowSorting: false, allowReorder: false, caption: "", width: showSelection ? 55 : 35, resizeEnabled: false, render: (rowData) => (_jsxs("div", { className: "action-column-container", children: [showSelection && (_jsx("div", { className: "action-button", children: _jsx(CheckBox, { value: selectionState === "all"
-                                    ? true
-                                    : selectionState === "someIncluded"
-                                        ? !!selectedRows.find((row) => keyValue
-                                            ? row[keyValue] === rowData[keyValue]
-                                            : false)
-                                        : selectionState === "someExcluded"
-                                            ? !excludedRows.find((row) => keyValue
-                                                ? row[keyValue] === rowData[keyValue]
-                                                : false)
-                                            : false, onChange: (newValue) => handleSelectRow({ rowData, checked: newValue }) }) })), _jsx("div", { className: "action-button", title: "Show More Details", onClick: (e) => {
-                                onActionButtonClick === null || onActionButtonClick === void 0 ? void 0 : onActionButtonClick(rowData);
-                            }, children: _jsx(Maximize2Icon, { size: _compact ? 8 : 12 }) })] })) }, shortUUID.generate()),
-            ...columns,
-        ]);
     useEffect(() => {
-        if (targetElm && listElm) {
+        if (targetElm.current && listElm.current) {
             initialize({
-                target: targetElm,
+                target: targetElm.current,
                 elements: {
-                    viewport: listElm,
+                    viewport: listElm.current,
                 },
             });
             return () => { var _a; return (_a = getInstance()) === null || _a === void 0 ? void 0 : _a.destroy(); };
         }
-    }, [targetElm, listElm]);
-    useEffect(() => {
-        if (tableInstance) {
-            tableInstance.setTableInstance({
-                getSelectedRows: () => selectedRows,
-                getExcludedRows: () => excludedRows,
-                getVirtualSelectionTotal: () => virtualSelectionTotal,
-                getSelectionState: () => selectionState,
-                clearSelections: () => {
-                    setSelectedRows([]);
-                    setVirtualSelectionTotal(0);
-                    setSelectionState("none");
-                    setExcludedRows([]);
-                },
-                toggleCompact: () => setCompact(!_compact),
-                isCompact: _compact,
-                toggleStripes: () => setStripes(!stripes),
-                isStriped: stripes,
-            });
-        }
-    }, [
-        selectedRows,
-        excludedRows,
-        virtualSelectionTotal,
-        selectionState,
-        _compact,
-        stripes,
-        tableInstance,
-    ]);
-    useEffect(() => {
-        // Scroll to selected row if outside of viewport
-        if (focusedRow) {
-            const focusedRowElm = keyValue
-                ? document.querySelector(`[data-type="tr"][data-key="${focusedRow[keyValue]}"]`)
-                : null;
-            if (focusedRowElm) {
-                focusedRowElm.scrollIntoView({
-                    behavior: "smooth",
-                    block: "nearest",
-                    inline: "nearest",
-                });
-            }
-        }
-    }, [focusedRow]);
-    return (_jsx("div", { ref: rootRef, className: className + " table-wrapper", children: _jsx(AutoSizer, { children: ({ height, width }) => (_jsx("div", { style: { width, height }, "data-overlayscrollbars": "", ref: setTargetElm, children: _jsx(FixedSizeList, { overscanCount: 10, itemData: {
-                        data,
-                        columns: columns.filter((col) => !hiddenColumns.includes(col.props.dataField)),
-                        focusedRow,
-                        keyValue,
-                        _compact,
-                        queryKey,
-                        reloadFn,
-                        rowHeight: rowHeight ? rowHeight : _compact ? 28 : 38,
-                        headerHeight: headerHeight
-                            ? headerHeight
-                            : _compact
-                                ? 28
-                                : 38,
-                        resizeState,
-                        onRowUpdated,
-                        onRowClick,
-                        onRowDoubleClick,
-                        tableWidth: width,
-                    }, height: height, innerElementType: (props) => (_jsx(InnerElement, Object.assign({}, props, { columns: columns.filter((col) => !hiddenColumns.includes(col.props.dataField)), tableWidth: width, resizeState: resizeState, _compact: _compact, stripes: stripes, onHeaderClick: onHeaderClick, dropColumn: dropColumn, dragColumn: dragColumn, showSelection: showSelection, selectAll: selectAll, selectionState: selectionState, handleSelectAll: handleSelectAll, handleColumnReorder: handleColumnReorder, onColumnResize: onColumnResize }))), itemCount: data === null || data === void 0 ? void 0 : data.length, itemSize: rowHeight ? rowHeight : _compact ? 28 : 38, width: width, outerRef: setListElm, children: Row }) })) }) }));
-}) `
-  position: relative;
-  flex: 1 1 auto;
-  overflow: hidden;
-  display: flex;
-  flex-direction: column;
-
-  .os-scrollbar {
-    pointer-events: auto;
-    visibility: visible;
-  }
-
-  .action-column {
-    max-width: 55px;
-  }
-
-  .action-column-container {
-    display: flex;
-    align-content: center;
-    align-items: center;
-    padding: 4px;
-    color: ${({ theme }) => theme.palette.text.secondary};
-  }
-
-  .action-button {
-    display: flex;
-    align-content: center;
-    align-items: center;
-    cursor: pointer;
-    color: ${({ theme }) => theme.palette.primary.main};
-    margin-right: 5px;
-  }
-`;
+    }, [targetElm, listElm, initialize, getInstance]);
+    useLayoutEffect(() => {
+        const element = tableElement.current;
+        if (!element)
+            return;
+        const resizeObserver = new ResizeObserver(() => {
+            getTableDimensions();
+        });
+        resizeObserver.observe(element);
+        return () => {
+            resizeObserver.unobserve(element);
+        };
+    }, []);
+    const __data = useMemo(() => data === null || data === void 0 ? void 0 : data.map((d, i) => (Object.assign(Object.assign({}, d), { __key: shortUUID.generate(), __index: i }))), [data]);
+    return (_jsx(TableProvider, Object.assign({ columns: children
+            .filter((child) => child.type === Column)
+            .map((child) => child.props), data: __data, tableElement: tableElement, headerRowElm: headerRowElm, tableDimensions: tableDimensions, targetElm: targetElm, listElm: listElm }, props, { children: _jsx(TableContent, {}) })));
+};
 export default Table;