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

package/dist/index.js

@@ -75,10 +75,189 @@ 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  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}\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/* Add a transition for the card view as well */\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, background-color 0.2s ease-in-out;\n  border-left: 5px solid transparent; /* Add transparent border for smooth transition */\n}\n\n/* Style for selected rows */\n.ResponsiveTable-module_selectedRow__-JyNW {\n  /* Use a variable for the selection color to allow theming */\n  --table-row-selected-bg: #ddeaff;\n  background-color: var(--table-row-selected-bg) !important; /* Use important to override hover and stripe styles */\n}\n\n/* In mobile view, we use the border for selection indication */\n.ResponsiveTable-module_card__b-U2v.ResponsiveTable-module_selectedRow__-JyNW {\n  border-left: 5px solid var(--interactive-color);\n  background-color: var(--table-row-selected-bg);\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\n/* Modern hover effect */\n.ResponsiveTable-module_responsiveTable__4y-Od tr:hover {\n  background-color: var(--table-row-hover-bg);\n}\n\n/* Clickable Row Style */\n.ResponsiveTable-module_clickableRow__0kjWm {\n  cursor: pointer;\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  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  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  margin-left: 0.5rem; /* Add a small gap between text and icon */\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 */\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  position: relative; /* Contain the absolutely positioned sort icon */\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}\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/* Add a transition for the card view as well */\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, background-color 0.2s ease-in-out;\r\n  border-left: 5px solid transparent; /* Add transparent border for smooth transition */\r\n}\r\n\r\n/* Style for selected rows */\r\n.ResponsiveTable-module_selectedRow__-JyNW {\r\n  /* Use a variable for the selection color to allow theming */\r\n  --table-row-selected-bg: #ddeaff;\r\n  background-color: var(--table-row-selected-bg) !important; /* Use important to override hover and stripe styles */\r\n}\r\n\r\n/* In mobile view, we use the border for selection indication */\r\n.ResponsiveTable-module_card__b-U2v.ResponsiveTable-module_selectedRow__-JyNW {\r\n  border-left: 5px solid var(--interactive-color);\r\n  background-color: var(--table-row-selected-bg);\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\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 Row Style */\r\n.ResponsiveTable-module_clickableRow__0kjWm {\r\n  cursor: pointer;\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; <-- REMOVED to fix sticky header bug */\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  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  margin-left: 0.5rem; /* Add a small gap between text and icon */\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","selectedRow":"ResponsiveTable-module_selectedRow__-JyNW","clickableRow":"ResponsiveTable-module_clickableRow__0kjWm","clickableHeader":"ResponsiveTable-module_clickableHeader__xHQhF","sortable":"ResponsiveTable-module_sortable__yvA60","sorted-asc":"ResponsiveTable-module_sorted-asc__jzOIa","sorted-desc":"ResponsiveTable-module_sorted-desc__7WCFK","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);
 
+function DesktopView(props) {
+    const { columnDefinitions, originalColumnDefinitions, currentData, maxHeight, isHeaderSticky, tableContainerRef, headerRef, getRowProps, getHeaderProps, onHeaderClickCallback, getClickableHeaderClassName, getRawColumnDefinition, getColumnDefinition, renderCell, rowClickFunction, footerRows, renderPluginFooters, animationProps, onRowClick, selectionProps, onScroll, } = props;
+    const getEffectiveColSpan = React.useCallback((footerCol, startIndex) => {
+        const originalSpan = footerCol.colSpan || 1;
+        const endIndex = startIndex + originalSpan;
+        let visibleCount = 0;
+        for (let i = startIndex; i < endIndex; i++) {
+            const col = originalColumnDefinitions[i];
+            if (col && getRawColumnDefinition(col).visible !== false) {
+                visibleCount++;
+            }
+        }
+        return visibleCount;
+    }, [originalColumnDefinitions, getRawColumnDefinition]);
+    const tableFooter = React.useMemo(() => {
+        if (!footerRows || footerRows.length === 0) {
+            return null;
+        }
+        return (React.createElement("tfoot", null, footerRows.map((row, rowIndex) => {
+            let currentOriginalIndex = 0;
+            return (React.createElement("tr", { key: rowIndex }, row.columns.map((col, colIndex) => {
+                const effectiveColSpan = getEffectiveColSpan(col, currentOriginalIndex);
+                currentOriginalIndex += (col.colSpan || 1);
+                if (effectiveColSpan === 0)
+                    return null;
+                return (React.createElement("td", { key: colIndex, colSpan: effectiveColSpan, className: `${styles$2.footerCell} ${col.className || ''} ${col.onCellClick ? styles$2.clickableFooterCell : ''}`, onClick: col.onCellClick }, col.cellRenderer()));
+            })));
+        })));
+    }, [footerRows, getEffectiveColSpan]);
+    const useFixedHeaders = maxHeight ? true : false;
+    const isClickable = onRowClick || selectionProps;
+    const fixedHeadersStyle = useFixedHeaders
+        ? { maxHeight, overflowY: 'auto' }
+        : {};
+    const headerClassName = useFixedHeaders
+        ? styles$2.internalStickyHeader
+        : (isHeaderSticky ? styles$2.stickyHeader : '');
+    return (React.createElement("div", { style: fixedHeadersStyle, ref: tableContainerRef, onScroll: onScroll },
+        React.createElement("table", { className: styles$2['responsiveTable'] },
+            React.createElement("thead", { ref: headerRef, className: headerClassName },
+                React.createElement("tr", null, columnDefinitions.map((columnDefinition, colIndex) => {
+                    const onHeaderClick = onHeaderClickCallback(columnDefinition);
+                    const clickableHeaderClassName = getClickableHeaderClassName(onHeaderClick, columnDefinition);
+                    const headerProps = getHeaderProps(columnDefinition);
+                    const combinedClassName = `${clickableHeaderClassName} ${headerProps.className ? styles$2[headerProps.className] : ''}`.trim();
+                    // eslint-disable-next-line @typescript-eslint/no-unused-vars
+                    const { className } = headerProps, restHeaderProps = __rest(headerProps, ["className"]);
+                    return (React.createElement("th", Object.assign({ key: colIndex, className: combinedClassName }, restHeaderProps, { onClick: onHeaderClick ? () => onHeaderClick(getRawColumnDefinition(columnDefinition).interactivity.id) : restHeaderProps.onClick }),
+                        React.createElement("div", { className: styles$2.headerInnerWrapper },
+                            React.createElement("div", { className: styles$2.headerContent }, getColumnDefinition(columnDefinition, 0).displayLabel),
+                            React.createElement("span", { className: styles$2.sortIcon }))));
+                }))),
+            React.createElement("tbody", null, currentData.map((row, rowIndex) => {
+                const rowProps = getRowProps(row);
+                const pluginOnClick = rowProps.onClick;
+                return (React.createElement("tr", { key: rowIndex, className: `${isClickable ? styles$2.clickableRow : ''} ${(animationProps === null || animationProps === void 0 ? void 0 : animationProps.animateOnLoad) ? styles$2.animatedRow : ''} ${rowProps.className || ''}`.trim(), style: { animationDelay: `${rowIndex * 0.05}s` }, "aria-selected": rowProps['aria-selected'], onClick: (e) => {
+                        if (pluginOnClick) {
+                            pluginOnClick(e);
+                        }
+                        rowClickFunction(row);
+                    } }, columnDefinitions.map((columnDefinition, colIndex) => {
+                    const colDef = getColumnDefinition(columnDefinition, rowIndex);
+                    const cellContent = colDef.cellRenderer(row);
+                    return (React.createElement("td", { key: colIndex }, renderCell(cellContent, row, colDef)));
+                })));
+            })),
+            tableFooter),
+        renderPluginFooters()));
+}
+
+function MobileView(props) {
+    const { currentData, columnDefinitions, onRowClick, selectionProps, animationProps, getRowProps, getRowId, getColumnDefinition, onHeaderClickCallback, getClickableHeaderClassName, renderCell, rowClickFunction, mobileFooter, } = props;
+    const isClickable = onRowClick || selectionProps;
+    return (React.createElement("div", null,
+        currentData.map((row, rowIndex) => {
+            const rowProps = getRowProps(row);
+            const pluginOnClick = rowProps.onClick;
+            return (React.createElement("div", { key: getRowId(row, rowIndex), className: `${styles$2.card} ${isClickable ? styles$2.clickableRow : ''} ${(animationProps === null || animationProps === void 0 ? void 0 : animationProps.animateOnLoad) ? styles$2.animatedRow : ''} ${rowProps.className || ''}`.trim(), style: { animationDelay: `${rowIndex * 0.05}s` }, "aria-selected": rowProps['aria-selected'], onClick: (e) => {
+                    if (pluginOnClick)
+                        pluginOnClick(e);
+                    rowClickFunction(row);
+                } },
+                React.createElement("div", { className: styles$2['card-header'] }, " "),
+                React.createElement("div", { className: styles$2['card-body'] }, columnDefinitions.map((columnDefinition, colIndex) => {
+                    const colDef = getColumnDefinition(columnDefinition, rowIndex);
+                    const onHeaderClick = onHeaderClickCallback(colDef);
+                    const clickableHeaderClassName = getClickableHeaderClassName(onHeaderClick, colDef);
+                    return (React.createElement("div", { key: colIndex, className: styles$2['card-row'] },
+                        React.createElement("p", null,
+                            React.createElement("span", { className: `${styles$2['card-label']} ${clickableHeaderClassName}`, onClick: (e) => {
+                                    if (onHeaderClick) {
+                                        e.stopPropagation();
+                                        onHeaderClick(colDef.interactivity.id);
+                                    }
+                                } }, colDef.displayLabel),
+                            React.createElement("span", { className: styles$2['card-value'] }, renderCell(colDef.cellRenderer(row), row, colDef)))));
+                }))));
+        }),
+        mobileFooter));
+}
+
+function SkeletonView(props) {
+    const { isMobile, columnDefinitions } = props;
+    const skeletonRowCount = 5;
+    const columnCount = columnDefinitions.length;
+    if (isMobile) {
+        return (React.createElement("div", null, [...Array(skeletonRowCount)].map((_, i) => (React.createElement("div", { key: i, className: styles$2.skeletonCard }, [...Array(columnCount)].map((_, j) => (React.createElement("div", { key: j, className: `${styles$2.skeleton} ${styles$2.skeletonText}`, style: { marginBottom: '0.5rem' } }))))))));
+    }
+    return (React.createElement("table", { className: styles$2.responsiveTable },
+        React.createElement("thead", null,
+            React.createElement("tr", null, [...Array(columnCount)].map((_, i) => (React.createElement("th", { key: i },
+                React.createElement("div", { className: `${styles$2.skeleton} ${styles$2.skeletonText}` })))))),
+        React.createElement("tbody", null, [...Array(skeletonRowCount)].map((_, i) => (React.createElement("tr", { key: i }, [...Array(columnCount)].map((_, j) => (React.createElement("td", { key: j },
+            React.createElement("div", { className: `${styles$2.skeleton} ${styles$2.skeletonText}` }))))))))));
+}
+
+var 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);
+
+var css_248z = "/* Loading/No More Data Container */\r\n.NoMoreDataMessage-module_infoContainer__dk1r5 {\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.NoMoreDataMessage-module_infoContainer__dk1r5.NoMoreDataMessage-module_noMoreData__ATuIg {\r\n  font-weight: 500;\r\n}";
+var styles = {"infoContainer":"NoMoreDataMessage-module_infoContainer__dk1r5","noMoreData":"NoMoreDataMessage-module_noMoreData__ATuIg"};
+styleInject(css_248z);
+
+const LoadingSpinner = () => {
+    return (React.createElement("div", { className: styles.infoContainer },
+        React.createElement("div", { className: styles$1.spinner }),
+        React.createElement("span", null, "Loading more items...")));
+};
+
+const NoMoreDataMessage = () => {
+    return (React.createElement("div", { className: `${styles.infoContainer} ${styles.noMoreData}` },
+        React.createElement("p", null, "You've reached the end!")));
+};
+
+function debounce(func, delay) {
+    let timeout;
+    return function (...args) {
+        clearTimeout(timeout);
+        timeout = setTimeout(() => {
+            func.apply(this, args);
+        }, delay);
+    };
+}
+const useResponsiveTable = (props) => {
+    const { mobileBreakpoint = 600, enablePageLevelStickyHeader = true, maxHeight, headerRef, scrollableRef } = props;
+    const [isMobile, setIsMobile] = React.useState(false);
+    const [isHeaderSticky, setIsHeaderSticky] = React.useState(false);
+    const handleResize = React.useCallback(() => {
+        setIsMobile(window.innerWidth <= mobileBreakpoint);
+    }, [mobileBreakpoint]);
+    const handleScroll = React.useCallback((currentTarget) => {
+        // Page-level sticky header logic
+        if (enablePageLevelStickyHeader && !maxHeight && (headerRef === null || headerRef === void 0 ? void 0 : headerRef.current)) {
+            const { top } = headerRef.current.getBoundingClientRect();
+            const sticky = top <= 0;
+            if (sticky !== isHeaderSticky) {
+                setIsHeaderSticky(sticky);
+            }
+        }
+    }, [enablePageLevelStickyHeader, maxHeight, headerRef, isHeaderSticky]);
+    const debouncedScrollHandler = React.useRef(debounce(handleScroll, 200)).current;
+    React.useEffect(() => {
+        handleResize(); // Initial check
+        window.addEventListener('resize', handleResize);
+        const scrollTarget = (scrollableRef === null || scrollableRef === void 0 ? void 0 : scrollableRef.current) || window;
+        if (enablePageLevelStickyHeader || maxHeight) { // Only add scroll listener if sticky header or internal scroll is enabled
+            scrollTarget.addEventListener('scroll', (e) => debouncedScrollHandler(e.currentTarget));
+        }
+        return () => {
+            window.removeEventListener('resize', handleResize);
+            if (enablePageLevelStickyHeader || maxHeight) {
+                scrollTarget.removeEventListener('scroll', (e) => debouncedScrollHandler(e.currentTarget));
+            }
+        };
+    }, [handleResize, debouncedScrollHandler, enablePageLevelStickyHeader, maxHeight, scrollableRef]);
+    return { isMobile, isHeaderSticky, debouncedScrollHandler: debouncedScrollHandler };
+};
+
 class FilterPlugin {
     constructor() {
         this.id = 'filter';
@@ -121,7 +300,11 @@ class FilterPlugin {
                 });
             });
         };
-        this.renderCell = (content, _row, _column) => {
+        this.renderCell = (content, 
+        // eslint-disable-next-line @typescript-eslint/no-unused-vars
+        _row, 
+        // eslint-disable-next-line @typescript-eslint/no-unused-vars
+        _column) => {
             if (!this.filterText || typeof content !== 'string') {
                 return content;
             }
@@ -224,474 +407,560 @@ class SelectionPlugin {
     }
 }
 
-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);
-
-var css_248z = "/* Loading/No More Data Container */\r\n.NoMoreDataMessage-module_infoContainer__dk1r5 {\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.NoMoreDataMessage-module_infoContainer__dk1r5.NoMoreDataMessage-module_noMoreData__ATuIg {\r\n  font-weight: 500;\r\n}";
-var styles = {"infoContainer":"NoMoreDataMessage-module_infoContainer__dk1r5","noMoreData":"NoMoreDataMessage-module_noMoreData__ATuIg"};
-styleInject(css_248z);
-
-const LoadingSpinner = () => {
-    return (React.createElement("div", { className: styles.infoContainer },
-        React.createElement("div", { className: styles$1.spinner }),
-        React.createElement("span", null, "Loading more items...")));
-};
-
-const NoMoreDataMessage = () => {
-    return (React.createElement("div", { className: `${styles.infoContainer} ${styles.noMoreData}` },
-        React.createElement("p", null, "You've reached the end!")));
-};
-
-class InfiniteTable extends React.Component {
-    constructor(props) {
-        super(props);
-        this.tableContainerRef = React.createRef();
-        this.headerRef = React.createRef();
-        this.handleResize = () => {
-            this.setState({
-                isMobile: window.innerWidth <= (this.props.mobileBreakpoint || 600),
-            });
+// Type-safe sort comparer helpers
+const createSortComparers = () => ({
+    numeric: (key) => (a, b, direction) => {
+        const numA = parseFloat(String(a[key]));
+        const numB = parseFloat(String(b[key]));
+        const aIsNaN = isNaN(numA);
+        const bIsNaN = isNaN(numB);
+        if (aIsNaN && bIsNaN)
+            return 0;
+        if (aIsNaN)
+            return 1; // Put non-numbers at the end
+        if (bIsNaN)
+            return -1;
+        return direction === 'asc' ? numA - numB : numB - numA;
+    },
+    caseInsensitiveString: (key) => (a, b, direction) => {
+        var _a, _b;
+        const valA = String((_a = a[key]) !== null && _a !== void 0 ? _a : '').toLowerCase();
+        const valB = String((_b = b[key]) !== null && _b !== void 0 ? _b : '').toLowerCase();
+        if (valA < valB)
+            return direction === 'asc' ? -1 : 1;
+        if (valA > valB)
+            return direction === 'asc' ? 1 : -1;
+        return 0;
+    },
+    date: (key) => (a, b, direction) => {
+        const dateA = new Date(String(a[key])).getTime();
+        const dateB = new Date(String(b[key])).getTime();
+        const aIsNaN = isNaN(dateA);
+        const bIsNaN = isNaN(dateB);
+        if (aIsNaN && bIsNaN)
+            return 0;
+        if (aIsNaN)
+            return 1; // Put invalid dates at the end
+        if (bIsNaN)
+            return -1;
+        return direction === 'asc' ? dateA - dateB : dateB - dateA;
+    },
+});
+class SortPlugin {
+    constructor(options) {
+        var _a, _b;
+        this.id = 'sort';
+        this.comparers = createSortComparers();
+        this.onPluginInit = (api) => {
+            this.api = api;
         };
-        this.loadMoreData = () => {
-            const { infiniteScrollProps } = this.props;
-            if (!infiniteScrollProps)
-                return;
-            this.setState({ isLoadingMore: true }, () => __awaiter(this, void 0, void 0, function* () {
-                var _a, _b;
-                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
-                        });
+        this.processData = (data) => {
+            if (!this.sortColumn || !this.sortDirection) {
+                return data;
+            }
+            const columnDef = this.api.columnDefinitions.find((col) => (typeof col === 'object' && col.columnId === this.sortColumn));
+            if (!columnDef) {
+                return data;
+            }
+            const sortedData = [...data].sort((a, b) => {
+                if ('sortComparer' in columnDef && columnDef.sortComparer) {
+                    if (columnDef.sortComparer.length < 3) {
+                        console.warn(`The custom sortComparer for column '${this.sortColumn}' should accept all three parameters (a, b, direction) to ensure correct sorting behavior. You provided a function with ${columnDef.sortComparer.length} parameters.`);
                     }
+                    return columnDef.sortComparer(a, b, this.sortDirection);
                 }
-                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
-                }
-                finally {
-                    this.setState({ isLoadingMore: false });
+                if ('getSortableValue' in columnDef && columnDef.getSortableValue) {
+                    const aValue = columnDef.getSortableValue(a);
+                    const bValue = columnDef.getSortableValue(b);
+                    if (aValue < bValue)
+                        return this.sortDirection === 'asc' ? -1 : 1;
+                    if (aValue > bValue)
+                        return this.sortDirection === 'asc' ? 1 : -1;
+                    return 0;
                 }
-            }));
-        };
-        this.processData = () => {
-            let processed = [...this.state.internalData];
-            this.state.activePlugins.forEach((plugin) => {
-                if (plugin.processData) {
-                    processed = plugin.processData(processed);
+                // Fallback to dataKey if it exists and no other sorter is provided
+                if ('dataKey' in columnDef && columnDef.dataKey) {
+                    const key = columnDef.dataKey;
+                    const aValue = a[key];
+                    const bValue = b[key];
+                    if (aValue < bValue)
+                        return this.sortDirection === 'asc' ? -1 : 1;
+                    if (aValue > bValue)
+                        return this.sortDirection === 'asc' ? 1 : -1;
+                    return 0;
                 }
+                return 0;
             });
-            this.setState({ processedData: processed });
-        };
-        this.getColumnDefinition = (colDef, rowIndex) => {
-            if (typeof colDef === 'function') {
-                return colDef(this.data[rowIndex], rowIndex);
-            }
-            return colDef;
+            return sortedData;
         };
-        this.getRawColumnDefinition = (colDef) => {
-            if (typeof colDef === 'function') {
-                return colDef(this.data[0], 0);
+        this.getHeaderProps = (columnDef) => {
+            const { columnId } = columnDef;
+            const isSortable = ('sortComparer' in columnDef && !!columnDef.sortComparer) || ('getSortableValue' in columnDef && !!columnDef.getSortableValue);
+            // A column must have a columnId and a sort function to be sortable
+            if (!isSortable || !columnId) {
+                return {};
             }
-            return colDef;
-        };
-        this.onHeaderClickCallback = (colDef) => {
-            var _a;
-            const raw = this.getRawColumnDefinition(colDef);
-            return (_a = raw.interactivity) === null || _a === void 0 ? void 0 : _a.onHeaderClick;
-        };
-        this.getClickableHeaderClassName = (colDef) => {
-            var _a;
-            const raw = this.getRawColumnDefinition(colDef);
-            return ((_a = raw.interactivity) === null || _a === void 0 ? void 0 : _a.onHeaderClick) ? raw.interactivity.className || styles$2.clickableHeader : '';
-        };
-        this.getHeaderProps = (colDef) => {
-            const headerProps = {};
-            this.state.activePlugins.forEach(plugin => {
-                if (plugin.getHeaderProps) {
-                    Object.assign(headerProps, plugin.getHeaderProps(this.getRawColumnDefinition(colDef)));
+            const onHeaderClick = (e) => {
+                const target = e.target;
+                console.log('SortPlugin: Header clicked. Target:', target);
+                // If the click is on an interactive element, don't sort
+                if (target.closest('input, button, a, [onclick]')) {
+                    console.log('SortPlugin: Interactive element clicked, ignoring sort.');
+                    return;
                 }
-            });
-            return headerProps;
-        };
-        this.state = {
-            isMobile: false,
-            internalData: props.data || [],
-            processedData: props.data || [],
-            isLoadingMore: false,
-            internalHasMore: true,
-            isHeaderSticky: false,
-            activePlugins: [],
+                console.log('SortPlugin: Non-interactive element clicked, proceeding with sort.');
+                if (this.sortColumn === columnId) {
+                    if (this.sortDirection === 'desc') {
+                        this.sortColumn = null;
+                        this.sortDirection = null;
+                    }
+                    else {
+                        this.sortDirection = 'desc';
+                    }
+                }
+                else {
+                    this.sortColumn = columnId;
+                    this.sortDirection = 'asc';
+                }
+                this.api.forceUpdate();
+            };
+            let sortClassName = 'sortable';
+            if (this.sortColumn === columnId) {
+                sortClassName = `sorted-${this.sortDirection}`;
+            }
+            return {
+                onClick: onHeaderClick,
+                className: sortClassName,
+                'aria-sort': (this.sortColumn === columnId ? (this.sortDirection === 'asc' ? 'ascending' : 'descending') : 'none'),
+            };
         };
-        this.debouncedResize = this.debounce(this.handleResize, 200);
-        this.debouncedScrollHandler = this.debounce(this.handleScroll, 200);
+        this.sortColumn = (_a = options === null || options === void 0 ? void 0 : options.initialSortColumn) !== null && _a !== void 0 ? _a : null;
+        this.sortDirection = (_b = options === null || options === void 0 ? void 0 : options.initialSortDirection) !== null && _b !== void 0 ? _b : null;
     }
-    componentDidUpdate(prevProps) {
-        const propsHaveChanged = prevProps.plugins !== this.props.plugins ||
-            prevProps.filterProps !== this.props.filterProps;
-        if (prevProps.data !== this.props.data) {
-            // 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();
+}
+
+const useTablePlugins = (props) => {
+    const { data, plugins, filterProps, selectionProps, sortProps, columnDefinitions, getScrollableElement, infiniteScrollProps, } = props;
+    const [processedData, setProcessedData] = React.useState(data);
+    const [activePlugins, setActivePlugins] = React.useState([]);
+    // Persist internal plugins using refs to prevent state loss
+    const filterPluginRef = React.useRef(null);
+    const selectionPluginRef = React.useRef(null);
+    const sortPluginRef = React.useRef(null);
+    const getRawColumnDefinition = React.useCallback((columnDefinition) => {
+        if (typeof columnDefinition === 'function') {
+            return columnDefinition(data[0] || {}, 0);
         }
-    }
-    componentDidMount() {
-        this.handleResize();
-        window.addEventListener('resize', this.debouncedResize);
-        this.initializePlugins();
-        if (this.props.data.length === 0) {
-            this.loadMoreData();
+        return columnDefinition;
+    }, [data]);
+    const visibleColumns = React.useMemo(() => {
+        return columnDefinitions.filter(col => {
+            const raw = getRawColumnDefinition(col);
+            return raw.visible !== false;
+        });
+    }, [columnDefinitions, getRawColumnDefinition]);
+    const initializePlugins = React.useCallback(() => {
+        const newActivePlugins = [];
+        // 1. Add external plugins
+        if (plugins) {
+            newActivePlugins.push(...plugins);
         }
-    }
-    componentWillUnmount() {
-        window.removeEventListener('resize', this.debouncedResize);
-    }
-    debounce(func, delay) {
-        let timeout;
-        return function (...args) {
-            clearTimeout(timeout);
-            timeout = setTimeout(() => {
-                func.apply(this, args);
-            }, delay);
-        };
-    }
-    handleScroll(currentTarget) {
-        var _a;
-        if (!currentTarget)
-            return;
-        const { scrollHeight, scrollTop, clientHeight } = currentTarget;
-        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;
-        // When maxHeight is set, we use CSS position:sticky and don't need JS-based detection.
-        // The isHeaderSticky state is only for page-level stickiness.
-        if (this.props.enablePageLevelStickyHeader !== false && !this.props.maxHeight && this.headerRef.current) {
-            const { top } = this.headerRef.current.getBoundingClientRect();
-            const isSticky = top <= 0;
-            if (isSticky !== this.state.isHeaderSticky) {
-                this.setState({ isHeaderSticky: isSticky });
+        // 2. Manage internal FilterPlugin
+        if (filterProps === null || filterProps === void 0 ? void 0 : filterProps.showFilter) {
+            if (!filterPluginRef.current) {
+                filterPluginRef.current = new FilterPlugin();
+            }
+            if (!newActivePlugins.some(p => p.id === 'filter')) {
+                newActivePlugins.push(filterPluginRef.current);
             }
         }
-        if (hasMore && !isLoadingMore && scrollHeight - scrollTop - clientHeight < 100) {
-            this.loadMoreData();
+        else {
+            filterPluginRef.current = null;
         }
-    }
-    initializePlugins() {
-        var _a;
-        const plugins = [];
-        if (this.props.plugins)
-            plugins.push(...this.props.plugins);
-        if (((_a = this.props.filterProps) === null || _a === void 0 ? void 0 : _a.showFilter) && !plugins.some(p => p.id === 'filter')) {
-            plugins.push(new FilterPlugin());
+        // 3. Manage internal SelectionPlugin
+        if (selectionProps === null || selectionProps === void 0 ? void 0 : selectionProps.onSelectionChange) {
+            if (!selectionPluginRef.current) {
+                selectionPluginRef.current = new SelectionPlugin();
+            }
+            if (!newActivePlugins.some(p => p.id === 'selection')) {
+                newActivePlugins.push(selectionPluginRef.current);
+            }
         }
-        this.setState({ activePlugins: plugins }, () => {
-            plugins.forEach(plugin => {
-                var _a;
-                (_a = plugin.onPluginInit) === null || _a === void 0 ? void 0 : _a.call(plugin, Object.assign({ getData: () => this.state.internalData, forceUpdate: () => this.processData(), getScrollableElement: () => this.tableContainerRef.current }, this.props));
-            });
-            this.processData();
-        });
-    }
-    get data() {
-        return this.state.processedData || [];
-    }
-    get hasData() {
-        return this.data.length > 0;
-    }
-    get noDataComponent() {
-        return this.props.noDataComponent || React.createElement("div", { className: styles$2.noData }, "No data");
-    }
-    get defaultLoadingComponent() {
-        return React.createElement(LoadingSpinner, null);
-    }
-    get defaultNoMoreDataComponent() {
-        return React.createElement(NoMoreDataMessage, null);
-    }
-    get rowClickFunction() {
-        return this.props.onRowClick || (() => { });
-    }
-    get rowClickStyle() {
-        return this.props.onRowClick ? { cursor: 'pointer' } : {};
-    }
-    get mobileView() {
-        var _a;
-        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", null,
-            this.data.map((row, rowIndex) => {
-                var _a;
-                return (React.createElement("div", { key: rowIndex, className: `${styles$2['card']} ${((_a = this.props.animationProps) === null || _a === void 0 ? void 0 : _a.animateOnLoad) ? styles$2.animatedRow : ''}`, style: { animationDelay: `${rowIndex * 0.05}s` }, onClick: () => this.rowClickFunction(row) },
-                    React.createElement("div", { className: styles$2['card-body'] }, this.props.columnDefinitions.map((colDef, colIndex) => {
-                        const column = this.getColumnDefinition(colDef, rowIndex);
-                        return (React.createElement("div", { key: colIndex, className: styles$2['card-row'] },
-                            React.createElement("p", null,
-                                React.createElement("span", { className: styles$2['card-label'] }, column.displayLabel),
-                                React.createElement("span", { className: styles$2['card-value'] }, column.cellRenderer(row)))));
-                    }))));
-            }),
-            isLoadingMore && ((infiniteScrollProps === null || infiniteScrollProps === void 0 ? void 0 : infiniteScrollProps.loadingMoreComponent) || this.defaultLoadingComponent),
-            !isLoadingMore && !hasMore && ((infiniteScrollProps === null || infiniteScrollProps === void 0 ? void 0 : infiniteScrollProps.noMoreDataComponent) || this.defaultNoMoreDataComponent)));
-    }
-    get largeScreenView() {
-        var _a;
-        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;
-        const headerClassName = this.props.maxHeight
-            ? styles$2.internalStickyHeader
-            : this.state.isHeaderSticky
-                ? styles$2.stickyHeader
-                : '';
-        return (React.createElement("div", { ref: this.tableContainerRef, onScroll: (e) => this.debouncedScrollHandler(e.currentTarget), style: { maxHeight: this.props.maxHeight, overflowY: 'auto' } },
-            React.createElement("table", { className: styles$2['responsiveTable'] },
-                React.createElement("thead", { ref: this.headerRef, className: headerClassName },
-                    React.createElement("tr", null, this.props.columnDefinitions.map((colDef, colIndex) => {
-                        const rawColDef = this.getRawColumnDefinition(colDef);
-                        const headerProps = this.getHeaderProps(rawColDef);
-                        const onHeaderClickCallback = this.onHeaderClickCallback(rawColDef);
-                        const combinedClassName = `${this.getClickableHeaderClassName(rawColDef)} ${headerProps.className ? styles$2[headerProps.className] : ''}`.trim();
-                        // eslint-disable-next-line @typescript-eslint/no-unused-vars
-                        const { className } = headerProps, restHeaderProps = __rest(headerProps, ["className"]);
-                        return (React.createElement("th", Object.assign({ key: colIndex, className: combinedClassName }, restHeaderProps, { onClick: onHeaderClickCallback ? () => onHeaderClickCallback(rawColDef.interactivity.id) : undefined }),
-                            React.createElement("div", { className: styles$2.headerInnerWrapper },
-                                React.createElement("div", { className: styles$2.headerContent }, rawColDef.displayLabel),
-                                React.createElement("span", { className: styles$2.sortIcon }))));
-                    }))),
-                React.createElement("tbody", null, this.data.map((row, rowIndex) => {
-                    var _a;
-                    return (React.createElement("tr", { key: rowIndex, className: ((_a = this.props.animationProps) === null || _a === void 0 ? void 0 : _a.animateOnLoad) ? styles$2.animatedRow : '', style: { animationDelay: `${rowIndex * 0.05}s` } }, this.props.columnDefinitions.map((colDef, colIndex) => (React.createElement("td", { key: colIndex, onClick: () => this.rowClickFunction(row), style: this.rowClickStyle }, this.getColumnDefinition(colDef, rowIndex).cellRenderer(row))))));
-                }))),
-            isLoadingMore && ((infiniteScrollProps === null || infiniteScrollProps === void 0 ? void 0 : infiniteScrollProps.loadingMoreComponent) || this.defaultLoadingComponent),
-            !isLoadingMore && !hasMore && ((infiniteScrollProps === null || infiniteScrollProps === void 0 ? void 0 : infiniteScrollProps.noMoreDataComponent) || this.defaultNoMoreDataComponent)));
-    }
-    render() {
-        var _a;
-        if (((_a = this.props.animationProps) === null || _a === void 0 ? void 0 : _a.isLoading) && !this.hasData) {
-            return React.createElement("div", null, "Skeleton View Placeholder");
+        else {
+            selectionPluginRef.current = null;
         }
-        return (React.createElement("div", null,
-            !this.hasData && this.noDataComponent,
-            this.hasData && (this.state.isMobile ? this.mobileView : this.largeScreenView)));
-    }
-}
-
-// Class component
-class ResponsiveTable extends React.Component {
-    constructor(props) {
-        var _a;
-        super(props);
-        this.tableContainerRef = React.createRef();
-        this.headerRef = React.createRef();
-        this.filterPlugin = null;
-        this.handleScroll = () => {
-            if (this.headerRef.current && !this.props.maxHeight) {
-                const { top } = this.headerRef.current.getBoundingClientRect();
-                const isSticky = top <= 0;
-                if (isSticky !== this.state.isHeaderSticky) {
-                    this.setState({ isHeaderSticky: isSticky });
-                }
+        // 4. Manage internal SortPlugin
+        const isAnyColumnSortable = columnDefinitions.some(col => {
+            const rawCol = getRawColumnDefinition(col);
+            return rawCol.sortComparer || rawCol.getSortableValue;
+        });
+        if (isAnyColumnSortable) {
+            if (!sortPluginRef.current) {
+                sortPluginRef.current = new SortPlugin(sortProps);
+            }
+            if (!newActivePlugins.some(p => p.id === 'sort')) {
+                newActivePlugins.push(sortPluginRef.current);
             }
-        };
-        this.handleResize = () => {
-            this.setState({
-                isMobile: window.innerWidth <= this.mobileBreakpoint,
-            });
-        };
-        if ((_a = props.filterProps) === null || _a === void 0 ? void 0 : _a.showFilter) {
-            this.filterPlugin = new FilterPlugin();
-        }
-        this.state = {
-            isMobile: false,
-            processedData: props.data,
-            isLoadingMore: false,
-            isHeaderSticky: false,
-            activePlugins: [],
-        };
-        this.debouncedResize = this.debounce(this.handleResize, 200);
-    }
-    get mobileBreakpoint() {
-        return this.props.mobileBreakpoint || 600;
-    }
-    debounce(func, delay) {
-        let timeout;
-        return () => {
-            clearTimeout(timeout);
-            timeout = setTimeout(() => func(), delay);
-        };
-    }
-    get data() {
-        if (Array.isArray(this.state.processedData) && this.state.processedData.length > 0) {
-            return this.state.processedData;
         }
         else {
-            return [];
+            sortPluginRef.current = null;
         }
-    }
-    get noDataSvg() {
-        return (React.createElement("svg", { xmlns: "http://www.w3.org/2000/svg", fill: "#ccc", height: "40", width: "40", viewBox: "0 0 24 24" },
-            React.createElement("path", { d: "M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.41 0-8-3.59-8-8s3.59-8 8-8 8 3.59 8 8-3.59 8-8 8zm-1-14h2v6h-2zm0 8h2v2h-2z" })));
-    }
-    get hasData() {
-        return this.data.length > 0;
-    }
-    get noDataComponent() {
-        return (this.props.noDataComponent || (React.createElement("div", { className: styles$2.noDataWrapper },
-            this.noDataSvg,
-            React.createElement("div", { className: styles$2.noData }, "No data"))));
-    }
-    componentDidMount() {
-        this.handleResize(); // Initial check
-        window.addEventListener('resize', this.debouncedResize);
-        if (this.props.enablePageLevelStickyHeader !== false) {
-            window.addEventListener('scroll', this.handleScroll);
+        setActivePlugins(newActivePlugins);
+        const api = {
+            getData: () => data,
+            forceUpdate: forceUpdatePlugins,
+            getScrollableElement: getScrollableElement,
+            infiniteScrollProps: infiniteScrollProps,
+            filterProps: filterProps,
+            selectionProps: selectionProps,
+            columnDefinitions: columnDefinitions,
+        };
+        // Initialize/Refresh all active plugins with the current API
+        newActivePlugins.forEach((plugin) => {
+            if (plugin.onPluginInit) {
+                plugin.onPluginInit(api);
+            }
+        });
+        // Run the data processing pipeline
+        let currentProcessedData = [...data];
+        newActivePlugins.forEach((plugin) => {
+            if (plugin.processData) {
+                currentProcessedData = plugin.processData(currentProcessedData);
+            }
+        });
+        return currentProcessedData;
+    }, [
+        data,
+        plugins,
+        filterProps,
+        selectionProps,
+        sortProps,
+        columnDefinitions,
+        getScrollableElement,
+        infiniteScrollProps,
+        getRawColumnDefinition,
+    ]);
+    const forceUpdatePlugins = React.useCallback(() => {
+        setProcessedData(initializePlugins());
+    }, [initializePlugins]);
+    // Handle re-initialization when props change
+    React.useEffect(() => {
+        setProcessedData(initializePlugins());
+    }, [initializePlugins]);
+    return { processedData, activePlugins, visibleColumns, forceUpdatePlugins };
+};
+
+function InfiniteTable(props) {
+    const { columnDefinitions, data, noDataComponent, maxHeight, onRowClick, footerRows, mobileBreakpoint, plugins, enablePageLevelStickyHeader, infiniteScrollProps, filterProps, selectionProps, animationProps, sortProps, } = props;
+    const tableContainerRef = React.useRef(null);
+    const headerRef = React.useRef(null);
+    const { isMobile, isHeaderSticky, debouncedScrollHandler } = useResponsiveTable({
+        mobileBreakpoint,
+        enablePageLevelStickyHeader,
+        maxHeight,
+        headerRef,
+        scrollableRef: tableContainerRef,
+    });
+    const [internalData, setInternalData] = React.useState(data || []);
+    const [isLoadingMore, setIsLoadingMore] = React.useState(false);
+    const [internalHasMore, setInternalHasMore] = React.useState(true);
+    const getScrollableElement = React.useCallback(() => tableContainerRef.current, []);
+    const { processedData, activePlugins, visibleColumns } = useTablePlugins({
+        data: internalData,
+        plugins,
+        filterProps,
+        selectionProps,
+        sortProps,
+        columnDefinitions,
+        getScrollableElement,
+        infiniteScrollProps,
+    });
+    const currentHasMore = (infiniteScrollProps === null || infiniteScrollProps === void 0 ? void 0 : infiniteScrollProps.hasMore) !== undefined
+        ? infiniteScrollProps.hasMore
+        : internalHasMore;
+    const currentData = React.useMemo(() => {
+        if (Array.isArray(processedData) && processedData.length > 0) {
+            return processedData;
         }
-        const { processedData, activePlugins } = this.initializePlugins();
-        this.setState({ processedData, activePlugins });
-    }
-    componentWillUnmount() {
-        window.removeEventListener('resize', this.debouncedResize);
-        if (this.props.enablePageLevelStickyHeader !== false) {
-            window.removeEventListener('scroll', this.handleScroll);
+        else {
+            return [];
         }
-    }
-    componentDidUpdate(prevProps) {
-        var _a, _b, _c;
-        if (((_a = prevProps.filterProps) === null || _a === void 0 ? void 0 : _a.showFilter) !== ((_b = this.props.filterProps) === null || _b === void 0 ? void 0 : _b.showFilter)) {
-            if ((_c = this.props.filterProps) === null || _c === void 0 ? void 0 : _c.showFilter) {
-                this.filterPlugin = new FilterPlugin();
+    }, [processedData]);
+    const hasData = React.useMemo(() => currentData.length > 0, [currentData]);
+    const noDataComponentNode = noDataComponent || React.createElement("div", { className: styles$2.noData }, "No data");
+    const defaultLoadingComponent = React.createElement(LoadingSpinner, null);
+    const defaultNoMoreDataComponent = React.createElement(NoMoreDataMessage, null);
+    const getRawColumnDefinition = (columnDefinition) => {
+        if (typeof columnDefinition === 'function') {
+            if (currentData.length === 0) {
+                return { displayLabel: '', cellRenderer: () => '' };
             }
-            else {
-                this.filterPlugin = null;
+            return columnDefinition(currentData[0], 0);
+        }
+        return columnDefinition;
+    };
+    const getColumnDefinition = (columnDefinition, rowIndex) => {
+        if (!hasData) {
+            return { displayLabel: '', cellRenderer: () => '' };
+        }
+        return columnDefinition instanceof Function ? columnDefinition(currentData[rowIndex], rowIndex) : columnDefinition;
+    };
+    const loadMoreData = React.useCallback(() => __awaiter(this, void 0, void 0, function* () {
+        var _a;
+        if (!infiniteScrollProps || isLoadingMore)
+            return;
+        setIsLoadingMore(true);
+        try {
+            const newItems = yield ((_a = infiniteScrollProps.onLoadMore) === null || _a === void 0 ? void 0 : _a.call(infiniteScrollProps, internalData));
+            if (infiniteScrollProps.hasMore === undefined) {
+                if (!newItems || newItems.length === 0) {
+                    setInternalHasMore(false);
+                }
+            }
+            if (newItems && newItems.length > 0) {
+                setInternalData(prevData => [...prevData, ...newItems]);
             }
         }
-        // Re-initialize if data or plugin configuration changes.
-        if (prevProps.data !== this.props.data ||
-            prevProps.plugins !== this.props.plugins ||
-            prevProps.filterProps !== this.props.filterProps ||
-            prevProps.selectionProps !== this.props.selectionProps) {
-            const { processedData, activePlugins } = this.initializePlugins();
-            this.setState({ processedData, activePlugins });
+        catch (error) {
+            console.error("Failed to load more items for infinite scroll:", error);
         }
-    }
-    initializePlugins() {
-        var _a, _b;
-        const activePlugins = [];
-        // Add explicitly provided plugins first
-        if (this.props.plugins) {
-            activePlugins.push(...this.props.plugins);
+        finally {
+            setIsLoadingMore(false);
         }
-        // Automatically add FilterPlugin if filterProps are provided and not already present
-        if (((_a = this.props.filterProps) === null || _a === void 0 ? void 0 : _a.showFilter) && this.filterPlugin && !activePlugins.some(p => p.id === 'filter')) {
-            activePlugins.push(this.filterPlugin);
+    }), [infiniteScrollProps, isLoadingMore, internalData]);
+    React.useEffect(() => {
+        setInternalData(data || []);
+    }, [data]);
+    React.useEffect(() => {
+        if (data.length === 0) {
+            loadMoreData();
         }
-        // Automatically add SelectionPlugin if selectionProps are provided and not already present
-        if (((_b = this.props.selectionProps) === null || _b === void 0 ? void 0 : _b.onSelectionChange) && !activePlugins.some(p => p.id === 'selection')) {
-            activePlugins.push(new SelectionPlugin());
+    }, [data.length, loadMoreData]);
+    const handleScrollForInfinite = React.useCallback((currentTarget) => {
+        if (!currentTarget)
+            return;
+        const { scrollHeight, scrollTop, clientHeight } = currentTarget;
+        if (currentHasMore && !isLoadingMore && scrollHeight - scrollTop - clientHeight < 100) {
+            loadMoreData();
         }
+    }, [currentHasMore, isLoadingMore, loadMoreData]);
+    const onHeaderClickCallback = (colDef) => {
+        var _a;
+        const rawColumnDefinition = getRawColumnDefinition(colDef);
+        return (_a = rawColumnDefinition.interactivity) === null || _a === void 0 ? void 0 : _a.onHeaderClick;
+    };
+    const getClickableHeaderClassName = (onHeaderClickCallback, colDef) => {
+        var _a;
+        const rawColumnDefinition = getRawColumnDefinition(colDef);
+        return onHeaderClickCallback
+            ? ((_a = rawColumnDefinition.interactivity) === null || _a === void 0 ? void 0 : _a.className) || styles$2.clickableHeader
+            : '';
+    };
+    const getHeaderProps = (colDef) => {
+        const headerProps = {};
         activePlugins.forEach((plugin) => {
-            if (plugin.onPluginInit) {
-                plugin.onPluginInit({
-                    getData: () => this.props.data,
-                    forceUpdate: () => {
-                        const { processedData, activePlugins } = this.initializePlugins();
-                        this.setState({ processedData, activePlugins });
-                    },
-                    getScrollableElement: () => this.tableContainerRef.current,
-                    infiniteScrollProps: this.props.infiniteScrollProps,
-                    filterProps: this.props.filterProps,
-                    selectionProps: this.props.selectionProps,
-                    columnDefinitions: this.props.columnDefinitions,
-                });
+            if (plugin.getHeaderProps) {
+                Object.assign(headerProps, plugin.getHeaderProps(getRawColumnDefinition(colDef)));
             }
         });
-        // Process data with all active plugins
-        let processedData = [...this.props.data];
+        return headerProps;
+    };
+    const getRowId = (row, index) => {
+        if (selectionProps && selectionProps.rowIdKey) {
+            return row[selectionProps.rowIdKey];
+        }
+        return index;
+    };
+    const getRowProps = (row) => {
+        const rowProps = {};
+        const clickHandlers = [];
         activePlugins.forEach((plugin) => {
-            if (plugin.processData) {
-                processedData = plugin.processData(processedData);
+            if (plugin.getRowProps) {
+                const props = plugin.getRowProps(row);
+                if (props.className) {
+                    rowProps.className = `${rowProps.className || ''} ${props.className}`.trim();
+                }
+                if (props.onClick) {
+                    clickHandlers.push(props.onClick);
+                }
+                const rest = __rest(props, []);
+                Object.assign(rowProps, rest);
             }
         });
-        return { processedData, activePlugins };
-    }
-    getColumnDefinition(columnDefinition, rowIndex) {
-        if (!this.hasData) {
-            return { displayLabel: '', cellRenderer: () => '' };
+        if (clickHandlers.length > 0) {
+            rowProps.onClick = (e) => {
+                clickHandlers.forEach(handler => handler(e));
+            };
+        }
+        return rowProps;
+    };
+    const renderCell = (content, row, colDef) => {
+        let processedContent = content;
+        activePlugins.forEach((plugin) => {
+            if (plugin.renderCell) {
+                processedContent = plugin.renderCell(processedContent, row, colDef);
+            }
+        });
+        return processedContent;
+    };
+    const rowClickFunction = onRowClick || (() => { });
+    const mobileFooter = React.useMemo(() => {
+        if (!footerRows || footerRows.length === 0) {
+            return null;
         }
-        return columnDefinition instanceof Function ? columnDefinition(this.data[0], rowIndex) : columnDefinition;
+        return (React.createElement("div", { className: styles$2.footerCard },
+            React.createElement("div", { className: styles$2['footer-card-body'] }, footerRows.map((row, rowIndex) => {
+                let currentColumnIndex = 0;
+                return (React.createElement("div", { key: rowIndex }, row.columns.map((col, colIndex) => {
+                    let label = col.displayLabel;
+                    if (!label && col.colSpan === 1) {
+                        const header = columnDefinitions[currentColumnIndex];
+                        if (header) {
+                            label = getRawColumnDefinition(header).displayLabel;
+                        }
+                    }
+                    currentColumnIndex += col.colSpan;
+                    return (React.createElement("p", { key: colIndex, className: `${styles$2['footer-card-row']} ${col.className || ''} ${col.onCellClick ? styles$2.clickableFooterCell : ''}`, onClick: col.onCellClick },
+                        label && React.createElement("span", { className: styles$2['card-label'] }, label),
+                        React.createElement("span", { className: styles$2['card-value'] }, col.cellRenderer())));
+                })));
+            }))));
+    }, [footerRows, columnDefinitions]);
+    const renderPluginHeaders = React.useCallback(() => {
+        if (!activePlugins) {
+            return null;
+        }
+        return activePlugins.map((plugin) => {
+            if (plugin.renderHeader) {
+                if (plugin.id === 'sort' && !isMobile) {
+                    return null;
+                }
+                return React.createElement("div", { key: plugin.id }, plugin.renderHeader());
+            }
+            return null;
+        });
+    }, [activePlugins, isMobile]);
+    const renderPluginFooters = React.useCallback(() => {
+        if (!plugins) {
+            return null;
+        }
+        return plugins.map((plugin) => {
+            if (plugin.renderFooter) {
+                return React.createElement("div", { key: plugin.id + '-footer' }, plugin.renderFooter());
+            }
+            return null;
+        });
+    }, [plugins]);
+    const infiniteStatusUI = (React.createElement(React.Fragment, null,
+        isLoadingMore && ((infiniteScrollProps === null || infiniteScrollProps === void 0 ? void 0 : infiniteScrollProps.loadingMoreComponent) || defaultLoadingComponent),
+        !isLoadingMore && !currentHasMore && ((infiniteScrollProps === null || infiniteScrollProps === void 0 ? void 0 : infiniteScrollProps.noMoreDataComponent) || defaultNoMoreDataComponent)));
+    const desktopView = (React.createElement(DesktopView, { columnDefinitions: visibleColumns, originalColumnDefinitions: columnDefinitions, currentData: currentData, maxHeight: maxHeight, isHeaderSticky: isHeaderSticky, tableContainerRef: tableContainerRef, headerRef: headerRef, getRowProps: getRowProps, getHeaderProps: getHeaderProps, onHeaderClickCallback: onHeaderClickCallback, getClickableHeaderClassName: getClickableHeaderClassName, getRawColumnDefinition: getRawColumnDefinition, getColumnDefinition: getColumnDefinition, renderCell: renderCell, rowClickFunction: rowClickFunction, footerRows: footerRows, renderPluginFooters: renderPluginFooters, animationProps: animationProps, onRowClick: onRowClick, selectionProps: selectionProps, onScroll: (e) => {
+            debouncedScrollHandler(e.currentTarget); // For sticky header
+            handleScrollForInfinite(e.currentTarget); // For infinite scroll
+        } }));
+    const mobileView = (React.createElement(MobileView, { currentData: currentData, columnDefinitions: visibleColumns, onRowClick: onRowClick, selectionProps: selectionProps, animationProps: animationProps, getRowProps: getRowProps, getRowId: getRowId, getColumnDefinition: getColumnDefinition, onHeaderClickCallback: onHeaderClickCallback, getClickableHeaderClassName: getClickableHeaderClassName, renderCell: renderCell, rowClickFunction: rowClickFunction, mobileFooter: mobileFooter }));
+    const skeletonView = (React.createElement(SkeletonView, { isMobile: isMobile, columnDefinitions: visibleColumns }));
+    if ((animationProps === null || animationProps === void 0 ? void 0 : animationProps.isLoading) && !hasData) {
+        return skeletonView;
     }
-    getRawColumnDefinition(columnDefinition) {
+    return (React.createElement("div", null,
+        React.createElement("div", { style: { display: 'flex', justifyContent: 'flex-end' } }, renderPluginHeaders()),
+        !hasData && noDataComponentNode,
+        hasData && (isMobile ? mobileView : desktopView),
+        hasData && infiniteStatusUI));
+}
+
+function ResponsiveTable(props) {
+    const { columnDefinitions, data, noDataComponent, maxHeight, onRowClick, footerRows, mobileBreakpoint, plugins, enablePageLevelStickyHeader, infiniteScrollProps, filterProps, selectionProps, animationProps, sortProps, } = props;
+    const tableContainerRef = React.useRef(null);
+    const headerRef = React.useRef(null);
+    const { isMobile, isHeaderSticky } = useResponsiveTable({
+        mobileBreakpoint,
+        enablePageLevelStickyHeader,
+        maxHeight,
+        headerRef,
+        scrollableRef: tableContainerRef,
+    });
+    const getScrollableElement = React.useCallback(() => tableContainerRef.current, []);
+    const { processedData, activePlugins, visibleColumns } = useTablePlugins({
+        data,
+        plugins,
+        filterProps,
+        selectionProps,
+        sortProps,
+        columnDefinitions,
+        getScrollableElement,
+        infiniteScrollProps,
+    });
+    const currentData = React.useMemo(() => {
+        if (Array.isArray(processedData) && processedData.length > 0) {
+            return processedData;
+        }
+        else {
+            return [];
+        }
+    }, [processedData]);
+    const hasData = React.useMemo(() => currentData.length > 0, [currentData]);
+    const noDataSvg = (React.createElement("svg", { xmlns: "http://www.w3.org/2000/svg", fill: "#ccc", height: "40", width: "40", viewBox: "0 0 24 24" },
+        React.createElement("path", { d: "M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.41 0-8-3.59-8-8s3.59-8 8-8 8 3.59 8 8-3.59 8-8 8zm-1-14h2v6h-2zm0 8h2v2h-2z" })));
+    const noDataComponentNode = noDataComponent || (React.createElement("div", { className: styles$2.noDataWrapper },
+        noDataSvg,
+        React.createElement("div", { className: styles$2.noData }, "No data")));
+    const getRawColumnDefinition = (columnDefinition) => {
         if (typeof columnDefinition === 'function') {
-            // If data is empty, we can't execute the function.
-            // Return a placeholder, as the table body won't be rendered anyway.
-            if (this.data.length === 0) {
+            if (currentData.length === 0) {
                 return { displayLabel: '', cellRenderer: () => '' };
             }
-            return columnDefinition(this.data[0], 0);
+            return columnDefinition(currentData[0], 0);
         }
         return columnDefinition;
-    }
-    onHeaderClickCallback(columnDefinition) {
-        const rawColumnDefinition = this.getRawColumnDefinition(columnDefinition);
-        if (rawColumnDefinition.interactivity && rawColumnDefinition.interactivity.onHeaderClick) {
-            return rawColumnDefinition.interactivity.onHeaderClick;
-        }
-        else {
-            return undefined;
+    };
+    const getColumnDefinition = (columnDefinition, rowIndex) => {
+        if (!hasData) {
+            return { displayLabel: '', cellRenderer: () => '' };
         }
-    }
-    getClickableHeaderClassName(onHeaderClickCallback, colDef) {
-        const rawColumnDefinition = this.getRawColumnDefinition(colDef);
-        const clickableHeaderClassName = onHeaderClickCallback
-            ? rawColumnDefinition.interactivity.className || styles$2.clickableHeader
+        return columnDefinition instanceof Function ? columnDefinition(currentData[0], rowIndex) : columnDefinition;
+    };
+    const onHeaderClickCallback = (colDef) => {
+        var _a;
+        const rawColumnDefinition = getRawColumnDefinition(colDef);
+        return (_a = rawColumnDefinition.interactivity) === null || _a === void 0 ? void 0 : _a.onHeaderClick;
+    };
+    const getClickableHeaderClassName = (onHeaderClickCallback, colDef) => {
+        var _a;
+        const rawColumnDefinition = getRawColumnDefinition(colDef);
+        return onHeaderClickCallback
+            ? ((_a = rawColumnDefinition.interactivity) === null || _a === void 0 ? void 0 : _a.className) || styles$2.clickableHeader
             : '';
-        return clickableHeaderClassName;
-    }
-    getHeaderProps(columnDefinition) {
+    };
+    const getHeaderProps = (colDef) => {
         const headerProps = {};
-        if (this.state.activePlugins) {
-            this.state.activePlugins.forEach((plugin) => {
-                if (plugin.getHeaderProps) {
-                    Object.assign(headerProps, plugin.getHeaderProps(this.getRawColumnDefinition(columnDefinition)));
-                }
-            });
-        }
+        activePlugins.forEach((plugin) => {
+            if (plugin.getHeaderProps) {
+                Object.assign(headerProps, plugin.getHeaderProps(getRawColumnDefinition(colDef)));
+            }
+        });
         return headerProps;
-    }
-    getRowId(row, index) {
-        const { selectionProps } = this.props;
+    };
+    const getRowId = (row, index) => {
         if (selectionProps && selectionProps.rowIdKey) {
             return row[selectionProps.rowIdKey];
         }
         return index;
-    }
-    getRowProps(row) {
+    };
+    const getRowProps = (row) => {
         const rowProps = {};
         const clickHandlers = [];
-        this.state.activePlugins.forEach(plugin => {
+        activePlugins.forEach((plugin) => {
             if (plugin.getRowProps) {
                 const props = plugin.getRowProps(row);
-                if (plugin.id === 'selection') ;
                 if (props.className) {
                     rowProps.className = `${rowProps.className || ''} ${props.className}`.trim();
                 }
                 if (props.onClick) {
                     clickHandlers.push(props.onClick);
                 }
-                // Assign all other props except className and onClick
-                const { className, onClick } = props, rest = __rest(props, ["className", "onClick"]);
+                const rest = __rest(props, []);
                 Object.assign(rowProps, rest);
             }
         });
@@ -701,43 +970,30 @@ class ResponsiveTable extends React.Component {
             };
         }
         return rowProps;
-    }
-    renderCell(content, row, colDef) {
+    };
+    const renderCell = (content, row, colDef) => {
         let processedContent = content;
-        this.state.activePlugins.forEach((plugin) => {
+        activePlugins.forEach((plugin) => {
             if (plugin.renderCell) {
                 processedContent = plugin.renderCell(processedContent, row, colDef);
             }
         });
         return processedContent;
-    }
-    get rowClickFunction() {
-        if (this.props.onRowClick) {
-            return this.props.onRowClick;
-        }
-        else {
-            return () => { };
-        }
-    }
-    get tableFooter() {
-        if (!this.props.footerRows || this.props.footerRows.length === 0) {
-            return null;
-        }
-        return (React.createElement("tfoot", null, this.props.footerRows.map((row, rowIndex) => (React.createElement("tr", { key: rowIndex }, row.columns.map((col, colIndex) => (React.createElement("td", { key: colIndex, colSpan: col.colSpan, className: `${styles$2.footerCell} ${col.className || ''} ${col.onCellClick ? styles$2.clickableFooterCell : ''}`, onClick: col.onCellClick }, col.cellRenderer()))))))));
-    }
-    get mobileFooter() {
-        if (!this.props.footerRows || this.props.footerRows.length === 0) {
+    };
+    const rowClickFunction = onRowClick || (() => { });
+    const mobileFooter = React.useMemo(() => {
+        if (!footerRows || footerRows.length === 0) {
             return null;
         }
         return (React.createElement("div", { className: styles$2.footerCard },
-            React.createElement("div", { className: styles$2['footer-card-body'] }, this.props.footerRows.map((row, rowIndex) => {
+            React.createElement("div", { className: styles$2['footer-card-body'] }, footerRows.map((row, rowIndex) => {
                 let currentColumnIndex = 0;
                 return (React.createElement("div", { key: rowIndex }, row.columns.map((col, colIndex) => {
                     let label = col.displayLabel;
                     if (!label && col.colSpan === 1) {
-                        const header = this.props.columnDefinitions[currentColumnIndex];
+                        const header = columnDefinitions[currentColumnIndex];
                         if (header) {
-                            label = this.getRawColumnDefinition(header).displayLabel;
+                            label = getRawColumnDefinition(header).displayLabel;
                         }
                     }
                     currentColumnIndex += col.colSpan;
@@ -746,134 +1002,46 @@ class ResponsiveTable extends React.Component {
                         React.createElement("span", { className: styles$2['card-value'] }, col.cellRenderer())));
                 })));
             }))));
-    }
-    get skeletonView() {
-        const skeletonRowCount = 5; // Or make this configurable
-        const columnCount = this.props.columnDefinitions.length;
-        if (this.state.isMobile) {
-            return (React.createElement("div", null, [...Array(skeletonRowCount)].map((_, i) => (React.createElement("div", { key: i, className: styles$2.skeletonCard }, [...Array(columnCount)].map((_, j) => (React.createElement("div", { key: j, className: `${styles$2.skeleton} ${styles$2.skeletonText}`, style: { marginBottom: '0.5rem' } }))))))));
-        }
-        return (React.createElement("table", { className: styles$2.responsiveTable },
-            React.createElement("thead", null,
-                React.createElement("tr", null, [...Array(columnCount)].map((_, i) => (React.createElement("th", { key: i },
-                    React.createElement("div", { className: `${styles$2.skeleton} ${styles$2.skeletonText}` })))))),
-            React.createElement("tbody", null, [...Array(skeletonRowCount)].map((_, i) => (React.createElement("tr", { key: i }, [...Array(columnCount)].map((_, j) => (React.createElement("td", { key: j },
-                React.createElement("div", { className: `${styles$2.skeleton} ${styles$2.skeletonText}` }))))))))));
-    }
-    get mobileView() {
-        const isClickable = this.props.onRowClick || this.props.selectionProps;
-        return (React.createElement("div", null,
-            this.data.map((row, rowIndex) => {
-                var _a;
-                const rowProps = this.getRowProps(row);
-                const pluginOnClick = rowProps.onClick;
-                return (React.createElement("div", { key: this.getRowId(row, rowIndex), className: `${styles$2.card} ${isClickable ? styles$2.clickableRow : ''} ${((_a = this.props.animationProps) === null || _a === void 0 ? void 0 : _a.animateOnLoad) ? styles$2.animatedRow : ''} ${rowProps.className || ''}`.trim(), style: { animationDelay: `${rowIndex * 0.05}s` }, "aria-selected": rowProps['aria-selected'], onClick: (e) => {
-                        if (pluginOnClick)
-                            pluginOnClick(e);
-                        this.rowClickFunction(row);
-                    } },
-                    React.createElement("div", { className: styles$2['card-header'] }, " "),
-                    React.createElement("div", { className: styles$2['card-body'] }, this.props.columnDefinitions.map((columnDefinition, colIndex) => {
-                        const colDef = this.getColumnDefinition(columnDefinition, rowIndex);
-                        const onHeaderClickCallback = this.onHeaderClickCallback(colDef);
-                        const clickableHeaderClassName = this.getClickableHeaderClassName(onHeaderClickCallback, colDef);
-                        return (React.createElement("div", { key: colIndex, className: styles$2['card-row'] },
-                            React.createElement("p", null,
-                                React.createElement("span", { className: `${styles$2['card-label']} ${clickableHeaderClassName}`, onClick: (e) => {
-                                        if (onHeaderClickCallback) {
-                                            e.stopPropagation();
-                                            onHeaderClickCallback(colDef.interactivity.id);
-                                        }
-                                    } }, colDef.displayLabel),
-                                React.createElement("span", { className: styles$2['card-value'] }, this.renderCell(colDef.cellRenderer(row), row, colDef)))));
-                    }))));
-            }),
-            this.mobileFooter));
-    }
-    get largeScreenView() {
-        const useFixedHeaders = this.props.maxHeight ? true : false;
-        const isClickable = this.props.onRowClick || this.props.selectionProps;
-        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: headerClassName },
-                    React.createElement("tr", null, this.props.columnDefinitions.map((columnDefinition, colIndex) => {
-                        const onHeaderClickCallback = this.onHeaderClickCallback(columnDefinition);
-                        const clickableHeaderClassName = this.getClickableHeaderClassName(onHeaderClickCallback, columnDefinition);
-                        const headerProps = this.getHeaderProps(columnDefinition);
-                        // Combine class names: existing clickable, and plugin-provided (mapped to CSS Modules)
-                        const combinedClassName = `${clickableHeaderClassName} ${headerProps.className ? styles$2[headerProps.className] : ''}`.trim();
-                        // Remove className from headerProps to avoid duplication
-                        // eslint-disable-next-line @typescript-eslint/no-unused-vars
-                        const { className } = headerProps, restHeaderProps = __rest(headerProps, ["className"]);
-                        return (React.createElement("th", Object.assign({ key: colIndex, className: combinedClassName }, restHeaderProps),
-                            React.createElement("div", { className: styles$2.headerInnerWrapper },
-                                React.createElement("div", { className: styles$2.headerContent }, this.getColumnDefinition(columnDefinition, 0).displayLabel),
-                                React.createElement("span", { className: styles$2.sortIcon }))));
-                    }))),
-                React.createElement("tbody", null, this.data.map((row, rowIndex) => {
-                    var _a;
-                    const rowProps = this.getRowProps(row);
-                    const pluginOnClick = rowProps.onClick;
-                    return (React.createElement("tr", { key: this.getRowId(row, rowIndex), className: `${isClickable ? styles$2.clickableRow : ''} ${((_a = this.props.animationProps) === null || _a === void 0 ? void 0 : _a.animateOnLoad) ? styles$2.animatedRow : ''} ${rowProps.className || ''}`.trim(), style: { animationDelay: `${rowIndex * 0.05}s` }, "aria-selected": rowProps['aria-selected'], onClick: (e) => {
-                            if (pluginOnClick) {
-                                pluginOnClick(e);
-                            }
-                            this.rowClickFunction(row);
-                        } }, this.props.columnDefinitions.map((columnDefinition, colIndex) => {
-                        const colDef = this.getColumnDefinition(columnDefinition, rowIndex);
-                        const cellContent = colDef.cellRenderer(row);
-                        return (React.createElement("td", { key: colIndex }, this.renderCell(cellContent, row, colDef)));
-                    })));
-                })),
-                this.tableFooter),
-            this.renderPluginFooters()));
-    }
-    renderPluginHeaders() {
-        if (!this.state.activePlugins) {
+    }, [footerRows, columnDefinitions]);
+    const skeletonView = (React.createElement(SkeletonView, { isMobile: isMobile, columnDefinitions: visibleColumns }));
+    const renderPluginHeaders = React.useCallback(() => {
+        if (!activePlugins) {
             return null;
         }
-        return this.state.activePlugins.map((plugin) => {
+        return activePlugins.map((plugin) => {
             if (plugin.renderHeader) {
-                // For sort plugin, only render header in mobile view
-                if (plugin.id === 'sort' && !this.state.isMobile) {
+                if (plugin.id === 'sort' && !isMobile) {
                     return null;
                 }
                 return React.createElement("div", { key: plugin.id }, plugin.renderHeader());
             }
             return null;
         });
-    }
-    renderPluginFooters() {
-        if (!this.props.plugins) {
+    }, [activePlugins, isMobile]);
+    const renderPluginFooters = React.useCallback(() => {
+        if (!plugins) {
             return null;
         }
-        return this.props.plugins.map((plugin) => {
+        return plugins.map((plugin) => {
             if (plugin.renderFooter) {
                 return React.createElement("div", { key: plugin.id + '-footer' }, plugin.renderFooter());
             }
             return null;
         });
+    }, [plugins]);
+    const mobileView = (React.createElement(MobileView, { currentData: currentData, columnDefinitions: visibleColumns, onRowClick: onRowClick, selectionProps: selectionProps, animationProps: animationProps, getRowProps: getRowProps, getRowId: getRowId, getColumnDefinition: getColumnDefinition, onHeaderClickCallback: onHeaderClickCallback, getClickableHeaderClassName: getClickableHeaderClassName, renderCell: renderCell, rowClickFunction: rowClickFunction, mobileFooter: mobileFooter }));
+    const largeScreenView = (React.createElement(DesktopView, { columnDefinitions: visibleColumns, originalColumnDefinitions: columnDefinitions, currentData: currentData, maxHeight: maxHeight, isHeaderSticky: isHeaderSticky, tableContainerRef: tableContainerRef, headerRef: headerRef, getRowProps: getRowProps, getHeaderProps: getHeaderProps, onHeaderClickCallback: onHeaderClickCallback, getClickableHeaderClassName: getClickableHeaderClassName, getRawColumnDefinition: getRawColumnDefinition, getColumnDefinition: getColumnDefinition, renderCell: renderCell, rowClickFunction: rowClickFunction, footerRows: footerRows, renderPluginFooters: renderPluginFooters, animationProps: animationProps, onRowClick: onRowClick, selectionProps: selectionProps }));
+    if (infiniteScrollProps) {
+        return React.createElement(InfiniteTable, Object.assign({}, props));
     }
-    render() {
-        var _a;
-        if (this.props.infiniteScrollProps) {
-            return React.createElement(InfiniteTable, Object.assign({}, this.props));
-        }
-        if ((_a = this.props.animationProps) === null || _a === void 0 ? void 0 : _a.isLoading) {
-            return this.skeletonView;
-        }
-        return (React.createElement("div", null,
-            React.createElement("div", { style: { display: 'flex', justifyContent: 'flex-end' } }, this.renderPluginHeaders()),
-            !this.hasData && this.noDataComponent,
-            this.hasData && this.state.isMobile && this.mobileView,
-            this.hasData && !this.state.isMobile && this.largeScreenView));
+    if (animationProps === null || animationProps === void 0 ? void 0 : animationProps.isLoading) {
+        return skeletonView;
     }
+    return (React.createElement("div", null,
+        React.createElement("div", { style: { display: 'flex', justifyContent: 'flex-end' } }, renderPluginHeaders()),
+        !hasData && noDataComponentNode,
+        hasData && isMobile && mobileView,
+        hasData && !isMobile && largeScreenView));
 }
 
 class InfiniteScrollPlugin {
@@ -929,138 +1097,6 @@ class InfiniteScrollPlugin {
     }
 }
 
-// Type-safe sort comparer helpers
-const createSortComparers = () => ({
-    numeric: (key) => (a, b, direction) => {
-        const numA = parseFloat(String(a[key]));
-        const numB = parseFloat(String(b[key]));
-        const aIsNaN = isNaN(numA);
-        const bIsNaN = isNaN(numB);
-        if (aIsNaN && bIsNaN)
-            return 0;
-        if (aIsNaN)
-            return 1; // Put non-numbers at the end
-        if (bIsNaN)
-            return -1;
-        return direction === 'asc' ? numA - numB : numB - numA;
-    },
-    caseInsensitiveString: (key) => (a, b, direction) => {
-        var _a, _b;
-        const valA = String((_a = a[key]) !== null && _a !== void 0 ? _a : '').toLowerCase();
-        const valB = String((_b = b[key]) !== null && _b !== void 0 ? _b : '').toLowerCase();
-        if (valA < valB)
-            return direction === 'asc' ? -1 : 1;
-        if (valA > valB)
-            return direction === 'asc' ? 1 : -1;
-        return 0;
-    },
-    date: (key) => (a, b, direction) => {
-        const dateA = new Date(String(a[key])).getTime();
-        const dateB = new Date(String(b[key])).getTime();
-        const aIsNaN = isNaN(dateA);
-        const bIsNaN = isNaN(dateB);
-        if (aIsNaN && bIsNaN)
-            return 0;
-        if (aIsNaN)
-            return 1; // Put invalid dates at the end
-        if (bIsNaN)
-            return -1;
-        return direction === 'asc' ? dateA - dateB : dateB - dateA;
-    },
-});
-class SortPlugin {
-    constructor(options) {
-        var _a, _b;
-        this.id = 'sort';
-        this.comparers = createSortComparers();
-        this.onPluginInit = (api) => {
-            this.api = api;
-        };
-        this.processData = (data) => {
-            if (!this.sortColumn || !this.sortDirection) {
-                return data;
-            }
-            const columnDef = this.api.columnDefinitions.find((col) => (typeof col === 'object' && col.columnId === this.sortColumn));
-            if (!columnDef) {
-                return data;
-            }
-            const sortedData = [...data].sort((a, b) => {
-                if ('sortComparer' in columnDef && columnDef.sortComparer) {
-                    if (columnDef.sortComparer.length < 3) {
-                        console.warn(`The custom sortComparer for column '${this.sortColumn}' should accept all three parameters (a, b, direction) to ensure correct sorting behavior. You provided a function with ${columnDef.sortComparer.length} parameters.`);
-                    }
-                    return columnDef.sortComparer(a, b, this.sortDirection);
-                }
-                if ('getSortableValue' in columnDef && columnDef.getSortableValue) {
-                    const aValue = columnDef.getSortableValue(a);
-                    const bValue = columnDef.getSortableValue(b);
-                    if (aValue < bValue)
-                        return this.sortDirection === 'asc' ? -1 : 1;
-                    if (aValue > bValue)
-                        return this.sortDirection === 'asc' ? 1 : -1;
-                    return 0;
-                }
-                // Fallback to dataKey if it exists and no other sorter is provided
-                if ('dataKey' in columnDef && columnDef.dataKey) {
-                    const key = columnDef.dataKey;
-                    const aValue = a[key];
-                    const bValue = b[key];
-                    if (aValue < bValue)
-                        return this.sortDirection === 'asc' ? -1 : 1;
-                    if (aValue > bValue)
-                        return this.sortDirection === 'asc' ? 1 : -1;
-                    return 0;
-                }
-                return 0;
-            });
-            return sortedData;
-        };
-        this.getHeaderProps = (columnDef) => {
-            const { columnId } = columnDef;
-            const isSortable = ('sortComparer' in columnDef && !!columnDef.sortComparer) || ('getSortableValue' in columnDef && !!columnDef.getSortableValue);
-            // A column must have a columnId and a sort function to be sortable
-            if (!isSortable || !columnId) {
-                return {};
-            }
-            const onHeaderClick = (e) => {
-                const target = e.target;
-                console.log('SortPlugin: Header clicked. Target:', target);
-                // If the click is on an interactive element, don't sort
-                if (target.closest('input, button, a, [onclick]')) {
-                    console.log('SortPlugin: Interactive element clicked, ignoring sort.');
-                    return;
-                }
-                console.log('SortPlugin: Non-interactive element clicked, proceeding with sort.');
-                if (this.sortColumn === columnId) {
-                    if (this.sortDirection === 'desc') {
-                        this.sortColumn = null;
-                        this.sortDirection = null;
-                    }
-                    else {
-                        this.sortDirection = 'desc';
-                    }
-                }
-                else {
-                    this.sortColumn = columnId;
-                    this.sortDirection = 'asc';
-                }
-                this.api.forceUpdate();
-            };
-            let sortClassName = 'sortable';
-            if (this.sortColumn === columnId) {
-                sortClassName = `sorted-${this.sortDirection}`;
-            }
-            return {
-                onClick: onHeaderClick,
-                className: sortClassName,
-                'aria-sort': (this.sortColumn === columnId ? (this.sortDirection === 'asc' ? 'ascending' : 'descending') : 'none'),
-            };
-        };
-        this.sortColumn = (_a = options === null || options === void 0 ? void 0 : options.initialSortColumn) !== null && _a !== void 0 ? _a : null;
-        this.sortDirection = (_b = options === null || options === void 0 ? void 0 : options.initialSortDirection) !== null && _b !== void 0 ? _b : null;
-    }
-}
-
 exports.FilterPlugin = FilterPlugin;
 exports.InfiniteScrollPlugin = InfiniteScrollPlugin;
 exports.SelectionPlugin = SelectionPlugin;