jattac.libs.web.responsive-table 0.9.1 → 0.10.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/dist/Context/TableContext.d.ts +1 -0
- package/dist/Hooks/useTableDataSource.d.ts +10 -0
- package/dist/Hooks/useTablePlugins.d.ts +2 -0
- package/dist/Plugins/IResponsiveTablePlugin.d.ts +2 -0
- package/dist/UI/ResponsiveTable.d.ts +17 -5
- package/dist/index.d.ts +4 -3
- package/dist/index.es.js +97 -14
- package/dist/index.es.js.map +1 -1
- package/dist/index.js +96 -12
- package/dist/index.js.map +1 -1
- package/docs/api.md +63 -4
- package/docs/examples.md +148 -1
- package/docs/features.md +7 -1
- package/package.json +1 -1
package/dist/index.js
CHANGED
|
@@ -31,7 +31,7 @@ function styleInject(css, ref) {
|
|
|
31
31
|
}
|
|
32
32
|
}
|
|
33
33
|
|
|
34
|
-
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:#
|
|
34
|
+
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_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}.ResponsiveTable-module_card__b-U2v.ResponsiveTable-module_selectedRow__-JyNW{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}";
|
|
35
35
|
var styles$2 = {"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","fadeInUp":"ResponsiveTable-module_fadeInUp__jMCS7"};
|
|
36
36
|
styleInject(css_248z$2);
|
|
37
37
|
|
|
@@ -500,6 +500,10 @@ class FilterPlugin {
|
|
|
500
500
|
} })));
|
|
501
501
|
};
|
|
502
502
|
this.processData = (data) => {
|
|
503
|
+
var _a;
|
|
504
|
+
if (((_a = this.api.filterProps) === null || _a === void 0 ? void 0 : _a.mode) === 'server') {
|
|
505
|
+
return data;
|
|
506
|
+
}
|
|
503
507
|
if (!this.filterText || !this.api.columnDefinitions) {
|
|
504
508
|
return data;
|
|
505
509
|
}
|
|
@@ -526,6 +530,10 @@ class FilterPlugin {
|
|
|
526
530
|
_row,
|
|
527
531
|
// eslint-disable-next-line @typescript-eslint/no-unused-vars
|
|
528
532
|
_column) => {
|
|
533
|
+
var _a;
|
|
534
|
+
if (((_a = this.api.filterProps) === null || _a === void 0 ? void 0 : _a.mode) === 'server') {
|
|
535
|
+
return content;
|
|
536
|
+
}
|
|
529
537
|
if (!this.filterText || typeof content !== 'string') {
|
|
530
538
|
return content;
|
|
531
539
|
}
|
|
@@ -538,8 +546,10 @@ class FilterPlugin {
|
|
|
538
546
|
clearTimeout(this.debounceTimeout);
|
|
539
547
|
}
|
|
540
548
|
this.debounceTimeout = setTimeout(() => {
|
|
549
|
+
var _a, _b;
|
|
541
550
|
this.filterText = currentFilterText;
|
|
542
551
|
this.api.forceUpdate();
|
|
552
|
+
(_b = (_a = this.api).onFilterChange) === null || _b === void 0 ? void 0 : _b.call(_a, currentFilterText);
|
|
543
553
|
}, 300);
|
|
544
554
|
};
|
|
545
555
|
}
|
|
@@ -761,7 +771,7 @@ class SortPlugin {
|
|
|
761
771
|
}
|
|
762
772
|
|
|
763
773
|
const useTablePlugins = (props) => {
|
|
764
|
-
const { data, plugins, filterProps, selectionProps, sortProps, columnDefinitions, getScrollableElement, infiniteScrollProps, } = props;
|
|
774
|
+
const { data, plugins, filterProps, selectionProps, sortProps, columnDefinitions, getScrollableElement, infiniteScrollProps, onFilterChange, } = props;
|
|
765
775
|
const [processedData, setProcessedData] = React.useState(data);
|
|
766
776
|
const [activePlugins, setActivePlugins] = React.useState([]);
|
|
767
777
|
// Persist internal plugins using refs to prevent state loss
|
|
@@ -835,6 +845,7 @@ const useTablePlugins = (props) => {
|
|
|
835
845
|
filterProps: filterProps,
|
|
836
846
|
selectionProps: selectionProps,
|
|
837
847
|
columnDefinitions: columnDefinitions,
|
|
848
|
+
onFilterChange: onFilterChange,
|
|
838
849
|
};
|
|
839
850
|
// Initialize/Refresh all active plugins with the current API
|
|
840
851
|
newActivePlugins.forEach((plugin) => {
|
|
@@ -860,6 +871,7 @@ const useTablePlugins = (props) => {
|
|
|
860
871
|
getScrollableElement,
|
|
861
872
|
infiniteScrollProps,
|
|
862
873
|
getRawColumnDefinition,
|
|
874
|
+
onFilterChange,
|
|
863
875
|
]);
|
|
864
876
|
const forceUpdatePlugins = React.useCallback(() => {
|
|
865
877
|
setProcessedData(initializePlugins());
|
|
@@ -1030,6 +1042,7 @@ const useTableDataSource = (props) => {
|
|
|
1030
1042
|
const [totalCount, setTotalCount] = React.useState(undefined);
|
|
1031
1043
|
const [isLoading, setIsLoading] = React.useState(false);
|
|
1032
1044
|
const [isFetchingMore, setIsFetchingMore] = React.useState(false);
|
|
1045
|
+
const [error, setError] = React.useState(undefined);
|
|
1033
1046
|
const isInitialMount = React.useRef(true);
|
|
1034
1047
|
const fetchData = React.useCallback((page, isAppend) => __awaiter(void 0, void 0, void 0, function* () {
|
|
1035
1048
|
if (!dataSource)
|
|
@@ -1041,6 +1054,7 @@ const useTableDataSource = (props) => {
|
|
|
1041
1054
|
setIsLoading(true);
|
|
1042
1055
|
}
|
|
1043
1056
|
try {
|
|
1057
|
+
setError(undefined);
|
|
1044
1058
|
const params = {
|
|
1045
1059
|
page,
|
|
1046
1060
|
pageSize,
|
|
@@ -1070,9 +1084,10 @@ const useTableDataSource = (props) => {
|
|
|
1070
1084
|
setHasMore(newItems.length === pageSize);
|
|
1071
1085
|
}
|
|
1072
1086
|
}
|
|
1073
|
-
catch (
|
|
1074
|
-
|
|
1087
|
+
catch (err) {
|
|
1088
|
+
setError(err);
|
|
1075
1089
|
setHasMore(false);
|
|
1090
|
+
console.error('Error fetching data from dataSource:', err);
|
|
1076
1091
|
}
|
|
1077
1092
|
finally {
|
|
1078
1093
|
setIsLoading(false);
|
|
@@ -1109,6 +1124,7 @@ const useTableDataSource = (props) => {
|
|
|
1109
1124
|
isFetchingMore,
|
|
1110
1125
|
loadNextPage,
|
|
1111
1126
|
resetAndFetch,
|
|
1127
|
+
error,
|
|
1112
1128
|
};
|
|
1113
1129
|
};
|
|
1114
1130
|
|
|
@@ -1116,8 +1132,8 @@ const useTableDataSource = (props) => {
|
|
|
1116
1132
|
* A highly customizable, mobile-first responsive React table.
|
|
1117
1133
|
* Supports static data or async data sources with built-in infinite scroll.
|
|
1118
1134
|
*/
|
|
1119
|
-
function
|
|
1120
|
-
const { columnDefinitions, data: initialData, dataSource, pageSize, noDataComponent, maxHeight, onRowClick, footerRows, mobileBreakpoint, plugins, enablePageLevelStickyHeader, infiniteScrollProps, filterProps, selectionProps, animationProps, sortProps, mobileCardClassName, } = props;
|
|
1135
|
+
function ResponsiveTableInner(props, ref) {
|
|
1136
|
+
const { columnDefinitions, data: initialData, dataSource, pageSize, noDataComponent, maxHeight, onRowClick, footerRows, mobileBreakpoint, plugins, enablePageLevelStickyHeader, infiniteScrollProps, filterProps, selectionProps, animationProps, sortProps, mobileCardClassName, onDataSourceStateChange, onPageChange, onDataSourceError, } = props;
|
|
1121
1137
|
const tableContainerRef = React.useRef(null);
|
|
1122
1138
|
const headerRef = React.useRef(null);
|
|
1123
1139
|
const { isMobile, isHeaderSticky } = useResponsiveTable({
|
|
@@ -1130,17 +1146,36 @@ function ResponsiveTable(props) {
|
|
|
1130
1146
|
const getScrollableElement = React.useCallback(() => tableContainerRef.current, []);
|
|
1131
1147
|
// Track active sort state for dataSource
|
|
1132
1148
|
const [activeSort /*, setActiveSort*/] = React.useState((sortProps === null || sortProps === void 0 ? void 0 : sortProps.initialSortColumn) ? { columnId: sortProps.initialSortColumn, direction: sortProps.initialSortDirection || 'asc' } : undefined);
|
|
1133
|
-
|
|
1149
|
+
// Track active filter state for dataSource
|
|
1150
|
+
const [activeFilter, setActiveFilter] = React.useState('');
|
|
1151
|
+
const handleFilterChange = React.useCallback((text) => {
|
|
1152
|
+
setActiveFilter(text);
|
|
1153
|
+
}, []);
|
|
1154
|
+
const { data: sourceData, isLoading: isSourceLoading, isFetchingMore, hasMore, totalCount, currentPage, loadNextPage, error, resetAndFetch, } = useTableDataSource({
|
|
1134
1155
|
dataSource,
|
|
1135
1156
|
pageSize,
|
|
1136
1157
|
initialData,
|
|
1137
1158
|
sort: activeSort,
|
|
1138
|
-
|
|
1159
|
+
filter: (filterProps === null || filterProps === void 0 ? void 0 : filterProps.mode) === 'server' ? activeFilter : undefined,
|
|
1139
1160
|
});
|
|
1161
|
+
React.useImperativeHandle(ref, () => ({
|
|
1162
|
+
loadNextPage: () => loadNextPage(),
|
|
1163
|
+
resetAndFetch: () => resetAndFetch(),
|
|
1164
|
+
getState: () => ({
|
|
1165
|
+
data: sourceData,
|
|
1166
|
+
currentPage,
|
|
1167
|
+
hasMore,
|
|
1168
|
+
totalCount,
|
|
1169
|
+
isLoading: isSourceLoading,
|
|
1170
|
+
isFetchingMore,
|
|
1171
|
+
error,
|
|
1172
|
+
}),
|
|
1173
|
+
}), [loadNextPage, resetAndFetch, sourceData, currentPage, hasMore, totalCount, isSourceLoading, isFetchingMore, error]);
|
|
1140
1174
|
const currentDataToProcess = dataSource ? sourceData : initialData;
|
|
1141
1175
|
const { processedData, activePlugins, visibleColumns } = useTablePlugins({
|
|
1142
1176
|
data: currentDataToProcess,
|
|
1143
1177
|
plugins,
|
|
1178
|
+
onFilterChange: (filterProps === null || filterProps === void 0 ? void 0 : filterProps.mode) === 'server' ? handleFilterChange : undefined,
|
|
1144
1179
|
filterProps,
|
|
1145
1180
|
selectionProps,
|
|
1146
1181
|
sortProps,
|
|
@@ -1148,11 +1183,32 @@ function ResponsiveTable(props) {
|
|
|
1148
1183
|
getScrollableElement,
|
|
1149
1184
|
infiniteScrollProps,
|
|
1150
1185
|
});
|
|
1151
|
-
//
|
|
1186
|
+
// Fire onDataSourceStateChange when dataSource state changes
|
|
1187
|
+
React.useEffect(() => {
|
|
1188
|
+
if (dataSource && onDataSourceStateChange) {
|
|
1189
|
+
onDataSourceStateChange({
|
|
1190
|
+
data: sourceData,
|
|
1191
|
+
currentPage,
|
|
1192
|
+
hasMore,
|
|
1193
|
+
totalCount,
|
|
1194
|
+
isLoading: isSourceLoading,
|
|
1195
|
+
isFetchingMore,
|
|
1196
|
+
error,
|
|
1197
|
+
});
|
|
1198
|
+
}
|
|
1199
|
+
}, [dataSource, sourceData, currentPage, hasMore, totalCount, isSourceLoading, isFetchingMore, error, onDataSourceStateChange]);
|
|
1200
|
+
// Fire onPageChange when page changes
|
|
1201
|
+
React.useEffect(() => {
|
|
1202
|
+
if (dataSource && onPageChange) {
|
|
1203
|
+
onPageChange(currentPage);
|
|
1204
|
+
}
|
|
1205
|
+
}, [dataSource, currentPage, onPageChange]);
|
|
1206
|
+
// Fire onDataSourceError when error occurs
|
|
1152
1207
|
React.useEffect(() => {
|
|
1153
|
-
|
|
1154
|
-
|
|
1155
|
-
|
|
1208
|
+
if (dataSource && error && onDataSourceError) {
|
|
1209
|
+
onDataSourceError(error);
|
|
1210
|
+
}
|
|
1211
|
+
}, [dataSource, error, onDataSourceError]);
|
|
1156
1212
|
const hasData = React.useMemo(() => processedData.length > 0, [processedData]);
|
|
1157
1213
|
const noDataSvg = (React.createElement("svg", { xmlns: "http://www.w3.org/2000/svg", fill: "#ccc", height: "40", width: "40", viewBox: "0 0 24 24" },
|
|
1158
1214
|
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" })));
|
|
@@ -1220,6 +1276,31 @@ function ResponsiveTable(props) {
|
|
|
1220
1276
|
if (isLoading && !hasData) {
|
|
1221
1277
|
return React.createElement(SkeletonView, { isMobile: isMobile, columnDefinitions: visibleColumns });
|
|
1222
1278
|
}
|
|
1279
|
+
if (error && !isLoading && !hasData) {
|
|
1280
|
+
return (React.createElement("div", { style: {
|
|
1281
|
+
display: 'flex',
|
|
1282
|
+
flexDirection: 'column',
|
|
1283
|
+
alignItems: 'center',
|
|
1284
|
+
justifyContent: 'center',
|
|
1285
|
+
padding: '4rem 2rem',
|
|
1286
|
+
gap: '1rem',
|
|
1287
|
+
color: '#6c757d',
|
|
1288
|
+
border: '2px dashed #e0e0e0',
|
|
1289
|
+
borderRadius: '12px',
|
|
1290
|
+
backgroundColor: '#f8f9fa',
|
|
1291
|
+
} },
|
|
1292
|
+
React.createElement("div", { style: { fontWeight: 500, fontSize: '1.1rem' } }, "Failed to load data"),
|
|
1293
|
+
React.createElement("div", { style: { fontSize: '0.85rem', textAlign: 'center' } }, error.message),
|
|
1294
|
+
React.createElement("button", { onClick: resetAndFetch, style: {
|
|
1295
|
+
padding: '0.5rem 1.5rem',
|
|
1296
|
+
backgroundColor: '#007bff',
|
|
1297
|
+
color: '#fff',
|
|
1298
|
+
border: 'none',
|
|
1299
|
+
borderRadius: '6px',
|
|
1300
|
+
cursor: 'pointer',
|
|
1301
|
+
fontWeight: 500,
|
|
1302
|
+
} }, "Retry")));
|
|
1303
|
+
}
|
|
1223
1304
|
return (React.createElement(TableProvider, { value: {
|
|
1224
1305
|
data: currentDataToProcess,
|
|
1225
1306
|
processedData,
|
|
@@ -1238,6 +1319,7 @@ function ResponsiveTable(props) {
|
|
|
1238
1319
|
isLoading: isSourceLoading,
|
|
1239
1320
|
isFetchingMore,
|
|
1240
1321
|
loadNextPage,
|
|
1322
|
+
error,
|
|
1241
1323
|
} : undefined,
|
|
1242
1324
|
mobileCardClassName,
|
|
1243
1325
|
} },
|
|
@@ -1247,6 +1329,7 @@ function ResponsiveTable(props) {
|
|
|
1247
1329
|
(hasData || isLoading) && isMobile && (React.createElement(MobileView, { mobileFooter: mobileFooter })),
|
|
1248
1330
|
(hasData || isLoading) && !isMobile && (React.createElement(DesktopView, { maxHeight: maxHeight, isHeaderSticky: isHeaderSticky, tableContainerRef: tableContainerRef, headerRef: headerRef, footerRows: footerRows, renderPluginFooters: renderPluginFooters })))));
|
|
1249
1331
|
}
|
|
1332
|
+
const ResponsiveTable = React.forwardRef(ResponsiveTableInner);
|
|
1250
1333
|
|
|
1251
1334
|
class InfiniteScrollPlugin {
|
|
1252
1335
|
constructor() {
|
|
@@ -1306,4 +1389,5 @@ exports.InfiniteScrollPlugin = InfiniteScrollPlugin;
|
|
|
1306
1389
|
exports.SelectionPlugin = SelectionPlugin;
|
|
1307
1390
|
exports.SortPlugin = SortPlugin;
|
|
1308
1391
|
exports.default = ResponsiveTable;
|
|
1392
|
+
exports.useTableContext = useTableContext;
|
|
1309
1393
|
//# sourceMappingURL=index.js.map
|