jattac.libs.web.responsive-table 0.8.0 → 0.8.2

package/dist/index.es.js

@@ -0,0 +1,1207 @@
+import React, { createContext, useCallback, useMemo, useContext, useRef, useEffect, useState } from 'react';
+
+var styles$2 = {"responsiveTable":"ResponsiveTable-module_responsiveTable__4y-Od","tableContainer":"ResponsiveTable-module_tableContainer__VjWjH","cardContainer":"ResponsiveTable-module_cardContainer__Het4h","card":"ResponsiveTable-module_card__b-U2v","card-header":"ResponsiveTable-module_card-header__Ttk51","card-row":"ResponsiveTable-module_card-row__qvIUJ","card-label":"ResponsiveTable-module_card-label__v9L71","card-value":"ResponsiveTable-module_card-value__BO-c-","clickableRow":"ResponsiveTable-module_clickableRow__0kjWm","clickableHeader":"ResponsiveTable-module_clickableHeader__xHQhF","sortable":"ResponsiveTable-module_sortable__yvA60","sorted-asc":"ResponsiveTable-module_sorted-asc__jzOIa","sorted-desc":"ResponsiveTable-module_sorted-desc__7WCFK","headerInnerWrapper":"ResponsiveTable-module_headerInnerWrapper__3VAhD","headerContent":"ResponsiveTable-module_headerContent__ODMzS","sortIcon":"ResponsiveTable-module_sortIcon__A9WtD","footerCell":"ResponsiveTable-module_footerCell__8H-uG","clickableFooterCell":"ResponsiveTable-module_clickableFooterCell__WB9Ss","footerCard":"ResponsiveTable-module_footerCard__-NE2M","footer-card-row":"ResponsiveTable-module_footer-card-row__Vv6Ur","selectedRow":"ResponsiveTable-module_selectedRow__-JyNW","animatedRow":"ResponsiveTable-module_animatedRow__SFjrJ","fadeInUp":"ResponsiveTable-module_fadeInUp__jMCS7","skeleton":"ResponsiveTable-module_skeleton__XxsXW","shimmer":"ResponsiveTable-module_shimmer__H8PhC","noDataWrapper":"ResponsiveTable-module_noDataWrapper__Rj-k3","noData":"ResponsiveTable-module_noData__IpwNq","spinner":"ResponsiveTable-module_spinner__Pn-3D","spin":"ResponsiveTable-module_spin__i3NHn","infoContainer":"ResponsiveTable-module_infoContainer__b9IF5","stickyHeader":"ResponsiveTable-module_stickyHeader__-jjN-","internalStickyHeader":"ResponsiveTable-module_internalStickyHeader__idiJY"};
+
+/******************************************************************************
+Copyright (c) Microsoft Corporation.
+
+Permission to use, copy, modify, and/or distribute this software for any
+purpose with or without fee is hereby granted.
+
+THE SOFTWARE IS PROVIDED "AS IS" AND THE AUTHOR DISCLAIMS ALL WARRANTIES WITH
+REGARD TO THIS SOFTWARE INCLUDING ALL IMPLIED WARRANTIES OF MERCHANTABILITY
+AND FITNESS. IN NO EVENT SHALL THE AUTHOR BE LIABLE FOR ANY SPECIAL, DIRECT,
+INDIRECT, OR CONSEQUENTIAL DAMAGES OR ANY DAMAGES WHATSOEVER RESULTING FROM
+LOSS OF USE, DATA OR PROFITS, WHETHER IN AN ACTION OF CONTRACT, NEGLIGENCE OR
+OTHER TORTIOUS ACTION, ARISING OUT OF OR IN CONNECTION WITH THE USE OR
+PERFORMANCE OF THIS SOFTWARE.
+***************************************************************************** */
+/* global Reflect, Promise, SuppressedError, Symbol, Iterator */
+
+
+function __rest(s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+}
+
+function __awaiter(thisArg, _arguments, P, generator) {
+    function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
+    return new (P || (P = Promise))(function (resolve, reject) {
+        function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
+        function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
+        function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
+        step((generator = generator.apply(thisArg, _arguments || [])).next());
+    });
+}
+
+typeof SuppressedError === "function" ? SuppressedError : function (error, suppressed, message) {
+    var e = new Error(message);
+    return e.name = "SuppressedError", e.error = error, e.suppressed = suppressed, e;
+};
+
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
+const TableContext = createContext(undefined);
+const useTableContext = () => {
+    const context = useContext(TableContext);
+    if (!context) {
+        throw new Error('useTableContext must be used within a TableProvider');
+    }
+    return context;
+};
+function TableProvider({ children, value }) {
+    const { processedData, activePlugins, selectionProps, } = value;
+    const getRawColumnDefinition = useCallback((columnDefinition) => {
+        if (typeof columnDefinition === 'function') {
+            if (processedData.length === 0) {
+                return { displayLabel: '', cellRenderer: () => '' };
+            }
+            return columnDefinition(processedData[0], 0);
+        }
+        return columnDefinition;
+    }, [processedData]);
+    const getColumnDefinition = useCallback((columnDefinition, rowIndex) => {
+        if (processedData.length === 0) {
+            return { displayLabel: '', cellRenderer: () => '' };
+        }
+        return columnDefinition instanceof Function ? columnDefinition(processedData[0], rowIndex) : columnDefinition;
+    }, [processedData]);
+    const onHeaderClickCallback = useCallback((colDef) => {
+        var _a;
+        const rawColumnDefinition = getRawColumnDefinition(colDef);
+        return (_a = rawColumnDefinition.interactivity) === null || _a === void 0 ? void 0 : _a.onHeaderClick;
+    }, [getRawColumnDefinition]);
+    const getClickableHeaderClassName = useCallback((onHeaderClick, colDef) => {
+        var _a;
+        const rawColumnDefinition = getRawColumnDefinition(colDef);
+        return onHeaderClick
+            ? ((_a = rawColumnDefinition.interactivity) === null || _a === void 0 ? void 0 : _a.className) || styles$2.clickableHeader
+            : '';
+    }, [getRawColumnDefinition]);
+    const getHeaderProps = useCallback((colDef) => {
+        const headerProps = {};
+        activePlugins.forEach((plugin) => {
+            if (plugin.getHeaderProps) {
+                Object.assign(headerProps, plugin.getHeaderProps(getRawColumnDefinition(colDef)));
+            }
+        });
+        return headerProps;
+    }, [activePlugins, getRawColumnDefinition]);
+    const getRowId = useCallback((row, index) => {
+        if (selectionProps && selectionProps.rowIdKey) {
+            // eslint-disable-next-line @typescript-eslint/no-explicit-any
+            return row[selectionProps.rowIdKey];
+        }
+        return index;
+    }, [selectionProps]);
+    const getRowProps = useCallback((row) => {
+        const rowProps = {};
+        const clickHandlers = [];
+        activePlugins.forEach((plugin) => {
+            if (plugin.getRowProps) {
+                const props = plugin.getRowProps(row);
+                if (props.className) {
+                    rowProps.className = `${rowProps.className || ''} ${props.className}`.trim();
+                }
+                if (props.onClick) {
+                    clickHandlers.push(props.onClick);
+                }
+                const rest = __rest(props, []);
+                Object.assign(rowProps, rest);
+            }
+        });
+        if (clickHandlers.length > 0) {
+            rowProps.onClick = (e) => {
+                clickHandlers.forEach(handler => handler(e));
+            };
+        }
+        return rowProps;
+    }, [activePlugins]);
+    const renderCell = useCallback((content, row, colDef) => {
+        let processedContent = content;
+        activePlugins.forEach((plugin) => {
+            if (plugin.renderCell) {
+                processedContent = plugin.renderCell(processedContent, row, colDef);
+            }
+        });
+        return processedContent;
+    }, [activePlugins]);
+    const contextValue = useMemo(() => (Object.assign(Object.assign({}, value), { currentData: processedData, getRawColumnDefinition,
+        getColumnDefinition,
+        onHeaderClickCallback,
+        getClickableHeaderClassName,
+        getHeaderProps,
+        getRowProps,
+        getRowId,
+        renderCell })), [
+        value,
+        processedData,
+        getRawColumnDefinition,
+        getColumnDefinition,
+        onHeaderClickCallback,
+        getClickableHeaderClassName,
+        getHeaderProps,
+        getRowProps,
+        getRowId,
+        renderCell,
+    ]);
+    return (React.createElement(TableContext.Provider, { value: contextValue }, children));
+}
+
+function TableHeaderCell(props) {
+    const { columnDefinition, colIndex } = props;
+    const { onHeaderClickCallback, getClickableHeaderClassName, getHeaderProps, getRawColumnDefinition, getColumnDefinition, } = useTableContext();
+    const onHeaderClick = onHeaderClickCallback(columnDefinition);
+    const clickableHeaderClassName = getClickableHeaderClassName(onHeaderClick, columnDefinition);
+    const headerProps = getHeaderProps(columnDefinition);
+    const combinedClassName = `${clickableHeaderClassName} ${headerProps.className ? styles$2[headerProps.className] : ''}`.trim();
+    // eslint-disable-next-line @typescript-eslint/no-unused-vars
+    const { className } = headerProps, restHeaderProps = __rest(headerProps, ["className"]);
+    return (React.createElement("th", Object.assign({ key: colIndex, className: combinedClassName }, restHeaderProps, { onClick: onHeaderClick ? () => onHeaderClick(getRawColumnDefinition(columnDefinition).interactivity.id) : restHeaderProps.onClick }),
+        React.createElement("div", { className: styles$2.headerInnerWrapper },
+            React.createElement("div", { className: styles$2.headerContent }, getColumnDefinition(columnDefinition, 0).displayLabel),
+            React.createElement("span", { className: styles$2.sortIcon }))));
+}
+
+function TableBodyCell(props) {
+    const { row, rowIndex, columnDefinition } = props;
+    const { getColumnDefinition, renderCell } = useTableContext();
+    const colDef = getColumnDefinition(columnDefinition, rowIndex);
+    const cellContent = colDef.cellRenderer(row);
+    return (React.createElement(React.Fragment, null, renderCell(cellContent, row, colDef)));
+}
+
+function TableBodyRow(props) {
+    const { row, rowIndex, columnDefinitions, onRowClick, selectionProps, animationProps, } = props;
+    const { getRowProps } = useTableContext();
+    const rowProps = getRowProps(row);
+    const isClickable = onRowClick || selectionProps;
+    const pluginOnClick = rowProps.onClick;
+    return (React.createElement("tr", { className: `${isClickable ? styles$2.clickableRow : ''} ${(animationProps === null || animationProps === void 0 ? void 0 : animationProps.animateOnLoad) ? styles$2.animatedRow : ''} ${rowProps.className || ''}`.trim(), style: { animationDelay: `${rowIndex * 0.05}s` }, "aria-selected": rowProps['aria-selected'], onClick: (e) => {
+            if (pluginOnClick) {
+                pluginOnClick(e);
+            }
+            if (onRowClick) {
+                onRowClick(row);
+            }
+        } }, columnDefinitions.map((columnDefinition, colIndex) => (React.createElement("td", { key: colIndex },
+        React.createElement(TableBodyCell, { row: row, rowIndex: rowIndex, columnDefinition: columnDefinition }))))));
+}
+
+const TableSentinel = ({ onIntersect, isLoading }) => {
+    const sentinelRef = useRef(null);
+    useEffect(() => {
+        if (isLoading)
+            return;
+        const observer = new IntersectionObserver((entries) => {
+            if (entries[0].isIntersecting) {
+                onIntersect();
+            }
+        }, {
+            root: null, // use the viewport
+            rootMargin: '200px', // start loading 200px before reaching the end
+            threshold: 0.1,
+        });
+        const currentSentinel = sentinelRef.current;
+        if (currentSentinel) {
+            observer.observe(currentSentinel);
+        }
+        return () => {
+            if (currentSentinel) {
+                observer.unobserve(currentSentinel);
+            }
+        };
+    }, [onIntersect, isLoading]);
+    return React.createElement("div", { ref: sentinelRef, style: { height: '1px' }, "aria-hidden": "true" });
+};
+
+function DesktopView(props) {
+    const { maxHeight, isHeaderSticky, tableContainerRef, headerRef, footerRows, renderPluginFooters, onScroll, } = props;
+    const { visibleColumns, originalColumnDefinitions, currentData, getRawColumnDefinition, onRowClick, selectionProps, animationProps, pagination, } = useTableContext();
+    const getEffectiveColSpan = useCallback((footerCol, startIndex) => {
+        const originalSpan = footerCol.colSpan || 1;
+        const endIndex = startIndex + originalSpan;
+        let visibleCount = 0;
+        for (let i = startIndex; i < endIndex; i++) {
+            const col = originalColumnDefinitions[i];
+            if (col && getRawColumnDefinition(col).visible !== false) {
+                visibleCount++;
+            }
+        }
+        return visibleCount;
+    }, [originalColumnDefinitions, getRawColumnDefinition]);
+    const tableFooter = useMemo(() => {
+        if (!footerRows || footerRows.length === 0) {
+            return null;
+        }
+        return (React.createElement("tfoot", null, footerRows.map((row, rowIndex) => {
+            let currentOriginalIndex = 0;
+            return (React.createElement("tr", { key: rowIndex }, row.columns.map((col, colIndex) => {
+                const effectiveColSpan = getEffectiveColSpan(col, currentOriginalIndex);
+                currentOriginalIndex += (col.colSpan || 1);
+                if (effectiveColSpan === 0)
+                    return null;
+                return (React.createElement("td", { key: colIndex, colSpan: effectiveColSpan, className: `${styles$2.footerCell} ${col.className || ''} ${col.onCellClick ? styles$2.clickableFooterCell : ''}`, onClick: col.onCellClick }, col.cellRenderer()));
+            })));
+        })));
+    }, [footerRows, getEffectiveColSpan]);
+    const useFixedHeaders = !!maxHeight;
+    const fixedHeadersStyle = useFixedHeaders
+        ? { maxHeight, overflowY: 'auto' }
+        : {};
+    const headerClassName = useFixedHeaders
+        ? styles$2.internalStickyHeader
+        : (isHeaderSticky ? styles$2.stickyHeader : '');
+    return (React.createElement("div", { className: styles$2.tableContainer, style: fixedHeadersStyle, ref: tableContainerRef, onScroll: onScroll },
+        React.createElement("table", { className: styles$2['responsiveTable'] },
+            React.createElement("thead", { ref: headerRef, className: headerClassName },
+                React.createElement("tr", null, visibleColumns.map((columnDefinition, colIndex) => (React.createElement(TableHeaderCell, { key: colIndex, columnDefinition: columnDefinition, colIndex: colIndex }))))),
+            React.createElement("tbody", null, currentData.map((row, rowIndex) => (React.createElement(TableBodyRow, { key: rowIndex, row: row, rowIndex: rowIndex, columnDefinitions: visibleColumns, onRowClick: onRowClick, selectionProps: selectionProps, animationProps: animationProps })))),
+            tableFooter),
+        (pagination === null || pagination === void 0 ? void 0 : pagination.hasMore) && (React.createElement(TableSentinel, { onIntersect: () => pagination.loadNextPage(), isLoading: pagination.isFetchingMore })),
+        (pagination === null || pagination === void 0 ? void 0 : pagination.isFetchingMore) && (React.createElement("div", { className: styles$2.infoContainer },
+            React.createElement("div", { className: styles$2.spinner }),
+            React.createElement("span", null, "Loading more items..."))),
+        renderPluginFooters()));
+}
+
+function MobileView(props) {
+    const { mobileFooter } = props;
+    const { currentData, visibleColumns, onRowClick, selectionProps, animationProps, getRowProps, getRowId, getColumnDefinition, onHeaderClickCallback, getClickableHeaderClassName, pagination, } = useTableContext();
+    const isClickable = onRowClick || selectionProps;
+    return (React.createElement("div", { className: styles$2.cardContainer },
+        currentData.map((row, rowIndex) => {
+            const rowProps = getRowProps(row);
+            const pluginOnClick = rowProps.onClick;
+            return (React.createElement("div", { key: getRowId(row, rowIndex), className: `${styles$2.card} ${isClickable ? styles$2.clickableRow : ''} ${(animationProps === null || animationProps === void 0 ? void 0 : animationProps.animateOnLoad) ? styles$2.animatedRow : ''} ${rowProps.className || ''}`.trim(), style: { animationDelay: `${rowIndex * 0.05}s` }, "aria-selected": rowProps['aria-selected'], onClick: (e) => {
+                    if (pluginOnClick)
+                        pluginOnClick(e);
+                    if (onRowClick)
+                        onRowClick(row);
+                } },
+                React.createElement("div", { className: styles$2['card-body'] }, visibleColumns.map((columnDefinition, colIndex) => {
+                    const colDef = getColumnDefinition(columnDefinition, rowIndex);
+                    const onHeaderClick = onHeaderClickCallback(columnDefinition);
+                    const clickableHeaderClassName = getClickableHeaderClassName(onHeaderClick, columnDefinition);
+                    return (React.createElement("div", { key: colIndex, className: styles$2['card-row'] },
+                        React.createElement("p", { className: styles$2['card-row-content'] },
+                            React.createElement("span", { className: `${styles$2['card-label']} ${clickableHeaderClassName}`, onClick: (e) => {
+                                    if (onHeaderClick) {
+                                        e.stopPropagation();
+                                        onHeaderClick(colDef.interactivity.id);
+                                    }
+                                } }, colDef.displayLabel),
+                            React.createElement("span", { className: styles$2['card-value'] },
+                                React.createElement(TableBodyCell, { row: row, rowIndex: rowIndex, columnDefinition: columnDefinition })))));
+                }))));
+        }),
+        (pagination === null || pagination === void 0 ? void 0 : pagination.hasMore) && (React.createElement(TableSentinel, { onIntersect: () => pagination.loadNextPage(), isLoading: pagination.isFetchingMore })),
+        (pagination === null || pagination === void 0 ? void 0 : pagination.isFetchingMore) && (React.createElement("div", { className: styles$2.infoContainer },
+            React.createElement("div", { className: styles$2.spinner }),
+            React.createElement("span", null, "Loading more items..."))),
+        mobileFooter));
+}
+
+function SkeletonView(props) {
+    const { isMobile, columnDefinitions } = props;
+    const skeletonRowCount = 5;
+    const columnCount = columnDefinitions.length;
+    if (isMobile) {
+        return (React.createElement("div", null, [...Array(skeletonRowCount)].map((_, i) => (React.createElement("div", { key: i, className: styles$2.skeletonCard }, [...Array(columnCount)].map((_, j) => (React.createElement("div", { key: j, className: `${styles$2.skeleton} ${styles$2.skeletonText}`, style: { marginBottom: '0.5rem' } }))))))));
+    }
+    return (React.createElement("table", { className: styles$2.responsiveTable },
+        React.createElement("thead", null,
+            React.createElement("tr", null, [...Array(columnCount)].map((_, i) => (React.createElement("th", { key: i },
+                React.createElement("div", { className: `${styles$2.skeleton} ${styles$2.skeletonText}` })))))),
+        React.createElement("tbody", null, [...Array(skeletonRowCount)].map((_, i) => (React.createElement("tr", { key: i }, [...Array(columnCount)].map((_, j) => (React.createElement("td", { key: j },
+            React.createElement("div", { className: `${styles$2.skeleton} ${styles$2.skeletonText}` }))))))))));
+}
+
+var styles$1 = {"spinner":"LoadingSpinner-module_spinner__F9V3x"};
+
+var styles = {"infoContainer":"NoMoreDataMessage-module_infoContainer__dk1r5","noMoreData":"NoMoreDataMessage-module_noMoreData__ATuIg"};
+
+const LoadingSpinner = () => {
+    return (React.createElement("div", { className: styles.infoContainer },
+        React.createElement("div", { className: styles$1.spinner }),
+        React.createElement("span", null, "Loading more items...")));
+};
+
+const NoMoreDataMessage = () => {
+    return (React.createElement("div", { className: `${styles.infoContainer} ${styles.noMoreData}` },
+        React.createElement("p", null, "You've reached the end!")));
+};
+
+function debounce(func, delay) {
+    let timeout;
+    return function (...args) {
+        clearTimeout(timeout);
+        timeout = setTimeout(() => {
+            func.apply(this, args);
+        }, delay);
+    };
+}
+const useResponsiveTable = (props) => {
+    const { mobileBreakpoint = 600, enablePageLevelStickyHeader = true, maxHeight, headerRef, scrollableRef } = props;
+    const [isMobile, setIsMobile] = useState(false);
+    const [isHeaderSticky, setIsHeaderSticky] = useState(false);
+    const handleResize = useCallback(() => {
+        setIsMobile(window.innerWidth <= mobileBreakpoint);
+    }, [mobileBreakpoint]);
+    const handleScroll = useCallback((currentTarget) => {
+        // Page-level sticky header logic
+        if (enablePageLevelStickyHeader && !maxHeight && (headerRef === null || headerRef === void 0 ? void 0 : headerRef.current)) {
+            const { top } = headerRef.current.getBoundingClientRect();
+            const sticky = top <= 0;
+            if (sticky !== isHeaderSticky) {
+                setIsHeaderSticky(sticky);
+            }
+        }
+    }, [enablePageLevelStickyHeader, maxHeight, headerRef, isHeaderSticky]);
+    const debouncedScrollHandler = useRef(debounce(handleScroll, 200)).current;
+    useEffect(() => {
+        handleResize(); // Initial check
+        window.addEventListener('resize', handleResize);
+        const scrollTarget = (scrollableRef === null || scrollableRef === void 0 ? void 0 : scrollableRef.current) || window;
+        if (enablePageLevelStickyHeader || maxHeight) { // Only add scroll listener if sticky header or internal scroll is enabled
+            scrollTarget.addEventListener('scroll', (e) => debouncedScrollHandler(e.currentTarget));
+        }
+        return () => {
+            window.removeEventListener('resize', handleResize);
+            if (enablePageLevelStickyHeader || maxHeight) {
+                scrollTarget.removeEventListener('scroll', (e) => debouncedScrollHandler(e.currentTarget));
+            }
+        };
+    }, [handleResize, debouncedScrollHandler, enablePageLevelStickyHeader, maxHeight, scrollableRef]);
+    return { isMobile, isHeaderSticky, debouncedScrollHandler: debouncedScrollHandler };
+};
+
+class FilterPlugin {
+    constructor() {
+        this.id = 'filter';
+        this.filterText = '';
+        this.debounceTimeout = null;
+        this.onPluginInit = (api) => {
+            this.api = api;
+        };
+        this.renderHeader = () => {
+            var _a;
+            if (!((_a = this.api.filterProps) === null || _a === void 0 ? void 0 : _a.showFilter)) {
+                return null;
+            }
+            return (React.createElement("div", { style: { marginBottom: '1rem' } },
+                React.createElement("input", { type: "text", placeholder: this.api.filterProps.filterPlaceholder || "Search...", onChange: this.handleFilterChange, className: this.api.filterProps.className, style: {
+                        padding: '0.5rem',
+                        border: '1px solid #ccc',
+                        borderRadius: '4px',
+                    } })));
+        };
+        this.processData = (data) => {
+            if (!this.filterText || !this.api.columnDefinitions) {
+                return data;
+            }
+            const lowercasedFilter = this.filterText.toLowerCase();
+            return data.filter((row) => {
+                return this.api.columnDefinitions.some((colDef) => {
+                    // If colDef is a function, it won't have getFilterableValue, so skip it.
+                    if (typeof colDef === 'function') {
+                        return false;
+                    }
+                    // Now we know colDef is an object (IResponsiveTableColumnDefinition<TData>)
+                    const typedColDef = colDef;
+                    // Use a type guard to check if getFilterableValue exists on this branch of the union
+                    if ('getFilterableValue' in typedColDef && typedColDef.getFilterableValue) {
+                        const value = typedColDef.getFilterableValue(row);
+                        return value === null || value === void 0 ? void 0 : value.toString().toLowerCase().includes(lowercasedFilter);
+                    }
+                    return false; // If getFilterableValue is not present or not a function
+                });
+            });
+        };
+        this.renderCell = (content, 
+        // eslint-disable-next-line @typescript-eslint/no-unused-vars
+        _row, 
+        // eslint-disable-next-line @typescript-eslint/no-unused-vars
+        _column) => {
+            if (!this.filterText || typeof content !== 'string') {
+                return content;
+            }
+            const parts = content.split(new RegExp(`(${this.filterText})`, 'gi'));
+            return (React.createElement("span", null, parts.map((part, i) => part.toLowerCase() === this.filterText.toLowerCase() ? (React.createElement("strong", { key: i }, part)) : (part))));
+        };
+        this.handleFilterChange = (e) => {
+            const currentFilterText = e.target.value;
+            if (this.debounceTimeout) {
+                clearTimeout(this.debounceTimeout);
+            }
+            this.debounceTimeout = setTimeout(() => {
+                this.filterText = currentFilterText;
+                this.api.forceUpdate();
+            }, 300);
+        };
+    }
+}
+
+class SelectionPlugin {
+    constructor() {
+        this.id = 'selection';
+        // Internal state for uncontrolled mode
+        this.internalSelectedIds = new Set();
+        this.onPluginInit = (api) => {
+            var _a;
+            this.api = api;
+            // For uncontrolled mode, initialize with selectedItems if provided on first render
+            if (((_a = this.api.selectionProps) === null || _a === void 0 ? void 0 : _a.selectedItems) && this.internalSelectedIds.size === 0) {
+                const { selectedItems, rowIdKey } = this.api.selectionProps;
+                if (selectedItems && rowIdKey) {
+                    const initialIds = selectedItems.map(item => item[rowIdKey]);
+                    this.internalSelectedIds = new Set(initialIds);
+                }
+            }
+        };
+        this.getRowId = (row) => {
+            const { rowIdKey } = this.api.selectionProps;
+            return row[rowIdKey];
+        };
+        this.isControlled = () => {
+            var _a;
+            return ((_a = this.api.selectionProps) === null || _a === void 0 ? void 0 : _a.selectedItems) !== undefined;
+        };
+        this.getSelectedIds = () => {
+            if (this.isControlled()) {
+                const { selectedItems, rowIdKey } = this.api.selectionProps;
+                return new Set((selectedItems === null || selectedItems === void 0 ? void 0 : selectedItems.map(item => item[rowIdKey])) || []);
+            }
+            return this.internalSelectedIds;
+        };
+        this.handleRowClick = (row) => {
+            const { onSelectionChange, mode = 'multiple', rowIdKey } = this.api.selectionProps;
+            const currentSelectedIds = this.getSelectedIds();
+            const newSelectedIds = new Set(currentSelectedIds);
+            const rowId = this.getRowId(row);
+            if (mode === 'single') {
+                if (newSelectedIds.has(rowId)) {
+                    newSelectedIds.clear();
+                }
+                else {
+                    newSelectedIds.clear();
+                    newSelectedIds.add(rowId);
+                }
+            }
+            else { // multiple
+                if (newSelectedIds.has(rowId)) {
+                    newSelectedIds.delete(rowId);
+                }
+                else {
+                    newSelectedIds.add(rowId);
+                }
+            }
+            if (!this.isControlled()) {
+                this.internalSelectedIds = newSelectedIds;
+            }
+            const allData = this.api.getData();
+            const selectedItems = allData.filter(item => newSelectedIds.has(item[rowIdKey]));
+            onSelectionChange(selectedItems);
+            // In uncontrolled mode, we need to force a re-render to show the selection change
+            if (!this.isControlled()) {
+                this.api.forceUpdate();
+            }
+        };
+        this.getRowProps = (row) => {
+            const { selectedRowClassName } = this.api.selectionProps || {};
+            const selectedIds = this.getSelectedIds();
+            const rowId = this.getRowId(row);
+            const isSelected = selectedIds.has(rowId);
+            const combinedClassName = [
+                isSelected ? styles$2.selectedRow : '',
+                isSelected ? selectedRowClassName : ''
+            ].filter(Boolean).join(' ');
+            return {
+                className: combinedClassName,
+                onClick: () => this.handleRowClick(row),
+                'aria-selected': isSelected,
+            };
+        };
+    }
+}
+
+// Type-safe sort comparer helpers
+const createSortComparers = () => ({
+    numeric: (key) => (a, b, direction) => {
+        const numA = parseFloat(String(a[key]));
+        const numB = parseFloat(String(b[key]));
+        const aIsNaN = isNaN(numA);
+        const bIsNaN = isNaN(numB);
+        if (aIsNaN && bIsNaN)
+            return 0;
+        if (aIsNaN)
+            return 1; // Put non-numbers at the end
+        if (bIsNaN)
+            return -1;
+        return direction === 'asc' ? numA - numB : numB - numA;
+    },
+    caseInsensitiveString: (key) => (a, b, direction) => {
+        var _a, _b;
+        const valA = String((_a = a[key]) !== null && _a !== void 0 ? _a : '').toLowerCase();
+        const valB = String((_b = b[key]) !== null && _b !== void 0 ? _b : '').toLowerCase();
+        if (valA < valB)
+            return direction === 'asc' ? -1 : 1;
+        if (valA > valB)
+            return direction === 'asc' ? 1 : -1;
+        return 0;
+    },
+    date: (key) => (a, b, direction) => {
+        const dateA = new Date(String(a[key])).getTime();
+        const dateB = new Date(String(b[key])).getTime();
+        const aIsNaN = isNaN(dateA);
+        const bIsNaN = isNaN(dateB);
+        if (aIsNaN && bIsNaN)
+            return 0;
+        if (aIsNaN)
+            return 1; // Put invalid dates at the end
+        if (bIsNaN)
+            return -1;
+        return direction === 'asc' ? dateA - dateB : dateB - dateA;
+    },
+});
+class SortPlugin {
+    constructor(options) {
+        var _a, _b;
+        this.id = 'sort';
+        this.comparers = createSortComparers();
+        this.onPluginInit = (api) => {
+            this.api = api;
+        };
+        this.processData = (data) => {
+            if (!this.sortColumn || !this.sortDirection) {
+                return data;
+            }
+            const columnDef = this.api.columnDefinitions.find((col) => (typeof col === 'object' && col.columnId === this.sortColumn));
+            if (!columnDef) {
+                return data;
+            }
+            const sortedData = [...data].sort((a, b) => {
+                if ('sortComparer' in columnDef && columnDef.sortComparer) {
+                    if (columnDef.sortComparer.length < 3) {
+                        console.warn(`The custom sortComparer for column '${this.sortColumn}' should accept all three parameters (a, b, direction) to ensure correct sorting behavior. You provided a function with ${columnDef.sortComparer.length} parameters.`);
+                    }
+                    return columnDef.sortComparer(a, b, this.sortDirection);
+                }
+                if ('getSortableValue' in columnDef && columnDef.getSortableValue) {
+                    const aValue = columnDef.getSortableValue(a);
+                    const bValue = columnDef.getSortableValue(b);
+                    if (aValue < bValue)
+                        return this.sortDirection === 'asc' ? -1 : 1;
+                    if (aValue > bValue)
+                        return this.sortDirection === 'asc' ? 1 : -1;
+                    return 0;
+                }
+                // Fallback to dataKey if it exists and no other sorter is provided
+                if ('dataKey' in columnDef && columnDef.dataKey) {
+                    const key = columnDef.dataKey;
+                    const aValue = a[key];
+                    const bValue = b[key];
+                    if (aValue < bValue)
+                        return this.sortDirection === 'asc' ? -1 : 1;
+                    if (aValue > bValue)
+                        return this.sortDirection === 'asc' ? 1 : -1;
+                    return 0;
+                }
+                return 0;
+            });
+            return sortedData;
+        };
+        this.getHeaderProps = (columnDef) => {
+            const { columnId } = columnDef;
+            const isSortable = ('sortComparer' in columnDef && !!columnDef.sortComparer) || ('getSortableValue' in columnDef && !!columnDef.getSortableValue);
+            // A column must have a columnId and a sort function to be sortable
+            if (!isSortable || !columnId) {
+                return {};
+            }
+            const onHeaderClick = (e) => {
+                const target = e.target;
+                console.log('SortPlugin: Header clicked. Target:', target);
+                // If the click is on an interactive element, don't sort
+                if (target.closest('input, button, a, [onclick]')) {
+                    console.log('SortPlugin: Interactive element clicked, ignoring sort.');
+                    return;
+                }
+                console.log('SortPlugin: Non-interactive element clicked, proceeding with sort.');
+                if (this.sortColumn === columnId) {
+                    if (this.sortDirection === 'desc') {
+                        this.sortColumn = null;
+                        this.sortDirection = null;
+                    }
+                    else {
+                        this.sortDirection = 'desc';
+                    }
+                }
+                else {
+                    this.sortColumn = columnId;
+                    this.sortDirection = 'asc';
+                }
+                this.api.forceUpdate();
+            };
+            let sortClassName = 'sortable';
+            if (this.sortColumn === columnId) {
+                sortClassName = `sorted-${this.sortDirection}`;
+            }
+            return {
+                onClick: onHeaderClick,
+                className: sortClassName,
+                'aria-sort': (this.sortColumn === columnId ? (this.sortDirection === 'asc' ? 'ascending' : 'descending') : 'none'),
+            };
+        };
+        this.sortColumn = (_a = options === null || options === void 0 ? void 0 : options.initialSortColumn) !== null && _a !== void 0 ? _a : null;
+        this.sortDirection = (_b = options === null || options === void 0 ? void 0 : options.initialSortDirection) !== null && _b !== void 0 ? _b : null;
+    }
+}
+
+const useTablePlugins = (props) => {
+    const { data, plugins, filterProps, selectionProps, sortProps, columnDefinitions, getScrollableElement, infiniteScrollProps, } = props;
+    const [processedData, setProcessedData] = useState(data);
+    const [activePlugins, setActivePlugins] = useState([]);
+    // Persist internal plugins using refs to prevent state loss
+    const filterPluginRef = useRef(null);
+    const selectionPluginRef = useRef(null);
+    const sortPluginRef = useRef(null);
+    const getRawColumnDefinition = useCallback((columnDefinition) => {
+        if (typeof columnDefinition === 'function') {
+            return columnDefinition(data[0] || {}, 0);
+        }
+        return columnDefinition;
+    }, [data]);
+    const visibleColumns = useMemo(() => {
+        return columnDefinitions.filter(col => {
+            const raw = getRawColumnDefinition(col);
+            return raw.visible !== false;
+        });
+    }, [columnDefinitions, getRawColumnDefinition]);
+    const initializePlugins = useCallback(() => {
+        const newActivePlugins = [];
+        // 1. Add external plugins
+        if (plugins) {
+            newActivePlugins.push(...plugins);
+        }
+        // 2. Manage internal FilterPlugin
+        if (filterProps === null || filterProps === void 0 ? void 0 : filterProps.showFilter) {
+            if (!filterPluginRef.current) {
+                filterPluginRef.current = new FilterPlugin();
+            }
+            if (!newActivePlugins.some(p => p.id === 'filter')) {
+                newActivePlugins.push(filterPluginRef.current);
+            }
+        }
+        else {
+            filterPluginRef.current = null;
+        }
+        // 3. Manage internal SelectionPlugin
+        if (selectionProps === null || selectionProps === void 0 ? void 0 : selectionProps.onSelectionChange) {
+            if (!selectionPluginRef.current) {
+                selectionPluginRef.current = new SelectionPlugin();
+            }
+            if (!newActivePlugins.some(p => p.id === 'selection')) {
+                newActivePlugins.push(selectionPluginRef.current);
+            }
+        }
+        else {
+            selectionPluginRef.current = null;
+        }
+        // 4. Manage internal SortPlugin
+        const isAnyColumnSortable = columnDefinitions.some(col => {
+            const rawCol = getRawColumnDefinition(col);
+            return rawCol.sortComparer || rawCol.getSortableValue;
+        });
+        if (isAnyColumnSortable) {
+            if (!sortPluginRef.current) {
+                sortPluginRef.current = new SortPlugin(sortProps);
+            }
+            if (!newActivePlugins.some(p => p.id === 'sort')) {
+                newActivePlugins.push(sortPluginRef.current);
+            }
+        }
+        else {
+            sortPluginRef.current = null;
+        }
+        setActivePlugins(newActivePlugins);
+        const api = {
+            getData: () => data,
+            forceUpdate: forceUpdatePlugins,
+            getScrollableElement: getScrollableElement,
+            infiniteScrollProps: infiniteScrollProps,
+            filterProps: filterProps,
+            selectionProps: selectionProps,
+            columnDefinitions: columnDefinitions,
+        };
+        // Initialize/Refresh all active plugins with the current API
+        newActivePlugins.forEach((plugin) => {
+            if (plugin.onPluginInit) {
+                plugin.onPluginInit(api);
+            }
+        });
+        // Run the data processing pipeline
+        let currentProcessedData = [...data];
+        newActivePlugins.forEach((plugin) => {
+            if (plugin.processData) {
+                currentProcessedData = plugin.processData(currentProcessedData);
+            }
+        });
+        return currentProcessedData;
+    }, [
+        data,
+        plugins,
+        filterProps,
+        selectionProps,
+        sortProps,
+        columnDefinitions,
+        getScrollableElement,
+        infiniteScrollProps,
+        getRawColumnDefinition,
+    ]);
+    const forceUpdatePlugins = useCallback(() => {
+        setProcessedData(initializePlugins());
+    }, [initializePlugins]);
+    // Handle re-initialization when props change
+    useEffect(() => {
+        setProcessedData(initializePlugins());
+    }, [initializePlugins]);
+    return { processedData, activePlugins, visibleColumns, forceUpdatePlugins };
+};
+
+function InfiniteTable(props) {
+    const { columnDefinitions, data, noDataComponent, maxHeight, onRowClick, footerRows, mobileBreakpoint, plugins, enablePageLevelStickyHeader, infiniteScrollProps, filterProps, selectionProps, animationProps, sortProps, } = props;
+    const tableContainerRef = useRef(null);
+    const headerRef = useRef(null);
+    const { isMobile, isHeaderSticky, debouncedScrollHandler } = useResponsiveTable({
+        mobileBreakpoint,
+        enablePageLevelStickyHeader,
+        maxHeight,
+        headerRef,
+        scrollableRef: tableContainerRef,
+    });
+    const [internalData, setInternalData] = useState(data || []);
+    const [isLoadingMore, setIsLoadingMore] = useState(false);
+    const [internalHasMore, setInternalHasMore] = useState(true);
+    const getScrollableElement = useCallback(() => tableContainerRef.current, []);
+    const { processedData, activePlugins, visibleColumns } = useTablePlugins({
+        data: internalData,
+        plugins,
+        filterProps,
+        selectionProps,
+        sortProps,
+        columnDefinitions,
+        getScrollableElement,
+        infiniteScrollProps,
+    });
+    const currentHasMore = (infiniteScrollProps === null || infiniteScrollProps === void 0 ? void 0 : infiniteScrollProps.hasMore) !== undefined
+        ? infiniteScrollProps.hasMore
+        : internalHasMore;
+    const hasData = useMemo(() => processedData.length > 0, [processedData]);
+    const noDataComponentNode = noDataComponent || React.createElement("div", { className: styles$2.noData }, "No data");
+    const defaultLoadingComponent = React.createElement(LoadingSpinner, null);
+    const defaultNoMoreDataComponent = React.createElement(NoMoreDataMessage, null);
+    const loadMoreData = useCallback(() => __awaiter(this, void 0, void 0, function* () {
+        var _a;
+        if (!infiniteScrollProps || isLoadingMore)
+            return;
+        setIsLoadingMore(true);
+        try {
+            const newItems = yield ((_a = infiniteScrollProps.onLoadMore) === null || _a === void 0 ? void 0 : _a.call(infiniteScrollProps, internalData));
+            if (infiniteScrollProps.hasMore === undefined) {
+                if (!newItems || newItems.length === 0) {
+                    setInternalHasMore(false);
+                }
+            }
+            if (newItems && newItems.length > 0) {
+                setInternalData(prevData => [...prevData, ...newItems]);
+            }
+        }
+        catch (error) {
+            console.error("Failed to load more items for infinite scroll:", error);
+        }
+        finally {
+            setIsLoadingMore(false);
+        }
+    }), [infiniteScrollProps, isLoadingMore, internalData]);
+    useEffect(() => {
+        setInternalData(data || []);
+    }, [data]);
+    useEffect(() => {
+        if (data.length === 0) {
+            loadMoreData();
+        }
+    }, [data.length, loadMoreData]);
+    const handleScrollForInfinite = useCallback((currentTarget) => {
+        if (!currentTarget)
+            return;
+        const { scrollHeight, scrollTop, clientHeight } = currentTarget;
+        if (currentHasMore && !isLoadingMore && scrollHeight - scrollTop - clientHeight < 100) {
+            loadMoreData();
+        }
+    }, [currentHasMore, isLoadingMore, loadMoreData]);
+    const mobileFooter = useMemo(() => {
+        if (!footerRows || footerRows.length === 0) {
+            return null;
+        }
+        // Helper to get raw column definition in this context
+        const getRaw = (colDef) => {
+            if (typeof colDef === 'function') {
+                return processedData.length > 0 ? colDef(processedData[0], 0) : { displayLabel: '', cellRenderer: () => '' };
+            }
+            return colDef;
+        };
+        return (React.createElement("div", { className: styles$2.footerCard },
+            React.createElement("div", { className: styles$2['footer-card-body'] }, footerRows.map((row, rowIndex) => {
+                let currentColumnIndex = 0;
+                return (React.createElement("div", { key: rowIndex }, row.columns.map((col, colIndex) => {
+                    let label = col.displayLabel;
+                    if (!label && col.colSpan === 1) {
+                        const header = columnDefinitions[currentColumnIndex];
+                        if (header) {
+                            label = getRaw(header).displayLabel;
+                        }
+                    }
+                    currentColumnIndex += col.colSpan;
+                    return (React.createElement("p", { key: colIndex, className: `${styles$2['footer-card-row']} ${col.className || ''} ${col.onCellClick ? styles$2.clickableFooterCell : ''}`, onClick: col.onCellClick },
+                        label && React.createElement("span", { className: styles$2['card-label'] }, label),
+                        React.createElement("span", { className: styles$2['card-value'] }, col.cellRenderer())));
+                })));
+            }))));
+    }, [footerRows, columnDefinitions, processedData]);
+    const renderPluginHeaders = useCallback(() => {
+        if (!activePlugins) {
+            return null;
+        }
+        return activePlugins.map((plugin) => {
+            if (plugin.renderHeader) {
+                if (plugin.id === 'sort' && !isMobile) {
+                    return null;
+                }
+                return React.createElement("div", { key: plugin.id }, plugin.renderHeader());
+            }
+            return null;
+        });
+    }, [activePlugins, isMobile]);
+    const renderPluginFooters = useCallback(() => {
+        if (!plugins) {
+            return null;
+        }
+        return plugins.map((plugin) => {
+            if (plugin.renderFooter) {
+                return React.createElement("div", { key: plugin.id + '-footer' }, plugin.renderFooter());
+            }
+            return null;
+        });
+    }, [plugins]);
+    const infiniteStatusUI = (React.createElement(React.Fragment, null,
+        isLoadingMore && ((infiniteScrollProps === null || infiniteScrollProps === void 0 ? void 0 : infiniteScrollProps.loadingMoreComponent) || defaultLoadingComponent),
+        !isLoadingMore && !currentHasMore && ((infiniteScrollProps === null || infiniteScrollProps === void 0 ? void 0 : infiniteScrollProps.noMoreDataComponent) || defaultNoMoreDataComponent)));
+    if ((animationProps === null || animationProps === void 0 ? void 0 : animationProps.isLoading) && !hasData) {
+        return React.createElement(SkeletonView, { isMobile: isMobile, columnDefinitions: visibleColumns });
+    }
+    return (React.createElement(TableProvider, { value: {
+            data: internalData,
+            processedData,
+            visibleColumns,
+            originalColumnDefinitions: columnDefinitions,
+            activePlugins,
+            onRowClick,
+            selectionProps,
+            animationProps,
+        } },
+        React.createElement("div", null,
+            React.createElement("div", { style: { display: 'flex', justifyContent: 'flex-end' } }, renderPluginHeaders()),
+            !hasData && noDataComponentNode,
+            hasData && (isMobile ? (React.createElement(MobileView, { mobileFooter: mobileFooter })) : (React.createElement(DesktopView, { maxHeight: maxHeight, isHeaderSticky: isHeaderSticky, tableContainerRef: tableContainerRef, headerRef: headerRef, footerRows: footerRows, renderPluginFooters: renderPluginFooters, onScroll: (e) => {
+                    debouncedScrollHandler(e.currentTarget); // For sticky header
+                    handleScrollForInfinite(e.currentTarget); // For infinite scroll
+                } }))),
+            hasData && infiniteStatusUI)));
+}
+
+const useTableDataSource = (props) => {
+    const { dataSource, pageSize = 20, initialData = [], sort, filter } = props;
+    const [data, setData] = useState(initialData);
+    const [currentPage, setCurrentPage] = useState(1);
+    const [hasMore, setHasMore] = useState(true);
+    const [totalCount, setTotalCount] = useState(undefined);
+    const [isLoading, setIsLoading] = useState(false);
+    const [isFetchingMore, setIsFetchingMore] = useState(false);
+    const isInitialMount = useRef(true);
+    const fetchData = useCallback((page, isAppend) => __awaiter(void 0, void 0, void 0, function* () {
+        if (!dataSource)
+            return;
+        if (isAppend) {
+            setIsFetchingMore(true);
+        }
+        else {
+            setIsLoading(true);
+        }
+        try {
+            const params = {
+                page,
+                pageSize,
+                sort,
+                filter,
+            };
+            const result = yield dataSource(params);
+            let newItems = [];
+            let newTotalCount = undefined;
+            if (Array.isArray(result)) {
+                newItems = result;
+            }
+            else {
+                newItems = result.items;
+                newTotalCount = result.totalCount;
+            }
+            setData(prev => isAppend ? [...prev, ...newItems] : newItems);
+            setTotalCount(newTotalCount);
+            setCurrentPage(page);
+            // Intelligent hasMore detection
+            if (newTotalCount !== undefined) {
+                const currentTotalLoaded = (isAppend ? data.length : 0) + newItems.length;
+                setHasMore(currentTotalLoaded < newTotalCount);
+            }
+            else {
+                // If we got fewer items than pageSize, we've reached the end
+                setHasMore(newItems.length === pageSize);
+            }
+        }
+        catch (error) {
+            console.error('Error fetching data from dataSource:', error);
+            setHasMore(false);
+        }
+        finally {
+            setIsLoading(false);
+            setIsFetchingMore(false);
+        }
+    }), [dataSource, pageSize, sort, filter, data.length]);
+    const loadNextPage = useCallback(() => __awaiter(void 0, void 0, void 0, function* () {
+        if (isLoading || isFetchingMore || !hasMore || !dataSource)
+            return;
+        yield fetchData(currentPage + 1, true);
+    }), [currentPage, hasMore, isLoading, isFetchingMore, dataSource, fetchData]);
+    const resetAndFetch = useCallback(() => __awaiter(void 0, void 0, void 0, function* () {
+        if (!dataSource)
+            return;
+        yield fetchData(1, false);
+    }), [dataSource, fetchData]);
+    // Handle changes in sort or filter (reset to page 1)
+    useEffect(() => {
+        if (isInitialMount.current) {
+            isInitialMount.current = false;
+            if (dataSource && initialData.length === 0) {
+                resetAndFetch();
+            }
+            return;
+        }
+        resetAndFetch();
+    }, [sort, filter, dataSource]); // initialData and pageSize changes don't trigger reset by default
+    return {
+        data,
+        currentPage,
+        hasMore,
+        totalCount,
+        isLoading,
+        isFetchingMore,
+        loadNextPage,
+        resetAndFetch,
+    };
+};
+
+/**
+ * A highly customizable, mobile-first responsive React table.
+ * Supports static data or async data sources with built-in infinite scroll.
+ */
+function ResponsiveTable(props) {
+    const { columnDefinitions, data: initialData, dataSource, pageSize, noDataComponent, maxHeight, onRowClick, footerRows, mobileBreakpoint, plugins, enablePageLevelStickyHeader, infiniteScrollProps, filterProps, selectionProps, animationProps, sortProps, } = props;
+    const tableContainerRef = useRef(null);
+    const headerRef = useRef(null);
+    const { isMobile, isHeaderSticky } = useResponsiveTable({
+        mobileBreakpoint,
+        enablePageLevelStickyHeader,
+        maxHeight,
+        headerRef,
+        scrollableRef: tableContainerRef,
+    });
+    const getScrollableElement = useCallback(() => tableContainerRef.current, []);
+    // Track active sort state for dataSource
+    const [activeSort /*, setActiveSort*/] = useState((sortProps === null || sortProps === void 0 ? void 0 : sortProps.initialSortColumn) ? { columnId: sortProps.initialSortColumn, direction: sortProps.initialSortDirection || 'asc' } : undefined);
+    const { data: sourceData, isLoading: isSourceLoading, isFetchingMore, hasMore, totalCount, currentPage, loadNextPage, } = useTableDataSource({
+        dataSource,
+        pageSize,
+        initialData,
+        sort: activeSort,
+        // We'll need to extract filter state if we want to support dataSource filtering
+    });
+    const currentDataToProcess = dataSource ? sourceData : initialData;
+    const { processedData, activePlugins, visibleColumns } = useTablePlugins({
+        data: currentDataToProcess,
+        plugins,
+        filterProps,
+        selectionProps,
+        sortProps,
+        columnDefinitions,
+        getScrollableElement,
+        infiniteScrollProps,
+    });
+    // Sync sort state from SortPlugin back to our local state to trigger dataSource re-fetch
+    useEffect(() => {
+        // eslint-disable-next-line @typescript-eslint/no-explicit-any
+        activePlugins.find(p => p.id === 'sort');
+    }, [activePlugins, dataSource]);
+    const hasData = useMemo(() => processedData.length > 0, [processedData]);
+    const noDataSvg = (React.createElement("svg", { xmlns: "http://www.w3.org/2000/svg", fill: "#ccc", height: "40", width: "40", viewBox: "0 0 24 24" },
+        React.createElement("path", { d: "M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.41 0-8-3.59-8-8s3.59-8 8-8 8 3.59 8 8-3.59 8-8 8zm-1-14h2v6h-2zm0 8h2v2h-2z" })));
+    const noDataComponentNode = noDataComponent || (React.createElement("div", { className: styles$2.noDataWrapper },
+        noDataSvg,
+        React.createElement("div", { className: styles$2.noData }, "No data")));
+    const mobileFooter = useMemo(() => {
+        if (!footerRows || footerRows.length === 0) {
+            return null;
+        }
+        // Helper to get raw column definition in this context
+        const getRaw = (colDef) => {
+            if (typeof colDef === 'function') {
+                return processedData.length > 0 ? colDef(processedData[0], 0) : { displayLabel: '', cellRenderer: () => '' };
+            }
+            return colDef;
+        };
+        return (React.createElement("div", { className: styles$2.footerCard },
+            React.createElement("div", { className: styles$2['footer-card-body'] }, footerRows.map((row, rowIndex) => {
+                let currentColumnIndex = 0;
+                return (React.createElement("div", { key: rowIndex }, row.columns.map((col, colIndex) => {
+                    let label = col.displayLabel;
+                    if (!label && col.colSpan === 1) {
+                        const header = columnDefinitions[currentColumnIndex];
+                        if (header) {
+                            label = getRaw(header).displayLabel;
+                        }
+                    }
+                    currentColumnIndex += col.colSpan;
+                    return (React.createElement("p", { key: colIndex, className: `${styles$2['footer-card-row']} ${col.className || ''} ${col.onCellClick ? styles$2.clickableFooterCell : ''}`, onClick: col.onCellClick },
+                        label && React.createElement("span", { className: styles$2['card-label'] }, label),
+                        React.createElement("span", { className: styles$2['card-value'] }, col.cellRenderer())));
+                })));
+            }))));
+    }, [footerRows, columnDefinitions, processedData]);
+    const renderPluginHeaders = useCallback(() => {
+        if (!activePlugins) {
+            return null;
+        }
+        return activePlugins.map((plugin) => {
+            if (plugin.renderHeader) {
+                if (plugin.id === 'sort' && !isMobile) {
+                    return null;
+                }
+                return React.createElement("div", { key: plugin.id }, plugin.renderHeader());
+            }
+            return null;
+        });
+    }, [activePlugins, isMobile]);
+    const renderPluginFooters = useCallback(() => {
+        if (!plugins) {
+            return null;
+        }
+        return plugins.map((plugin) => {
+            if (plugin.renderFooter) {
+                return React.createElement("div", { key: plugin.id + '-footer' }, plugin.renderFooter());
+            }
+            return null;
+        });
+    }, [plugins]);
+    if (infiniteScrollProps) {
+        return React.createElement(InfiniteTable, Object.assign({}, props));
+    }
+    const isLoading = (animationProps === null || animationProps === void 0 ? void 0 : animationProps.isLoading) || isSourceLoading;
+    if (isLoading && !hasData) {
+        return React.createElement(SkeletonView, { isMobile: isMobile, columnDefinitions: visibleColumns });
+    }
+    return (React.createElement(TableProvider, { value: {
+            data: currentDataToProcess,
+            processedData,
+            visibleColumns,
+            originalColumnDefinitions: columnDefinitions,
+            activePlugins,
+            onRowClick,
+            selectionProps,
+            animationProps: Object.assign(Object.assign({}, animationProps), { isLoading }),
+            dataSource,
+            pagination: dataSource ? {
+                currentPage,
+                pageSize: pageSize || 20,
+                hasMore,
+                totalCount,
+                isLoading: isSourceLoading,
+                isFetchingMore,
+                loadNextPage,
+            } : undefined,
+        } },
+        React.createElement("div", null,
+            React.createElement("div", { style: { display: 'flex', justifyContent: 'flex-end' } }, renderPluginHeaders()),
+            !hasData && !isLoading && noDataComponentNode,
+            (hasData || isLoading) && isMobile && (React.createElement(MobileView, { mobileFooter: mobileFooter })),
+            (hasData || isLoading) && !isMobile && (React.createElement(DesktopView, { maxHeight: maxHeight, isHeaderSticky: isHeaderSticky, tableContainerRef: tableContainerRef, headerRef: headerRef, footerRows: footerRows, renderPluginFooters: renderPluginFooters })))));
+}
+
+class InfiniteScrollPlugin {
+    constructor() {
+        this.id = 'infinite-scroll';
+        this.isLoadingMore = false;
+        this.onPluginInit = (api) => {
+            this.api = api;
+            this.attachScrollListener();
+        };
+        this.attachScrollListener = () => {
+            var _a, _b;
+            const scrollableElement = (_b = (_a = this.api).getScrollableElement) === null || _b === void 0 ? void 0 : _b.call(_a);
+            if (scrollableElement) {
+                scrollableElement.addEventListener('scroll', this.handleScroll);
+            }
+        };
+        this.handleScroll = () => __awaiter(this, void 0, void 0, function* () {
+            var _a, _b, _c, _d;
+            const scrollableElement = (_b = (_a = this.api).getScrollableElement) === null || _b === void 0 ? void 0 : _b.call(_a);
+            if (!scrollableElement || !this.api.infiniteScrollProps) {
+                return;
+            }
+            const { scrollTop, scrollHeight, clientHeight } = scrollableElement;
+            const scrollThreshold = 200; // Load more data when 200px from the bottom
+            if (scrollHeight - scrollTop - clientHeight < scrollThreshold &&
+                this.api.infiniteScrollProps.hasMore &&
+                !this.isLoadingMore) {
+                this.isLoadingMore = true;
+                this.api.forceUpdate(); // Trigger re-render to show loading component
+                yield ((_d = (_c = this.api.infiniteScrollProps).onLoadMore) === null || _d === void 0 ? void 0 : _d.call(_c, this.api.getData()));
+                this.isLoadingMore = false;
+                this.api.forceUpdate(); // Trigger re-render to hide loading component
+            }
+        });
+        this.processData = (data) => {
+            // This plugin doesn't modify the data directly, but rather triggers loading more.
+            // The main component's data prop should be updated by the consumer of the table.
+            return data;
+        };
+        this.renderFooter = () => {
+            if (!this.api.infiniteScrollProps) {
+                return null;
+            }
+            if (this.isLoadingMore) {
+                return this.api.infiniteScrollProps.loadingMoreComponent || React.createElement("div", null, "Loading more...");
+            }
+            else if (!this.api.infiniteScrollProps.hasMore) {
+                return this.api.infiniteScrollProps.noMoreDataComponent || React.createElement("div", null, "No more data.");
+            }
+            return null;
+        };
+    }
+}
+
+export { FilterPlugin, InfiniteScrollPlugin, SelectionPlugin, SortPlugin, ResponsiveTable as default };
+//# sourceMappingURL=index.es.js.map