jattac.libs.web.responsive-table 0.2.2 → 0.2.4

package/dist/Data/IResponsiveTableColumnDefinition.d.ts

@@ -1,11 +1,15 @@
 import { ReactNode } from 'react';
+export type SortDirection = 'asc' | 'desc';
 export default interface IResponsiveTableColumnDefinition<TData> {
     displayLabel: ReactNode;
     cellRenderer: (data: TData) => ReactNode;
+    dataKey?: string;
     interactivity?: {
         id: string;
         onHeaderClick?: (id: string) => void;
         className?: string;
     };
     getFilterableValue?: (data: TData) => string | number;
+    getSortableValue?: (row: TData) => any;
+    sortComparer?: (a: TData, b: TData, direction: SortDirection) => number;
 }

package/dist/Plugins/SortPlugin.d.ts

@@ -0,0 +1,29 @@
+import { IResponsiveTablePlugin, IPluginAPI } from './IResponsiveTablePlugin';
+import IResponsiveTableColumnDefinition, { SortDirection } from '../Data/IResponsiveTableColumnDefinition';
+export interface ISortPluginOptions<TData> {
+    initialSortColumn?: keyof TData;
+    initialSortDirection?: SortDirection;
+}
+export declare class SortPlugin<TData> implements IResponsiveTablePlugin<TData> {
+    id: string;
+    private api;
+    private sortColumn;
+    private sortDirection;
+    readonly comparers: {
+        numeric: (key: keyof TData) => (a: TData, b: TData, direction: SortDirection) => number;
+        caseInsensitiveString: (key: keyof TData) => (a: TData, b: TData, direction: SortDirection) => 0 | 1 | -1;
+        date: (key: keyof TData) => (a: TData, b: TData, direction: SortDirection) => number;
+    };
+    constructor(options?: ISortPluginOptions<TData>);
+    onPluginInit: (api: IPluginAPI<TData>) => void;
+    processData: (data: TData[]) => TData[];
+    getHeaderProps: (columnDef: IResponsiveTableColumnDefinition<TData>) => {
+        onClick?: undefined;
+        className?: undefined;
+        'aria-sort'?: undefined;
+    } | {
+        onClick: () => void;
+        className: string;
+        'aria-sort': string;
+    };
+}

package/dist/UI/ResponsiveTable.d.ts

@@ -12,6 +12,7 @@ interface IProps<TData> {
     footerRows?: IFooterRowDefinition[];
     mobileBreakpoint?: number;
     plugins?: IResponsiveTablePlugin<TData>[];
+    enablePageLevelStickyHeader?: boolean;
     infiniteScrollProps?: {
         enableInfiniteScroll?: boolean;
         onLoadMore?: (currentData: TData[]) => Promise<TData[] | null>;
@@ -32,10 +33,12 @@ interface IState<TData> {
     isMobile: boolean;
     processedData: TData[];
     isLoadingMore: boolean;
+    isHeaderSticky: boolean;
 }
 declare class ResponsiveTable<TData> extends Component<IProps<TData>, IState<TData>> {
     private debouncedResize;
     private tableContainerRef;
+    private headerRef;
     constructor(props: IProps<TData>);
     private get mobileBreakpoint();
     private debounce;
@@ -46,6 +49,7 @@ declare class ResponsiveTable<TData> extends Component<IProps<TData>, IState<TDa
     componentDidMount(): void;
     componentWillUnmount(): void;
     componentDidUpdate(prevProps: IProps<TData>): void;
+    private handleScroll;
     private initializePlugins;
     private processData;
     handleResize: () => void;
@@ -53,6 +57,7 @@ declare class ResponsiveTable<TData> extends Component<IProps<TData>, IState<TDa
     private getRawColumnDefinition;
     private onHeaderClickCallback;
     private getClickableHeaderClassName;
+    private getHeaderProps;
     private get rowClickFunction();
     private get rowClickStyle();
     private get tableFooter();

package/dist/index.d.ts

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

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 */\n.ResponsiveTable-module_responsiveTable__4y-Od {\n  --table-border-color: #e0e0e0;\n  --table-header-bg: #f8f9fa;\n  --table-row-hover-bg: #e9ecef;\n  --table-row-stripe-bg: #f2f2f2;\n  --card-bg: #ffffff;\n  --card-border-color: #e0e0e0;\n  --card-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);\n  --text-color: #212529;\n  --text-color-muted: #6c757d;\n  --interactive-color: #0056b3;\n}\n\n/* Mobile Card View */\n.ResponsiveTable-module_card__b-U2v {\n  background-color: var(--card-bg);\n  border: 1px solid var(--card-border-color);\n  margin-bottom: 1rem;\n  border-radius: 8px;\n  overflow: hidden;\n  box-shadow: var(--card-shadow);\n  transition: box-shadow 0.2s ease-in-out;\n}\n\n.ResponsiveTable-module_card__b-U2v:hover {\n  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);\n}\n\n/* This is not used in the component, but keeping it styled in case it's added back */\n.ResponsiveTable-module_card-header__Ttk51 {\n  background-color: var(--table-header-bg);\n  padding: 0.75rem 1rem;\n  font-weight: 600; /* Bolder */\n  border-bottom: 1px solid var(--table-border-color);\n}\n\n.ResponsiveTable-module_card-body__XIy0h {\n  padding: 1rem;\n  font-size: 0.9rem;\n}\n\n.ResponsiveTable-module_card-body__XIy0h p {\n  margin: 0 0 0.75rem;\n  display: flex;\n  justify-content: space-between;\n}\n\n.ResponsiveTable-module_card-body__XIy0h p:last-child {\n  margin-bottom: 0;\n}\n\n.ResponsiveTable-module_card-label__v9L71 {\n  font-weight: 600;\n  color: var(--text-color);\n  margin-right: 0.5rem;\n}\n\n/* Desktop Table View */\n.ResponsiveTable-module_responsiveTable__4y-Od {\n  width: 100%;\n  border-collapse: collapse;\n  color: var(--text-color);\n}\n\n.ResponsiveTable-module_responsiveTable__4y-Od thead th {\n  background-color: var(--table-header-bg);\n  position: sticky;\n  top: 0;\n  z-index: 2;\n  font-weight: 600;\n  text-align: left;\n  padding: 1rem;\n  border-bottom: 2px solid var(--table-border-color);\n}\n\n.ResponsiveTable-module_responsiveTable__4y-Od td {\n  padding: 1rem;\n  border-bottom: 1px solid var(--table-border-color);\n  text-align: left;\n}\n\n.ResponsiveTable-module_responsiveTable__4y-Od tr {\n  background-color: var(--card-bg);\n  transition: background-color 0.2s ease-in-out;\n}\n\n/* Subtle striping for better readability */\n.ResponsiveTable-module_responsiveTable__4y-Od tr:nth-child(even) {\n  background-color: var(--table-row-stripe-bg);\n}\n\n/* Modern hover effect */\n.ResponsiveTable-module_responsiveTable__4y-Od tr:hover {\n  background-color: var(--table-row-hover-bg);\n}\n\n/* Clickable Header Style */\n.ResponsiveTable-module_clickableHeader__xHQhF {\n  cursor: pointer;\n  color: var(--interactive-color);\n}\n\n.ResponsiveTable-module_clickableHeader__xHQhF:hover {\n  text-decoration: underline;\n}\n\n.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";
-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"};
+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 {
@@ -972,6 +972,16 @@ class ResponsiveTable extends React.Component {
     constructor(props) {
         super(props);
         this.tableContainerRef = React.createRef();
+        this.headerRef = React.createRef();
+        this.handleScroll = () => {
+            if (this.headerRef.current && !this.props.maxHeight) {
+                const { top } = this.headerRef.current.getBoundingClientRect();
+                const isSticky = top <= 0;
+                if (isSticky !== this.state.isHeaderSticky) {
+                    this.setState({ isHeaderSticky: isSticky });
+                }
+            }
+        };
         this.handleResize = () => {
             this.setState({
                 isMobile: window.innerWidth <= this.mobileBreakpoint,
@@ -981,6 +991,7 @@ class ResponsiveTable extends React.Component {
             isMobile: false,
             processedData: props.data,
             isLoadingMore: false,
+            isHeaderSticky: false,
         };
         this.debouncedResize = this.debounce(this.handleResize, 200);
     }
@@ -1017,10 +1028,16 @@ class ResponsiveTable extends React.Component {
     componentDidMount() {
         this.handleResize(); // Initial check
         window.addEventListener('resize', this.debouncedResize);
+        if (this.props.enablePageLevelStickyHeader !== false) {
+            window.addEventListener('scroll', this.handleScroll);
+        }
         this.initializePlugins();
     }
     componentWillUnmount() {
         window.removeEventListener('resize', this.debouncedResize);
+        if (this.props.enablePageLevelStickyHeader !== false) {
+            window.removeEventListener('scroll', this.handleScroll);
+        }
     }
     componentDidUpdate(prevProps) {
         var _a, _b, _c;
@@ -1109,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;
@@ -1204,13 +1232,14 @@ class ResponsiveTable extends React.Component {
         };
         return (React.createElement("div", { style: fixedHeadersStyle, ref: this.tableContainerRef },
             React.createElement("table", { className: styles['responsiveTable'] },
-                React.createElement("thead", null,
+                React.createElement("thead", { ref: this.headerRef, className: this.state.isHeaderSticky ? styles.stickyHeader : '' },
                     React.createElement("tr", null, this.props.columnDefinitions.map((columnDefinition, colIndex) => {
                         const onHeaderClickCallback = this.onHeaderClickCallback(columnDefinition);
                         const clickableHeaderClassName = this.getClickableHeaderClassName(onHeaderClickCallback, columnDefinition);
-                        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;
@@ -1226,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;
@@ -1255,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