jattac.libs.web.responsive-table 0.2.3 → 0.2.5

package/dist/index.js

@@ -31,8 +31,8 @@ function styleInject(css, ref) {
   }
 }
 
-var css_248z = "/* Using CSS variables for a more maintainable and themeable design */\r\n.ResponsiveTable-module_responsiveTable__4y-Od {\r\n  --table-border-color: #e0e0e0;\r\n  --table-header-bg: #f8f9fa;\r\n  --table-row-hover-bg: #e9ecef;\r\n  --table-row-stripe-bg: #f2f2f2;\r\n  --card-bg: #ffffff;\r\n  --card-border-color: #e0e0e0;\r\n  --card-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);\r\n  --text-color: #212529;\r\n  --text-color-muted: #6c757d;\r\n  --interactive-color: #0056b3;\r\n}\r\n\r\n/* Mobile Card View */\r\n.ResponsiveTable-module_card__b-U2v {\r\n  background-color: var(--card-bg);\r\n  border: 1px solid var(--card-border-color);\r\n  margin-bottom: 1rem;\r\n  border-radius: 8px;\r\n  overflow: hidden;\r\n  box-shadow: var(--card-shadow);\r\n  transition: box-shadow 0.2s ease-in-out;\r\n}\r\n\r\n.ResponsiveTable-module_card__b-U2v:hover {\r\n  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);\r\n}\r\n\r\n/* This is not used in the component, but keeping it styled in case it's added back */\r\n.ResponsiveTable-module_card-header__Ttk51 {\r\n  background-color: var(--table-header-bg);\r\n  padding: 0.75rem 1rem;\r\n  font-weight: 600; /* Bolder */\r\n  border-bottom: 1px solid var(--table-border-color);\r\n}\r\n\r\n.ResponsiveTable-module_card-body__XIy0h {\r\n  padding: 1rem;\r\n  font-size: 0.9rem;\r\n}\r\n\r\n.ResponsiveTable-module_card-body__XIy0h p {\r\n  margin: 0 0 0.75rem;\r\n  display: flex;\r\n  justify-content: space-between;\r\n}\r\n\r\n.ResponsiveTable-module_card-body__XIy0h p:last-child {\r\n  margin-bottom: 0;\r\n}\r\n\r\n.ResponsiveTable-module_card-label__v9L71 {\r\n  font-weight: 600;\r\n  color: var(--text-color);\r\n  margin-right: 0.5rem;\r\n}\r\n\r\n/* Desktop Table View */\r\n.ResponsiveTable-module_responsiveTable__4y-Od {\r\n  width: 100%;\r\n  border-collapse: collapse;\r\n  color: var(--text-color);\r\n}\r\n\r\n.ResponsiveTable-module_responsiveTable__4y-Od thead th {\r\n  background-color: var(--table-header-bg);\r\n  position: sticky;\r\n  top: 0;\r\n  z-index: 1;\r\n  font-weight: 600;\r\n  text-align: left;\r\n  padding: 1rem;\r\n  border-bottom: 2px solid var(--table-border-color);\r\n}\r\n\r\n.ResponsiveTable-module_responsiveTable__4y-Od td {\r\n  padding: 1rem;\r\n  border-bottom: 1px solid var(--table-border-color);\r\n  text-align: left;\r\n}\r\n\r\n.ResponsiveTable-module_responsiveTable__4y-Od tr {\r\n  background-color: var(--card-bg);\r\n  transition: background-color 0.2s ease-in-out;\r\n}\r\n\r\n/* Subtle striping for better readability */\r\n.ResponsiveTable-module_responsiveTable__4y-Od tr:nth-child(even) {\r\n  background-color: var(--table-row-stripe-bg);\r\n}\r\n\r\n/* Modern hover effect */\r\n.ResponsiveTable-module_responsiveTable__4y-Od tr:hover {\r\n  background-color: var(--table-row-hover-bg);\r\n}\r\n\r\n/* Clickable Header Style */\r\n.ResponsiveTable-module_clickableHeader__xHQhF {\r\n  cursor: pointer;\r\n  color: var(--interactive-color);\r\n}\r\n\r\n.ResponsiveTable-module_clickableHeader__xHQhF:hover {\r\n  text-decoration: underline;\r\n}\r\n\r\n.ResponsiveTable-module_responsiveTable__4y-Od tfoot {\r\n  background-color: var(--table-header-bg);\r\n  border-top: 2px solid var(--table-border-color);\r\n  font-weight: 600;\r\n}\r\n\r\n.ResponsiveTable-module_footerCell__8H-uG {\r\n  padding: 1rem;\r\n  text-align: right;\r\n  font-weight: 600;\r\n}\r\n\r\n.ResponsiveTable-module_clickableFooterCell__WB9Ss {\r\n  cursor: pointer;\r\n  color: var(--interactive-color);\r\n}\r\n\r\n.ResponsiveTable-module_clickableFooterCell__WB9Ss:hover {\r\n  text-decoration: underline;\r\n}\r\n\r\n.ResponsiveTable-module_footerCard__-NE2M {\r\n  background-color: var(--table-header-bg);\r\n  border: 1px solid var(--card-border-color);\r\n  border-top: 2px solid var(--table-border-color);\r\n  margin-bottom: 1rem;\r\n  border-radius: 8px;\r\n  overflow: hidden;\r\n  box-shadow: none;\r\n}\r\n\r\n.ResponsiveTable-module_footer-card-body__CtBMv {\r\n  padding: 1rem;\r\n  font-size: 0.9rem;\r\n}\r\n\r\n.ResponsiveTable-module_footer-card-row__Vv6Ur {\r\n  margin: 0 0 0.75rem;\r\n  display: flex;\r\n  justify-content: space-between;\r\n  font-weight: 600;\r\n}\r\n\r\n/* No Data State */\r\n\r\n/* Staggered Entrance Animation */\r\n.ResponsiveTable-module_animatedRow__SFjrJ {\r\n  animation: ResponsiveTable-module_fadeInUp__jMCS7 0.5s ease-out forwards;\r\n  opacity: 0;\r\n}\r\n\r\n@keyframes ResponsiveTable-module_fadeInUp__jMCS7 {\r\n  from {\r\n    opacity: 0;\r\n    transform: translateY(20px);\r\n  }\r\n  to {\r\n    opacity: 1;\r\n    transform: translateY(0);\r\n  }\r\n}\r\n\r\n/* Skeleton Loader */\r\n.ResponsiveTable-module_skeleton__XxsXW {\r\n  background-color: #e0e0e0;\r\n  border-radius: 4px;\r\n  position: relative;\r\n  overflow: hidden;\r\n}\r\n\r\n.ResponsiveTable-module_skeleton__XxsXW::after {\r\n  content: '';\r\n  position: absolute;\r\n  top: 0;\r\n  left: -150%;\r\n  width: 150%;\r\n  height: 100%;\r\n  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.4), transparent);\r\n  animation: ResponsiveTable-module_shimmer__H8PhC 1.5s infinite;\r\n}\r\n\r\n.ResponsiveTable-module_skeletonText__T-Lgq {\r\n  height: 1.2em;\r\n  width: 100%;\r\n}\r\n\r\n.ResponsiveTable-module_skeletonCard__AYVwL {\r\n  background-color: var(--card-bg);\r\n  border: 1px solid var(--card-border-color);\r\n  margin-bottom: 1rem;\r\n  border-radius: 8px;\r\n  overflow: hidden;\r\n  padding: 1rem;\r\n}\r\n\r\n@keyframes ResponsiveTable-module_shimmer__H8PhC {\r\n  0% {\r\n    transform: translateX(0);\r\n  }\r\n  100% {\r\n    transform: translateX(100%);\r\n  }\r\n}\r\n.ResponsiveTable-module_noDataWrapper__Rj-k3 {\r\n  color: var(--text-color-muted); /* Softer color */\r\n  display: flex;\r\n  justify-content: center;\r\n  align-items: center;\r\n  height: 100%;\r\n  gap: 10px;\r\n  padding: 40px;\r\n  background-color: var(--table-header-bg);\r\n  border: 1px dashed var(--table-border-color);\r\n  border-radius: 8px;\r\n}\r\n\r\n.ResponsiveTable-module_noData__IpwNq {\r\n  text-align: center;\r\n  font-weight: 500; /* Less aggressive than bold */\r\n  font-size: 1rem;\r\n}\r\n\r\n.ResponsiveTable-module_row-exit__EVX6T {\r\n  opacity: 0;\r\n  transform: scaleY(0);\r\n  transition: transform 0.3s ease-out, opacity 0.3s ease-out;\r\n}\r\n\r\n.ResponsiveTable-module_row-enter__YKgI4 {\r\n  opacity: 0;\r\n  transform: translateY(20px);\r\n  transition: transform 0.5s ease-out, opacity 0.5s ease-out;\r\n}\r\n\r\n.ResponsiveTable-module_row-flash__a4NOm {\r\n  animation: ResponsiveTable-module_flash__nxeAX 0.5s ease-out;\r\n}\r\n\r\n@keyframes ResponsiveTable-module_flash__nxeAX {\r\n  0% {\r\n    background-color: var(--table-row-hover-bg);\r\n  }\r\n  100% {\r\n    background-color: transparent;\r\n  }\r\n}\r\n\r\n.ResponsiveTable-module_stickyHeader__-jjN- {\r\n  position: sticky;\r\n  top: 0;\r\n  z-index: 1;\r\n  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);\r\n}\r\n";
-var styles = {"responsiveTable":"ResponsiveTable-module_responsiveTable__4y-Od","card":"ResponsiveTable-module_card__b-U2v","card-header":"ResponsiveTable-module_card-header__Ttk51","card-body":"ResponsiveTable-module_card-body__XIy0h","card-label":"ResponsiveTable-module_card-label__v9L71","clickableHeader":"ResponsiveTable-module_clickableHeader__xHQhF","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","skeleton":"ResponsiveTable-module_skeleton__XxsXW","skeletonText":"ResponsiveTable-module_skeletonText__T-Lgq","skeletonCard":"ResponsiveTable-module_skeletonCard__AYVwL","noDataWrapper":"ResponsiveTable-module_noDataWrapper__Rj-k3","noData":"ResponsiveTable-module_noData__IpwNq","stickyHeader":"ResponsiveTable-module_stickyHeader__-jjN-"};
+var css_248z = "/* Using CSS variables for a more maintainable and themeable design */\r\n.ResponsiveTable-module_responsiveTable__4y-Od {\r\n  --table-border-color: #e0e0e0;\r\n  --table-header-bg: #f8f9fa;\r\n  --table-row-hover-bg: #e9ecef;\r\n  --table-row-stripe-bg: #f2f2f2;\r\n  --card-bg: #ffffff;\r\n  --card-border-color: #e0e0e0;\r\n  --card-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);\r\n  --text-color: #212529;\r\n  --text-color-muted: #6c757d;\r\n  --interactive-color: #0056b3;\r\n}\r\n\r\n/* Mobile Card View */\r\n.ResponsiveTable-module_card__b-U2v {\r\n  background-color: var(--card-bg);\r\n  border: 1px solid var(--card-border-color);\r\n  margin-bottom: 1rem;\r\n  border-radius: 8px;\r\n  overflow: hidden;\r\n  box-shadow: var(--card-shadow);\r\n  transition: box-shadow 0.2s ease-in-out;\r\n}\r\n\r\n.ResponsiveTable-module_card__b-U2v:hover {\r\n  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);\r\n}\r\n\r\n/* This is not used in the component, but keeping it styled in case it's added back */\r\n.ResponsiveTable-module_card-header__Ttk51 {\r\n  background-color: var(--table-header-bg);\r\n  padding: 0.75rem 1rem;\r\n  font-weight: 600; /* Bolder */\r\n  border-bottom: 1px solid var(--table-border-color);\r\n}\r\n\r\n.ResponsiveTable-module_card-body__XIy0h {\r\n  padding: 1rem;\r\n  font-size: 0.9rem;\r\n}\r\n\r\n.ResponsiveTable-module_card-body__XIy0h p {\r\n  margin: 0 0 0.75rem;\r\n  display: flex;\r\n  justify-content: space-between;\r\n}\r\n\r\n.ResponsiveTable-module_card-body__XIy0h p:last-child {\r\n  margin-bottom: 0;\r\n}\r\n\r\n.ResponsiveTable-module_card-label__v9L71 {\r\n  font-weight: 600;\r\n  color: var(--text-color);\r\n  margin-right: 0.5rem;\r\n}\r\n\r\n/* Desktop Table View */\r\n.ResponsiveTable-module_responsiveTable__4y-Od {\r\n  width: 100%;\r\n  border-collapse: collapse;\r\n  color: var(--text-color);\r\n}\r\n\r\n.ResponsiveTable-module_responsiveTable__4y-Od thead th {\r\n  background-color: var(--table-header-bg);\r\n  position: sticky;\r\n  top: 0;\r\n  z-index: 1;\r\n  font-weight: 600;\r\n  text-align: left;\r\n  padding: 1rem;\r\n  border-bottom: 2px solid var(--table-border-color);\r\n}\r\n\r\n.ResponsiveTable-module_responsiveTable__4y-Od td {\r\n  padding: 1rem;\r\n  border-bottom: 1px solid var(--table-border-color);\r\n  text-align: left;\r\n}\r\n\r\n.ResponsiveTable-module_responsiveTable__4y-Od tr {\r\n  background-color: var(--card-bg);\r\n  transition: background-color 0.2s ease-in-out;\r\n}\r\n\r\n/* Subtle striping for better readability */\r\n.ResponsiveTable-module_responsiveTable__4y-Od tr:nth-child(even) {\r\n  background-color: var(--table-row-stripe-bg);\r\n}\r\n\r\n/* Modern hover effect */\r\n.ResponsiveTable-module_responsiveTable__4y-Od tr:hover {\r\n  background-color: var(--table-row-hover-bg);\r\n}\r\n\r\n/* Clickable Header Style */\r\n.ResponsiveTable-module_clickableHeader__xHQhF {\r\n  cursor: pointer;\r\n  color: var(--interactive-color);\r\n}\r\n\r\n.ResponsiveTable-module_clickableHeader__xHQhF:hover {\r\n  text-decoration: underline;\r\n}\r\n\r\n/* Sortable Header Styles */\r\n.ResponsiveTable-module_responsiveTable__4y-Od th.ResponsiveTable-module_sortable__yvA60 {\r\n  cursor: pointer;\r\n  position: relative;\r\n  padding-right: 2rem; /* Space for the icon */\r\n}\r\n\r\n.ResponsiveTable-module_responsiveTable__4y-Od th .ResponsiveTable-module_sortIcon__A9WtD {\r\n  position: absolute;\r\n  right: 0.5rem;\r\n  top: 50%;\r\n  transform: translateY(-50%);\r\n  width: 1rem;\r\n  height: 1rem;\r\n  opacity: 0.4;\r\n  transition: opacity 0.2s ease-in-out, transform 0.2s ease-in-out;\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/* Default unsorted icon (up and down arrows) */\r\n.ResponsiveTable-module_responsiveTable__4y-Od th.ResponsiveTable-module_sortable__yvA60 .ResponsiveTable-module_sortIcon__A9WtD::before,\r\n.ResponsiveTable-module_responsiveTable__4y-Od th.ResponsiveTable-module_sortable__yvA60 .ResponsiveTable-module_sortIcon__A9WtD::after {\r\n  content: '';\r\n  position: absolute;\r\n  display: block;\r\n  width: 0;\r\n  height: 0;\r\n  border-left: 0.4em solid transparent;\r\n  border-right: 0.4em solid transparent;\r\n}\r\n\r\n.ResponsiveTable-module_responsiveTable__4y-Od th.ResponsiveTable-module_sortable__yvA60 .ResponsiveTable-module_sortIcon__A9WtD::before {\r\n  border-bottom: 0.4em solid var(--text-color);\r\n  top: 0.1em;\r\n}\r\n\r\n.ResponsiveTable-module_responsiveTable__4y-Od th.ResponsiveTable-module_sortable__yvA60 .ResponsiveTable-module_sortIcon__A9WtD::after {\r\n  border-top: 0.4em solid var(--text-color);\r\n  bottom: 0.1em;\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.ResponsiveTable-module_responsiveTable__4y-Od th.ResponsiveTable-module_sorted-desc__7WCFK .ResponsiveTable-module_sortIcon__A9WtD {\r\n  opacity: 1;\r\n}\r\n\r\n.ResponsiveTable-module_responsiveTable__4y-Od th.ResponsiveTable-module_sorted-asc__jzOIa .ResponsiveTable-module_sortIcon__A9WtD::before {\r\n  border-bottom-color: var(--interactive-color);\r\n}\r\n\r\n.ResponsiveTable-module_responsiveTable__4y-Od th.ResponsiveTable-module_sorted-asc__jzOIa .ResponsiveTable-module_sortIcon__A9WtD::after {\r\n  opacity: 0.4;\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::after {\r\n  border-top-color: var(--interactive-color);\r\n}\r\n\r\n.ResponsiveTable-module_responsiveTable__4y-Od th.ResponsiveTable-module_sorted-desc__7WCFK .ResponsiveTable-module_sortIcon__A9WtD::before {\r\n  opacity: 0.4;\r\n}\r\n\r\n\r\n.ResponsiveTable-module_responsiveTable__4y-Od tfoot {\r\n  background-color: var(--table-header-bg);\r\n  border-top: 2px solid var(--table-border-color);\r\n  font-weight: 600;\r\n}\r\n\r\n.ResponsiveTable-module_footerCell__8H-uG {\r\n  padding: 1rem;\r\n  text-align: right;\r\n  font-weight: 600;\r\n}\r\n\r\n.ResponsiveTable-module_clickableFooterCell__WB9Ss {\r\n  cursor: pointer;\r\n  color: var(--interactive-color);\r\n}\r\n\r\n.ResponsiveTable-module_clickableFooterCell__WB9Ss:hover {\r\n  text-decoration: underline;\r\n}\r\n\r\n.ResponsiveTable-module_footerCard__-NE2M {\r\n  background-color: var(--table-header-bg);\r\n  border: 1px solid var(--card-border-color);\r\n  border-top: 2px solid var(--table-border-color);\r\n  margin-bottom: 1rem;\r\n  border-radius: 8px;\r\n  overflow: hidden;\r\n  box-shadow: none;\r\n}\r\n\r\n.ResponsiveTable-module_footer-card-body__CtBMv {\r\n  padding: 1rem;\r\n  font-size: 0.9rem;\r\n}\r\n\r\n.ResponsiveTable-module_footer-card-row__Vv6Ur {\r\n  margin: 0 0 0.75rem;\r\n  display: flex;\r\n  justify-content: space-between;\r\n  font-weight: 600;\r\n}\r\n\r\n/* No Data State */\r\n\r\n/* Staggered Entrance Animation */\r\n.ResponsiveTable-module_animatedRow__SFjrJ {\r\n  animation: ResponsiveTable-module_fadeInUp__jMCS7 0.5s ease-out forwards;\r\n  opacity: 0;\r\n}\r\n\r\n@keyframes ResponsiveTable-module_fadeInUp__jMCS7 {\r\n  from {\r\n    opacity: 0;\r\n    transform: translateY(20px);\r\n  }\r\n  to {\r\n    opacity: 1;\r\n    transform: translateY(0);\r\n  }\r\n}\r\n\r\n/* Skeleton Loader */\r\n.ResponsiveTable-module_skeleton__XxsXW {\r\n  background-color: #e0e0e0;\r\n  border-radius: 4px;\r\n  position: relative;\r\n  overflow: hidden;\r\n}\r\n\r\n.ResponsiveTable-module_skeleton__XxsXW::after {\r\n  content: '';\r\n  position: absolute;\r\n  top: 0;\r\n  left: -150%;\r\n  width: 150%;\r\n  height: 100%;\r\n  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.4), transparent);\r\n  animation: ResponsiveTable-module_shimmer__H8PhC 1.5s infinite;\r\n}\r\n\r\n.ResponsiveTable-module_skeletonText__T-Lgq {\r\n  height: 1.2em;\r\n  width: 100%;\r\n}\r\n\r\n.ResponsiveTable-module_skeletonCard__AYVwL {\r\n  background-color: var(--card-bg);\r\n  border: 1px solid var(--card-border-color);\r\n  margin-bottom: 1rem;\r\n  border-radius: 8px;\r\n  overflow: hidden;\r\n  padding: 1rem;\r\n}\r\n\r\n@keyframes ResponsiveTable-module_shimmer__H8PhC {\r\n  0% {\r\n    transform: translateX(0);\r\n  }\r\n  100% {\r\n    transform: translateX(100%);\r\n  }\r\n}\r\n.ResponsiveTable-module_noDataWrapper__Rj-k3 {\r\n  color: var(--text-color-muted); /* Softer color */\r\n  display: flex;\r\n  justify-content: center;\r\n  align-items: center;\r\n  height: 100%;\r\n  gap: 10px;\r\n  padding: 40px;\r\n  background-color: var(--table-header-bg);\r\n  border: 1px dashed var(--table-border-color);\r\n  border-radius: 8px;\r\n}\r\n\r\n.ResponsiveTable-module_noData__IpwNq {\r\n  text-align: center;\r\n  font-weight: 500; /* Less aggressive than bold */\r\n  font-size: 1rem;\r\n}\r\n\r\n.ResponsiveTable-module_row-exit__EVX6T {\r\n  opacity: 0;\r\n  transform: scaleY(0);\r\n  transition: transform 0.3s ease-out, opacity 0.3s ease-out;\r\n}\r\n\r\n.ResponsiveTable-module_row-enter__YKgI4 {\r\n  opacity: 0;\r\n  transform: translateY(20px);\r\n  transition: transform 0.5s ease-out, opacity 0.5s ease-out;\r\n}\r\n\r\n.ResponsiveTable-module_row-flash__a4NOm {\r\n  animation: ResponsiveTable-module_flash__nxeAX 0.5s ease-out;\r\n}\r\n\r\n@keyframes ResponsiveTable-module_flash__nxeAX {\r\n  0% {\r\n    background-color: var(--table-row-hover-bg);\r\n  }\r\n  100% {\r\n    background-color: transparent;\r\n  }\r\n}\r\n\r\n.ResponsiveTable-module_stickyHeader__-jjN- {\r\n  position: sticky;\r\n  top: 0;\r\n  z-index: 1;\r\n  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);\r\n}\r\n";
+var styles = {"responsiveTable":"ResponsiveTable-module_responsiveTable__4y-Od","card":"ResponsiveTable-module_card__b-U2v","card-header":"ResponsiveTable-module_card-header__Ttk51","card-body":"ResponsiveTable-module_card-body__XIy0h","card-label":"ResponsiveTable-module_card-label__v9L71","clickableHeader":"ResponsiveTable-module_clickableHeader__xHQhF","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","skeleton":"ResponsiveTable-module_skeleton__XxsXW","skeletonText":"ResponsiveTable-module_skeletonText__T-Lgq","skeletonCard":"ResponsiveTable-module_skeletonCard__AYVwL","noDataWrapper":"ResponsiveTable-module_noDataWrapper__Rj-k3","noData":"ResponsiveTable-module_noData__IpwNq","stickyHeader":"ResponsiveTable-module_stickyHeader__-jjN-"};
 styleInject(css_248z);
 
 class FilterPlugin {
@@ -1126,6 +1126,17 @@ class ResponsiveTable extends React.Component {
             : '';
         return clickableHeaderClassName;
     }
+    getHeaderProps(columnDefinition) {
+        let headerProps = {};
+        if (this.props.plugins) {
+            this.props.plugins.forEach((plugin) => {
+                if (plugin.getHeaderProps) {
+                    Object.assign(headerProps, plugin.getHeaderProps(this.getRawColumnDefinition(columnDefinition)));
+                }
+            });
+        }
+        return headerProps;
+    }
     get rowClickFunction() {
         if (this.props.onRowClick) {
             return this.props.onRowClick;
@@ -1225,9 +1236,10 @@ class ResponsiveTable extends React.Component {
                     React.createElement("tr", null, this.props.columnDefinitions.map((columnDefinition, colIndex) => {
                         const onHeaderClickCallback = this.onHeaderClickCallback(columnDefinition);
                         const clickableHeaderClassName = this.getClickableHeaderClassName(onHeaderClickCallback, columnDefinition);
-                        return (React.createElement("th", { key: colIndex, className: `${clickableHeaderClassName}`, onClick: onHeaderClickCallback
-                                ? () => onHeaderClickCallback(this.getColumnDefinition(columnDefinition, 0).interactivity.id)
-                                : undefined }, this.getColumnDefinition(columnDefinition, 0).displayLabel));
+                        const headerProps = this.getHeaderProps(columnDefinition);
+                        return (React.createElement("th", Object.assign({ key: colIndex, className: `${clickableHeaderClassName}` }, headerProps),
+                            this.getColumnDefinition(columnDefinition, 0).displayLabel,
+                            React.createElement("span", { className: styles.sortIcon })));
                     }))),
                 React.createElement("tbody", null, ((_a = this.props.infiniteScrollProps) === null || _a === void 0 ? void 0 : _a.enableInfiniteScroll) ? (React.createElement(FixedSizeList, { height: fixedHeadersStyle.maxHeight ? (typeof fixedHeadersStyle.maxHeight === 'string' ? parseFloat(fixedHeadersStyle.maxHeight) : fixedHeadersStyle.maxHeight) : 500, itemCount: this.data.length, itemSize: 50, width: '100%', outerRef: this.tableContainerRef }, Row)) : (this.data.map((row, rowIndex) => {
                     var _a;
@@ -1243,6 +1255,10 @@ class ResponsiveTable extends React.Component {
         }
         return this.props.plugins.map((plugin) => {
             if (plugin.renderHeader) {
+                // For sort plugin, only render header in mobile view
+                if (plugin.id === 'sort' && !this.state.isMobile) {
+                    return null;
+                }
                 return React.createElement("div", { key: plugin.id }, plugin.renderHeader());
             }
             return null;
@@ -1272,7 +1288,104 @@ class ResponsiveTable extends React.Component {
     }
 }
 
+// Type-safe sort comparer helpers
+const createSortComparers = () => ({
+    numeric: (key) => (a, b, direction) => {
+        const valA = a[key];
+        const valB = b[key];
+        return direction === 'asc' ? valA - valB : valB - valA;
+    },
+    caseInsensitiveString: (key) => (a, b, direction) => {
+        const valA = a[key].toLowerCase();
+        const valB = b[key].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(a[key]).getTime();
+        const dateB = new Date(b[key]).getTime();
+        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) => col.dataKey === this.sortColumn);
+            if (!columnDef) {
+                return data;
+            }
+            const sortedData = [...data].sort((a, b) => {
+                if (columnDef.sortComparer) {
+                    return columnDef.sortComparer(a, b, this.sortDirection);
+                }
+                let aValue, bValue;
+                if (columnDef.getSortableValue) {
+                    aValue = columnDef.getSortableValue(a);
+                    bValue = columnDef.getSortableValue(b);
+                }
+                else {
+                    aValue = a[this.sortColumn];
+                    bValue = b[this.sortColumn];
+                }
+                if (aValue < bValue)
+                    return this.sortDirection === 'asc' ? -1 : 1;
+                if (aValue > bValue)
+                    return this.sortDirection === 'asc' ? 1 : -1;
+                return 0;
+            });
+            return sortedData;
+        };
+        this.getHeaderProps = (columnDef) => {
+            const { dataKey, sortComparer, getSortableValue } = columnDef;
+            const isSortable = !!(sortComparer || getSortableValue);
+            if (!isSortable || !dataKey) {
+                return {};
+            }
+            const onHeaderClick = () => {
+                if (this.sortColumn === dataKey) {
+                    if (this.sortDirection === 'desc') {
+                        this.sortColumn = null;
+                        this.sortDirection = null;
+                    }
+                    else {
+                        this.sortDirection = 'desc';
+                    }
+                }
+                else {
+                    this.sortColumn = dataKey;
+                    this.sortDirection = 'asc';
+                }
+                this.api.forceUpdate();
+            };
+            let sortClassName = 'sortable';
+            if (this.sortColumn === dataKey) {
+                sortClassName = `sorted-${this.sortDirection}`;
+            }
+            return {
+                onClick: onHeaderClick,
+                className: sortClassName,
+                'aria-sort': this.sortColumn === dataKey ? (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.SortPlugin = SortPlugin;
 exports.default = ResponsiveTable;
 //# sourceMappingURL=index.js.map