jattac.libs.web.responsive-table 0.0.25 → 0.1.0

package/dist/index.js

@@ -29,8 +29,8 @@ function styleInject(css, ref) {
   }
 }
 
-var css_248z = ".ResponsiveTable-module_card__b-U2v {\r\n  border: 1px solid #ccc;\r\n  margin-bottom: 10px;\r\n  border-radius: 8px;\r\n  overflow: hidden;\r\n  box-shadow: 0 0 5px rgba(0, 0, 0, 0.1);\r\n}\r\n\r\n.ResponsiveTable-module_card-header__Ttk51 {\r\n  background-color: #f0f0f0;\r\n  padding: 10px;\r\n  font-weight: bold;\r\n}\r\n\r\n.ResponsiveTable-module_card-body__XIy0h {\r\n  padding: 10px;\r\n}\r\n\r\n.ResponsiveTable-module_responsiveTable__4y-Od {\r\n  width: 100%;\r\n  border-collapse: collapse;\r\n}\r\n\r\n.ResponsiveTable-module_responsiveTable__4y-Od thead th {\r\n  background-color: #f2f2f2;\r\n  position: sticky;\r\n  top: 0;\r\n  z-index: 2;\r\n}\r\n\r\n.ResponsiveTable-module_responsiveTable__4y-Od th,\r\n.ResponsiveTable-module_responsiveTable__4y-Od td {\r\n  padding: 12px;\r\n  border-bottom: 1px solid #dddddd;\r\n  text-align: left;\r\n}\r\n\r\n/* Alternate row colors */\r\n.ResponsiveTable-module_responsiveTable__4y-Od tr:nth-child(even) {\r\n  background-color: #f9f9f9;\r\n}\r\n\r\n/* Change background color on hover */\r\n.ResponsiveTable-module_responsiveTable__4y-Od tr:hover {\r\n  background-color: #d9edf7;\r\n}\r\n\r\n.ResponsiveTable-module_clickableHeader__xHQhF {\r\n  cursor: pointer;\r\n  color: #007bff;\r\n}\r\n\r\n.ResponsiveTable-module_clickableHeader__xHQhF:hover {\r\n  text-decoration: underline;\r\n}\r\n\r\n.ResponsiveTable-module_noDataWrapper__Rj-k3 {\r\n  color: #ca3333;\r\n  display: flex;\r\n  justify-content: center;\r\n  align-items: center;\r\n  height: 100%;\r\n  gap: 10px;\r\n}\r\n\r\n.ResponsiveTable-module_noData__IpwNq {\r\n  text-align: center;\r\n  font-weight: bold;\r\n  padding: 30px;\r\n}\r\n";
-var styles = {"card":"ResponsiveTable-module_card__b-U2v","card-header":"ResponsiveTable-module_card-header__Ttk51","card-body":"ResponsiveTable-module_card-body__XIy0h","responsiveTable":"ResponsiveTable-module_responsiveTable__4y-Od","clickableHeader":"ResponsiveTable-module_clickableHeader__xHQhF","noDataWrapper":"ResponsiveTable-module_noDataWrapper__Rj-k3","noData":"ResponsiveTable-module_noData__IpwNq"};
+var css_248z = "/* Using CSS variables for a more maintainable and themeable design */\n:root {\n  --table-border-color: #e0e0e0;\n  --table-header-bg: #f8f9fa;\n  --table-row-hover-bg: #f1f3f5;\n  --table-row-stripe-bg: #fdfdfd;\n  --card-bg: #ffffff;\n  --card-border-color: #e0e0e0;\n  --card-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);\n  --text-color: #212529;\n  --text-color-muted: #6c757d;\n  --interactive-color: #0056b3;\n}\n\n/* Mobile Card View */\n.ResponsiveTable-module_card__b-U2v {\n  background-color: var(--card-bg);\n  border: 1px solid var(--card-border-color);\n  margin-bottom: 1rem;\n  border-radius: 8px;\n  overflow: hidden;\n  box-shadow: var(--card-shadow);\n  transition: box-shadow 0.2s ease-in-out;\n}\n\n.ResponsiveTable-module_card__b-U2v:hover {\n  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);\n}\n\n/* This is not used in the component, but keeping it styled in case it's added back */\n.ResponsiveTable-module_card-header__Ttk51 {\n  background-color: var(--table-header-bg);\n  padding: 0.75rem 1rem;\n  font-weight: 600; /* Bolder */\n  border-bottom: 1px solid var(--table-border-color);\n}\n\n.ResponsiveTable-module_card-body__XIy0h {\n  padding: 1rem;\n  font-size: 0.9rem;\n}\n\n.ResponsiveTable-module_card-body__XIy0h p {\n  margin: 0 0 0.75rem;\n  display: flex;\n  justify-content: space-between;\n}\n\n.ResponsiveTable-module_card-body__XIy0h p:last-child {\n  margin-bottom: 0;\n}\n\n.ResponsiveTable-module_card-body__XIy0h span:first-child {\n  font-weight: 600;\n  color: var(--text-color);\n  margin-right: 0.5rem;\n}\n\n/* Desktop Table View */\n.ResponsiveTable-module_responsiveTable__4y-Od {\n  width: 100%;\n  border-collapse: collapse;\n  color: var(--text-color);\n}\n\n.ResponsiveTable-module_responsiveTable__4y-Od thead th {\n  background-color: var(--table-header-bg);\n  position: sticky;\n  top: 0;\n  z-index: 2;\n  font-weight: 600;\n  text-align: left;\n  padding: 1rem;\n  border-bottom: 2px solid var(--table-border-color);\n}\n\n.ResponsiveTable-module_responsiveTable__4y-Od td {\n  padding: 1rem;\n  border-bottom: 1px solid var(--table-border-color);\n  text-align: left;\n}\n\n/* Remove alternating row colors for a cleaner look */\n.ResponsiveTable-module_responsiveTable__4y-Od tr {\n  background-color: var(--card-bg);\n  transition: background-color 0.2s ease-in-out;\n}\n\n/* Modern hover effect */\n.ResponsiveTable-module_responsiveTable__4y-Od tr:hover {\n  background-color: var(--table-row-hover-bg);\n}\n\n/* Clickable Header Style */\n.ResponsiveTable-module_clickableHeader__xHQhF {\n  cursor: pointer;\n  color: var(--interactive-color);\n}\n\n.ResponsiveTable-module_clickableHeader__xHQhF:hover {\n  text-decoration: underline;\n}\n\n.ResponsiveTable-module_responsiveTable__4y-Od tfoot {\n  background-color: var(--table-header-bg);\n  border-top: 2px solid var(--table-border-color);\n  font-weight: 600;\n}\n\n.ResponsiveTable-module_footerCell__8H-uG {\n  padding: 1rem;\n  text-align: right;\n}\n\n/* No Data State */\n\n/* Staggered Entrance Animation */\n.ResponsiveTable-module_animatedRow__SFjrJ {\n  animation: ResponsiveTable-module_fadeInUp__jMCS7 0.5s ease-out forwards;\n  opacity: 0;\n}\n\n@keyframes ResponsiveTable-module_fadeInUp__jMCS7 {\n  from {\n    opacity: 0;\n    transform: translateY(20px);\n  }\n  to {\n    opacity: 1;\n    transform: translateY(0);\n  }\n}\n\n/* Skeleton Loader */\n.ResponsiveTable-module_skeleton__XxsXW {\n  background-color: #e0e0e0;\n  border-radius: 4px;\n  position: relative;\n  overflow: hidden;\n}\n\n.ResponsiveTable-module_skeleton__XxsXW::after {\n  content: '';\n  position: absolute;\n  top: 0;\n  left: -150%;\n  width: 150%;\n  height: 100%;\n  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.4), transparent);\n  animation: ResponsiveTable-module_shimmer__H8PhC 1.5s infinite;\n}\n\n.ResponsiveTable-module_skeletonText__T-Lgq {\n  height: 1.2em;\n  width: 100%;\n}\n\n.ResponsiveTable-module_skeletonCard__AYVwL {\n  background-color: var(--card-bg);\n  border: 1px solid var(--card-border-color);\n  margin-bottom: 1rem;\n  border-radius: 8px;\n  overflow: hidden;\n  padding: 1rem;\n}\n\n@keyframes ResponsiveTable-module_shimmer__H8PhC {\n  0% {\n    transform: translateX(0);\n  }\n  100% {\n    transform: translateX(100%);\n  }\n}\n.ResponsiveTable-module_noDataWrapper__Rj-k3 {\n  color: var(--text-color-muted); /* Softer color */\n  display: flex;\n  justify-content: center;\n  align-items: center;\n  height: 100%;\n  gap: 10px;\n  padding: 40px;\n  background-color: var(--table-header-bg);\n  border: 1px dashed var(--table-border-color);\n  border-radius: 8px;\n}\n\n.ResponsiveTable-module_noData__IpwNq {\n  text-align: center;\n  font-weight: 500; /* Less aggressive than bold */\n  font-size: 1rem;\n}\n";
+var styles = {"card":"ResponsiveTable-module_card__b-U2v","card-header":"ResponsiveTable-module_card-header__Ttk51","card-body":"ResponsiveTable-module_card-body__XIy0h","responsiveTable":"ResponsiveTable-module_responsiveTable__4y-Od","clickableHeader":"ResponsiveTable-module_clickableHeader__xHQhF","footerCell":"ResponsiveTable-module_footerCell__8H-uG","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"};
 styleInject(css_248z);
 
 // Class component
@@ -38,13 +38,24 @@ class ResponsiveTable extends React.Component {
     constructor(props) {
         super(props);
         this.handleResize = () => {
-            this.setState(() => {
-                return { isMobile: window.innerWidth <= 600 };
+            this.setState({
+                isMobile: window.innerWidth <= this.mobileBreakpoint,
             });
         };
         this.state = {
             isMobile: false,
         };
+        this.debouncedResize = this.debounce(this.handleResize, 200);
+    }
+    get mobileBreakpoint() {
+        return this.props.mobileBreakpoint || 600;
+    }
+    debounce(func, delay) {
+        let timeout;
+        return () => {
+            clearTimeout(timeout);
+            timeout = setTimeout(() => func(), delay);
+        };
     }
     get data() {
         if (Array.isArray(this.props.data) && this.props.data.length > 0) {
@@ -67,13 +78,11 @@ class ResponsiveTable extends React.Component {
             React.createElement("div", { className: styles.noData }, "No data"))));
     }
     componentDidMount() {
-        this.setState(() => {
-            return { isMobile: window.innerWidth <= 600 };
-        });
-        window.addEventListener('resize', this.handleResize);
+        this.handleResize(); // Initial check
+        window.addEventListener('resize', this.debouncedResize);
     }
     componentWillUnmount() {
-        window.removeEventListener('resize', this.handleResize);
+        window.removeEventListener('resize', this.debouncedResize);
     }
     getColumnDefinition(columnDefinition, rowIndex) {
         if (!this.hasData) {
@@ -123,25 +132,52 @@ class ResponsiveTable extends React.Component {
             return {};
         }
     }
+    get tableFooter() {
+        if (!this.props.footerRows || this.props.footerRows.length === 0) {
+            return null;
+        }
+        return (React.createElement("tfoot", null, this.props.footerRows.map((row, rowIndex) => (React.createElement("tr", { key: rowIndex }, row.columns.map((col, colIndex) => (React.createElement("td", { key: colIndex, colSpan: col.colSpan, className: styles.footerCell }, col.cellRenderer()))))))));
+    }
+    get mobileFooter() {
+        if (!this.props.footerRows || this.props.footerRows.length === 0) {
+            return null;
+        }
+        return (React.createElement("div", { className: styles['card'] },
+            React.createElement("div", { className: styles['card-body'] }, this.props.footerRows.map((row, rowIndex) => (React.createElement("div", { key: rowIndex }, row.columns.map((col, colIndex) => (React.createElement("div", { key: colIndex }, col.cellRenderer())))))))));
+    }
+    get skeletonView() {
+        const skeletonRowCount = 5; // Or make this configurable
+        const columnCount = this.props.columnDefinitions.length;
+        if (this.state.isMobile) {
+            return (React.createElement("div", null, [...Array(skeletonRowCount)].map((_, i) => (React.createElement("div", { key: i, className: styles.skeletonCard }, [...Array(columnCount)].map((_, j) => (React.createElement("div", { key: j, className: `${styles.skeleton} ${styles.skeletonText}`, style: { marginBottom: '0.5rem' } }))))))));
+        }
+        return (React.createElement("table", { className: styles.responsiveTable },
+            React.createElement("thead", null,
+                React.createElement("tr", null, [...Array(columnCount)].map((_, i) => (React.createElement("th", { key: i },
+                    React.createElement("div", { className: `${styles.skeleton} ${styles.skeletonText}` })))))),
+            React.createElement("tbody", null, [...Array(skeletonRowCount)].map((_, i) => (React.createElement("tr", { key: i }, [...Array(columnCount)].map((_, j) => (React.createElement("td", { key: j },
+                React.createElement("div", { className: `${styles.skeleton} ${styles.skeletonText}` }))))))))));
+    }
     get mobileView() {
-        return (React.createElement("div", null, this.data.map((row, rowIndex) => (React.createElement("div", { key: rowIndex, className: styles['card'], onClick: (e) => {
-                this.rowClickFunction(row);
-                e.stopPropagation();
-                e.preventDefault();
-            } },
-            React.createElement("div", { className: styles['card-header'] }, " "),
-            React.createElement("div", { className: styles['card-body'] }, this.props.columnDefinitions.map((columnDefinition, colIndex) => {
-                const colDef = this.getColumnDefinition(columnDefinition, rowIndex);
-                const onHeaderClickCallback = this.onHeaderClickCallback(colDef);
-                const clickableHeaderClassName = this.getClickableHeaderClassName(onHeaderClickCallback, colDef);
-                return (React.createElement("div", { key: colIndex },
-                    React.createElement("p", null,
-                        React.createElement("span", { className: `font-bold ${clickableHeaderClassName}`, onClick: onHeaderClickCallback ? () => onHeaderClickCallback(colDef.interactivity.id) : undefined },
-                            colDef.displayLabel,
-                            ":"),
-                        ' ',
-                        colDef.cellRenderer(row))));
-            })))))));
+        return (React.createElement("div", null,
+            this.data.map((row, rowIndex) => (React.createElement("div", { key: rowIndex, className: `${styles['card']} ${this.props.animateOnLoad ? styles.animatedRow : ''}`, style: { animationDelay: `${rowIndex * 0.05}s` }, onClick: (e) => {
+                    this.rowClickFunction(row);
+                    e.stopPropagation();
+                    e.preventDefault();
+                } },
+                React.createElement("div", { className: styles['card-header'] }, " "),
+                React.createElement("div", { className: styles['card-body'] }, this.props.columnDefinitions.map((columnDefinition, colIndex) => {
+                    const colDef = this.getColumnDefinition(columnDefinition, rowIndex);
+                    const onHeaderClickCallback = this.onHeaderClickCallback(colDef);
+                    const clickableHeaderClassName = this.getClickableHeaderClassName(onHeaderClickCallback, colDef);
+                    return (React.createElement("div", { key: colIndex, className: styles['card-row'] },
+                        React.createElement("p", null,
+                            React.createElement("span", { className: `${styles['card-label']} ${clickableHeaderClassName}`, onClick: onHeaderClickCallback ? () => onHeaderClickCallback(colDef.interactivity.id) : undefined },
+                                colDef.displayLabel,
+                                ":"),
+                            React.createElement("span", { className: styles['card-value'] }, colDef.cellRenderer(row)))));
+                }))))),
+            this.mobileFooter));
     }
     get largeScreenView() {
         const useFixedHeaders = this.props.maxHeight ? true : false;
@@ -158,10 +194,14 @@ class ResponsiveTable extends React.Component {
                                 ? () => onHeaderClickCallback(this.getColumnDefinition(columnDefinition, 0).interactivity.id)
                                 : undefined }, this.getColumnDefinition(columnDefinition, 0).displayLabel));
                     }))),
-                React.createElement("tbody", null, this.data.map((row, rowIndex) => (React.createElement("tr", { key: rowIndex }, this.props.columnDefinitions.map((columnDefinition, colIndex) => (React.createElement("td", { onClick: () => this.rowClickFunction(row), key: colIndex },
-                    React.createElement("span", { style: Object.assign({}, this.rowClickStyle) }, this.getColumnDefinition(columnDefinition, rowIndex).cellRenderer(row))))))))))));
+                React.createElement("tbody", null, this.data.map((row, rowIndex) => (React.createElement("tr", { key: rowIndex, className: this.props.animateOnLoad ? styles.animatedRow : '', style: { animationDelay: `${rowIndex * 0.05}s` } }, this.props.columnDefinitions.map((columnDefinition, colIndex) => (React.createElement("td", { onClick: () => this.rowClickFunction(row), key: colIndex },
+                    React.createElement("span", { style: Object.assign({}, this.rowClickStyle) }, this.getColumnDefinition(columnDefinition, rowIndex).cellRenderer(row))))))))),
+                this.tableFooter)));
     }
     render() {
+        if (this.props.isLoading) {
+            return this.skeletonView;
+        }
         if (!this.hasData) {
             return this.noDataComponent;
         }

package/dist/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sources":["../node_modules/style-inject/dist/style-inject.es.js","../src/UI/ResponsiveTable.tsx"],"sourcesContent":["function styleInject(css, ref) {\n  if ( ref === void 0 ) ref = {};\n  var insertAt = ref.insertAt;\n\n  if (!css || typeof document === 'undefined') { return; }\n\n  var head = document.head || document.getElementsByTagName('head')[0];\n  var style = document.createElement('style');\n  style.type = 'text/css';\n\n  if (insertAt === 'top') {\n    if (head.firstChild) {\n      head.insertBefore(style, head.firstChild);\n    } else {\n      head.appendChild(style);\n    }\n  } else {\n    head.appendChild(style);\n  }\n\n  if (style.styleSheet) {\n    style.styleSheet.cssText = css;\n  } else {\n    style.appendChild(document.createTextNode(css));\n  }\n}\n\nexport default styleInject;\n",null],"names":["Component"],"mappings":"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","x_google_ignoreList":[0]}
+{"version":3,"file":"index.js","sources":["../node_modules/style-inject/dist/style-inject.es.js","../src/UI/ResponsiveTable.tsx"],"sourcesContent":["function styleInject(css, ref) {\n  if ( ref === void 0 ) ref = {};\n  var insertAt = ref.insertAt;\n\n  if (!css || typeof document === 'undefined') { return; }\n\n  var head = document.head || document.getElementsByTagName('head')[0];\n  var style = document.createElement('style');\n  style.type = 'text/css';\n\n  if (insertAt === 'top') {\n    if (head.firstChild) {\n      head.insertBefore(style, head.firstChild);\n    } else {\n      head.appendChild(style);\n    }\n  } else {\n    head.appendChild(style);\n  }\n\n  if (style.styleSheet) {\n    style.styleSheet.cssText = css;\n  } else {\n    style.appendChild(document.createTextNode(css));\n  }\n}\n\nexport default styleInject;\n",null],"names":["Component"],"mappings":"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","x_google_ignoreList":[0]}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "jattac.libs.web.responsive-table",
-  "version": "0.0.25",
+  "version": "0.1.0",
   "description": "",
   "main": "dist/index.js",
   "module": "dist/index.es.js",

package/src/Data/IFooterColumnDefinition.ts

@@ -0,0 +1,6 @@
+import { ReactNode } from 'react';
+
+export default interface IFooterColumnDefinition {
+  colSpan: number;
+  cellRenderer: () => ReactNode;
+}

package/src/Data/IFooterRowDefinition.ts

@@ -0,0 +1,5 @@
+import IFooterColumnDefinition from './IFooterColumnDefinition';
+
+export default interface IFooterRowDefinition {
+  columns: IFooterColumnDefinition[];
+}

package/src/Styles/ResponsiveTable.module.css

@@ -1,70 +1,192 @@
-.card {
-  border: 1px solid #ccc;
-  margin-bottom: 10px;
-  border-radius: 8px;
-  overflow: hidden;
-  box-shadow: 0 0 5px rgba(0, 0, 0, 0.1);
-}
-
-.card-header {
-  background-color: #f0f0f0;
-  padding: 10px;
-  font-weight: bold;
-}
-
-.card-body {
-  padding: 10px;
-}
-
-.responsiveTable {
-  width: 100%;
-  border-collapse: collapse;
-}
-
-.responsiveTable thead th {
-  background-color: #f2f2f2;
-  position: sticky;
-  top: 0;
-  z-index: 2;
-}
-
-.responsiveTable th,
-.responsiveTable td {
-  padding: 12px;
-  border-bottom: 1px solid #dddddd;
-  text-align: left;
-}
-
-/* Alternate row colors */
-.responsiveTable tr:nth-child(even) {
-  background-color: #f9f9f9;
-}
-
-/* Change background color on hover */
-.responsiveTable tr:hover {
-  background-color: #d9edf7;
-}
-
-.clickableHeader {
-  cursor: pointer;
-  color: #007bff;
-}
-
-.clickableHeader:hover {
-  text-decoration: underline;
-}
-
-.noDataWrapper {
-  color: #ca3333;
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  height: 100%;
-  gap: 10px;
-}
-
-.noData {
-  text-align: center;
-  font-weight: bold;
-  padding: 30px;
-}
+/* Using CSS variables for a more maintainable and themeable design */
+:root {
+  --table-border-color: #e0e0e0;
+  --table-header-bg: #f8f9fa;
+  --table-row-hover-bg: #f1f3f5;
+  --table-row-stripe-bg: #fdfdfd;
+  --card-bg: #ffffff;
+  --card-border-color: #e0e0e0;
+  --card-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
+  --text-color: #212529;
+  --text-color-muted: #6c757d;
+  --interactive-color: #0056b3;
+}
+
+/* Mobile Card View */
+.card {
+  background-color: var(--card-bg);
+  border: 1px solid var(--card-border-color);
+  margin-bottom: 1rem;
+  border-radius: 8px;
+  overflow: hidden;
+  box-shadow: var(--card-shadow);
+  transition: box-shadow 0.2s ease-in-out;
+}
+
+.card:hover {
+  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
+}
+
+/* This is not used in the component, but keeping it styled in case it's added back */
+.card-header {
+  background-color: var(--table-header-bg);
+  padding: 0.75rem 1rem;
+  font-weight: 600; /* Bolder */
+  border-bottom: 1px solid var(--table-border-color);
+}
+
+.card-body {
+  padding: 1rem;
+  font-size: 0.9rem;
+}
+
+.card-body p {
+  margin: 0 0 0.75rem;
+  display: flex;
+  justify-content: space-between;
+}
+
+.card-body p:last-child {
+  margin-bottom: 0;
+}
+
+.card-body span:first-child {
+  font-weight: 600;
+  color: var(--text-color);
+  margin-right: 0.5rem;
+}
+
+/* Desktop Table View */
+.responsiveTable {
+  width: 100%;
+  border-collapse: collapse;
+  color: var(--text-color);
+}
+
+.responsiveTable thead th {
+  background-color: var(--table-header-bg);
+  position: sticky;
+  top: 0;
+  z-index: 2;
+  font-weight: 600;
+  text-align: left;
+  padding: 1rem;
+  border-bottom: 2px solid var(--table-border-color);
+}
+
+.responsiveTable td {
+  padding: 1rem;
+  border-bottom: 1px solid var(--table-border-color);
+  text-align: left;
+}
+
+/* Remove alternating row colors for a cleaner look */
+.responsiveTable tr {
+  background-color: var(--card-bg);
+  transition: background-color 0.2s ease-in-out;
+}
+
+/* Modern hover effect */
+.responsiveTable tr:hover {
+  background-color: var(--table-row-hover-bg);
+}
+
+/* Clickable Header Style */
+.clickableHeader {
+  cursor: pointer;
+  color: var(--interactive-color);
+}
+
+.clickableHeader:hover {
+  text-decoration: underline;
+}
+
+.responsiveTable tfoot {
+  background-color: var(--table-header-bg);
+  border-top: 2px solid var(--table-border-color);
+  font-weight: 600;
+}
+
+.footerCell {
+  padding: 1rem;
+  text-align: right;
+}
+
+/* No Data State */
+
+/* Staggered Entrance Animation */
+.animatedRow {
+  animation: fadeInUp 0.5s ease-out forwards;
+  opacity: 0;
+}
+
+@keyframes fadeInUp {
+  from {
+    opacity: 0;
+    transform: translateY(20px);
+  }
+  to {
+    opacity: 1;
+    transform: translateY(0);
+  }
+}
+
+/* Skeleton Loader */
+.skeleton {
+  background-color: #e0e0e0;
+  border-radius: 4px;
+  position: relative;
+  overflow: hidden;
+}
+
+.skeleton::after {
+  content: '';
+  position: absolute;
+  top: 0;
+  left: -150%;
+  width: 150%;
+  height: 100%;
+  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.4), transparent);
+  animation: shimmer 1.5s infinite;
+}
+
+.skeletonText {
+  height: 1.2em;
+  width: 100%;
+}
+
+.skeletonCard {
+  background-color: var(--card-bg);
+  border: 1px solid var(--card-border-color);
+  margin-bottom: 1rem;
+  border-radius: 8px;
+  overflow: hidden;
+  padding: 1rem;
+}
+
+@keyframes shimmer {
+  0% {
+    transform: translateX(0);
+  }
+  100% {
+    transform: translateX(100%);
+  }
+}
+.noDataWrapper {
+  color: var(--text-color-muted); /* Softer color */
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  height: 100%;
+  gap: 10px;
+  padding: 40px;
+  background-color: var(--table-header-bg);
+  border: 1px dashed var(--table-border-color);
+  border-radius: 8px;
+}
+
+.noData {
+  text-align: center;
+  font-weight: 500; /* Less aggressive than bold */
+  font-size: 1rem;
+}