jattac.libs.web.responsive-table 0.12.0 → 0.14.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.
- package/README.md +26 -6
- package/dist/Hooks/useTablePlugins.d.ts +0 -8
- package/dist/Plugins/IResponsiveTablePlugin.d.ts +0 -6
- package/dist/UI/DetailRow.d.ts +1 -2
- package/dist/UI/ResponsiveTable.d.ts +0 -11
- package/dist/UI/TableBodyRow.d.ts +6 -0
- package/dist/index.d.ts +1 -2
- package/dist/index.es.js +156 -327
- package/dist/index.es.js.map +1 -1
- package/dist/index.js +155 -327
- package/dist/index.js.map +1 -1
- package/docs/api.md +13 -17
- package/docs/development.md +1 -2
- package/docs/examples.md +57 -1
- package/docs/expand-collapse.md +630 -0
- package/docs/features.md +6 -0
- package/docs/recommendations.md +376 -0
- package/package.json +1 -1
- package/dist/Plugins/InfiniteScrollPlugin.d.ts +0 -13
- package/dist/UI/InfiniteTable.d.ts +0 -46
package/dist/index.js
CHANGED
|
@@ -10,7 +10,7 @@ function styleInject(css, ref) {
|
|
|
10
10
|
if ( ref === void 0 ) ref = {};
|
|
11
11
|
var insertAt = ref.insertAt;
|
|
12
12
|
|
|
13
|
-
if (
|
|
13
|
+
if (typeof document === 'undefined') { return; }
|
|
14
14
|
|
|
15
15
|
var head = document.head || document.getElementsByTagName('head')[0];
|
|
16
16
|
var style = document.createElement('style');
|
|
@@ -33,9 +33,9 @@ function styleInject(css, ref) {
|
|
|
33
33
|
}
|
|
34
34
|
}
|
|
35
35
|
|
|
36
|
-
var css_248z$2 = ".ResponsiveTable-module_responsiveTable__4y-Od{--table-border-color:#e0e0e0;--table-header-bg:#f8f9fa;--table-row-hover-bg:#f1f3f5;--table-row-stripe-bg:#fafbfc;--card-bg:#fff;--card-border-color:#d1d5db;--card-shadow:0 2px 8px rgba(0,0,0,.06);--text-color:#212529;--text-color-muted:#6c757d;--interactive-color:#0056b3;--primary-color:#007bff;--rt-mobile-card-shadow:0 1px 2px rgba(0,0,0,.04),0 4px 12px rgba(0,0,0,.06),0 12px 32px rgba(0,0,0,.04);--rt-mobile-card-radius:16px;--rt-mobile-bg-wash:#f1f5f9;--rt-mobile-label-color:#475569;--rt-mobile-value-color:#1e293b}.ResponsiveTable-module_tableContainer__VjWjH{border:1px solid var(--table-border-color);border-radius:8px;overflow-x:auto;width:100%}.ResponsiveTable-module_responsiveTable__4y-Od{background-color:var(--card-bg);border-collapse:collapse;color:var(--text-color);width:100%}.ResponsiveTable-module_responsiveTable__4y-Od thead th{background-color:var(--table-header-bg);border-bottom:2px solid var(--table-border-color);color:var(--text-color-muted);font-size:.75rem;font-weight:600;letter-spacing:.05em;padding:1rem;text-align:left;text-transform:uppercase;z-index:1}.ResponsiveTable-module_responsiveTable__4y-Od td{border-bottom:1px solid var(--table-border-color);font-size:.9rem;padding:1rem;text-align:left}.ResponsiveTable-module_responsiveTable__4y-Od tr:last-child td{border-bottom:none}.ResponsiveTable-module_responsiveTable__4y-Od tr:nth-child(2n){background-color:var(--table-row-stripe-bg)}.ResponsiveTable-module_responsiveTable__4y-Od tr:hover{background-color:var(--table-row-hover-bg)}.ResponsiveTable-module_cardContainer__Het4h{background-color:var(--rt-mobile-bg-wash);border-radius:var(--rt-mobile-card-radius);display:flex;flex-direction:column;gap:1.25rem;padding:1rem}.ResponsiveTable-module_card__b-U2v{background-color:var(--card-bg);border:1px solid var(--card-border-color);border-bottom:3px solid var(--primary-color);border-radius:var(--rt-mobile-card-radius);box-shadow:var(--rt-mobile-card-shadow);overflow:hidden;padding:1rem;transition:box-shadow .2s ease-in-out,transform .2s ease-in-out}.ResponsiveTable-module_card__b-U2v:hover{box-shadow:0 2px 4px rgba(0,0,0,.06),0 8px 24px rgba(0,0,0,.08),0 16px 48px rgba(0,0,0,.06);transform:translateY(-4px)}.ResponsiveTable-module_card-header__Ttk51{border-bottom:1px solid var(--table-border-color);margin-bottom:1rem;padding-bottom:.5rem}.ResponsiveTable-module_card-row__qvIUJ{align-items:flex-start;display:flex;gap:1rem;justify-content:space-between;margin:0 0 .75rem}.ResponsiveTable-module_card-row__qvIUJ.ResponsiveTable-module_stacked__FSaTB{align-items:stretch;flex-direction:column;gap:.25rem;margin-bottom:1rem}.ResponsiveTable-module_card-row__qvIUJ:last-child{margin-bottom:0}.ResponsiveTable-module_card-label__v9L71{color:var(--rt-mobile-label-color);font-size:.75rem;font-weight:600;text-transform:uppercase;white-space:nowrap}.ResponsiveTable-module_card-value__BO-c-{color:var(--rt-mobile-value-color);font-size:.95rem;text-align:right}.ResponsiveTable-module_card-row__qvIUJ.ResponsiveTable-module_stacked__FSaTB .ResponsiveTable-module_card-value__BO-c-{text-align:left}.ResponsiveTable-module_numberValue__-TLR1{font-family:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,Liberation Mono,Courier New,monospace;text-align:right!important}.ResponsiveTable-module_dateValue__UMvqJ{color:var(--text-color-muted);font-size:.85rem}.ResponsiveTable-module_imageValue__wVb-p img{border-radius:8px;height:auto;max-width:100%;object-fit:cover}.ResponsiveTable-module_inputValue__CrGMx{margin-top:.5rem;width:100%}.ResponsiveTable-module_inputValue__CrGMx button,.ResponsiveTable-module_inputValue__CrGMx input[type=text],.ResponsiveTable-module_inputValue__CrGMx select,.ResponsiveTable-module_inputValue__CrGMx textarea{min-height:44px;width:100%!important}.ResponsiveTable-module_clickableRow__0kjWm{cursor:pointer}.ResponsiveTable-module_responsiveTable__4y-Od tbody tr{transition:background-color .12s ease}.ResponsiveTable-module_responsiveTable__4y-Od tbody tr.ResponsiveTable-module_clickableRow__0kjWm:active{background-color:var(--table-row-active-bg,#dde3ea);transition:background-color .08s ease}.ResponsiveTable-module_responsiveTable__4y-Od tbody tr.ResponsiveTable-module_clickableRow__0kjWm:focus-visible{outline:2px solid var(--primary-color,#3b82f6);outline-offset:-2px}.ResponsiveTable-module_card__b-U2v.ResponsiveTable-module_clickableRow__0kjWm:active{box-shadow:0 1px 3px rgba(0,0,0,.08);transform:translateY(-1px);transition:transform .08s ease,box-shadow .08s ease}.ResponsiveTable-module_card__b-U2v.ResponsiveTable-module_clickableRow__0kjWm:focus-visible{outline:2px solid var(--primary-color,#3b82f6);outline-offset:-2px}.ResponsiveTable-module_clickableHeader__xHQhF{cursor:pointer;transition:color .2s}.ResponsiveTable-module_clickableHeader__xHQhF:hover{color:var(--interactive-color)}.ResponsiveTable-module_sortable__yvA60{cursor:pointer}.ResponsiveTable-module_sorted-asc__jzOIa,.ResponsiveTable-module_sorted-desc__7WCFK{background-color:#f0f7ff!important;color:var(--interactive-color)!important}.ResponsiveTable-module_headerInnerWrapper__3VAhD{align-items:center;display:flex;justify-content:space-between;width:100%}.ResponsiveTable-module_headerContent__ODMzS{flex-grow:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.ResponsiveTable-module_sortIcon__A9WtD{background-position:50%;background-repeat:no-repeat;background-size:contain;flex-shrink:0;height:1rem;margin-left:.5rem;opacity:.3;width:1rem}.ResponsiveTable-module_sortable__yvA60:hover .ResponsiveTable-module_sortIcon__A9WtD{opacity:.8}.ResponsiveTable-module_sortable__yvA60 .ResponsiveTable-module_sortIcon__A9WtD{background-image:url(\"data:image/svg+xml;charset=utf-8,%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\")}.ResponsiveTable-module_sorted-asc__jzOIa .ResponsiveTable-module_sortIcon__A9WtD{background-image:url(\"data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%230056b3'%3E%3Cpath d='m7 14 5-5 5 5z'/%3E%3C/svg%3E\");opacity:1}.ResponsiveTable-module_sorted-desc__7WCFK .ResponsiveTable-module_sortIcon__A9WtD{background-image:url(\"data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%230056b3'%3E%3Cpath d='m7 10 5 5 5-5z'/%3E%3C/svg%3E\");opacity:1}.ResponsiveTable-module_responsiveTable__4y-Od tfoot{background-color:var(--table-header-bg);border-top:2px solid var(--table-border-color)}.ResponsiveTable-module_footerCell__8H-uG{font-size:.9rem;font-weight:600;padding:1rem;text-align:right}.ResponsiveTable-module_clickableFooterCell__WB9Ss{color:var(--interactive-color);cursor:pointer}.ResponsiveTable-module_clickableFooterCell__WB9Ss:hover{text-decoration:underline}.ResponsiveTable-module_footerCard__-NE2M{background-color:var(--table-header-bg);border:1px solid var(--card-border-color);border-radius:12px;margin-top:1rem;overflow:hidden;padding:1.25rem}.ResponsiveTable-module_footer-card-row__Vv6Ur{display:flex;font-size:.9rem;font-weight:600;justify-content:space-between;margin:0 0 .75rem}.ResponsiveTable-module_selectedRow__-JyNW{background-color:#e7f1ff!important;transition:background-color .15s ease}.ResponsiveTable-module_card__b-U2v.ResponsiveTable-module_selectedRow__-JyNW{background-color:#e7f1ff;border-left:4px solid var(--primary-color)}.ResponsiveTable-module_animatedRow__SFjrJ{animation:ResponsiveTable-module_cardEntrance__6JjRV .5s cubic-bezier(.2,.8,.2,1) forwards;opacity:0}@keyframes ResponsiveTable-module_cardEntrance__6JjRV{0%{opacity:0;transform:translateY(15px) scale(.98)}to{opacity:1;transform:translateY(0) scale(1)}}@keyframes ResponsiveTable-module_fadeInUp__jMCS7{0%{opacity:0;transform:translateY(10px)}to{opacity:1;transform:translateY(0)}}.ResponsiveTable-module_skeleton__XxsXW{background-color:#f0f0f0;border-radius:4px;overflow:hidden;position:relative}.ResponsiveTable-module_skeleton__XxsXW:after{animation:ResponsiveTable-module_shimmer__H8PhC 1.5s infinite;background:linear-gradient(90deg,transparent,hsla(0,0%,100%,.6),transparent);content:\"\";height:100%;left:-150%;position:absolute;top:0;width:150%}@keyframes ResponsiveTable-module_shimmer__H8PhC{0%{transform:translateX(0)}to{transform:translateX(100%)}}.ResponsiveTable-module_noDataWrapper__Rj-k3{align-items:center;background-color:var(--table-header-bg);border:2px dashed var(--table-border-color);border-radius:12px;color:var(--text-color-muted);display:flex;flex-direction:column;gap:1rem;justify-content:center;padding:4rem 2rem}.ResponsiveTable-module_noData__IpwNq{font-size:1.1rem;font-weight:500}.ResponsiveTable-module_spinner__Pn-3D{animation:ResponsiveTable-module_spin__i3NHn .8s linear infinite;border:3px solid rgba(0,0,0,.1);border-left:3px solid var(--primary-color);border-radius:50%;height:24px;width:24px}@keyframes ResponsiveTable-module_spin__i3NHn{to{transform:rotate(1turn)}}.ResponsiveTable-module_infoContainer__b9IF5{align-items:center;color:var(--text-color-muted);display:flex;font-size:.85rem;gap:.5rem;justify-content:center;padding:1.5rem}.ResponsiveTable-module_stickyHeader__-jjN- th{box-shadow:0 2px 4px rgba(0,0,0,.05);position:sticky;top:0}.ResponsiveTable-module_internalStickyHeader__idiJY th{position:sticky;top:0}.ResponsiveTable-module_detailCell__hb9C5{background:rgba(0,0,0,.012);border-top:none;padding:0;transition:border-left .2s ease}.ResponsiveTable-module_detailCellHasContent__F-DX5{padding-bottom:.5rem}.ResponsiveTable-module_detailCellExpanded__Zr6UF{border-left:2px solid var(--primary-color,#3b82f6)}.ResponsiveTable-module_detailToggleBar__F5Qrk{height:0;overflow:hidden;transition:height .2s ease}.ResponsiveTable-module_detailToggleBarVisible__q9b-3{align-items:center;background:rgba(59,130,246,.08);box-shadow:inset 0 1px 0 rgba(0,0,0,.04);cursor:pointer;display:flex;height:2.5rem;padding:0 .75rem;user-select:none}.ResponsiveTable-module_detailToggleBarVisible__q9b-3:hover{background:rgba(59,130,246,.14)}.ResponsiveTable-module_detailChevron__mBs8j{align-items:center;color:var(--primary-color,#3b82f6);display:flex;font-size:2.2rem;transform:rotate(-90deg);transition:transform .25s ease}.ResponsiveTable-module_detailChevronExpanded__zGFTQ{transform:rotate(0deg)}.ResponsiveTable-module_detailContentWrapper__VzM29{display:grid;grid-template-rows:0fr;transition:grid-template-rows .3s ease}.ResponsiveTable-module_detailContentWrapperExpanded__bkiUb{grid-template-rows:1fr}.ResponsiveTable-module_detailContentInner__GWVaq{overflow:hidden;padding-left:1.5rem}.ResponsiveTable-module_mobileDetailOuter__gusle{background:rgba(0,0,0,.012);overflow:hidden}";
|
|
37
|
-
var styles
|
|
38
|
-
styleInject(css_248z
|
|
36
|
+
var css_248z = ".ResponsiveTable-module_responsiveTable__4y-Od{--table-border-color:#e0e0e0;--table-header-bg:#f8f9fa;--table-row-hover-bg:#f1f3f5;--table-row-stripe-bg:#fafbfc;--card-bg:#fff;--card-border-color:#d1d5db;--card-shadow:0 2px 8px rgba(0,0,0,.06);--text-color:#212529;--text-color-muted:#6c757d;--interactive-color:#0056b3;--primary-color:#007bff;--rt-mobile-card-shadow:0 1px 2px rgba(0,0,0,.04),0 4px 12px rgba(0,0,0,.06),0 12px 32px rgba(0,0,0,.04);--rt-mobile-card-radius:16px;--rt-mobile-bg-wash:#f1f5f9;--rt-mobile-label-color:#475569;--rt-mobile-value-color:#1e293b}.ResponsiveTable-module_tableContainer__VjWjH{border:1px solid var(--table-border-color);border-radius:8px;overflow-x:auto;width:100%}.ResponsiveTable-module_responsiveTable__4y-Od{background-color:var(--card-bg);border-collapse:collapse;color:var(--text-color);width:100%}.ResponsiveTable-module_responsiveTable__4y-Od thead th{background-color:var(--table-header-bg);border-bottom:2px solid var(--table-border-color);color:var(--text-color-muted);font-size:.75rem;font-weight:600;letter-spacing:.05em;padding:1rem;text-align:left;text-transform:uppercase;z-index:1}.ResponsiveTable-module_responsiveTable__4y-Od td{border-bottom:1px solid var(--table-border-color);font-size:.9rem;padding:1rem;text-align:left}.ResponsiveTable-module_responsiveTable__4y-Od tr:last-child td{border-bottom:none}.ResponsiveTable-module_responsiveTable__4y-Od tr:nth-child(2n){background-color:var(--table-row-stripe-bg)}.ResponsiveTable-module_responsiveTable__4y-Od tr:hover{background-color:var(--table-row-hover-bg)}.ResponsiveTable-module_cardContainer__Het4h{background-color:var(--rt-mobile-bg-wash);border-radius:var(--rt-mobile-card-radius);display:flex;flex-direction:column;gap:1.25rem;padding:1rem}.ResponsiveTable-module_card__b-U2v{background-color:var(--card-bg);border:1px solid var(--card-border-color);border-bottom:3px solid var(--primary-color);border-radius:var(--rt-mobile-card-radius);box-shadow:var(--rt-mobile-card-shadow);overflow:hidden;padding:1rem;transition:box-shadow .2s ease-in-out,transform .2s ease-in-out}.ResponsiveTable-module_card__b-U2v:hover{box-shadow:0 2px 4px rgba(0,0,0,.06),0 8px 24px rgba(0,0,0,.08),0 16px 48px rgba(0,0,0,.06);transform:translateY(-4px)}.ResponsiveTable-module_card-header__Ttk51{border-bottom:1px solid var(--table-border-color);margin-bottom:1rem;padding-bottom:.5rem}.ResponsiveTable-module_card-row__qvIUJ{align-items:flex-start;display:flex;gap:1rem;justify-content:space-between;margin:0 0 .75rem}.ResponsiveTable-module_card-row__qvIUJ.ResponsiveTable-module_stacked__FSaTB{align-items:stretch;flex-direction:column;gap:.25rem;margin-bottom:1rem}.ResponsiveTable-module_card-row__qvIUJ:last-child{margin-bottom:0}.ResponsiveTable-module_card-label__v9L71{color:var(--rt-mobile-label-color);font-size:.75rem;font-weight:600;text-transform:uppercase;white-space:nowrap}.ResponsiveTable-module_card-value__BO-c-{color:var(--rt-mobile-value-color);font-size:.95rem;text-align:right}.ResponsiveTable-module_card-row__qvIUJ.ResponsiveTable-module_stacked__FSaTB .ResponsiveTable-module_card-value__BO-c-{text-align:left}.ResponsiveTable-module_numberValue__-TLR1{font-family:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,Liberation Mono,Courier New,monospace;text-align:right!important}.ResponsiveTable-module_dateValue__UMvqJ{color:var(--text-color-muted);font-size:.85rem}.ResponsiveTable-module_imageValue__wVb-p img{border-radius:8px;height:auto;max-width:100%;object-fit:cover}.ResponsiveTable-module_inputValue__CrGMx{margin-top:.5rem;width:100%}.ResponsiveTable-module_inputValue__CrGMx button,.ResponsiveTable-module_inputValue__CrGMx input[type=text],.ResponsiveTable-module_inputValue__CrGMx select,.ResponsiveTable-module_inputValue__CrGMx textarea{min-height:44px;width:100%!important}.ResponsiveTable-module_clickableRow__0kjWm{cursor:pointer}.ResponsiveTable-module_responsiveTable__4y-Od tbody tr{transition:background-color .12s ease}.ResponsiveTable-module_responsiveTable__4y-Od tbody tr.ResponsiveTable-module_clickableRow__0kjWm:active{background-color:var(--table-row-active-bg,#dde3ea);transition:background-color .08s ease}.ResponsiveTable-module_responsiveTable__4y-Od tbody tr.ResponsiveTable-module_clickableRow__0kjWm:focus-visible{outline:2px solid var(--primary-color,#3b82f6);outline-offset:-2px}.ResponsiveTable-module_card__b-U2v.ResponsiveTable-module_clickableRow__0kjWm:active{box-shadow:0 1px 3px rgba(0,0,0,.08);transform:translateY(-1px);transition:transform .08s ease,box-shadow .08s ease}.ResponsiveTable-module_card__b-U2v.ResponsiveTable-module_clickableRow__0kjWm:focus-visible{outline:2px solid var(--primary-color,#3b82f6);outline-offset:-2px}.ResponsiveTable-module_clickableHeader__xHQhF{cursor:pointer;transition:color .2s}.ResponsiveTable-module_clickableHeader__xHQhF:hover{color:var(--interactive-color)}.ResponsiveTable-module_sortable__yvA60{cursor:pointer}.ResponsiveTable-module_sorted-asc__jzOIa,.ResponsiveTable-module_sorted-desc__7WCFK{background-color:#f0f7ff!important;color:var(--interactive-color)!important}.ResponsiveTable-module_headerInnerWrapper__3VAhD{align-items:center;display:flex;justify-content:space-between;width:100%}.ResponsiveTable-module_headerContent__ODMzS{flex-grow:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.ResponsiveTable-module_sortIcon__A9WtD{background-position:50%;background-repeat:no-repeat;background-size:contain;flex-shrink:0;height:1rem;margin-left:.5rem;opacity:.3;width:1rem}.ResponsiveTable-module_sortable__yvA60:hover .ResponsiveTable-module_sortIcon__A9WtD{opacity:.8}.ResponsiveTable-module_sortable__yvA60 .ResponsiveTable-module_sortIcon__A9WtD{background-image:url(\"data:image/svg+xml;charset=utf-8,%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\")}.ResponsiveTable-module_sorted-asc__jzOIa .ResponsiveTable-module_sortIcon__A9WtD{background-image:url(\"data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%230056b3'%3E%3Cpath d='m7 14 5-5 5 5z'/%3E%3C/svg%3E\");opacity:1}.ResponsiveTable-module_sorted-desc__7WCFK .ResponsiveTable-module_sortIcon__A9WtD{background-image:url(\"data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%230056b3'%3E%3Cpath d='m7 10 5 5 5-5z'/%3E%3C/svg%3E\");opacity:1}.ResponsiveTable-module_responsiveTable__4y-Od tfoot{background-color:var(--table-header-bg);border-top:2px solid var(--table-border-color)}.ResponsiveTable-module_footerCell__8H-uG{font-size:.9rem;font-weight:600;padding:1rem;text-align:right}.ResponsiveTable-module_clickableFooterCell__WB9Ss{color:var(--interactive-color);cursor:pointer}.ResponsiveTable-module_clickableFooterCell__WB9Ss:hover{text-decoration:underline}.ResponsiveTable-module_footerCard__-NE2M{background-color:var(--table-header-bg);border:1px solid var(--card-border-color);border-radius:12px;margin-top:1rem;overflow:hidden;padding:1.25rem}.ResponsiveTable-module_footer-card-row__Vv6Ur{display:flex;font-size:.9rem;font-weight:600;justify-content:space-between;margin:0 0 .75rem}.ResponsiveTable-module_selectedRow__-JyNW{background-color:#e7f1ff!important;transition:background-color .15s ease}.ResponsiveTable-module_card__b-U2v.ResponsiveTable-module_selectedRow__-JyNW{background-color:#e7f1ff;border-left:4px solid var(--primary-color)}.ResponsiveTable-module_animatedRow__SFjrJ{animation:ResponsiveTable-module_cardEntrance__6JjRV .5s cubic-bezier(.2,.8,.2,1) forwards;opacity:0}@keyframes ResponsiveTable-module_cardEntrance__6JjRV{0%{opacity:0;transform:translateY(15px) scale(.98)}to{opacity:1;transform:translateY(0) scale(1)}}@keyframes ResponsiveTable-module_fadeInUp__jMCS7{0%{opacity:0;transform:translateY(10px)}to{opacity:1;transform:translateY(0)}}.ResponsiveTable-module_skeleton__XxsXW{background-color:#f0f0f0;border-radius:4px;overflow:hidden;position:relative}.ResponsiveTable-module_skeleton__XxsXW:after{animation:ResponsiveTable-module_shimmer__H8PhC 1.5s infinite;background:linear-gradient(90deg,transparent,hsla(0,0%,100%,.6),transparent);content:\"\";height:100%;left:-150%;position:absolute;top:0;width:150%}@keyframes ResponsiveTable-module_shimmer__H8PhC{0%{transform:translateX(0)}to{transform:translateX(100%)}}.ResponsiveTable-module_noDataWrapper__Rj-k3{align-items:center;background-color:var(--table-header-bg);border:2px dashed var(--table-border-color);border-radius:12px;color:var(--text-color-muted);display:flex;flex-direction:column;gap:1rem;justify-content:center;padding:4rem 2rem}.ResponsiveTable-module_noData__IpwNq{font-size:1.1rem;font-weight:500}.ResponsiveTable-module_spinner__Pn-3D{animation:ResponsiveTable-module_spin__i3NHn .8s linear infinite;border:3px solid rgba(0,0,0,.1);border-left:3px solid var(--primary-color);border-radius:50%;height:24px;width:24px}@keyframes ResponsiveTable-module_spin__i3NHn{to{transform:rotate(1turn)}}.ResponsiveTable-module_infoContainer__b9IF5{align-items:center;color:var(--text-color-muted);display:flex;font-size:.85rem;gap:.5rem;justify-content:center;padding:1.5rem}.ResponsiveTable-module_stickyHeader__-jjN- th{box-shadow:0 2px 4px rgba(0,0,0,.05);position:sticky;top:0}.ResponsiveTable-module_internalStickyHeader__idiJY th{position:sticky;top:0}.ResponsiveTable-module_expandColumn__yvwN-{border-bottom:1px solid var(--table-border-color);min-width:3rem;padding:0!important;text-align:center;vertical-align:middle;width:3rem}.ResponsiveTable-module_expandChevron__7JalN{align-items:center;border-radius:.25rem;color:var(--primary-color,#3b82f6);cursor:pointer;display:inline-flex;font-size:1.8rem;height:2.25rem;justify-content:center;opacity:.55;transform:rotate(-90deg);transition:opacity .15s ease,transform .25s ease;user-select:none;width:2.25rem}.ResponsiveTable-module_expandChevron__7JalN:focus-visible{outline:2px solid var(--primary-color,#3b82f6);outline-offset:2px}@keyframes ResponsiveTable-module_chevronGreeting__nLVUh{0%{opacity:0;transform:rotate(-90deg) scale(.6)}12%{opacity:1;transform:rotate(-90deg) scale(1.3)}22%{opacity:.65;transform:rotate(-90deg) scale(1)}32%{opacity:1;transform:rotate(-90deg) scale(1.15)}45%{opacity:.55;transform:rotate(-90deg) scale(1)}to{opacity:.55;transform:rotate(-90deg) scale(1)}}.ResponsiveTable-module_expandChevronGreeting__hu51J{animation:ResponsiveTable-module_chevronGreeting__nLVUh 2.2s ease-out forwards;animation-delay:calc(var(--row-idx, 0)*60ms)}.ResponsiveTable-module_expandChevronHovered__aNVCU{opacity:.85}.ResponsiveTable-module_expandChevronExpanded__iQ1bV{opacity:1;transform:rotate(0deg)}.ResponsiveTable-module_responsiveTable__4y-Od td.ResponsiveTable-module_detailCell__hb9C5{border-top:none;padding:0;transition:border-left .2s ease}.ResponsiveTable-module_responsiveTable__4y-Od td.ResponsiveTable-module_detailCellHasContent__F-DX5{padding-bottom:.5rem}.ResponsiveTable-module_responsiveTable__4y-Od td.ResponsiveTable-module_detailCellExpanded__Zr6UF{background:rgba(0,0,0,.012);border-left:2px solid var(--primary-color,#3b82f6)}.ResponsiveTable-module_detailToggleBar__F5Qrk{height:0;overflow:hidden;transition:height .25s ease,background .25s ease}.ResponsiveTable-module_detailToggleBarExpanded__l8IWq{align-items:center;background:rgba(59,130,246,.08);box-shadow:inset 0 1px 0 rgba(0,0,0,.04);cursor:pointer;display:flex;gap:.5rem;height:2rem;padding:0 .75rem;user-select:none}.ResponsiveTable-module_detailToggleBarExpanded__l8IWq:hover{background:rgba(59,130,246,.14)}.ResponsiveTable-module_detailToggleChevron__KWp3H{align-items:center;color:var(--primary-color,#3b82f6);display:flex;font-size:1.25rem;opacity:1}.ResponsiveTable-module_detailContentWrapper__VzM29{display:grid;grid-template-rows:0fr;transition:grid-template-rows .3s ease}.ResponsiveTable-module_detailContentWrapperExpanded__bkiUb{grid-template-rows:1fr}.ResponsiveTable-module_detailContentInner__GWVaq{min-height:0;overflow:hidden;padding-left:1.5rem}.ResponsiveTable-module_mobileDetailOuter__gusle{overflow:hidden}.ResponsiveTable-module_mobileExpandRow__Fb0AP{align-items:center;border-bottom:1px solid var(--table-border-color);display:flex;justify-content:flex-start;margin-bottom:.25rem;padding:0 0 .25rem}";
|
|
37
|
+
var styles = {"responsiveTable":"ResponsiveTable-module_responsiveTable__4y-Od","tableContainer":"ResponsiveTable-module_tableContainer__VjWjH","cardContainer":"ResponsiveTable-module_cardContainer__Het4h","card":"ResponsiveTable-module_card__b-U2v","card-header":"ResponsiveTable-module_card-header__Ttk51","card-row":"ResponsiveTable-module_card-row__qvIUJ","stacked":"ResponsiveTable-module_stacked__FSaTB","card-label":"ResponsiveTable-module_card-label__v9L71","card-value":"ResponsiveTable-module_card-value__BO-c-","numberValue":"ResponsiveTable-module_numberValue__-TLR1","dateValue":"ResponsiveTable-module_dateValue__UMvqJ","imageValue":"ResponsiveTable-module_imageValue__wVb-p","inputValue":"ResponsiveTable-module_inputValue__CrGMx","clickableRow":"ResponsiveTable-module_clickableRow__0kjWm","clickableHeader":"ResponsiveTable-module_clickableHeader__xHQhF","sortable":"ResponsiveTable-module_sortable__yvA60","sorted-asc":"ResponsiveTable-module_sorted-asc__jzOIa","sorted-desc":"ResponsiveTable-module_sorted-desc__7WCFK","headerInnerWrapper":"ResponsiveTable-module_headerInnerWrapper__3VAhD","headerContent":"ResponsiveTable-module_headerContent__ODMzS","sortIcon":"ResponsiveTable-module_sortIcon__A9WtD","footerCell":"ResponsiveTable-module_footerCell__8H-uG","clickableFooterCell":"ResponsiveTable-module_clickableFooterCell__WB9Ss","footerCard":"ResponsiveTable-module_footerCard__-NE2M","footer-card-row":"ResponsiveTable-module_footer-card-row__Vv6Ur","selectedRow":"ResponsiveTable-module_selectedRow__-JyNW","animatedRow":"ResponsiveTable-module_animatedRow__SFjrJ","cardEntrance":"ResponsiveTable-module_cardEntrance__6JjRV","skeleton":"ResponsiveTable-module_skeleton__XxsXW","shimmer":"ResponsiveTable-module_shimmer__H8PhC","noDataWrapper":"ResponsiveTable-module_noDataWrapper__Rj-k3","noData":"ResponsiveTable-module_noData__IpwNq","spinner":"ResponsiveTable-module_spinner__Pn-3D","spin":"ResponsiveTable-module_spin__i3NHn","infoContainer":"ResponsiveTable-module_infoContainer__b9IF5","stickyHeader":"ResponsiveTable-module_stickyHeader__-jjN-","internalStickyHeader":"ResponsiveTable-module_internalStickyHeader__idiJY","expandColumn":"ResponsiveTable-module_expandColumn__yvwN-","expandChevron":"ResponsiveTable-module_expandChevron__7JalN","expandChevronGreeting":"ResponsiveTable-module_expandChevronGreeting__hu51J","chevronGreeting":"ResponsiveTable-module_chevronGreeting__nLVUh","expandChevronHovered":"ResponsiveTable-module_expandChevronHovered__aNVCU","expandChevronExpanded":"ResponsiveTable-module_expandChevronExpanded__iQ1bV","detailCell":"ResponsiveTable-module_detailCell__hb9C5","detailCellHasContent":"ResponsiveTable-module_detailCellHasContent__F-DX5","detailCellExpanded":"ResponsiveTable-module_detailCellExpanded__Zr6UF","detailToggleBar":"ResponsiveTable-module_detailToggleBar__F5Qrk","detailToggleBarExpanded":"ResponsiveTable-module_detailToggleBarExpanded__l8IWq","detailToggleChevron":"ResponsiveTable-module_detailToggleChevron__KWp3H","detailContentWrapper":"ResponsiveTable-module_detailContentWrapper__VzM29","detailContentWrapperExpanded":"ResponsiveTable-module_detailContentWrapperExpanded__bkiUb","detailContentInner":"ResponsiveTable-module_detailContentInner__GWVaq","mobileDetailOuter":"ResponsiveTable-module_mobileDetailOuter__gusle","mobileExpandRow":"ResponsiveTable-module_mobileExpandRow__Fb0AP","fadeInUp":"ResponsiveTable-module_fadeInUp__jMCS7"};
|
|
38
|
+
styleInject(css_248z);
|
|
39
39
|
|
|
40
40
|
/******************************************************************************
|
|
41
41
|
Copyright (c) Microsoft Corporation.
|
|
@@ -116,7 +116,7 @@ function TableProvider({ children, value }) {
|
|
|
116
116
|
var _a;
|
|
117
117
|
const rawColumnDefinition = getRawColumnDefinition(colDef);
|
|
118
118
|
return onHeaderClick
|
|
119
|
-
? ((_a = rawColumnDefinition.interactivity) === null || _a === void 0 ? void 0 : _a.className) || styles
|
|
119
|
+
? ((_a = rawColumnDefinition.interactivity) === null || _a === void 0 ? void 0 : _a.className) || styles.clickableHeader
|
|
120
120
|
: '';
|
|
121
121
|
}, [getRawColumnDefinition]);
|
|
122
122
|
const getHeaderProps = React.useCallback((colDef) => {
|
|
@@ -196,13 +196,13 @@ function TableHeaderCell(props) {
|
|
|
196
196
|
const rawColDef = getRawColumnDefinition(columnDefinition);
|
|
197
197
|
const clickableHeaderClassName = getClickableHeaderClassName(onHeaderClick, columnDefinition);
|
|
198
198
|
const headerProps = getHeaderProps(columnDefinition);
|
|
199
|
-
const combinedClassName = `${clickableHeaderClassName} ${headerProps.className ? styles
|
|
199
|
+
const combinedClassName = `${clickableHeaderClassName} ${headerProps.className ? styles[headerProps.className] : ''} ${rawColDef.headerClassName || ''}`.trim();
|
|
200
200
|
// eslint-disable-next-line @typescript-eslint/no-unused-vars
|
|
201
201
|
const { className } = headerProps, restHeaderProps = __rest(headerProps, ["className"]);
|
|
202
202
|
return (React.createElement("th", Object.assign({ key: colIndex, className: combinedClassName, style: Object.assign(Object.assign({}, headerProps.style), rawColDef.headerStyle) }, restHeaderProps, { onClick: onHeaderClick ? () => onHeaderClick(rawColDef.interactivity.id) : restHeaderProps.onClick }),
|
|
203
|
-
React.createElement("div", { className: styles
|
|
204
|
-
React.createElement("div", { className: styles
|
|
205
|
-
React.createElement("span", { className: styles
|
|
203
|
+
React.createElement("div", { className: styles.headerInnerWrapper },
|
|
204
|
+
React.createElement("div", { className: styles.headerContent }, getColumnDefinition(columnDefinition, 0).displayLabel),
|
|
205
|
+
React.createElement("span", { className: styles.sortIcon }))));
|
|
206
206
|
}
|
|
207
207
|
|
|
208
208
|
function TableBodyCell(props) {
|
|
@@ -214,12 +214,12 @@ function TableBodyCell(props) {
|
|
|
214
214
|
}
|
|
215
215
|
|
|
216
216
|
function TableBodyRow(props) {
|
|
217
|
-
const { row, rowIndex, columnDefinitions, onRowClick, selectionProps, animationProps, } = props;
|
|
217
|
+
const { row, rowIndex, columnDefinitions, onRowClick, selectionProps, animationProps, expandCell, onMouseEnter, onMouseLeave, } = props;
|
|
218
218
|
const { getRowProps } = useTableContext();
|
|
219
219
|
const rowProps = getRowProps(row);
|
|
220
220
|
const isClickable = onRowClick || selectionProps;
|
|
221
221
|
const pluginOnClick = rowProps.onClick;
|
|
222
|
-
return (React.createElement("tr", { className: `${isClickable ? styles
|
|
222
|
+
return (React.createElement("tr", { className: `${isClickable ? styles.clickableRow : ''} ${(animationProps === null || animationProps === void 0 ? void 0 : animationProps.animateOnLoad) ? styles.animatedRow : ''} ${rowProps.className || ''}`.trim(), style: { animationDelay: `${rowIndex * 0.05}s` }, tabIndex: isClickable ? 0 : undefined, "aria-selected": rowProps['aria-selected'], onMouseEnter: onMouseEnter, onMouseLeave: onMouseLeave, onClickCapture: (e) => {
|
|
223
223
|
// Capture Phase: Check for the ignore attribute BEFORE child handlers run.
|
|
224
224
|
// This prevents issues where child handlers trigger a re-render/unmount
|
|
225
225
|
// that detaches the target from the DOM before the bubbling phase.
|
|
@@ -238,42 +238,45 @@ function TableBodyRow(props) {
|
|
|
238
238
|
if (onRowClick) {
|
|
239
239
|
onRowClick(row);
|
|
240
240
|
}
|
|
241
|
-
} },
|
|
242
|
-
|
|
241
|
+
} },
|
|
242
|
+
expandCell,
|
|
243
|
+
columnDefinitions.map((columnDefinition, colIndex) => (React.createElement("td", { key: colIndex },
|
|
244
|
+
React.createElement(TableBodyCell, { row: row, rowIndex: rowIndex, columnDefinition: columnDefinition }))))));
|
|
243
245
|
}
|
|
244
246
|
|
|
245
|
-
function DetailRow({ row, rowIndex, colSpan, expandRowRenderer, isExpanded, onToggle
|
|
247
|
+
function DetailRow({ row, rowIndex, colSpan, expandRowRenderer, isExpanded, onToggle }) {
|
|
246
248
|
const content = expandRowRenderer(row, rowIndex);
|
|
247
249
|
const hasContent = content != null;
|
|
248
250
|
const [everExpanded, setEverExpanded] = React.useState(false);
|
|
249
251
|
if (isExpanded && !everExpanded)
|
|
250
252
|
setEverExpanded(true);
|
|
251
253
|
const tdClass = [
|
|
252
|
-
styles
|
|
253
|
-
hasContent ? styles
|
|
254
|
-
isExpanded ? styles
|
|
254
|
+
styles.detailCell,
|
|
255
|
+
isExpanded && hasContent ? styles.detailCellHasContent : '',
|
|
256
|
+
isExpanded ? styles.detailCellExpanded : '',
|
|
255
257
|
].join(' ').trim();
|
|
256
|
-
const
|
|
257
|
-
styles
|
|
258
|
-
isExpanded ? styles
|
|
259
|
-
expandChevronClassName !== null && expandChevronClassName !== void 0 ? expandChevronClassName : '',
|
|
258
|
+
const toggleBarClass = [
|
|
259
|
+
styles.detailToggleBar,
|
|
260
|
+
isExpanded ? styles.detailToggleBarExpanded : '',
|
|
260
261
|
].join(' ').trim();
|
|
262
|
+
const toggleAttrs = {
|
|
263
|
+
role: 'button',
|
|
264
|
+
tabIndex: 0,
|
|
265
|
+
'aria-expanded': isExpanded,
|
|
266
|
+
onClick: onToggle,
|
|
267
|
+
onKeyDown: (e) => { if (e.key === 'Enter' || e.key === ' ') {
|
|
268
|
+
e.preventDefault();
|
|
269
|
+
onToggle();
|
|
270
|
+
} },
|
|
271
|
+
'data-rt-ignore-row-click': true,
|
|
272
|
+
};
|
|
261
273
|
return (React.createElement("tr", null,
|
|
262
274
|
React.createElement("td", { colSpan: colSpan, className: tdClass },
|
|
263
|
-
React.createElement("div", Object.assign({ className:
|
|
264
|
-
|
|
265
|
-
|
|
266
|
-
|
|
267
|
-
|
|
268
|
-
onKeyDown: (e) => { if (e.key === 'Enter' || e.key === ' ') {
|
|
269
|
-
e.preventDefault();
|
|
270
|
-
onToggle();
|
|
271
|
-
} },
|
|
272
|
-
'data-rt-ignore-row-click': true,
|
|
273
|
-
} : {})), hasContent && (React.createElement("span", { className: chevronClass },
|
|
274
|
-
React.createElement(md.MdArrowDropDown, null)))),
|
|
275
|
-
React.createElement("div", { className: `${styles$2.detailContentWrapper} ${isExpanded ? styles$2.detailContentWrapperExpanded : ''}` },
|
|
276
|
-
React.createElement("div", { className: styles$2.detailContentInner }, everExpanded && content)))));
|
|
275
|
+
isExpanded && (React.createElement("div", Object.assign({ className: toggleBarClass }, toggleAttrs),
|
|
276
|
+
React.createElement("span", { className: styles.detailToggleChevron },
|
|
277
|
+
React.createElement(md.MdArrowDropDown, null)))),
|
|
278
|
+
React.createElement("div", { className: `${styles.detailContentWrapper} ${isExpanded ? styles.detailContentWrapperExpanded : ''}` },
|
|
279
|
+
React.createElement("div", { className: styles.detailContentInner }, everExpanded && content)))));
|
|
277
280
|
}
|
|
278
281
|
|
|
279
282
|
const TableSentinel = ({ onIntersect, isLoading }) => {
|
|
@@ -307,6 +310,12 @@ function DesktopView(props) {
|
|
|
307
310
|
const { maxHeight, isHeaderSticky, tableContainerRef, headerRef, footerRows, renderPluginFooters, onScroll, } = props;
|
|
308
311
|
const { visibleColumns, originalColumnDefinitions, currentData, getRawColumnDefinition, onRowClick, selectionProps, animationProps, pagination, expandRowRenderer, expandChevronClassName, getRowId, } = useTableContext();
|
|
309
312
|
const [expandedIds, setExpandedIds] = React.useState(new Set());
|
|
313
|
+
const [hoveredRowId, setHoveredRowId] = React.useState(null);
|
|
314
|
+
const [greetingActive, setGreetingActive] = React.useState(true);
|
|
315
|
+
React.useEffect(() => {
|
|
316
|
+
const t = setTimeout(() => setGreetingActive(false), 3200);
|
|
317
|
+
return () => clearTimeout(t);
|
|
318
|
+
}, []);
|
|
310
319
|
const toggleExpanded = React.useCallback((id) => {
|
|
311
320
|
setExpandedIds(prev => {
|
|
312
321
|
const next = new Set(prev);
|
|
@@ -337,41 +346,60 @@ function DesktopView(props) {
|
|
|
337
346
|
}
|
|
338
347
|
return (React.createElement("tfoot", null, footerRows.map((row, rowIndex) => {
|
|
339
348
|
let currentOriginalIndex = 0;
|
|
340
|
-
return (React.createElement("tr", { key: rowIndex },
|
|
341
|
-
|
|
342
|
-
|
|
343
|
-
|
|
344
|
-
|
|
345
|
-
|
|
346
|
-
|
|
349
|
+
return (React.createElement("tr", { key: rowIndex },
|
|
350
|
+
expandRowRenderer && React.createElement("td", { className: styles.expandColumn }),
|
|
351
|
+
row.columns.map((col, colIndex) => {
|
|
352
|
+
const effectiveColSpan = getEffectiveColSpan(col, currentOriginalIndex);
|
|
353
|
+
currentOriginalIndex += (col.colSpan || 1);
|
|
354
|
+
if (effectiveColSpan === 0)
|
|
355
|
+
return null;
|
|
356
|
+
return (React.createElement("td", { key: colIndex, colSpan: effectiveColSpan, className: `${styles.footerCell} ${col.className || ''} ${col.onCellClick ? styles.clickableFooterCell : ''}`, onClick: col.onCellClick }, col.cellRenderer()));
|
|
357
|
+
})));
|
|
347
358
|
})));
|
|
348
|
-
}, [footerRows, getEffectiveColSpan]);
|
|
359
|
+
}, [footerRows, getEffectiveColSpan, expandRowRenderer]);
|
|
349
360
|
const useFixedHeaders = !!maxHeight;
|
|
350
361
|
const fixedHeadersStyle = useFixedHeaders
|
|
351
362
|
? { maxHeight, overflowY: 'auto' }
|
|
352
363
|
: {};
|
|
353
364
|
const headerClassName = useFixedHeaders
|
|
354
|
-
? styles
|
|
355
|
-
: (isHeaderSticky ? styles
|
|
356
|
-
return (React.createElement("div", { className: styles
|
|
357
|
-
React.createElement("table", { className: styles
|
|
365
|
+
? styles.internalStickyHeader
|
|
366
|
+
: (isHeaderSticky ? styles.stickyHeader : '');
|
|
367
|
+
return (React.createElement("div", { className: styles.tableContainer, style: fixedHeadersStyle, ref: tableContainerRef, onScroll: onScroll },
|
|
368
|
+
React.createElement("table", { className: styles['responsiveTable'] },
|
|
358
369
|
React.createElement("thead", { ref: headerRef, className: headerClassName },
|
|
359
|
-
React.createElement("tr", null,
|
|
370
|
+
React.createElement("tr", null,
|
|
371
|
+
expandRowRenderer && React.createElement("th", { className: styles.expandColumn }),
|
|
372
|
+
visibleColumns.map((columnDefinition, colIndex) => (React.createElement(TableHeaderCell, { key: colIndex, columnDefinition: columnDefinition, colIndex: colIndex }))))),
|
|
360
373
|
React.createElement("tbody", null, currentData.map((row, rowIndex) => {
|
|
361
374
|
const rowId = getRowId(row, rowIndex);
|
|
375
|
+
const isExpanded = expandedIds.has(rowId);
|
|
376
|
+
const isHovered = hoveredRowId === rowId;
|
|
377
|
+
const rowContent = expandRowRenderer === null || expandRowRenderer === void 0 ? void 0 : expandRowRenderer(row, rowIndex);
|
|
378
|
+
const rowHasContent = rowContent != null;
|
|
379
|
+
const chevronClasses = [
|
|
380
|
+
styles.expandChevron,
|
|
381
|
+
greetingActive && rowHasContent ? styles.expandChevronGreeting : '',
|
|
382
|
+
isExpanded ? styles.expandChevronExpanded : '',
|
|
383
|
+
isHovered && !isExpanded ? styles.expandChevronHovered : '',
|
|
384
|
+
expandChevronClassName !== null && expandChevronClassName !== void 0 ? expandChevronClassName : '',
|
|
385
|
+
].filter(Boolean).join(' ').trim();
|
|
362
386
|
return (React.createElement(React.Fragment, { key: rowId },
|
|
363
|
-
React.createElement(TableBodyRow, { row: row, rowIndex: rowIndex, columnDefinitions: visibleColumns, onRowClick: onRowClick, selectionProps: selectionProps, animationProps: animationProps }),
|
|
364
|
-
|
|
387
|
+
React.createElement(TableBodyRow, { row: row, rowIndex: rowIndex, columnDefinitions: visibleColumns, onRowClick: onRowClick, selectionProps: selectionProps, animationProps: animationProps, expandCell: expandRowRenderer ? (React.createElement("td", { className: styles.expandColumn, style: { '--row-idx': rowIndex } }, rowHasContent && (React.createElement("span", { className: chevronClasses, role: "button", tabIndex: 0, "aria-expanded": isExpanded, onClick: (e) => { e.stopPropagation(); toggleExpanded(rowId); }, onKeyDown: (e) => { if (e.key === 'Enter' || e.key === ' ') {
|
|
388
|
+
e.preventDefault();
|
|
389
|
+
toggleExpanded(rowId);
|
|
390
|
+
} }, "data-rt-ignore-row-click": true },
|
|
391
|
+
React.createElement(md.MdArrowDropDown, null))))) : undefined, onMouseEnter: () => expandRowRenderer && setHoveredRowId(rowId), onMouseLeave: () => expandRowRenderer && setHoveredRowId(null) }),
|
|
392
|
+
expandRowRenderer && rowHasContent && (React.createElement(DetailRow, { row: row, rowIndex: rowIndex, colSpan: visibleColumns.length + 1, expandRowRenderer: expandRowRenderer, isExpanded: isExpanded, onToggle: () => toggleExpanded(rowId) }))));
|
|
365
393
|
})),
|
|
366
394
|
tableFooter),
|
|
367
395
|
(pagination === null || pagination === void 0 ? void 0 : pagination.hasMore) && (React.createElement(TableSentinel, { onIntersect: () => pagination.loadNextPage(), isLoading: pagination.isFetchingMore })),
|
|
368
|
-
(pagination === null || pagination === void 0 ? void 0 : pagination.isFetchingMore) && (React.createElement("div", { className: styles
|
|
369
|
-
React.createElement("div", { className: styles
|
|
396
|
+
(pagination === null || pagination === void 0 ? void 0 : pagination.isFetchingMore) && (React.createElement("div", { className: styles.infoContainer },
|
|
397
|
+
React.createElement("div", { className: styles.spinner }),
|
|
370
398
|
React.createElement("span", null, "Loading more items..."))),
|
|
371
399
|
renderPluginFooters()));
|
|
372
400
|
}
|
|
373
401
|
|
|
374
|
-
function MobileDetailSection({ row, rowIndex, expandRowRenderer, isExpanded, onToggle
|
|
402
|
+
function MobileDetailSection({ row, rowIndex, expandRowRenderer, isExpanded, onToggle }) {
|
|
375
403
|
const content = expandRowRenderer(row, rowIndex);
|
|
376
404
|
const hasContent = content != null;
|
|
377
405
|
const [everExpanded, setEverExpanded] = React.useState(false);
|
|
@@ -379,31 +407,44 @@ function MobileDetailSection({ row, rowIndex, expandRowRenderer, isExpanded, onT
|
|
|
379
407
|
setEverExpanded(true);
|
|
380
408
|
if (!hasContent)
|
|
381
409
|
return null;
|
|
382
|
-
const chevronClass = [
|
|
383
|
-
styles$2.detailChevron,
|
|
384
|
-
isExpanded ? styles$2.detailChevronExpanded : '',
|
|
385
|
-
expandChevronClassName !== null && expandChevronClassName !== void 0 ? expandChevronClassName : '',
|
|
386
|
-
].join(' ').trim();
|
|
387
410
|
const outerClass = [
|
|
388
|
-
styles
|
|
389
|
-
styles
|
|
390
|
-
isExpanded ? styles
|
|
411
|
+
styles.mobileDetailOuter,
|
|
412
|
+
isExpanded ? styles.detailCellHasContent : '',
|
|
413
|
+
isExpanded ? styles.detailCellExpanded : '',
|
|
414
|
+
].join(' ').trim();
|
|
415
|
+
const toggleBarClass = [
|
|
416
|
+
styles.detailToggleBar,
|
|
417
|
+
isExpanded ? styles.detailToggleBarExpanded : '',
|
|
391
418
|
].join(' ').trim();
|
|
419
|
+
const toggleAttrs = {
|
|
420
|
+
role: 'button',
|
|
421
|
+
tabIndex: 0,
|
|
422
|
+
'aria-expanded': isExpanded,
|
|
423
|
+
onClick: onToggle,
|
|
424
|
+
onKeyDown: (e) => { if (e.key === 'Enter' || e.key === ' ') {
|
|
425
|
+
e.preventDefault();
|
|
426
|
+
onToggle();
|
|
427
|
+
} },
|
|
428
|
+
'data-rt-ignore-row-click': true,
|
|
429
|
+
};
|
|
392
430
|
return (React.createElement("div", { className: outerClass },
|
|
393
|
-
React.createElement("div", { className:
|
|
394
|
-
|
|
395
|
-
|
|
396
|
-
|
|
397
|
-
React.createElement("
|
|
398
|
-
React.createElement(md.MdArrowDropDown, null))),
|
|
399
|
-
React.createElement("div", { className: `${styles$2.detailContentWrapper} ${isExpanded ? styles$2.detailContentWrapperExpanded : ''}` },
|
|
400
|
-
React.createElement("div", { className: styles$2.detailContentInner }, everExpanded && content))));
|
|
431
|
+
isExpanded && (React.createElement("div", Object.assign({ className: toggleBarClass }, toggleAttrs),
|
|
432
|
+
React.createElement("span", { className: styles.detailToggleChevron },
|
|
433
|
+
React.createElement(md.MdArrowDropDown, null)))),
|
|
434
|
+
React.createElement("div", { className: `${styles.detailContentWrapper} ${isExpanded ? styles.detailContentWrapperExpanded : ''}` },
|
|
435
|
+
React.createElement("div", { className: styles.detailContentInner }, everExpanded && content))));
|
|
401
436
|
}
|
|
402
437
|
function MobileView(props) {
|
|
403
438
|
const { mobileFooter } = props;
|
|
404
439
|
const { currentData, visibleColumns, onRowClick, selectionProps, animationProps, getRowProps, getRowId, getColumnDefinition, onHeaderClickCallback, getClickableHeaderClassName, pagination, mobileCardClassName, expandRowRenderer, expandChevronClassName, } = useTableContext();
|
|
405
440
|
const isClickable = onRowClick || selectionProps;
|
|
406
441
|
const [expandedIds, setExpandedIds] = React.useState(new Set());
|
|
442
|
+
const [hoveredRowId, setHoveredRowId] = React.useState(null);
|
|
443
|
+
const [greetingActive, setGreetingActive] = React.useState(true);
|
|
444
|
+
React.useEffect(() => {
|
|
445
|
+
const t = setTimeout(() => setGreetingActive(false), 3200);
|
|
446
|
+
return () => clearTimeout(t);
|
|
447
|
+
}, []);
|
|
407
448
|
const toggleExpanded = React.useCallback((id) => {
|
|
408
449
|
setExpandedIds(prev => {
|
|
409
450
|
const next = new Set(prev);
|
|
@@ -444,19 +485,30 @@ function MobileView(props) {
|
|
|
444
485
|
};
|
|
445
486
|
const getTypeClassName = (dataType) => {
|
|
446
487
|
switch (dataType) {
|
|
447
|
-
case 'number': return styles
|
|
448
|
-
case 'date': return styles
|
|
449
|
-
case 'image': return styles
|
|
450
|
-
case 'input': return styles
|
|
488
|
+
case 'number': return styles.numberValue;
|
|
489
|
+
case 'date': return styles.dateValue;
|
|
490
|
+
case 'image': return styles.imageValue;
|
|
491
|
+
case 'input': return styles.inputValue;
|
|
451
492
|
default: return '';
|
|
452
493
|
}
|
|
453
494
|
};
|
|
454
|
-
return (React.createElement("div", { className: styles
|
|
495
|
+
return (React.createElement("div", { className: styles.cardContainer },
|
|
455
496
|
currentData.map((row, rowIndex) => {
|
|
456
497
|
const rowProps = getRowProps(row);
|
|
457
498
|
const pluginOnClick = rowProps.onClick;
|
|
458
|
-
|
|
459
|
-
|
|
499
|
+
const rowId = getRowId(row, rowIndex);
|
|
500
|
+
const isExpanded = expandedIds.has(rowId);
|
|
501
|
+
const rowContent = expandRowRenderer === null || expandRowRenderer === void 0 ? void 0 : expandRowRenderer(row, rowIndex);
|
|
502
|
+
const rowHasContent = rowContent != null;
|
|
503
|
+
const chevronClasses = [
|
|
504
|
+
styles.expandChevron,
|
|
505
|
+
greetingActive && rowHasContent ? styles.expandChevronGreeting : '',
|
|
506
|
+
isExpanded ? styles.expandChevronExpanded : '',
|
|
507
|
+
hoveredRowId === rowId && !isExpanded ? styles.expandChevronHovered : '',
|
|
508
|
+
expandChevronClassName !== null && expandChevronClassName !== void 0 ? expandChevronClassName : '',
|
|
509
|
+
].filter(Boolean).join(' ').trim();
|
|
510
|
+
return (React.createElement(React.Fragment, { key: rowId },
|
|
511
|
+
React.createElement("div", { className: `${styles.card} ${isClickable ? styles.clickableRow : ''} ${(animationProps === null || animationProps === void 0 ? void 0 : animationProps.animateOnLoad) ? styles.animatedRow : ''} ${rowProps.className || ''} ${mobileCardClassName || ''}`.trim(), style: { animationDelay: `${rowIndex * 0.05}s` }, tabIndex: isClickable ? 0 : undefined, "aria-selected": rowProps['aria-selected'], onMouseEnter: () => expandRowRenderer && setHoveredRowId(rowId), onMouseLeave: () => expandRowRenderer && setHoveredRowId(null), onClickCapture: (e) => {
|
|
460
512
|
const target = e.target;
|
|
461
513
|
if (target.closest('[data-rt-ignore-row-click]')) {
|
|
462
514
|
e.nativeEvent._rtIgnoreRowClick = true;
|
|
@@ -470,7 +522,13 @@ function MobileView(props) {
|
|
|
470
522
|
if (onRowClick)
|
|
471
523
|
onRowClick(row);
|
|
472
524
|
} },
|
|
473
|
-
React.createElement("div", { className: styles
|
|
525
|
+
expandRowRenderer && rowHasContent && (React.createElement("div", { className: styles.mobileExpandRow, style: { '--row-idx': rowIndex } },
|
|
526
|
+
React.createElement("span", { className: chevronClasses, role: "button", tabIndex: 0, "aria-expanded": isExpanded, onClick: (e) => { e.stopPropagation(); toggleExpanded(rowId); }, onKeyDown: (e) => { if (e.key === 'Enter' || e.key === ' ') {
|
|
527
|
+
e.preventDefault();
|
|
528
|
+
toggleExpanded(rowId);
|
|
529
|
+
} }, "data-rt-ignore-row-click": true },
|
|
530
|
+
React.createElement(md.MdArrowDropDown, null)))),
|
|
531
|
+
React.createElement("div", { className: styles['card-body'] }, visibleColumns.map((columnDefinition, colIndex) => {
|
|
474
532
|
const colDef = getColumnDefinition(columnDefinition, rowIndex);
|
|
475
533
|
const onHeaderClick = onHeaderClickCallback(columnDefinition);
|
|
476
534
|
const clickableHeaderClassName = getClickableHeaderClassName(onHeaderClick, columnDefinition);
|
|
@@ -479,21 +537,21 @@ function MobileView(props) {
|
|
|
479
537
|
const sampleValue = colDef.dataKey ? row[colDef.dataKey] : null;
|
|
480
538
|
const dataType = inferDataType(colDef, sampleValue);
|
|
481
539
|
const typeClassName = getTypeClassName(dataType);
|
|
482
|
-
return (React.createElement("div", { key: colIndex, className: `${styles
|
|
483
|
-
React.createElement("span", { className: `${styles
|
|
540
|
+
return (React.createElement("div", { key: colIndex, className: `${styles['card-row']} ${styles.stacked}` },
|
|
541
|
+
React.createElement("span", { className: `${styles['card-label']} ${clickableHeaderClassName} ${colDef.headerClassName || ''}`, style: colDef.headerStyle, onClick: (e) => {
|
|
484
542
|
if (onHeaderClick) {
|
|
485
543
|
e.stopPropagation();
|
|
486
544
|
onHeaderClick(colDef.interactivity.id);
|
|
487
545
|
}
|
|
488
546
|
} }, colDef.displayLabel),
|
|
489
|
-
React.createElement("span", { className: `${styles
|
|
547
|
+
React.createElement("span", { className: `${styles['card-value']} ${typeClassName} ${colDef.cellClassName || ''}`, style: colDef.cellStyle },
|
|
490
548
|
React.createElement(TableBodyCell, { row: row, rowIndex: rowIndex, columnDefinition: columnDefinition }))));
|
|
491
549
|
}))),
|
|
492
|
-
expandRowRenderer && (React.createElement(MobileDetailSection, { row: row, rowIndex: rowIndex, expandRowRenderer: expandRowRenderer, isExpanded:
|
|
550
|
+
expandRowRenderer && rowHasContent && (React.createElement(MobileDetailSection, { row: row, rowIndex: rowIndex, expandRowRenderer: expandRowRenderer, isExpanded: isExpanded, onToggle: () => toggleExpanded(rowId) }))));
|
|
493
551
|
}),
|
|
494
552
|
(pagination === null || pagination === void 0 ? void 0 : pagination.hasMore) && (React.createElement(TableSentinel, { onIntersect: () => pagination.loadNextPage(), isLoading: pagination.isFetchingMore })),
|
|
495
|
-
(pagination === null || pagination === void 0 ? void 0 : pagination.isFetchingMore) && (React.createElement("div", { className: styles
|
|
496
|
-
React.createElement("div", { className: styles
|
|
553
|
+
(pagination === null || pagination === void 0 ? void 0 : pagination.isFetchingMore) && (React.createElement("div", { className: styles.infoContainer },
|
|
554
|
+
React.createElement("div", { className: styles.spinner }),
|
|
497
555
|
React.createElement("span", null, "Loading more items..."))),
|
|
498
556
|
mobileFooter));
|
|
499
557
|
}
|
|
@@ -503,35 +561,16 @@ function SkeletonView(props) {
|
|
|
503
561
|
const skeletonRowCount = 5;
|
|
504
562
|
const columnCount = columnDefinitions.length;
|
|
505
563
|
if (isMobile) {
|
|
506
|
-
return (React.createElement("div", null, [...Array(skeletonRowCount)].map((_, i) => (React.createElement("div", { key: i, className: styles
|
|
564
|
+
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' } }))))))));
|
|
507
565
|
}
|
|
508
|
-
return (React.createElement("table", { className: styles
|
|
566
|
+
return (React.createElement("table", { className: styles.responsiveTable },
|
|
509
567
|
React.createElement("thead", null,
|
|
510
568
|
React.createElement("tr", null, [...Array(columnCount)].map((_, i) => (React.createElement("th", { key: i },
|
|
511
|
-
React.createElement("div", { className: `${styles
|
|
569
|
+
React.createElement("div", { className: `${styles.skeleton} ${styles.skeletonText}` })))))),
|
|
512
570
|
React.createElement("tbody", null, [...Array(skeletonRowCount)].map((_, i) => (React.createElement("tr", { key: i }, [...Array(columnCount)].map((_, j) => (React.createElement("td", { key: j },
|
|
513
|
-
React.createElement("div", { className: `${styles
|
|
571
|
+
React.createElement("div", { className: `${styles.skeleton} ${styles.skeletonText}` }))))))))));
|
|
514
572
|
}
|
|
515
573
|
|
|
516
|
-
var css_248z$1 = ".LoadingSpinner-module_spinner__F9V3x{animation:LoadingSpinner-module_spin__VkBDO .8s cubic-bezier(.4,0,.2,1) infinite;border:3px solid rgba(0,0,0,.05);border-left:3px solid var(--primary-color,#007bff);border-radius:50%;display:inline-block;height:28px;vertical-align:middle;width:28px}@keyframes LoadingSpinner-module_spin__VkBDO{0%{transform:rotate(0deg)}to{transform:rotate(1turn)}}";
|
|
517
|
-
var styles$1 = {"spinner":"LoadingSpinner-module_spinner__F9V3x"};
|
|
518
|
-
styleInject(css_248z$1);
|
|
519
|
-
|
|
520
|
-
var css_248z = ".NoMoreDataMessage-module_infoContainer__dk1r5{align-items:center;background-color:var(--table-header-bg,#f8f9fa);border-top:1px solid var(--table-border-color,#e0e0e0);color:var(--text-color-muted,#6c757d);display:flex;font-size:.85rem;gap:.75rem;justify-content:center;padding:2rem;width:100%}.NoMoreDataMessage-module_infoContainer__dk1r5.NoMoreDataMessage-module_noMoreData__ATuIg{font-weight:600;letter-spacing:.02em}";
|
|
521
|
-
var styles = {"infoContainer":"NoMoreDataMessage-module_infoContainer__dk1r5","noMoreData":"NoMoreDataMessage-module_noMoreData__ATuIg"};
|
|
522
|
-
styleInject(css_248z);
|
|
523
|
-
|
|
524
|
-
const LoadingSpinner = () => {
|
|
525
|
-
return (React.createElement("div", { className: styles.infoContainer },
|
|
526
|
-
React.createElement("div", { className: styles$1.spinner }),
|
|
527
|
-
React.createElement("span", null, "Loading more items...")));
|
|
528
|
-
};
|
|
529
|
-
|
|
530
|
-
const NoMoreDataMessage = () => {
|
|
531
|
-
return (React.createElement("div", { className: `${styles.infoContainer} ${styles.noMoreData}` },
|
|
532
|
-
React.createElement("p", null, "You've reached the end!")));
|
|
533
|
-
};
|
|
534
|
-
|
|
535
574
|
function debounce(func, delay) {
|
|
536
575
|
let timeout;
|
|
537
576
|
return function (...args) {
|
|
@@ -746,7 +785,7 @@ class SelectionPlugin {
|
|
|
746
785
|
const rowId = this.getRowId(row);
|
|
747
786
|
const isSelected = selectedIds.has(rowId);
|
|
748
787
|
const combinedClassName = [
|
|
749
|
-
isSelected ? styles
|
|
788
|
+
isSelected ? styles.selectedRow : '',
|
|
750
789
|
isSelected ? selectedRowClassName : ''
|
|
751
790
|
].filter(Boolean).join(' ');
|
|
752
791
|
return {
|
|
@@ -891,7 +930,7 @@ class SortPlugin {
|
|
|
891
930
|
}
|
|
892
931
|
|
|
893
932
|
const useTablePlugins = (props) => {
|
|
894
|
-
const { data, plugins, filterProps, selectionProps, sortProps, columnDefinitions, getScrollableElement,
|
|
933
|
+
const { data, plugins, filterProps, selectionProps, sortProps, columnDefinitions, getScrollableElement, onFilterChange, } = props;
|
|
895
934
|
const [processedData, setProcessedData] = React.useState(data);
|
|
896
935
|
const [activePlugins, setActivePlugins] = React.useState([]);
|
|
897
936
|
// Persist internal plugins using refs to prevent state loss
|
|
@@ -961,7 +1000,6 @@ const useTablePlugins = (props) => {
|
|
|
961
1000
|
getData: () => data,
|
|
962
1001
|
forceUpdate: forceUpdatePlugins,
|
|
963
1002
|
getScrollableElement: getScrollableElement,
|
|
964
|
-
infiniteScrollProps: infiniteScrollProps,
|
|
965
1003
|
filterProps: filterProps,
|
|
966
1004
|
selectionProps: selectionProps,
|
|
967
1005
|
columnDefinitions: columnDefinitions,
|
|
@@ -989,7 +1027,6 @@ const useTablePlugins = (props) => {
|
|
|
989
1027
|
sortProps,
|
|
990
1028
|
columnDefinitions,
|
|
991
1029
|
getScrollableElement,
|
|
992
|
-
infiniteScrollProps,
|
|
993
1030
|
getRawColumnDefinition,
|
|
994
1031
|
onFilterChange,
|
|
995
1032
|
]);
|
|
@@ -1003,157 +1040,6 @@ const useTablePlugins = (props) => {
|
|
|
1003
1040
|
return { processedData, activePlugins, visibleColumns, forceUpdatePlugins };
|
|
1004
1041
|
};
|
|
1005
1042
|
|
|
1006
|
-
function InfiniteTable(props) {
|
|
1007
|
-
const { columnDefinitions, data, noDataComponent, maxHeight, onRowClick, footerRows, mobileBreakpoint, plugins, enablePageLevelStickyHeader, infiniteScrollProps, filterProps, selectionProps, animationProps, sortProps, } = props;
|
|
1008
|
-
const tableContainerRef = React.useRef(null);
|
|
1009
|
-
const headerRef = React.useRef(null);
|
|
1010
|
-
const { isMobile, isHeaderSticky, debouncedScrollHandler } = useResponsiveTable({
|
|
1011
|
-
mobileBreakpoint,
|
|
1012
|
-
enablePageLevelStickyHeader,
|
|
1013
|
-
maxHeight,
|
|
1014
|
-
headerRef,
|
|
1015
|
-
scrollableRef: tableContainerRef,
|
|
1016
|
-
});
|
|
1017
|
-
const [internalData, setInternalData] = React.useState(data || []);
|
|
1018
|
-
const [isLoadingMore, setIsLoadingMore] = React.useState(false);
|
|
1019
|
-
const [internalHasMore, setInternalHasMore] = React.useState(true);
|
|
1020
|
-
const getScrollableElement = React.useCallback(() => tableContainerRef.current, []);
|
|
1021
|
-
const { processedData, activePlugins, visibleColumns } = useTablePlugins({
|
|
1022
|
-
data: internalData,
|
|
1023
|
-
plugins,
|
|
1024
|
-
filterProps,
|
|
1025
|
-
selectionProps,
|
|
1026
|
-
sortProps,
|
|
1027
|
-
columnDefinitions,
|
|
1028
|
-
getScrollableElement,
|
|
1029
|
-
infiniteScrollProps,
|
|
1030
|
-
});
|
|
1031
|
-
const currentHasMore = (infiniteScrollProps === null || infiniteScrollProps === void 0 ? void 0 : infiniteScrollProps.hasMore) !== undefined
|
|
1032
|
-
? infiniteScrollProps.hasMore
|
|
1033
|
-
: internalHasMore;
|
|
1034
|
-
const hasData = React.useMemo(() => processedData.length > 0, [processedData]);
|
|
1035
|
-
const noDataComponentNode = noDataComponent || React.createElement("div", { className: styles$2.noData }, "No data");
|
|
1036
|
-
const defaultLoadingComponent = React.createElement(LoadingSpinner, null);
|
|
1037
|
-
const defaultNoMoreDataComponent = React.createElement(NoMoreDataMessage, null);
|
|
1038
|
-
const loadMoreData = React.useCallback(() => __awaiter(this, void 0, void 0, function* () {
|
|
1039
|
-
var _a;
|
|
1040
|
-
if (!infiniteScrollProps || isLoadingMore)
|
|
1041
|
-
return;
|
|
1042
|
-
setIsLoadingMore(true);
|
|
1043
|
-
try {
|
|
1044
|
-
const newItems = yield ((_a = infiniteScrollProps.onLoadMore) === null || _a === void 0 ? void 0 : _a.call(infiniteScrollProps, internalData));
|
|
1045
|
-
if (infiniteScrollProps.hasMore === undefined) {
|
|
1046
|
-
if (!newItems || newItems.length === 0) {
|
|
1047
|
-
setInternalHasMore(false);
|
|
1048
|
-
}
|
|
1049
|
-
}
|
|
1050
|
-
if (newItems && newItems.length > 0) {
|
|
1051
|
-
setInternalData(prevData => [...prevData, ...newItems]);
|
|
1052
|
-
}
|
|
1053
|
-
}
|
|
1054
|
-
catch (error) {
|
|
1055
|
-
console.error("Failed to load more items for infinite scroll:", error);
|
|
1056
|
-
}
|
|
1057
|
-
finally {
|
|
1058
|
-
setIsLoadingMore(false);
|
|
1059
|
-
}
|
|
1060
|
-
}), [infiniteScrollProps, isLoadingMore, internalData]);
|
|
1061
|
-
React.useEffect(() => {
|
|
1062
|
-
setInternalData(data || []);
|
|
1063
|
-
}, [data]);
|
|
1064
|
-
React.useEffect(() => {
|
|
1065
|
-
if (data.length === 0) {
|
|
1066
|
-
loadMoreData();
|
|
1067
|
-
}
|
|
1068
|
-
}, [data.length, loadMoreData]);
|
|
1069
|
-
const handleScrollForInfinite = React.useCallback((currentTarget) => {
|
|
1070
|
-
if (!currentTarget)
|
|
1071
|
-
return;
|
|
1072
|
-
const { scrollHeight, scrollTop, clientHeight } = currentTarget;
|
|
1073
|
-
if (currentHasMore && !isLoadingMore && scrollHeight - scrollTop - clientHeight < 100) {
|
|
1074
|
-
loadMoreData();
|
|
1075
|
-
}
|
|
1076
|
-
}, [currentHasMore, isLoadingMore, loadMoreData]);
|
|
1077
|
-
const mobileFooter = React.useMemo(() => {
|
|
1078
|
-
if (!footerRows || footerRows.length === 0) {
|
|
1079
|
-
return null;
|
|
1080
|
-
}
|
|
1081
|
-
// Helper to get raw column definition in this context
|
|
1082
|
-
const getRaw = (colDef) => {
|
|
1083
|
-
if (typeof colDef === 'function') {
|
|
1084
|
-
return processedData.length > 0 ? colDef(processedData[0], 0) : { displayLabel: '', cellRenderer: () => '' };
|
|
1085
|
-
}
|
|
1086
|
-
return colDef;
|
|
1087
|
-
};
|
|
1088
|
-
return (React.createElement("div", { className: styles$2.footerCard },
|
|
1089
|
-
React.createElement("div", { className: styles$2['footer-card-body'] }, footerRows.map((row, rowIndex) => {
|
|
1090
|
-
let currentColumnIndex = 0;
|
|
1091
|
-
return (React.createElement("div", { key: rowIndex }, row.columns.map((col, colIndex) => {
|
|
1092
|
-
let label = col.displayLabel;
|
|
1093
|
-
if (!label && col.colSpan === 1) {
|
|
1094
|
-
const header = columnDefinitions[currentColumnIndex];
|
|
1095
|
-
if (header) {
|
|
1096
|
-
label = getRaw(header).displayLabel;
|
|
1097
|
-
}
|
|
1098
|
-
}
|
|
1099
|
-
currentColumnIndex += col.colSpan;
|
|
1100
|
-
return (React.createElement("p", { key: colIndex, className: `${styles$2['footer-card-row']} ${col.className || ''} ${col.onCellClick ? styles$2.clickableFooterCell : ''}`, onClick: col.onCellClick },
|
|
1101
|
-
label && React.createElement("span", { className: styles$2['card-label'] }, label),
|
|
1102
|
-
React.createElement("span", { className: styles$2['card-value'] }, col.cellRenderer())));
|
|
1103
|
-
})));
|
|
1104
|
-
}))));
|
|
1105
|
-
}, [footerRows, columnDefinitions, processedData]);
|
|
1106
|
-
const renderPluginHeaders = React.useCallback(() => {
|
|
1107
|
-
if (!activePlugins) {
|
|
1108
|
-
return null;
|
|
1109
|
-
}
|
|
1110
|
-
return activePlugins.map((plugin) => {
|
|
1111
|
-
if (plugin.renderHeader) {
|
|
1112
|
-
if (plugin.id === 'sort' && !isMobile) {
|
|
1113
|
-
return null;
|
|
1114
|
-
}
|
|
1115
|
-
return React.createElement("div", { key: plugin.id }, plugin.renderHeader());
|
|
1116
|
-
}
|
|
1117
|
-
return null;
|
|
1118
|
-
});
|
|
1119
|
-
}, [activePlugins, isMobile]);
|
|
1120
|
-
const renderPluginFooters = React.useCallback(() => {
|
|
1121
|
-
if (!plugins) {
|
|
1122
|
-
return null;
|
|
1123
|
-
}
|
|
1124
|
-
return plugins.map((plugin) => {
|
|
1125
|
-
if (plugin.renderFooter) {
|
|
1126
|
-
return React.createElement("div", { key: plugin.id + '-footer' }, plugin.renderFooter());
|
|
1127
|
-
}
|
|
1128
|
-
return null;
|
|
1129
|
-
});
|
|
1130
|
-
}, [plugins]);
|
|
1131
|
-
const infiniteStatusUI = (React.createElement(React.Fragment, null,
|
|
1132
|
-
isLoadingMore && ((infiniteScrollProps === null || infiniteScrollProps === void 0 ? void 0 : infiniteScrollProps.loadingMoreComponent) || defaultLoadingComponent),
|
|
1133
|
-
!isLoadingMore && !currentHasMore && ((infiniteScrollProps === null || infiniteScrollProps === void 0 ? void 0 : infiniteScrollProps.noMoreDataComponent) || defaultNoMoreDataComponent)));
|
|
1134
|
-
if ((animationProps === null || animationProps === void 0 ? void 0 : animationProps.isLoading) && !hasData) {
|
|
1135
|
-
return React.createElement(SkeletonView, { isMobile: isMobile, columnDefinitions: visibleColumns });
|
|
1136
|
-
}
|
|
1137
|
-
return (React.createElement(TableProvider, { value: {
|
|
1138
|
-
data: internalData,
|
|
1139
|
-
processedData,
|
|
1140
|
-
visibleColumns,
|
|
1141
|
-
originalColumnDefinitions: columnDefinitions,
|
|
1142
|
-
activePlugins,
|
|
1143
|
-
onRowClick,
|
|
1144
|
-
selectionProps,
|
|
1145
|
-
animationProps,
|
|
1146
|
-
} },
|
|
1147
|
-
React.createElement("div", null,
|
|
1148
|
-
React.createElement("div", { style: { display: 'flex', justifyContent: 'flex-end' } }, renderPluginHeaders()),
|
|
1149
|
-
!hasData && noDataComponentNode,
|
|
1150
|
-
hasData && (isMobile ? (React.createElement(MobileView, { mobileFooter: mobileFooter })) : (React.createElement(DesktopView, { maxHeight: maxHeight, isHeaderSticky: isHeaderSticky, tableContainerRef: tableContainerRef, headerRef: headerRef, footerRows: footerRows, renderPluginFooters: renderPluginFooters, onScroll: (e) => {
|
|
1151
|
-
debouncedScrollHandler(e.currentTarget); // For sticky header
|
|
1152
|
-
handleScrollForInfinite(e.currentTarget); // For infinite scroll
|
|
1153
|
-
} }))),
|
|
1154
|
-
hasData && infiniteStatusUI)));
|
|
1155
|
-
}
|
|
1156
|
-
|
|
1157
1043
|
const useTableDataSource = (props) => {
|
|
1158
1044
|
const { dataSource, pageSize = 20, initialData = [], sort, filter } = props;
|
|
1159
1045
|
const [data, setData] = React.useState(initialData);
|
|
@@ -1255,7 +1141,7 @@ const useTableDataSource = (props) => {
|
|
|
1255
1141
|
* Supports static data or async data sources with built-in infinite scroll.
|
|
1256
1142
|
*/
|
|
1257
1143
|
function ResponsiveTableInner(props, ref) {
|
|
1258
|
-
const { columnDefinitions, data: initialData, dataSource, pageSize, noDataComponent, maxHeight, onRowClick, footerRows, mobileBreakpoint, plugins, enablePageLevelStickyHeader,
|
|
1144
|
+
const { columnDefinitions, data: initialData, dataSource, pageSize, noDataComponent, maxHeight, onRowClick, footerRows, mobileBreakpoint, plugins, enablePageLevelStickyHeader, filterProps, selectionProps, animationProps, sortProps, mobileCardClassName, onDataSourceStateChange, onPageChange, onDataSourceError, expandRowRenderer, expandChevronClassName, } = props;
|
|
1259
1145
|
const tableContainerRef = React.useRef(null);
|
|
1260
1146
|
const headerRef = React.useRef(null);
|
|
1261
1147
|
const { isMobile, isHeaderSticky } = useResponsiveTable({
|
|
@@ -1315,7 +1201,6 @@ function ResponsiveTableInner(props, ref) {
|
|
|
1315
1201
|
sortProps,
|
|
1316
1202
|
columnDefinitions,
|
|
1317
1203
|
getScrollableElement,
|
|
1318
|
-
infiniteScrollProps,
|
|
1319
1204
|
});
|
|
1320
1205
|
// Fire onDataSourceStateChange when dataSource state changes
|
|
1321
1206
|
React.useEffect(() => {
|
|
@@ -1346,9 +1231,9 @@ function ResponsiveTableInner(props, ref) {
|
|
|
1346
1231
|
const hasData = React.useMemo(() => processedData.length > 0, [processedData]);
|
|
1347
1232
|
const noDataSvg = (React.createElement("svg", { xmlns: "http://www.w3.org/2000/svg", fill: "#ccc", height: "40", width: "40", viewBox: "0 0 24 24" },
|
|
1348
1233
|
React.createElement("path", { d: "M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.41 0-8-3.59-8-8s3.59-8 8-8 8 3.59 8 8-3.59 8-8 8zm-1-14h2v6h-2zm0 8h2v2h-2z" })));
|
|
1349
|
-
const noDataComponentNode = noDataComponent || (React.createElement("div", { className: styles
|
|
1234
|
+
const noDataComponentNode = noDataComponent || (React.createElement("div", { className: styles.noDataWrapper },
|
|
1350
1235
|
noDataSvg,
|
|
1351
|
-
React.createElement("div", { className: styles
|
|
1236
|
+
React.createElement("div", { className: styles.noData }, "No data")));
|
|
1352
1237
|
const mobileFooter = React.useMemo(() => {
|
|
1353
1238
|
if (!footerRows || footerRows.length === 0) {
|
|
1354
1239
|
return null;
|
|
@@ -1360,8 +1245,8 @@ function ResponsiveTableInner(props, ref) {
|
|
|
1360
1245
|
}
|
|
1361
1246
|
return colDef;
|
|
1362
1247
|
};
|
|
1363
|
-
return (React.createElement("div", { className: styles
|
|
1364
|
-
React.createElement("div", { className: styles
|
|
1248
|
+
return (React.createElement("div", { className: styles.footerCard },
|
|
1249
|
+
React.createElement("div", { className: styles['footer-card-body'] }, footerRows.map((row, rowIndex) => {
|
|
1365
1250
|
let currentColumnIndex = 0;
|
|
1366
1251
|
return (React.createElement("div", { key: rowIndex }, row.columns.map((col, colIndex) => {
|
|
1367
1252
|
let label = col.displayLabel;
|
|
@@ -1372,9 +1257,9 @@ function ResponsiveTableInner(props, ref) {
|
|
|
1372
1257
|
}
|
|
1373
1258
|
}
|
|
1374
1259
|
currentColumnIndex += col.colSpan;
|
|
1375
|
-
return (React.createElement("p", { key: colIndex, className: `${styles
|
|
1376
|
-
label && React.createElement("span", { className: styles
|
|
1377
|
-
React.createElement("span", { className: styles
|
|
1260
|
+
return (React.createElement("p", { key: colIndex, className: `${styles['footer-card-row']} ${col.className || ''} ${col.onCellClick ? styles.clickableFooterCell : ''}`, onClick: col.onCellClick },
|
|
1261
|
+
label && React.createElement("span", { className: styles['card-label'] }, label),
|
|
1262
|
+
React.createElement("span", { className: styles['card-value'] }, col.cellRenderer())));
|
|
1378
1263
|
})));
|
|
1379
1264
|
}))));
|
|
1380
1265
|
}, [footerRows, columnDefinitions, processedData]);
|
|
@@ -1408,9 +1293,6 @@ function ResponsiveTableInner(props, ref) {
|
|
|
1408
1293
|
animateOnLoad: animationProps === null || animationProps === void 0 ? void 0 : animationProps.animateOnLoad,
|
|
1409
1294
|
isLoading,
|
|
1410
1295
|
}), [animationProps === null || animationProps === void 0 ? void 0 : animationProps.animateOnLoad, animationProps === null || animationProps === void 0 ? void 0 : animationProps.isLoading, isLoading]);
|
|
1411
|
-
if (infiniteScrollProps) {
|
|
1412
|
-
return React.createElement(InfiniteTable, Object.assign({}, props));
|
|
1413
|
-
}
|
|
1414
1296
|
if (isLoading && !hasData) {
|
|
1415
1297
|
return React.createElement(SkeletonView, { isMobile: isMobile, columnDefinitions: visibleColumns });
|
|
1416
1298
|
}
|
|
@@ -1471,61 +1353,7 @@ function ResponsiveTableInner(props, ref) {
|
|
|
1471
1353
|
}
|
|
1472
1354
|
const ResponsiveTable = React.forwardRef(ResponsiveTableInner);
|
|
1473
1355
|
|
|
1474
|
-
class InfiniteScrollPlugin {
|
|
1475
|
-
constructor() {
|
|
1476
|
-
this.id = 'infinite-scroll';
|
|
1477
|
-
this.isLoadingMore = false;
|
|
1478
|
-
this.onPluginInit = (api) => {
|
|
1479
|
-
this.api = api;
|
|
1480
|
-
this.attachScrollListener();
|
|
1481
|
-
};
|
|
1482
|
-
this.attachScrollListener = () => {
|
|
1483
|
-
var _a, _b;
|
|
1484
|
-
const scrollableElement = (_b = (_a = this.api).getScrollableElement) === null || _b === void 0 ? void 0 : _b.call(_a);
|
|
1485
|
-
if (scrollableElement) {
|
|
1486
|
-
scrollableElement.addEventListener('scroll', this.handleScroll);
|
|
1487
|
-
}
|
|
1488
|
-
};
|
|
1489
|
-
this.handleScroll = () => __awaiter(this, void 0, void 0, function* () {
|
|
1490
|
-
var _a, _b, _c, _d;
|
|
1491
|
-
const scrollableElement = (_b = (_a = this.api).getScrollableElement) === null || _b === void 0 ? void 0 : _b.call(_a);
|
|
1492
|
-
if (!scrollableElement || !this.api.infiniteScrollProps) {
|
|
1493
|
-
return;
|
|
1494
|
-
}
|
|
1495
|
-
const { scrollTop, scrollHeight, clientHeight } = scrollableElement;
|
|
1496
|
-
const scrollThreshold = 200; // Load more data when 200px from the bottom
|
|
1497
|
-
if (scrollHeight - scrollTop - clientHeight < scrollThreshold &&
|
|
1498
|
-
this.api.infiniteScrollProps.hasMore &&
|
|
1499
|
-
!this.isLoadingMore) {
|
|
1500
|
-
this.isLoadingMore = true;
|
|
1501
|
-
this.api.forceUpdate(); // Trigger re-render to show loading component
|
|
1502
|
-
yield ((_d = (_c = this.api.infiniteScrollProps).onLoadMore) === null || _d === void 0 ? void 0 : _d.call(_c, this.api.getData()));
|
|
1503
|
-
this.isLoadingMore = false;
|
|
1504
|
-
this.api.forceUpdate(); // Trigger re-render to hide loading component
|
|
1505
|
-
}
|
|
1506
|
-
});
|
|
1507
|
-
this.processData = (data) => {
|
|
1508
|
-
// This plugin doesn't modify the data directly, but rather triggers loading more.
|
|
1509
|
-
// The main component's data prop should be updated by the consumer of the table.
|
|
1510
|
-
return data;
|
|
1511
|
-
};
|
|
1512
|
-
this.renderFooter = () => {
|
|
1513
|
-
if (!this.api.infiniteScrollProps) {
|
|
1514
|
-
return null;
|
|
1515
|
-
}
|
|
1516
|
-
if (this.isLoadingMore) {
|
|
1517
|
-
return this.api.infiniteScrollProps.loadingMoreComponent || React.createElement("div", null, "Loading more...");
|
|
1518
|
-
}
|
|
1519
|
-
else if (!this.api.infiniteScrollProps.hasMore) {
|
|
1520
|
-
return this.api.infiniteScrollProps.noMoreDataComponent || React.createElement("div", null, "No more data.");
|
|
1521
|
-
}
|
|
1522
|
-
return null;
|
|
1523
|
-
};
|
|
1524
|
-
}
|
|
1525
|
-
}
|
|
1526
|
-
|
|
1527
1356
|
exports.FilterPlugin = FilterPlugin;
|
|
1528
|
-
exports.InfiniteScrollPlugin = InfiniteScrollPlugin;
|
|
1529
1357
|
exports.SelectionPlugin = SelectionPlugin;
|
|
1530
1358
|
exports.SortPlugin = SortPlugin;
|
|
1531
1359
|
exports.default = ResponsiveTable;
|