jattac.libs.web.responsive-table 0.2.13 → 0.2.15

package/dist/UI/InfiniteTable.d.ts

@@ -0,0 +1,75 @@
+import React, { Component, ReactNode } from 'react';
+import { IResponsiveTableColumnDefinition } from '../Data/IResponsiveTableColumnDefinition';
+import IFooterRowDefinition from '../Data/IFooterRowDefinition';
+import { IResponsiveTablePlugin } from '../Plugins/IResponsiveTablePlugin';
+export type ColumnDefinition<TData> = IResponsiveTableColumnDefinition<TData> | ((data: TData, rowIndex?: number) => IResponsiveTableColumnDefinition<TData>);
+interface IProps<TData> {
+    columnDefinitions: ColumnDefinition<TData>[];
+    data: TData[];
+    noDataComponent?: ReactNode;
+    maxHeight?: string;
+    onRowClick?: (item: TData) => void;
+    footerRows?: IFooterRowDefinition[];
+    mobileBreakpoint?: number;
+    plugins?: IResponsiveTablePlugin<TData>[];
+    enablePageLevelStickyHeader?: boolean;
+    infiniteScrollProps?: {
+        enableInfiniteScroll?: boolean;
+        onLoadMore?: (currentData: TData[]) => Promise<TData[] | null>;
+        hasMore?: boolean;
+        loadingMoreComponent?: ReactNode;
+        noMoreDataComponent?: ReactNode;
+    };
+    filterProps?: {
+        showFilter?: boolean;
+        filterPlaceholder?: string;
+    };
+    animationProps?: {
+        isLoading?: boolean;
+        animateOnLoad?: boolean;
+    };
+}
+interface IState<TData> {
+    isMobile: boolean;
+    processedData: TData[];
+    isLoadingMore: boolean;
+    isHeaderSticky: boolean;
+    columnWidths: number[];
+}
+declare class InfiniteTable<TData> extends Component<IProps<TData>, IState<TData>> {
+    private debouncedResize;
+    private tableContainerRef;
+    private headerRef;
+    private resizeObserver;
+    constructor(props: IProps<TData>);
+    private get mobileBreakpoint();
+    private debounce;
+    private get data();
+    private get noDataSvg();
+    private get hasData();
+    private get noDataComponent();
+    componentDidMount(): void;
+    componentWillUnmount(): void;
+    componentDidUpdate(prevProps: IProps<TData>): void;
+    private measureHeader;
+    private handleScroll;
+    private initializePlugins;
+    private processData;
+    handleResize: () => void;
+    private getColumnDefinition;
+    private getRawColumnDefinition;
+    private onHeaderClickCallback;
+    private getClickableHeaderClassName;
+    private getHeaderProps;
+    private get rowClickFunction();
+    private get rowClickStyle();
+    private get tableFooter();
+    private get mobileFooter();
+    private get skeletonView();
+    private get mobileView();
+    private get largeScreenView();
+    private renderPluginHeaders;
+    private renderPluginFooters;
+    render(): string | number | boolean | Iterable<React.ReactNode> | React.JSX.Element | null | undefined;
+}
+export default InfiniteTable;

package/dist/index.js

@@ -980,11 +980,21 @@ var FixedSizeList = /*#__PURE__*/createListComponent({
 });
 
 // Class component
-class ResponsiveTable extends React.Component {
+class InfiniteTable extends React.Component {
     constructor(props) {
         super(props);
         this.tableContainerRef = React.createRef();
         this.headerRef = React.createRef();
+        this.resizeObserver = null;
+        this.measureHeader = () => {
+            if (this.headerRef.current) {
+                const ths = Array.from(this.headerRef.current.querySelectorAll('th'));
+                const widths = ths.map((th) => th.getBoundingClientRect().width);
+                if (widths.some((w) => w > 0)) {
+                    this.setState({ columnWidths: widths });
+                }
+            }
+        };
         this.handleScroll = () => {
             if (this.headerRef.current && !this.props.maxHeight) {
                 const { top } = this.headerRef.current.getBoundingClientRect();
@@ -1004,6 +1014,7 @@ class ResponsiveTable extends React.Component {
             processedData: props.data,
             isLoadingMore: false,
             isHeaderSticky: false,
+            columnWidths: [],
         };
         this.debouncedResize = this.debounce(this.handleResize, 200);
     }
@@ -1044,18 +1055,29 @@ class ResponsiveTable extends React.Component {
             window.addEventListener('scroll', this.handleScroll);
         }
         this.initializePlugins();
+        if (this.headerRef.current) {
+            this.measureHeader();
+            this.resizeObserver = new ResizeObserver(this.measureHeader);
+            this.resizeObserver.observe(this.headerRef.current);
+        }
     }
     componentWillUnmount() {
         window.removeEventListener('resize', this.debouncedResize);
         if (this.props.enablePageLevelStickyHeader !== false) {
             window.removeEventListener('scroll', this.handleScroll);
         }
+        if (this.resizeObserver && this.headerRef.current) {
+            this.resizeObserver.unobserve(this.headerRef.current);
+        }
     }
     componentDidUpdate(prevProps) {
         var _a, _b, _c;
         if (prevProps.data !== this.props.data) {
             this.processData();
         }
+        if (prevProps.columnDefinitions.length !== this.props.columnDefinitions.length) {
+            this.measureHeader();
+        }
         // Handle infinite scroll loading
         if (((_a = this.props.infiniteScrollProps) === null || _a === void 0 ? void 0 : _a.enableInfiniteScroll) && ((_b = this.props.infiniteScrollProps) === null || _b === void 0 ? void 0 : _b.hasMore) && !this.state.isLoadingMore && ((_c = this.props.infiniteScrollProps) === null || _c === void 0 ? void 0 : _c.onLoadMore)) ;
     }
@@ -1229,19 +1251,340 @@ class ResponsiveTable extends React.Component {
             this.mobileFooter));
     }
     get largeScreenView() {
-        var _a;
         const useFixedHeaders = this.props.maxHeight ? true : false;
         const fixedHeadersStyle = useFixedHeaders
             ? { maxHeight: this.props.maxHeight, overflowY: 'auto' }
             : {};
-        const Row = ({ index, style }) => {
-            var _a;
-            const row = this.data[index];
-            if (!row)
-                return null; // Should not happen with correct item count
-            return (React.createElement("tr", { key: index, className: ((_a = this.props.animationProps) === null || _a === void 0 ? void 0 : _a.animateOnLoad) ? styles.animatedRow : '', style: Object.assign(Object.assign({}, style), { animationDelay: `${index * 0.05}s` }) }, this.props.columnDefinitions.map((columnDefinition, colIndex) => (React.createElement("td", { onClick: () => this.rowClickFunction(row), key: colIndex },
-                React.createElement("span", { style: Object.assign({}, this.rowClickStyle) }, this.getColumnDefinition(columnDefinition, index).cellRenderer(row)))))));
+        const itemData = {
+            rows: this.data,
+            columnWidths: this.state.columnWidths,
+            columnDefinitions: this.props.columnDefinitions,
+            animationProps: this.props.animationProps,
+            getColumnDefinition: this.getColumnDefinition.bind(this),
+            rowClickFunction: this.rowClickFunction,
+            rowClickStyle: this.rowClickStyle,
+        };
+        return (React.createElement("div", { style: fixedHeadersStyle, ref: this.tableContainerRef },
+            React.createElement("table", { className: styles['responsiveTable'], style: { tableLayout: 'fixed' } },
+                React.createElement("thead", { ref: this.headerRef, className: this.state.isHeaderSticky ? styles.stickyHeader : '' },
+                    React.createElement("tr", null, this.props.columnDefinitions.map((columnDefinition, colIndex) => {
+                        const onHeaderClickCallback = this.onHeaderClickCallback(columnDefinition);
+                        const clickableHeaderClassName = this.getClickableHeaderClassName(onHeaderClickCallback, columnDefinition);
+                        const headerProps = this.getHeaderProps(columnDefinition);
+                        // Combine class names: existing clickable, and plugin-provided (mapped to CSS Modules)
+                        const combinedClassName = `${clickableHeaderClassName} ${headerProps.className ? styles[headerProps.className] : ''}`.trim();
+                        // Remove className from headerProps to avoid duplication
+                        // 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, { style: { width: this.state.columnWidths[colIndex], boxSizing: 'border-box' } }),
+                            React.createElement("div", { className: styles.headerInnerWrapper },
+                                React.createElement("div", { className: styles.headerContent }, this.getColumnDefinition(columnDefinition, 0).displayLabel),
+                                React.createElement("span", { className: styles.sortIcon }))));
+                    }))),
+                React.createElement(FixedSizeList, { height: fixedHeadersStyle.maxHeight ? (typeof fixedHeadersStyle.maxHeight === 'string' ? parseFloat(fixedHeadersStyle.maxHeight) : fixedHeadersStyle.maxHeight) : 500, itemCount: this.data.length, itemSize: 50, width: '100%', itemData: itemData, outerRef: this.tableContainerRef, outerElementType: React.forwardRef((props, ref) => React.createElement("tbody", Object.assign({ ref: ref }, props))) }, ({ index, style, data }) => {
+                    const { rows, columnWidths, getColumnDefinition, rowClickFunction, rowClickStyle, columnDefinitions, animationProps, } = data;
+                    const row = rows[index];
+                    if (!row)
+                        return null;
+                    return (React.createElement("tr", { key: index, className: (animationProps === null || animationProps === void 0 ? void 0 : animationProps.animateOnLoad) ? styles.animatedRow : '', style: Object.assign(Object.assign({}, style), { animationDelay: `${index * 0.05}s` }) }, columnDefinitions.map((columnDefinition, colIndex) => (React.createElement("td", { onClick: () => rowClickFunction(row), key: colIndex, style: { width: columnWidths[colIndex], boxSizing: 'border-box' } },
+                        React.createElement("span", { style: Object.assign({}, rowClickStyle) }, getColumnDefinition(columnDefinition, index).cellRenderer(row)))))));
+                }),
+                this.tableFooter),
+            this.renderPluginFooters()));
+    }
+    renderPluginHeaders() {
+        if (!this.props.plugins) {
+            return null;
+        }
+        return this.props.plugins.map((plugin) => {
+            if (plugin.renderHeader) {
+                // For sort plugin, only render header in mobile view
+                if (plugin.id === 'sort' && !this.state.isMobile) {
+                    return null;
+                }
+                return React.createElement("div", { key: plugin.id }, plugin.renderHeader());
+            }
+            return null;
+        });
+    }
+    renderPluginFooters() {
+        if (!this.props.plugins) {
+            return null;
+        }
+        return this.props.plugins.map((plugin) => {
+            if (plugin.renderFooter) {
+                return React.createElement("div", { key: plugin.id + '-footer' }, plugin.renderFooter());
+            }
+            return null;
+        });
+    }
+    render() {
+        var _a;
+        if ((_a = this.props.animationProps) === null || _a === void 0 ? void 0 : _a.isLoading) {
+            return this.skeletonView;
+        }
+        return (React.createElement("div", null,
+            this.renderPluginHeaders(),
+            !this.hasData && this.noDataComponent,
+            this.hasData && this.state.isMobile && this.mobileView,
+            this.hasData && !this.state.isMobile && this.largeScreenView));
+    }
+}
+
+// Class component
+class ResponsiveTable extends React.Component {
+    constructor(props) {
+        super(props);
+        this.tableContainerRef = React.createRef();
+        this.headerRef = React.createRef();
+        this.handleScroll = () => {
+            if (this.headerRef.current && !this.props.maxHeight) {
+                const { top } = this.headerRef.current.getBoundingClientRect();
+                const isSticky = top <= 0;
+                if (isSticky !== this.state.isHeaderSticky) {
+                    this.setState({ isHeaderSticky: isSticky });
+                }
+            }
         };
+        this.handleResize = () => {
+            this.setState({
+                isMobile: window.innerWidth <= this.mobileBreakpoint,
+            });
+        };
+        this.state = {
+            isMobile: false,
+            processedData: props.data,
+            isLoadingMore: false,
+            isHeaderSticky: false,
+        };
+        this.debouncedResize = this.debounce(this.handleResize, 200);
+    }
+    get mobileBreakpoint() {
+        return this.props.mobileBreakpoint || 600;
+    }
+    debounce(func, delay) {
+        let timeout;
+        return () => {
+            clearTimeout(timeout);
+            timeout = setTimeout(() => func(), delay);
+        };
+    }
+    get data() {
+        if (Array.isArray(this.state.processedData) && this.state.processedData.length > 0) {
+            return this.state.processedData;
+        }
+        else {
+            return [];
+        }
+    }
+    get noDataSvg() {
+        return (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" })));
+    }
+    get hasData() {
+        return this.data.length > 0;
+    }
+    get noDataComponent() {
+        return (this.props.noDataComponent || (React.createElement("div", { className: styles.noDataWrapper },
+            this.noDataSvg,
+            React.createElement("div", { className: styles.noData }, "No data"))));
+    }
+    componentDidMount() {
+        this.handleResize(); // Initial check
+        window.addEventListener('resize', this.debouncedResize);
+        if (this.props.enablePageLevelStickyHeader !== false) {
+            window.addEventListener('scroll', this.handleScroll);
+        }
+        this.initializePlugins();
+    }
+    componentWillUnmount() {
+        window.removeEventListener('resize', this.debouncedResize);
+        if (this.props.enablePageLevelStickyHeader !== false) {
+            window.removeEventListener('scroll', this.handleScroll);
+        }
+    }
+    componentDidUpdate(prevProps) {
+        var _a, _b, _c;
+        if (prevProps.data !== this.props.data) {
+            this.processData();
+        }
+        // Handle infinite scroll loading
+        if (((_a = this.props.infiniteScrollProps) === null || _a === void 0 ? void 0 : _a.enableInfiniteScroll) && ((_b = this.props.infiniteScrollProps) === null || _b === void 0 ? void 0 : _b.hasMore) && !this.state.isLoadingMore && ((_c = this.props.infiniteScrollProps) === null || _c === void 0 ? void 0 : _c.onLoadMore)) ;
+    }
+    initializePlugins() {
+        var _a, _b;
+        const activePlugins = [];
+        // Add explicitly provided plugins first
+        if (this.props.plugins) {
+            activePlugins.push(...this.props.plugins);
+        }
+        // Automatically add FilterPlugin if filterProps are provided and not already present
+        if (((_a = this.props.filterProps) === null || _a === void 0 ? void 0 : _a.showFilter) && !activePlugins.some(p => p.id === 'filter')) {
+            activePlugins.push(new FilterPlugin());
+        }
+        // Automatically add InfiniteScrollPlugin if infiniteScrollProps are provided and not already present
+        if (((_b = this.props.infiniteScrollProps) === null || _b === void 0 ? void 0 : _b.enableInfiniteScroll) && !activePlugins.some(p => p.id === 'infinite-scroll')) {
+            activePlugins.push(new InfiniteScrollPlugin());
+        }
+        activePlugins.forEach((plugin) => {
+            if (plugin.onPluginInit) {
+                plugin.onPluginInit({
+                    getData: () => this.props.data,
+                    forceUpdate: () => this.processData(),
+                    getScrollableElement: () => this.tableContainerRef.current,
+                    infiniteScrollProps: this.props.infiniteScrollProps,
+                    filterProps: this.props.filterProps,
+                    columnDefinitions: this.props.columnDefinitions,
+                });
+            }
+        });
+        // Process data with all active plugins
+        let processedData = [...this.props.data];
+        activePlugins.forEach((plugin) => {
+            if (plugin.processData) {
+                processedData = plugin.processData(processedData);
+            }
+        });
+        this.setState({ processedData });
+    }
+    processData() {
+        let processedData = [...this.props.data];
+        if (this.props.plugins) {
+            this.props.plugins.forEach((plugin) => {
+                if (plugin.processData) {
+                    processedData = plugin.processData(processedData);
+                }
+            });
+        }
+        this.setState({ processedData });
+    }
+    getColumnDefinition(columnDefinition, rowIndex) {
+        if (!this.hasData) {
+            return { displayLabel: '', cellRenderer: () => '' };
+        }
+        return columnDefinition instanceof Function ? columnDefinition(this.data[0], rowIndex) : columnDefinition;
+    }
+    getRawColumnDefinition(columnDefinition) {
+        let rawColumnDefinition = {};
+        if (columnDefinition instanceof Function) {
+            rawColumnDefinition = columnDefinition(this.data[0], 0);
+        }
+        else {
+            rawColumnDefinition = columnDefinition;
+        }
+        return rawColumnDefinition;
+    }
+    onHeaderClickCallback(columnDefinition) {
+        const rawColumnDefinition = this.getRawColumnDefinition(columnDefinition);
+        if (rawColumnDefinition.interactivity && rawColumnDefinition.interactivity.onHeaderClick) {
+            return rawColumnDefinition.interactivity.onHeaderClick;
+        }
+        else {
+            return undefined;
+        }
+    }
+    getClickableHeaderClassName(onHeaderClickCallback, colDef) {
+        const rawColumnDefinition = this.getRawColumnDefinition(colDef);
+        const clickableHeaderClassName = onHeaderClickCallback
+            ? rawColumnDefinition.interactivity.className || styles.clickableHeader
+            : '';
+        return clickableHeaderClassName;
+    }
+    getHeaderProps(columnDefinition) {
+        const headerProps = {};
+        if (this.props.plugins) {
+            this.props.plugins.forEach((plugin) => {
+                if (plugin.getHeaderProps) {
+                    Object.assign(headerProps, plugin.getHeaderProps(this.getRawColumnDefinition(columnDefinition)));
+                }
+            });
+        }
+        return headerProps;
+    }
+    get rowClickFunction() {
+        if (this.props.onRowClick) {
+            return this.props.onRowClick;
+        }
+        else {
+            return () => { };
+        }
+    }
+    get rowClickStyle() {
+        if (this.props.onRowClick) {
+            return { cursor: 'pointer' };
+        }
+        else {
+            return {};
+        }
+    }
+    get tableFooter() {
+        if (!this.props.footerRows || this.props.footerRows.length === 0) {
+            return null;
+        }
+        return (React.createElement("tfoot", null, this.props.footerRows.map((row, rowIndex) => (React.createElement("tr", { key: rowIndex }, row.columns.map((col, colIndex) => (React.createElement("td", { key: colIndex, colSpan: col.colSpan, className: `${styles.footerCell} ${col.className || ''} ${col.onCellClick ? styles.clickableFooterCell : ''}`, onClick: col.onCellClick }, col.cellRenderer()))))))));
+    }
+    get mobileFooter() {
+        if (!this.props.footerRows || this.props.footerRows.length === 0) {
+            return null;
+        }
+        return (React.createElement("div", { className: styles.footerCard },
+            React.createElement("div", { className: styles['footer-card-body'] }, this.props.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 = this.props.columnDefinitions[currentColumnIndex];
+                        if (header) {
+                            label = this.getRawColumnDefinition(header).displayLabel;
+                        }
+                    }
+                    currentColumnIndex += col.colSpan;
+                    return (React.createElement("p", { key: colIndex, className: `${styles['footer-card-row']} ${col.className || ''} ${col.onCellClick ? styles.clickableFooterCell : ''}`, onClick: col.onCellClick },
+                        label && React.createElement("span", { className: styles['card-label'] }, label),
+                        React.createElement("span", { className: styles['card-value'] }, col.cellRenderer())));
+                })));
+            }))));
+    }
+    get skeletonView() {
+        const skeletonRowCount = 5; // Or make this configurable
+        const columnCount = this.props.columnDefinitions.length;
+        if (this.state.isMobile) {
+            return (React.createElement("div", null, [...Array(skeletonRowCount)].map((_, i) => (React.createElement("div", { key: i, className: styles.skeletonCard }, [...Array(columnCount)].map((_, j) => (React.createElement("div", { key: j, className: `${styles.skeleton} ${styles.skeletonText}`, style: { marginBottom: '0.5rem' } }))))))));
+        }
+        return (React.createElement("table", { className: styles.responsiveTable },
+            React.createElement("thead", null,
+                React.createElement("tr", null, [...Array(columnCount)].map((_, i) => (React.createElement("th", { key: i },
+                    React.createElement("div", { className: `${styles.skeleton} ${styles.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.skeleton} ${styles.skeletonText}` }))))))))));
+    }
+    get mobileView() {
+        return (React.createElement("div", null,
+            this.data.map((row, rowIndex) => {
+                var _a;
+                return (React.createElement("div", { key: rowIndex, className: `${styles['card']} ${((_a = this.props.animationProps) === null || _a === void 0 ? void 0 : _a.animateOnLoad) ? styles.animatedRow : ''}`, style: { animationDelay: `${rowIndex * 0.05}s` }, onClick: (e) => {
+                        this.rowClickFunction(row);
+                        e.stopPropagation();
+                        e.preventDefault();
+                    } },
+                    React.createElement("div", { className: styles['card-header'] }, " "),
+                    React.createElement("div", { className: styles['card-body'] }, this.props.columnDefinitions.map((columnDefinition, colIndex) => {
+                        const colDef = this.getColumnDefinition(columnDefinition, rowIndex);
+                        const onHeaderClickCallback = this.onHeaderClickCallback(colDef);
+                        const clickableHeaderClassName = this.getClickableHeaderClassName(onHeaderClickCallback, colDef);
+                        return (React.createElement("div", { key: colIndex, className: styles['card-row'] },
+                            React.createElement("p", null,
+                                React.createElement("span", { className: `${styles['card-label']} ${clickableHeaderClassName}`, onClick: onHeaderClickCallback ? () => onHeaderClickCallback(colDef.interactivity.id) : undefined }, colDef.displayLabel),
+                                React.createElement("span", { className: styles['card-value'] }, colDef.cellRenderer(row)))));
+                    }))));
+            }),
+            this.mobileFooter));
+    }
+    get largeScreenView() {
+        const useFixedHeaders = this.props.maxHeight ? true : false;
+        const fixedHeadersStyle = useFixedHeaders
+            ? { maxHeight: this.props.maxHeight, overflowY: 'auto' }
+            : {};
         return (React.createElement("div", { style: fixedHeadersStyle, ref: this.tableContainerRef },
             React.createElement("table", { className: styles['responsiveTable'] },
                 React.createElement("thead", { ref: this.headerRef, className: this.state.isHeaderSticky ? styles.stickyHeader : '' },
@@ -1259,11 +1602,11 @@ class ResponsiveTable extends React.Component {
                                 React.createElement("div", { className: styles.headerContent }, this.getColumnDefinition(columnDefinition, 0).displayLabel),
                                 React.createElement("span", { className: styles.sortIcon }))));
                     }))),
-                ((_a = this.props.infiniteScrollProps) === null || _a === void 0 ? void 0 : _a.enableInfiniteScroll) ? (React.createElement(FixedSizeList, { height: fixedHeadersStyle.maxHeight ? (typeof fixedHeadersStyle.maxHeight === 'string' ? parseFloat(fixedHeadersStyle.maxHeight) : fixedHeadersStyle.maxHeight) : 500, itemCount: this.data.length, itemSize: 50, width: '100%', outerRef: this.tableContainerRef, outerElementType: React.forwardRef((props, ref) => React.createElement("tbody", Object.assign({ ref: ref }, props))) }, Row)) : (React.createElement("tbody", null, this.data.map((row, rowIndex) => {
+                React.createElement("tbody", null, this.data.map((row, rowIndex) => {
                     var _a;
                     return (React.createElement("tr", { key: rowIndex, className: ((_a = this.props.animationProps) === null || _a === void 0 ? void 0 : _a.animateOnLoad) ? styles.animatedRow : '', style: { animationDelay: `${rowIndex * 0.05}s` } }, this.props.columnDefinitions.map((columnDefinition, colIndex) => (React.createElement("td", { onClick: () => this.rowClickFunction(row), key: colIndex },
                         React.createElement("span", { style: Object.assign({}, this.rowClickStyle) }, this.getColumnDefinition(columnDefinition, rowIndex).cellRenderer(row)))))));
-                }))),
+                })),
                 this.tableFooter),
             this.renderPluginFooters()));
     }
@@ -1294,8 +1637,11 @@ class ResponsiveTable extends React.Component {
         });
     }
     render() {
-        var _a;
-        if ((_a = this.props.animationProps) === null || _a === void 0 ? void 0 : _a.isLoading) {
+        var _a, _b;
+        if ((_a = this.props.infiniteScrollProps) === null || _a === void 0 ? void 0 : _a.enableInfiniteScroll) {
+            return React.createElement(InfiniteTable, Object.assign({}, this.props));
+        }
+        if ((_b = this.props.animationProps) === null || _b === void 0 ? void 0 : _b.isLoading) {
             return this.skeletonView;
         }
         return (React.createElement("div", null,