jattac.libs.web.responsive-table 0.3.1 → 0.3.3

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/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,7 +75,7 @@ function styleInject(css, ref) {
   }
 }
 
-var css_248z$2 = "/* 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; <-- REMOVED to prevent conflict with transform */\n  /* top: 0; <-- REMOVED */\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- th {\n  position: sticky;\n  top: 0;\n  z-index: 1;\n  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);\n}\n\n.ResponsiveTable-module_internalStickyHeader__idiJY th {\n  position: sticky;\n  top: 0;\n  z-index: 1;\n}\n/* Spinner for Loading More */\n.ResponsiveTable-module_spinner__Pn-3D {\n  border: 4px solid rgba(0, 0, 0, 0.1);\n  border-left-color: var(--interactive-color); /* Use theme color */\n  border-radius: 50%;\n  width: 24px;\n  height: 24px;\n  animation: ResponsiveTable-module_spin__i3NHn 1s linear infinite;\n  display: inline-block;\n  vertical-align: middle;\n  margin-right: 8px;\n}\n\n@keyframes ResponsiveTable-module_spin__i3NHn {\n  0% { transform: rotate(0deg); }\n  100% { transform: rotate(360deg); }\n}\n\n/* Loading/No More Data Container */\n.ResponsiveTable-module_infoContainer__b9IF5 {\n  display: flex;\n  justify-content: center;\n  align-items: center;\n  padding: 20px;\n  color: var(--text-color-muted);\n  font-size: 0.9rem;\n  gap: 8px;\n  background-color: var(--table-header-bg);\n  border-top: 1px solid var(--table-border-color);\n}\n\n.ResponsiveTable-module_infoContainer__b9IF5.ResponsiveTable-module_noMoreData__he1rZ {\n  font-weight: 500;\n}";
+var css_248z$2 = "/* 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; <-- REMOVED to prevent conflict with transform */\n  /* top: 0; <-- REMOVED */\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  position: relative; /* Contain the absolutely positioned sort icon */\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; <-- REMOVED to fix sticky header bug */\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- th {\n  position: sticky;\n  top: 0;\n  z-index: 1;\n  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);\n}\n\n.ResponsiveTable-module_internalStickyHeader__idiJY th {\n  position: sticky;\n  top: 0;\n  z-index: 1;\n}\n/* Spinner for Loading More */\n.ResponsiveTable-module_spinner__Pn-3D {\n  border: 4px solid rgba(0, 0, 0, 0.1);\n  border-left-color: var(--interactive-color); /* Use theme color */\n  border-radius: 50%;\n  width: 24px;\n  height: 24px;\n  animation: ResponsiveTable-module_spin__i3NHn 1s linear infinite;\n  display: inline-block;\n  vertical-align: middle;\n  margin-right: 8px;\n}\n\n@keyframes ResponsiveTable-module_spin__i3NHn {\n  0% { transform: rotate(0deg); }\n  100% { transform: rotate(360deg); }\n}\n\n/* Loading/No More Data Container */\n.ResponsiveTable-module_infoContainer__b9IF5 {\n  display: flex;\n  justify-content: center;\n  align-items: center;\n  padding: 20px;\n  color: var(--text-color-muted);\n  font-size: 0.9rem;\n  gap: 8px;\n  background-color: var(--table-header-bg);\n  border-top: 1px solid var(--table-border-color);\n}\n\n.ResponsiveTable-module_infoContainer__b9IF5.ResponsiveTable-module_noMoreData__he1rZ {\n  font-weight: 500;\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);
 
@@ -83,6 +83,7 @@ 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),
@@ -320,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() {
@@ -340,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() {
@@ -407,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) => {
@@ -513,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) {
@@ -528,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,
@@ -553,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: () => '' };
@@ -761,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)
@@ -778,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;
     },
 });