mui-universal-table 2.1.20 → 2.1.21
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/index.cjs +134 -134
- package/dist/index.cjs.map +1 -1
- package/dist/index.esm.js +134 -134
- package/dist/index.esm.js.map +1 -1
- package/package.json +2 -1
package/dist/index.esm.js
CHANGED
|
@@ -2,7 +2,7 @@ import React from 'react';
|
|
|
2
2
|
import PropTypes from 'prop-types';
|
|
3
3
|
import Paper$1 from '@mui/material/Paper';
|
|
4
4
|
import { Collapse, Box, Typography, LinearProgress, IconButton, Tooltip, Button, Paper, InputBase, Stack, Divider, Toolbar, TableHead, TableRow, TableCell, Checkbox, TableSortLabel, Badge, TableBody, Skeleton, TableContainer, Table, TablePagination } from '@mui/material';
|
|
5
|
-
import {
|
|
5
|
+
import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
|
|
6
6
|
import { alpha } from '@mui/material/styles';
|
|
7
7
|
import { Task, Clear, Search, RemoveCircle, AddCircle } from '@mui/icons-material';
|
|
8
8
|
import RefreshIcon from '@mui/icons-material/Refresh';
|
|
@@ -12,28 +12,28 @@ const LazyLoadingIndicator = ({
|
|
|
12
12
|
currentPage,
|
|
13
13
|
totalPages
|
|
14
14
|
}) => {
|
|
15
|
-
return /*#__PURE__*/
|
|
15
|
+
return /*#__PURE__*/jsx(Collapse, {
|
|
16
16
|
in: show,
|
|
17
17
|
timeout: "auto",
|
|
18
18
|
unmountOnExit: true,
|
|
19
|
-
children: /*#__PURE__*/
|
|
19
|
+
children: /*#__PURE__*/jsxs(Box, {
|
|
20
20
|
sx: {
|
|
21
21
|
width: "100%",
|
|
22
22
|
p: 2
|
|
23
23
|
},
|
|
24
|
-
children: [/*#__PURE__*/
|
|
24
|
+
children: [/*#__PURE__*/jsxs(Typography, {
|
|
25
25
|
variant: "body2",
|
|
26
26
|
color: "text.secondary",
|
|
27
27
|
sx: {
|
|
28
28
|
mb: 1
|
|
29
29
|
},
|
|
30
30
|
children: ["Loading page ", currentPage, " of ", totalPages, "..."]
|
|
31
|
-
}
|
|
31
|
+
}), /*#__PURE__*/jsx(LinearProgress, {
|
|
32
32
|
variant: "determinate",
|
|
33
33
|
value: currentPage / totalPages * 100
|
|
34
|
-
}
|
|
35
|
-
}
|
|
36
|
-
}
|
|
34
|
+
})]
|
|
35
|
+
})
|
|
36
|
+
});
|
|
37
37
|
};
|
|
38
38
|
LazyLoadingIndicator.propTypes = {
|
|
39
39
|
show: PropTypes.bool.isRequired,
|
|
@@ -219,10 +219,10 @@ function TableSelectionBanner({
|
|
|
219
219
|
onSelection,
|
|
220
220
|
selectIcon
|
|
221
221
|
}) {
|
|
222
|
-
return /*#__PURE__*/
|
|
222
|
+
return /*#__PURE__*/jsx(Collapse, {
|
|
223
223
|
in: selected.length > 0,
|
|
224
224
|
unmountOnExit: true,
|
|
225
|
-
children: /*#__PURE__*/
|
|
225
|
+
children: /*#__PURE__*/jsxs(Box, {
|
|
226
226
|
sx: {
|
|
227
227
|
p: 2,
|
|
228
228
|
display: "flex",
|
|
@@ -232,17 +232,17 @@ function TableSelectionBanner({
|
|
|
232
232
|
borderBottomLeftRadius: 0,
|
|
233
233
|
borderBottomRightRadius: 0
|
|
234
234
|
},
|
|
235
|
-
children: [/*#__PURE__*/
|
|
235
|
+
children: [/*#__PURE__*/jsxs(Typography, {
|
|
236
236
|
variant: "h6",
|
|
237
237
|
id: "tableTitle",
|
|
238
238
|
component: "div",
|
|
239
239
|
children: [selected.length, " selected"]
|
|
240
|
-
}
|
|
240
|
+
}), /*#__PURE__*/jsx(IconButton, {
|
|
241
241
|
onClick: () => onSelection(selected),
|
|
242
|
-
children: selectIcon || /*#__PURE__*/
|
|
243
|
-
}
|
|
244
|
-
}
|
|
245
|
-
}
|
|
242
|
+
children: selectIcon || /*#__PURE__*/jsx(Task, {})
|
|
243
|
+
})]
|
|
244
|
+
})
|
|
245
|
+
});
|
|
246
246
|
}
|
|
247
247
|
TableSelectionBanner.propTypes = {
|
|
248
248
|
selected: PropTypes.array.isRequired,
|
|
@@ -254,14 +254,14 @@ function TableTitle({
|
|
|
254
254
|
name,
|
|
255
255
|
subTable
|
|
256
256
|
}) {
|
|
257
|
-
return /*#__PURE__*/
|
|
257
|
+
return /*#__PURE__*/jsx(Typography, {
|
|
258
258
|
variant: subTable ? "h6" : "h5",
|
|
259
259
|
color: subTable ? "secondary" : "primary",
|
|
260
260
|
sx: {
|
|
261
261
|
p: 2
|
|
262
262
|
},
|
|
263
263
|
children: name
|
|
264
|
-
}
|
|
264
|
+
});
|
|
265
265
|
}
|
|
266
266
|
TableTitle.propTypes = {
|
|
267
267
|
name: PropTypes.string,
|
|
@@ -281,16 +281,16 @@ function ReloadBtn({
|
|
|
281
281
|
onReload();
|
|
282
282
|
}
|
|
283
283
|
};
|
|
284
|
-
return /*#__PURE__*/
|
|
284
|
+
return /*#__PURE__*/jsx(Tooltip, {
|
|
285
285
|
title: "Reload",
|
|
286
|
-
children: /*#__PURE__*/
|
|
286
|
+
children: /*#__PURE__*/jsx(Button, {
|
|
287
287
|
variant: "contained",
|
|
288
288
|
color: "primary",
|
|
289
289
|
onClick: handleClick,
|
|
290
290
|
disabled: loading,
|
|
291
|
-
children: /*#__PURE__*/
|
|
292
|
-
}
|
|
293
|
-
}
|
|
291
|
+
children: /*#__PURE__*/jsx(RefreshIcon, {})
|
|
292
|
+
})
|
|
293
|
+
});
|
|
294
294
|
}
|
|
295
295
|
ReloadBtn.propTypes = {
|
|
296
296
|
loading: PropTypes.bool,
|
|
@@ -316,9 +316,9 @@ function FancySearch({
|
|
|
316
316
|
// A ref tracks whether this sync came from the user typing or from a parent
|
|
317
317
|
// update, so the debounce only fires for genuine user input.
|
|
318
318
|
const isUserTypingRef = React.useRef(false);
|
|
319
|
-
return /*#__PURE__*/
|
|
319
|
+
return /*#__PURE__*/jsx("form", {
|
|
320
320
|
onSubmit: handleSubmit,
|
|
321
|
-
children: /*#__PURE__*/
|
|
321
|
+
children: /*#__PURE__*/jsxs(Paper, {
|
|
322
322
|
elevation: 0,
|
|
323
323
|
sx: {
|
|
324
324
|
borderRadius: expanded ? "24px" : "50px",
|
|
@@ -333,7 +333,7 @@ function FancySearch({
|
|
|
333
333
|
onMouseEnter: () => setHover(true),
|
|
334
334
|
onMouseLeave: handleEndHover,
|
|
335
335
|
onKeyDown: e => e.key === "Enter" && handleSubmit(e),
|
|
336
|
-
children: [/*#__PURE__*/
|
|
336
|
+
children: [/*#__PURE__*/jsx(InputBase, {
|
|
337
337
|
placeholder: "Search",
|
|
338
338
|
value: value,
|
|
339
339
|
onChange: e => {
|
|
@@ -349,36 +349,36 @@ function FancySearch({
|
|
|
349
349
|
})
|
|
350
350
|
},
|
|
351
351
|
onBlur: handleEndHover
|
|
352
|
-
}
|
|
352
|
+
}), /*#__PURE__*/jsx(Collapse, {
|
|
353
353
|
in: Boolean(value),
|
|
354
354
|
orientation: "horizontal",
|
|
355
355
|
unmountOnExit: true,
|
|
356
|
-
children: /*#__PURE__*/
|
|
356
|
+
children: /*#__PURE__*/jsxs(Stack, {
|
|
357
357
|
direction: "row",
|
|
358
358
|
spacing: 0,
|
|
359
359
|
sx: {
|
|
360
360
|
mr: 3,
|
|
361
361
|
alignItems: "center"
|
|
362
362
|
},
|
|
363
|
-
children: [/*#__PURE__*/
|
|
363
|
+
children: [/*#__PURE__*/jsx(IconButton, {
|
|
364
364
|
onClick: () => {
|
|
365
365
|
isUserTypingRef.current = false;
|
|
366
366
|
// Immediately clear instead of waiting for the debounce
|
|
367
367
|
onSubmit("");
|
|
368
368
|
},
|
|
369
|
-
children: /*#__PURE__*/
|
|
370
|
-
}
|
|
369
|
+
children: /*#__PURE__*/jsx(Clear, {})
|
|
370
|
+
}), /*#__PURE__*/jsx(Divider, {
|
|
371
371
|
orientation: "vertical",
|
|
372
372
|
flexItem: true
|
|
373
|
-
}
|
|
374
|
-
}
|
|
375
|
-
}
|
|
373
|
+
})]
|
|
374
|
+
})
|
|
375
|
+
}), /*#__PURE__*/jsx(IconButton, {
|
|
376
376
|
onClick: handleSubmit,
|
|
377
377
|
type: "submit",
|
|
378
|
-
children: /*#__PURE__*/
|
|
379
|
-
}
|
|
380
|
-
}
|
|
381
|
-
}
|
|
378
|
+
children: /*#__PURE__*/jsx(Search, {})
|
|
379
|
+
})]
|
|
380
|
+
})
|
|
381
|
+
});
|
|
382
382
|
}
|
|
383
383
|
FancySearch.propTypes = {
|
|
384
384
|
value: PropTypes.string,
|
|
@@ -399,12 +399,12 @@ function SearchArea(props) {
|
|
|
399
399
|
}
|
|
400
400
|
return "";
|
|
401
401
|
}, [current, persistSearch, searchName]);
|
|
402
|
-
return /*#__PURE__*/
|
|
403
|
-
children: /*#__PURE__*/
|
|
402
|
+
return /*#__PURE__*/jsx("div", {
|
|
403
|
+
children: /*#__PURE__*/jsx(FancySearch, {
|
|
404
404
|
value: searchVal,
|
|
405
405
|
onSubmit: setFinalVal
|
|
406
|
-
}
|
|
407
|
-
}, "SearchArea"
|
|
406
|
+
})
|
|
407
|
+
}, "SearchArea");
|
|
408
408
|
}
|
|
409
409
|
SearchArea.propTypes = {
|
|
410
410
|
current: PropTypes.string,
|
|
@@ -422,7 +422,7 @@ function TableToolbarContent({
|
|
|
422
422
|
name,
|
|
423
423
|
persistSearch
|
|
424
424
|
}) {
|
|
425
|
-
return /*#__PURE__*/
|
|
425
|
+
return /*#__PURE__*/jsx(Toolbar, {
|
|
426
426
|
sx: {
|
|
427
427
|
pl: {
|
|
428
428
|
sm: 2
|
|
@@ -433,7 +433,7 @@ function TableToolbarContent({
|
|
|
433
433
|
},
|
|
434
434
|
pt: 2
|
|
435
435
|
},
|
|
436
|
-
children: /*#__PURE__*/
|
|
436
|
+
children: /*#__PURE__*/jsxs(Stack, {
|
|
437
437
|
spacing: 2,
|
|
438
438
|
direction: {
|
|
439
439
|
xs: "column",
|
|
@@ -446,23 +446,23 @@ function TableToolbarContent({
|
|
|
446
446
|
md: "center"
|
|
447
447
|
}
|
|
448
448
|
},
|
|
449
|
-
children: [/*#__PURE__*/
|
|
449
|
+
children: [/*#__PURE__*/jsx(Box, {
|
|
450
450
|
sx: {
|
|
451
451
|
flex: "1 1 100%"
|
|
452
452
|
},
|
|
453
453
|
id: "tableTitle",
|
|
454
|
-
children: /*#__PURE__*/
|
|
454
|
+
children: /*#__PURE__*/jsx(ReloadBtn, {
|
|
455
455
|
onReload: onReload,
|
|
456
456
|
loading: reloadBtnLoading
|
|
457
|
-
}
|
|
458
|
-
}
|
|
457
|
+
})
|
|
458
|
+
}), /*#__PURE__*/jsx(SearchArea, {
|
|
459
459
|
current: searchTerm,
|
|
460
460
|
setFinalVal: onSearchChange,
|
|
461
461
|
searchName: name,
|
|
462
462
|
persistSearch: persistSearch
|
|
463
|
-
}
|
|
464
|
-
}
|
|
465
|
-
}
|
|
463
|
+
})]
|
|
464
|
+
})
|
|
465
|
+
});
|
|
466
466
|
}
|
|
467
467
|
TableToolbarContent.propTypes = {
|
|
468
468
|
onReload: PropTypes.func,
|
|
@@ -578,34 +578,34 @@ function EnhancedTableHead(props) {
|
|
|
578
578
|
onSelectAllClick,
|
|
579
579
|
async
|
|
580
580
|
} = props;
|
|
581
|
-
return /*#__PURE__*/
|
|
582
|
-
children: /*#__PURE__*/
|
|
583
|
-
children: [selectRows && /*#__PURE__*/
|
|
581
|
+
return /*#__PURE__*/jsx(TableHead, {
|
|
582
|
+
children: /*#__PURE__*/jsxs(TableRow, {
|
|
583
|
+
children: [selectRows && /*#__PURE__*/jsx(TableCell, {
|
|
584
584
|
padding: "checkbox",
|
|
585
|
-
children: /*#__PURE__*/
|
|
585
|
+
children: /*#__PURE__*/jsx(Checkbox, {
|
|
586
586
|
color: "primary",
|
|
587
587
|
indeterminate: numSelected > 0 && numSelected < rowCount,
|
|
588
588
|
checked: rowCount > 0 && numSelected === rowCount,
|
|
589
589
|
onChange: onSelectAllClick
|
|
590
|
-
}
|
|
591
|
-
}
|
|
590
|
+
})
|
|
591
|
+
}), props.headings.map(headCell => /*#__PURE__*/jsx(TableCell, {
|
|
592
592
|
align: headCell.numeric ? "right" : "left",
|
|
593
593
|
padding: "normal",
|
|
594
594
|
sortDirection: orderBy === headCell.id ? order : false,
|
|
595
|
-
children: /*#__PURE__*/
|
|
595
|
+
children: /*#__PURE__*/jsxs(TableSortLabel, {
|
|
596
596
|
active: orderBy === headCell.id,
|
|
597
597
|
direction: orderBy === headCell.id ? order : "asc",
|
|
598
598
|
onClick: () => onRequestSort(headCell.id, headCell.sortable && async),
|
|
599
599
|
disabled: headCell.subRow,
|
|
600
|
-
children: [headCell.label, orderBy === headCell.id ? /*#__PURE__*/
|
|
600
|
+
children: [headCell.label, orderBy === headCell.id ? /*#__PURE__*/jsx(Box, {
|
|
601
601
|
component: "span",
|
|
602
602
|
sx: visuallyHidden,
|
|
603
603
|
children: order === "desc" ? "sorted descending" : "sorted ascending"
|
|
604
|
-
}
|
|
605
|
-
}
|
|
606
|
-
}, headCell.id
|
|
607
|
-
}
|
|
608
|
-
}
|
|
604
|
+
}) : undefined]
|
|
605
|
+
})
|
|
606
|
+
}, headCell.id))]
|
|
607
|
+
})
|
|
608
|
+
});
|
|
609
609
|
}
|
|
610
610
|
EnhancedTableHead.propTypes = {
|
|
611
611
|
onRequestSort: PropTypes.func.isRequired,
|
|
@@ -632,18 +632,18 @@ function SubRowToggleCell({
|
|
|
632
632
|
rowValues,
|
|
633
633
|
hideBadge
|
|
634
634
|
}) {
|
|
635
|
-
return /*#__PURE__*/
|
|
636
|
-
children: /*#__PURE__*/
|
|
635
|
+
return /*#__PURE__*/jsx(TableCell, {
|
|
636
|
+
children: /*#__PURE__*/jsx(Tooltip, {
|
|
637
637
|
title: isOpen ? `Hide ${header.id}` : `Show ${header.id}`,
|
|
638
|
-
children: /*#__PURE__*/
|
|
639
|
-
children: /*#__PURE__*/
|
|
638
|
+
children: /*#__PURE__*/jsx(Box, {
|
|
639
|
+
children: /*#__PURE__*/jsx(IconButton, {
|
|
640
640
|
onClick: event => {
|
|
641
641
|
event.stopPropagation();
|
|
642
642
|
onToggle();
|
|
643
643
|
},
|
|
644
644
|
disabled: rowValues[header.id].length === 0,
|
|
645
645
|
color: header.iconColor || "secondary",
|
|
646
|
-
children: /*#__PURE__*/
|
|
646
|
+
children: /*#__PURE__*/jsx(Badge, {
|
|
647
647
|
badgeContent: rowValues[header.id].length,
|
|
648
648
|
invisible: hideBadge,
|
|
649
649
|
anchorOrigin: {
|
|
@@ -655,12 +655,12 @@ function SubRowToggleCell({
|
|
|
655
655
|
color: theme => theme.palette.text.primary
|
|
656
656
|
}
|
|
657
657
|
},
|
|
658
|
-
children: isOpen ? header?.closeIcon || /*#__PURE__*/
|
|
659
|
-
}
|
|
660
|
-
}
|
|
661
|
-
}
|
|
662
|
-
}
|
|
663
|
-
}
|
|
658
|
+
children: isOpen ? header?.closeIcon || /*#__PURE__*/jsx(RemoveCircle, {}) : header?.openIcon || /*#__PURE__*/jsx(AddCircle, {})
|
|
659
|
+
})
|
|
660
|
+
})
|
|
661
|
+
})
|
|
662
|
+
})
|
|
663
|
+
});
|
|
664
664
|
}
|
|
665
665
|
SubRowToggleCell.propTypes = {
|
|
666
666
|
header: PropTypes.object.isRequired,
|
|
@@ -680,20 +680,20 @@ function SubTableRow({
|
|
|
680
680
|
rowValues,
|
|
681
681
|
colSpan
|
|
682
682
|
}) {
|
|
683
|
-
return /*#__PURE__*/
|
|
684
|
-
children: /*#__PURE__*/
|
|
683
|
+
return /*#__PURE__*/jsx(TableRow, {
|
|
684
|
+
children: /*#__PURE__*/jsx(TableCell, {
|
|
685
685
|
colSpan: colSpan,
|
|
686
686
|
style: {
|
|
687
687
|
paddingBottom: 0,
|
|
688
688
|
paddingTop: 0
|
|
689
689
|
},
|
|
690
|
-
children: /*#__PURE__*/
|
|
690
|
+
children: /*#__PURE__*/jsx(Collapse, {
|
|
691
691
|
in: isOpen,
|
|
692
692
|
timeout: "auto",
|
|
693
693
|
unmountOnExit: true,
|
|
694
|
-
children: /*#__PURE__*/
|
|
694
|
+
children: /*#__PURE__*/jsx(React.Suspense, {
|
|
695
695
|
fallback: null,
|
|
696
|
-
children: /*#__PURE__*/
|
|
696
|
+
children: /*#__PURE__*/jsx(UniversalTable$2, {
|
|
697
697
|
loading: table.loading,
|
|
698
698
|
setLoading: table.setLoading,
|
|
699
699
|
onReload: table.onReload,
|
|
@@ -701,11 +701,11 @@ function SubTableRow({
|
|
|
701
701
|
headers: table.headers,
|
|
702
702
|
name: table.subTitle,
|
|
703
703
|
subTable: true
|
|
704
|
-
}
|
|
705
|
-
}
|
|
706
|
-
}
|
|
707
|
-
}
|
|
708
|
-
}
|
|
704
|
+
})
|
|
705
|
+
})
|
|
706
|
+
})
|
|
707
|
+
})
|
|
708
|
+
});
|
|
709
709
|
}
|
|
710
710
|
SubTableRow.propTypes = {
|
|
711
711
|
table: PropTypes.object.isRequired,
|
|
@@ -715,10 +715,10 @@ SubTableRow.propTypes = {
|
|
|
715
715
|
};
|
|
716
716
|
|
|
717
717
|
function renderDataCells(headers, rowValues) {
|
|
718
|
-
return headers.map(header => /*#__PURE__*/
|
|
718
|
+
return headers.map(header => /*#__PURE__*/jsx(TableCell, {
|
|
719
719
|
...header.cellProps,
|
|
720
720
|
children: header.component ? header.component(rowValues) : formatCellValue(header, rowValues)
|
|
721
|
-
}, header.id ?? header.label
|
|
721
|
+
}, header.id ?? header.label));
|
|
722
722
|
}
|
|
723
723
|
const DataRow = /*#__PURE__*/React.memo(function DataRow(props) {
|
|
724
724
|
const {
|
|
@@ -750,35 +750,35 @@ const DataRow = /*#__PURE__*/React.memo(function DataRow(props) {
|
|
|
750
750
|
handleClick(event, props.rowID);
|
|
751
751
|
}
|
|
752
752
|
}, [selectRows, handleClick, props.rowID]);
|
|
753
|
-
return /*#__PURE__*/
|
|
754
|
-
children: [/*#__PURE__*/
|
|
753
|
+
return /*#__PURE__*/jsxs(Fragment, {
|
|
754
|
+
children: [/*#__PURE__*/jsxs(TableRow, {
|
|
755
755
|
tabIndex: selectRows ? 0 : -1,
|
|
756
756
|
hover: selectRows,
|
|
757
757
|
role: selectRows ? "checkbox" : "row",
|
|
758
758
|
selected: isItemSelected,
|
|
759
759
|
"aria-checked": isItemSelected,
|
|
760
760
|
onKeyDown: handleRowKeyDown,
|
|
761
|
-
children: [selectRows && /*#__PURE__*/
|
|
761
|
+
children: [selectRows && /*#__PURE__*/jsx(TableCell, {
|
|
762
762
|
padding: "checkbox",
|
|
763
|
-
children: /*#__PURE__*/
|
|
763
|
+
children: /*#__PURE__*/jsx(Checkbox, {
|
|
764
764
|
color: "primary",
|
|
765
765
|
checked: isItemSelected,
|
|
766
766
|
onClick: event => handleClick(event, props.rowID)
|
|
767
|
-
}
|
|
768
|
-
}
|
|
767
|
+
})
|
|
768
|
+
}), subTables.map((header, index) => /*#__PURE__*/jsx(SubRowToggleCell, {
|
|
769
769
|
header: header,
|
|
770
770
|
isOpen: reveal[index],
|
|
771
771
|
onToggle: () => toggleSubRow(index),
|
|
772
772
|
rowValues: rowValues,
|
|
773
773
|
hideBadge: hideBadge
|
|
774
|
-
}, header.id ?? header.label
|
|
775
|
-
}
|
|
774
|
+
}, header.id ?? header.label)), renderDataCells(columns, rowValues)]
|
|
775
|
+
}), subTables.map((table, index) => /*#__PURE__*/jsx(SubTableRow, {
|
|
776
776
|
table: table,
|
|
777
777
|
isOpen: reveal[index],
|
|
778
778
|
rowValues: rowValues,
|
|
779
779
|
colSpan: props.headers.length + 1
|
|
780
|
-
}, table.id ?? table.label
|
|
781
|
-
}
|
|
780
|
+
}, table.id ?? table.label))]
|
|
781
|
+
});
|
|
782
782
|
});
|
|
783
783
|
DataRow.propTypes = {
|
|
784
784
|
rowValues: PropTypes.object.isRequired,
|
|
@@ -793,17 +793,17 @@ DataRow.propTypes = {
|
|
|
793
793
|
const skeletonRows = ["row-1", "row-2", "row-3", "row-4", "row-5"];
|
|
794
794
|
const skeletonCells = ["cell-1", "cell-2", "cell-3", "cell-4"];
|
|
795
795
|
const TableLoader = () => {
|
|
796
|
-
return /*#__PURE__*/
|
|
797
|
-
children: [/*#__PURE__*/
|
|
798
|
-
children: skeletonRows.map(rowKey => /*#__PURE__*/
|
|
799
|
-
children: skeletonCells.map(cellKey => /*#__PURE__*/
|
|
800
|
-
children: /*#__PURE__*/
|
|
796
|
+
return /*#__PURE__*/jsxs(Fragment, {
|
|
797
|
+
children: [/*#__PURE__*/jsx(TableHead, {}), /*#__PURE__*/jsx(TableBody, {
|
|
798
|
+
children: skeletonRows.map(rowKey => /*#__PURE__*/jsx(TableRow, {
|
|
799
|
+
children: skeletonCells.map(cellKey => /*#__PURE__*/jsx(TableCell, {
|
|
800
|
+
children: /*#__PURE__*/jsx(Skeleton, {
|
|
801
801
|
height: 30
|
|
802
|
-
}
|
|
803
|
-
}, cellKey
|
|
804
|
-
}, rowKey
|
|
805
|
-
}
|
|
806
|
-
}
|
|
802
|
+
})
|
|
803
|
+
}, cellKey))
|
|
804
|
+
}, rowKey))
|
|
805
|
+
})]
|
|
806
|
+
});
|
|
807
807
|
};
|
|
808
808
|
|
|
809
809
|
function EnhancedTable(props) {
|
|
@@ -847,15 +847,15 @@ function EnhancedTable(props) {
|
|
|
847
847
|
const visibleRows = React.useMemo(() => {
|
|
848
848
|
return stableSort(rows, getComparator(order, orderBy), headers, orderBy).slice(page * effectiveRowsPerPage, page * effectiveRowsPerPage + effectiveRowsPerPage);
|
|
849
849
|
}, [effectiveRowsPerPage, headers, order, orderBy, page, rows]);
|
|
850
|
-
return /*#__PURE__*/
|
|
851
|
-
children: [/*#__PURE__*/
|
|
850
|
+
return /*#__PURE__*/jsxs(TableContainer, {
|
|
851
|
+
children: [/*#__PURE__*/jsx(Table, {
|
|
852
852
|
sx: {
|
|
853
853
|
minWidth: 750
|
|
854
854
|
},
|
|
855
855
|
size: "small" ,
|
|
856
856
|
"aria-label": props.name || "data table",
|
|
857
|
-
children: props.loading ? /*#__PURE__*/
|
|
858
|
-
children: [/*#__PURE__*/
|
|
857
|
+
children: props.loading ? /*#__PURE__*/jsx(TableLoader, {}) : /*#__PURE__*/jsxs(Fragment, {
|
|
858
|
+
children: [/*#__PURE__*/jsx(EnhancedTableHead, {
|
|
859
859
|
order: order,
|
|
860
860
|
orderBy: orderBy,
|
|
861
861
|
onRequestSort: handleSort,
|
|
@@ -865,11 +865,11 @@ function EnhancedTable(props) {
|
|
|
865
865
|
rowCount: rows.length,
|
|
866
866
|
onSelectAllClick: props.handleSelectAllClick,
|
|
867
867
|
async: async
|
|
868
|
-
}
|
|
868
|
+
}), /*#__PURE__*/jsxs(TableBody, {
|
|
869
869
|
children: [visibleRows.map((row, index) => {
|
|
870
870
|
const rowKey = selectID ? row[selectID] : `row-${page * effectiveRowsPerPage + index}`;
|
|
871
871
|
const rowID = getSelectableRowId(row, index, selectID);
|
|
872
|
-
return /*#__PURE__*/
|
|
872
|
+
return /*#__PURE__*/jsx(DataRow, {
|
|
873
873
|
rowID: rowID,
|
|
874
874
|
headers: headers,
|
|
875
875
|
rowValues: row,
|
|
@@ -877,22 +877,22 @@ function EnhancedTable(props) {
|
|
|
877
877
|
selectRows: props.selectRows,
|
|
878
878
|
handleClick: props.handleClick,
|
|
879
879
|
isSelected: isSelected
|
|
880
|
-
}, rowKey
|
|
881
|
-
}), !subTable && emptyRows > 0 && /*#__PURE__*/
|
|
880
|
+
}, rowKey);
|
|
881
|
+
}), !subTable && emptyRows > 0 && /*#__PURE__*/jsx(TableRow, {
|
|
882
882
|
style: {
|
|
883
883
|
height: (33 ) * emptyRows
|
|
884
884
|
},
|
|
885
|
-
children: /*#__PURE__*/
|
|
885
|
+
children: /*#__PURE__*/jsx(TableCell, {
|
|
886
886
|
colSpan: headers.length
|
|
887
|
-
}
|
|
888
|
-
}
|
|
889
|
-
}
|
|
890
|
-
}
|
|
891
|
-
}
|
|
887
|
+
})
|
|
888
|
+
})]
|
|
889
|
+
})]
|
|
890
|
+
})
|
|
891
|
+
}), subTable ? /*#__PURE__*/jsx(Box, {
|
|
892
892
|
sx: {
|
|
893
893
|
mb: 3
|
|
894
894
|
}
|
|
895
|
-
}
|
|
895
|
+
}) : /*#__PURE__*/jsx(TablePagination, {
|
|
896
896
|
rowsPerPageOptions: props.pageSizeOptions || getPageOptions(rows.length),
|
|
897
897
|
component: "div",
|
|
898
898
|
count: rows.length,
|
|
@@ -905,8 +905,8 @@ function EnhancedTable(props) {
|
|
|
905
905
|
},
|
|
906
906
|
showFirstButton: true,
|
|
907
907
|
showLastButton: true
|
|
908
|
-
}
|
|
909
|
-
}
|
|
908
|
+
})]
|
|
909
|
+
});
|
|
910
910
|
}
|
|
911
911
|
EnhancedTable.propTypes = {
|
|
912
912
|
headers: PropTypes.array.isRequired,
|
|
@@ -1034,32 +1034,32 @@ function UniversalTable({
|
|
|
1034
1034
|
} : true);
|
|
1035
1035
|
}
|
|
1036
1036
|
}, [async, onReload, setLoading, searchTerm, order, orderBy, asyncPages]);
|
|
1037
|
-
return /*#__PURE__*/
|
|
1038
|
-
children: [/*#__PURE__*/
|
|
1037
|
+
return /*#__PURE__*/jsxs(Fragment, {
|
|
1038
|
+
children: [/*#__PURE__*/jsx(LazyLoadingIndicator, {
|
|
1039
1039
|
show: lazyloading,
|
|
1040
1040
|
currentPage: currentPage,
|
|
1041
1041
|
totalPages: totalPages
|
|
1042
|
-
}
|
|
1042
|
+
}), /*#__PURE__*/jsxs(Paper$1, {
|
|
1043
1043
|
sx: {
|
|
1044
1044
|
...(subTable && {
|
|
1045
1045
|
boxShadow: "none"
|
|
1046
1046
|
})
|
|
1047
1047
|
},
|
|
1048
|
-
children: [/*#__PURE__*/
|
|
1048
|
+
children: [/*#__PURE__*/jsx(TableSelectionBanner, {
|
|
1049
1049
|
selected: selected,
|
|
1050
1050
|
onSelection: handleSelection,
|
|
1051
1051
|
selectIcon: selectIcon
|
|
1052
|
-
}
|
|
1052
|
+
}), /*#__PURE__*/jsx(TableTitle, {
|
|
1053
1053
|
name: name,
|
|
1054
1054
|
subTable: subTable
|
|
1055
|
-
}
|
|
1055
|
+
}), !subTable && /*#__PURE__*/jsx(TableToolbarContent, {
|
|
1056
1056
|
onReload: typeof onReload === "function" || typeof setLoading === "function" ? handleReload : undefined,
|
|
1057
1057
|
reloadBtnLoading: reloadBtnLoading,
|
|
1058
1058
|
searchTerm: searchTerm,
|
|
1059
1059
|
onSearchChange: handleSearch,
|
|
1060
1060
|
name: name,
|
|
1061
1061
|
persistSearch: persistSearch
|
|
1062
|
-
}
|
|
1062
|
+
}), /*#__PURE__*/jsx(EnhancedTable, {
|
|
1063
1063
|
headers: head,
|
|
1064
1064
|
rows: rows,
|
|
1065
1065
|
resetFlag: searchTerm,
|
|
@@ -1081,9 +1081,9 @@ function UniversalTable({
|
|
|
1081
1081
|
setOrderBy: setOrderBy,
|
|
1082
1082
|
asyncPages: asyncPages,
|
|
1083
1083
|
async: async
|
|
1084
|
-
}
|
|
1085
|
-
}
|
|
1086
|
-
}
|
|
1084
|
+
})]
|
|
1085
|
+
})]
|
|
1086
|
+
});
|
|
1087
1087
|
}
|
|
1088
1088
|
UniversalTable.propTypes = {
|
|
1089
1089
|
loading: PropTypes.bool,
|