jattac.libs.web.responsive-table 0.2.17 → 0.2.19
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.
- package/README.md +638 -638
- package/dist/UI/InfiniteTable.d.ts +3 -0
- package/dist/UI/LoadingSpinner.d.ts +3 -0
- package/dist/UI/NoMoreDataMessage.d.ts +3 -0
- package/dist/index.js +89 -52
- package/dist/index.js.map +1 -1
- package/package.json +65 -66
|
@@ -52,6 +52,7 @@ declare class InfiniteTable<TData> extends Component<IProps<TData>, IState<TData
|
|
|
52
52
|
private headerRef;
|
|
53
53
|
private throttledScrollHandler;
|
|
54
54
|
constructor(props: IProps<TData>);
|
|
55
|
+
componentDidUpdate(prevProps: IProps<TData>): void;
|
|
55
56
|
componentDidMount(): void;
|
|
56
57
|
componentWillUnmount(): void;
|
|
57
58
|
private debounce;
|
|
@@ -64,6 +65,8 @@ declare class InfiniteTable<TData> extends Component<IProps<TData>, IState<TData
|
|
|
64
65
|
private get data();
|
|
65
66
|
private get hasData();
|
|
66
67
|
private get noDataComponent();
|
|
68
|
+
private get defaultLoadingComponent();
|
|
69
|
+
private get defaultNoMoreDataComponent();
|
|
67
70
|
private getColumnDefinition;
|
|
68
71
|
private getRawColumnDefinition;
|
|
69
72
|
private onHeaderClickCallback;
|
package/dist/index.js
CHANGED
|
@@ -52,7 +52,7 @@ function styleInject(css, ref) {
|
|
|
52
52
|
if ( ref === void 0 ) ref = {};
|
|
53
53
|
var insertAt = ref.insertAt;
|
|
54
54
|
|
|
55
|
-
if (typeof document === 'undefined') { return; }
|
|
55
|
+
if (!css || typeof document === 'undefined') { return; }
|
|
56
56
|
|
|
57
57
|
var head = document.head || document.getElementsByTagName('head')[0];
|
|
58
58
|
var style = document.createElement('style');
|
|
@@ -75,9 +75,9 @@ function styleInject(css, ref) {
|
|
|
75
75
|
}
|
|
76
76
|
}
|
|
77
77
|
|
|
78
|
-
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; /* 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}\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;\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- {\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";
|
|
79
|
-
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","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-"};
|
|
80
|
-
styleInject(css_248z);
|
|
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;\r\n top: 0;\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}\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;\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- {\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/* 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-","spinner":"ResponsiveTable-module_spinner__Pn-3D","spin":"ResponsiveTable-module_spin__i3NHn","infoContainer":"ResponsiveTable-module_infoContainer__b9IF5","noMoreData":"ResponsiveTable-module_noMoreData__he1rZ"};
|
|
80
|
+
styleInject(css_248z$2);
|
|
81
81
|
|
|
82
82
|
class FilterPlugin {
|
|
83
83
|
constructor() {
|
|
@@ -183,6 +183,25 @@ class InfiniteScrollPlugin {
|
|
|
183
183
|
}
|
|
184
184
|
}
|
|
185
185
|
|
|
186
|
+
var css_248z$1 = "/* Spinner for Loading More */\n.LoadingSpinner-module_spinner__F9V3x {\n border: 4px solid rgba(0, 0, 0, 0.1);\n border-left-color: var(--interactive-color); /* Use theme color */\n border-radius: 50%;\n width: 24px;\n height: 24px;\n animation: LoadingSpinner-module_spin__VkBDO 1s linear infinite;\n display: inline-block;\n vertical-align: middle;\n margin-right: 8px;\n}\n\n@keyframes LoadingSpinner-module_spin__VkBDO {\n 0% { transform: rotate(0deg); }\n 100% { transform: rotate(360deg); }\n}\n\n/* Shimmer effect for loading content */\n.LoadingSpinner-module_shimmerEffect__TT-Ul {\n position: relative;\n overflow: hidden;\n background: #f6f7f8; /* Light background for shimmer */\n background: linear-gradient(to right, #f6f7f8 0%, #edeef1 20%, #f6f7f8 40%);\n background-size: 1000px 100%;\n animation: LoadingSpinner-module_shimmer__ZLf78 1.5s infinite linear;\n}\n\n@keyframes LoadingSpinner-module_shimmer__ZLf78 {\n 0% {\n background-position: -500px 0;\n }\n 100% {\n background-position: 500px 0;\n }\n}";
|
|
187
|
+
var styles$1 = {"spinner":"LoadingSpinner-module_spinner__F9V3x","shimmerEffect":"LoadingSpinner-module_shimmerEffect__TT-Ul"};
|
|
188
|
+
styleInject(css_248z$1);
|
|
189
|
+
|
|
190
|
+
var css_248z = "/* Loading/No More Data Container */\r\n.NoMoreDataMessage-module_infoContainer__dk1r5 {\r\n display: flex;\r\n justify-content: center;\r\n align-items: center;\r\n padding: 20px;\r\n color: var(--text-color-muted);\r\n font-size: 0.9rem;\r\n gap: 8px;\r\n background-color: var(--table-header-bg);\r\n border-top: 1px solid var(--table-border-color);\r\n}\r\n\r\n.NoMoreDataMessage-module_infoContainer__dk1r5.NoMoreDataMessage-module_noMoreData__ATuIg {\r\n font-weight: 500;\r\n}";
|
|
191
|
+
var styles = {"infoContainer":"NoMoreDataMessage-module_infoContainer__dk1r5","noMoreData":"NoMoreDataMessage-module_noMoreData__ATuIg"};
|
|
192
|
+
styleInject(css_248z);
|
|
193
|
+
|
|
194
|
+
const LoadingSpinner = () => {
|
|
195
|
+
return (React.createElement("div", { className: `${styles.infoContainer} ${styles$1.shimmerEffect}` },
|
|
196
|
+
React.createElement("div", { className: styles$1.spinner }),
|
|
197
|
+
React.createElement("span", null, "Loading more items...")));
|
|
198
|
+
};
|
|
199
|
+
|
|
200
|
+
const NoMoreDataMessage = () => {
|
|
201
|
+
return (React.createElement("div", { className: `${styles.infoContainer} ${styles.noMoreData}` },
|
|
202
|
+
React.createElement("p", null, "You've reached the end!")));
|
|
203
|
+
};
|
|
204
|
+
|
|
186
205
|
class InfiniteTable extends React.Component {
|
|
187
206
|
constructor(props) {
|
|
188
207
|
super(props);
|
|
@@ -272,7 +291,7 @@ class InfiniteTable extends React.Component {
|
|
|
272
291
|
this.getClickableHeaderClassName = (colDef) => {
|
|
273
292
|
var _a;
|
|
274
293
|
const raw = this.getRawColumnDefinition(colDef);
|
|
275
|
-
return ((_a = raw.interactivity) === null || _a === void 0 ? void 0 : _a.onHeaderClick) ? raw.interactivity.className || styles.clickableHeader : '';
|
|
294
|
+
return ((_a = raw.interactivity) === null || _a === void 0 ? void 0 : _a.onHeaderClick) ? raw.interactivity.className || styles$2.clickableHeader : '';
|
|
276
295
|
};
|
|
277
296
|
this.getHeaderProps = (colDef) => {
|
|
278
297
|
const headerProps = {};
|
|
@@ -295,6 +314,11 @@ class InfiniteTable extends React.Component {
|
|
|
295
314
|
this.debouncedResize = this.debounce(this.handleResize, 200);
|
|
296
315
|
this.throttledScrollHandler = this.throttle(this.handleScroll, 200);
|
|
297
316
|
}
|
|
317
|
+
componentDidUpdate(prevProps) {
|
|
318
|
+
if (prevProps.data !== this.props.data) {
|
|
319
|
+
this.setState({ internalData: this.props.data }, () => this.processData());
|
|
320
|
+
}
|
|
321
|
+
}
|
|
298
322
|
componentDidMount() {
|
|
299
323
|
this.handleResize();
|
|
300
324
|
window.addEventListener('resize', this.debouncedResize);
|
|
@@ -336,7 +360,13 @@ class InfiniteTable extends React.Component {
|
|
|
336
360
|
return this.data.length > 0;
|
|
337
361
|
}
|
|
338
362
|
get noDataComponent() {
|
|
339
|
-
return this.props.noDataComponent || React.createElement("div", { className: styles.noData }, "No data");
|
|
363
|
+
return this.props.noDataComponent || React.createElement("div", { className: styles$2.noData }, "No data");
|
|
364
|
+
}
|
|
365
|
+
get defaultLoadingComponent() {
|
|
366
|
+
return React.createElement(LoadingSpinner, null);
|
|
367
|
+
}
|
|
368
|
+
get defaultNoMoreDataComponent() {
|
|
369
|
+
return React.createElement(NoMoreDataMessage, null);
|
|
340
370
|
}
|
|
341
371
|
get rowClickFunction() {
|
|
342
372
|
return this.props.onRowClick || (() => { });
|
|
@@ -345,17 +375,24 @@ class InfiniteTable extends React.Component {
|
|
|
345
375
|
return this.props.onRowClick ? { cursor: 'pointer' } : {};
|
|
346
376
|
}
|
|
347
377
|
get mobileView() {
|
|
348
|
-
|
|
349
|
-
|
|
350
|
-
|
|
351
|
-
|
|
352
|
-
|
|
353
|
-
|
|
354
|
-
|
|
355
|
-
|
|
356
|
-
|
|
357
|
-
|
|
358
|
-
|
|
378
|
+
var _a;
|
|
379
|
+
const { infiniteScrollProps } = this.props;
|
|
380
|
+
const { isLoadingMore } = this.state;
|
|
381
|
+
const hasMore = ((_a = this.props.infiniteScrollProps) === null || _a === void 0 ? void 0 : _a.hasMore) !== undefined ? this.props.infiniteScrollProps.hasMore : this.state.internalHasMore;
|
|
382
|
+
return (React.createElement("div", null,
|
|
383
|
+
this.data.map((row, rowIndex) => {
|
|
384
|
+
var _a;
|
|
385
|
+
return (React.createElement("div", { key: rowIndex, className: `${styles$2['card']} ${((_a = this.props.animationProps) === null || _a === void 0 ? void 0 : _a.animateOnLoad) ? styles$2.animatedRow : ''}`, style: { animationDelay: `${rowIndex * 0.05}s` }, onClick: () => this.rowClickFunction(row) },
|
|
386
|
+
React.createElement("div", { className: styles$2['card-body'] }, this.props.columnDefinitions.map((colDef, colIndex) => {
|
|
387
|
+
const column = this.getColumnDefinition(colDef, rowIndex);
|
|
388
|
+
return (React.createElement("div", { key: colIndex, className: styles$2['card-row'] },
|
|
389
|
+
React.createElement("p", null,
|
|
390
|
+
React.createElement("span", { className: styles$2['card-label'] }, column.displayLabel),
|
|
391
|
+
React.createElement("span", { className: styles$2['card-value'] }, column.cellRenderer(row)))));
|
|
392
|
+
}))));
|
|
393
|
+
}),
|
|
394
|
+
isLoadingMore && ((infiniteScrollProps === null || infiniteScrollProps === void 0 ? void 0 : infiniteScrollProps.loadingMoreComponent) || this.defaultLoadingComponent),
|
|
395
|
+
!isLoadingMore && !hasMore && ((infiniteScrollProps === null || infiniteScrollProps === void 0 ? void 0 : infiniteScrollProps.noMoreDataComponent) || this.defaultNoMoreDataComponent)));
|
|
359
396
|
}
|
|
360
397
|
get largeScreenView() {
|
|
361
398
|
var _a;
|
|
@@ -363,26 +400,26 @@ class InfiniteTable extends React.Component {
|
|
|
363
400
|
const { isLoadingMore } = this.state;
|
|
364
401
|
const hasMore = ((_a = this.props.infiniteScrollProps) === null || _a === void 0 ? void 0 : _a.hasMore) !== undefined ? this.props.infiniteScrollProps.hasMore : this.state.internalHasMore;
|
|
365
402
|
return (React.createElement("div", { ref: this.tableContainerRef, onScroll: this.throttledScrollHandler, style: { maxHeight: this.props.maxHeight, overflowY: 'auto' } },
|
|
366
|
-
React.createElement("table", { className: styles['responsiveTable'] },
|
|
367
|
-
React.createElement("thead", { ref: this.headerRef, className: this.state.isHeaderSticky ? styles.stickyHeader : '' },
|
|
403
|
+
React.createElement("table", { className: styles$2['responsiveTable'] },
|
|
404
|
+
React.createElement("thead", { ref: this.headerRef, className: this.state.isHeaderSticky ? styles$2.stickyHeader : '' },
|
|
368
405
|
React.createElement("tr", null, this.props.columnDefinitions.map((colDef, colIndex) => {
|
|
369
406
|
const rawColDef = this.getRawColumnDefinition(colDef);
|
|
370
407
|
const headerProps = this.getHeaderProps(rawColDef);
|
|
371
408
|
const onHeaderClickCallback = this.onHeaderClickCallback(rawColDef);
|
|
372
|
-
const combinedClassName = `${this.getClickableHeaderClassName(rawColDef)} ${headerProps.className ? styles[headerProps.className] : ''}`.trim();
|
|
409
|
+
const combinedClassName = `${this.getClickableHeaderClassName(rawColDef)} ${headerProps.className ? styles$2[headerProps.className] : ''}`.trim();
|
|
373
410
|
// eslint-disable-next-line @typescript-eslint/no-unused-vars
|
|
374
411
|
const { className } = headerProps, restHeaderProps = __rest(headerProps, ["className"]);
|
|
375
412
|
return (React.createElement("th", Object.assign({ key: colIndex, className: combinedClassName }, restHeaderProps, { onClick: onHeaderClickCallback ? () => onHeaderClickCallback(rawColDef.interactivity.id) : undefined }),
|
|
376
|
-
React.createElement("div", { className: styles.headerInnerWrapper },
|
|
377
|
-
React.createElement("div", { className: styles.headerContent }, rawColDef.displayLabel),
|
|
378
|
-
React.createElement("span", { className: styles.sortIcon }))));
|
|
413
|
+
React.createElement("div", { className: styles$2.headerInnerWrapper },
|
|
414
|
+
React.createElement("div", { className: styles$2.headerContent }, rawColDef.displayLabel),
|
|
415
|
+
React.createElement("span", { className: styles$2.sortIcon }))));
|
|
379
416
|
}))),
|
|
380
417
|
React.createElement("tbody", null, this.data.map((row, rowIndex) => {
|
|
381
418
|
var _a;
|
|
382
|
-
return (React.createElement("tr", { key: rowIndex, className: ((_a = this.props.animationProps) === null || _a === void 0 ? void 0 : _a.animateOnLoad) ? styles.animatedRow : '', style: { animationDelay: `${rowIndex * 0.05}s` } }, this.props.columnDefinitions.map((colDef, colIndex) => (React.createElement("td", { key: colIndex, onClick: () => this.rowClickFunction(row), style: this.rowClickStyle }, this.getColumnDefinition(colDef, rowIndex).cellRenderer(row))))));
|
|
419
|
+
return (React.createElement("tr", { key: rowIndex, className: ((_a = this.props.animationProps) === null || _a === void 0 ? void 0 : _a.animateOnLoad) ? styles$2.animatedRow : '', style: { animationDelay: `${rowIndex * 0.05}s` } }, this.props.columnDefinitions.map((colDef, colIndex) => (React.createElement("td", { key: colIndex, onClick: () => this.rowClickFunction(row), style: this.rowClickStyle }, this.getColumnDefinition(colDef, rowIndex).cellRenderer(row))))));
|
|
383
420
|
}))),
|
|
384
|
-
isLoadingMore && (infiniteScrollProps === null || infiniteScrollProps === void 0 ? void 0 : infiniteScrollProps.loadingMoreComponent),
|
|
385
|
-
!isLoadingMore && !hasMore && (infiniteScrollProps === null || infiniteScrollProps === void 0 ? void 0 : infiniteScrollProps.noMoreDataComponent)));
|
|
421
|
+
isLoadingMore && ((infiniteScrollProps === null || infiniteScrollProps === void 0 ? void 0 : infiniteScrollProps.loadingMoreComponent) || this.defaultLoadingComponent),
|
|
422
|
+
!isLoadingMore && !hasMore && ((infiniteScrollProps === null || infiniteScrollProps === void 0 ? void 0 : infiniteScrollProps.noMoreDataComponent) || this.defaultNoMoreDataComponent)));
|
|
386
423
|
}
|
|
387
424
|
render() {
|
|
388
425
|
var _a;
|
|
@@ -449,9 +486,9 @@ class ResponsiveTable extends React.Component {
|
|
|
449
486
|
return this.data.length > 0;
|
|
450
487
|
}
|
|
451
488
|
get noDataComponent() {
|
|
452
|
-
return (this.props.noDataComponent || (React.createElement("div", { className: styles.noDataWrapper },
|
|
489
|
+
return (this.props.noDataComponent || (React.createElement("div", { className: styles$2.noDataWrapper },
|
|
453
490
|
this.noDataSvg,
|
|
454
|
-
React.createElement("div", { className: styles.noData }, "No data"))));
|
|
491
|
+
React.createElement("div", { className: styles$2.noData }, "No data"))));
|
|
455
492
|
}
|
|
456
493
|
componentDidMount() {
|
|
457
494
|
this.handleResize(); // Initial check
|
|
@@ -547,7 +584,7 @@ class ResponsiveTable extends React.Component {
|
|
|
547
584
|
getClickableHeaderClassName(onHeaderClickCallback, colDef) {
|
|
548
585
|
const rawColumnDefinition = this.getRawColumnDefinition(colDef);
|
|
549
586
|
const clickableHeaderClassName = onHeaderClickCallback
|
|
550
|
-
? rawColumnDefinition.interactivity.className || styles.clickableHeader
|
|
587
|
+
? rawColumnDefinition.interactivity.className || styles$2.clickableHeader
|
|
551
588
|
: '';
|
|
552
589
|
return clickableHeaderClassName;
|
|
553
590
|
}
|
|
@@ -582,14 +619,14 @@ class ResponsiveTable extends React.Component {
|
|
|
582
619
|
if (!this.props.footerRows || this.props.footerRows.length === 0) {
|
|
583
620
|
return null;
|
|
584
621
|
}
|
|
585
|
-
return (React.createElement("tfoot", null, this.props.footerRows.map((row, rowIndex) => (React.createElement("tr", { key: rowIndex }, row.columns.map((col, colIndex) => (React.createElement("td", { key: colIndex, colSpan: col.colSpan, className: `${styles.footerCell} ${col.className || ''} ${col.onCellClick ? styles.clickableFooterCell : ''}`, onClick: col.onCellClick }, col.cellRenderer()))))))));
|
|
622
|
+
return (React.createElement("tfoot", null, this.props.footerRows.map((row, rowIndex) => (React.createElement("tr", { key: rowIndex }, row.columns.map((col, colIndex) => (React.createElement("td", { key: colIndex, colSpan: col.colSpan, className: `${styles$2.footerCell} ${col.className || ''} ${col.onCellClick ? styles$2.clickableFooterCell : ''}`, onClick: col.onCellClick }, col.cellRenderer()))))))));
|
|
586
623
|
}
|
|
587
624
|
get mobileFooter() {
|
|
588
625
|
if (!this.props.footerRows || this.props.footerRows.length === 0) {
|
|
589
626
|
return null;
|
|
590
627
|
}
|
|
591
|
-
return (React.createElement("div", { className: styles.footerCard },
|
|
592
|
-
React.createElement("div", { className: styles['footer-card-body'] }, this.props.footerRows.map((row, rowIndex) => {
|
|
628
|
+
return (React.createElement("div", { className: styles$2.footerCard },
|
|
629
|
+
React.createElement("div", { className: styles$2['footer-card-body'] }, this.props.footerRows.map((row, rowIndex) => {
|
|
593
630
|
let currentColumnIndex = 0;
|
|
594
631
|
return (React.createElement("div", { key: rowIndex }, row.columns.map((col, colIndex) => {
|
|
595
632
|
let label = col.displayLabel;
|
|
@@ -600,9 +637,9 @@ class ResponsiveTable extends React.Component {
|
|
|
600
637
|
}
|
|
601
638
|
}
|
|
602
639
|
currentColumnIndex += col.colSpan;
|
|
603
|
-
return (React.createElement("p", { key: colIndex, className: `${styles['footer-card-row']} ${col.className || ''} ${col.onCellClick ? styles.clickableFooterCell : ''}`, onClick: col.onCellClick },
|
|
604
|
-
label && React.createElement("span", { className: styles['card-label'] }, label),
|
|
605
|
-
React.createElement("span", { className: styles['card-value'] }, col.cellRenderer())));
|
|
640
|
+
return (React.createElement("p", { key: colIndex, className: `${styles$2['footer-card-row']} ${col.className || ''} ${col.onCellClick ? styles$2.clickableFooterCell : ''}`, onClick: col.onCellClick },
|
|
641
|
+
label && React.createElement("span", { className: styles$2['card-label'] }, label),
|
|
642
|
+
React.createElement("span", { className: styles$2['card-value'] }, col.cellRenderer())));
|
|
606
643
|
})));
|
|
607
644
|
}))));
|
|
608
645
|
}
|
|
@@ -610,33 +647,33 @@ class ResponsiveTable extends React.Component {
|
|
|
610
647
|
const skeletonRowCount = 5; // Or make this configurable
|
|
611
648
|
const columnCount = this.props.columnDefinitions.length;
|
|
612
649
|
if (this.state.isMobile) {
|
|
613
|
-
return (React.createElement("div", null, [...Array(skeletonRowCount)].map((_, i) => (React.createElement("div", { key: i, className: styles.skeletonCard }, [...Array(columnCount)].map((_, j) => (React.createElement("div", { key: j, className: `${styles.skeleton} ${styles.skeletonText}`, style: { marginBottom: '0.5rem' } }))))))));
|
|
650
|
+
return (React.createElement("div", null, [...Array(skeletonRowCount)].map((_, i) => (React.createElement("div", { key: i, className: styles$2.skeletonCard }, [...Array(columnCount)].map((_, j) => (React.createElement("div", { key: j, className: `${styles$2.skeleton} ${styles$2.skeletonText}`, style: { marginBottom: '0.5rem' } }))))))));
|
|
614
651
|
}
|
|
615
|
-
return (React.createElement("table", { className: styles.responsiveTable },
|
|
652
|
+
return (React.createElement("table", { className: styles$2.responsiveTable },
|
|
616
653
|
React.createElement("thead", null,
|
|
617
654
|
React.createElement("tr", null, [...Array(columnCount)].map((_, i) => (React.createElement("th", { key: i },
|
|
618
|
-
React.createElement("div", { className: `${styles.skeleton} ${styles.skeletonText}` })))))),
|
|
655
|
+
React.createElement("div", { className: `${styles$2.skeleton} ${styles$2.skeletonText}` })))))),
|
|
619
656
|
React.createElement("tbody", null, [...Array(skeletonRowCount)].map((_, i) => (React.createElement("tr", { key: i }, [...Array(columnCount)].map((_, j) => (React.createElement("td", { key: j },
|
|
620
|
-
React.createElement("div", { className: `${styles.skeleton} ${styles.skeletonText}` }))))))))));
|
|
657
|
+
React.createElement("div", { className: `${styles$2.skeleton} ${styles$2.skeletonText}` }))))))))));
|
|
621
658
|
}
|
|
622
659
|
get mobileView() {
|
|
623
660
|
return (React.createElement("div", null,
|
|
624
661
|
this.data.map((row, rowIndex) => {
|
|
625
662
|
var _a;
|
|
626
|
-
return (React.createElement("div", { key: rowIndex, className: `${styles['card']} ${((_a = this.props.animationProps) === null || _a === void 0 ? void 0 : _a.animateOnLoad) ? styles.animatedRow : ''}`, style: { animationDelay: `${rowIndex * 0.05}s` }, onClick: (e) => {
|
|
663
|
+
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) => {
|
|
627
664
|
this.rowClickFunction(row);
|
|
628
665
|
e.stopPropagation();
|
|
629
666
|
e.preventDefault();
|
|
630
667
|
} },
|
|
631
|
-
React.createElement("div", { className: styles['card-header'] }, " "),
|
|
632
|
-
React.createElement("div", { className: styles['card-body'] }, this.props.columnDefinitions.map((columnDefinition, colIndex) => {
|
|
668
|
+
React.createElement("div", { className: styles$2['card-header'] }, " "),
|
|
669
|
+
React.createElement("div", { className: styles$2['card-body'] }, this.props.columnDefinitions.map((columnDefinition, colIndex) => {
|
|
633
670
|
const colDef = this.getColumnDefinition(columnDefinition, rowIndex);
|
|
634
671
|
const onHeaderClickCallback = this.onHeaderClickCallback(colDef);
|
|
635
672
|
const clickableHeaderClassName = this.getClickableHeaderClassName(onHeaderClickCallback, colDef);
|
|
636
|
-
return (React.createElement("div", { key: colIndex, className: styles['card-row'] },
|
|
673
|
+
return (React.createElement("div", { key: colIndex, className: styles$2['card-row'] },
|
|
637
674
|
React.createElement("p", null,
|
|
638
|
-
React.createElement("span", { className: `${styles['card-label']} ${clickableHeaderClassName}`, onClick: onHeaderClickCallback ? () => onHeaderClickCallback(colDef.interactivity.id) : undefined }, colDef.displayLabel),
|
|
639
|
-
React.createElement("span", { className: styles['card-value'] }, colDef.cellRenderer(row)))));
|
|
675
|
+
React.createElement("span", { className: `${styles$2['card-label']} ${clickableHeaderClassName}`, onClick: onHeaderClickCallback ? () => onHeaderClickCallback(colDef.interactivity.id) : undefined }, colDef.displayLabel),
|
|
676
|
+
React.createElement("span", { className: styles$2['card-value'] }, colDef.cellRenderer(row)))));
|
|
640
677
|
}))));
|
|
641
678
|
}),
|
|
642
679
|
this.mobileFooter));
|
|
@@ -647,25 +684,25 @@ class ResponsiveTable extends React.Component {
|
|
|
647
684
|
? { maxHeight: this.props.maxHeight, overflowY: 'auto' }
|
|
648
685
|
: {};
|
|
649
686
|
return (React.createElement("div", { style: fixedHeadersStyle, ref: this.tableContainerRef },
|
|
650
|
-
React.createElement("table", { className: styles['responsiveTable'] },
|
|
651
|
-
React.createElement("thead", { ref: this.headerRef, className: this.state.isHeaderSticky ? styles.stickyHeader : '' },
|
|
687
|
+
React.createElement("table", { className: styles$2['responsiveTable'] },
|
|
688
|
+
React.createElement("thead", { ref: this.headerRef, className: this.state.isHeaderSticky ? styles$2.stickyHeader : '' },
|
|
652
689
|
React.createElement("tr", null, this.props.columnDefinitions.map((columnDefinition, colIndex) => {
|
|
653
690
|
const onHeaderClickCallback = this.onHeaderClickCallback(columnDefinition);
|
|
654
691
|
const clickableHeaderClassName = this.getClickableHeaderClassName(onHeaderClickCallback, columnDefinition);
|
|
655
692
|
const headerProps = this.getHeaderProps(columnDefinition);
|
|
656
693
|
// Combine class names: existing clickable, and plugin-provided (mapped to CSS Modules)
|
|
657
|
-
const combinedClassName = `${clickableHeaderClassName} ${headerProps.className ? styles[headerProps.className] : ''}`.trim();
|
|
694
|
+
const combinedClassName = `${clickableHeaderClassName} ${headerProps.className ? styles$2[headerProps.className] : ''}`.trim();
|
|
658
695
|
// Remove className from headerProps to avoid duplication
|
|
659
696
|
// eslint-disable-next-line @typescript-eslint/no-unused-vars
|
|
660
697
|
const { className } = headerProps, restHeaderProps = __rest(headerProps, ["className"]);
|
|
661
698
|
return (React.createElement("th", Object.assign({ key: colIndex, className: combinedClassName }, restHeaderProps),
|
|
662
|
-
React.createElement("div", { className: styles.headerInnerWrapper },
|
|
663
|
-
React.createElement("div", { className: styles.headerContent }, this.getColumnDefinition(columnDefinition, 0).displayLabel),
|
|
664
|
-
React.createElement("span", { className: styles.sortIcon }))));
|
|
699
|
+
React.createElement("div", { className: styles$2.headerInnerWrapper },
|
|
700
|
+
React.createElement("div", { className: styles$2.headerContent }, this.getColumnDefinition(columnDefinition, 0).displayLabel),
|
|
701
|
+
React.createElement("span", { className: styles$2.sortIcon }))));
|
|
665
702
|
}))),
|
|
666
703
|
React.createElement("tbody", null, this.data.map((row, rowIndex) => {
|
|
667
704
|
var _a;
|
|
668
|
-
return (React.createElement("tr", { key: rowIndex, className: ((_a = this.props.animationProps) === null || _a === void 0 ? void 0 : _a.animateOnLoad) ? styles.animatedRow : '', style: { animationDelay: `${rowIndex * 0.05}s` } }, this.props.columnDefinitions.map((columnDefinition, colIndex) => (React.createElement("td", { onClick: () => this.rowClickFunction(row), key: colIndex },
|
|
705
|
+
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) => (React.createElement("td", { onClick: () => this.rowClickFunction(row), key: colIndex },
|
|
669
706
|
React.createElement("span", { style: Object.assign({}, this.rowClickStyle) }, this.getColumnDefinition(columnDefinition, rowIndex).cellRenderer(row)))))));
|
|
670
707
|
})),
|
|
671
708
|
this.tableFooter),
|