jattac.libs.web.responsive-table 0.3.0 → 0.3.2

package/dist/Data/IResponsiveTableColumnDefinition.d.ts

@@ -3,13 +3,17 @@ export type SortDirection = 'asc' | 'desc';
 export type IResponsiveTableColumnDefinition<TData> = {
     displayLabel: ReactNode;
     cellRenderer: (data: TData) => ReactNode;
+    /**
+     * A unique identifier for the column. Required for sorting.
+     */
+    columnId?: string;
     interactivity?: {
         id: string;
         onHeaderClick?: (id: string) => void;
         className?: string;
     };
 } & ({
-    dataKey: keyof TData;
+    dataKey?: keyof TData;
     getFilterableValue?: (data: TData) => string | number;
     getSortableValue?: (row: TData) => string | number;
     sortComparer?: (a: TData, b: TData, direction: SortDirection) => number;

package/dist/Plugins/FilterPlugin.d.ts

@@ -4,6 +4,7 @@ export declare class FilterPlugin<TData> implements IResponsiveTablePlugin<TData
     id: string;
     private filterText;
     private api;
+    private debounceTimeout;
     constructor();
     onPluginInit: (api: IPluginAPI<TData>) => void;
     renderHeader: () => React.JSX.Element | null;

package/dist/Plugins/SortPlugin.d.ts

@@ -1,7 +1,7 @@
 import { IResponsiveTablePlugin, IPluginAPI } from './IResponsiveTablePlugin';
 import { IResponsiveTableColumnDefinition, SortDirection } from '../Data/IResponsiveTableColumnDefinition';
-export interface ISortPluginOptions<TData> {
-    initialSortColumn?: keyof TData;
+export interface ISortPluginOptions {
+    initialSortColumn?: string;
     initialSortDirection?: SortDirection;
 }
 export declare class SortPlugin<TData> implements IResponsiveTablePlugin<TData> {
@@ -14,7 +14,7 @@ export declare class SortPlugin<TData> implements IResponsiveTablePlugin<TData>
         caseInsensitiveString: (key: keyof TData) => (a: TData, b: TData, direction: SortDirection) => 0 | 1 | -1;
         date: (key: keyof TData) => (a: TData, b: TData, direction: SortDirection) => number;
     };
-    constructor(options?: ISortPluginOptions<TData>);
+    constructor(options?: ISortPluginOptions);
     onPluginInit: (api: IPluginAPI<TData>) => void;
     processData: (data: TData[]) => TData[];
     getHeaderProps: (columnDef: IResponsiveTableColumnDefinition<TData>) => {

package/dist/UI/InfiniteTable.d.ts

@@ -50,13 +50,12 @@ declare class InfiniteTable<TData> extends Component<IProps<TData>, IState<TData
     private debouncedResize;
     private tableContainerRef;
     private headerRef;
-    private throttledScrollHandler;
+    private debouncedScrollHandler;
     constructor(props: IProps<TData>);
     componentDidUpdate(prevProps: IProps<TData>): void;
     componentDidMount(): void;
     componentWillUnmount(): void;
     private debounce;
-    private throttle;
     handleResize: () => void;
     private handleScroll;
     private loadMoreData;

package/dist/UI/ResponsiveTable.d.ts

@@ -59,7 +59,6 @@ declare class ResponsiveTable<TData> extends Component<IProps<TData>, IState<TDa
     componentDidUpdate(prevProps: IProps<TData>): void;
     private handleScroll;
     private initializePlugins;
-    private processData;
     handleResize: () => void;
     private getColumnDefinition;
     private getRawColumnDefinition;

package/dist/index.js

@@ -75,14 +75,15 @@ function styleInject(css, ref) {
   }
 }
 
-var css_248z$2 = "/* 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/* Spinner for Loading More */\r\n.ResponsiveTable-module_spinner__Pn-3D {\r\n  border: 4px solid rgba(0, 0, 0, 0.1);\r\n  border-left-color: var(--interactive-color); /* Use theme color */\r\n  border-radius: 50%;\r\n  width: 24px;\r\n  height: 24px;\r\n  animation: ResponsiveTable-module_spin__i3NHn 1s linear infinite;\r\n  display: inline-block;\r\n  vertical-align: middle;\r\n  margin-right: 8px;\r\n}\r\n\r\n@keyframes ResponsiveTable-module_spin__i3NHn {\r\n  0% { transform: rotate(0deg); }\r\n  100% { transform: rotate(360deg); }\r\n}\r\n\r\n/* Loading/No More Data Container */\r\n.ResponsiveTable-module_infoContainer__b9IF5 {\r\n  display: flex;\r\n  justify-content: center;\r\n  align-items: center;\r\n  padding: 20px;\r\n  color: var(--text-color-muted);\r\n  font-size: 0.9rem;\r\n  gap: 8px;\r\n  background-color: var(--table-header-bg);\r\n  border-top: 1px solid var(--table-border-color);\r\n}\r\n\r\n.ResponsiveTable-module_infoContainer__b9IF5.ResponsiveTable-module_noMoreData__he1rZ {\r\n  font-weight: 500;\r\n}";
-var styles$2 = {"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-","spinner":"ResponsiveTable-module_spinner__Pn-3D","spin":"ResponsiveTable-module_spin__i3NHn","infoContainer":"ResponsiveTable-module_infoContainer__b9IF5","noMoreData":"ResponsiveTable-module_noMoreData__he1rZ"};
+var css_248z$2 = "/* 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; <-- REMOVED to prevent conflict with transform */\r\n  /* top: 0; <-- REMOVED */\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- th {\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\r\n.ResponsiveTable-module_internalStickyHeader__idiJY th {\r\n  position: sticky;\r\n  top: 0;\r\n  z-index: 1;\r\n}\r\n/* Spinner for Loading More */\r\n.ResponsiveTable-module_spinner__Pn-3D {\r\n  border: 4px solid rgba(0, 0, 0, 0.1);\r\n  border-left-color: var(--interactive-color); /* Use theme color */\r\n  border-radius: 50%;\r\n  width: 24px;\r\n  height: 24px;\r\n  animation: ResponsiveTable-module_spin__i3NHn 1s linear infinite;\r\n  display: inline-block;\r\n  vertical-align: middle;\r\n  margin-right: 8px;\r\n}\r\n\r\n@keyframes ResponsiveTable-module_spin__i3NHn {\r\n  0% { transform: rotate(0deg); }\r\n  100% { transform: rotate(360deg); }\r\n}\r\n\r\n/* Loading/No More Data Container */\r\n.ResponsiveTable-module_infoContainer__b9IF5 {\r\n  display: flex;\r\n  justify-content: center;\r\n  align-items: center;\r\n  padding: 20px;\r\n  color: var(--text-color-muted);\r\n  font-size: 0.9rem;\r\n  gap: 8px;\r\n  background-color: var(--table-header-bg);\r\n  border-top: 1px solid var(--table-border-color);\r\n}\r\n\r\n.ResponsiveTable-module_infoContainer__b9IF5.ResponsiveTable-module_noMoreData__he1rZ {\r\n  font-weight: 500;\r\n}";
+var styles$2 = {"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-","internalStickyHeader":"ResponsiveTable-module_internalStickyHeader__idiJY","spinner":"ResponsiveTable-module_spinner__Pn-3D","spin":"ResponsiveTable-module_spin__i3NHn","infoContainer":"ResponsiveTable-module_infoContainer__b9IF5","noMoreData":"ResponsiveTable-module_noMoreData__he1rZ"};
 styleInject(css_248z$2);
 
 class FilterPlugin {
     constructor() {
         this.id = 'filter';
         this.filterText = '';
+        this.debounceTimeout = null;
         this.onPluginInit = (api) => {
             this.api = api;
         };
@@ -121,68 +122,18 @@ class FilterPlugin {
             });
         };
         this.handleFilterChange = (e) => {
-            // Debounce the filter change
-            setTimeout(() => {
-                this.filterText = e.target.value;
+            const currentFilterText = e.target.value;
+            if (this.debounceTimeout) {
+                clearTimeout(this.debounceTimeout);
+            }
+            this.debounceTimeout = setTimeout(() => {
+                this.filterText = currentFilterText;
                 this.api.forceUpdate();
             }, 300);
         };
     }
 }
 
-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, _e;
-            const scrollableElement = (_b = (_a = this.api).getScrollableElement) === null || _b === void 0 ? void 0 : _b.call(_a);
-            if (!scrollableElement || !((_c = this.api.infiniteScrollProps) === null || _c === void 0 ? void 0 : _c.enableInfiniteScroll)) {
-                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 ((_e = (_d = this.api.infiniteScrollProps).onLoadMore) === null || _e === void 0 ? void 0 : _e.call(_d, 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;
-        };
-    }
-}
-
 var css_248z$1 = "/* Spinner for Loading More */\r\n.LoadingSpinner-module_spinner__F9V3x {\r\n  border: 4px solid rgba(0, 0, 0, 0.1);\r\n  border-left-color: var(--interactive-color); /* Use theme color */\r\n  border-radius: 50%;\r\n  width: 24px;\r\n  height: 24px;\r\n  animation: LoadingSpinner-module_spin__VkBDO 1s linear infinite;\r\n  display: inline-block;\r\n  vertical-align: middle;\r\n  margin-right: 8px;\r\n}\r\n\r\n@keyframes LoadingSpinner-module_spin__VkBDO {\r\n  0% { transform: rotate(0deg); }\r\n  100% { transform: rotate(360deg); }\r\n}";
 var styles$1 = {"spinner":"LoadingSpinner-module_spinner__F9V3x"};
 styleInject(css_248z$1);
@@ -207,16 +158,6 @@ class InfiniteTable extends React.Component {
         super(props);
         this.tableContainerRef = React.createRef();
         this.headerRef = React.createRef();
-        this.throttle = (func, limit) => {
-            let inThrottle;
-            return (event) => {
-                if (!inThrottle) {
-                    func(event);
-                    inThrottle = true;
-                    setTimeout(() => (inThrottle = false), limit);
-                }
-            };
-        };
         this.handleResize = () => {
             this.setState({
                 isMobile: window.innerWidth <= (this.props.mobileBreakpoint || 600),
@@ -247,19 +188,27 @@ class InfiniteTable extends React.Component {
                 return;
             this.setState({ isLoadingMore: true }, () => __awaiter(this, void 0, void 0, function* () {
                 var _a, _b;
-                const newItems = yield ((_a = infiniteScrollProps === null || infiniteScrollProps === void 0 ? void 0 : infiniteScrollProps.onLoadMore) === null || _a === void 0 ? void 0 : _a.call(infiniteScrollProps, this.state.internalData));
-                if (((_b = this.props.infiniteScrollProps) === null || _b === void 0 ? void 0 : _b.hasMore) === undefined) {
-                    if (!newItems || newItems.length === 0) {
-                        this.setState({ internalHasMore: false });
+                try {
+                    const newItems = yield ((_a = infiniteScrollProps === null || infiniteScrollProps === void 0 ? void 0 : infiniteScrollProps.onLoadMore) === null || _a === void 0 ? void 0 : _a.call(infiniteScrollProps, this.state.internalData));
+                    if (((_b = this.props.infiniteScrollProps) === null || _b === void 0 ? void 0 : _b.hasMore) === undefined) {
+                        if (!newItems || newItems.length === 0) {
+                            this.setState({ internalHasMore: false });
+                        }
                     }
+                    if (newItems && newItems.length > 0) {
+                        const newInternalData = [...this.state.internalData, ...newItems];
+                        this.setState({ internalData: newInternalData }, () => {
+                            this.processData(); // Re-process data after new items are added
+                        });
+                    }
+                }
+                catch (error) {
+                    console.error("Failed to load more items for infinite scroll:", error);
+                    // Optionally, you could add a state to show an error message to the user
                 }
-                if (newItems && newItems.length > 0) {
-                    const newInternalData = [...this.state.internalData, ...newItems];
-                    this.setState({ internalData: newInternalData }, () => {
-                        this.processData(); // Re-process data after new items are added
-                    });
+                finally {
+                    this.setState({ isLoadingMore: false });
                 }
-                this.setState({ isLoadingMore: false });
             }));
         };
         this.processData = () => {
@@ -312,11 +261,18 @@ class InfiniteTable extends React.Component {
             activePlugins: [],
         };
         this.debouncedResize = this.debounce(this.handleResize, 200);
-        this.throttledScrollHandler = this.throttle(this.handleScroll, 200);
+        this.debouncedScrollHandler = this.debounce(this.handleScroll, 200);
     }
     componentDidUpdate(prevProps) {
+        const propsHaveChanged = prevProps.plugins !== this.props.plugins ||
+            prevProps.filterProps !== this.props.filterProps;
         if (prevProps.data !== this.props.data) {
-            this.setState({ internalData: this.props.data }, () => this.processData());
+            // If initial data prop changes, reset internal state and re-initialize plugins
+            this.setState({ internalData: this.props.data }, () => this.initializePlugins());
+        }
+        else if (propsHaveChanged) {
+            // If only plugins or filter props change, just re-initialize them
+            this.initializePlugins();
         }
     }
     componentDidMount() {
@@ -332,9 +288,11 @@ class InfiniteTable extends React.Component {
     }
     debounce(func, delay) {
         let timeout;
-        return () => {
+        return (...args) => {
             clearTimeout(timeout);
-            timeout = setTimeout(() => func(), delay);
+            timeout = setTimeout(() => {
+                func(...args);
+            }, delay);
         };
     }
     initializePlugins() {
@@ -399,7 +357,7 @@ class InfiniteTable extends React.Component {
         const { infiniteScrollProps } = this.props;
         const { isLoadingMore } = this.state;
         const hasMore = ((_a = this.props.infiniteScrollProps) === null || _a === void 0 ? void 0 : _a.hasMore) !== undefined ? this.props.infiniteScrollProps.hasMore : this.state.internalHasMore;
-        return (React.createElement("div", { ref: this.tableContainerRef, onScroll: this.throttledScrollHandler, style: { maxHeight: this.props.maxHeight, overflowY: 'auto' } },
+        return (React.createElement("div", { ref: this.tableContainerRef, onScroll: this.debouncedScrollHandler, style: { maxHeight: this.props.maxHeight, overflowY: 'auto' } },
             React.createElement("table", { className: styles$2['responsiveTable'] },
                 React.createElement("thead", { ref: this.headerRef, className: this.state.isHeaderSticky ? styles$2.stickyHeader : '' },
                     React.createElement("tr", null, this.props.columnDefinitions.map((colDef, colIndex) => {
@@ -505,12 +463,15 @@ class ResponsiveTable extends React.Component {
         }
     }
     componentDidUpdate(prevProps) {
-        if (prevProps.data !== this.props.data) {
-            this.processData();
+        // Re-initialize if data or plugin configuration changes.
+        if (prevProps.data !== this.props.data ||
+            prevProps.plugins !== this.props.plugins ||
+            prevProps.filterProps !== this.props.filterProps) {
+            this.initializePlugins();
         }
     }
     initializePlugins() {
-        var _a, _b;
+        var _a;
         const activePlugins = [];
         // Add explicitly provided plugins first
         if (this.props.plugins) {
@@ -520,15 +481,11 @@ class ResponsiveTable extends React.Component {
         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(),
+                    forceUpdate: () => this.initializePlugins(),
                     getScrollableElement: () => this.tableContainerRef.current,
                     infiniteScrollProps: this.props.infiniteScrollProps,
                     filterProps: this.props.filterProps,
@@ -545,17 +502,6 @@ class ResponsiveTable extends React.Component {
         });
         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: () => '' };
@@ -683,9 +629,12 @@ class ResponsiveTable extends React.Component {
         const fixedHeadersStyle = useFixedHeaders
             ? { maxHeight: this.props.maxHeight, overflowY: 'auto' }
             : {};
+        const headerClassName = useFixedHeaders
+            ? styles$2.internalStickyHeader
+            : (this.state.isHeaderSticky ? styles$2.stickyHeader : '');
         return (React.createElement("div", { style: fixedHeadersStyle, ref: this.tableContainerRef },
             React.createElement("table", { className: styles$2['responsiveTable'] },
-                React.createElement("thead", { ref: this.headerRef, className: this.state.isHeaderSticky ? styles$2.stickyHeader : '' },
+                React.createElement("thead", { ref: this.headerRef, className: headerClassName },
                     React.createElement("tr", null, this.props.columnDefinitions.map((columnDefinition, colIndex) => {
                         const onHeaderClickCallback = this.onHeaderClickCallback(columnDefinition);
                         const clickableHeaderClassName = this.getClickableHeaderClassName(onHeaderClickCallback, columnDefinition);
@@ -750,16 +699,78 @@ class ResponsiveTable extends React.Component {
     }
 }
 
+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, _e;
+            const scrollableElement = (_b = (_a = this.api).getScrollableElement) === null || _b === void 0 ? void 0 : _b.call(_a);
+            if (!scrollableElement || !((_c = this.api.infiniteScrollProps) === null || _c === void 0 ? void 0 : _c.enableInfiniteScroll)) {
+                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 ((_e = (_d = this.api.infiniteScrollProps).onLoadMore) === null || _e === void 0 ? void 0 : _e.call(_d, 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;
+        };
+    }
+}
+
 // Type-safe sort comparer helpers
 const createSortComparers = () => ({
     numeric: (key) => (a, b, direction) => {
-        const valA = a[key];
-        const valB = b[key];
-        return direction === 'asc' ? valA - valB : valB - valA;
+        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) => {
-        const valA = a[key].toLowerCase();
-        const valB = b[key].toLowerCase();
+        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)
@@ -767,8 +778,16 @@ const createSortComparers = () => ({
         return 0;
     },
     date: (key) => (a, b, direction) => {
-        const dateA = new Date(a[key]).getTime();
-        const dateB = new Date(b[key]).getTime();
+        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;
     },
 });
@@ -784,43 +803,47 @@ class SortPlugin {
             if (!this.sortColumn || !this.sortDirection) {
                 return data;
             }
-            const columnDef = this.api.columnDefinitions.find((col) => ('dataKey' in col && col.dataKey === this.sortColumn));
-            if (!columnDef || !('dataKey' in columnDef)) {
+            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) {
                     return columnDef.sortComparer(a, b, this.sortDirection);
                 }
-                let aValue, bValue;
                 if ('getSortableValue' in columnDef && columnDef.getSortableValue) {
-                    aValue = columnDef.getSortableValue(a);
-                    bValue = columnDef.getSortableValue(b);
+                    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;
                 }
-                else {
-                    aValue = a[this.sortColumn];
-                    bValue = b[this.sortColumn];
+                // 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;
                 }
-                if (aValue < bValue)
-                    return this.sortDirection === 'asc' ? -1 : 1;
-                if (aValue > bValue)
-                    return this.sortDirection === 'asc' ? 1 : -1;
                 return 0;
             });
             return sortedData;
         };
         this.getHeaderProps = (columnDef) => {
-            // Ensure dataKey exists for sortable columns
-            if (!('dataKey' in columnDef)) {
-                return {};
-            }
-            const { dataKey } = columnDef;
+            const { columnId } = columnDef;
             const isSortable = ('sortComparer' in columnDef && !!columnDef.sortComparer) || ('getSortableValue' in columnDef && !!columnDef.getSortableValue);
-            if (!isSortable) {
+            // A column must have a columnId and a sort function to be sortable
+            if (!isSortable || !columnId) {
                 return {};
             }
             const onHeaderClick = () => {
-                if (this.sortColumn === dataKey) {
+                if (this.sortColumn === columnId) {
                     if (this.sortDirection === 'desc') {
                         this.sortColumn = null;
                         this.sortDirection = null;
@@ -830,19 +853,19 @@ class SortPlugin {
                     }
                 }
                 else {
-                    this.sortColumn = dataKey;
+                    this.sortColumn = columnId;
                     this.sortDirection = 'asc';
                 }
                 this.api.forceUpdate();
             };
             let sortClassName = 'sortable';
-            if (this.sortColumn === dataKey) {
+            if (this.sortColumn === columnId) {
                 sortClassName = `sorted-${this.sortDirection}`;
             }
             return {
                 onClick: onHeaderClick,
                 className: sortClassName,
-                'aria-sort': (this.sortColumn === dataKey ? (this.sortDirection === 'asc' ? 'ascending' : 'descending') : 'none'),
+                '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;