@monolith-forensics/monolith-ui 1.1.91 → 1.2.0

package/dist/QueryFilter/QueryFilter.js

@@ -0,0 +1,224 @@
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import styled, { useTheme } from "styled-components";
+import { XIcon } from "lucide-react";
+import DropDownMenu from "../DropDownMenu";
+import Button from "../Button";
+import DefaultOperators from "./DefaultOperators";
+import Input from "../Input";
+import DateInput from "../DateInput";
+import { useDebouncedCallback } from "use-debounce";
+const StyledContainer = styled.div `
+  display: flex;
+  flex-direction: row;
+  gap: 1.5px;
+`;
+const RuleContainer = styled(StyledContainer) `
+  // first child
+  & > *:first-child {
+    border-radius: 5px 0 0 5px;
+  }
+
+  // last child
+  & > *:last-child {
+    border-radius: 0 5px 5px 0;
+  }
+
+  button.mfui-DropDownMenu {
+    border-color: transparent;
+  }
+
+  button.mfui-DropDownMenu:hover {
+    border-color: ${({ theme }) => theme.palette.primary.main};
+  }
+`;
+const FilterContainer = styled(StyledContainer) `
+  gap: 10px;
+  flex-wrap: wrap;
+`;
+const StyledButton = styled(Button) `
+  border-radius: 0;
+  font-size: 11px;
+  height: 20px;
+
+  padding: 3px 5px;
+
+  &:hover {
+    background-color: ${({ theme }) => theme.palette.action.hover};
+    border-color: ${({ theme }) => theme.palette.primary.main};
+  }
+`;
+const BaseLabel = styled.div `
+  user-select: none;
+
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+
+  border: 1px solid transparent;
+
+  background-color: ${({ theme }) => theme.palette.background.secondary};
+
+  font-size: 11px;
+
+  height: 20px;
+
+  padding: 2px 4px;
+
+  overflow: hidden;
+  white-space: nowrap;
+  text-overflow: ellipsis;
+
+  cursor: pointer;
+
+  &:hover {
+    background-color: ${({ theme }) => theme.palette.action.hover};
+  }
+`;
+const FieldLabel = styled(BaseLabel) ``;
+const ValueLabel = styled(BaseLabel) ``;
+const StyledInput = styled(Input) `
+  height: 20px;
+  min-height: 20px;
+  width: 100px;
+  border-radius: 0;
+  font-size: 11px;
+  padding: 2px 4px;
+
+  border-color: transparent;
+  background-color: ${({ theme }) => theme.palette.background.secondary};
+
+  &:hover {
+    border-color: ${({ theme }) => theme.palette.primary.main};
+  }
+`;
+const StyledDateInput = styled(DateInput) `
+  height: 20px;
+  //   width: 100px;
+  font-size: 11px;
+  border-radius: 0;
+  border-color: transparent;
+  background-color: ${({ theme }) => theme.palette.background.secondary};
+`;
+const ValueEditor = ({ rule, inputType, filterDef, onChange }) => {
+    var _a, _b, _c;
+    const theme = useTheme();
+    const handleInputChange = useDebouncedCallback((e) => {
+        const value = e.target.value;
+        onChange === null || onChange === void 0 ? void 0 : onChange(Object.assign(Object.assign({}, rule), { value }));
+    }, 250);
+    const handleMultiSelectChange = useDebouncedCallback((selected) => {
+        onChange === null || onChange === void 0 ? void 0 : onChange(Object.assign(Object.assign({}, rule), { value: selected.map((s) => s.value) }));
+    }, 100);
+    const handleTimestampChange = useDebouncedCallback((timestamp) => {
+        onChange === null || onChange === void 0 ? void 0 : onChange(Object.assign(Object.assign({}, rule), { value: timestamp }));
+    }, 100);
+    switch (inputType) {
+        case "text":
+            return (_jsx(StyledInput, { placeholder: "Enter Value...", defaultValue: rule.value, onChange: handleInputChange }));
+        case "number":
+            return (_jsx(StyledInput, { type: "number", placeholder: "Enter Value...", defaultValue: rule.value, onChange: handleInputChange }));
+        case "date":
+            return (_jsx(StyledDateInput, { arrow: true, enableCalendar: true, format: "YYYY-MM-DD", defaultValue: rule.value, onChange: handleTimestampChange }));
+        case "datetime":
+            return (_jsx(StyledDateInput, { arrow: true, enableCalendar: true, format: "YYYY-MM-DD HH:mm:ss", defaultValue: rule.value, onChange: handleTimestampChange }));
+        case "multiselect":
+            let display = Array.isArray(rule.value) && rule.value.length > 0
+                ? ((_b = (_a = filterDef === null || filterDef === void 0 ? void 0 : filterDef.selectOptions) === null || _a === void 0 ? void 0 : _a.filter((o) => rule.value.includes(o.value))) === null || _b === void 0 ? void 0 : _b.map((o) => o.label).join(", ")) || "Select Value"
+                : "Select Value";
+            if (Array.isArray(rule.value) && rule.value.length > 1) {
+                display = `${rule.value.length} ${(filterDef === null || filterDef === void 0 ? void 0 : filterDef.pluralLabel) || "Values"}`;
+            }
+            if (!(filterDef === null || filterDef === void 0 ? void 0 : filterDef.selectOptions)) {
+                return _jsx(FieldLabel, { children: "Loading..." });
+            }
+            return (_jsx(DropDownMenu, { data: (filterDef === null || filterDef === void 0 ? void 0 : filterDef.selectOptions) || [], variant: "outlined", multiselect: true, searchable: true, buttonProps: {
+                    size: "xxs",
+                    style: {
+                        padding: "0px 4px",
+                        height: 20,
+                        borderRadius: 0,
+                        backgroundColor: theme.palette.background.secondary,
+                        fontSize: 11,
+                        fontWeight: "normal",
+                        color: !!rule.value &&
+                            Array.isArray(rule.value) &&
+                            rule.value.length > 0
+                            ? theme.palette.text.primary
+                            : theme.palette.text.secondary,
+                    },
+                }, dropDownProps: {
+                    style: { width: 175, maxWidth: 400 },
+                }, defaultValue: (_c = filterDef === null || filterDef === void 0 ? void 0 : filterDef.selectOptions) === null || _c === void 0 ? void 0 : _c.filter((o) => Array.isArray(rule.value) &&
+                    !!rule.value.find((v) => v == o.value)), onChange: handleMultiSelectChange, children: display }));
+        default:
+            return (_jsx(StyledInput, { placeholder: "Enter Value...", onChange: handleInputChange }));
+    }
+};
+const ValueSelector = ({ rule, inputType, filterDef, onChange, }) => {
+    const isBetween = rule.operator.value.toLowerCase().includes("between");
+    const handleValueChange = (e) => {
+        const currentValue = rule.value;
+        if (isBetween) {
+            const newValue = [e.value];
+            if (Array.isArray(currentValue) && currentValue.length === 2) {
+                newValue.push(currentValue[1]);
+            }
+            onChange === null || onChange === void 0 ? void 0 : onChange(Object.assign(Object.assign({}, rule), { value: newValue }));
+            return;
+        }
+        onChange === null || onChange === void 0 ? void 0 : onChange(Object.assign(Object.assign({}, rule), { value: e.value }));
+    };
+    const handleSecondaryValueChange = (e) => {
+        const currentValue = rule.value;
+        if (isBetween) {
+            // current value already an array?
+            if (Array.isArray(currentValue)) {
+                onChange === null || onChange === void 0 ? void 0 : onChange(Object.assign(Object.assign({}, rule), { value: [currentValue[0], e.value] }));
+                return;
+            }
+            const newValue = [currentValue, e.value];
+            onChange === null || onChange === void 0 ? void 0 : onChange(Object.assign(Object.assign({}, rule), { value: newValue }));
+        }
+        return;
+    };
+    return (_jsxs(_Fragment, { children: [_jsx(ValueEditor, { rule: rule, inputType: inputType, filterDef: filterDef, onChange: handleValueChange }), isBetween && (_jsxs(_Fragment, { children: [_jsx(FieldLabel, { children: "and" }), _jsx(ValueEditor, { rule: rule, inputType: inputType, onChange: handleSecondaryValueChange })] }))] }));
+};
+const CloseLabel = styled(StyledButton) `
+  padding: 2px;
+
+  color: ${({ theme }) => theme.palette.text.secondary};
+
+  &:hover {
+    border-color: ${({ theme }) => theme.palette.primary.main};
+  }
+`;
+const Rules = ({ rules = [], combinator, showCombinator, filterDefinitions, onDelete, onUpdate, }) => {
+    return (_jsxs(_Fragment, { children: [showCombinator === true && (_jsx(FieldLabel, { children: combinator.toUpperCase() })), rules.map((rule, index) => {
+                const filterDef = filterDefinitions.find((f) => f.dataField === rule.dataField);
+                const operatorOptions = (filterDef === null || filterDef === void 0 ? void 0 : filterDef.operators) || DefaultOperators;
+                const inputType = (filterDef === null || filterDef === void 0 ? void 0 : filterDef.inputType) || "text";
+                return (_jsxs(RuleContainer, { "data-rule-id": rule.id, children: [_jsx(FieldLabel, { children: rule.label }), _jsx(DropDownMenu, { variant: "outlined", data: operatorOptions, 
+                            //   arrow={true}
+                            buttonProps: {
+                                title: "Select Operator",
+                                variant: "contained",
+                                size: "xxs",
+                                style: {
+                                    fontWeight: "normal",
+                                    padding: "3px 5px",
+                                    height: 20,
+                                    borderRadius: 0,
+                                },
+                            }, onItemSelect: (e) => onUpdate(Object.assign(Object.assign({}, rule), { operator: e })), dropDownProps: {
+                                style: { width: 175, maxWidth: 400 },
+                            }, children: rule.operator.label }), _jsx(ValueSelector, { rule: rule, inputType: inputType, filterDef: filterDef, onChange: onUpdate }), _jsx(CloseLabel, { variant: "contained", size: "xxs", onClick: () => onDelete(rule), children: _jsx(XIcon, { size: 16 }) })] }, rule.id));
+            })] }));
+};
+const QueryFilter = ({ queryFilter, }) => {
+    var _a;
+    const { filter, filterDefinitions, showCombinator } = queryFilter;
+    if (((_a = filter === null || filter === void 0 ? void 0 : filter.rules) === null || _a === void 0 ? void 0 : _a.length) == 0)
+        return null;
+    return (_jsx(FilterContainer, { className: "mfui-QueryFilter", children: _jsx(Rules, { rules: filter.rules, combinator: filter.combinator, showCombinator: showCombinator, filterDefinitions: filterDefinitions, onDelete: (rule) => queryFilter.removeRule(rule.id), onUpdate: (rule) => queryFilter.updateRule(rule) }) }));
+};
+export default QueryFilter;

package/dist/QueryFilter/index.d.ts

@@ -0,0 +1,3 @@
+export { default as useQueryFilter } from "./useQueryFilter";
+export { default as QueryFilter } from "./QueryFilter";
+export * from "./types";

package/dist/QueryFilter/index.js

@@ -0,0 +1,3 @@
+export { default as useQueryFilter } from "./useQueryFilter";
+export { default as QueryFilter } from "./QueryFilter";
+export * from "./types";

package/dist/QueryFilter/types.d.ts

@@ -0,0 +1,51 @@
+import { DropDownItem } from "../DropDownMenu";
+export interface UseQueryFilterProps {
+    defaultFilter?: Query | null;
+    filterDefinitions: FilterDefinition[];
+    showCombinator?: boolean;
+    onFilterChange?: (filter: any) => void;
+}
+export type QueryFilter = {
+    filter: Query;
+    filterDefinitions: FilterDefinition[];
+    showCombinator?: boolean;
+    addRule: (rule: Rule) => void;
+    removeRule: (id: string) => void;
+    updateRule: (rule: Rule) => void;
+};
+export type UseQueryFilter = (args: UseQueryFilterProps) => QueryFilter;
+export type Combinator = "and" | "or";
+export type Operator = {
+    label: string;
+    value: string;
+};
+export type EditorType = "text" | "select" | "checkbox" | "radio" | "multiselect" | "date" | "time" | null;
+export interface FilterDefinition {
+    dataField: string;
+    label: string;
+    pluralLabel?: string;
+    operators?: Operator[];
+    inputType?: HTMLInputElement["type"];
+    placeholder?: string;
+    selectOptions?: DropDownItem[];
+    editorType?: EditorType;
+    query?: {
+        queryKey: (string | {
+            [x: string]: any;
+        })[];
+        queryFn: (args: any) => Promise<any>;
+    };
+}
+export interface Rule {
+    id?: string;
+    dataField: string;
+    value: string | string[] | number | number[];
+    operator: Operator;
+    label: string;
+}
+export interface RuleGroup {
+    rules: Rule[];
+    combinator: Combinator;
+}
+export interface Query extends RuleGroup {
+}

package/dist/QueryFilter/useQueryFilter.d.ts

@@ -0,0 +1,3 @@
+import { UseQueryFilter } from "./types";
+declare const useQueryFilter: UseQueryFilter;
+export default useQueryFilter;

package/dist/QueryFilter/useQueryFilter.js

@@ -0,0 +1,36 @@
+import { useEffect, useState } from "react";
+import shortUUID from "short-uuid";
+const defaultFilter = {
+    combinator: "and",
+    rules: [],
+};
+const useQueryFilter = (args) => {
+    const [filter, setFilter] = useState((args === null || args === void 0 ? void 0 : args.defaultFilter) || defaultFilter);
+    const addRule = (rule) => {
+        if (!rule.id) {
+            rule.id = shortUUID.generate();
+        }
+        setFilter(Object.assign(Object.assign({}, filter), { rules: [...filter.rules, rule] }));
+    };
+    const removeRule = (id) => {
+        const rules = filter.rules.filter((r) => r.id !== id);
+        setFilter(Object.assign(Object.assign({}, filter), { rules }));
+    };
+    const updateRule = (rule) => {
+        const rules = filter.rules.map((r) => (r.id === rule.id ? rule : r));
+        setFilter(Object.assign(Object.assign({}, filter), { rules }));
+    };
+    useEffect(() => {
+        var _a;
+        (_a = args === null || args === void 0 ? void 0 : args.onFilterChange) === null || _a === void 0 ? void 0 : _a.call(args, filter);
+    }, [filter]);
+    return {
+        filter,
+        filterDefinitions: args.filterDefinitions,
+        showCombinator: args.showCombinator,
+        addRule,
+        removeRule,
+        updateRule,
+    };
+};
+export default useQueryFilter;

package/dist/{NewTable → Table}/ActionCell.js

@@ -1,9 +1,10 @@
 import styled from "styled-components";
 import { TD } from "./TableComponents";
+import TableDefaults from "./TableDefaults";
 const ActionCell = styled(TD) `
-  width: 40px;
-  min-width: 40px;
-  max-width: 40px;
+  width: ${TableDefaults.actionCell.width}px;
+  min-width: ${TableDefaults.actionCell.minWidth}px;
+  max-width: ${TableDefaults.actionCell.maxWidth}px;
 
   display: flex;
   justify-content: center;

package/dist/{NewTable → Table}/ColumnResizer.js

@@ -3,7 +3,7 @@ import styled from "styled-components";
 import { resizeHandler } from "./Utils";
 const StyledContainer = styled.div `
   position: absolute;
-  right: -2px;
+  right: 0px;
   top: 0;
   height: 100%;
   z-index: 1;

package/dist/Table/LoadingIndicator.d.ts

@@ -0,0 +1,4 @@
+declare const LoadingIndicator: React.FC<{
+    visible?: boolean;
+}>;
+export default LoadingIndicator;

package/dist/Table/LoadingIndicator.js

@@ -0,0 +1,76 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import styled from "styled-components";
+import Loader from "../Loader";
+import { useEffect, useState } from "react";
+const StyledContainer = styled.div `
+  position: absolute;
+  top: 20%;
+  left: 50%;
+  transform: translate(-50%, -20%);
+  z-index: 5;
+
+  display: flex;
+  flex-direction: column;
+  gap: 10px;
+
+  font-size: 14px;
+
+  height: 150px;
+  width: 150px;
+
+  display: flex;
+  justify-content: center;
+  align-items: center;
+
+  border-radius: 5px;
+  border: 1px solid ${(props) => props.theme.palette.divider};
+  background-color: ${(props) => props.theme.palette.background.default};
+
+  // add blur to background
+  //   backdrop-filter: blur(5px);
+
+  // delay visibility
+  &.fade-in {
+    animation: fadeIn 0.4s forwards; /* Adjust duration as needed */
+  }
+
+  &.fade-out {
+    animation: fadeOut 0.4s forwards;
+  }
+
+  @keyframes fadeIn {
+    from {
+      opacity: 0;
+    }
+    to {
+      opacity: 1;
+    }
+  }
+
+  @keyframes fadeOut {
+    from {
+      opacity: 1;
+    }
+    to {
+      opacity: 0;
+    }
+  }
+`;
+const LoadingIndicator = ({ visible = false, }) => {
+    const [shouldRender, setShouldRender] = useState(visible);
+    useEffect(() => {
+        if (visible) {
+            setShouldRender(true); // Make sure component renders to fade in
+        }
+    }, [visible]);
+    const handleAnimationEnd = () => {
+        if (!visible) {
+            setShouldRender(false); // Remove component after fade-out animation
+        }
+    };
+    if (!shouldRender) {
+        return null;
+    }
+    return (_jsxs(StyledContainer, { className: visible ? "fade-in" : "fade-out", onAnimationEnd: handleAnimationEnd, children: [_jsx(Loader, { size: 24, style: { margin: "none" }, speed: 550 }), _jsx("div", { children: "Loading..." })] }));
+};
+export default LoadingIndicator;

package/dist/Table/RenderSkeleton.d.ts

@@ -0,0 +1,6 @@
+interface RenderSkeletonProps {
+    rowHeight: number;
+    height: number;
+}
+declare const RenderSkeleton: React.FC<RenderSkeletonProps>;
+export default RenderSkeleton;

package/dist/Table/RenderSkeleton.js

@@ -0,0 +1,25 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import styled from "styled-components";
+import useTable from "./useTable";
+const StyledContainer = styled.div `
+  position: absolute;
+  top: 0;
+  left: 0;
+
+  width: 100%;
+  height: 100%;
+`;
+const SkeletonRow = styled.div `
+  height: 20px;
+  width: 100%;
+
+  border-bottom: 1px solid ${({ theme }) => theme.palette.divider};
+`;
+const RenderSkeleton = ({ rowHeight, height, }) => {
+    const {} = useTable();
+    const totalRows = Math.floor(height / rowHeight);
+    return (_jsx(StyledContainer, { style: {
+            height,
+        }, children: [...Array(totalRows)].map((_, i) => (_jsx(SkeletonRow, { style: { height: rowHeight } }, i))) }));
+};
+export default RenderSkeleton;

package/dist/{NewTable → Table}/StateStorage.d.ts

@@ -1,3 +1,4 @@
+import { Query } from "../QueryFilter";
 import { ColumnState, SelectionState, SortState, TableState } from "./types";
 type GetTableStateFn = (key: string) => TableState;
 type GetColumnStateFn = (key: string) => ColumnState[];
@@ -6,6 +7,10 @@ type GetSelectionStateFn = (key: string) => SelectionState;
 type SetSelectionStateFn = (key: string, value: any) => void;
 type GetSortStateStateFn = (key: string) => SortState | null | undefined;
 type SetSortStateFn = (key: string, value: SortState | undefined | null) => void;
+type GetSearchStateFn = (key: string) => string;
+type SetSearchStateFn = (key: string, value: string) => void;
+type GetFilterStateFn = (key: string) => Query | undefined;
+type SetFilterStateFn = (key: string, value?: Query | null) => void;
 declare const StateStorage: {
     getTableState: GetTableStateFn;
     getColumnState: GetColumnStateFn;
@@ -14,5 +19,9 @@ declare const StateStorage: {
     setSelectionState: SetSelectionStateFn;
     getSortState: GetSortStateStateFn;
     setSortState: SetSortStateFn;
+    getSearchState: GetSearchStateFn;
+    setSearchState: SetSearchStateFn;
+    getFilterState: GetFilterStateFn;
+    setFilterState: SetFilterStateFn;
 };
 export default StateStorage;

package/dist/{NewTable → Table}/StateStorage.js

@@ -60,6 +60,28 @@ const setSortState = (key, value) => {
     const newState = Object.assign(Object.assign({}, previousState), { sortState: value });
     set(key, newState);
 };
+const getSearchState = (key) => {
+    const data = getTableState(key);
+    return data.searchState || "";
+};
+const setSearchState = (key, value) => {
+    // get previous state
+    const previousState = getTableState(key);
+    // merge previous state with new state
+    const newState = Object.assign(Object.assign({}, previousState), { searchState: value });
+    set(key, newState);
+};
+const getFilterState = (key) => {
+    const data = getTableState(key);
+    return data.filterState;
+};
+const setFilterState = (key, value) => {
+    // get previous state
+    const previousState = getTableState(key);
+    // merge previous state with new state
+    const newState = Object.assign(Object.assign({}, previousState), { filterState: value });
+    set(key, newState);
+};
 const StateStorage = {
     getTableState,
     getColumnState,
@@ -68,5 +90,9 @@ const StateStorage = {
     setSelectionState,
     getSortState,
     setSortState,
+    getSearchState,
+    setSearchState,
+    getFilterState,
+    setFilterState,
 };
 export default StateStorage;

package/dist/Table/Table.d.ts

@@ -1,93 +1,3 @@
-import "overlayscrollbars/overlayscrollbars.css";
-import { ReactElement } from "react";
-export interface ColumnProps {
-    className?: string;
-    key?: string | number;
-    dataField: string;
-    caption: string;
-    columnId?: string | number;
-    allowSorting?: boolean;
-    allowReorder?: boolean;
-    allowResize?: boolean;
-    resizeEnabled?: boolean;
-    width?: number;
-    visible?: boolean;
-    enabled?: boolean;
-    sorting?: {
-        active: boolean;
-        direction: "asc" | "desc";
-    };
-    format?: {
-        type: string;
-    };
-    props?: any;
-    render?: (data: any, options: any) => React.ReactNode;
-}
-export declare const Column: React.FC<ColumnProps>;
-interface onResizeProps {
-    columns: {
-        dataField: string;
-        width: number;
-    }[];
-}
-type SelectionState = "all" | "none" | "someIncluded" | "someExcluded";
-interface TableInstanceProps {
-    setTableInstance: (e: any) => void;
-    toggleCompact: () => void;
-    toggleStripes: () => void;
-    isCompact: boolean;
-    isStriped: boolean;
-    getVirtualSelectionTotal: () => number;
-    getSelectedRows: () => any[];
-    getExcludedRows: () => any[];
-    getSelectionState: () => SelectionState;
-    clearSelections: () => void;
-    onColumnResize: (e: onResizeProps) => void;
-}
-export declare const useTable: () => {
-    setTableInstance: import("react").Dispatch<import("react").SetStateAction<TableInstanceProps | null>>;
-    toggleCompact: () => void | undefined;
-    toggleStripes: () => void | undefined;
-    isCompact: boolean;
-    isStriped: boolean;
-    getVirtualSelectionTotal: () => number;
-    getSelectedRows: () => any[];
-    getExcludedRows: () => any[];
-    getSelectionState: () => {};
-    clearSelections: () => void | undefined;
-    onColumnResize: (e: onResizeProps) => void | undefined;
-};
-interface TableProps {
-    className?: string;
-    children: ReactElement<ColumnProps> | ReactElement<ColumnProps>[];
-    data: {
-        [key: string]: any;
-    }[];
-    rowHeight?: number;
-    headerHeight?: number;
-    tableInstance?: TableInstanceProps;
-    queryKey?: any;
-    totalRecords?: number;
-    compact?: boolean;
-    focusedRow?: {
-        [key: string]: any;
-    };
-    keyValue?: string;
-    onScroll?: (e: any) => void;
-    allowColumnResize?: boolean;
-    allowColumnReorder?: boolean;
-    showActionColumn?: boolean;
-    showSelection?: boolean;
-    selectAll?: boolean;
-    reloadFn?: () => void;
-    onColumnReorder?: (e: any) => void;
-    onSelectionChanged?: (e: any) => void;
-    onActionButtonClick?: (e: any) => void;
-    onHeaderClick?: (e: any) => void;
-    onColumnResize?: (e: any) => void;
-    onRowUpdated?: (e: any) => void;
-    onRowClick?: (e: any) => void;
-    onRowDoubleClick?: (e: any) => void;
-}
-declare const Table: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<TableProps, never>> & string & Omit<({ 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, }: TableProps) => import("react/jsx-runtime").JSX.Element, keyof import("react").Component<any, {}, any>>;
+import { TableProps } from "./types";
+declare const Table: React.FC<TableProps>;
 export default Table;