jattac.libs.web.responsive-table 0.2.12 → 0.2.14

package/dist/Data/IResponsiveTableColumnDefinition.d.ts

@@ -11,7 +11,7 @@ export type IResponsiveTableColumnDefinition<TData> = {
 } & ({
     dataKey: keyof TData;
     getFilterableValue?: (data: TData) => string | number;
-    getSortableValue?: (row: TData) => any;
+    getSortableValue?: (row: TData) => string | number;
     sortComparer?: (a: TData, b: TData, direction: SortDirection) => number;
 } | {
     dataKey?: keyof TData;

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.d.ts

@@ -1,10 +1,10 @@
 import IFooterColumnDefinition from './Data/IFooterColumnDefinition';
 import IFooterRowDefinition from './Data/IFooterRowDefinition';
-import { IResponsiveTableColumnDefinition } from './Data/IResponsiveTableColumnDefinition';
+import { IResponsiveTableColumnDefinition, SortDirection } from './Data/IResponsiveTableColumnDefinition';
 import ResponsiveTable, { ColumnDefinition } from './UI/ResponsiveTable';
 import { FilterPlugin } from './Plugins/FilterPlugin';
 import { InfiniteScrollPlugin } from './Plugins/InfiniteScrollPlugin';
 import { IResponsiveTablePlugin } from './Plugins/IResponsiveTablePlugin';
 import { SortPlugin } from './Plugins/SortPlugin';
-export { IResponsiveTableColumnDefinition, ColumnDefinition, IFooterColumnDefinition, IFooterRowDefinition, FilterPlugin, InfiniteScrollPlugin, IResponsiveTablePlugin, SortPlugin };
+export { SortDirection, IResponsiveTableColumnDefinition, ColumnDefinition, IFooterColumnDefinition, IFooterRowDefinition, FilterPlugin, InfiniteScrollPlugin, IResponsiveTablePlugin, SortPlugin, };
 export default ResponsiveTable;

package/dist/index.js

@@ -75,7 +75,7 @@ function styleInject(css, ref) {
   }
 }
 
-var css_248z = "/* Using CSS variables for a more maintainable and themeable design */\n.ResponsiveTable-module_responsiveTable__4y-Od {\n  --table-border-color: #e0e0e0;\n  --table-header-bg: #f8f9fa;\n  --table-row-hover-bg: #e9ecef;\n  --table-row-stripe-bg: #f2f2f2;\n  --card-bg: #ffffff;\n  --card-border-color: #e0e0e0;\n  --card-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);\n  --text-color: #212529;\n  --text-color-muted: #6c757d;\n  --interactive-color: #0056b3;\n}\n\n/* Mobile Card View */\n.ResponsiveTable-module_card__b-U2v {\n  background-color: var(--card-bg);\n  border: 1px solid var(--card-border-color);\n  margin-bottom: 1rem;\n  border-radius: 8px;\n  overflow: hidden;\n  box-shadow: var(--card-shadow);\n  transition: box-shadow 0.2s ease-in-out;\n}\n\n.ResponsiveTable-module_card__b-U2v:hover {\n  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);\n}\n\n/* This is not used in the component, but keeping it styled in case it's added back */\n.ResponsiveTable-module_card-header__Ttk51 {\n  background-color: var(--table-header-bg);\n  padding: 0.75rem 1rem;\n  font-weight: 600; /* Bolder */\n  border-bottom: 1px solid var(--table-border-color);\n}\n\n.ResponsiveTable-module_card-body__XIy0h {\n  padding: 1rem;\n  font-size: 0.9rem;\n}\n\n.ResponsiveTable-module_card-body__XIy0h p {\n  margin: 0 0 0.75rem;\n  display: flex;\n  justify-content: space-between;\n}\n\n.ResponsiveTable-module_card-body__XIy0h p:last-child {\n  margin-bottom: 0;\n}\n\n.ResponsiveTable-module_card-label__v9L71 {\n  font-weight: 600;\n  color: var(--text-color);\n  margin-right: 0.5rem;\n}\n\n/* Desktop Table View */\n.ResponsiveTable-module_responsiveTable__4y-Od {\n  width: 100%;\n  border-collapse: collapse;\n  color: var(--text-color);\n}\n\n.ResponsiveTable-module_responsiveTable__4y-Od thead th {\n  background-color: var(--table-header-bg);\n  position: sticky;\n  top: 0;\n  z-index: 1;\n  font-weight: 600;\n  text-align: left;\n  padding: 1rem; /* Keep padding for the th itself */\n  border-bottom: 2px solid var(--table-border-color);\n}\n\n.ResponsiveTable-module_headerInnerWrapper__3VAhD {\n  display: flex; /* Use flexbox for alignment within the th */\n  align-items: center; /* Vertically center content */\n  justify-content: space-between; /* Push icon to the right */\n  width: 100%; /* Ensure it takes full width of th */\n}\n\n.ResponsiveTable-module_headerContent__ODMzS {\n  flex-grow: 1; /* Allow content to take available space */\n  overflow: hidden; /* Hide overflowing content */\n  text-overflow: ellipsis; /* Show ellipsis for truncated text */\n  white-space: nowrap; /* Prevent text from wrapping */\n  padding-right: 0.5rem; /* Subtle space between text and icon */\n}\n\n.ResponsiveTable-module_responsiveTable__4y-Od td {\n  padding: 1rem;\n  border-bottom: 1px solid var(--table-border-color);\n  text-align: left;\n}\n\n.ResponsiveTable-module_responsiveTable__4y-Od tr {\n  background-color: var(--card-bg);\n  transition: background-color 0.2s ease-in-out;\n}\n\n/* Subtle striping for better readability */\n.ResponsiveTable-module_responsiveTable__4y-Od tr:nth-child(even) {\n  background-color: var(--table-row-stripe-bg);\n}\n\n/* Modern hover effect */\n.ResponsiveTable-module_responsiveTable__4y-Od tr:hover {\n  background-color: var(--table-row-hover-bg);\n}\n\n/* Clickable Header Style */\n.ResponsiveTable-module_clickableHeader__xHQhF {\n  cursor: pointer;\n  color: var(--interactive-color);\n}\n\n.ResponsiveTable-module_clickableHeader__xHQhF:hover {\n  text-decoration: underline;\n}\n\n/* Sortable Header Styles */\n.ResponsiveTable-module_responsiveTable__4y-Od th.ResponsiveTable-module_sortable__yvA60,\n.ResponsiveTable-module_responsiveTable__4y-Od th.ResponsiveTable-module_sorted-asc__jzOIa,\n.ResponsiveTable-module_responsiveTable__4y-Od th.ResponsiveTable-module_sorted-desc__7WCFK {\n  cursor: pointer;\n  position: relative;\n  padding-right: 2.5rem; /* Space for the icon (1rem icon + 1rem margin + 0.5rem right offset) */\n  transition: transform 0.2s ease-in-out; /* Add transition for smooth scaling */\n}\n\n.ResponsiveTable-module_responsiveTable__4y-Od th.ResponsiveTable-module_sortable__yvA60:hover,\n.ResponsiveTable-module_responsiveTable__4y-Od th.ResponsiveTable-module_sorted-asc__jzOIa:hover,\n.ResponsiveTable-module_responsiveTable__4y-Od th.ResponsiveTable-module_sorted-desc__7WCFK:hover {\n  transform: scale(1.01); /* Subtle zoom effect on hover */\n}\n\n.ResponsiveTable-module_responsiveTable__4y-Od th .ResponsiveTable-module_sortIcon__A9WtD {\n  position: absolute;\n  right: 0.5rem;\n  top: 50%;\n  transform: translateY(-50%);\n  width: 1rem;\n  height: 1rem;\n  background-size: contain;\n  background-repeat: no-repeat;\n  background-position: center;\n  opacity: 0.4; /* Ghosted by default */\n  transition: opacity 0.2s ease-in-out;\n}\n\n/* Default unsorted icon (funnel) */\n.ResponsiveTable-module_responsiveTable__4y-Od th.ResponsiveTable-module_sortable__yvA60 .ResponsiveTable-module_sortIcon__A9WtD {\n  background-image: url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%236c757d'%3E%3Cpath d='M10 18h4v-2h-4v2zm-6-8v2h16V8H4zm3-6h10v2H7V2z'/%3E%3C/svg%3E\");\n}\n\n.ResponsiveTable-module_responsiveTable__4y-Od th.ResponsiveTable-module_sortable__yvA60:hover .ResponsiveTable-module_sortIcon__A9WtD {\n  opacity: 1;\n}\n\n/* Ensure cursor applies to content within sortable header */\n.ResponsiveTable-module_responsiveTable__4y-Od th.ResponsiveTable-module_sortable__yvA60 > * {\n  cursor: inherit;\n}\n\n/* Sorted Ascending Icon */\n.ResponsiveTable-module_responsiveTable__4y-Od th.ResponsiveTable-module_sorted-asc__jzOIa .ResponsiveTable-module_sortIcon__A9WtD {\n  opacity: 1; /* Always prominent when sorted */\n  background-image: url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%230056b3'%3E%3Cpath d='M7 14l5-5 5 5z'/%3E%3C/svg%3E\");\n}\n\n/* Sorted Descending Icon */\n.ResponsiveTable-module_responsiveTable__4y-Od th.ResponsiveTable-module_sorted-desc__7WCFK .ResponsiveTable-module_sortIcon__A9WtD {\n  opacity: 1; /* Always prominent when sorted */\n  background-image: url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%230056b3'%3E%3Cpath d='M7 10l5 5 5-5z'/%3E%3C/svg%3E\");\n}\n\n.ResponsiveTable-module_responsiveTable__4y-Od tfoot {\n  background-color: var(--table-header-bg);\n  border-top: 2px solid var(--table-border-color);\n  font-weight: 600;\n}\n\n.ResponsiveTable-module_footerCell__8H-uG {\n  padding: 1rem;\n  text-align: right;\n  font-weight: 600;\n}\n\n.ResponsiveTable-module_clickableFooterCell__WB9Ss {\n  cursor: pointer;\n  color: var(--interactive-color);\n}\n\n.ResponsiveTable-module_clickableFooterCell__WB9Ss:hover {\n  text-decoration: underline;\n}\n\n.ResponsiveTable-module_footerCard__-NE2M {\n  background-color: var(--table-header-bg);\n  border: 1px solid var(--card-border-color);\n  border-top: 2px solid var(--table-border-color);\n  margin-bottom: 1rem;\n  border-radius: 8px;\n  overflow: hidden;\n  box-shadow: none;\n}\n\n.ResponsiveTable-module_footer-card-body__CtBMv {\n  padding: 1rem;\n  font-size: 0.9rem;\n}\n\n.ResponsiveTable-module_footer-card-row__Vv6Ur {\n  margin: 0 0 0.75rem;\n  display: flex;\n  justify-content: space-between;\n  font-weight: 600;\n}\n\n/* No Data State */\n\n/* Staggered Entrance Animation */\n.ResponsiveTable-module_animatedRow__SFjrJ {\n  animation: ResponsiveTable-module_fadeInUp__jMCS7 0.5s ease-out forwards;\n  opacity: 0;\n}\n\n@keyframes ResponsiveTable-module_fadeInUp__jMCS7 {\n  from {\n    opacity: 0;\n    transform: translateY(20px);\n  }\n  to {\n    opacity: 1;\n    transform: translateY(0);\n  }\n}\n\n/* Skeleton Loader */\n.ResponsiveTable-module_skeleton__XxsXW {\n  background-color: #e0e0e0;\n  border-radius: 4px;\n  position: relative;\n  overflow: hidden;\n}\n\n.ResponsiveTable-module_skeleton__XxsXW::after {\n  content: '';\n  position: absolute;\n  top: 0;\n  left: -150%;\n  width: 150%;\n  height: 100%;\n  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.4), transparent);\n  animation: ResponsiveTable-module_shimmer__H8PhC 1.5s infinite;\n}\n\n.ResponsiveTable-module_skeletonText__T-Lgq {\n  height: 1.2em;\n  width: 100%;\n}\n\n.ResponsiveTable-module_skeletonCard__AYVwL {\n  background-color: var(--card-bg);\n  border: 1px solid var(--card-border-color);\n  margin-bottom: 1rem;\n  border-radius: 8px;\n  overflow: hidden;\n  padding: 1rem;\n}\n\n@keyframes ResponsiveTable-module_shimmer__H8PhC {\n  0% {\n    transform: translateX(0);\n  }\n  100% {\n    transform: translateX(100%);\n  }\n}\n.ResponsiveTable-module_noDataWrapper__Rj-k3 {\n  color: var(--text-color-muted); /* Softer color */\n  display: flex;\n  justify-content: center;\n  align-items: center;\n  height: 100%;\n  gap: 10px;\n  padding: 40px;\n  background-color: var(--table-header-bg);\n  border: 1px dashed var(--table-border-color);\n  border-radius: 8px;\n}\n\n.ResponsiveTable-module_noData__IpwNq {\n  text-align: center;\n  font-weight: 500; /* Less aggressive than bold */\n  font-size: 1rem;\n}\n\n.ResponsiveTable-module_row-exit__EVX6T {\n  opacity: 0;\n  transform: scaleY(0);\n  transition: transform 0.3s ease-out, opacity 0.3s ease-out;\n}\n\n.ResponsiveTable-module_row-enter__YKgI4 {\n  opacity: 0;\n  transform: translateY(20px);\n  transition: transform 0.5s ease-out, opacity 0.5s ease-out;\n}\n\n.ResponsiveTable-module_row-flash__a4NOm {\n  animation: ResponsiveTable-module_flash__nxeAX 0.5s ease-out;\n}\n\n@keyframes ResponsiveTable-module_flash__nxeAX {\n  0% {\n    background-color: var(--table-row-hover-bg);\n  }\n  100% {\n    background-color: transparent;\n  }\n}\n\n.ResponsiveTable-module_stickyHeader__-jjN- {\n  position: sticky;\n  top: 0;\n  z-index: 1;\n  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);\n}\n";
+var css_248z = "/* Using CSS variables for a more maintainable and themeable design */\r\n.ResponsiveTable-module_responsiveTable__4y-Od {\r\n  --table-border-color: #e0e0e0;\r\n  --table-header-bg: #f8f9fa;\r\n  --table-row-hover-bg: #e9ecef;\r\n  --table-row-stripe-bg: #f2f2f2;\r\n  --card-bg: #ffffff;\r\n  --card-border-color: #e0e0e0;\r\n  --card-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);\r\n  --text-color: #212529;\r\n  --text-color-muted: #6c757d;\r\n  --interactive-color: #0056b3;\r\n}\r\n\r\n/* Mobile Card View */\r\n.ResponsiveTable-module_card__b-U2v {\r\n  background-color: var(--card-bg);\r\n  border: 1px solid var(--card-border-color);\r\n  margin-bottom: 1rem;\r\n  border-radius: 8px;\r\n  overflow: hidden;\r\n  box-shadow: var(--card-shadow);\r\n  transition: box-shadow 0.2s ease-in-out;\r\n}\r\n\r\n.ResponsiveTable-module_card__b-U2v:hover {\r\n  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);\r\n}\r\n\r\n/* This is not used in the component, but keeping it styled in case it's added back */\r\n.ResponsiveTable-module_card-header__Ttk51 {\r\n  background-color: var(--table-header-bg);\r\n  padding: 0.75rem 1rem;\r\n  font-weight: 600; /* Bolder */\r\n  border-bottom: 1px solid var(--table-border-color);\r\n}\r\n\r\n.ResponsiveTable-module_card-body__XIy0h {\r\n  padding: 1rem;\r\n  font-size: 0.9rem;\r\n}\r\n\r\n.ResponsiveTable-module_card-body__XIy0h p {\r\n  margin: 0 0 0.75rem;\r\n  display: flex;\r\n  justify-content: space-between;\r\n}\r\n\r\n.ResponsiveTable-module_card-body__XIy0h p:last-child {\r\n  margin-bottom: 0;\r\n}\r\n\r\n.ResponsiveTable-module_card-label__v9L71 {\r\n  font-weight: 600;\r\n  color: var(--text-color);\r\n  margin-right: 0.5rem;\r\n}\r\n\r\n/* Desktop Table View */\r\n.ResponsiveTable-module_responsiveTable__4y-Od {\r\n  width: 100%;\r\n  border-collapse: collapse;\r\n  color: var(--text-color);\r\n}\r\n\r\n.ResponsiveTable-module_responsiveTable__4y-Od thead th {\r\n  background-color: var(--table-header-bg);\r\n  position: sticky;\r\n  top: 0;\r\n  z-index: 1;\r\n  font-weight: 600;\r\n  text-align: left;\r\n  padding: 1rem; /* Keep padding for the th itself */\r\n  border-bottom: 2px solid var(--table-border-color);\r\n}\r\n\r\n.ResponsiveTable-module_headerInnerWrapper__3VAhD {\r\n  display: flex; /* Use flexbox for alignment within the th */\r\n  align-items: center; /* Vertically center content */\r\n  justify-content: space-between; /* Push icon to the right */\r\n  width: 100%; /* Ensure it takes full width of th */\r\n}\r\n\r\n.ResponsiveTable-module_headerContent__ODMzS {\r\n  flex-grow: 1; /* Allow content to take available space */\r\n  overflow: hidden; /* Hide overflowing content */\r\n  text-overflow: ellipsis; /* Show ellipsis for truncated text */\r\n  white-space: nowrap; /* Prevent text from wrapping */\r\n  padding-right: 0.5rem; /* Subtle space between text and icon */\r\n}\r\n\r\n.ResponsiveTable-module_responsiveTable__4y-Od td {\r\n  padding: 1rem;\r\n  border-bottom: 1px solid var(--table-border-color);\r\n  text-align: left;\r\n}\r\n\r\n.ResponsiveTable-module_responsiveTable__4y-Od tr {\r\n  background-color: var(--card-bg);\r\n  transition: background-color 0.2s ease-in-out;\r\n}\r\n\r\n/* Subtle striping for better readability */\r\n.ResponsiveTable-module_responsiveTable__4y-Od tr:nth-child(even) {\r\n  background-color: var(--table-row-stripe-bg);\r\n}\r\n\r\n/* Modern hover effect */\r\n.ResponsiveTable-module_responsiveTable__4y-Od tr:hover {\r\n  background-color: var(--table-row-hover-bg);\r\n}\r\n\r\n/* Clickable Header Style */\r\n.ResponsiveTable-module_clickableHeader__xHQhF {\r\n  cursor: pointer;\r\n  color: var(--interactive-color);\r\n}\r\n\r\n.ResponsiveTable-module_clickableHeader__xHQhF:hover {\r\n  text-decoration: underline;\r\n}\r\n\r\n/* Sortable Header Styles */\r\n.ResponsiveTable-module_responsiveTable__4y-Od th.ResponsiveTable-module_sortable__yvA60,\r\n.ResponsiveTable-module_responsiveTable__4y-Od th.ResponsiveTable-module_sorted-asc__jzOIa,\r\n.ResponsiveTable-module_responsiveTable__4y-Od th.ResponsiveTable-module_sorted-desc__7WCFK {\r\n  cursor: pointer;\r\n  position: relative;\r\n  padding-right: 2.5rem; /* Space for the icon (1rem icon + 1rem margin + 0.5rem right offset) */\r\n  transition: transform 0.2s ease-in-out; /* Add transition for smooth scaling */\r\n}\r\n\r\n.ResponsiveTable-module_responsiveTable__4y-Od th.ResponsiveTable-module_sortable__yvA60:hover,\r\n.ResponsiveTable-module_responsiveTable__4y-Od th.ResponsiveTable-module_sorted-asc__jzOIa:hover,\r\n.ResponsiveTable-module_responsiveTable__4y-Od th.ResponsiveTable-module_sorted-desc__7WCFK:hover {\r\n  transform: scale(1.01); /* Subtle zoom effect on hover */\r\n}\r\n\r\n.ResponsiveTable-module_responsiveTable__4y-Od th .ResponsiveTable-module_sortIcon__A9WtD {\r\n  position: absolute;\r\n  right: 0.5rem;\r\n  top: 50%;\r\n  transform: translateY(-50%);\r\n  width: 1rem;\r\n  height: 1rem;\r\n  background-size: contain;\r\n  background-repeat: no-repeat;\r\n  background-position: center;\r\n  opacity: 0.4; /* Ghosted by default */\r\n  transition: opacity 0.2s ease-in-out;\r\n}\r\n\r\n/* Default unsorted icon (funnel) */\r\n.ResponsiveTable-module_responsiveTable__4y-Od th.ResponsiveTable-module_sortable__yvA60 .ResponsiveTable-module_sortIcon__A9WtD {\r\n  background-image: url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%236c757d'%3E%3Cpath d='M10 18h4v-2h-4v2zm-6-8v2h16V8H4zm3-6h10v2H7V2z'/%3E%3C/svg%3E\");\r\n}\r\n\r\n.ResponsiveTable-module_responsiveTable__4y-Od th.ResponsiveTable-module_sortable__yvA60:hover .ResponsiveTable-module_sortIcon__A9WtD {\r\n  opacity: 1;\r\n}\r\n\r\n/* Ensure cursor applies to content within sortable header */\r\n.ResponsiveTable-module_responsiveTable__4y-Od th.ResponsiveTable-module_sortable__yvA60 > * {\r\n  cursor: inherit;\r\n}\r\n\r\n/* Sorted Ascending Icon */\r\n.ResponsiveTable-module_responsiveTable__4y-Od th.ResponsiveTable-module_sorted-asc__jzOIa .ResponsiveTable-module_sortIcon__A9WtD {\r\n  opacity: 1; /* Always prominent when sorted */\r\n  background-image: url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%230056b3'%3E%3Cpath d='M7 14l5-5 5 5z'/%3E%3C/svg%3E\");\r\n}\r\n\r\n/* Sorted Descending Icon */\r\n.ResponsiveTable-module_responsiveTable__4y-Od th.ResponsiveTable-module_sorted-desc__7WCFK .ResponsiveTable-module_sortIcon__A9WtD {\r\n  opacity: 1; /* Always prominent when sorted */\r\n  background-image: url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%230056b3'%3E%3Cpath d='M7 10l5 5 5-5z'/%3E%3C/svg%3E\");\r\n}\r\n\r\n.ResponsiveTable-module_responsiveTable__4y-Od tfoot {\r\n  background-color: var(--table-header-bg);\r\n  border-top: 2px solid var(--table-border-color);\r\n  font-weight: 600;\r\n}\r\n\r\n.ResponsiveTable-module_footerCell__8H-uG {\r\n  padding: 1rem;\r\n  text-align: right;\r\n  font-weight: 600;\r\n}\r\n\r\n.ResponsiveTable-module_clickableFooterCell__WB9Ss {\r\n  cursor: pointer;\r\n  color: var(--interactive-color);\r\n}\r\n\r\n.ResponsiveTable-module_clickableFooterCell__WB9Ss:hover {\r\n  text-decoration: underline;\r\n}\r\n\r\n.ResponsiveTable-module_footerCard__-NE2M {\r\n  background-color: var(--table-header-bg);\r\n  border: 1px solid var(--card-border-color);\r\n  border-top: 2px solid var(--table-border-color);\r\n  margin-bottom: 1rem;\r\n  border-radius: 8px;\r\n  overflow: hidden;\r\n  box-shadow: none;\r\n}\r\n\r\n.ResponsiveTable-module_footer-card-body__CtBMv {\r\n  padding: 1rem;\r\n  font-size: 0.9rem;\r\n}\r\n\r\n.ResponsiveTable-module_footer-card-row__Vv6Ur {\r\n  margin: 0 0 0.75rem;\r\n  display: flex;\r\n  justify-content: space-between;\r\n  font-weight: 600;\r\n}\r\n\r\n/* No Data State */\r\n\r\n/* Staggered Entrance Animation */\r\n.ResponsiveTable-module_animatedRow__SFjrJ {\r\n  animation: ResponsiveTable-module_fadeInUp__jMCS7 0.5s ease-out forwards;\r\n  opacity: 0;\r\n}\r\n\r\n@keyframes ResponsiveTable-module_fadeInUp__jMCS7 {\r\n  from {\r\n    opacity: 0;\r\n    transform: translateY(20px);\r\n  }\r\n  to {\r\n    opacity: 1;\r\n    transform: translateY(0);\r\n  }\r\n}\r\n\r\n/* Skeleton Loader */\r\n.ResponsiveTable-module_skeleton__XxsXW {\r\n  background-color: #e0e0e0;\r\n  border-radius: 4px;\r\n  position: relative;\r\n  overflow: hidden;\r\n}\r\n\r\n.ResponsiveTable-module_skeleton__XxsXW::after {\r\n  content: '';\r\n  position: absolute;\r\n  top: 0;\r\n  left: -150%;\r\n  width: 150%;\r\n  height: 100%;\r\n  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.4), transparent);\r\n  animation: ResponsiveTable-module_shimmer__H8PhC 1.5s infinite;\r\n}\r\n\r\n.ResponsiveTable-module_skeletonText__T-Lgq {\r\n  height: 1.2em;\r\n  width: 100%;\r\n}\r\n\r\n.ResponsiveTable-module_skeletonCard__AYVwL {\r\n  background-color: var(--card-bg);\r\n  border: 1px solid var(--card-border-color);\r\n  margin-bottom: 1rem;\r\n  border-radius: 8px;\r\n  overflow: hidden;\r\n  padding: 1rem;\r\n}\r\n\r\n@keyframes ResponsiveTable-module_shimmer__H8PhC {\r\n  0% {\r\n    transform: translateX(0);\r\n  }\r\n  100% {\r\n    transform: translateX(100%);\r\n  }\r\n}\r\n.ResponsiveTable-module_noDataWrapper__Rj-k3 {\r\n  color: var(--text-color-muted); /* Softer color */\r\n  display: flex;\r\n  justify-content: center;\r\n  align-items: center;\r\n  height: 100%;\r\n  gap: 10px;\r\n  padding: 40px;\r\n  background-color: var(--table-header-bg);\r\n  border: 1px dashed var(--table-border-color);\r\n  border-radius: 8px;\r\n}\r\n\r\n.ResponsiveTable-module_noData__IpwNq {\r\n  text-align: center;\r\n  font-weight: 500; /* Less aggressive than bold */\r\n  font-size: 1rem;\r\n}\r\n\r\n.ResponsiveTable-module_row-exit__EVX6T {\r\n  opacity: 0;\r\n  transform: scaleY(0);\r\n  transition: transform 0.3s ease-out, opacity 0.3s ease-out;\r\n}\r\n\r\n.ResponsiveTable-module_row-enter__YKgI4 {\r\n  opacity: 0;\r\n  transform: translateY(20px);\r\n  transition: transform 0.5s ease-out, opacity 0.5s ease-out;\r\n}\r\n\r\n.ResponsiveTable-module_row-flash__a4NOm {\r\n  animation: ResponsiveTable-module_flash__nxeAX 0.5s ease-out;\r\n}\r\n\r\n@keyframes ResponsiveTable-module_flash__nxeAX {\r\n  0% {\r\n    background-color: var(--table-row-hover-bg);\r\n  }\r\n  100% {\r\n    background-color: transparent;\r\n  }\r\n}\r\n\r\n.ResponsiveTable-module_stickyHeader__-jjN- {\r\n  position: sticky;\r\n  top: 0;\r\n  z-index: 1;\r\n  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);\r\n}\r\n";
 var styles = {"responsiveTable":"ResponsiveTable-module_responsiveTable__4y-Od","card":"ResponsiveTable-module_card__b-U2v","card-header":"ResponsiveTable-module_card-header__Ttk51","card-body":"ResponsiveTable-module_card-body__XIy0h","card-label":"ResponsiveTable-module_card-label__v9L71","headerInnerWrapper":"ResponsiveTable-module_headerInnerWrapper__3VAhD","headerContent":"ResponsiveTable-module_headerContent__ODMzS","clickableHeader":"ResponsiveTable-module_clickableHeader__xHQhF","sortable":"ResponsiveTable-module_sortable__yvA60","sorted-asc":"ResponsiveTable-module_sorted-asc__jzOIa","sorted-desc":"ResponsiveTable-module_sorted-desc__7WCFK","sortIcon":"ResponsiveTable-module_sortIcon__A9WtD","footerCell":"ResponsiveTable-module_footerCell__8H-uG","clickableFooterCell":"ResponsiveTable-module_clickableFooterCell__WB9Ss","footerCard":"ResponsiveTable-module_footerCard__-NE2M","footer-card-body":"ResponsiveTable-module_footer-card-body__CtBMv","footer-card-row":"ResponsiveTable-module_footer-card-row__Vv6Ur","animatedRow":"ResponsiveTable-module_animatedRow__SFjrJ","fadeInUp":"ResponsiveTable-module_fadeInUp__jMCS7","skeleton":"ResponsiveTable-module_skeleton__XxsXW","shimmer":"ResponsiveTable-module_shimmer__H8PhC","skeletonText":"ResponsiveTable-module_skeletonText__T-Lgq","skeletonCard":"ResponsiveTable-module_skeletonCard__AYVwL","noDataWrapper":"ResponsiveTable-module_noDataWrapper__Rj-k3","noData":"ResponsiveTable-module_noData__IpwNq","row-exit":"ResponsiveTable-module_row-exit__EVX6T","row-enter":"ResponsiveTable-module_row-enter__YKgI4","row-flash":"ResponsiveTable-module_row-flash__a4NOm","flash":"ResponsiveTable-module_flash__nxeAX","stickyHeader":"ResponsiveTable-module_stickyHeader__-jjN-"};
 styleInject(css_248z);
 
@@ -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)) ;
     }
@@ -1139,7 +1161,7 @@ class ResponsiveTable extends React.Component {
         return clickableHeaderClassName;
     }
     getHeaderProps(columnDefinition) {
-        let headerProps = {};
+        const headerProps = {};
         if (this.props.plugins) {
             this.props.plugins.forEach((plugin) => {
                 if (plugin.getHeaderProps) {
@@ -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),
+                            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 : '' },
@@ -1252,17 +1595,18 @@ class ResponsiveTable extends React.Component {
                         // 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),
                             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("tbody", null, ((_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 }, Row)) : (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()));
     }
@@ -1293,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,