jattac.libs.web.responsive-table 0.5.0 → 0.6.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (9) hide show
  1. package/README.md +851 -702
  2. package/dist/Plugins/IResponsiveTablePlugin.d.ts +9 -2
  3. package/dist/Plugins/SelectionPlugin.d.ts +14 -0
  4. package/dist/UI/InfiniteTable.d.ts +3 -11
  5. package/dist/UI/ResponsiveTable.d.ts +11 -11
  6. package/dist/index.d.ts +2 -1
  7. package/dist/index.js +125 -13
  8. package/dist/index.js.map +1 -1
  9. package/package.json +65 -65
package/dist/Plugins/IResponsiveTablePlugin.d.ts CHANGED
@@ -11,6 +11,7 @@ export interface IResponsiveTablePlugin<TData> {
11
11
  className?: string;
12
12
  };
13
13
  renderCell?: (content: ReactNode, row: TData, column: IResponsiveTableColumnDefinition<TData>) => ReactNode;
14
+ getRowProps?: (row: TData) => React.HTMLAttributes<HTMLTableRowElement>;
14
15
  }
15
16
  export interface IPluginAPI<TData> {
16
17
  getData: () => TData[];
@@ -18,8 +19,7 @@ export interface IPluginAPI<TData> {
18
19
  columnDefinitions: ColumnDefinition<TData>[];
19
20
  getScrollableElement?: () => HTMLElement | null;
20
21
  infiniteScrollProps?: {
21
- enableInfiniteScroll?: boolean;
22
- onLoadMore?: (currentData: TData[]) => Promise<TData[] | null>;
22
+ onLoadMore: (currentData: TData[]) => Promise<TData[] | null>;
23
23
  hasMore?: boolean;
24
24
  loadingMoreComponent?: ReactNode;
25
25
  noMoreDataComponent?: ReactNode;
@@ -29,4 +29,11 @@ export interface IPluginAPI<TData> {
29
29
  filterPlaceholder?: string;
30
30
  className?: string;
31
31
  };
32
+ selectionProps?: {
33
+ onSelectionChange: (selectedItems: TData[]) => void;
34
+ rowIdKey: keyof TData;
35
+ mode?: 'single' | 'multiple';
36
+ selectedItems?: TData[];
37
+ selectedRowClassName?: string;
38
+ };
32
39
  }
package/dist/Plugins/SelectionPlugin.d.ts ADDED
@@ -0,0 +1,14 @@
1
+ import React from 'react';
2
+ import { IResponsiveTablePlugin, IPluginAPI } from './IResponsiveTablePlugin';
3
+ export declare class SelectionPlugin<TData> implements IResponsiveTablePlugin<TData> {
4
+ id: string;
5
+ private api;
6
+ private internalSelectedIds;
7
+ constructor();
8
+ onPluginInit: (api: IPluginAPI<TData>) => void;
9
+ private getRowId;
10
+ private isControlled;
11
+ private getSelectedIds;
12
+ private handleRowClick;
13
+ getRowProps: (row: TData) => React.HTMLAttributes<HTMLTableRowElement>;
14
+ }
package/dist/UI/InfiniteTable.d.ts CHANGED
@@ -3,20 +3,12 @@ import { IResponsiveTableColumnDefinition } from '../Data/IResponsiveTableColumn
3
3
  import IFooterRowDefinition from '../Data/IFooterRowDefinition';
4
4
  import { IResponsiveTablePlugin } from '../Plugins/IResponsiveTablePlugin';
5
5
  export type ColumnDefinition<TData> = IResponsiveTableColumnDefinition<TData> | ((data: TData, rowIndex?: number) => IResponsiveTableColumnDefinition<TData>);
6
- type InfiniteScrollDisabled = {
7
- enableInfiniteScroll?: false;
8
- onLoadMore?: never;
9
- hasMore?: never;
10
- loadingMoreComponent?: never;
11
- noMoreDataComponent?: never;
12
- };
13
- type InfiniteScrollEnabled<TData> = {
14
- enableInfiniteScroll: true;
6
+ interface IInfiniteScrollProps<TData> {
15
7
  onLoadMore: (currentData: TData[]) => Promise<TData[] | null>;
16
8
  hasMore?: boolean;
17
9
  loadingMoreComponent?: ReactNode;
18
10
  noMoreDataComponent?: ReactNode;
19
- };
11
+ }
20
12
  interface IProps<TData> {
21
13
  columnDefinitions: ColumnDefinition<TData>[];
22
14
  data: TData[];
@@ -27,7 +19,7 @@ interface IProps<TData> {
27
19
  mobileBreakpoint?: number;
28
20
  plugins?: IResponsiveTablePlugin<TData>[];
29
21
  enablePageLevelStickyHeader?: boolean;
30
- infiniteScrollProps?: InfiniteScrollDisabled | InfiniteScrollEnabled<TData>;
22
+ infiniteScrollProps?: IInfiniteScrollProps<TData>;
31
23
  filterProps?: {
32
24
  showFilter?: boolean;
33
25
  filterPlaceholder?: string;
package/dist/UI/ResponsiveTable.d.ts CHANGED
@@ -3,20 +3,12 @@ import { IResponsiveTableColumnDefinition } from '../Data/IResponsiveTableColumn
3
3
  import IFooterRowDefinition from '../Data/IFooterRowDefinition';
4
4
  import { IResponsiveTablePlugin } from '../Plugins/IResponsiveTablePlugin';
5
5
  export type ColumnDefinition<TData> = IResponsiveTableColumnDefinition<TData> | ((data: TData, rowIndex?: number) => IResponsiveTableColumnDefinition<TData>);
6
- type InfiniteScrollDisabled = {
7
- enableInfiniteScroll?: false;
8
- onLoadMore?: never;
9
- hasMore?: never;
10
- loadingMoreComponent?: never;
11
- noMoreDataComponent?: never;
12
- };
13
- type InfiniteScrollEnabled<TData> = {
14
- enableInfiniteScroll: true;
6
+ interface IInfiniteScrollProps<TData> {
15
7
  onLoadMore: (currentData: TData[]) => Promise<TData[] | null>;
16
8
  hasMore?: boolean;
17
9
  loadingMoreComponent?: ReactNode;
18
10
  noMoreDataComponent?: ReactNode;
19
- };
11
+ }
20
12
  interface IProps<TData> {
21
13
  columnDefinitions: ColumnDefinition<TData>[];
22
14
  data: TData[];
@@ -27,12 +19,19 @@ interface IProps<TData> {
27
19
  mobileBreakpoint?: number;
28
20
  plugins?: IResponsiveTablePlugin<TData>[];
29
21
  enablePageLevelStickyHeader?: boolean;
30
- infiniteScrollProps?: InfiniteScrollDisabled | InfiniteScrollEnabled<TData>;
22
+ infiniteScrollProps?: IInfiniteScrollProps<TData>;
31
23
  filterProps?: {
32
24
  showFilter?: boolean;
33
25
  filterPlaceholder?: string;
34
26
  className?: string;
35
27
  };
28
+ selectionProps?: {
29
+ onSelectionChange: (selectedItems: TData[]) => void;
30
+ rowIdKey: keyof TData;
31
+ mode?: 'single' | 'multiple';
32
+ selectedItems?: TData[];
33
+ selectedRowClassName?: string;
34
+ };
36
35
  animationProps?: {
37
36
  isLoading?: boolean;
38
37
  animateOnLoad?: boolean;
@@ -68,6 +67,7 @@ declare class ResponsiveTable<TData> extends Component<IProps<TData>, IState<TDa
68
67
  private onHeaderClickCallback;
69
68
  private getClickableHeaderClassName;
70
69
  private getHeaderProps;
70
+ private getRowProps;
71
71
  private renderCell;
72
72
  private get rowClickFunction();
73
73
  private get rowClickStyle();
package/dist/index.d.ts CHANGED
@@ -6,5 +6,6 @@ import { FilterPlugin } from './Plugins/FilterPlugin';
6
6
  import { InfiniteScrollPlugin } from './Plugins/InfiniteScrollPlugin';
7
7
  import { IResponsiveTablePlugin } from './Plugins/IResponsiveTablePlugin';
8
8
  import { SortPlugin } from './Plugins/SortPlugin';
9
- export { SortDirection, IResponsiveTableColumnDefinition, ColumnDefinition, IFooterColumnDefinition, IFooterRowDefinition, FilterPlugin, InfiniteScrollPlugin, IResponsiveTablePlugin, SortPlugin, };
9
+ import { SelectionPlugin } from './Plugins/SelectionPlugin';
10
+ export { SortDirection, IResponsiveTableColumnDefinition, ColumnDefinition, IFooterColumnDefinition, IFooterRowDefinition, FilterPlugin, InfiniteScrollPlugin, IResponsiveTablePlugin, SortPlugin, SelectionPlugin, };
10
11
  export default ResponsiveTable;
package/dist/index.js CHANGED
@@ -75,8 +75,8 @@ function styleInject(css, ref) {
75
75
  }
76
76
  }
77
77
 
78
- 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 padding-right: 0.5rem; /* Subtle space between text and icon */\r\n}\r\n\r\n.ResponsiveTable-module_responsiveTable__4y-Od td {\r\n padding: 1rem;\r\n border-bottom: 1px solid var(--table-border-color);\r\n text-align: left;\r\n}\r\n\r\n.ResponsiveTable-module_responsiveTable__4y-Od tr {\r\n background-color: var(--card-bg);\r\n transition: background-color 0.2s ease-in-out;\r\n}\r\n\r\n/* Subtle striping for better readability */\r\n.ResponsiveTable-module_responsiveTable__4y-Od tr:nth-child(even) {\r\n background-color: var(--table-row-stripe-bg);\r\n}\r\n\r\n/* Modern hover effect */\r\n.ResponsiveTable-module_responsiveTable__4y-Od tr:hover {\r\n background-color: var(--table-row-hover-bg);\r\n}\r\n\r\n/* Clickable Header Style */\r\n.ResponsiveTable-module_clickableHeader__xHQhF {\r\n cursor: pointer;\r\n color: var(--interactive-color);\r\n}\r\n\r\n.ResponsiveTable-module_clickableHeader__xHQhF:hover {\r\n text-decoration: underline;\r\n}\r\n\r\n/* Sortable Header Styles */\r\n.ResponsiveTable-module_responsiveTable__4y-Od th.ResponsiveTable-module_sortable__yvA60,\r\n.ResponsiveTable-module_responsiveTable__4y-Od th.ResponsiveTable-module_sorted-asc__jzOIa,\r\n.ResponsiveTable-module_responsiveTable__4y-Od th.ResponsiveTable-module_sorted-desc__7WCFK {\r\n cursor: pointer;\r\n /* position: relative; <-- REMOVED to fix sticky header bug */\r\n padding-right: 2.5rem; /* Space for the icon (1rem icon + 1rem margin + 0.5rem right offset) */\r\n transition: transform 0.2s ease-in-out; /* Add transition for smooth scaling */\r\n}\r\n\r\n.ResponsiveTable-module_responsiveTable__4y-Od th.ResponsiveTable-module_sortable__yvA60:hover,\r\n.ResponsiveTable-module_responsiveTable__4y-Od th.ResponsiveTable-module_sorted-asc__jzOIa:hover,\r\n.ResponsiveTable-module_responsiveTable__4y-Od th.ResponsiveTable-module_sorted-desc__7WCFK:hover {\r\n transform: scale(1.01); /* Subtle zoom effect on hover */\r\n}\r\n\r\n.ResponsiveTable-module_responsiveTable__4y-Od th .ResponsiveTable-module_sortIcon__A9WtD {\r\n position: absolute;\r\n right: 0.5rem;\r\n top: 50%;\r\n transform: translateY(-50%);\r\n width: 1rem;\r\n height: 1rem;\r\n background-size: contain;\r\n background-repeat: no-repeat;\r\n background-position: center;\r\n opacity: 0.4; /* Ghosted by default */\r\n transition: opacity 0.2s ease-in-out;\r\n}\r\n\r\n/* Default unsorted icon (funnel) */\r\n.ResponsiveTable-module_responsiveTable__4y-Od th.ResponsiveTable-module_sortable__yvA60 .ResponsiveTable-module_sortIcon__A9WtD {\r\n background-image: url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%236c757d'%3E%3Cpath d='M10 18h4v-2h-4v2zm-6-8v2h16V8H4zm3-6h10v2H7V2z'/%3E%3C/svg%3E\");\r\n}\r\n\r\n.ResponsiveTable-module_responsiveTable__4y-Od th.ResponsiveTable-module_sortable__yvA60:hover .ResponsiveTable-module_sortIcon__A9WtD {\r\n opacity: 1;\r\n}\r\n\r\n/* Ensure cursor applies to content within sortable header */\r\n.ResponsiveTable-module_responsiveTable__4y-Od th.ResponsiveTable-module_sortable__yvA60 > * {\r\n cursor: inherit;\r\n}\r\n\r\n/* Sorted Ascending Icon */\r\n.ResponsiveTable-module_responsiveTable__4y-Od th.ResponsiveTable-module_sorted-asc__jzOIa .ResponsiveTable-module_sortIcon__A9WtD {\r\n opacity: 1; /* Always prominent when sorted */\r\n background-image: url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%230056b3'%3E%3Cpath d='M7 14l5-5 5 5z'/%3E%3C/svg%3E\");\r\n}\r\n\r\n/* Sorted Descending Icon */\r\n.ResponsiveTable-module_responsiveTable__4y-Od th.ResponsiveTable-module_sorted-desc__7WCFK .ResponsiveTable-module_sortIcon__A9WtD {\r\n opacity: 1; /* Always prominent when sorted */\r\n background-image: url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%230056b3'%3E%3Cpath d='M7 10l5 5 5-5z'/%3E%3C/svg%3E\");\r\n}\r\n\r\n.ResponsiveTable-module_responsiveTable__4y-Od tfoot {\r\n background-color: var(--table-header-bg);\r\n border-top: 2px solid var(--table-border-color);\r\n font-weight: 600;\r\n}\r\n\r\n.ResponsiveTable-module_footerCell__8H-uG {\r\n padding: 1rem;\r\n text-align: right;\r\n font-weight: 600;\r\n}\r\n\r\n.ResponsiveTable-module_clickableFooterCell__WB9Ss {\r\n cursor: pointer;\r\n color: var(--interactive-color);\r\n}\r\n\r\n.ResponsiveTable-module_clickableFooterCell__WB9Ss:hover {\r\n text-decoration: underline;\r\n}\r\n\r\n.ResponsiveTable-module_footerCard__-NE2M {\r\n background-color: var(--table-header-bg);\r\n border: 1px solid var(--card-border-color);\r\n border-top: 2px solid var(--table-border-color);\r\n margin-bottom: 1rem;\r\n border-radius: 8px;\r\n overflow: hidden;\r\n box-shadow: none;\r\n}\r\n\r\n.ResponsiveTable-module_footer-card-body__CtBMv {\r\n padding: 1rem;\r\n font-size: 0.9rem;\r\n}\r\n\r\n.ResponsiveTable-module_footer-card-row__Vv6Ur {\r\n margin: 0 0 0.75rem;\r\n display: flex;\r\n justify-content: space-between;\r\n font-weight: 600;\r\n}\r\n\r\n/* No Data State */\r\n\r\n/* Staggered Entrance Animation */\r\n.ResponsiveTable-module_animatedRow__SFjrJ {\r\n animation: ResponsiveTable-module_fadeInUp__jMCS7 0.5s ease-out forwards;\r\n opacity: 0;\r\n}\r\n\r\n@keyframes ResponsiveTable-module_fadeInUp__jMCS7 {\r\n from {\r\n opacity: 0;\r\n transform: translateY(20px);\r\n }\r\n to {\r\n opacity: 1;\r\n transform: translateY(0);\r\n }\r\n}\r\n\r\n/* Skeleton Loader */\r\n.ResponsiveTable-module_skeleton__XxsXW {\r\n background-color: #e0e0e0;\r\n border-radius: 4px;\r\n position: relative;\r\n overflow: hidden;\r\n}\r\n\r\n.ResponsiveTable-module_skeleton__XxsXW::after {\r\n content: '';\r\n position: absolute;\r\n top: 0;\r\n left: -150%;\r\n width: 150%;\r\n height: 100%;\r\n background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.4), transparent);\r\n animation: ResponsiveTable-module_shimmer__H8PhC 1.5s infinite;\r\n}\r\n\r\n.ResponsiveTable-module_skeletonText__T-Lgq {\r\n height: 1.2em;\r\n width: 100%;\r\n}\r\n\r\n.ResponsiveTable-module_skeletonCard__AYVwL {\r\n background-color: var(--card-bg);\r\n border: 1px solid var(--card-border-color);\r\n margin-bottom: 1rem;\r\n border-radius: 8px;\r\n overflow: hidden;\r\n padding: 1rem;\r\n}\r\n\r\n@keyframes ResponsiveTable-module_shimmer__H8PhC {\r\n 0% {\r\n transform: translateX(0);\r\n }\r\n 100% {\r\n transform: translateX(100%);\r\n }\r\n}\r\n.ResponsiveTable-module_noDataWrapper__Rj-k3 {\r\n color: var(--text-color-muted); /* Softer color */\r\n display: flex;\r\n justify-content: center;\r\n align-items: center;\r\n height: 100%;\r\n gap: 10px;\r\n padding: 40px;\r\n background-color: var(--table-header-bg);\r\n border: 1px dashed var(--table-border-color);\r\n border-radius: 8px;\r\n}\r\n\r\n.ResponsiveTable-module_noData__IpwNq {\r\n text-align: center;\r\n font-weight: 500; /* Less aggressive than bold */\r\n font-size: 1rem;\r\n}\r\n\r\n.ResponsiveTable-module_row-exit__EVX6T {\r\n opacity: 0;\r\n transform: scaleY(0);\r\n transition: transform 0.3s ease-out, opacity 0.3s ease-out;\r\n}\r\n\r\n.ResponsiveTable-module_row-enter__YKgI4 {\r\n opacity: 0;\r\n transform: translateY(20px);\r\n transition: transform 0.5s ease-out, opacity 0.5s ease-out;\r\n}\r\n\r\n.ResponsiveTable-module_row-flash__a4NOm {\r\n animation: ResponsiveTable-module_flash__nxeAX 0.5s ease-out;\r\n}\r\n\r\n@keyframes ResponsiveTable-module_flash__nxeAX {\r\n 0% {\r\n background-color: var(--table-row-hover-bg);\r\n }\r\n 100% {\r\n background-color: transparent;\r\n }\r\n}\r\n\r\n.ResponsiveTable-module_stickyHeader__-jjN- th {\r\n position: sticky;\r\n top: 0;\r\n z-index: 1;\r\n box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);\r\n}\r\n\r\n.ResponsiveTable-module_internalStickyHeader__idiJY th {\r\n position: sticky;\r\n top: 0;\r\n z-index: 1;\r\n}\r\n/* Spinner for Loading More */\r\n.ResponsiveTable-module_spinner__Pn-3D {\r\n border: 4px solid rgba(0, 0, 0, 0.1);\r\n border-left-color: var(--interactive-color); /* Use theme color */\r\n border-radius: 50%;\r\n width: 24px;\r\n height: 24px;\r\n animation: ResponsiveTable-module_spin__i3NHn 1s linear infinite;\r\n display: inline-block;\r\n vertical-align: middle;\r\n margin-right: 8px;\r\n}\r\n\r\n@keyframes ResponsiveTable-module_spin__i3NHn {\r\n 0% { transform: rotate(0deg); }\r\n 100% { transform: rotate(360deg); }\r\n}\r\n\r\n/* Loading/No More Data Container */\r\n.ResponsiveTable-module_infoContainer__b9IF5 {\r\n display: flex;\r\n justify-content: center;\r\n align-items: center;\r\n padding: 20px;\r\n color: var(--text-color-muted);\r\n font-size: 0.9rem;\r\n gap: 8px;\r\n background-color: var(--table-header-bg);\r\n border-top: 1px solid var(--table-border-color);\r\n}\r\n\r\n.ResponsiveTable-module_infoContainer__b9IF5.ResponsiveTable-module_noMoreData__he1rZ {\r\n font-weight: 500;\r\n}";
79
- var styles$2 = {"responsiveTable":"ResponsiveTable-module_responsiveTable__4y-Od","card":"ResponsiveTable-module_card__b-U2v","card-header":"ResponsiveTable-module_card-header__Ttk51","card-body":"ResponsiveTable-module_card-body__XIy0h","card-label":"ResponsiveTable-module_card-label__v9L71","headerInnerWrapper":"ResponsiveTable-module_headerInnerWrapper__3VAhD","headerContent":"ResponsiveTable-module_headerContent__ODMzS","clickableHeader":"ResponsiveTable-module_clickableHeader__xHQhF","sortable":"ResponsiveTable-module_sortable__yvA60","sorted-asc":"ResponsiveTable-module_sorted-asc__jzOIa","sorted-desc":"ResponsiveTable-module_sorted-desc__7WCFK","sortIcon":"ResponsiveTable-module_sortIcon__A9WtD","footerCell":"ResponsiveTable-module_footerCell__8H-uG","clickableFooterCell":"ResponsiveTable-module_clickableFooterCell__WB9Ss","footerCard":"ResponsiveTable-module_footerCard__-NE2M","footer-card-body":"ResponsiveTable-module_footer-card-body__CtBMv","footer-card-row":"ResponsiveTable-module_footer-card-row__Vv6Ur","animatedRow":"ResponsiveTable-module_animatedRow__SFjrJ","fadeInUp":"ResponsiveTable-module_fadeInUp__jMCS7","skeleton":"ResponsiveTable-module_skeleton__XxsXW","shimmer":"ResponsiveTable-module_shimmer__H8PhC","skeletonText":"ResponsiveTable-module_skeletonText__T-Lgq","skeletonCard":"ResponsiveTable-module_skeletonCard__AYVwL","noDataWrapper":"ResponsiveTable-module_noDataWrapper__Rj-k3","noData":"ResponsiveTable-module_noData__IpwNq","row-exit":"ResponsiveTable-module_row-exit__EVX6T","row-enter":"ResponsiveTable-module_row-enter__YKgI4","row-flash":"ResponsiveTable-module_row-flash__a4NOm","flash":"ResponsiveTable-module_flash__nxeAX","stickyHeader":"ResponsiveTable-module_stickyHeader__-jjN-","internalStickyHeader":"ResponsiveTable-module_internalStickyHeader__idiJY","spinner":"ResponsiveTable-module_spinner__Pn-3D","spin":"ResponsiveTable-module_spin__i3NHn","infoContainer":"ResponsiveTable-module_infoContainer__b9IF5","noMoreData":"ResponsiveTable-module_noMoreData__he1rZ"};
78
+ 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 padding-right: 0.5rem; /* Subtle space between text and icon */\r\n}\r\n\r\n.ResponsiveTable-module_responsiveTable__4y-Od td {\r\n padding: 1rem;\r\n border-bottom: 1px solid var(--table-border-color);\r\n text-align: left;\r\n}\r\n\r\n.ResponsiveTable-module_responsiveTable__4y-Od tr {\r\n background-color: var(--card-bg);\r\n transition: background-color 0.2s ease-in-out;\r\n}\r\n\r\n/* 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 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 padding-right: 2.5rem; /* Space for the icon (1rem icon + 1rem margin + 0.5rem right offset) */\r\n transition: transform 0.2s ease-in-out; /* Add transition for smooth scaling */\r\n}\r\n\r\n.ResponsiveTable-module_responsiveTable__4y-Od th.ResponsiveTable-module_sortable__yvA60:hover,\r\n.ResponsiveTable-module_responsiveTable__4y-Od th.ResponsiveTable-module_sorted-asc__jzOIa:hover,\r\n.ResponsiveTable-module_responsiveTable__4y-Od th.ResponsiveTable-module_sorted-desc__7WCFK:hover {\r\n transform: scale(1.01); /* Subtle zoom effect on hover */\r\n}\r\n\r\n.ResponsiveTable-module_responsiveTable__4y-Od th .ResponsiveTable-module_sortIcon__A9WtD {\r\n position: absolute;\r\n right: 0.5rem;\r\n top: 50%;\r\n transform: translateY(-50%);\r\n width: 1rem;\r\n height: 1rem;\r\n background-size: contain;\r\n background-repeat: no-repeat;\r\n background-position: center;\r\n opacity: 0.4; /* Ghosted by default */\r\n transition: opacity 0.2s ease-in-out;\r\n}\r\n\r\n/* Default unsorted icon (funnel) */\r\n.ResponsiveTable-module_responsiveTable__4y-Od th.ResponsiveTable-module_sortable__yvA60 .ResponsiveTable-module_sortIcon__A9WtD {\r\n background-image: url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%236c757d'%3E%3Cpath d='M10 18h4v-2h-4v2zm-6-8v2h16V8H4zm3-6h10v2H7V2z'/%3E%3C/svg%3E\");\r\n}\r\n\r\n.ResponsiveTable-module_responsiveTable__4y-Od th.ResponsiveTable-module_sortable__yvA60:hover .ResponsiveTable-module_sortIcon__A9WtD {\r\n opacity: 1;\r\n}\r\n\r\n/* Ensure cursor applies to content within sortable header */\r\n.ResponsiveTable-module_responsiveTable__4y-Od th.ResponsiveTable-module_sortable__yvA60 > * {\r\n cursor: inherit;\r\n}\r\n\r\n/* Sorted Ascending Icon */\r\n.ResponsiveTable-module_responsiveTable__4y-Od th.ResponsiveTable-module_sorted-asc__jzOIa .ResponsiveTable-module_sortIcon__A9WtD {\r\n opacity: 1; /* Always prominent when sorted */\r\n background-image: url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%230056b3'%3E%3Cpath d='M7 14l5-5 5 5z'/%3E%3C/svg%3E\");\r\n}\r\n\r\n/* Sorted Descending Icon */\r\n.ResponsiveTable-module_responsiveTable__4y-Od th.ResponsiveTable-module_sorted-desc__7WCFK .ResponsiveTable-module_sortIcon__A9WtD {\r\n opacity: 1; /* Always prominent when sorted */\r\n background-image: url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%230056b3'%3E%3Cpath d='M7 10l5 5 5-5z'/%3E%3C/svg%3E\");\r\n}\r\n\r\n.ResponsiveTable-module_responsiveTable__4y-Od tfoot {\r\n background-color: var(--table-header-bg);\r\n border-top: 2px solid var(--table-border-color);\r\n font-weight: 600;\r\n}\r\n\r\n.ResponsiveTable-module_footerCell__8H-uG {\r\n padding: 1rem;\r\n text-align: right;\r\n font-weight: 600;\r\n}\r\n\r\n.ResponsiveTable-module_clickableFooterCell__WB9Ss {\r\n cursor: pointer;\r\n color: var(--interactive-color);\r\n}\r\n\r\n.ResponsiveTable-module_clickableFooterCell__WB9Ss:hover {\r\n text-decoration: underline;\r\n}\r\n\r\n.ResponsiveTable-module_footerCard__-NE2M {\r\n background-color: var(--table-header-bg);\r\n border: 1px solid var(--card-border-color);\r\n border-top: 2px solid var(--table-border-color);\r\n margin-bottom: 1rem;\r\n border-radius: 8px;\r\n overflow: hidden;\r\n box-shadow: none;\r\n}\r\n\r\n.ResponsiveTable-module_footer-card-body__CtBMv {\r\n padding: 1rem;\r\n font-size: 0.9rem;\r\n}\r\n\r\n.ResponsiveTable-module_footer-card-row__Vv6Ur {\r\n margin: 0 0 0.75rem;\r\n display: flex;\r\n justify-content: space-between;\r\n font-weight: 600;\r\n}\r\n\r\n/* No Data State */\r\n\r\n/* Staggered Entrance Animation */\r\n.ResponsiveTable-module_animatedRow__SFjrJ {\r\n animation: ResponsiveTable-module_fadeInUp__jMCS7 0.5s ease-out forwards;\r\n opacity: 0;\r\n}\r\n\r\n@keyframes ResponsiveTable-module_fadeInUp__jMCS7 {\r\n from {\r\n opacity: 0;\r\n transform: translateY(20px);\r\n }\r\n to {\r\n opacity: 1;\r\n transform: translateY(0);\r\n }\r\n}\r\n\r\n/* Skeleton Loader */\r\n.ResponsiveTable-module_skeleton__XxsXW {\r\n background-color: #e0e0e0;\r\n border-radius: 4px;\r\n position: relative;\r\n overflow: hidden;\r\n}\r\n\r\n.ResponsiveTable-module_skeleton__XxsXW::after {\r\n content: '';\r\n position: absolute;\r\n top: 0;\r\n left: -150%;\r\n width: 150%;\r\n height: 100%;\r\n background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.4), transparent);\r\n animation: ResponsiveTable-module_shimmer__H8PhC 1.5s infinite;\r\n}\r\n\r\n.ResponsiveTable-module_skeletonText__T-Lgq {\r\n height: 1.2em;\r\n width: 100%;\r\n}\r\n\r\n.ResponsiveTable-module_skeletonCard__AYVwL {\r\n background-color: var(--card-bg);\r\n border: 1px solid var(--card-border-color);\r\n margin-bottom: 1rem;\r\n border-radius: 8px;\r\n overflow: hidden;\r\n padding: 1rem;\r\n}\r\n\r\n@keyframes ResponsiveTable-module_shimmer__H8PhC {\r\n 0% {\r\n transform: translateX(0);\r\n }\r\n 100% {\r\n transform: translateX(100%);\r\n }\r\n}\r\n.ResponsiveTable-module_noDataWrapper__Rj-k3 {\r\n color: var(--text-color-muted); /* Softer color */\r\n display: flex;\r\n justify-content: center;\r\n align-items: center;\r\n height: 100%;\r\n gap: 10px;\r\n padding: 40px;\r\n background-color: var(--table-header-bg);\r\n border: 1px dashed var(--table-border-color);\r\n border-radius: 8px;\r\n}\r\n\r\n.ResponsiveTable-module_noData__IpwNq {\r\n text-align: center;\r\n font-weight: 500; /* Less aggressive than bold */\r\n font-size: 1rem;\r\n}\r\n\r\n.ResponsiveTable-module_row-exit__EVX6T {\r\n opacity: 0;\r\n transform: scaleY(0);\r\n transition: transform 0.3s ease-out, opacity 0.3s ease-out;\r\n}\r\n\r\n.ResponsiveTable-module_row-enter__YKgI4 {\r\n opacity: 0;\r\n transform: translateY(20px);\r\n transition: transform 0.5s ease-out, opacity 0.5s ease-out;\r\n}\r\n\r\n.ResponsiveTable-module_row-flash__a4NOm {\r\n animation: ResponsiveTable-module_flash__nxeAX 0.5s ease-out;\r\n}\r\n\r\n@keyframes ResponsiveTable-module_flash__nxeAX {\r\n 0% {\r\n background-color: var(--table-row-hover-bg);\r\n }\r\n 100% {\r\n background-color: transparent;\r\n }\r\n}\r\n\r\n.ResponsiveTable-module_stickyHeader__-jjN- th {\r\n position: sticky;\r\n top: 0;\r\n z-index: 1;\r\n box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);\r\n}\r\n\r\n.ResponsiveTable-module_internalStickyHeader__idiJY th {\r\n position: sticky;\r\n top: 0;\r\n z-index: 1;\r\n}\r\n/* Spinner for Loading More */\r\n.ResponsiveTable-module_spinner__Pn-3D {\r\n border: 4px solid rgba(0, 0, 0, 0.1);\r\n border-left-color: var(--interactive-color); /* Use theme color */\r\n border-radius: 50%;\r\n width: 24px;\r\n height: 24px;\r\n animation: ResponsiveTable-module_spin__i3NHn 1s linear infinite;\r\n display: inline-block;\r\n vertical-align: middle;\r\n margin-right: 8px;\r\n}\r\n\r\n@keyframes ResponsiveTable-module_spin__i3NHn {\r\n 0% { transform: rotate(0deg); }\r\n 100% { transform: rotate(360deg); }\r\n}\r\n\r\n/* Loading/No More Data Container */\r\n.ResponsiveTable-module_infoContainer__b9IF5 {\r\n display: flex;\r\n justify-content: center;\r\n align-items: center;\r\n padding: 20px;\r\n color: var(--text-color-muted);\r\n font-size: 0.9rem;\r\n gap: 8px;\r\n background-color: var(--table-header-bg);\r\n border-top: 1px solid var(--table-border-color);\r\n}\r\n\r\n.ResponsiveTable-module_infoContainer__b9IF5.ResponsiveTable-module_noMoreData__he1rZ {\r\n font-weight: 500;\r\n}";
79
+ 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","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"};
80
80
  styleInject(css_248z$2);
81
81
 
82
82
  class FilterPlugin {
@@ -141,6 +141,89 @@ class FilterPlugin {
141
141
  }
142
142
  }
143
143
 
144
+ class SelectionPlugin {
145
+ constructor() {
146
+ this.id = 'selection';
147
+ // Internal state for uncontrolled mode
148
+ this.internalSelectedIds = new Set();
149
+ this.onPluginInit = (api) => {
150
+ var _a;
151
+ this.api = api;
152
+ // For uncontrolled mode, initialize with selectedItems if provided on first render
153
+ if (((_a = this.api.selectionProps) === null || _a === void 0 ? void 0 : _a.selectedItems) && this.internalSelectedIds.size === 0) {
154
+ const { selectedItems, rowIdKey } = this.api.selectionProps;
155
+ if (selectedItems && rowIdKey) {
156
+ const initialIds = selectedItems.map(item => item[rowIdKey]);
157
+ this.internalSelectedIds = new Set(initialIds);
158
+ }
159
+ }
160
+ };
161
+ this.getRowId = (row) => {
162
+ const { rowIdKey } = this.api.selectionProps;
163
+ return row[rowIdKey];
164
+ };
165
+ this.isControlled = () => {
166
+ var _a;
167
+ return ((_a = this.api.selectionProps) === null || _a === void 0 ? void 0 : _a.selectedItems) !== undefined;
168
+ };
169
+ this.getSelectedIds = () => {
170
+ if (this.isControlled()) {
171
+ const { selectedItems, rowIdKey } = this.api.selectionProps;
172
+ return new Set((selectedItems === null || selectedItems === void 0 ? void 0 : selectedItems.map(item => item[rowIdKey])) || []);
173
+ }
174
+ return this.internalSelectedIds;
175
+ };
176
+ this.handleRowClick = (row) => {
177
+ const { onSelectionChange, mode = 'multiple', rowIdKey } = this.api.selectionProps;
178
+ const currentSelectedIds = this.getSelectedIds();
179
+ const newSelectedIds = new Set(currentSelectedIds);
180
+ const rowId = this.getRowId(row);
181
+ if (mode === 'single') {
182
+ if (newSelectedIds.has(rowId)) {
183
+ newSelectedIds.clear();
184
+ }
185
+ else {
186
+ newSelectedIds.clear();
187
+ newSelectedIds.add(rowId);
188
+ }
189
+ }
190
+ else { // multiple
191
+ if (newSelectedIds.has(rowId)) {
192
+ newSelectedIds.delete(rowId);
193
+ }
194
+ else {
195
+ newSelectedIds.add(rowId);
196
+ }
197
+ }
198
+ if (!this.isControlled()) {
199
+ this.internalSelectedIds = newSelectedIds;
200
+ }
201
+ const allData = this.api.getData();
202
+ const selectedItems = allData.filter(item => newSelectedIds.has(item[rowIdKey]));
203
+ onSelectionChange(selectedItems);
204
+ // In uncontrolled mode, we need to force a re-render to show the selection change
205
+ if (!this.isControlled()) {
206
+ this.api.forceUpdate();
207
+ }
208
+ };
209
+ this.getRowProps = (row) => {
210
+ const { selectedRowClassName } = this.api.selectionProps || {};
211
+ const selectedIds = this.getSelectedIds();
212
+ const rowId = this.getRowId(row);
213
+ const isSelected = selectedIds.has(rowId);
214
+ const combinedClassName = [
215
+ isSelected ? styles$2.selectedRow : '',
216
+ isSelected ? selectedRowClassName : ''
217
+ ].filter(Boolean).join(' ');
218
+ return {
219
+ className: combinedClassName,
220
+ onClick: () => this.handleRowClick(row),
221
+ 'aria-selected': isSelected,
222
+ };
223
+ };
224
+ }
225
+ }
226
+
144
227
  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}";
145
228
  var styles$1 = {"spinner":"LoadingSpinner-module_spinner__F9V3x"};
146
229
  styleInject(css_248z$1);
@@ -497,13 +580,14 @@ class ResponsiveTable extends React.Component {
497
580
  // Re-initialize if data or plugin configuration changes.
498
581
  if (prevProps.data !== this.props.data ||
499
582
  prevProps.plugins !== this.props.plugins ||
500
- prevProps.filterProps !== this.props.filterProps) {
583
+ prevProps.filterProps !== this.props.filterProps ||
584
+ prevProps.selectionProps !== this.props.selectionProps) {
501
585
  const { processedData, activePlugins } = this.initializePlugins();
502
586
  this.setState({ processedData, activePlugins });
503
587
  }
504
588
  }
505
589
  initializePlugins() {
506
- var _a;
590
+ var _a, _b;
507
591
  const activePlugins = [];
508
592
  // Add explicitly provided plugins first
509
593
  if (this.props.plugins) {
@@ -513,6 +597,10 @@ class ResponsiveTable extends React.Component {
513
597
  if (((_a = this.props.filterProps) === null || _a === void 0 ? void 0 : _a.showFilter) && this.filterPlugin && !activePlugins.some(p => p.id === 'filter')) {
514
598
  activePlugins.push(this.filterPlugin);
515
599
  }
600
+ // Automatically add SelectionPlugin if selectionProps are provided and not already present
601
+ if (((_b = this.props.selectionProps) === null || _b === void 0 ? void 0 : _b.onSelectionChange) && !activePlugins.some(p => p.id === 'selection')) {
602
+ activePlugins.push(new SelectionPlugin());
603
+ }
516
604
  activePlugins.forEach((plugin) => {
517
605
  if (plugin.onPluginInit) {
518
606
  plugin.onPluginInit({
@@ -524,6 +612,7 @@ class ResponsiveTable extends React.Component {
524
612
  getScrollableElement: () => this.tableContainerRef.current,
525
613
  infiniteScrollProps: this.props.infiniteScrollProps,
526
614
  filterProps: this.props.filterProps,
615
+ selectionProps: this.props.selectionProps,
527
616
  columnDefinitions: this.props.columnDefinitions,
528
617
  });
529
618
  }
@@ -580,6 +669,20 @@ class ResponsiveTable extends React.Component {
580
669
  }
581
670
  return headerProps;
582
671
  }
672
+ getRowProps(row) {
673
+ const rowProps = {};
674
+ this.state.activePlugins.forEach(plugin => {
675
+ if (plugin.getRowProps) {
676
+ const props = plugin.getRowProps(row);
677
+ // Merge classNames carefully
678
+ if (props.className) {
679
+ rowProps.className = `${rowProps.className || ''} ${props.className}`.trim();
680
+ }
681
+ Object.assign(rowProps, Object.assign(Object.assign({}, props), { className: rowProps.className }));
682
+ }
683
+ });
684
+ return rowProps;
685
+ }
583
686
  renderCell(content, row, colDef) {
584
687
  let processedContent = content;
585
688
  this.state.activePlugins.forEach((plugin) => {
@@ -598,7 +701,7 @@ class ResponsiveTable extends React.Component {
598
701
  }
599
702
  }
600
703
  get rowClickStyle() {
601
- if (this.props.onRowClick) {
704
+ if (this.props.onRowClick || this.props.selectionProps) {
602
705
  return { cursor: 'pointer' };
603
706
  }
604
707
  else {
@@ -650,10 +753,13 @@ class ResponsiveTable extends React.Component {
650
753
  return (React.createElement("div", null,
651
754
  this.data.map((row, rowIndex) => {
652
755
  var _a;
653
- 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: (e) => {
756
+ const rowProps = this.getRowProps(row);
757
+ const pluginOnClick = rowProps.onClick;
758
+ 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 : ''} ${rowProps.className || ''}`.trim(), style: Object.assign({ animationDelay: `${rowIndex * 0.05}s` }, this.rowClickStyle), "aria-selected": rowProps['aria-selected'], onClick: (e) => {
759
+ if (pluginOnClick)
760
+ pluginOnClick(e);
654
761
  this.rowClickFunction(row);
655
762
  e.stopPropagation();
656
- e.preventDefault();
657
763
  } },
658
764
  React.createElement("div", { className: styles$2['card-header'] }, " "),
659
765
  React.createElement("div", { className: styles$2['card-body'] }, this.props.columnDefinitions.map((columnDefinition, colIndex) => {
@@ -695,11 +801,16 @@ class ResponsiveTable extends React.Component {
695
801
  }))),
696
802
  React.createElement("tbody", null, this.data.map((row, rowIndex) => {
697
803
  var _a;
698
- 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((columnDefinition, colIndex) => {
804
+ const rowProps = this.getRowProps(row);
805
+ const pluginOnClick = rowProps.onClick;
806
+ return (React.createElement("tr", { key: rowIndex, className: `${((_a = this.props.animationProps) === null || _a === void 0 ? void 0 : _a.animateOnLoad) ? styles$2.animatedRow : ''} ${rowProps.className || ''}`.trim(), style: Object.assign({ animationDelay: `${rowIndex * 0.05}s` }, this.rowClickStyle), "aria-selected": rowProps['aria-selected'], onClick: (e) => {
807
+ if (pluginOnClick)
808
+ pluginOnClick(e);
809
+ this.rowClickFunction(row);
810
+ } }, this.props.columnDefinitions.map((columnDefinition, colIndex) => {
699
811
  const colDef = this.getColumnDefinition(columnDefinition, rowIndex);
700
812
  const cellContent = colDef.cellRenderer(row);
701
- return (React.createElement("td", { onClick: () => this.rowClickFunction(row), key: colIndex },
702
- React.createElement("span", { style: Object.assign({}, this.rowClickStyle) }, this.renderCell(cellContent, row, colDef))));
813
+ return (React.createElement("td", { key: colIndex }, this.renderCell(cellContent, row, colDef)));
703
814
  })));
704
815
  })),
705
816
  this.tableFooter),
@@ -763,9 +874,9 @@ class InfiniteScrollPlugin {
763
874
  }
764
875
  };
765
876
  this.handleScroll = () => __awaiter(this, void 0, void 0, function* () {
766
- var _a, _b, _c, _d, _e;
877
+ var _a, _b, _c, _d;
767
878
  const scrollableElement = (_b = (_a = this.api).getScrollableElement) === null || _b === void 0 ? void 0 : _b.call(_a);
768
- if (!scrollableElement || !((_c = this.api.infiniteScrollProps) === null || _c === void 0 ? void 0 : _c.enableInfiniteScroll)) {
879
+ if (!scrollableElement || !this.api.infiniteScrollProps) {
769
880
  return;
770
881
  }
771
882
  const { scrollTop, scrollHeight, clientHeight } = scrollableElement;
@@ -775,7 +886,7 @@ class InfiniteScrollPlugin {
775
886
  !this.isLoadingMore) {
776
887
  this.isLoadingMore = true;
777
888
  this.api.forceUpdate(); // Trigger re-render to show loading component
778
- yield ((_e = (_d = this.api.infiniteScrollProps).onLoadMore) === null || _e === void 0 ? void 0 : _e.call(_d, this.api.getData()));
889
+ yield ((_d = (_c = this.api.infiniteScrollProps).onLoadMore) === null || _d === void 0 ? void 0 : _d.call(_c, this.api.getData()));
779
890
  this.isLoadingMore = false;
780
891
  this.api.forceUpdate(); // Trigger re-render to hide loading component
781
892
  }
@@ -926,6 +1037,7 @@ class SortPlugin {
926
1037
 
927
1038
  exports.FilterPlugin = FilterPlugin;
928
1039
  exports.InfiniteScrollPlugin = InfiniteScrollPlugin;
1040
+ exports.SelectionPlugin = SelectionPlugin;
929
1041
  exports.SortPlugin = SortPlugin;
930
1042
  exports.default = ResponsiveTable;
931
1043
  //# sourceMappingURL=index.js.map