material-react-table 0.31.1 → 0.32.1

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.
Files changed (136) hide show
  1. package/README.md +3 -4
  2. package/dist/{MaterialReactTable.d.ts → cjs/MaterialReactTable.d.ts} +494 -486
  3. package/dist/{body → cjs/body}/MRT_TableBody.d.ts +8 -8
  4. package/dist/{body → cjs/body}/MRT_TableBodyCell.d.ts +11 -11
  5. package/dist/{body → cjs/body}/MRT_TableBodyRow.d.ts +9 -9
  6. package/dist/{body → cjs/body}/MRT_TableBodyRowGrabHandle.d.ts +9 -9
  7. package/dist/{body → cjs/body}/MRT_TableDetailPanel.d.ts +8 -8
  8. package/dist/{buttons → cjs/buttons}/MRT_ColumnPinningButtons.d.ts +8 -8
  9. package/dist/{buttons → cjs/buttons}/MRT_CopyButton.d.ts +9 -9
  10. package/dist/{buttons → cjs/buttons}/MRT_EditActionButtons.d.ts +8 -8
  11. package/dist/{buttons → cjs/buttons}/MRT_ExpandAllButton.d.ts +7 -7
  12. package/dist/{buttons → cjs/buttons}/MRT_ExpandButton.d.ts +8 -8
  13. package/dist/{buttons → cjs/buttons}/MRT_FullScreenToggleButton.d.ts +8 -8
  14. package/dist/{buttons → cjs/buttons}/MRT_GrabHandleButton.d.ts +11 -11
  15. package/dist/{buttons → cjs/buttons}/MRT_ShowHideColumnsButton.d.ts +8 -8
  16. package/dist/{buttons → cjs/buttons}/MRT_ToggleDensePaddingButton.d.ts +8 -8
  17. package/dist/{buttons → cjs/buttons}/MRT_ToggleFiltersButton.d.ts +8 -8
  18. package/dist/{buttons → cjs/buttons}/MRT_ToggleGlobalFilterButton.d.ts +8 -8
  19. package/dist/{buttons → cjs/buttons}/MRT_ToggleRowActionMenuButton.d.ts +8 -8
  20. package/dist/{column.utils.d.ts → cjs/column.utils.d.ts} +12 -11
  21. package/dist/{filtersFns.d.ts → cjs/filtersFns.d.ts} +68 -68
  22. package/dist/{footer → cjs/footer}/MRT_TableFooter.d.ts +7 -7
  23. package/dist/{footer → cjs/footer}/MRT_TableFooterCell.d.ts +8 -8
  24. package/dist/{footer → cjs/footer}/MRT_TableFooterRow.d.ts +8 -8
  25. package/dist/{head → cjs/head}/MRT_TableHead.d.ts +7 -7
  26. package/dist/{head → cjs/head}/MRT_TableHeadCell.d.ts +8 -8
  27. package/dist/{head → cjs/head}/MRT_TableHeadCellColumnActionsButton.d.ts +8 -8
  28. package/dist/{head → cjs/head}/MRT_TableHeadCellFilterContainer.d.ts +8 -8
  29. package/dist/{head → cjs/head}/MRT_TableHeadCellFilterLabel.d.ts +8 -8
  30. package/dist/{head → cjs/head}/MRT_TableHeadCellGrabHandle.d.ts +9 -9
  31. package/dist/{head → cjs/head}/MRT_TableHeadCellResizeHandle.d.ts +8 -8
  32. package/dist/{head → cjs/head}/MRT_TableHeadCellSortLabel.d.ts +8 -8
  33. package/dist/{head → cjs/head}/MRT_TableHeadRow.d.ts +8 -8
  34. package/dist/{icons.d.ts → cjs/icons.d.ts} +33 -33
  35. package/dist/cjs/index.d.ts +7 -0
  36. package/dist/cjs/index.min.js +51 -0
  37. package/dist/cjs/index.min.js.map +1 -0
  38. package/dist/{inputs → cjs/inputs}/MRT_EditCellTextField.d.ts +8 -8
  39. package/dist/{inputs → cjs/inputs}/MRT_FilterRangeFields.d.ts +8 -8
  40. package/dist/{inputs → cjs/inputs}/MRT_FilterTextField.d.ts +9 -9
  41. package/dist/{inputs → cjs/inputs}/MRT_GlobalFilterTextField.d.ts +7 -7
  42. package/dist/{inputs → cjs/inputs}/MRT_SelectCheckbox.d.ts +9 -9
  43. package/dist/{localization.d.ts → cjs/localization.d.ts} +82 -82
  44. package/dist/{menus → cjs/menus}/MRT_ColumnActionMenu.d.ts +20 -20
  45. package/dist/{menus → cjs/menus}/MRT_FilterOptionMenu.d.ts +18 -18
  46. package/dist/{menus → cjs/menus}/MRT_RowActionMenu.d.ts +11 -11
  47. package/dist/{menus → cjs/menus}/MRT_ShowHideColumnsMenu.d.ts +10 -10
  48. package/dist/{menus → cjs/menus}/MRT_ShowHideColumnsMenuItems.d.ts +12 -12
  49. package/dist/{sortingFns.d.ts → cjs/sortingFns.d.ts} +12 -12
  50. package/dist/{table → cjs/table}/MRT_Table.d.ts +8 -8
  51. package/dist/{table → cjs/table}/MRT_TableContainer.d.ts +7 -7
  52. package/dist/{table → cjs/table}/MRT_TablePaper.d.ts +7 -7
  53. package/dist/{table → cjs/table}/MRT_TableRoot.d.ts +3 -3
  54. package/dist/{toolbar → cjs/toolbar}/MRT_LinearProgressBar.d.ts +8 -8
  55. package/dist/{toolbar → cjs/toolbar}/MRT_TablePagination.d.ts +8 -8
  56. package/dist/{toolbar → cjs/toolbar}/MRT_ToolbarAlertBanner.d.ts +8 -8
  57. package/dist/{toolbar → cjs/toolbar}/MRT_ToolbarBottom.d.ts +7 -7
  58. package/dist/{toolbar → cjs/toolbar}/MRT_ToolbarDropZone.d.ts +7 -7
  59. package/dist/{toolbar → cjs/toolbar}/MRT_ToolbarInternalButtons.d.ts +7 -7
  60. package/dist/{toolbar → cjs/toolbar}/MRT_ToolbarTop.d.ts +21 -21
  61. package/dist/esm/MaterialReactTable.d.ts +494 -0
  62. package/dist/esm/body/MRT_TableBody.d.ts +8 -0
  63. package/dist/esm/body/MRT_TableBodyCell.d.ts +11 -0
  64. package/dist/esm/body/MRT_TableBodyRow.d.ts +9 -0
  65. package/dist/esm/body/MRT_TableBodyRowGrabHandle.d.ts +9 -0
  66. package/dist/esm/body/MRT_TableDetailPanel.d.ts +8 -0
  67. package/dist/esm/buttons/MRT_ColumnPinningButtons.d.ts +8 -0
  68. package/dist/esm/buttons/MRT_CopyButton.d.ts +9 -0
  69. package/dist/esm/buttons/MRT_EditActionButtons.d.ts +8 -0
  70. package/dist/esm/buttons/MRT_ExpandAllButton.d.ts +7 -0
  71. package/dist/esm/buttons/MRT_ExpandButton.d.ts +8 -0
  72. package/dist/esm/buttons/MRT_FullScreenToggleButton.d.ts +8 -0
  73. package/dist/esm/buttons/MRT_GrabHandleButton.d.ts +11 -0
  74. package/dist/esm/buttons/MRT_ShowHideColumnsButton.d.ts +8 -0
  75. package/dist/esm/buttons/MRT_ToggleDensePaddingButton.d.ts +8 -0
  76. package/dist/esm/buttons/MRT_ToggleFiltersButton.d.ts +8 -0
  77. package/dist/esm/buttons/MRT_ToggleGlobalFilterButton.d.ts +8 -0
  78. package/dist/esm/buttons/MRT_ToggleRowActionMenuButton.d.ts +8 -0
  79. package/dist/esm/column.utils.d.ts +12 -0
  80. package/dist/esm/filtersFns.d.ts +68 -0
  81. package/dist/esm/footer/MRT_TableFooter.d.ts +7 -0
  82. package/dist/esm/footer/MRT_TableFooterCell.d.ts +8 -0
  83. package/dist/esm/footer/MRT_TableFooterRow.d.ts +8 -0
  84. package/dist/esm/head/MRT_TableHead.d.ts +7 -0
  85. package/dist/esm/head/MRT_TableHeadCell.d.ts +8 -0
  86. package/dist/esm/head/MRT_TableHeadCellColumnActionsButton.d.ts +8 -0
  87. package/dist/esm/head/MRT_TableHeadCellFilterContainer.d.ts +8 -0
  88. package/dist/esm/head/MRT_TableHeadCellFilterLabel.d.ts +8 -0
  89. package/dist/esm/head/MRT_TableHeadCellGrabHandle.d.ts +9 -0
  90. package/dist/esm/head/MRT_TableHeadCellResizeHandle.d.ts +8 -0
  91. package/dist/esm/head/MRT_TableHeadCellSortLabel.d.ts +8 -0
  92. package/dist/esm/head/MRT_TableHeadRow.d.ts +8 -0
  93. package/dist/esm/icons.d.ts +33 -0
  94. package/dist/esm/index.d.ts +7 -0
  95. package/dist/esm/inputs/MRT_EditCellTextField.d.ts +8 -0
  96. package/dist/esm/inputs/MRT_FilterRangeFields.d.ts +8 -0
  97. package/dist/esm/inputs/MRT_FilterTextField.d.ts +9 -0
  98. package/dist/esm/inputs/MRT_GlobalFilterTextField.d.ts +7 -0
  99. package/dist/esm/inputs/MRT_SelectCheckbox.d.ts +9 -0
  100. package/dist/esm/localization.d.ts +82 -0
  101. package/dist/esm/material-react-table.esm.min.js +51 -0
  102. package/dist/esm/material-react-table.esm.min.js.map +1 -0
  103. package/dist/esm/menus/MRT_ColumnActionMenu.d.ts +20 -0
  104. package/dist/esm/menus/MRT_FilterOptionMenu.d.ts +18 -0
  105. package/dist/esm/menus/MRT_RowActionMenu.d.ts +11 -0
  106. package/dist/esm/menus/MRT_ShowHideColumnsMenu.d.ts +10 -0
  107. package/dist/esm/menus/MRT_ShowHideColumnsMenuItems.d.ts +12 -0
  108. package/dist/esm/sortingFns.d.ts +12 -0
  109. package/dist/esm/table/MRT_Table.d.ts +8 -0
  110. package/dist/esm/table/MRT_TableContainer.d.ts +7 -0
  111. package/dist/esm/table/MRT_TablePaper.d.ts +7 -0
  112. package/dist/esm/table/MRT_TableRoot.d.ts +3 -0
  113. package/dist/esm/toolbar/MRT_LinearProgressBar.d.ts +8 -0
  114. package/dist/esm/toolbar/MRT_TablePagination.d.ts +8 -0
  115. package/dist/esm/toolbar/MRT_ToolbarAlertBanner.d.ts +8 -0
  116. package/dist/esm/toolbar/MRT_ToolbarBottom.d.ts +7 -0
  117. package/dist/esm/toolbar/MRT_ToolbarDropZone.d.ts +7 -0
  118. package/dist/esm/toolbar/MRT_ToolbarInternalButtons.d.ts +7 -0
  119. package/dist/esm/toolbar/MRT_ToolbarTop.d.ts +21 -0
  120. package/dist/index.d.ts +686 -7
  121. package/package.json +24 -25
  122. package/src/MaterialReactTable.tsx +17 -4
  123. package/src/body/MRT_TableBodyCell.tsx +6 -3
  124. package/src/column.utils.ts +20 -0
  125. package/src/footer/MRT_TableFooterCell.tsx +1 -0
  126. package/src/head/MRT_TableHeadCell.tsx +1 -0
  127. package/src/inputs/MRT_EditCellTextField.tsx +1 -1
  128. package/src/inputs/MRT_FilterTextField.tsx +1 -1
  129. package/src/table/MRT_TableRoot.tsx +1 -16
  130. package/dist/index.js +0 -8
  131. package/dist/material-react-table.cjs.development.js +0 -3992
  132. package/dist/material-react-table.cjs.development.js.map +0 -1
  133. package/dist/material-react-table.cjs.production.min.js +0 -2
  134. package/dist/material-react-table.cjs.production.min.js.map +0 -1
  135. package/dist/material-react-table.esm.js +0 -3985
  136. package/dist/material-react-table.esm.js.map +0 -1
@@ -1,3985 +0,0 @@
1
- import React, { useMemo, useState, useCallback, Fragment, useRef, useLayoutEffect, useEffect } from 'react';
2
- import { ArrowRight, Cancel, CheckBox, ClearAll, Close, DensityLarge, DensityMedium, DensitySmall, DragHandle, DynamicFeed, Edit, ExpandLess, ExpandMore, FilterAlt, FilterAltOff, FilterList, FilterListOff, FullscreenExit, Fullscreen, KeyboardDoubleArrowDown, MoreHoriz, MoreVert, PushPin, RestartAlt, Save, Search, SearchOff, Sort, ViewColumn, VisibilityOff } from '@mui/icons-material';
3
- import { filterFns, sortingFns, useReactTable, getCoreRowModel, getExpandedRowModel, getFacetedRowModel, getFilteredRowModel, getGroupedRowModel, getPaginationRowModel, getSortedRowModel } from '@tanstack/react-table';
4
- import { Tooltip, IconButton, Menu, MenuItem, Box, FormControlLabel, Switch, Typography, Button, Divider, ListItemIcon, Checkbox, debounce, Collapse, TextField, InputAdornment, LinearProgress, TablePagination, Chip, Alert, AlertTitle, Fade, alpha, useMediaQuery, Toolbar, lighten, ListItemText, Grow, TableSortLabel, useTheme, TableCell, TableRow, TableHead, darken, Skeleton, TableBody, TableFooter, Table, TableContainer, Paper, Dialog } from '@mui/material';
5
- import { rankItem, rankings, compareItems } from '@tanstack/match-sorter-utils';
6
- import { useVirtualizer } from '@tanstack/react-virtual';
7
-
8
- function _extends() {
9
- _extends = Object.assign ? Object.assign.bind() : function (target) {
10
- for (var i = 1; i < arguments.length; i++) {
11
- var source = arguments[i];
12
-
13
- for (var key in source) {
14
- if (Object.prototype.hasOwnProperty.call(source, key)) {
15
- target[key] = source[key];
16
- }
17
- }
18
- }
19
-
20
- return target;
21
- };
22
- return _extends.apply(this, arguments);
23
- }
24
-
25
- function _objectWithoutPropertiesLoose(source, excluded) {
26
- if (source == null) return {};
27
- var target = {};
28
- var sourceKeys = Object.keys(source);
29
- var key, i;
30
-
31
- for (i = 0; i < sourceKeys.length; i++) {
32
- key = sourceKeys[i];
33
- if (excluded.indexOf(key) >= 0) continue;
34
- target[key] = source[key];
35
- }
36
-
37
- return target;
38
- }
39
-
40
- var MRT_DefaultLocalization_EN = {
41
- actions: 'Actions',
42
- and: 'and',
43
- cancel: 'Cancel',
44
- changeFilterMode: 'Change filter mode',
45
- changeSearchMode: 'Change search mode',
46
- clearFilter: 'Clear filter',
47
- clearSearch: 'Clear search',
48
- clearSort: 'Clear sort',
49
- clickToCopy: 'Click to copy',
50
- columnActions: 'Column Actions',
51
- copiedToClipboard: 'Copied to clipboard',
52
- dropToGroupBy: 'Drop to group by {column}',
53
- edit: 'Edit',
54
- expand: 'Expand',
55
- expandAll: 'Expand all',
56
- filterArrIncludes: 'Includes',
57
- filterArrIncludesAll: 'Includes all',
58
- filterArrIncludesSome: 'Includes',
59
- filterBetween: 'Between',
60
- filterBetweenInclusive: 'Between Inclusive',
61
- filterByColumn: 'Filter by {column}',
62
- filterContains: 'Contains',
63
- filterEmpty: 'Empty',
64
- filterEndsWith: 'Ends With',
65
- filterEquals: 'Equals',
66
- filterEqualsString: 'Equals',
67
- filterFuzzy: 'Fuzzy',
68
- filterGreaterThan: 'Greater Than',
69
- filterGreaterThanOrEqualTo: 'Greater Than Or Equal To',
70
- filterInNumberRange: 'Between',
71
- filterIncludesString: 'Contains',
72
- filterIncludesStringSensitive: 'Contains',
73
- filterLessThan: 'Less Than',
74
- filterLessThanOrEqualTo: 'Less Than Or Equal To',
75
- filterMode: 'Filter Mode: {filterType}',
76
- filterNotEmpty: 'Not Empty',
77
- filterNotEquals: 'Not Equals',
78
- filterStartsWith: 'Starts With',
79
- filterWeakEquals: 'Equals',
80
- filteringByColumn: 'Filtering by {column} - {filterType} {filterValue}',
81
- grab: 'Grab',
82
- groupByColumn: 'Group by {column}',
83
- groupedBy: 'Grouped by ',
84
- hideAll: 'Hide all',
85
- hideColumn: 'Hide {column} column',
86
- max: 'Max',
87
- min: 'Min',
88
- move: 'Move',
89
- or: 'or',
90
- pinToLeft: 'Pin to left',
91
- pinToRight: 'Pin to right',
92
- resetColumnSize: 'Reset column size',
93
- resetOrder: 'Reset order',
94
- rowActions: 'Row Actions',
95
- rowNumber: '#',
96
- rowNumbers: 'Row Numbers',
97
- save: 'Save',
98
- search: 'Search',
99
- selectedCountOfRowCountRowsSelected: '{selectedCount} of {rowCount} row(s) selected',
100
- select: 'Select',
101
- showAll: 'Show all',
102
- showAllColumns: 'Show all columns',
103
- showHideColumns: 'Show/Hide columns',
104
- showHideFilters: 'Show/Hide filters',
105
- showHideSearch: 'Show/Hide search',
106
- sortByColumnAsc: 'Sort by {column} ascending',
107
- sortByColumnDesc: 'Sort by {column} descending',
108
- sortedByColumnAsc: 'Sorted by {column} ascending',
109
- sortedByColumnDesc: 'Sorted by {column} descending',
110
- thenBy: ', then by ',
111
- toggleDensity: 'Toggle density',
112
- toggleFullScreen: 'Toggle full screen',
113
- toggleSelectAll: 'Toggle select all',
114
- toggleSelectRow: 'Toggle select row',
115
- toggleVisibility: 'Toggle visibility',
116
- ungroupByColumn: 'Ungroup by {column}',
117
- unpin: 'Unpin',
118
- unpinAll: 'Unpin all',
119
- unsorted: 'Unsorted'
120
- };
121
-
122
- var MRT_Default_Icons = {
123
- ArrowRightIcon: ArrowRight,
124
- CancelIcon: Cancel,
125
- CheckBoxIcon: CheckBox,
126
- ClearAllIcon: ClearAll,
127
- CloseIcon: Close,
128
- DensityLargeIcon: DensityLarge,
129
- DensityMediumIcon: DensityMedium,
130
- DensitySmallIcon: DensitySmall,
131
- DragHandleIcon: DragHandle,
132
- DynamicFeedIcon: DynamicFeed,
133
- EditIcon: Edit,
134
- ExpandLessIcon: ExpandLess,
135
- ExpandMoreIcon: ExpandMore,
136
- FilterAltIcon: FilterAlt,
137
- FilterAltOffIcon: FilterAltOff,
138
- FilterListIcon: FilterList,
139
- FilterListOffIcon: FilterListOff,
140
- FullscreenExitIcon: FullscreenExit,
141
- FullscreenIcon: Fullscreen,
142
- KeyboardDoubleArrowDownIcon: KeyboardDoubleArrowDown,
143
- MoreHorizIcon: MoreHoriz,
144
- MoreVertIcon: MoreVert,
145
- PushPinIcon: PushPin,
146
- RestartAltIcon: RestartAlt,
147
- SaveIcon: Save,
148
- SearchIcon: Search,
149
- SearchOffIcon: SearchOff,
150
- SortIcon: Sort,
151
- ViewColumnIcon: ViewColumn,
152
- VisibilityOffIcon: VisibilityOff
153
- };
154
-
155
- var MRT_ExpandAllButton = function MRT_ExpandAllButton(_ref) {
156
- var table = _ref.table;
157
- var getIsAllRowsExpanded = table.getIsAllRowsExpanded,
158
- getIsSomeRowsExpanded = table.getIsSomeRowsExpanded,
159
- getCanSomeRowsExpand = table.getCanSomeRowsExpand,
160
- getState = table.getState,
161
- _table$options = table.options,
162
- KeyboardDoubleArrowDownIcon = _table$options.icons.KeyboardDoubleArrowDownIcon,
163
- localization = _table$options.localization,
164
- muiExpandAllButtonProps = _table$options.muiExpandAllButtonProps,
165
- renderDetailPanel = _table$options.renderDetailPanel,
166
- toggleAllRowsExpanded = table.toggleAllRowsExpanded;
167
-
168
- var _getState = getState(),
169
- density = _getState.density;
170
-
171
- var iconButtonProps = muiExpandAllButtonProps instanceof Function ? muiExpandAllButtonProps({
172
- table: table
173
- }) : muiExpandAllButtonProps;
174
- return React.createElement(Tooltip, {
175
- arrow: true,
176
- enterDelay: 1000,
177
- enterNextDelay: 1000,
178
- title: localization.expandAll
179
- }, React.createElement("span", null, React.createElement(IconButton, Object.assign({
180
- "aria-label": localization.expandAll,
181
- disabled: !getCanSomeRowsExpand() && !renderDetailPanel,
182
- onClick: function onClick() {
183
- return toggleAllRowsExpanded(!getIsAllRowsExpanded());
184
- }
185
- }, iconButtonProps, {
186
- sx: _extends({
187
- height: density === 'compact' ? '1.75rem' : '2.25rem',
188
- width: density === 'compact' ? '1.75rem' : '2.25rem',
189
- mt: density !== 'compact' ? '-0.25rem' : undefined
190
- }, iconButtonProps == null ? void 0 : iconButtonProps.sx)
191
- }), React.createElement(KeyboardDoubleArrowDownIcon, {
192
- style: {
193
- transform: "rotate(" + (getIsAllRowsExpanded() ? -180 : getIsSomeRowsExpanded() ? -90 : 0) + "deg)",
194
- transition: 'transform 0.2s'
195
- }
196
- }))));
197
- };
198
-
199
- var MRT_ExpandButton = function MRT_ExpandButton(_ref) {
200
- var row = _ref.row,
201
- table = _ref.table;
202
- var getState = table.getState,
203
- _table$options = table.options,
204
- ExpandMoreIcon = _table$options.icons.ExpandMoreIcon,
205
- localization = _table$options.localization,
206
- muiExpandButtonProps = _table$options.muiExpandButtonProps,
207
- renderDetailPanel = _table$options.renderDetailPanel;
208
-
209
- var _getState = getState(),
210
- density = _getState.density;
211
-
212
- var iconButtonProps = muiExpandButtonProps instanceof Function ? muiExpandButtonProps({
213
- table: table,
214
- row: row
215
- }) : muiExpandButtonProps;
216
-
217
- var handleToggleExpand = function handleToggleExpand() {
218
- row.toggleExpanded();
219
- };
220
-
221
- return React.createElement(Tooltip, {
222
- arrow: true,
223
- enterDelay: 1000,
224
- enterNextDelay: 1000,
225
- title: localization.expand
226
- }, React.createElement("span", null, React.createElement(IconButton, Object.assign({
227
- "aria-label": localization.expand,
228
- disabled: !row.getCanExpand() && !renderDetailPanel,
229
- onClick: handleToggleExpand
230
- }, iconButtonProps, {
231
- sx: function sx(theme) {
232
- return _extends({
233
- height: density === 'compact' ? '1.75rem' : '2.25rem',
234
- width: density === 'compact' ? '1.75rem' : '2.25rem'
235
- }, (iconButtonProps == null ? void 0 : iconButtonProps.sx) instanceof Function ? iconButtonProps.sx(theme) : iconButtonProps == null ? void 0 : iconButtonProps.sx);
236
- }
237
- }), React.createElement(ExpandMoreIcon, {
238
- style: {
239
- transform: "rotate(" + (!row.getCanExpand() && !renderDetailPanel ? -90 : row.getIsExpanded() ? -180 : 0) + "deg)",
240
- transition: 'transform 0.2s'
241
- }
242
- }))));
243
- };
244
-
245
- var internalFilterOptions = function internalFilterOptions(localization) {
246
- return [{
247
- option: 'fuzzy',
248
- symbol: '≈',
249
- label: localization.filterFuzzy,
250
- divider: false
251
- }, {
252
- option: 'contains',
253
- symbol: '*',
254
- label: localization.filterContains,
255
- divider: false
256
- }, {
257
- option: 'startsWith',
258
- symbol: 'a',
259
- label: localization.filterStartsWith,
260
- divider: false
261
- }, {
262
- option: 'endsWith',
263
- symbol: 'z',
264
- label: localization.filterEndsWith,
265
- divider: true
266
- }, {
267
- option: 'equals',
268
- symbol: '=',
269
- label: localization.filterEquals,
270
- divider: false
271
- }, {
272
- option: 'notEquals',
273
- symbol: '≠',
274
- label: localization.filterNotEquals,
275
- divider: true
276
- }, {
277
- option: 'between',
278
- symbol: '⇿',
279
- label: localization.filterBetween,
280
- divider: false
281
- }, {
282
- option: 'betweenInclusive',
283
- symbol: '⬌',
284
- label: localization.filterBetweenInclusive,
285
- divider: true
286
- }, {
287
- option: 'greaterThan',
288
- symbol: '>',
289
- label: localization.filterGreaterThan,
290
- divider: false
291
- }, {
292
- option: 'greaterThanOrEqualTo',
293
- symbol: '≥',
294
- label: localization.filterGreaterThanOrEqualTo,
295
- divider: false
296
- }, {
297
- option: 'lessThan',
298
- symbol: '<',
299
- label: localization.filterLessThan,
300
- divider: false
301
- }, {
302
- option: 'lessThanOrEqualTo',
303
- symbol: '≤',
304
- label: localization.filterLessThanOrEqualTo,
305
- divider: true
306
- }, {
307
- option: 'empty',
308
- symbol: '∅',
309
- label: localization.filterEmpty,
310
- divider: false
311
- }, {
312
- option: 'notEmpty',
313
- symbol: '!∅',
314
- label: localization.filterNotEmpty,
315
- divider: false
316
- }];
317
- };
318
- var MRT_FilterOptionMenu = function MRT_FilterOptionMenu(_ref) {
319
- var _columnDef$columnFilt;
320
-
321
- var anchorEl = _ref.anchorEl,
322
- header = _ref.header,
323
- onSelect = _ref.onSelect,
324
- setAnchorEl = _ref.setAnchorEl,
325
- table = _ref.table;
326
- var getState = table.getState,
327
- _table$options = table.options,
328
- enabledGlobalFilterOptions = _table$options.enabledGlobalFilterOptions,
329
- columnFilterModeOptions = _table$options.columnFilterModeOptions,
330
- localization = _table$options.localization,
331
- setCurrentFilterFns = table.setCurrentFilterFns,
332
- setCurrentGlobalFilterFn = table.setCurrentGlobalFilterFn;
333
-
334
- var _getState = getState(),
335
- currentFilterFns = _getState.currentFilterFns,
336
- currentGlobalFilterFn = _getState.currentGlobalFilterFn,
337
- density = _getState.density;
338
-
339
- var _ref2 = header != null ? header : {},
340
- column = _ref2.column;
341
-
342
- var _ref3 = column != null ? column : {},
343
- columnDef = _ref3.columnDef;
344
-
345
- var allowedColumnFilterOptions = (_columnDef$columnFilt = columnDef == null ? void 0 : columnDef.columnFilterModeOptions) != null ? _columnDef$columnFilt : columnFilterModeOptions;
346
- var filterOptions = useMemo(function () {
347
- return internalFilterOptions(localization).filter(function (filterOption) {
348
- return columnDef ? allowedColumnFilterOptions === undefined || (allowedColumnFilterOptions == null ? void 0 : allowedColumnFilterOptions.includes(filterOption.option)) : (!enabledGlobalFilterOptions || enabledGlobalFilterOptions.includes(filterOption.option)) && ['fuzzy', 'contains'].includes(filterOption.option);
349
- });
350
- }, []);
351
-
352
- var handleSelectFilterType = function handleSelectFilterType(option) {
353
- if (header && column) {
354
- setCurrentFilterFns(function (prev) {
355
- var _extends2;
356
-
357
- return _extends({}, prev, (_extends2 = {}, _extends2[header.id] = option, _extends2));
358
- });
359
-
360
- if (['empty', 'notEmpty'].includes(option)) {
361
- column.setFilterValue(' ');
362
- } else if (option === 'between') {
363
- column.setFilterValue(['', '']);
364
- } else {
365
- column.setFilterValue('');
366
- }
367
- } else {
368
- setCurrentGlobalFilterFn(option);
369
- }
370
-
371
- setAnchorEl(null);
372
- onSelect == null ? void 0 : onSelect();
373
- };
374
-
375
- var filterOption = !!header ? currentFilterFns[header.id] : currentGlobalFilterFn;
376
- return React.createElement(Menu, {
377
- anchorEl: anchorEl,
378
- anchorOrigin: {
379
- vertical: 'center',
380
- horizontal: 'right'
381
- },
382
- onClose: function onClose() {
383
- return setAnchorEl(null);
384
- },
385
- open: !!anchorEl,
386
- MenuListProps: {
387
- dense: density === 'compact'
388
- }
389
- }, filterOptions.map(function (_ref4, index) {
390
- var option = _ref4.option,
391
- label = _ref4.label,
392
- divider = _ref4.divider,
393
- symbol = _ref4.symbol;
394
- return React.createElement(MenuItem, {
395
- divider: divider,
396
- key: index,
397
- onClick: function onClick() {
398
- return handleSelectFilterType(option);
399
- },
400
- selected: option === filterOption,
401
- sx: {
402
- py: '6px',
403
- my: 0,
404
- alignItems: 'center',
405
- display: 'flex',
406
- gap: '2ch'
407
- },
408
- value: option
409
- }, React.createElement(Box, {
410
- sx: {
411
- fontSize: '1.25rem',
412
- width: '2ch'
413
- }
414
- }, symbol), label);
415
- }));
416
- };
417
-
418
- var MRT_ColumnPinningButtons = function MRT_ColumnPinningButtons(_ref) {
419
- var column = _ref.column,
420
- table = _ref.table;
421
- var _table$options = table.options,
422
- PushPinIcon = _table$options.icons.PushPinIcon,
423
- localization = _table$options.localization;
424
-
425
- var handlePinColumn = function handlePinColumn(pinDirection) {
426
- column.pin(pinDirection);
427
- };
428
-
429
- return React.createElement(Box, {
430
- sx: {
431
- minWidth: '70px',
432
- textAlign: 'center'
433
- }
434
- }, column.getIsPinned() ? React.createElement(Tooltip, {
435
- arrow: true,
436
- title: localization.unpin
437
- }, React.createElement(IconButton, {
438
- onClick: function onClick() {
439
- return handlePinColumn(false);
440
- },
441
- size: "small"
442
- }, React.createElement(PushPinIcon, null))) : React.createElement(React.Fragment, null, React.createElement(Tooltip, {
443
- arrow: true,
444
- title: localization.pinToLeft
445
- }, React.createElement(IconButton, {
446
- onClick: function onClick() {
447
- return handlePinColumn('left');
448
- },
449
- size: "small"
450
- }, React.createElement(PushPinIcon, {
451
- style: {
452
- transform: 'rotate(90deg)'
453
- }
454
- }))), React.createElement(Tooltip, {
455
- arrow: true,
456
- title: localization.pinToRight
457
- }, React.createElement(IconButton, {
458
- onClick: function onClick() {
459
- return handlePinColumn('right');
460
- },
461
- size: "small"
462
- }, React.createElement(PushPinIcon, {
463
- style: {
464
- transform: 'rotate(-90deg)'
465
- }
466
- })))));
467
- };
468
-
469
- var MRT_GrabHandleButton = function MRT_GrabHandleButton(_ref) {
470
- var iconButtonProps = _ref.iconButtonProps,
471
- onDragEnd = _ref.onDragEnd,
472
- onDragStart = _ref.onDragStart,
473
- table = _ref.table;
474
- var _table$options = table.options,
475
- DragHandleIcon = _table$options.icons.DragHandleIcon,
476
- localization = _table$options.localization;
477
- return React.createElement(Tooltip, {
478
- arrow: true,
479
- enterDelay: 1000,
480
- enterNextDelay: 1000,
481
- placement: "top",
482
- title: localization.move
483
- }, React.createElement(IconButton, Object.assign({
484
- disableRipple: true,
485
- draggable: "true",
486
- onDragStart: onDragStart,
487
- onDragEnd: onDragEnd,
488
- size: "small"
489
- }, iconButtonProps, {
490
- sx: _extends({
491
- cursor: 'grab',
492
- m: 0,
493
- opacity: 0.5,
494
- p: '2px',
495
- transition: 'all 0.2s ease-in-out',
496
- '&:hover': {
497
- backgroundColor: 'transparent',
498
- opacity: 1
499
- },
500
- '&:active': {
501
- cursor: 'grabbing'
502
- }
503
- }, iconButtonProps == null ? void 0 : iconButtonProps.sx)
504
- }), React.createElement(DragHandleIcon, null)));
505
- };
506
-
507
- var fuzzy = function fuzzy(row, columnId, filterValue, addMeta) {
508
- var itemRank = rankItem(row.getValue(columnId), filterValue, {
509
- threshold: rankings.MATCHES
510
- });
511
- addMeta(itemRank);
512
- return itemRank.passed;
513
- };
514
-
515
- fuzzy.autoRemove = function (val) {
516
- return !val;
517
- };
518
-
519
- var contains = function contains(row, id, filterValue) {
520
- return row.getValue(id).toString().toLowerCase().trim().includes(filterValue.toString().toLowerCase().trim());
521
- };
522
-
523
- contains.autoRemove = function (val) {
524
- return !val;
525
- };
526
-
527
- var startsWith = function startsWith(row, id, filterValue) {
528
- return row.getValue(id).toString().toLowerCase().trim().startsWith(filterValue.toString().toLowerCase().trim());
529
- };
530
-
531
- startsWith.autoRemove = function (val) {
532
- return !val;
533
- };
534
-
535
- var endsWith = function endsWith(row, id, filterValue) {
536
- return row.getValue(id).toString().toLowerCase().trim().endsWith(filterValue.toString().toLowerCase().trim());
537
- };
538
-
539
- endsWith.autoRemove = function (val) {
540
- return !val;
541
- };
542
-
543
- var equals = function equals(row, id, filterValue) {
544
- return row.getValue(id).toString().toLowerCase().trim() === filterValue.toString().toLowerCase().trim();
545
- };
546
-
547
- equals.autoRemove = function (val) {
548
- return !val;
549
- };
550
-
551
- var notEquals = function notEquals(row, id, filterValue) {
552
- return row.getValue(id).toString().toLowerCase().trim() !== filterValue.toString().toLowerCase().trim();
553
- };
554
-
555
- notEquals.autoRemove = function (val) {
556
- return !val;
557
- };
558
-
559
- var greaterThan = function greaterThan(row, id, filterValue) {
560
- return !isNaN(+filterValue) && !isNaN(+row.getValue(id)) ? +row.getValue(id) > +filterValue : row.getValue(id).toString().toLowerCase().trim() > filterValue.toString().toLowerCase().trim();
561
- };
562
-
563
- greaterThan.autoRemove = function (val) {
564
- return !val;
565
- };
566
-
567
- var greaterThanOrEqualTo = function greaterThanOrEqualTo(row, id, filterValue) {
568
- return equals(row, id, filterValue) || greaterThan(row, id, filterValue);
569
- };
570
-
571
- greaterThanOrEqualTo.autoRemove = function (val) {
572
- return !val;
573
- };
574
-
575
- var lessThan = function lessThan(row, id, filterValue) {
576
- return !isNaN(+filterValue) && !isNaN(+row.getValue(id)) ? +row.getValue(id) < +filterValue : row.getValue(id).toString().toLowerCase().trim() < filterValue.toString().toLowerCase().trim();
577
- };
578
-
579
- lessThan.autoRemove = function (val) {
580
- return !val;
581
- };
582
-
583
- var lessThanOrEqualTo = function lessThanOrEqualTo(row, id, filterValue) {
584
- return equals(row, id, filterValue) || lessThan(row, id, filterValue);
585
- };
586
-
587
- lessThanOrEqualTo.autoRemove = function (val) {
588
- return !val;
589
- };
590
-
591
- var between = function between(row, id, filterValues) {
592
- return (['', undefined].includes(filterValues[0]) || greaterThan(row, id, filterValues[0])) && (!isNaN(+filterValues[0]) && !isNaN(+filterValues[1]) && +filterValues[0] > +filterValues[1] || ['', undefined].includes(filterValues[1]) || lessThan(row, id, filterValues[1]));
593
- };
594
-
595
- between.autoRemove = function (val) {
596
- return !val;
597
- };
598
-
599
- var betweenInclusive = function betweenInclusive(row, id, filterValues) {
600
- return (['', undefined].includes(filterValues[0]) || greaterThanOrEqualTo(row, id, filterValues[0])) && (!isNaN(+filterValues[0]) && !isNaN(+filterValues[1]) && +filterValues[0] > +filterValues[1] || ['', undefined].includes(filterValues[1]) || lessThanOrEqualTo(row, id, filterValues[1]));
601
- };
602
-
603
- betweenInclusive.autoRemove = function (val) {
604
- return !val;
605
- };
606
-
607
- var empty = function empty(row, id, _filterValue) {
608
- return !row.getValue(id).toString().trim();
609
- };
610
-
611
- empty.autoRemove = function (val) {
612
- return !val;
613
- };
614
-
615
- var notEmpty = function notEmpty(row, id, _filterValue) {
616
- return !!row.getValue(id).toString().trim();
617
- };
618
-
619
- notEmpty.autoRemove = function (val) {
620
- return !val;
621
- };
622
-
623
- var MRT_FilterFns = /*#__PURE__*/_extends({}, filterFns, {
624
- between: between,
625
- betweenInclusive: betweenInclusive,
626
- contains: contains,
627
- empty: empty,
628
- endsWith: endsWith,
629
- equals: equals,
630
- fuzzy: fuzzy,
631
- greaterThan: greaterThan,
632
- greaterThanOrEqualTo: greaterThanOrEqualTo,
633
- lessThan: lessThan,
634
- lessThanOrEqualTo: lessThanOrEqualTo,
635
- notEmpty: notEmpty,
636
- notEquals: notEquals,
637
- startsWith: startsWith
638
- });
639
-
640
- var fuzzy$1 = function fuzzy(rowA, rowB, columnId) {
641
- var dir = 0;
642
-
643
- if (rowA.columnFiltersMeta[columnId]) {
644
- dir = compareItems(rowA.columnFiltersMeta[columnId], rowB.columnFiltersMeta[columnId]);
645
- } // Provide a fallback for when the item ranks are equal
646
-
647
-
648
- return dir === 0 ? sortingFns.alphanumeric(rowA, rowB, columnId) : dir;
649
- };
650
-
651
- var MRT_SortingFns = /*#__PURE__*/_extends({}, sortingFns, {
652
- fuzzy: fuzzy$1
653
- });
654
- var rankGlobalFuzzy = function rankGlobalFuzzy(rowA, rowB) {
655
- return Math.max.apply(Math, Object.values(rowB.columnFiltersMeta).map(function (v) {
656
- return v.rank;
657
- })) - Math.max.apply(Math, Object.values(rowA.columnFiltersMeta).map(function (v) {
658
- return v.rank;
659
- }));
660
- };
661
-
662
- var getColumnId = function getColumnId(columnDef) {
663
- var _ref, _columnDef$id, _columnDef$accessorKe;
664
-
665
- return (_ref = (_columnDef$id = columnDef.id) != null ? _columnDef$id : (_columnDef$accessorKe = columnDef.accessorKey) == null ? void 0 : _columnDef$accessorKe.toString == null ? void 0 : _columnDef$accessorKe.toString()) != null ? _ref : columnDef.header;
666
- };
667
-
668
- var getAllLeafColumnDefs = function getAllLeafColumnDefs(columns) {
669
- var lowestLevelColumns = columns;
670
- var currentCols = columns;
671
-
672
- while (!!((_currentCols = currentCols) != null && _currentCols.length) && currentCols.some(function (col) {
673
- return col.columns;
674
- })) {
675
- var _currentCols;
676
-
677
- var nextCols = currentCols.filter(function (col) {
678
- return !!col.columns;
679
- }).map(function (col) {
680
- return col.columns;
681
- }).flat();
682
-
683
- if (nextCols.every(function (col) {
684
- return !(col != null && col.columns);
685
- })) {
686
- lowestLevelColumns = [].concat(lowestLevelColumns, nextCols);
687
- }
688
-
689
- currentCols = nextCols;
690
- }
691
-
692
- return lowestLevelColumns.filter(function (col) {
693
- return !col.columns;
694
- });
695
- };
696
- var prepareColumns = function prepareColumns(columnDefs, currentFilterFns) {
697
- return columnDefs.map(function (columnDef) {
698
- var _columnDef$columns;
699
-
700
- if (!columnDef.id) columnDef.id = getColumnId(columnDef);
701
-
702
- if (process.env.NODE_ENV !== 'production' && !columnDef.id) {
703
- console.error('Column definitions must have a valid `accessorKey` or `id` property');
704
- }
705
-
706
- if (!columnDef.columnDefType) columnDef.columnDefType = 'data';
707
-
708
- if (!!((_columnDef$columns = columnDef.columns) != null && _columnDef$columns.length)) {
709
- columnDef.columnDefType = 'group';
710
- columnDef.columns = prepareColumns(columnDef.columns, currentFilterFns);
711
- } else if (columnDef.columnDefType === 'data') {
712
- if (Object.keys(MRT_FilterFns).includes(currentFilterFns[columnDef.id])) {
713
- var _MRT_FilterFns$curren;
714
-
715
- columnDef.filterFn = // @ts-ignore
716
- (_MRT_FilterFns$curren = MRT_FilterFns[currentFilterFns[columnDef.id]]) != null ? _MRT_FilterFns$curren : MRT_FilterFns.fuzzy; //@ts-ignore
717
-
718
- columnDef._filterFn = currentFilterFns[columnDef.id];
719
- }
720
-
721
- if (Object.keys(MRT_SortingFns).includes(columnDef.sortingFn)) {
722
- // @ts-ignore
723
- columnDef.sortingFn = MRT_SortingFns[columnDef.sortingFn];
724
- }
725
- }
726
-
727
- return columnDef;
728
- });
729
- };
730
- var reorderColumn = function reorderColumn(draggedColumn, targetColumn, columnOrder) {
731
- if (draggedColumn.getCanPin()) {
732
- draggedColumn.pin(targetColumn.getIsPinned());
733
- }
734
-
735
- columnOrder.splice(columnOrder.indexOf(targetColumn.id), 0, columnOrder.splice(columnOrder.indexOf(draggedColumn.id), 1)[0]);
736
- return [].concat(columnOrder);
737
- };
738
- var getLeadingDisplayColumnIds = function getLeadingDisplayColumnIds(props) {
739
- return [(props.enableRowDragging || props.enableRowOrdering) && 'mrt-row-drag', (props.positionActionsColumn === 'first' && props.enableRowActions || props.enableEditing && props.editingMode === 'row') && 'mrt-row-actions', props.positionExpandColumn === 'first' && (props.enableExpanding || props.enableGrouping || props.renderDetailPanel) && 'mrt-row-expand', props.enableRowSelection && 'mrt-row-select', props.enableRowNumbers && 'mrt-row-numbers'].filter(Boolean);
740
- };
741
- var getTrailingDisplayColumnIds = function getTrailingDisplayColumnIds(props) {
742
- return [(props.positionActionsColumn === 'last' && props.enableRowActions || props.enableEditing && props.editingMode === 'row') && 'mrt-row-actions', props.positionExpandColumn === 'last' && (props.enableExpanding || props.enableGrouping || props.renderDetailPanel) && 'mrt-row-expand'];
743
- };
744
- var getDefaultColumnOrderIds = function getDefaultColumnOrderIds(props) {
745
- return [].concat(getLeadingDisplayColumnIds(props), getAllLeafColumnDefs(props.columns).map(function (columnDef) {
746
- return getColumnId(columnDef);
747
- }), getTrailingDisplayColumnIds(props)).filter(Boolean);
748
- };
749
- var getDefaultColumnFilterFn = function getDefaultColumnFilterFn(columnDef) {
750
- if (columnDef.filterVariant === 'multi-select') return 'arrIncludesSome';
751
- if (columnDef.filterVariant === 'select') return 'equals';
752
- if (columnDef.filterVariant === 'range') return 'betweenInclusive';
753
- return 'fuzzy';
754
- };
755
-
756
- var MRT_ShowHideColumnsMenuItems = function MRT_ShowHideColumnsMenuItems(_ref) {
757
- var _column$columns2;
758
-
759
- var allColumns = _ref.allColumns,
760
- currentHoveredColumn = _ref.currentHoveredColumn,
761
- setCurrentHoveredColumn = _ref.setCurrentHoveredColumn,
762
- column = _ref.column,
763
- isSubMenu = _ref.isSubMenu,
764
- table = _ref.table;
765
- var getState = table.getState,
766
- _table$options = table.options,
767
- enableColumnOrdering = _table$options.enableColumnOrdering,
768
- enableHiding = _table$options.enableHiding,
769
- enablePinning = _table$options.enablePinning,
770
- localization = _table$options.localization,
771
- setColumnOrder = table.setColumnOrder;
772
-
773
- var _getState = getState(),
774
- columnOrder = _getState.columnOrder;
775
-
776
- var columnDef = column.columnDef;
777
- var columnDefType = columnDef.columnDefType;
778
- var switchChecked = columnDefType !== 'group' && column.getIsVisible() || columnDefType === 'group' && column.getLeafColumns().some(function (col) {
779
- return col.getIsVisible();
780
- });
781
-
782
- var handleToggleColumnHidden = function handleToggleColumnHidden(column) {
783
- if (columnDefType === 'group') {
784
- var _column$columns;
785
-
786
- column == null ? void 0 : (_column$columns = column.columns) == null ? void 0 : _column$columns.forEach == null ? void 0 : _column$columns.forEach(function (childColumn) {
787
- childColumn.toggleVisibility(!switchChecked);
788
- });
789
- } else {
790
- column.toggleVisibility();
791
- }
792
- };
793
-
794
- var menuItemRef = React.useRef(null);
795
-
796
- var _useState = useState(false),
797
- isDragging = _useState[0],
798
- setIsDragging = _useState[1];
799
-
800
- var handleDragStart = function handleDragStart(e) {
801
- setIsDragging(true);
802
- e.dataTransfer.setDragImage(menuItemRef.current, 0, 0);
803
- };
804
-
805
- var handleDragEnd = function handleDragEnd(_e) {
806
- setIsDragging(false);
807
- setCurrentHoveredColumn(null);
808
-
809
- if (currentHoveredColumn) {
810
- setColumnOrder(reorderColumn(column, currentHoveredColumn, columnOrder));
811
- }
812
- };
813
-
814
- var handleDragEnter = function handleDragEnter(_e) {
815
- if (!isDragging) {
816
- setCurrentHoveredColumn(column);
817
- }
818
- };
819
-
820
- return React.createElement(React.Fragment, null, React.createElement(MenuItem, {
821
- disableRipple: true,
822
- ref: menuItemRef,
823
- onDragEnter: handleDragEnter,
824
- sx: function sx(theme) {
825
- return {
826
- alignItems: 'center',
827
- justifyContent: 'flex-start',
828
- my: 0,
829
- opacity: isDragging ? 0.5 : 1,
830
- outline: isDragging ? "1px dashed " + theme.palette.divider : (currentHoveredColumn == null ? void 0 : currentHoveredColumn.id) === column.id ? "2px dashed " + theme.palette.primary.main : 'none',
831
- pl: (column.depth + 0.5) * 2 + "rem",
832
- py: '6px'
833
- };
834
- }
835
- }, React.createElement(Box, {
836
- sx: {
837
- display: 'flex',
838
- flexWrap: 'nowrap',
839
- gap: '8px'
840
- }
841
- }, !isSubMenu && columnDefType !== 'group' && enableColumnOrdering && !allColumns.some(function (col) {
842
- return col.columnDef.columnDefType === 'group';
843
- }) && (columnDef.enableColumnOrdering !== false ? React.createElement(MRT_GrabHandleButton, {
844
- onDragEnd: handleDragEnd,
845
- onDragStart: handleDragStart,
846
- table: table
847
- }) : React.createElement(Box, {
848
- sx: {
849
- width: '28px'
850
- }
851
- })), !isSubMenu && enablePinning && (column.getCanPin() ? React.createElement(MRT_ColumnPinningButtons, {
852
- column: column,
853
- table: table
854
- }) : React.createElement(Box, {
855
- sx: {
856
- width: '70px'
857
- }
858
- })), enableHiding ? React.createElement(FormControlLabel, {
859
- componentsProps: {
860
- typography: {
861
- sx: {
862
- mb: 0,
863
- opacity: columnDefType !== 'display' ? 1 : 0.5
864
- }
865
- }
866
- },
867
- checked: switchChecked,
868
- control: React.createElement(Tooltip, {
869
- arrow: true,
870
- enterDelay: 1000,
871
- enterNextDelay: 1000,
872
- title: localization.toggleVisibility
873
- }, React.createElement(Switch, null)),
874
- disabled: isSubMenu && switchChecked || !column.getCanHide() || column.getIsGrouped(),
875
- label: columnDef.header,
876
- onChange: function onChange() {
877
- return handleToggleColumnHidden(column);
878
- }
879
- }) : React.createElement(Typography, {
880
- sx: {
881
- alignSelf: 'center'
882
- }
883
- }, columnDef.header))), (_column$columns2 = column.columns) == null ? void 0 : _column$columns2.map(function (c, i) {
884
- return React.createElement(MRT_ShowHideColumnsMenuItems, {
885
- allColumns: allColumns,
886
- column: c,
887
- currentHoveredColumn: currentHoveredColumn,
888
- isSubMenu: isSubMenu,
889
- key: i + "-" + c.id,
890
- setCurrentHoveredColumn: setCurrentHoveredColumn,
891
- table: table
892
- });
893
- }));
894
- };
895
-
896
- var MRT_ShowHideColumnsMenu = function MRT_ShowHideColumnsMenu(_ref) {
897
- var anchorEl = _ref.anchorEl,
898
- isSubMenu = _ref.isSubMenu,
899
- setAnchorEl = _ref.setAnchorEl,
900
- table = _ref.table;
901
- var getAllColumns = table.getAllColumns,
902
- getAllLeafColumns = table.getAllLeafColumns,
903
- getCenterLeafColumns = table.getCenterLeafColumns,
904
- getIsAllColumnsVisible = table.getIsAllColumnsVisible,
905
- getIsSomeColumnsPinned = table.getIsSomeColumnsPinned,
906
- getIsSomeColumnsVisible = table.getIsSomeColumnsVisible,
907
- getLeftLeafColumns = table.getLeftLeafColumns,
908
- getRightLeafColumns = table.getRightLeafColumns,
909
- getState = table.getState,
910
- toggleAllColumnsVisible = table.toggleAllColumnsVisible,
911
- _table$options = table.options,
912
- localization = _table$options.localization,
913
- enablePinning = _table$options.enablePinning,
914
- enableColumnOrdering = _table$options.enableColumnOrdering;
915
-
916
- var _getState = getState(),
917
- density = _getState.density,
918
- columnOrder = _getState.columnOrder,
919
- columnPinning = _getState.columnPinning;
920
-
921
- var hideAllColumns = function hideAllColumns() {
922
- getAllLeafColumns().filter(function (col) {
923
- return col.columnDef.enableHiding !== false;
924
- }).forEach(function (col) {
925
- return col.toggleVisibility(false);
926
- });
927
- };
928
-
929
- var allColumns = useMemo(function () {
930
- var columns = getAllColumns();
931
-
932
- if (columnOrder.length > 0 && !columns.some(function (col) {
933
- return col.columnDef.columnDefType === 'group';
934
- })) {
935
- return [].concat(getLeftLeafColumns(), Array.from(new Set(columnOrder)).map(function (colId) {
936
- return getCenterLeafColumns().find(function (col) {
937
- return (col == null ? void 0 : col.id) === colId;
938
- });
939
- }), getRightLeafColumns()).filter(Boolean);
940
- }
941
-
942
- return columns;
943
- }, [columnOrder, columnPinning, getAllColumns(), getCenterLeafColumns(), getLeftLeafColumns(), getRightLeafColumns()]);
944
-
945
- var _useState = useState(null),
946
- currentHoveredColumn = _useState[0],
947
- setCurrentHoveredColumn = _useState[1];
948
-
949
- return React.createElement(Menu, {
950
- anchorEl: anchorEl,
951
- open: !!anchorEl,
952
- onClose: function onClose() {
953
- return setAnchorEl(null);
954
- },
955
- MenuListProps: {
956
- dense: density === 'compact'
957
- }
958
- }, React.createElement(Box, {
959
- sx: {
960
- display: 'flex',
961
- justifyContent: isSubMenu ? 'center' : 'space-between',
962
- p: '0.5rem',
963
- pt: 0
964
- }
965
- }, !isSubMenu && React.createElement(Button, {
966
- disabled: !getIsSomeColumnsVisible(),
967
- onClick: hideAllColumns
968
- }, localization.hideAll), !isSubMenu && enableColumnOrdering && React.createElement(Button, {
969
- onClick: function onClick() {
970
- return table.setColumnOrder(getDefaultColumnOrderIds(table.options));
971
- }
972
- }, localization.resetOrder), !isSubMenu && enablePinning && React.createElement(Button, {
973
- disabled: !getIsSomeColumnsPinned(),
974
- onClick: function onClick() {
975
- return table.resetColumnPinning(true);
976
- }
977
- }, localization.unpinAll), React.createElement(Button, {
978
- disabled: getIsAllColumnsVisible(),
979
- onClick: function onClick() {
980
- return toggleAllColumnsVisible(true);
981
- }
982
- }, localization.showAll)), React.createElement(Divider, null), allColumns.map(function (column, index) {
983
- return React.createElement(MRT_ShowHideColumnsMenuItems, {
984
- allColumns: allColumns,
985
- column: column,
986
- currentHoveredColumn: currentHoveredColumn,
987
- isSubMenu: isSubMenu,
988
- key: index + "-" + column.id,
989
- setCurrentHoveredColumn: setCurrentHoveredColumn,
990
- table: table
991
- });
992
- }));
993
- };
994
-
995
- var commonMenuItemStyles = {
996
- py: '6px',
997
- my: 0,
998
- justifyContent: 'space-between',
999
- alignItems: 'center'
1000
- };
1001
- var commonListItemStyles = {
1002
- display: 'flex',
1003
- alignItems: 'center'
1004
- };
1005
- var MRT_ColumnActionMenu = function MRT_ColumnActionMenu(_ref) {
1006
- var _columnDef$columnFilt, _localization$sortByC, _localization$sortByC2, _localization$filterB, _localization, _localization$hideCol, _localization$showAll;
1007
-
1008
- var anchorEl = _ref.anchorEl,
1009
- header = _ref.header,
1010
- setAnchorEl = _ref.setAnchorEl,
1011
- table = _ref.table;
1012
- var getState = table.getState,
1013
- toggleAllColumnsVisible = table.toggleAllColumnsVisible,
1014
- setColumnOrder = table.setColumnOrder,
1015
- _table$options = table.options,
1016
- enableColumnFilterChangeMode = _table$options.enableColumnFilterChangeMode,
1017
- enableColumnFilters = _table$options.enableColumnFilters,
1018
- enableColumnResizing = _table$options.enableColumnResizing,
1019
- enableGrouping = _table$options.enableGrouping,
1020
- enableHiding = _table$options.enableHiding,
1021
- enablePinning = _table$options.enablePinning,
1022
- enableSorting = _table$options.enableSorting,
1023
- columnFilterModeOptions = _table$options.columnFilterModeOptions,
1024
- _table$options$icons = _table$options.icons,
1025
- ArrowRightIcon = _table$options$icons.ArrowRightIcon,
1026
- ClearAllIcon = _table$options$icons.ClearAllIcon,
1027
- ViewColumnIcon = _table$options$icons.ViewColumnIcon,
1028
- DynamicFeedIcon = _table$options$icons.DynamicFeedIcon,
1029
- FilterListIcon = _table$options$icons.FilterListIcon,
1030
- FilterListOffIcon = _table$options$icons.FilterListOffIcon,
1031
- PushPinIcon = _table$options$icons.PushPinIcon,
1032
- SortIcon = _table$options$icons.SortIcon,
1033
- RestartAltIcon = _table$options$icons.RestartAltIcon,
1034
- VisibilityOffIcon = _table$options$icons.VisibilityOffIcon,
1035
- tableId = _table$options.tableId,
1036
- localization = _table$options.localization,
1037
- setShowFilters = table.setShowFilters;
1038
- var column = header.column;
1039
- var columnDef = column.columnDef;
1040
-
1041
- var _getState = getState(),
1042
- columnSizing = _getState.columnSizing,
1043
- columnVisibility = _getState.columnVisibility,
1044
- density = _getState.density;
1045
-
1046
- var _useState = useState(null),
1047
- filterMenuAnchorEl = _useState[0],
1048
- setFilterMenuAnchorEl = _useState[1];
1049
-
1050
- var _useState2 = useState(null),
1051
- showHideColumnsMenuAnchorEl = _useState2[0],
1052
- setShowHideColumnsMenuAnchorEl = _useState2[1];
1053
-
1054
- var handleClearSort = function handleClearSort() {
1055
- column.clearSorting();
1056
- setAnchorEl(null);
1057
- };
1058
-
1059
- var handleSortAsc = function handleSortAsc() {
1060
- column.toggleSorting(false);
1061
- setAnchorEl(null);
1062
- };
1063
-
1064
- var handleSortDesc = function handleSortDesc() {
1065
- column.toggleSorting(true);
1066
- setAnchorEl(null);
1067
- };
1068
-
1069
- var handleResetColumnSize = function handleResetColumnSize() {
1070
- column.resetSize();
1071
- setAnchorEl(null);
1072
- };
1073
-
1074
- var handleHideColumn = function handleHideColumn() {
1075
- column.toggleVisibility(false);
1076
- setAnchorEl(null);
1077
- };
1078
-
1079
- var handlePinColumn = function handlePinColumn(pinDirection) {
1080
- column.pin(pinDirection);
1081
- setAnchorEl(null);
1082
- };
1083
-
1084
- var handleGroupByColumn = function handleGroupByColumn() {
1085
- column.toggleGrouping();
1086
- setColumnOrder(function (old) {
1087
- return ['mrt-row-expand'].concat(old);
1088
- });
1089
- setAnchorEl(null);
1090
- };
1091
-
1092
- var handleClearFilter = function handleClearFilter() {
1093
- column.setFilterValue('');
1094
- setAnchorEl(null);
1095
- };
1096
-
1097
- var handleFilterByColumn = function handleFilterByColumn() {
1098
- setShowFilters(true);
1099
- setTimeout(function () {
1100
- var _document$getElementB, _header$muiTableHeadC, _header$muiTableHeadC2;
1101
-
1102
- return (_document$getElementB = document.getElementById( // @ts-ignore
1103
- (_header$muiTableHeadC = (_header$muiTableHeadC2 = header.muiTableHeadCellFilterTextFieldProps) == null ? void 0 : _header$muiTableHeadC2.id) != null ? _header$muiTableHeadC : "mrt-" + tableId + "-" + header.id + "-filter-text-field")) == null ? void 0 : _document$getElementB.focus();
1104
- }, 200);
1105
- setAnchorEl(null);
1106
- };
1107
-
1108
- var handleShowAllColumns = function handleShowAllColumns() {
1109
- toggleAllColumnsVisible(true);
1110
- setAnchorEl(null);
1111
- };
1112
-
1113
- var handleOpenFilterModeMenu = function handleOpenFilterModeMenu(event) {
1114
- event.stopPropagation();
1115
- setFilterMenuAnchorEl(event.currentTarget);
1116
- };
1117
-
1118
- var handleOpenShowHideColumnsMenu = function handleOpenShowHideColumnsMenu(event) {
1119
- event.stopPropagation();
1120
- setShowHideColumnsMenuAnchorEl(event.currentTarget);
1121
- };
1122
-
1123
- var isSelectFilter = !!columnDef.filterSelectOptions;
1124
- var allowedColumnFilterOptions = (_columnDef$columnFilt = columnDef == null ? void 0 : columnDef.columnFilterModeOptions) != null ? _columnDef$columnFilt : columnFilterModeOptions;
1125
- var showFilterModeSubMenu = enableColumnFilterChangeMode && columnDef.enableColumnFilterChangeMode !== false && !isSelectFilter && (allowedColumnFilterOptions === undefined || !!(allowedColumnFilterOptions != null && allowedColumnFilterOptions.length));
1126
- return React.createElement(Menu, {
1127
- anchorEl: anchorEl,
1128
- open: !!anchorEl,
1129
- onClose: function onClose() {
1130
- return setAnchorEl(null);
1131
- },
1132
- MenuListProps: {
1133
- dense: density === 'compact'
1134
- }
1135
- }, enableSorting && column.getCanSort() && [React.createElement(MenuItem, {
1136
- disabled: !column.getIsSorted(),
1137
- key: 0,
1138
- onClick: handleClearSort,
1139
- sx: commonMenuItemStyles
1140
- }, React.createElement(Box, {
1141
- sx: commonListItemStyles
1142
- }, React.createElement(ListItemIcon, null, React.createElement(ClearAllIcon, null)), localization.clearSort)), React.createElement(MenuItem, {
1143
- disabled: column.getIsSorted() === 'asc',
1144
- key: 1,
1145
- onClick: handleSortAsc,
1146
- sx: commonMenuItemStyles
1147
- }, React.createElement(Box, {
1148
- sx: commonListItemStyles
1149
- }, React.createElement(ListItemIcon, null, React.createElement(SortIcon, {
1150
- style: {
1151
- transform: 'rotate(180deg) scaleX(-1)'
1152
- }
1153
- })), (_localization$sortByC = localization.sortByColumnAsc) == null ? void 0 : _localization$sortByC.replace('{column}', String(columnDef.header)))), React.createElement(MenuItem, {
1154
- divider: enableColumnFilters || enableGrouping || enableHiding,
1155
- key: 2,
1156
- disabled: column.getIsSorted() === 'desc',
1157
- onClick: handleSortDesc,
1158
- sx: commonMenuItemStyles
1159
- }, React.createElement(Box, {
1160
- sx: commonListItemStyles
1161
- }, React.createElement(ListItemIcon, null, React.createElement(SortIcon, null)), (_localization$sortByC2 = localization.sortByColumnDesc) == null ? void 0 : _localization$sortByC2.replace('{column}', String(columnDef.header))))], enableColumnFilters && column.getCanFilter() && [React.createElement(MenuItem, {
1162
- disabled: !column.getFilterValue(),
1163
- key: 0,
1164
- onClick: handleClearFilter,
1165
- sx: commonMenuItemStyles
1166
- }, React.createElement(Box, {
1167
- sx: commonListItemStyles
1168
- }, React.createElement(ListItemIcon, null, React.createElement(FilterListOffIcon, null)), localization.clearFilter)), React.createElement(MenuItem, {
1169
- divider: enableGrouping || enableHiding,
1170
- key: 1,
1171
- onClick: handleFilterByColumn,
1172
- sx: commonMenuItemStyles
1173
- }, React.createElement(Box, {
1174
- sx: commonListItemStyles
1175
- }, React.createElement(ListItemIcon, null, React.createElement(FilterListIcon, null)), (_localization$filterB = localization.filterByColumn) == null ? void 0 : _localization$filterB.replace('{column}', String(columnDef.header))), showFilterModeSubMenu && React.createElement(IconButton, {
1176
- onClick: handleOpenFilterModeMenu,
1177
- onMouseEnter: handleOpenFilterModeMenu,
1178
- size: "small",
1179
- sx: {
1180
- p: 0
1181
- }
1182
- }, React.createElement(ArrowRightIcon, null))), showFilterModeSubMenu && React.createElement(MRT_FilterOptionMenu, {
1183
- anchorEl: filterMenuAnchorEl,
1184
- header: header,
1185
- key: 2,
1186
- onSelect: handleFilterByColumn,
1187
- setAnchorEl: setFilterMenuAnchorEl,
1188
- table: table
1189
- })].filter(Boolean), enableGrouping && column.getCanGroup() && [React.createElement(MenuItem, {
1190
- divider: enablePinning,
1191
- key: 0,
1192
- onClick: handleGroupByColumn,
1193
- sx: commonMenuItemStyles
1194
- }, React.createElement(Box, {
1195
- sx: commonListItemStyles
1196
- }, React.createElement(ListItemIcon, null, React.createElement(DynamicFeedIcon, null)), (_localization = localization[column.getIsGrouped() ? 'ungroupByColumn' : 'groupByColumn']) == null ? void 0 : _localization.replace('{column}', String(columnDef.header))))], enablePinning && column.getCanPin() && [React.createElement(MenuItem, {
1197
- disabled: column.getIsPinned() === 'left' || !column.getCanPin(),
1198
- key: 0,
1199
- onClick: function onClick() {
1200
- return handlePinColumn('left');
1201
- },
1202
- sx: commonMenuItemStyles
1203
- }, React.createElement(Box, {
1204
- sx: commonListItemStyles
1205
- }, React.createElement(ListItemIcon, null, React.createElement(PushPinIcon, {
1206
- style: {
1207
- transform: 'rotate(90deg)'
1208
- }
1209
- })), localization.pinToLeft)), React.createElement(MenuItem, {
1210
- disabled: column.getIsPinned() === 'right' || !column.getCanPin(),
1211
- key: 1,
1212
- onClick: function onClick() {
1213
- return handlePinColumn('right');
1214
- },
1215
- sx: commonMenuItemStyles
1216
- }, React.createElement(Box, {
1217
- sx: commonListItemStyles
1218
- }, React.createElement(ListItemIcon, null, React.createElement(PushPinIcon, {
1219
- style: {
1220
- transform: 'rotate(-90deg)'
1221
- }
1222
- })), localization.pinToRight)), React.createElement(MenuItem, {
1223
- disabled: !column.getIsPinned(),
1224
- divider: enableHiding,
1225
- key: 2,
1226
- onClick: function onClick() {
1227
- return handlePinColumn(false);
1228
- },
1229
- sx: commonMenuItemStyles
1230
- }, React.createElement(Box, {
1231
- sx: commonListItemStyles
1232
- }, React.createElement(ListItemIcon, null, React.createElement(PushPinIcon, null)), localization.unpin))], enableColumnResizing && column.getCanResize() && [React.createElement(MenuItem, {
1233
- disabled: !columnSizing[column.id],
1234
- key: 0,
1235
- onClick: handleResetColumnSize,
1236
- sx: commonMenuItemStyles
1237
- }, React.createElement(Box, {
1238
- sx: commonListItemStyles
1239
- }, React.createElement(ListItemIcon, null, React.createElement(RestartAltIcon, null)), localization.resetColumnSize))], enableHiding && [React.createElement(MenuItem, {
1240
- disabled: columnDef.enableHiding === false,
1241
- key: 0,
1242
- onClick: handleHideColumn,
1243
- sx: commonMenuItemStyles
1244
- }, React.createElement(Box, {
1245
- sx: commonListItemStyles
1246
- }, React.createElement(ListItemIcon, null, React.createElement(VisibilityOffIcon, null)), (_localization$hideCol = localization.hideColumn) == null ? void 0 : _localization$hideCol.replace('{column}', String(columnDef.header)))), React.createElement(MenuItem, {
1247
- disabled: !Object.values(columnVisibility).filter(function (visible) {
1248
- return !visible;
1249
- }).length,
1250
- key: 1,
1251
- onClick: handleShowAllColumns,
1252
- sx: commonMenuItemStyles
1253
- }, React.createElement(Box, {
1254
- sx: commonListItemStyles
1255
- }, React.createElement(ListItemIcon, null, React.createElement(ViewColumnIcon, null)), (_localization$showAll = localization.showAllColumns) == null ? void 0 : _localization$showAll.replace('{column}', String(columnDef.header))), React.createElement(IconButton, {
1256
- onClick: handleOpenShowHideColumnsMenu,
1257
- onMouseEnter: handleOpenShowHideColumnsMenu,
1258
- size: "small",
1259
- sx: {
1260
- p: 0
1261
- }
1262
- }, React.createElement(ArrowRightIcon, null))), React.createElement(MRT_ShowHideColumnsMenu, {
1263
- anchorEl: showHideColumnsMenuAnchorEl,
1264
- isSubMenu: true,
1265
- key: 2,
1266
- setAnchorEl: setShowHideColumnsMenuAnchorEl,
1267
- table: table
1268
- })]);
1269
- };
1270
-
1271
- var MRT_RowActionMenu = function MRT_RowActionMenu(_ref) {
1272
- var anchorEl = _ref.anchorEl,
1273
- handleEdit = _ref.handleEdit,
1274
- row = _ref.row,
1275
- setAnchorEl = _ref.setAnchorEl,
1276
- table = _ref.table;
1277
- var getState = table.getState,
1278
- _table$options = table.options,
1279
- EditIcon = _table$options.icons.EditIcon,
1280
- enableEditing = _table$options.enableEditing,
1281
- localization = _table$options.localization,
1282
- renderRowActionMenuItems = _table$options.renderRowActionMenuItems;
1283
-
1284
- var _getState = getState(),
1285
- density = _getState.density;
1286
-
1287
- return React.createElement(Menu, {
1288
- anchorEl: anchorEl,
1289
- open: !!anchorEl,
1290
- onClose: function onClose() {
1291
- return setAnchorEl(null);
1292
- },
1293
- MenuListProps: {
1294
- dense: density === 'compact'
1295
- }
1296
- }, enableEditing && React.createElement(MenuItem, {
1297
- onClick: handleEdit,
1298
- sx: commonMenuItemStyles
1299
- }, React.createElement(Box, {
1300
- sx: commonListItemStyles
1301
- }, React.createElement(ListItemIcon, null, React.createElement(EditIcon, null)), localization.edit)), renderRowActionMenuItems == null ? void 0 : renderRowActionMenuItems({
1302
- row: row,
1303
- table: table,
1304
- closeMenu: function closeMenu() {
1305
- return setAnchorEl(null);
1306
- }
1307
- }));
1308
- };
1309
-
1310
- var MRT_EditActionButtons = function MRT_EditActionButtons(_ref) {
1311
- var row = _ref.row,
1312
- table = _ref.table;
1313
- var getState = table.getState,
1314
- _table$options = table.options,
1315
- _table$options$icons = _table$options.icons,
1316
- CancelIcon = _table$options$icons.CancelIcon,
1317
- SaveIcon = _table$options$icons.SaveIcon,
1318
- localization = _table$options.localization,
1319
- onEditRowSubmit = _table$options.onEditRowSubmit,
1320
- setCurrentEditingRow = table.setCurrentEditingRow;
1321
-
1322
- var _getState = getState(),
1323
- currentEditingRow = _getState.currentEditingRow;
1324
-
1325
- var handleCancel = function handleCancel() {
1326
- var _row$original;
1327
-
1328
- row._valuesCache = (_row$original = row.original) != null ? _row$original : {};
1329
- setCurrentEditingRow(null);
1330
- };
1331
-
1332
- var handleSave = function handleSave() {
1333
- onEditRowSubmit == null ? void 0 : onEditRowSubmit({
1334
- row: currentEditingRow != null ? currentEditingRow : row,
1335
- table: table
1336
- });
1337
- setCurrentEditingRow(null);
1338
- };
1339
-
1340
- return React.createElement(Box, {
1341
- sx: {
1342
- display: 'flex',
1343
- gap: '0.75rem'
1344
- }
1345
- }, React.createElement(Tooltip, {
1346
- arrow: true,
1347
- title: localization.cancel
1348
- }, React.createElement(IconButton, {
1349
- "aria-label": localization.cancel,
1350
- onClick: handleCancel
1351
- }, React.createElement(CancelIcon, null))), React.createElement(Tooltip, {
1352
- arrow: true,
1353
- title: localization.save
1354
- }, React.createElement(IconButton, {
1355
- "aria-label": localization.save,
1356
- color: "info",
1357
- onClick: handleSave
1358
- }, React.createElement(SaveIcon, null))));
1359
- };
1360
-
1361
- var commonIconButtonStyles = {
1362
- height: '2rem',
1363
- ml: '10px',
1364
- opacity: 0.5,
1365
- transition: 'opacity 0.2s',
1366
- width: '2rem',
1367
- '&:hover': {
1368
- opacity: 1
1369
- }
1370
- };
1371
- var MRT_ToggleRowActionMenuButton = function MRT_ToggleRowActionMenuButton(_ref) {
1372
- var row = _ref.row,
1373
- table = _ref.table;
1374
- var getState = table.getState,
1375
- _table$options = table.options,
1376
- enableEditing = _table$options.enableEditing,
1377
- _table$options$icons = _table$options.icons,
1378
- EditIcon = _table$options$icons.EditIcon,
1379
- MoreHorizIcon = _table$options$icons.MoreHorizIcon,
1380
- localization = _table$options.localization,
1381
- renderRowActionMenuItems = _table$options.renderRowActionMenuItems,
1382
- renderRowActions = _table$options.renderRowActions,
1383
- setCurrentEditingRow = table.setCurrentEditingRow;
1384
-
1385
- var _getState = getState(),
1386
- currentEditingRow = _getState.currentEditingRow;
1387
-
1388
- var _useState = useState(null),
1389
- anchorEl = _useState[0],
1390
- setAnchorEl = _useState[1];
1391
-
1392
- var handleOpenRowActionMenu = function handleOpenRowActionMenu(event) {
1393
- event.stopPropagation();
1394
- event.preventDefault();
1395
- setAnchorEl(event.currentTarget);
1396
- };
1397
-
1398
- var handleStartEditMode = function handleStartEditMode() {
1399
- setCurrentEditingRow(_extends({}, row));
1400
- setAnchorEl(null);
1401
- };
1402
-
1403
- return React.createElement(React.Fragment, null, renderRowActions ? React.createElement(React.Fragment, null, renderRowActions({
1404
- row: row,
1405
- table: table
1406
- })) : row.id === (currentEditingRow == null ? void 0 : currentEditingRow.id) ? React.createElement(MRT_EditActionButtons, {
1407
- row: row,
1408
- table: table
1409
- }) : !renderRowActionMenuItems && enableEditing ? React.createElement(Tooltip, {
1410
- placement: "right",
1411
- arrow: true,
1412
- title: localization.edit
1413
- }, React.createElement(IconButton, {
1414
- sx: commonIconButtonStyles,
1415
- onClick: handleStartEditMode
1416
- }, React.createElement(EditIcon, null))) : renderRowActionMenuItems ? React.createElement(React.Fragment, null, React.createElement(Tooltip, {
1417
- arrow: true,
1418
- enterDelay: 1000,
1419
- enterNextDelay: 1000,
1420
- title: localization.rowActions
1421
- }, React.createElement(IconButton, {
1422
- "aria-label": localization.rowActions,
1423
- onClick: handleOpenRowActionMenu,
1424
- size: "small",
1425
- sx: commonIconButtonStyles
1426
- }, React.createElement(MoreHorizIcon, null))), React.createElement(MRT_RowActionMenu, {
1427
- anchorEl: anchorEl,
1428
- handleEdit: handleStartEditMode,
1429
- row: row,
1430
- setAnchorEl: setAnchorEl,
1431
- table: table
1432
- })) : null);
1433
- };
1434
-
1435
- var MRT_SelectCheckbox = function MRT_SelectCheckbox(_ref) {
1436
- var row = _ref.row,
1437
- selectAll = _ref.selectAll,
1438
- table = _ref.table;
1439
- var getState = table.getState,
1440
- _table$options = table.options,
1441
- localization = _table$options.localization,
1442
- muiSelectCheckboxProps = _table$options.muiSelectCheckboxProps,
1443
- muiSelectAllCheckboxProps = _table$options.muiSelectAllCheckboxProps,
1444
- selectAllMode = _table$options.selectAllMode;
1445
-
1446
- var _getState = getState(),
1447
- density = _getState.density;
1448
-
1449
- var checkboxProps = !row ? muiSelectAllCheckboxProps instanceof Function ? muiSelectAllCheckboxProps({
1450
- table: table
1451
- }) : muiSelectAllCheckboxProps : muiSelectCheckboxProps instanceof Function ? muiSelectCheckboxProps({
1452
- row: row,
1453
- table: table
1454
- }) : muiSelectCheckboxProps;
1455
- return React.createElement(Tooltip, {
1456
- arrow: true,
1457
- enterDelay: 1000,
1458
- enterNextDelay: 1000,
1459
- title: selectAll ? localization.toggleSelectAll : localization.toggleSelectRow
1460
- }, React.createElement(Checkbox, Object.assign({
1461
- checked: selectAll ? table.getIsAllRowsSelected() : row == null ? void 0 : row.getIsSelected(),
1462
- indeterminate: selectAll ? table.getIsSomeRowsSelected() : row == null ? void 0 : row.getIsSomeSelected(),
1463
- inputProps: {
1464
- 'aria-label': selectAll ? localization.toggleSelectAll : localization.toggleSelectRow
1465
- },
1466
- onChange: !row ? selectAllMode === 'all' ? table.getToggleAllRowsSelectedHandler() : table.getToggleAllPageRowsSelectedHandler() : row.getToggleSelectedHandler(),
1467
- size: density === 'compact' ? 'small' : 'medium'
1468
- }, checkboxProps, {
1469
- sx: function sx(theme) {
1470
- return _extends({
1471
- height: density === 'compact' ? '1.75rem' : '2.5rem',
1472
- width: density === 'compact' ? '1.75rem' : '2.5rem',
1473
- m: density !== 'compact' ? '-0.4rem' : undefined
1474
- }, (checkboxProps == null ? void 0 : checkboxProps.sx) instanceof Function ? checkboxProps.sx(theme) : checkboxProps == null ? void 0 : checkboxProps.sx);
1475
- }
1476
- })));
1477
- };
1478
-
1479
- var MRT_GlobalFilterTextField = function MRT_GlobalFilterTextField(_ref) {
1480
- var _localization$clearSe;
1481
-
1482
- var table = _ref.table;
1483
- var getState = table.getState,
1484
- setGlobalFilter = table.setGlobalFilter,
1485
- _table$options = table.options,
1486
- enableGlobalFilterChangeMode = _table$options.enableGlobalFilterChangeMode,
1487
- _table$options$icons = _table$options.icons,
1488
- SearchIcon = _table$options$icons.SearchIcon,
1489
- CloseIcon = _table$options$icons.CloseIcon,
1490
- localization = _table$options.localization,
1491
- muiSearchTextFieldProps = _table$options.muiSearchTextFieldProps,
1492
- tableId = _table$options.tableId;
1493
-
1494
- var _getState = getState(),
1495
- globalFilter = _getState.globalFilter,
1496
- showGlobalFilter = _getState.showGlobalFilter;
1497
-
1498
- var _useState = useState(null),
1499
- anchorEl = _useState[0],
1500
- setAnchorEl = _useState[1];
1501
-
1502
- var _useState2 = useState(globalFilter != null ? globalFilter : ''),
1503
- searchValue = _useState2[0],
1504
- setSearchValue = _useState2[1];
1505
-
1506
- var handleChangeDebounced = useCallback(debounce(function (event) {
1507
- var _event$target$value;
1508
-
1509
- setGlobalFilter((_event$target$value = event.target.value) != null ? _event$target$value : undefined);
1510
- }, 250), []);
1511
-
1512
- var handleChange = function handleChange(event) {
1513
- setSearchValue(event.target.value);
1514
- handleChangeDebounced(event);
1515
- };
1516
-
1517
- var handleGlobalFilterMenuOpen = function handleGlobalFilterMenuOpen(event) {
1518
- setAnchorEl(event.currentTarget);
1519
- };
1520
-
1521
- var handleClear = function handleClear() {
1522
- setSearchValue('');
1523
- setGlobalFilter(undefined);
1524
- };
1525
-
1526
- var textFieldProps = muiSearchTextFieldProps instanceof Function ? muiSearchTextFieldProps({
1527
- table: table
1528
- }) : muiSearchTextFieldProps;
1529
- return React.createElement(Collapse, {
1530
- "in": showGlobalFilter,
1531
- orientation: "horizontal"
1532
- }, React.createElement(TextField, Object.assign({
1533
- id: "mrt-" + tableId + "-search-text-field",
1534
- placeholder: localization.search,
1535
- onChange: handleChange,
1536
- value: searchValue != null ? searchValue : '',
1537
- variant: "standard",
1538
- InputProps: {
1539
- startAdornment: enableGlobalFilterChangeMode ? React.createElement(InputAdornment, {
1540
- position: "start"
1541
- }, React.createElement(Tooltip, {
1542
- arrow: true,
1543
- title: localization.changeSearchMode
1544
- }, React.createElement(IconButton, {
1545
- "aria-label": localization.changeSearchMode,
1546
- onClick: handleGlobalFilterMenuOpen,
1547
- size: "small",
1548
- sx: {
1549
- height: '1.75rem',
1550
- width: '1.75rem'
1551
- }
1552
- }, React.createElement(SearchIcon, null)))) : React.createElement(SearchIcon, {
1553
- style: {
1554
- marginRight: '4px'
1555
- }
1556
- }),
1557
- endAdornment: React.createElement(InputAdornment, {
1558
- position: "end"
1559
- }, React.createElement(Tooltip, {
1560
- arrow: true,
1561
- title: (_localization$clearSe = localization.clearSearch) != null ? _localization$clearSe : ''
1562
- }, React.createElement("span", null, React.createElement(IconButton, {
1563
- "aria-label": localization.clearSearch,
1564
- disabled: !(searchValue != null && searchValue.length),
1565
- onClick: handleClear,
1566
- size: "small"
1567
- }, React.createElement(CloseIcon, null)))))
1568
- }
1569
- }, textFieldProps)), React.createElement(MRT_FilterOptionMenu, {
1570
- anchorEl: anchorEl,
1571
- setAnchorEl: setAnchorEl,
1572
- table: table
1573
- }));
1574
- };
1575
-
1576
- var MRT_LinearProgressBar = function MRT_LinearProgressBar(_ref) {
1577
- var isTopToolbar = _ref.isTopToolbar,
1578
- table = _ref.table;
1579
- var muiLinearProgressProps = table.options.muiLinearProgressProps,
1580
- getState = table.getState;
1581
-
1582
- var _getState = getState(),
1583
- isLoading = _getState.isLoading,
1584
- showProgressBars = _getState.showProgressBars;
1585
-
1586
- var linearProgressProps = muiLinearProgressProps instanceof Function ? muiLinearProgressProps({
1587
- isTopToolbar: isTopToolbar,
1588
- table: table
1589
- }) : muiLinearProgressProps;
1590
- return React.createElement(Collapse, {
1591
- "in": isLoading || showProgressBars,
1592
- mountOnEnter: true,
1593
- unmountOnExit: true,
1594
- sx: {
1595
- bottom: isTopToolbar ? 0 : undefined,
1596
- position: 'absolute',
1597
- top: !isTopToolbar ? 0 : undefined,
1598
- width: '100%'
1599
- }
1600
- }, React.createElement(LinearProgress, Object.assign({
1601
- "aria-label": "Loading",
1602
- "aria-busy": "true",
1603
- sx: {
1604
- position: 'relative'
1605
- }
1606
- }, linearProgressProps)));
1607
- };
1608
-
1609
- var MRT_TablePagination = function MRT_TablePagination(_ref) {
1610
- var table = _ref.table,
1611
- position = _ref.position;
1612
- var getPrePaginationRowModel = table.getPrePaginationRowModel,
1613
- getState = table.getState,
1614
- setPageIndex = table.setPageIndex,
1615
- setPageSize = table.setPageSize,
1616
- _table$options = table.options,
1617
- muiTablePaginationProps = _table$options.muiTablePaginationProps,
1618
- enableToolbarInternalActions = _table$options.enableToolbarInternalActions,
1619
- rowCount = _table$options.rowCount;
1620
-
1621
- var _getState = getState(),
1622
- _getState$pagination = _getState.pagination,
1623
- _getState$pagination$ = _getState$pagination.pageSize,
1624
- pageSize = _getState$pagination$ === void 0 ? 10 : _getState$pagination$,
1625
- _getState$pagination$2 = _getState$pagination.pageIndex,
1626
- pageIndex = _getState$pagination$2 === void 0 ? 0 : _getState$pagination$2,
1627
- showGlobalFilter = _getState.showGlobalFilter;
1628
-
1629
- var totalRowCount = rowCount != null ? rowCount : getPrePaginationRowModel().rows.length;
1630
- var showFirstLastPageButtons = totalRowCount / pageSize > 2;
1631
- var tablePaginationProps = muiTablePaginationProps instanceof Function ? muiTablePaginationProps({
1632
- table: table
1633
- }) : muiTablePaginationProps;
1634
-
1635
- var handleChangeRowsPerPage = function handleChangeRowsPerPage(event) {
1636
- setPageSize(+event.target.value);
1637
- };
1638
-
1639
- return React.createElement(TablePagination, Object.assign({
1640
- SelectProps: {
1641
- sx: {
1642
- m: '0 1rem 0 1ch'
1643
- },
1644
- MenuProps: {
1645
- MenuListProps: {
1646
- disablePadding: true
1647
- }
1648
- }
1649
- },
1650
- component: "div",
1651
- count: totalRowCount,
1652
- onPageChange: function onPageChange(_, newPage) {
1653
- return setPageIndex(newPage);
1654
- },
1655
- onRowsPerPageChange: handleChangeRowsPerPage,
1656
- page: pageIndex,
1657
- rowsPerPage: pageSize,
1658
- rowsPerPageOptions: [5, 10, 15, 20, 25, 30, 50, 100],
1659
- showFirstButton: showFirstLastPageButtons,
1660
- showLastButton: showFirstLastPageButtons
1661
- }, tablePaginationProps, {
1662
- sx: function sx(theme) {
1663
- return _extends({
1664
- m: '0 0.5rem',
1665
- mt: position === 'top' && enableToolbarInternalActions && !showGlobalFilter ? '3.5rem' : undefined,
1666
- position: 'relative',
1667
- zIndex: 2
1668
- }, (tablePaginationProps == null ? void 0 : tablePaginationProps.sx) instanceof Function ? tablePaginationProps.sx(theme) : tablePaginationProps == null ? void 0 : tablePaginationProps.sx);
1669
- }
1670
- }));
1671
- };
1672
-
1673
- var MRT_ToolbarAlertBanner = function MRT_ToolbarAlertBanner(_ref) {
1674
- var _localization$selecte, _localization$selecte2;
1675
-
1676
- var stackAlertBanner = _ref.stackAlertBanner,
1677
- table = _ref.table;
1678
- var getPrePaginationRowModel = table.getPrePaginationRowModel,
1679
- getSelectedRowModel = table.getSelectedRowModel,
1680
- getState = table.getState,
1681
- _table$options = table.options,
1682
- localization = _table$options.localization,
1683
- muiTableToolbarAlertBannerProps = _table$options.muiTableToolbarAlertBannerProps;
1684
-
1685
- var _getState = getState(),
1686
- grouping = _getState.grouping,
1687
- showAlertBanner = _getState.showAlertBanner;
1688
-
1689
- var alertProps = muiTableToolbarAlertBannerProps instanceof Function ? muiTableToolbarAlertBannerProps({
1690
- table: table
1691
- }) : muiTableToolbarAlertBannerProps;
1692
- var selectMessage = getSelectedRowModel().rows.length > 0 ? (_localization$selecte = localization.selectedCountOfRowCountRowsSelected) == null ? void 0 : (_localization$selecte2 = _localization$selecte.replace('{selectedCount}', getSelectedRowModel().rows.length.toString())) == null ? void 0 : _localization$selecte2.replace('{rowCount}', getPrePaginationRowModel().rows.length.toString()) : null;
1693
- var groupedByMessage = grouping.length > 0 ? React.createElement("span", null, localization.groupedBy, ' ', grouping.map(function (columnId, index) {
1694
- return React.createElement(Fragment, {
1695
- key: index + "-" + columnId
1696
- }, index > 0 ? localization.thenBy : '', React.createElement(Chip, {
1697
- color: "secondary",
1698
- label: table.getColumn(columnId).columnDef.header,
1699
- onDelete: function onDelete() {
1700
- return table.getColumn(columnId).toggleGrouping();
1701
- }
1702
- }));
1703
- })) : null;
1704
- return React.createElement(Collapse, {
1705
- "in": showAlertBanner || !!selectMessage || !!groupedByMessage,
1706
- timeout: stackAlertBanner ? 200 : 0
1707
- }, React.createElement(Alert, Object.assign({
1708
- color: "info",
1709
- icon: false
1710
- }, alertProps, {
1711
- sx: function sx(theme) {
1712
- return _extends({
1713
- borderRadius: 0,
1714
- fontSize: '1rem',
1715
- left: 0,
1716
- p: 0,
1717
- position: 'relative',
1718
- right: 0,
1719
- top: 0,
1720
- width: '100%',
1721
- zIndex: 2
1722
- }, (alertProps == null ? void 0 : alertProps.sx) instanceof Function ? alertProps.sx(theme) : alertProps == null ? void 0 : alertProps.sx);
1723
- }
1724
- }), (alertProps == null ? void 0 : alertProps.title) && React.createElement(AlertTitle, null, alertProps.title), React.createElement(Box, {
1725
- sx: {
1726
- p: '0.5rem 1rem'
1727
- }
1728
- }, alertProps == null ? void 0 : alertProps.children, (alertProps == null ? void 0 : alertProps.children) && (selectMessage || groupedByMessage) && React.createElement("br", null), selectMessage, selectMessage && groupedByMessage && React.createElement("br", null), groupedByMessage)));
1729
- };
1730
-
1731
- var _excluded = ["table"];
1732
- var MRT_FullScreenToggleButton = function MRT_FullScreenToggleButton(_ref) {
1733
- var table = _ref.table,
1734
- rest = _objectWithoutPropertiesLoose(_ref, _excluded);
1735
-
1736
- var getState = table.getState,
1737
- _table$options = table.options,
1738
- _table$options$icons = _table$options.icons,
1739
- FullscreenExitIcon = _table$options$icons.FullscreenExitIcon,
1740
- FullscreenIcon = _table$options$icons.FullscreenIcon,
1741
- localization = _table$options.localization,
1742
- setIsFullScreen = table.setIsFullScreen;
1743
-
1744
- var _getState = getState(),
1745
- isFullScreen = _getState.isFullScreen;
1746
-
1747
- var handleToggleFullScreen = function handleToggleFullScreen() {
1748
- setIsFullScreen(!isFullScreen);
1749
- };
1750
-
1751
- return React.createElement(Tooltip, {
1752
- arrow: true,
1753
- title: localization.toggleFullScreen
1754
- }, React.createElement(IconButton, Object.assign({
1755
- "aria-label": localization.showHideFilters,
1756
- onClick: handleToggleFullScreen
1757
- }, rest), isFullScreen ? React.createElement(FullscreenExitIcon, null) : React.createElement(FullscreenIcon, null)));
1758
- };
1759
-
1760
- var _excluded$1 = ["table"];
1761
- var MRT_ShowHideColumnsButton = function MRT_ShowHideColumnsButton(_ref) {
1762
- var table = _ref.table,
1763
- rest = _objectWithoutPropertiesLoose(_ref, _excluded$1);
1764
-
1765
- var _table$options = table.options,
1766
- ViewColumnIcon = _table$options.icons.ViewColumnIcon,
1767
- localization = _table$options.localization;
1768
-
1769
- var _useState = useState(null),
1770
- anchorEl = _useState[0],
1771
- setAnchorEl = _useState[1];
1772
-
1773
- var handleClick = function handleClick(event) {
1774
- setAnchorEl(event.currentTarget);
1775
- };
1776
-
1777
- return React.createElement(React.Fragment, null, React.createElement(Tooltip, {
1778
- arrow: true,
1779
- title: localization.showHideColumns
1780
- }, React.createElement(IconButton, Object.assign({
1781
- "aria-label": localization.showHideColumns,
1782
- onClick: handleClick
1783
- }, rest), React.createElement(ViewColumnIcon, null))), React.createElement(MRT_ShowHideColumnsMenu, {
1784
- anchorEl: anchorEl,
1785
- setAnchorEl: setAnchorEl,
1786
- table: table
1787
- }));
1788
- };
1789
-
1790
- var _excluded$2 = ["table"];
1791
- var MRT_ToggleDensePaddingButton = function MRT_ToggleDensePaddingButton(_ref) {
1792
- var table = _ref.table,
1793
- rest = _objectWithoutPropertiesLoose(_ref, _excluded$2);
1794
-
1795
- var getState = table.getState,
1796
- _table$options = table.options,
1797
- _table$options$icons = _table$options.icons,
1798
- DensityLargeIcon = _table$options$icons.DensityLargeIcon,
1799
- DensityMediumIcon = _table$options$icons.DensityMediumIcon,
1800
- DensitySmallIcon = _table$options$icons.DensitySmallIcon,
1801
- localization = _table$options.localization,
1802
- setDensity = table.setDensity;
1803
-
1804
- var _getState = getState(),
1805
- density = _getState.density;
1806
-
1807
- var handleToggleDensePadding = function handleToggleDensePadding() {
1808
- var nextDensity = density === 'comfortable' ? 'compact' : density === 'compact' ? 'spacious' : 'comfortable';
1809
- setDensity(nextDensity);
1810
- };
1811
-
1812
- return React.createElement(Tooltip, {
1813
- arrow: true,
1814
- title: localization.toggleDensity
1815
- }, React.createElement(IconButton, Object.assign({
1816
- "aria-label": localization.toggleDensity,
1817
- onClick: handleToggleDensePadding
1818
- }, rest), density === 'compact' ? React.createElement(DensitySmallIcon, null) : density === 'comfortable' ? React.createElement(DensityMediumIcon, null) : React.createElement(DensityLargeIcon, null)));
1819
- };
1820
-
1821
- var _excluded$3 = ["table"];
1822
- var MRT_ToggleFiltersButton = function MRT_ToggleFiltersButton(_ref) {
1823
- var table = _ref.table,
1824
- rest = _objectWithoutPropertiesLoose(_ref, _excluded$3);
1825
-
1826
- var getState = table.getState,
1827
- _table$options = table.options,
1828
- _table$options$icons = _table$options.icons,
1829
- FilterListIcon = _table$options$icons.FilterListIcon,
1830
- FilterListOffIcon = _table$options$icons.FilterListOffIcon,
1831
- localization = _table$options.localization,
1832
- setShowFilters = table.setShowFilters;
1833
-
1834
- var _getState = getState(),
1835
- showColumnFilters = _getState.showColumnFilters;
1836
-
1837
- var handleToggleShowFilters = function handleToggleShowFilters() {
1838
- setShowFilters(!showColumnFilters);
1839
- };
1840
-
1841
- return React.createElement(Tooltip, {
1842
- arrow: true,
1843
- title: localization.showHideFilters
1844
- }, React.createElement(IconButton, Object.assign({
1845
- "aria-label": localization.showHideFilters,
1846
- onClick: handleToggleShowFilters
1847
- }, rest), showColumnFilters ? React.createElement(FilterListOffIcon, null) : React.createElement(FilterListIcon, null)));
1848
- };
1849
-
1850
- var _excluded$4 = ["table"];
1851
- var MRT_ToggleGlobalFilterButton = function MRT_ToggleGlobalFilterButton(_ref) {
1852
- var table = _ref.table,
1853
- rest = _objectWithoutPropertiesLoose(_ref, _excluded$4);
1854
-
1855
- var getState = table.getState,
1856
- _table$options = table.options,
1857
- _table$options$icons = _table$options.icons,
1858
- SearchIcon = _table$options$icons.SearchIcon,
1859
- SearchOffIcon = _table$options$icons.SearchOffIcon,
1860
- tableId = _table$options.tableId,
1861
- localization = _table$options.localization,
1862
- muiSearchTextFieldProps = _table$options.muiSearchTextFieldProps,
1863
- setShowGlobalFilter = table.setShowGlobalFilter;
1864
-
1865
- var _getState = getState(),
1866
- showGlobalFilter = _getState.showGlobalFilter;
1867
-
1868
- var textFieldProps = muiSearchTextFieldProps instanceof Function ? muiSearchTextFieldProps({
1869
- table: table
1870
- }) : muiSearchTextFieldProps;
1871
-
1872
- var handleToggleSearch = function handleToggleSearch() {
1873
- setShowGlobalFilter(!showGlobalFilter);
1874
- setTimeout(function () {
1875
- var _document$getElementB, _textFieldProps$id;
1876
-
1877
- return (_document$getElementB = document.getElementById((_textFieldProps$id = textFieldProps == null ? void 0 : textFieldProps.id) != null ? _textFieldProps$id : "mrt-" + tableId + "-search-text-field")) == null ? void 0 : _document$getElementB.focus();
1878
- }, 200);
1879
- };
1880
-
1881
- return React.createElement(Tooltip, {
1882
- arrow: true,
1883
- title: localization.showHideSearch
1884
- }, React.createElement(IconButton, Object.assign({
1885
- onClick: handleToggleSearch
1886
- }, rest), showGlobalFilter ? React.createElement(SearchOffIcon, null) : React.createElement(SearchIcon, null)));
1887
- };
1888
-
1889
- var MRT_ToolbarInternalButtons = function MRT_ToolbarInternalButtons(_ref) {
1890
- var _renderToolbarInterna;
1891
-
1892
- var table = _ref.table;
1893
- var _table$options = table.options,
1894
- enableColumnFilters = _table$options.enableColumnFilters,
1895
- enableColumnOrdering = _table$options.enableColumnOrdering,
1896
- enableDensityToggle = _table$options.enableDensityToggle,
1897
- enableFilters = _table$options.enableFilters,
1898
- enableFullScreenToggle = _table$options.enableFullScreenToggle,
1899
- enableGlobalFilter = _table$options.enableGlobalFilter,
1900
- enableHiding = _table$options.enableHiding,
1901
- enablePinning = _table$options.enablePinning,
1902
- positionGlobalFilter = _table$options.positionGlobalFilter,
1903
- renderToolbarInternalActions = _table$options.renderToolbarInternalActions;
1904
- return React.createElement(Box, {
1905
- sx: {
1906
- alignItems: 'center',
1907
- display: 'flex',
1908
- zIndex: 3
1909
- }
1910
- }, (_renderToolbarInterna = renderToolbarInternalActions == null ? void 0 : renderToolbarInternalActions({
1911
- MRT_FullScreenToggleButton: MRT_FullScreenToggleButton,
1912
- MRT_ShowHideColumnsButton: MRT_ShowHideColumnsButton,
1913
- MRT_ToggleDensePaddingButton: MRT_ToggleDensePaddingButton,
1914
- MRT_ToggleFiltersButton: MRT_ToggleFiltersButton,
1915
- MRT_ToggleGlobalFilterButton: MRT_ToggleGlobalFilterButton,
1916
- table: table
1917
- })) != null ? _renderToolbarInterna : React.createElement(React.Fragment, null, enableGlobalFilter && positionGlobalFilter === 'right' && React.createElement(MRT_GlobalFilterTextField, {
1918
- table: table
1919
- }), enableFilters && enableGlobalFilter && React.createElement(MRT_ToggleGlobalFilterButton, {
1920
- table: table
1921
- }), enableFilters && enableColumnFilters && React.createElement(MRT_ToggleFiltersButton, {
1922
- table: table
1923
- }), (enableHiding || enableColumnOrdering || enablePinning) && React.createElement(MRT_ShowHideColumnsButton, {
1924
- table: table
1925
- }), enableDensityToggle && React.createElement(MRT_ToggleDensePaddingButton, {
1926
- table: table
1927
- }), enableFullScreenToggle && React.createElement(MRT_FullScreenToggleButton, {
1928
- table: table
1929
- })));
1930
- };
1931
-
1932
- var MRT_ToolbarDropZone = function MRT_ToolbarDropZone(_ref) {
1933
- var _currentDraggingColum, _currentDraggingColum2;
1934
-
1935
- var table = _ref.table;
1936
- var getState = table.getState,
1937
- _table$options = table.options,
1938
- enableGrouping = _table$options.enableGrouping,
1939
- localization = _table$options.localization,
1940
- setCurrentHoveredColumn = table.setCurrentHoveredColumn;
1941
-
1942
- var _getState = getState(),
1943
- currentDraggingColumn = _getState.currentDraggingColumn,
1944
- currentHoveredColumn = _getState.currentHoveredColumn;
1945
-
1946
- var handleDragEnter = function handleDragEnter(_event) {
1947
- setCurrentHoveredColumn({
1948
- id: 'drop-zone'
1949
- });
1950
- };
1951
-
1952
- return React.createElement(Fade, {
1953
- unmountOnExit: true,
1954
- mountOnEnter: true,
1955
- "in": !!enableGrouping && !!currentDraggingColumn
1956
- }, React.createElement(Box, {
1957
- sx: function sx(theme) {
1958
- return {
1959
- alignItems: 'center',
1960
- backgroundColor: alpha(theme.palette.info.main, (currentHoveredColumn == null ? void 0 : currentHoveredColumn.id) === 'drop-zone' ? 0.2 : 0.1),
1961
- border: "dashed " + theme.palette.info.main + " 2px",
1962
- display: 'flex',
1963
- justifyContent: 'center',
1964
- height: 'calc(100% - 4px)',
1965
- position: 'absolute',
1966
- width: 'calc(100% - 4px)',
1967
- zIndex: 2
1968
- };
1969
- },
1970
- onDragEnter: handleDragEnter
1971
- }, React.createElement(Typography, null, localization.dropToGroupBy.replace('{column}', (_currentDraggingColum = currentDraggingColumn == null ? void 0 : (_currentDraggingColum2 = currentDraggingColumn.columnDef) == null ? void 0 : _currentDraggingColum2.header) != null ? _currentDraggingColum : ''))));
1972
- };
1973
-
1974
- var commonToolbarStyles = function commonToolbarStyles(_ref) {
1975
- var theme = _ref.theme;
1976
- return {
1977
- alignItems: 'flex-start',
1978
- backgroundColor: lighten(theme.palette.background["default"], 0.04),
1979
- backgroundImage: 'none',
1980
- display: 'grid',
1981
- minHeight: '3.5rem',
1982
- overflow: 'hidden',
1983
- p: '0 !important',
1984
- transition: 'all 0.2s ease-in-out',
1985
- zIndex: 1
1986
- };
1987
- };
1988
- var MRT_ToolbarTop = function MRT_ToolbarTop(_ref2) {
1989
- var _renderToolbarTopCust;
1990
-
1991
- var table = _ref2.table;
1992
- var getState = table.getState,
1993
- _table$options = table.options,
1994
- enableGlobalFilter = _table$options.enableGlobalFilter,
1995
- enablePagination = _table$options.enablePagination,
1996
- enableToolbarInternalActions = _table$options.enableToolbarInternalActions,
1997
- muiTableToolbarTopProps = _table$options.muiTableToolbarTopProps,
1998
- positionGlobalFilter = _table$options.positionGlobalFilter,
1999
- positionPagination = _table$options.positionPagination,
2000
- positionToolbarAlertBanner = _table$options.positionToolbarAlertBanner,
2001
- positionToolbarDropZone = _table$options.positionToolbarDropZone,
2002
- renderToolbarTopCustomActions = _table$options.renderToolbarTopCustomActions,
2003
- tableId = _table$options.tableId;
2004
-
2005
- var _getState = getState(),
2006
- isFullScreen = _getState.isFullScreen,
2007
- showGlobalFilter = _getState.showGlobalFilter;
2008
-
2009
- var isMobile = useMediaQuery('(max-width:720px)');
2010
- var toolbarProps = muiTableToolbarTopProps instanceof Function ? muiTableToolbarTopProps({
2011
- table: table
2012
- }) : muiTableToolbarTopProps;
2013
- var stackAlertBanner = isMobile || !!renderToolbarTopCustomActions || showGlobalFilter;
2014
- return React.createElement(Toolbar, Object.assign({
2015
- id: "mrt-" + tableId + "-toolbar-top",
2016
- variant: "dense"
2017
- }, toolbarProps, {
2018
- sx: function sx(theme) {
2019
- return _extends({
2020
- position: isFullScreen ? 'sticky' : undefined,
2021
- top: isFullScreen ? '0' : undefined
2022
- }, commonToolbarStyles({
2023
- theme: theme
2024
- }), (toolbarProps == null ? void 0 : toolbarProps.sx) instanceof Function ? toolbarProps.sx(theme) : toolbarProps == null ? void 0 : toolbarProps.sx);
2025
- }
2026
- }), positionToolbarAlertBanner === 'top' && React.createElement(MRT_ToolbarAlertBanner, {
2027
- stackAlertBanner: stackAlertBanner,
2028
- table: table
2029
- }), ['both', 'top'].includes(positionToolbarDropZone != null ? positionToolbarDropZone : '') && React.createElement(MRT_ToolbarDropZone, {
2030
- table: table
2031
- }), React.createElement(Box, {
2032
- sx: {
2033
- alignItems: 'flex-start',
2034
- boxSizing: 'border-box',
2035
- display: 'flex',
2036
- justifyContent: 'space-between',
2037
- p: '0.5rem',
2038
- position: stackAlertBanner ? 'relative' : 'absolute',
2039
- right: 0,
2040
- top: 0,
2041
- width: '100%'
2042
- }
2043
- }, enableGlobalFilter && positionGlobalFilter === 'left' && React.createElement(MRT_GlobalFilterTextField, {
2044
- table: table
2045
- }), (_renderToolbarTopCust = renderToolbarTopCustomActions == null ? void 0 : renderToolbarTopCustomActions({
2046
- table: table
2047
- })) != null ? _renderToolbarTopCust : React.createElement("span", null), enableToolbarInternalActions ? React.createElement(MRT_ToolbarInternalButtons, {
2048
- table: table
2049
- }) : enableGlobalFilter && positionGlobalFilter === 'right' && React.createElement(MRT_GlobalFilterTextField, {
2050
- table: table
2051
- })), enablePagination && ['top', 'both'].includes(positionPagination != null ? positionPagination : '') && React.createElement(MRT_TablePagination, {
2052
- table: table,
2053
- position: "top"
2054
- }), React.createElement(MRT_LinearProgressBar, {
2055
- isTopToolbar: true,
2056
- table: table
2057
- }));
2058
- };
2059
-
2060
- var MRT_ToolbarBottom = function MRT_ToolbarBottom(_ref) {
2061
- var table = _ref.table;
2062
- var getState = table.getState,
2063
- _table$options = table.options,
2064
- enablePagination = _table$options.enablePagination,
2065
- muiTableToolbarBottomProps = _table$options.muiTableToolbarBottomProps,
2066
- positionPagination = _table$options.positionPagination,
2067
- positionToolbarAlertBanner = _table$options.positionToolbarAlertBanner,
2068
- positionToolbarDropZone = _table$options.positionToolbarDropZone,
2069
- renderToolbarBottomCustomActions = _table$options.renderToolbarBottomCustomActions,
2070
- tableId = _table$options.tableId;
2071
-
2072
- var _getState = getState(),
2073
- isFullScreen = _getState.isFullScreen;
2074
-
2075
- var isMobile = useMediaQuery('(max-width:720px)');
2076
- var toolbarProps = muiTableToolbarBottomProps instanceof Function ? muiTableToolbarBottomProps({
2077
- table: table
2078
- }) : muiTableToolbarBottomProps;
2079
- var stackAlertBanner = isMobile || !!renderToolbarBottomCustomActions;
2080
- return React.createElement(Toolbar, Object.assign({
2081
- id: "mrt-" + tableId + "-toolbar-bottom",
2082
- variant: "dense"
2083
- }, toolbarProps, {
2084
- sx: function sx(theme) {
2085
- return _extends({}, commonToolbarStyles({
2086
- theme: theme
2087
- }), {
2088
- bottom: isFullScreen ? '0' : undefined,
2089
- boxShadow: "-3px 0 6px " + alpha(theme.palette.common.black, 0.1),
2090
- left: 0,
2091
- position: isFullScreen ? 'fixed' : 'relative',
2092
- right: 0
2093
- }, (toolbarProps == null ? void 0 : toolbarProps.sx) instanceof Function ? toolbarProps.sx(theme) : toolbarProps == null ? void 0 : toolbarProps.sx);
2094
- }
2095
- }), React.createElement(MRT_LinearProgressBar, {
2096
- isTopToolbar: false,
2097
- table: table
2098
- }), positionToolbarAlertBanner === 'bottom' && React.createElement(MRT_ToolbarAlertBanner, {
2099
- table: table
2100
- }), ['both', 'bottom'].includes(positionToolbarDropZone != null ? positionToolbarDropZone : '') && React.createElement(MRT_ToolbarDropZone, {
2101
- table: table
2102
- }), React.createElement(Box, {
2103
- sx: {
2104
- display: 'flex',
2105
- justifyContent: 'space-between',
2106
- width: '100%'
2107
- }
2108
- }, renderToolbarBottomCustomActions ? React.createElement(Box, {
2109
- sx: {
2110
- p: '0.5rem'
2111
- }
2112
- }, renderToolbarBottomCustomActions({
2113
- table: table
2114
- })) : React.createElement("span", null), React.createElement(Box, {
2115
- sx: {
2116
- display: 'flex',
2117
- justifyContent: 'flex-end',
2118
- position: stackAlertBanner ? 'relative' : 'absolute',
2119
- right: 0,
2120
- top: 0
2121
- }
2122
- }, enablePagination && ['bottom', 'both'].includes(positionPagination != null ? positionPagination : '') && React.createElement(MRT_TablePagination, {
2123
- table: table,
2124
- position: "bottom"
2125
- }))));
2126
- };
2127
-
2128
- var MRT_TableHeadCellColumnActionsButton = function MRT_TableHeadCellColumnActionsButton(_ref) {
2129
- var header = _ref.header,
2130
- table = _ref.table;
2131
- var _table$options = table.options,
2132
- MoreVertIcon = _table$options.icons.MoreVertIcon,
2133
- localization = _table$options.localization,
2134
- muiTableHeadCellColumnActionsButtonProps = _table$options.muiTableHeadCellColumnActionsButtonProps;
2135
- var column = header.column;
2136
- var columnDef = column.columnDef;
2137
-
2138
- var _useState = useState(null),
2139
- anchorEl = _useState[0],
2140
- setAnchorEl = _useState[1];
2141
-
2142
- var handleClick = function handleClick(event) {
2143
- event.stopPropagation();
2144
- event.preventDefault();
2145
- setAnchorEl(event.currentTarget);
2146
- };
2147
-
2148
- var mTableHeadCellColumnActionsButtonProps = muiTableHeadCellColumnActionsButtonProps instanceof Function ? muiTableHeadCellColumnActionsButtonProps({
2149
- column: column,
2150
- table: table
2151
- }) : muiTableHeadCellColumnActionsButtonProps;
2152
- var mcTableHeadCellColumnActionsButtonProps = columnDef.muiTableHeadCellColumnActionsButtonProps instanceof Function ? columnDef.muiTableHeadCellColumnActionsButtonProps({
2153
- column: column,
2154
- table: table
2155
- }) : columnDef.muiTableHeadCellColumnActionsButtonProps;
2156
-
2157
- var iconButtonProps = _extends({}, mTableHeadCellColumnActionsButtonProps, mcTableHeadCellColumnActionsButtonProps);
2158
-
2159
- return React.createElement(React.Fragment, null, React.createElement(Tooltip, {
2160
- arrow: true,
2161
- enterDelay: 1000,
2162
- enterNextDelay: 1000,
2163
- placement: "top",
2164
- title: localization.columnActions
2165
- }, React.createElement(IconButton, Object.assign({
2166
- "aria-label": localization.columnActions,
2167
- onClick: handleClick,
2168
- size: "small"
2169
- }, iconButtonProps, {
2170
- sx: function sx(theme) {
2171
- return _extends({
2172
- height: '2rem',
2173
- mt: '-0.2rem',
2174
- opacity: 0.5,
2175
- transition: 'opacity 0.2s',
2176
- width: '2rem',
2177
- '&:hover': {
2178
- opacity: 1
2179
- }
2180
- }, (iconButtonProps == null ? void 0 : iconButtonProps.sx) instanceof Function ? iconButtonProps.sx(theme) : iconButtonProps == null ? void 0 : iconButtonProps.sx);
2181
- }
2182
- }), React.createElement(MoreVertIcon, null))), React.createElement(MRT_ColumnActionMenu, {
2183
- anchorEl: anchorEl,
2184
- header: header,
2185
- setAnchorEl: setAnchorEl,
2186
- table: table
2187
- }));
2188
- };
2189
-
2190
- var MRT_FilterTextField = function MRT_FilterTextField(_ref) {
2191
- var _currentFilterOption$, _localization$filterB, _columnDef$columnFilt, _currentFilterOption$2, _localization$clearFi, _columnDef$filterSele;
2192
-
2193
- var header = _ref.header,
2194
- rangeFilterIndex = _ref.rangeFilterIndex,
2195
- table = _ref.table;
2196
- var getState = table.getState,
2197
- _table$options = table.options,
2198
- enableColumnFilterChangeMode = _table$options.enableColumnFilterChangeMode,
2199
- columnFilterModeOptions = _table$options.columnFilterModeOptions,
2200
- _table$options$icons = _table$options.icons,
2201
- FilterListIcon = _table$options$icons.FilterListIcon,
2202
- CloseIcon = _table$options$icons.CloseIcon,
2203
- localization = _table$options.localization,
2204
- muiTableHeadCellFilterTextFieldProps = _table$options.muiTableHeadCellFilterTextFieldProps,
2205
- tableId = _table$options.tableId,
2206
- setCurrentFilterFns = table.setCurrentFilterFns;
2207
- var column = header.column;
2208
- var columnDef = column.columnDef;
2209
-
2210
- var _getState = getState(),
2211
- currentFilterFns = _getState.currentFilterFns;
2212
-
2213
- var mTableHeadCellFilterTextFieldProps = muiTableHeadCellFilterTextFieldProps instanceof Function ? muiTableHeadCellFilterTextFieldProps({
2214
- column: column,
2215
- table: table,
2216
- rangeFilterIndex: rangeFilterIndex
2217
- }) : muiTableHeadCellFilterTextFieldProps;
2218
- var mcTableHeadCellFilterTextFieldProps = columnDef.muiTableHeadCellFilterTextFieldProps instanceof Function ? columnDef.muiTableHeadCellFilterTextFieldProps({
2219
- column: column,
2220
- table: table,
2221
- rangeFilterIndex: rangeFilterIndex
2222
- }) : columnDef.muiTableHeadCellFilterTextFieldProps;
2223
-
2224
- var textFieldProps = _extends({}, mTableHeadCellFilterTextFieldProps, mcTableHeadCellFilterTextFieldProps);
2225
-
2226
- var isRangeFilter = columnDef.filterVariant === 'range' || rangeFilterIndex !== undefined;
2227
- var isSelectFilter = columnDef.filterVariant === 'select';
2228
- var isMultiSelectFilter = columnDef.filterVariant === 'multi-select';
2229
- var isTextboxFilter = columnDef.filterVariant === 'text' || !isSelectFilter && !isMultiSelectFilter;
2230
- var currentFilterOption = currentFilterFns == null ? void 0 : currentFilterFns[header.id];
2231
- var filterId = "mrt-" + tableId + "-" + header.id + "-filter-text-field" + (rangeFilterIndex != null ? rangeFilterIndex : '');
2232
- var filterChipLabel = ['empty', 'notEmpty'].includes(currentFilterOption) ? //@ts-ignore
2233
- localization["filter" + ((currentFilterOption == null ? void 0 : currentFilterOption.charAt == null ? void 0 : (_currentFilterOption$ = currentFilterOption.charAt(0)) == null ? void 0 : _currentFilterOption$.toUpperCase()) + (currentFilterOption == null ? void 0 : currentFilterOption.slice(1)))] : '';
2234
- var filterPlaceholder = !isRangeFilter ? (_localization$filterB = localization.filterByColumn) == null ? void 0 : _localization$filterB.replace('{column}', String(columnDef.header)) : rangeFilterIndex === 0 ? localization.min : rangeFilterIndex === 1 ? localization.max : '';
2235
- var allowedColumnFilterOptions = (_columnDef$columnFilt = columnDef == null ? void 0 : columnDef.columnFilterModeOptions) != null ? _columnDef$columnFilt : columnFilterModeOptions;
2236
- var showChangeModeButton = enableColumnFilterChangeMode && columnDef.enableColumnFilterChangeMode !== false && !rangeFilterIndex && (allowedColumnFilterOptions === undefined || !!(allowedColumnFilterOptions != null && allowedColumnFilterOptions.length));
2237
-
2238
- var _useState = useState(null),
2239
- anchorEl = _useState[0],
2240
- setAnchorEl = _useState[1];
2241
-
2242
- var _useState2 = useState(function () {
2243
- var _column$getFilterValu, _column$getFilterValu2;
2244
-
2245
- return isMultiSelectFilter ? column.getFilterValue() || [] : isRangeFilter ? ((_column$getFilterValu = column.getFilterValue()) == null ? void 0 : _column$getFilterValu[rangeFilterIndex]) || [] : (_column$getFilterValu2 = column.getFilterValue()) != null ? _column$getFilterValu2 : '';
2246
- }),
2247
- filterValue = _useState2[0],
2248
- setFilterValue = _useState2[1];
2249
-
2250
- var handleChangeDebounced = useCallback(debounce(function (event) {
2251
- var value = textFieldProps.type === 'date' ? new Date(event.target.value) : event.target.value;
2252
-
2253
- if (isRangeFilter) {
2254
- column.setFilterValue(function (old) {
2255
- var newFilterValues = old != null ? old : ['', ''];
2256
- newFilterValues[rangeFilterIndex] = value;
2257
- return newFilterValues;
2258
- });
2259
- } else {
2260
- column.setFilterValue(value != null ? value : undefined);
2261
- }
2262
- }, isTextboxFilter ? 200 : 1), []);
2263
-
2264
- var handleChange = function handleChange(event) {
2265
- setFilterValue(event.target.value);
2266
- handleChangeDebounced(event);
2267
- };
2268
-
2269
- var handleClear = function handleClear() {
2270
- if (isMultiSelectFilter) {
2271
- setFilterValue([]);
2272
- column.setFilterValue([]);
2273
- } else if (isRangeFilter) {
2274
- setFilterValue('');
2275
- column.setFilterValue(function (old) {
2276
- var newFilterValues = old != null ? old : ['', ''];
2277
- newFilterValues[rangeFilterIndex] = undefined;
2278
- return newFilterValues;
2279
- });
2280
- } else {
2281
- setFilterValue('');
2282
- column.setFilterValue(undefined);
2283
- }
2284
- };
2285
-
2286
- var handleClearEmptyFilterChip = function handleClearEmptyFilterChip() {
2287
- setFilterValue('');
2288
- column.setFilterValue(undefined);
2289
- setCurrentFilterFns(function (prev) {
2290
- var _extends2;
2291
-
2292
- return _extends({}, prev, (_extends2 = {}, _extends2[header.id] = 'fuzzy', _extends2));
2293
- });
2294
- };
2295
-
2296
- var handleFilterMenuOpen = function handleFilterMenuOpen(event) {
2297
- setAnchorEl(event.currentTarget);
2298
- };
2299
-
2300
- if (columnDef.Filter) {
2301
- return React.createElement(React.Fragment, null, columnDef.Filter == null ? void 0 : columnDef.Filter({
2302
- header: header,
2303
- table: table
2304
- }));
2305
- }
2306
-
2307
- return React.createElement(React.Fragment, null, React.createElement(TextField, Object.assign({
2308
- fullWidth: true,
2309
- id: filterId,
2310
- inputProps: {
2311
- disabled: !!filterChipLabel,
2312
- sx: {
2313
- textOverflow: 'ellipsis',
2314
- width: filterChipLabel ? 0 : undefined
2315
- },
2316
- title: filterPlaceholder
2317
- },
2318
- helperText: showChangeModeButton ? React.createElement("label", {
2319
- htmlFor: filterId
2320
- }, localization.filterMode.replace('{filterType}', // @ts-ignore
2321
- localization["filter" + ((currentFilterOption == null ? void 0 : (_currentFilterOption$2 = currentFilterOption.charAt(0)) == null ? void 0 : _currentFilterOption$2.toUpperCase()) + (currentFilterOption == null ? void 0 : currentFilterOption.slice(1)))])) : null,
2322
- FormHelperTextProps: {
2323
- sx: {
2324
- fontSize: '0.6rem',
2325
- lineHeight: '0.8rem',
2326
- whiteSpace: 'nowrap'
2327
- }
2328
- },
2329
- margin: "none",
2330
- placeholder: filterChipLabel || isSelectFilter || isMultiSelectFilter ? undefined : filterPlaceholder,
2331
- onChange: handleChange,
2332
- onClick: function onClick(e) {
2333
- return e.stopPropagation();
2334
- },
2335
- select: isSelectFilter || isMultiSelectFilter,
2336
- value: filterValue,
2337
- variant: "standard",
2338
- InputProps: {
2339
- startAdornment: showChangeModeButton ? React.createElement(InputAdornment, {
2340
- position: "start"
2341
- }, React.createElement(Tooltip, {
2342
- arrow: true,
2343
- title: localization.changeFilterMode
2344
- }, React.createElement("span", null, React.createElement(IconButton, {
2345
- "aria-label": localization.changeFilterMode,
2346
- onClick: handleFilterMenuOpen,
2347
- size: "small",
2348
- sx: {
2349
- height: '1.75rem',
2350
- width: '1.75rem'
2351
- }
2352
- }, React.createElement(FilterListIcon, null)))), filterChipLabel && React.createElement(Chip, {
2353
- onDelete: handleClearEmptyFilterChip,
2354
- label: filterChipLabel
2355
- })) : React.createElement(FilterListIcon, {
2356
- style: {
2357
- marginRight: '4px'
2358
- }
2359
- }),
2360
- endAdornment: !filterChipLabel && React.createElement(InputAdornment, {
2361
- position: "end"
2362
- }, React.createElement(Tooltip, {
2363
- arrow: true,
2364
- placement: "right",
2365
- title: (_localization$clearFi = localization.clearFilter) != null ? _localization$clearFi : ''
2366
- }, React.createElement("span", null, React.createElement(IconButton, {
2367
- "aria-label": localization.clearFilter,
2368
- disabled: !(filterValue != null && filterValue.length),
2369
- onClick: handleClear,
2370
- size: "small",
2371
- sx: {
2372
- height: '1.75rem',
2373
- width: '1.75rem'
2374
- }
2375
- }, React.createElement(CloseIcon, null)))))
2376
- },
2377
- SelectProps: {
2378
- displayEmpty: true,
2379
- multiple: isMultiSelectFilter,
2380
- renderValue: isMultiSelectFilter ? function (selected) {
2381
- return !(selected != null && selected.length) ? React.createElement(Box, {
2382
- sx: {
2383
- opacity: 0.5
2384
- }
2385
- }, filterPlaceholder) : React.createElement(Box, {
2386
- sx: {
2387
- display: 'flex',
2388
- flexWrap: 'wrap',
2389
- gap: '2px'
2390
- }
2391
- }, selected == null ? void 0 : selected.map(function (value) {
2392
- return React.createElement(Chip, {
2393
- key: value,
2394
- label: value
2395
- });
2396
- }));
2397
- } : undefined
2398
- }
2399
- }, textFieldProps, {
2400
- sx: function sx(theme) {
2401
- return _extends({
2402
- p: 0,
2403
- minWidth: !filterChipLabel ? '6rem' : 'auto',
2404
- width: '100%',
2405
- '& .MuiSelect-icon': {
2406
- mr: '1.5rem'
2407
- }
2408
- }, (textFieldProps == null ? void 0 : textFieldProps.sx) instanceof Function ? textFieldProps.sx(theme) : textFieldProps == null ? void 0 : textFieldProps.sx);
2409
- }
2410
- }), (isSelectFilter || isMultiSelectFilter) && React.createElement(MenuItem, {
2411
- divider: true,
2412
- disabled: true,
2413
- hidden: true,
2414
- value: ""
2415
- }, React.createElement(Box, {
2416
- sx: {
2417
- opacity: 0.5
2418
- }
2419
- }, filterPlaceholder)), columnDef == null ? void 0 : (_columnDef$filterSele = columnDef.filterSelectOptions) == null ? void 0 : _columnDef$filterSele.map(function (option) {
2420
- var _column$getFilterValu3;
2421
-
2422
- var value;
2423
- var text;
2424
-
2425
- if (typeof option !== 'object') {
2426
- value = option;
2427
- text = option;
2428
- } else {
2429
- value = option.value;
2430
- text = option.text;
2431
- }
2432
-
2433
- return React.createElement(MenuItem, {
2434
- key: value,
2435
- value: value
2436
- }, isMultiSelectFilter && React.createElement(Checkbox, {
2437
- checked: ((_column$getFilterValu3 = column.getFilterValue()) != null ? _column$getFilterValu3 : []).includes(value),
2438
- sx: {
2439
- mr: '0.5rem'
2440
- }
2441
- }), React.createElement(ListItemText, null, text));
2442
- })), React.createElement(MRT_FilterOptionMenu, {
2443
- anchorEl: anchorEl,
2444
- header: header,
2445
- setAnchorEl: setAnchorEl,
2446
- table: table
2447
- }));
2448
- };
2449
-
2450
- var MRT_FilterRangeFields = function MRT_FilterRangeFields(_ref) {
2451
- var header = _ref.header,
2452
- table = _ref.table;
2453
- return React.createElement(Box, {
2454
- sx: {
2455
- display: 'grid',
2456
- gridTemplateColumns: '6fr 6fr',
2457
- gap: '1rem'
2458
- }
2459
- }, React.createElement(MRT_FilterTextField, {
2460
- header: header,
2461
- rangeFilterIndex: 0,
2462
- table: table
2463
- }), React.createElement(MRT_FilterTextField, {
2464
- header: header,
2465
- rangeFilterIndex: 1,
2466
- table: table
2467
- }));
2468
- };
2469
-
2470
- var MRT_TableHeadCellFilterContainer = function MRT_TableHeadCellFilterContainer(_ref) {
2471
- var header = _ref.header,
2472
- table = _ref.table;
2473
- var getState = table.getState;
2474
-
2475
- var _getState = getState(),
2476
- currentFilterFns = _getState.currentFilterFns,
2477
- showColumnFilters = _getState.showColumnFilters;
2478
-
2479
- var column = header.column;
2480
- return React.createElement(Collapse, {
2481
- "in": showColumnFilters,
2482
- mountOnEnter: true,
2483
- unmountOnExit: true
2484
- }, ['between', 'betweenInclusive', 'inNumberRange'].includes(currentFilterFns[column.id]) ? React.createElement(MRT_FilterRangeFields, {
2485
- header: header,
2486
- table: table
2487
- }) : React.createElement(MRT_FilterTextField, {
2488
- header: header,
2489
- table: table
2490
- }));
2491
- };
2492
-
2493
- var MRT_TableHeadCellFilterLabel = function MRT_TableHeadCellFilterLabel(_ref) {
2494
- var _currentFilterOption$, _column$getFilterValu, _column$getFilterValu2;
2495
-
2496
- var header = _ref.header,
2497
- table = _ref.table;
2498
- var getState = table.getState,
2499
- _table$options = table.options,
2500
- FilterAltIcon = _table$options.icons.FilterAltIcon,
2501
- localization = _table$options.localization;
2502
-
2503
- var _getState = getState(),
2504
- currentFilterFns = _getState.currentFilterFns;
2505
-
2506
- var column = header.column;
2507
- var columnDef = column.columnDef;
2508
- var isRangeFilter = ['between', 'betweenInclusive', 'inNumberRange'].includes(columnDef._filterFn);
2509
- var currentFilterOption = currentFilterFns == null ? void 0 : currentFilterFns[header.id];
2510
- var filterTooltip = localization.filteringByColumn.replace('{column}', String(columnDef.header)).replace('{filterType}', // @ts-ignore
2511
- localization["filter" + ((currentFilterOption == null ? void 0 : (_currentFilterOption$ = currentFilterOption.charAt(0)) == null ? void 0 : _currentFilterOption$.toUpperCase()) + (currentFilterOption == null ? void 0 : currentFilterOption.slice(1)))]).replace('{filterValue}', "\"" + (Array.isArray(column.getFilterValue()) ? column.getFilterValue().join("\" " + (isRangeFilter ? localization.and : localization.or) + " \"") : column.getFilterValue()) + "\"").replace('" "', '');
2512
- return React.createElement(Grow, {
2513
- unmountOnExit: true,
2514
- "in": !!column.getFilterValue() && isRangeFilter || !isRangeFilter && ( // @ts-ignore
2515
- !!((_column$getFilterValu = column.getFilterValue()) != null && _column$getFilterValu[0]) || !!((_column$getFilterValu2 = column.getFilterValue()) != null && _column$getFilterValu2[1]))
2516
- }, React.createElement("span", null, React.createElement(Tooltip, {
2517
- arrow: true,
2518
- placement: "top",
2519
- title: filterTooltip
2520
- }, React.createElement(IconButton, {
2521
- disableRipple: true,
2522
- onClick: function onClick(event) {
2523
- event.stopPropagation();
2524
- },
2525
- size: "small",
2526
- sx: {
2527
- m: 0,
2528
- opacity: 0.8,
2529
- p: '2px',
2530
- transform: 'scale(0.66)',
2531
- width: '1.5ch'
2532
- }
2533
- }, React.createElement(FilterAltIcon, null)))));
2534
- };
2535
-
2536
- var MRT_TableHeadCellGrabHandle = function MRT_TableHeadCellGrabHandle(_ref) {
2537
- var column = _ref.column,
2538
- table = _ref.table,
2539
- tableHeadCellRef = _ref.tableHeadCellRef;
2540
- var getState = table.getState,
2541
- _table$options = table.options,
2542
- enableColumnOrdering = _table$options.enableColumnOrdering,
2543
- muiTableHeadCellDragHandleProps = _table$options.muiTableHeadCellDragHandleProps,
2544
- onColumnDrop = _table$options.onColumnDrop,
2545
- setColumnOrder = table.setColumnOrder,
2546
- setCurrentDraggingColumn = table.setCurrentDraggingColumn,
2547
- setCurrentHoveredColumn = table.setCurrentHoveredColumn;
2548
- var columnDef = column.columnDef;
2549
-
2550
- var _getState = getState(),
2551
- currentHoveredColumn = _getState.currentHoveredColumn,
2552
- currentDraggingColumn = _getState.currentDraggingColumn,
2553
- columnOrder = _getState.columnOrder;
2554
-
2555
- var mIconButtonProps = muiTableHeadCellDragHandleProps instanceof Function ? muiTableHeadCellDragHandleProps({
2556
- column: column,
2557
- table: table
2558
- }) : muiTableHeadCellDragHandleProps;
2559
- var mcIconButtonProps = columnDef.muiTableHeadCellDragHandleProps instanceof Function ? columnDef.muiTableHeadCellDragHandleProps({
2560
- column: column,
2561
- table: table
2562
- }) : columnDef.muiTableHeadCellDragHandleProps;
2563
-
2564
- var iconButtonProps = _extends({}, mIconButtonProps, mcIconButtonProps);
2565
-
2566
- var handleDragStart = function handleDragStart(e) {
2567
- setCurrentDraggingColumn(column);
2568
- e.dataTransfer.setDragImage(tableHeadCellRef.current, 0, 0);
2569
- };
2570
-
2571
- var handleDragEnd = function handleDragEnd(event) {
2572
- onColumnDrop == null ? void 0 : onColumnDrop({
2573
- event: event,
2574
- draggedColumn: column,
2575
- targetColumn: currentHoveredColumn
2576
- });
2577
-
2578
- if ((currentHoveredColumn == null ? void 0 : currentHoveredColumn.id) === 'drop-zone') {
2579
- column.toggleGrouping();
2580
- } else if (enableColumnOrdering && currentHoveredColumn && (currentHoveredColumn == null ? void 0 : currentHoveredColumn.id) !== (currentDraggingColumn == null ? void 0 : currentDraggingColumn.id)) {
2581
- setColumnOrder(reorderColumn(column, currentHoveredColumn, columnOrder));
2582
- }
2583
-
2584
- setCurrentDraggingColumn(null);
2585
- setCurrentHoveredColumn(null);
2586
- };
2587
-
2588
- return React.createElement(MRT_GrabHandleButton, {
2589
- iconButtonProps: iconButtonProps,
2590
- onDragStart: handleDragStart,
2591
- onDragEnd: handleDragEnd,
2592
- table: table
2593
- });
2594
- };
2595
-
2596
- var MRT_TableHeadCellResizeHandle = function MRT_TableHeadCellResizeHandle(_ref) {
2597
- var _getState$columnSizin;
2598
-
2599
- var header = _ref.header,
2600
- table = _ref.table;
2601
- var getState = table.getState,
2602
- columnResizeMode = table.options.columnResizeMode;
2603
-
2604
- var _getState = getState(),
2605
- density = _getState.density,
2606
- showColumnFilters = _getState.showColumnFilters;
2607
-
2608
- var column = header.column;
2609
- var columnDef = column.columnDef;
2610
- var columnDefType = columnDef.columnDefType;
2611
- return React.createElement(Divider, {
2612
- flexItem: true,
2613
- orientation: "vertical",
2614
- onDoubleClick: function onDoubleClick() {
2615
- return column.resetSize();
2616
- },
2617
- sx: function sx(theme) {
2618
- return {
2619
- borderRadius: '2px',
2620
- borderRightWidth: '2px',
2621
- cursor: 'col-resize',
2622
- height: showColumnFilters && columnDefType === 'data' ? '4rem' : '2rem',
2623
- mr: density === 'compact' ? '-0.5rem' : '-1rem',
2624
- opacity: 0.8,
2625
- position: 'absolute',
2626
- right: '1px',
2627
- touchAction: 'none',
2628
- transition: column.getIsResizing() ? undefined : 'all 0.2s ease-in-out',
2629
- userSelect: 'none',
2630
- zIndex: 4,
2631
- '&:active': {
2632
- backgroundColor: theme.palette.info.main,
2633
- opacity: 1
2634
- }
2635
- };
2636
- },
2637
- onMouseDown: header.getResizeHandler(),
2638
- onTouchStart: header.getResizeHandler(),
2639
- style: {
2640
- transform: column.getIsResizing() ? "translateX(" + ((_getState$columnSizin = getState().columnSizingInfo.deltaOffset) != null ? _getState$columnSizin : 0) / (columnResizeMode === 'onChange' ? 16 : 1) + "px)" : 'none'
2641
- }
2642
- });
2643
- };
2644
-
2645
- var MRT_TableHeadCellSortLabel = function MRT_TableHeadCellSortLabel(_ref) {
2646
- var header = _ref.header,
2647
- table = _ref.table;
2648
- var localization = table.options.localization;
2649
- var column = header.column;
2650
- var columnDef = column.columnDef;
2651
- var sortTooltip = !!column.getIsSorted() ? column.getIsSorted() === 'desc' ? localization.sortedByColumnDesc.replace('{column}', columnDef.header) : localization.sortedByColumnAsc.replace('{column}', columnDef.header) : localization.unsorted;
2652
- return React.createElement(Tooltip, {
2653
- arrow: true,
2654
- placement: "top",
2655
- title: sortTooltip
2656
- }, React.createElement(TableSortLabel, {
2657
- "aria-label": sortTooltip,
2658
- active: !!column.getIsSorted(),
2659
- direction: column.getIsSorted() ? column.getIsSorted() : undefined,
2660
- sx: {
2661
- width: '2ch',
2662
- transform: 'translateX(-0.5ch)'
2663
- }
2664
- }));
2665
- };
2666
-
2667
- var MRT_TableHeadCell = function MRT_TableHeadCell(_ref) {
2668
- var _ref2, _columnDef$header$len, _columnDef$header;
2669
-
2670
- var header = _ref.header,
2671
- table = _ref.table;
2672
- var theme = useTheme();
2673
- var getState = table.getState,
2674
- _table$options = table.options,
2675
- enableColumnActions = _table$options.enableColumnActions,
2676
- enableColumnDragging = _table$options.enableColumnDragging,
2677
- enableColumnOrdering = _table$options.enableColumnOrdering,
2678
- enableColumnResizing = _table$options.enableColumnResizing,
2679
- enableGrouping = _table$options.enableGrouping,
2680
- enableMultiSort = _table$options.enableMultiSort,
2681
- muiTableHeadCellProps = _table$options.muiTableHeadCellProps,
2682
- setCurrentHoveredColumn = table.setCurrentHoveredColumn;
2683
-
2684
- var _getState = getState(),
2685
- density = _getState.density,
2686
- currentDraggingColumn = _getState.currentDraggingColumn,
2687
- currentHoveredColumn = _getState.currentHoveredColumn,
2688
- showColumnFilters = _getState.showColumnFilters;
2689
-
2690
- var column = header.column;
2691
- var columnDef = column.columnDef;
2692
- var columnDefType = columnDef.columnDefType;
2693
- var mTableHeadCellProps = muiTableHeadCellProps instanceof Function ? muiTableHeadCellProps({
2694
- column: column,
2695
- table: table
2696
- }) : muiTableHeadCellProps;
2697
- var mcTableHeadCellProps = columnDef.muiTableHeadCellProps instanceof Function ? columnDef.muiTableHeadCellProps({
2698
- column: column,
2699
- table: table
2700
- }) : columnDef.muiTableHeadCellProps;
2701
-
2702
- var tableCellProps = _extends({}, mTableHeadCellProps, mcTableHeadCellProps);
2703
-
2704
- var getIsLastLeftPinnedColumn = function getIsLastLeftPinnedColumn() {
2705
- return column.getIsPinned() === 'left' && table.getLeftLeafHeaders().length - 1 === column.getPinnedIndex();
2706
- };
2707
-
2708
- var getIsFirstRightPinnedColumn = function getIsFirstRightPinnedColumn() {
2709
- return column.getIsPinned() === 'right' && column.getPinnedIndex() === 0;
2710
- };
2711
-
2712
- var getTotalRight = function getTotalRight() {
2713
- return (table.getRightLeafHeaders().length - 1 - column.getPinnedIndex()) * 150;
2714
- };
2715
-
2716
- var handleDragEnter = function handleDragEnter(_e) {
2717
- if (enableGrouping && (currentHoveredColumn == null ? void 0 : currentHoveredColumn.id) === 'drop-zone') {
2718
- setCurrentHoveredColumn(null);
2719
- }
2720
-
2721
- if (enableColumnOrdering && currentDraggingColumn) {
2722
- setCurrentHoveredColumn(columnDef.enableColumnOrdering !== false ? column : null);
2723
- }
2724
- };
2725
-
2726
- var draggingBorder = (currentDraggingColumn == null ? void 0 : currentDraggingColumn.id) === column.id ? "1px dashed " + theme.palette.divider : (currentHoveredColumn == null ? void 0 : currentHoveredColumn.id) === column.id ? "2px dashed " + theme.palette.primary.main : undefined;
2727
- var draggingBorders = draggingBorder ? {
2728
- borderLeft: draggingBorder,
2729
- borderRight: draggingBorder,
2730
- borderTop: draggingBorder
2731
- } : undefined;
2732
- var headerElement = (_ref2 = (columnDef == null ? void 0 : columnDef.Header) instanceof Function ? columnDef == null ? void 0 : columnDef.Header == null ? void 0 : columnDef.Header({
2733
- header: header,
2734
- table: table
2735
- }) : columnDef == null ? void 0 : columnDef.Header) != null ? _ref2 : columnDef.header;
2736
- var tableHeadCellRef = React.useRef(null);
2737
- return React.createElement(TableCell, Object.assign({
2738
- align: columnDefType === 'group' ? 'center' : 'left',
2739
- colSpan: header.colSpan,
2740
- onDragEnter: handleDragEnter,
2741
- ref: tableHeadCellRef
2742
- }, tableCellProps, {
2743
- sx: function sx(theme) {
2744
- var _columnDef$minSize;
2745
-
2746
- return _extends({
2747
- backgroundColor: column.getIsPinned() && columnDefType !== 'group' ? alpha(lighten(theme.palette.background["default"], 0.04), 0.95) : 'inherit',
2748
- backgroundImage: 'inherit',
2749
- boxShadow: getIsLastLeftPinnedColumn() ? "4px 0 4px -2px " + alpha(theme.palette.common.black, 0.1) : getIsFirstRightPinnedColumn() ? "-4px 0 4px -2px " + alpha(theme.palette.common.black, 0.1) : undefined,
2750
- fontWeight: 'bold',
2751
- left: column.getIsPinned() === 'left' ? column.getStart('left') + "px" : undefined,
2752
- overflow: 'visible',
2753
- opacity: (currentDraggingColumn == null ? void 0 : currentDraggingColumn.id) === column.id || (currentHoveredColumn == null ? void 0 : currentHoveredColumn.id) === column.id ? 0.5 : 1,
2754
- p: density === 'compact' ? '0.5rem' : density === 'comfortable' ? columnDefType === 'display' ? '0.75rem' : '1rem' : columnDefType === 'display' ? '1rem 1.25rem' : '1.5rem',
2755
- pb: columnDefType === 'display' ? 0 : showColumnFilters || density === 'compact' ? '0.4rem' : '0.6rem',
2756
- position: column.getIsPinned() && columnDefType !== 'group' ? 'sticky' : undefined,
2757
- pt: columnDefType === 'group' ? 0 : density === 'compact' ? '0.25' : density === 'comfortable' ? '.75rem' : '1.25rem',
2758
- right: column.getIsPinned() === 'right' ? getTotalRight() + "px" : undefined,
2759
- transition: "all " + (enableColumnResizing ? 0 : '0.2s') + " ease-in-out",
2760
- userSelect: enableMultiSort && column.getCanSort() ? 'none' : undefined,
2761
- verticalAlign: 'top',
2762
- zIndex: column.getIsResizing() || (currentDraggingColumn == null ? void 0 : currentDraggingColumn.id) === column.id ? 3 : column.getIsPinned() && columnDefType !== 'group' ? 2 : 1
2763
- }, (tableCellProps == null ? void 0 : tableCellProps.sx) instanceof Function ? tableCellProps.sx(theme) : tableCellProps == null ? void 0 : tableCellProps.sx, draggingBorders, {
2764
- maxWidth: "min(" + column.getSize() + "px, fit-content)",
2765
- minWidth: "max(" + column.getSize() + "px, " + ((_columnDef$minSize = columnDef.minSize) != null ? _columnDef$minSize : 30) + "px)",
2766
- width: header.getSize()
2767
- });
2768
- }
2769
- }), header.isPlaceholder ? null : React.createElement(Box, {
2770
- sx: {
2771
- alignItems: 'flex-start',
2772
- display: 'flex',
2773
- justifyContent: (tableCellProps == null ? void 0 : tableCellProps.align) === 'right' ? 'flex-end' : columnDefType === 'group' || (tableCellProps == null ? void 0 : tableCellProps.align) === 'center' ? 'center' : 'space-between',
2774
- position: 'relative',
2775
- width: '100%'
2776
- }
2777
- }, React.createElement(Box, {
2778
- onClick: column.getToggleSortingHandler(),
2779
- sx: {
2780
- alignItems: 'center',
2781
- cursor: column.getCanSort() && columnDefType !== 'group' ? 'pointer' : undefined,
2782
- display: 'flex',
2783
- flexWrap: 'nowrap',
2784
- m: (tableCellProps == null ? void 0 : tableCellProps.align) === 'center' ? 'auto' : undefined,
2785
- pl: (tableCellProps == null ? void 0 : tableCellProps.align) === 'center' && column.getCanSort() ? '1rem' : undefined,
2786
- whiteSpace: ((_columnDef$header$len = (_columnDef$header = columnDef.header) == null ? void 0 : _columnDef$header.length) != null ? _columnDef$header$len : 0) < 24 ? 'nowrap' : 'normal'
2787
- }
2788
- }, headerElement, column.getCanSort() && React.createElement(MRT_TableHeadCellSortLabel, {
2789
- header: header,
2790
- table: table
2791
- }), column.getCanFilter() && React.createElement(MRT_TableHeadCellFilterLabel, {
2792
- header: header,
2793
- table: table
2794
- })), columnDefType !== 'group' && React.createElement(Box, {
2795
- sx: {
2796
- whiteSpace: 'nowrap'
2797
- }
2798
- }, (enableColumnDragging && columnDef.enableColumnDragging !== false || enableColumnOrdering && columnDef.enableColumnOrdering !== false || enableGrouping && columnDef.enableGrouping !== false) && React.createElement(MRT_TableHeadCellGrabHandle, {
2799
- column: column,
2800
- table: table,
2801
- tableHeadCellRef: tableHeadCellRef
2802
- }), (enableColumnActions || columnDef.enableColumnActions) && columnDef.enableColumnActions !== false && React.createElement(MRT_TableHeadCellColumnActionsButton, {
2803
- header: header,
2804
- table: table
2805
- })), column.getCanResize() && React.createElement(MRT_TableHeadCellResizeHandle, {
2806
- header: header,
2807
- table: table
2808
- })), column.getCanFilter() && React.createElement(MRT_TableHeadCellFilterContainer, {
2809
- header: header,
2810
- table: table
2811
- }));
2812
- };
2813
-
2814
- var MRT_TableHeadRow = function MRT_TableHeadRow(_ref) {
2815
- var headerGroup = _ref.headerGroup,
2816
- table = _ref.table;
2817
- var muiTableHeadRowProps = table.options.muiTableHeadRowProps;
2818
- var tableRowProps = muiTableHeadRowProps instanceof Function ? muiTableHeadRowProps({
2819
- headerGroup: headerGroup,
2820
- table: table
2821
- }) : muiTableHeadRowProps;
2822
- return React.createElement(TableRow, Object.assign({}, tableRowProps, {
2823
- sx: function sx(theme) {
2824
- return _extends({
2825
- boxShadow: "4px 0 8px " + alpha(theme.palette.common.black, 0.1),
2826
- backgroundColor: lighten(theme.palette.background["default"], 0.04)
2827
- }, tableRowProps == null ? void 0 : tableRowProps.sx);
2828
- }
2829
- }), headerGroup.headers.map(function (header, index) {
2830
- return React.createElement(MRT_TableHeadCell, {
2831
- header: header,
2832
- key: header.id || index,
2833
- table: table
2834
- });
2835
- }));
2836
- };
2837
-
2838
- var MRT_TableHead = function MRT_TableHead(_ref) {
2839
- var table = _ref.table;
2840
- var getHeaderGroups = table.getHeaderGroups,
2841
- muiTableHeadProps = table.options.muiTableHeadProps;
2842
- var tableHeadProps = muiTableHeadProps instanceof Function ? muiTableHeadProps({
2843
- table: table
2844
- }) : muiTableHeadProps;
2845
- return React.createElement(TableHead, Object.assign({}, tableHeadProps), getHeaderGroups().map(function (headerGroup) {
2846
- return React.createElement(MRT_TableHeadRow, {
2847
- headerGroup: headerGroup,
2848
- key: headerGroup.id,
2849
- table: table
2850
- });
2851
- }));
2852
- };
2853
-
2854
- var MRT_EditCellTextField = function MRT_EditCellTextField(_ref) {
2855
- var cell = _ref.cell,
2856
- table = _ref.table;
2857
- var getState = table.getState,
2858
- _table$options = table.options,
2859
- tableId = _table$options.tableId,
2860
- enableEditing = _table$options.enableEditing,
2861
- muiTableBodyCellEditTextFieldProps = _table$options.muiTableBodyCellEditTextFieldProps,
2862
- onCellEditBlur = _table$options.onCellEditBlur,
2863
- onCellEditChange = _table$options.onCellEditChange,
2864
- setCurrentEditingCell = table.setCurrentEditingCell,
2865
- setCurrentEditingRow = table.setCurrentEditingRow;
2866
- var column = cell.column,
2867
- row = cell.row;
2868
- var columnDef = column.columnDef;
2869
-
2870
- var _useState = useState(cell.getValue()),
2871
- value = _useState[0],
2872
- setValue = _useState[1];
2873
-
2874
- var handleChange = function handleChange(event) {
2875
- setValue(event.target.value);
2876
- columnDef.onCellEditChange == null ? void 0 : columnDef.onCellEditChange({
2877
- event: event,
2878
- cell: cell,
2879
- table: table
2880
- });
2881
- onCellEditChange == null ? void 0 : onCellEditChange({
2882
- event: event,
2883
- cell: cell,
2884
- table: table
2885
- });
2886
- };
2887
-
2888
- var handleBlur = function handleBlur(event) {
2889
- if (getState().currentEditingRow) {
2890
- if (!row._valuesCache) row._valuesCache = {};
2891
- row._valuesCache[column.id] = value;
2892
- setCurrentEditingRow(_extends({}, getState().currentEditingRow));
2893
- }
2894
-
2895
- setCurrentEditingCell(null);
2896
- columnDef.onCellEditBlur == null ? void 0 : columnDef.onCellEditBlur({
2897
- event: event,
2898
- cell: cell,
2899
- table: table
2900
- });
2901
- onCellEditBlur == null ? void 0 : onCellEditBlur({
2902
- event: event,
2903
- cell: cell,
2904
- table: table
2905
- });
2906
- };
2907
-
2908
- var mTableBodyCellEditTextFieldProps = muiTableBodyCellEditTextFieldProps instanceof Function ? muiTableBodyCellEditTextFieldProps({
2909
- cell: cell,
2910
- table: table
2911
- }) : muiTableBodyCellEditTextFieldProps;
2912
- var mcTableBodyCellEditTextFieldProps = columnDef.muiTableBodyCellEditTextFieldProps instanceof Function ? columnDef.muiTableBodyCellEditTextFieldProps({
2913
- cell: cell,
2914
- table: table
2915
- }) : columnDef.muiTableBodyCellEditTextFieldProps;
2916
-
2917
- var textFieldProps = _extends({}, mTableBodyCellEditTextFieldProps, mcTableBodyCellEditTextFieldProps);
2918
-
2919
- if (enableEditing && columnDef.enableEditing !== false && columnDef.Edit) {
2920
- return React.createElement(React.Fragment, null, columnDef.Edit == null ? void 0 : columnDef.Edit({
2921
- cell: cell,
2922
- table: table
2923
- }));
2924
- }
2925
-
2926
- return React.createElement(TextField, Object.assign({
2927
- id: "mrt-" + tableId + "-edit-cell-text-field-" + cell.id,
2928
- margin: "dense",
2929
- onBlur: handleBlur,
2930
- onChange: handleChange,
2931
- onClick: function onClick(e) {
2932
- return e.stopPropagation();
2933
- },
2934
- placeholder: columnDef.header,
2935
- value: value,
2936
- variant: "standard"
2937
- }, textFieldProps));
2938
- };
2939
-
2940
- var MRT_CopyButton = function MRT_CopyButton(_ref) {
2941
- var cell = _ref.cell,
2942
- children = _ref.children,
2943
- table = _ref.table;
2944
- var _table$options = table.options,
2945
- localization = _table$options.localization,
2946
- muiTableBodyCellCopyButtonProps = _table$options.muiTableBodyCellCopyButtonProps;
2947
- var column = cell.column;
2948
- var columnDef = column.columnDef;
2949
-
2950
- var _useState = useState(false),
2951
- copied = _useState[0],
2952
- setCopied = _useState[1];
2953
-
2954
- var handleCopy = function handleCopy(text) {
2955
- navigator.clipboard.writeText(text);
2956
- setCopied(true);
2957
- setTimeout(function () {
2958
- return setCopied(false);
2959
- }, 4000);
2960
- };
2961
-
2962
- var mTableBodyCellCopyButtonProps = muiTableBodyCellCopyButtonProps instanceof Function ? muiTableBodyCellCopyButtonProps({
2963
- cell: cell,
2964
- table: table
2965
- }) : muiTableBodyCellCopyButtonProps;
2966
- var mcTableBodyCellCopyButtonProps = columnDef.muiTableBodyCellCopyButtonProps instanceof Function ? columnDef.muiTableBodyCellCopyButtonProps({
2967
- cell: cell,
2968
- table: table
2969
- }) : columnDef.muiTableBodyCellCopyButtonProps;
2970
-
2971
- var buttonProps = _extends({}, mTableBodyCellCopyButtonProps, mcTableBodyCellCopyButtonProps);
2972
-
2973
- return React.createElement(Tooltip, {
2974
- arrow: true,
2975
- enterDelay: 1000,
2976
- enterNextDelay: 1000,
2977
- placement: "top",
2978
- title: copied ? localization.copiedToClipboard : localization.clickToCopy
2979
- }, React.createElement(Button, Object.assign({
2980
- onClick: function onClick() {
2981
- return handleCopy(cell.getValue());
2982
- },
2983
- size: "small",
2984
- type: "button",
2985
- variant: "text"
2986
- }, buttonProps, {
2987
- sx: function sx(theme) {
2988
- return _extends({
2989
- backgroundColor: 'transparent',
2990
- border: 'none',
2991
- color: 'inherit',
2992
- cursor: 'copy',
2993
- fontFamily: 'inherit',
2994
- fontSize: 'inherit',
2995
- letterSpacing: 'inherit',
2996
- m: '-0.25rem',
2997
- minWidth: 'unset',
2998
- textAlign: 'inherit',
2999
- textTransform: 'inherit'
3000
- }, (buttonProps == null ? void 0 : buttonProps.sx) instanceof Function ? buttonProps.sx(theme) : buttonProps == null ? void 0 : buttonProps.sx);
3001
- }
3002
- }), children));
3003
- };
3004
-
3005
- var MRT_TableBodyRowGrabHandle = function MRT_TableBodyRowGrabHandle(_ref) {
3006
- var cell = _ref.cell,
3007
- rowRef = _ref.rowRef,
3008
- table = _ref.table;
3009
- var _table$options = table.options,
3010
- muiTableBodyRowDragHandleProps = _table$options.muiTableBodyRowDragHandleProps,
3011
- onRowDrop = _table$options.onRowDrop;
3012
- var iconButtonProps = muiTableBodyRowDragHandleProps instanceof Function ? muiTableBodyRowDragHandleProps({
3013
- row: cell.row,
3014
- table: table
3015
- }) : muiTableBodyRowDragHandleProps;
3016
-
3017
- var handleDragStart = function handleDragStart(e) {
3018
- e.dataTransfer.setDragImage(rowRef.current, 0, 0);
3019
- table.setCurrentDraggingRow(cell.row);
3020
- };
3021
-
3022
- var handleDragEnd = function handleDragEnd(event) {
3023
- onRowDrop == null ? void 0 : onRowDrop({
3024
- event: event,
3025
- draggedRow: table.getState().currentDraggingRow,
3026
- targetRow: table.getState().currentHoveredRow
3027
- });
3028
- table.setCurrentDraggingRow(null);
3029
- table.setCurrentHoveredRow(null);
3030
- };
3031
-
3032
- return React.createElement(MRT_GrabHandleButton, {
3033
- iconButtonProps: iconButtonProps,
3034
- onDragStart: handleDragStart,
3035
- onDragEnd: handleDragEnd,
3036
- table: table
3037
- });
3038
- };
3039
-
3040
- var MRT_TableBodyCell = function MRT_TableBodyCell(_ref) {
3041
- var _columnDef$Cell, _row$subRows, _columnDef$Cell2, _row$subRows$length, _row$subRows2;
3042
-
3043
- var cell = _ref.cell,
3044
- enableHover = _ref.enableHover,
3045
- rowIndex = _ref.rowIndex,
3046
- rowRef = _ref.rowRef,
3047
- table = _ref.table;
3048
- var theme = useTheme();
3049
- var getState = table.getState,
3050
- _table$options = table.options,
3051
- editingMode = _table$options.editingMode,
3052
- enableClickToCopy = _table$options.enableClickToCopy,
3053
- enableColumnOrdering = _table$options.enableColumnOrdering,
3054
- enableEditing = _table$options.enableEditing,
3055
- enableGrouping = _table$options.enableGrouping,
3056
- enablePagination = _table$options.enablePagination,
3057
- enableRowNumbers = _table$options.enableRowNumbers,
3058
- muiTableBodyCellProps = _table$options.muiTableBodyCellProps,
3059
- muiTableBodyCellSkeletonProps = _table$options.muiTableBodyCellSkeletonProps,
3060
- rowNumberMode = _table$options.rowNumberMode,
3061
- tableId = _table$options.tableId,
3062
- setCurrentEditingCell = table.setCurrentEditingCell,
3063
- setCurrentHoveredColumn = table.setCurrentHoveredColumn;
3064
-
3065
- var _getState = getState(),
3066
- currentDraggingColumn = _getState.currentDraggingColumn,
3067
- currentEditingCell = _getState.currentEditingCell,
3068
- currentEditingRow = _getState.currentEditingRow,
3069
- currentHoveredColumn = _getState.currentHoveredColumn,
3070
- density = _getState.density,
3071
- isLoading = _getState.isLoading,
3072
- showSkeletons = _getState.showSkeletons;
3073
-
3074
- var column = cell.column,
3075
- row = cell.row;
3076
- var columnDef = column.columnDef;
3077
- var columnDefType = columnDef.columnDefType;
3078
- var mTableCellBodyProps = muiTableBodyCellProps instanceof Function ? muiTableBodyCellProps({
3079
- cell: cell,
3080
- table: table
3081
- }) : muiTableBodyCellProps;
3082
- var mcTableCellBodyProps = columnDef.muiTableBodyCellProps instanceof Function ? columnDef.muiTableBodyCellProps({
3083
- cell: cell,
3084
- table: table
3085
- }) : columnDef.muiTableBodyCellProps;
3086
-
3087
- var tableCellProps = _extends({}, mTableCellBodyProps, mcTableCellBodyProps);
3088
-
3089
- var skeletonWidth = useMemo(function () {
3090
- return columnDefType === 'display' ? column.getSize() / 2 : Math.random() * (column.getSize() - column.getSize() / 3) + column.getSize() / 3;
3091
- }, []);
3092
- var isEditable = (enableEditing || columnDef.enableEditing) && columnDef.enableEditing !== false;
3093
- var isEditing = isEditable && (editingMode === 'table' || (currentEditingRow == null ? void 0 : currentEditingRow.id) === row.id || (currentEditingCell == null ? void 0 : currentEditingCell.id) === cell.id);
3094
-
3095
- var handleDoubleClick = function handleDoubleClick(_event) {
3096
- if ((enableEditing || columnDef.enableEditing) && columnDef.enableEditing !== false && editingMode === 'cell') {
3097
- setCurrentEditingCell(cell);
3098
- setTimeout(function () {
3099
- var textField = document.getElementById("mrt-" + tableId + "-edit-cell-text-field-" + cell.id);
3100
-
3101
- if (textField) {
3102
- textField.focus();
3103
- textField.select();
3104
- }
3105
- }, 200);
3106
- }
3107
- };
3108
-
3109
- var getIsLastLeftPinnedColumn = function getIsLastLeftPinnedColumn() {
3110
- return column.getIsPinned() === 'left' && table.getLeftLeafHeaders().length - 1 === column.getPinnedIndex();
3111
- };
3112
-
3113
- var getIsFirstRightPinnedColumn = function getIsFirstRightPinnedColumn() {
3114
- return column.getIsPinned() === 'right' && column.getPinnedIndex() === 0;
3115
- };
3116
-
3117
- var getTotalRight = function getTotalRight() {
3118
- return (table.getRightLeafHeaders().length - 1 - column.getPinnedIndex()) * 150;
3119
- };
3120
-
3121
- var handleDragEnter = function handleDragEnter(_e) {
3122
- if (enableGrouping && (currentHoveredColumn == null ? void 0 : currentHoveredColumn.id) === 'drop-zone') {
3123
- setCurrentHoveredColumn(null);
3124
- }
3125
-
3126
- if (enableColumnOrdering && currentDraggingColumn) {
3127
- setCurrentHoveredColumn(columnDef.enableColumnOrdering !== false ? column : null);
3128
- }
3129
- };
3130
-
3131
- var draggingBorder = (currentDraggingColumn == null ? void 0 : currentDraggingColumn.id) === column.id ? "1px dashed " + theme.palette.divider : (currentHoveredColumn == null ? void 0 : currentHoveredColumn.id) === column.id ? "2px dashed " + theme.palette.primary.main : undefined;
3132
- var draggingBorders = draggingBorder ? {
3133
- borderLeft: draggingBorder,
3134
- borderRight: draggingBorder,
3135
- borderBottom: row.index === (enablePagination ? table.getRowModel() : table.getPrePaginationRowModel()).rows.length - 1 ? draggingBorder : undefined
3136
- } : undefined;
3137
- return React.createElement(TableCell, Object.assign({
3138
- onDoubleClick: handleDoubleClick,
3139
- onDragEnter: handleDragEnter
3140
- }, tableCellProps, {
3141
- sx: function sx(theme) {
3142
- var _columnDef$minSize;
3143
-
3144
- return _extends({
3145
- backgroundColor: column.getIsPinned() ? alpha(lighten(theme.palette.background["default"], 0.04), 0.95) : undefined,
3146
- boxShadow: getIsLastLeftPinnedColumn() ? "4px 0 4px -2px " + alpha(theme.palette.common.black, 0.1) : getIsFirstRightPinnedColumn() ? "-4px 0 4px -2px " + alpha(theme.palette.common.black, 0.1) : undefined,
3147
- cursor: isEditable && editingMode === 'cell' ? 'pointer' : 'text',
3148
- left: column.getIsPinned() === 'left' ? column.getStart('left') + "px" : undefined,
3149
- opacity: (currentDraggingColumn == null ? void 0 : currentDraggingColumn.id) === column.id || (currentHoveredColumn == null ? void 0 : currentHoveredColumn.id) === column.id ? 0.5 : 1,
3150
- overflow: 'hidden',
3151
- p: density === 'compact' ? columnDefType === 'display' ? '0 0.5rem' : '0.5rem' : density === 'comfortable' ? columnDefType === 'display' ? '0.5rem 0.75rem' : '1rem' : columnDefType === 'display' ? '1rem 1.25rem' : '1.5rem',
3152
- pl: column.id === 'mrt-row-expand' ? row.depth + (density === 'compact' ? 0.5 : density === 'comfortable' ? 0.75 : 1.25) + "rem" : undefined,
3153
- position: column.getIsPinned() ? 'sticky' : 'relative',
3154
- right: column.getIsPinned() === 'right' ? getTotalRight() + "px" : undefined,
3155
- textOverflow: columnDefType !== 'display' ? 'ellipsis' : undefined,
3156
- transition: 'all 0.2s ease-in-out',
3157
- whiteSpace: density === 'compact' ? 'nowrap' : 'normal',
3158
- zIndex: (currentDraggingColumn == null ? void 0 : currentDraggingColumn.id) === column.id ? 2 : column.getIsPinned() ? 1 : undefined,
3159
- '&:hover': {
3160
- backgroundColor: enableHover && enableEditing && editingMode !== 'row' ? theme.palette.mode === 'dark' ? lighten(theme.palette.background["default"], 0.13) + " !important" : darken(theme.palette.background["default"], 0.07) + " !important" : undefined
3161
- }
3162
- }, (tableCellProps == null ? void 0 : tableCellProps.sx) instanceof Function ? tableCellProps.sx(theme) : tableCellProps == null ? void 0 : tableCellProps.sx, draggingBorders, {
3163
- maxWidth: "min(" + column.getSize() + "px, fit-content)",
3164
- minWidth: "max(" + column.getSize() + "px, " + ((_columnDef$minSize = columnDef.minSize) != null ? _columnDef$minSize : 30) + "px)",
3165
- width: column.getSize()
3166
- });
3167
- }
3168
- }), React.createElement(React.Fragment, null, cell.getIsPlaceholder() ? null : isLoading || showSkeletons ? React.createElement(Skeleton, Object.assign({
3169
- animation: "wave",
3170
- height: 20,
3171
- width: skeletonWidth
3172
- }, muiTableBodyCellSkeletonProps)) : enableRowNumbers && rowNumberMode === 'static' && column.id === 'mrt-row-numbers' ? rowIndex + 1 : column.id === 'mrt-row-drag' ? React.createElement(MRT_TableBodyRowGrabHandle, {
3173
- cell: cell,
3174
- rowRef: rowRef,
3175
- table: table
3176
- }) : columnDefType === 'display' ? columnDef.Cell == null ? void 0 : columnDef.Cell({
3177
- cell: cell,
3178
- table: table
3179
- }) : isEditing ? React.createElement(MRT_EditCellTextField, {
3180
- cell: cell,
3181
- table: table
3182
- }) : (enableClickToCopy || columnDef.enableClickToCopy) && columnDef.enableClickToCopy !== false ? React.createElement(React.Fragment, null, React.createElement(MRT_CopyButton, {
3183
- cell: cell,
3184
- table: table
3185
- }, React.createElement(React.Fragment, null, (_columnDef$Cell = columnDef == null ? void 0 : columnDef.Cell == null ? void 0 : columnDef.Cell({
3186
- cell: cell,
3187
- table: table
3188
- })) != null ? _columnDef$Cell : cell.renderValue())), cell.getIsGrouped() && React.createElement(React.Fragment, null, " (", (_row$subRows = row.subRows) == null ? void 0 : _row$subRows.length, ")")) : React.createElement(React.Fragment, null, (_columnDef$Cell2 = columnDef == null ? void 0 : columnDef.Cell == null ? void 0 : columnDef.Cell({
3189
- cell: cell,
3190
- table: table
3191
- })) != null ? _columnDef$Cell2 : cell.renderValue(), cell.getIsGrouped() && React.createElement(React.Fragment, null, " (", (_row$subRows$length = (_row$subRows2 = row.subRows) == null ? void 0 : _row$subRows2.length) != null ? _row$subRows$length : '', ")"))));
3192
- };
3193
-
3194
- var MRT_TableDetailPanel = function MRT_TableDetailPanel(_ref) {
3195
- var row = _ref.row,
3196
- table = _ref.table;
3197
- var getVisibleLeafColumns = table.getVisibleLeafColumns,
3198
- _table$options = table.options,
3199
- muiTableBodyRowProps = _table$options.muiTableBodyRowProps,
3200
- muiTableDetailPanelProps = _table$options.muiTableDetailPanelProps,
3201
- renderDetailPanel = _table$options.renderDetailPanel;
3202
- var tableRowProps = muiTableBodyRowProps instanceof Function ? muiTableBodyRowProps({
3203
- row: row,
3204
- table: table
3205
- }) : muiTableBodyRowProps;
3206
- var tableCellProps = muiTableDetailPanelProps instanceof Function ? muiTableDetailPanelProps({
3207
- row: row,
3208
- table: table
3209
- }) : muiTableDetailPanelProps;
3210
- return React.createElement(TableRow, Object.assign({}, tableRowProps), React.createElement(TableCell, Object.assign({
3211
- colSpan: getVisibleLeafColumns().length
3212
- }, tableCellProps, {
3213
- sx: function sx(theme) {
3214
- return _extends({
3215
- borderBottom: !row.getIsExpanded() ? 'none' : undefined,
3216
- pb: row.getIsExpanded() ? '1rem' : 0,
3217
- pt: row.getIsExpanded() ? '1rem' : 0,
3218
- transition: 'all 0.2s ease-in-out',
3219
- width: table.getTotalSize() + "px"
3220
- }, (tableCellProps == null ? void 0 : tableCellProps.sx) instanceof Function ? tableCellProps.sx(theme) : tableCellProps == null ? void 0 : tableCellProps.sx);
3221
- }
3222
- }), renderDetailPanel && React.createElement(Collapse, {
3223
- "in": row.getIsExpanded()
3224
- }, renderDetailPanel({
3225
- row: row,
3226
- table: table
3227
- }))));
3228
- };
3229
-
3230
- var MRT_TableBodyRow = function MRT_TableBodyRow(_ref) {
3231
- var _row$getVisibleCells;
3232
-
3233
- var row = _ref.row,
3234
- rowIndex = _ref.rowIndex,
3235
- table = _ref.table;
3236
- var theme = useTheme();
3237
- var getIsSomeColumnsPinned = table.getIsSomeColumnsPinned,
3238
- getState = table.getState,
3239
- _table$options = table.options,
3240
- enableRowOrdering = _table$options.enableRowOrdering,
3241
- muiTableBodyRowProps = _table$options.muiTableBodyRowProps,
3242
- renderDetailPanel = _table$options.renderDetailPanel,
3243
- setCurrentHoveredRow = table.setCurrentHoveredRow;
3244
-
3245
- var _getState = getState(),
3246
- currentDraggingRow = _getState.currentDraggingRow,
3247
- currentHoveredRow = _getState.currentHoveredRow;
3248
-
3249
- var tableRowProps = muiTableBodyRowProps instanceof Function ? muiTableBodyRowProps({
3250
- row: row,
3251
- table: table
3252
- }) : muiTableBodyRowProps;
3253
-
3254
- var handleDragEnter = function handleDragEnter(_e) {
3255
- if (enableRowOrdering && currentDraggingRow) {
3256
- setCurrentHoveredRow(row);
3257
- }
3258
- };
3259
-
3260
- var rowRef = useRef(null);
3261
- var draggingBorder = (currentDraggingRow == null ? void 0 : currentDraggingRow.id) === row.id ? "1px dashed " + theme.palette.divider : (currentHoveredRow == null ? void 0 : currentHoveredRow.id) === row.id ? "2px dashed " + theme.palette.primary.main : undefined;
3262
- var draggingBorders = draggingBorder ? {
3263
- border: draggingBorder
3264
- } : undefined;
3265
- return React.createElement(React.Fragment, null, React.createElement(TableRow, Object.assign({
3266
- onDragEnter: handleDragEnter,
3267
- hover: true,
3268
- selected: row.getIsSelected(),
3269
- ref: rowRef
3270
- }, tableRowProps, {
3271
- sx: function sx(theme) {
3272
- return _extends({
3273
- backgroundColor: lighten(theme.palette.background["default"], 0.06),
3274
- opacity: (currentDraggingRow == null ? void 0 : currentDraggingRow.id) === row.id || (currentHoveredRow == null ? void 0 : currentHoveredRow.id) === row.id ? 0.5 : 1,
3275
- transition: 'all 0.2s ease-in-out',
3276
- '&:hover td': {
3277
- backgroundColor: (tableRowProps == null ? void 0 : tableRowProps.hover) !== false && getIsSomeColumnsPinned() ? theme.palette.mode === 'dark' ? "" + lighten(theme.palette.background["default"], 0.12) : "" + darken(theme.palette.background["default"], 0.05) : undefined
3278
- }
3279
- }, (tableRowProps == null ? void 0 : tableRowProps.sx) instanceof Function ? tableRowProps.sx(theme) : tableRowProps == null ? void 0 : tableRowProps.sx, draggingBorders);
3280
- }
3281
- }), row == null ? void 0 : (_row$getVisibleCells = row.getVisibleCells()) == null ? void 0 : _row$getVisibleCells.map == null ? void 0 : _row$getVisibleCells.map(function (cell) {
3282
- return React.createElement(MRT_TableBodyCell, {
3283
- cell: cell,
3284
- key: cell.id,
3285
- enableHover: (tableRowProps == null ? void 0 : tableRowProps.hover) !== false,
3286
- rowIndex: rowIndex,
3287
- rowRef: rowRef,
3288
- table: table
3289
- });
3290
- })), renderDetailPanel && !row.getIsGrouped() && React.createElement(MRT_TableDetailPanel, {
3291
- row: row,
3292
- table: table
3293
- }));
3294
- };
3295
-
3296
- var MRT_TableBody = function MRT_TableBody(_ref) {
3297
- var table = _ref.table,
3298
- tableContainerRef = _ref.tableContainerRef;
3299
- var getRowModel = table.getRowModel,
3300
- getPrePaginationRowModel = table.getPrePaginationRowModel,
3301
- getState = table.getState,
3302
- _table$options = table.options,
3303
- enableGlobalFilterRankedResults = _table$options.enableGlobalFilterRankedResults,
3304
- enablePagination = _table$options.enablePagination,
3305
- enableRowVirtualization = _table$options.enableRowVirtualization,
3306
- muiTableBodyProps = _table$options.muiTableBodyProps,
3307
- virtualizerProps = _table$options.virtualizerProps;
3308
-
3309
- var _getState = getState(),
3310
- density = _getState.density,
3311
- globalFilter = _getState.globalFilter,
3312
- pagination = _getState.pagination,
3313
- sorting = _getState.sorting;
3314
-
3315
- var tableBodyProps = muiTableBodyProps instanceof Function ? muiTableBodyProps({
3316
- table: table
3317
- }) : muiTableBodyProps;
3318
-
3319
- var getIsSomeColumnsSorted = function getIsSomeColumnsSorted() {
3320
- return Object.values(sorting).some(Boolean);
3321
- };
3322
-
3323
- var rows = useMemo(function () {
3324
- if (enableGlobalFilterRankedResults && globalFilter && !getIsSomeColumnsSorted()) {
3325
- var rankedRows = getPrePaginationRowModel().rows.sort(function (a, b) {
3326
- return rankGlobalFuzzy(a, b);
3327
- });
3328
-
3329
- if (enablePagination) {
3330
- return rankedRows.slice(0, pagination.pageSize);
3331
- }
3332
-
3333
- return rankedRows;
3334
- }
3335
-
3336
- return enablePagination ? getRowModel().rows : getPrePaginationRowModel().rows;
3337
- }, [enableGlobalFilterRankedResults, enableGlobalFilterRankedResults && globalFilter || !enablePagination ? getPrePaginationRowModel().rows : getRowModel().rows, globalFilter]);
3338
- var rowVirtualizer = enableRowVirtualization ? useVirtualizer(_extends({
3339
- estimateSize: function estimateSize() {
3340
- return density === 'compact' ? 25 : 50;
3341
- },
3342
- overscan: density === 'compact' ? 30 : 10,
3343
- getScrollElement: function getScrollElement() {
3344
- return tableContainerRef.current;
3345
- },
3346
- count: rows.length
3347
- }, virtualizerProps)) : {};
3348
- var virtualRows = enableRowVirtualization ? rowVirtualizer.getVirtualItems() : [];
3349
- var paddingTop = 0;
3350
- var paddingBottom = 0;
3351
-
3352
- if (enableRowVirtualization) {
3353
- paddingTop = !!virtualRows.length ? virtualRows[0].start : 0;
3354
- paddingBottom = !!virtualRows.length ? rowVirtualizer.getTotalSize() - virtualRows[virtualRows.length - 1].end : 0;
3355
- }
3356
-
3357
- return React.createElement(TableBody, Object.assign({}, tableBodyProps), enableRowVirtualization && paddingTop > 0 && React.createElement("tr", null, React.createElement("td", {
3358
- style: {
3359
- height: paddingTop + "px"
3360
- }
3361
- })), (enableRowVirtualization ? virtualRows : rows).map(function (rowOrVirtualRow, rowIndex) {
3362
- var row = enableRowVirtualization ? rows[rowOrVirtualRow.index] : rowOrVirtualRow;
3363
- return React.createElement(MRT_TableBodyRow, {
3364
- key: row.id,
3365
- row: row,
3366
- rowIndex: enableRowVirtualization ? rowOrVirtualRow.index : rowIndex,
3367
- table: table
3368
- });
3369
- }), enableRowVirtualization && paddingBottom > 0 && React.createElement("tr", null, React.createElement("td", {
3370
- style: {
3371
- height: paddingBottom + "px"
3372
- }
3373
- })));
3374
- };
3375
-
3376
- var MRT_TableFooterCell = function MRT_TableFooterCell(_ref) {
3377
- var _ref2, _ref3;
3378
-
3379
- var footer = _ref.footer,
3380
- table = _ref.table;
3381
- var getState = table.getState,
3382
- _table$options = table.options,
3383
- muiTableFooterCellProps = _table$options.muiTableFooterCellProps,
3384
- enableColumnResizing = _table$options.enableColumnResizing;
3385
-
3386
- var _getState = getState(),
3387
- density = _getState.density;
3388
-
3389
- var column = footer.column;
3390
- var columnDef = column.columnDef;
3391
- var columnDefType = columnDef.columnDefType;
3392
- var mTableFooterCellProps = muiTableFooterCellProps instanceof Function ? muiTableFooterCellProps({
3393
- column: column,
3394
- table: table
3395
- }) : muiTableFooterCellProps;
3396
- var mcTableFooterCellProps = columnDef.muiTableFooterCellProps instanceof Function ? columnDef.muiTableFooterCellProps({
3397
- column: column,
3398
- table: table
3399
- }) : columnDef.muiTableFooterCellProps;
3400
-
3401
- var tableCellProps = _extends({}, mTableFooterCellProps, mcTableFooterCellProps);
3402
-
3403
- return React.createElement(TableCell, Object.assign({
3404
- align: columnDefType === 'group' ? 'center' : 'left',
3405
- colSpan: footer.colSpan,
3406
- variant: "head"
3407
- }, tableCellProps, {
3408
- sx: function sx(theme) {
3409
- return _extends({
3410
- backgroundColor: theme.palette.background["default"],
3411
- backgroundImage: "linear-gradient(" + alpha(theme.palette.common.white, 0.05) + "," + alpha(theme.palette.common.white, 0.05) + ")",
3412
- fontWeight: 'bold',
3413
- maxWidth: column.getSize() + "px",
3414
- minWidth: column.getSize() + "px",
3415
- p: density === 'compact' ? '0.5rem' : density === 'comfortable' ? '1rem' : '1.5rem',
3416
- transition: "all " + (enableColumnResizing ? '10ms' : '0.2s') + " ease-in-out",
3417
- width: column.getSize(),
3418
- verticalAlign: 'text-top'
3419
- }, (tableCellProps == null ? void 0 : tableCellProps.sx) instanceof Function ? tableCellProps.sx(theme) : tableCellProps == null ? void 0 : tableCellProps.sx);
3420
- }
3421
- }), React.createElement(React.Fragment, null, footer.isPlaceholder ? null : (_ref2 = (_ref3 = columnDef.Footer instanceof Function ? columnDef.Footer == null ? void 0 : columnDef.Footer({
3422
- footer: footer,
3423
- table: table
3424
- }) : columnDef.Footer) != null ? _ref3 : columnDef.footer) != null ? _ref2 : null));
3425
- };
3426
-
3427
- var MRT_TableFooterRow = function MRT_TableFooterRow(_ref) {
3428
- var _footerGroup$headers;
3429
-
3430
- var footerGroup = _ref.footerGroup,
3431
- table = _ref.table;
3432
- var muiTableFooterRowProps = table.options.muiTableFooterRowProps; // if no content in row, skip row
3433
-
3434
- if (!((_footerGroup$headers = footerGroup.headers) != null && _footerGroup$headers.some(function (header) {
3435
- return typeof header.column.columnDef.footer === 'string' && !!header.column.columnDef.footer || header.column.columnDef.Footer;
3436
- }))) return null;
3437
- var tableRowProps = muiTableFooterRowProps instanceof Function ? muiTableFooterRowProps({
3438
- footerGroup: footerGroup,
3439
- table: table
3440
- }) : muiTableFooterRowProps;
3441
- return React.createElement(TableRow, Object.assign({}, tableRowProps), footerGroup.headers.map(function (footer) {
3442
- return React.createElement(MRT_TableFooterCell, {
3443
- footer: footer,
3444
- key: footer.id,
3445
- table: table
3446
- });
3447
- }));
3448
- };
3449
-
3450
- var MRT_TableFooter = function MRT_TableFooter(_ref) {
3451
- var table = _ref.table;
3452
- var getFooterGroups = table.getFooterGroups,
3453
- muiTableFooterProps = table.options.muiTableFooterProps;
3454
- var tableFooterProps = muiTableFooterProps instanceof Function ? muiTableFooterProps({
3455
- table: table
3456
- }) : muiTableFooterProps;
3457
- return React.createElement(TableFooter, Object.assign({}, tableFooterProps), getFooterGroups().map(function (footerGroup) {
3458
- return React.createElement(MRT_TableFooterRow, {
3459
- footerGroup: footerGroup,
3460
- key: footerGroup.id,
3461
- table: table
3462
- });
3463
- }));
3464
- };
3465
-
3466
- var MRT_Table = function MRT_Table(_ref) {
3467
- var tableContainerRef = _ref.tableContainerRef,
3468
- table = _ref.table;
3469
- var getState = table.getState,
3470
- _table$options = table.options,
3471
- enableColumnResizing = _table$options.enableColumnResizing,
3472
- enableRowVirtualization = _table$options.enableRowVirtualization,
3473
- enableStickyHeader = _table$options.enableStickyHeader,
3474
- enableTableFooter = _table$options.enableTableFooter,
3475
- enableTableHead = _table$options.enableTableHead,
3476
- muiTableProps = _table$options.muiTableProps;
3477
-
3478
- var _getState = getState(),
3479
- isFullScreen = _getState.isFullScreen;
3480
-
3481
- var tableProps = muiTableProps instanceof Function ? muiTableProps({
3482
- table: table
3483
- }) : muiTableProps;
3484
- return React.createElement(Table, Object.assign({
3485
- stickyHeader: enableStickyHeader || enableRowVirtualization || isFullScreen
3486
- }, tableProps, {
3487
- sx: function sx(theme) {
3488
- return _extends({
3489
- tableLayout: enableColumnResizing || enableRowVirtualization ? 'fixed' : 'auto'
3490
- }, (tableProps == null ? void 0 : tableProps.sx) instanceof Function ? tableProps.sx(theme) : tableProps == null ? void 0 : tableProps.sx);
3491
- }
3492
- }), enableTableHead && React.createElement(MRT_TableHead, {
3493
- table: table
3494
- }), React.createElement(MRT_TableBody, {
3495
- tableContainerRef: tableContainerRef,
3496
- table: table
3497
- }), enableTableFooter && React.createElement(MRT_TableFooter, {
3498
- table: table
3499
- }));
3500
- };
3501
-
3502
- var useIsomorphicLayoutEffect = typeof window !== 'undefined' ? useLayoutEffect : useEffect;
3503
- var MRT_TableContainer = function MRT_TableContainer(_ref) {
3504
- var table = _ref.table;
3505
- var getState = table.getState,
3506
- _table$options = table.options,
3507
- enableStickyHeader = _table$options.enableStickyHeader,
3508
- enableRowVirtualization = _table$options.enableRowVirtualization,
3509
- muiTableContainerProps = _table$options.muiTableContainerProps,
3510
- tableId = _table$options.tableId;
3511
-
3512
- var _getState = getState(),
3513
- isFullScreen = _getState.isFullScreen;
3514
-
3515
- var _useState = useState(0),
3516
- totalToolbarHeight = _useState[0],
3517
- setTotalToolbarHeight = _useState[1];
3518
-
3519
- var tableContainerProps = muiTableContainerProps instanceof Function ? muiTableContainerProps({
3520
- table: table
3521
- }) : muiTableContainerProps;
3522
- useIsomorphicLayoutEffect(function () {
3523
- var _document$getElementB, _document, _document$getElementB2, _document$getElementB3, _document2, _document2$getElement;
3524
-
3525
- var topToolbarHeight = typeof document !== 'undefined' ? (_document$getElementB = (_document = document) == null ? void 0 : (_document$getElementB2 = _document.getElementById("mrt-" + tableId + "-toolbar-top")) == null ? void 0 : _document$getElementB2.offsetHeight) != null ? _document$getElementB : 0 : 0;
3526
- var bottomToolbarHeight = typeof document !== 'undefined' ? (_document$getElementB3 = (_document2 = document) == null ? void 0 : (_document2$getElement = _document2.getElementById("mrt-" + tableId + "-toolbar-bottom")) == null ? void 0 : _document2$getElement.offsetHeight) != null ? _document$getElementB3 : 0 : 0;
3527
- setTotalToolbarHeight(topToolbarHeight + bottomToolbarHeight);
3528
- });
3529
- var tableContainerRef = React.useRef(null);
3530
- return React.createElement(TableContainer, Object.assign({
3531
- ref: tableContainerRef
3532
- }, tableContainerProps, {
3533
- sx: function sx(theme) {
3534
- return _extends({
3535
- maxWidth: '100%',
3536
- maxHeight: enableStickyHeader || enableRowVirtualization ? "clamp(350px, calc(100vh - " + totalToolbarHeight + "px), 9999px)" : undefined,
3537
- overflow: 'auto'
3538
- }, (tableContainerProps == null ? void 0 : tableContainerProps.sx) instanceof Function ? tableContainerProps.sx(theme) : tableContainerProps == null ? void 0 : tableContainerProps.sx);
3539
- },
3540
- style: _extends({
3541
- maxHeight: isFullScreen ? "calc(100vh - " + totalToolbarHeight + "px)" : undefined
3542
- }, tableContainerProps == null ? void 0 : tableContainerProps.style)
3543
- }), React.createElement(MRT_Table, {
3544
- tableContainerRef: tableContainerRef,
3545
- table: table
3546
- }));
3547
- };
3548
-
3549
- var MRT_TablePaper = function MRT_TablePaper(_ref) {
3550
- var table = _ref.table;
3551
- var getState = table.getState,
3552
- _table$options = table.options,
3553
- enableToolbarBottom = _table$options.enableToolbarBottom,
3554
- enableToolbarTop = _table$options.enableToolbarTop,
3555
- muiTablePaperProps = _table$options.muiTablePaperProps;
3556
-
3557
- var _getState = getState(),
3558
- isFullScreen = _getState.isFullScreen;
3559
-
3560
- useEffect(function () {
3561
- if (typeof window !== 'undefined') {
3562
- if (isFullScreen) {
3563
- document.body.style.height = '100vh';
3564
- } else {
3565
- document.body.style.height = 'auto';
3566
- }
3567
- }
3568
- }, [isFullScreen]);
3569
- var tablePaperProps = muiTablePaperProps instanceof Function ? muiTablePaperProps({
3570
- table: table
3571
- }) : muiTablePaperProps;
3572
- return React.createElement(Paper, Object.assign({
3573
- elevation: 2
3574
- }, tablePaperProps, {
3575
- sx: _extends({
3576
- transition: 'all 0.2s ease-in-out'
3577
- }, tablePaperProps == null ? void 0 : tablePaperProps.sx),
3578
- style: _extends({}, tablePaperProps == null ? void 0 : tablePaperProps.style, {
3579
- height: isFullScreen ? '100vh' : undefined,
3580
- margin: isFullScreen ? '0' : undefined,
3581
- maxHeight: isFullScreen ? '100vh' : undefined,
3582
- maxWidth: isFullScreen ? '100vw' : undefined,
3583
- padding: isFullScreen ? '0' : undefined,
3584
- width: isFullScreen ? '100vw' : undefined
3585
- })
3586
- }), enableToolbarTop && React.createElement(MRT_ToolbarTop, {
3587
- table: table
3588
- }), React.createElement(MRT_TableContainer, {
3589
- table: table
3590
- }), enableToolbarBottom && React.createElement(MRT_ToolbarBottom, {
3591
- table: table
3592
- }));
3593
- };
3594
-
3595
- var defaultDisplayColumnDefOptions = {
3596
- columnDefType: 'display',
3597
- enableClickToCopy: false,
3598
- enableColumnActions: false,
3599
- enableColumnDragging: false,
3600
- enableColumnFilter: false,
3601
- enableColumnOrdering: false,
3602
- enableEditing: false,
3603
- enableGlobalFilter: false,
3604
- enableGrouping: false,
3605
- enableHiding: false,
3606
- enablePinning: false,
3607
- enableResizing: false,
3608
- enableSorting: false
3609
- };
3610
- var MRT_TableRoot = function MRT_TableRoot(props) {
3611
- var _initialState$columnO, _initialState$current, _initialState$current2, _initialState$current3, _initialState$current4, _initialState$current5, _initialState$current6, _initialState$density, _initialState$isFullS, _props$initialState$s, _props$initialState2, _initialState$showCol, _initialState$showGlo, _props$state3, _props$state4, _MRT_FilterFns$curren, _props$onCurrentDragg, _props$onCurrentDragg2, _props$onCurrentEditi, _props$onCurrentEditi2, _props$onCurrentFilte, _props$onCurrentGloba, _props$onCurrentHover, _props$onCurrentHover2, _props$onDensityChang, _props$onIsFullScreen, _props$onShowAlertBan, _props$onShowFiltersC, _props$onShowGlobalFi;
3612
-
3613
- var _useState = useState(props.tableId),
3614
- tableId = _useState[0],
3615
- setIdPrefix = _useState[1];
3616
-
3617
- useEffect(function () {
3618
- var _props$tableId;
3619
-
3620
- return setIdPrefix((_props$tableId = props.tableId) != null ? _props$tableId : Math.random().toString(36).substring(2, 9));
3621
- }, [props.tableId]);
3622
- var initialState = useMemo(function () {
3623
- var _props$initialState, _initState$columnOrde;
3624
-
3625
- var initState = (_props$initialState = props.initialState) != null ? _props$initialState : {};
3626
- initState.columnOrder = (_initState$columnOrde = initState.columnOrder) != null ? _initState$columnOrde : getDefaultColumnOrderIds(props);
3627
- return initState;
3628
- }, []);
3629
-
3630
- var _useState2 = useState((_initialState$columnO = initialState.columnOrder) != null ? _initialState$columnO : []),
3631
- columnOrder = _useState2[0],
3632
- setColumnOrder = _useState2[1];
3633
-
3634
- var _useState3 = useState((_initialState$current = initialState.currentDraggingColumn) != null ? _initialState$current : null),
3635
- currentDraggingColumn = _useState3[0],
3636
- setCurrentDraggingColumn = _useState3[1];
3637
-
3638
- var _useState4 = useState((_initialState$current2 = initialState.currentDraggingRow) != null ? _initialState$current2 : null),
3639
- currentDraggingRow = _useState4[0],
3640
- setCurrentDraggingRow = _useState4[1];
3641
-
3642
- var _useState5 = useState((_initialState$current3 = initialState.currentEditingCell) != null ? _initialState$current3 : null),
3643
- currentEditingCell = _useState5[0],
3644
- setCurrentEditingCell = _useState5[1];
3645
-
3646
- var _useState6 = useState((_initialState$current4 = initialState.currentEditingRow) != null ? _initialState$current4 : null),
3647
- currentEditingRow = _useState6[0],
3648
- setCurrentEditingRow = _useState6[1];
3649
-
3650
- var _useState7 = useState((_initialState$current5 = initialState.currentHoveredColumn) != null ? _initialState$current5 : null),
3651
- currentHoveredColumn = _useState7[0],
3652
- setCurrentHoveredColumn = _useState7[1];
3653
-
3654
- var _useState8 = useState((_initialState$current6 = initialState.currentHoveredRow) != null ? _initialState$current6 : null),
3655
- currentHoveredRow = _useState8[0],
3656
- setCurrentHoveredRow = _useState8[1];
3657
-
3658
- var _useState9 = useState((_initialState$density = initialState == null ? void 0 : initialState.density) != null ? _initialState$density : 'comfortable'),
3659
- density = _useState9[0],
3660
- setDensity = _useState9[1];
3661
-
3662
- var _useState10 = useState((_initialState$isFullS = initialState == null ? void 0 : initialState.isFullScreen) != null ? _initialState$isFullS : false),
3663
- isFullScreen = _useState10[0],
3664
- setIsFullScreen = _useState10[1];
3665
-
3666
- var _useState11 = useState((_props$initialState$s = (_props$initialState2 = props.initialState) == null ? void 0 : _props$initialState2.showAlertBanner) != null ? _props$initialState$s : false),
3667
- showAlertBanner = _useState11[0],
3668
- setShowAlertBanner = _useState11[1];
3669
-
3670
- var _useState12 = useState((_initialState$showCol = initialState == null ? void 0 : initialState.showColumnFilters) != null ? _initialState$showCol : false),
3671
- showColumnFilters = _useState12[0],
3672
- setShowFilters = _useState12[1];
3673
-
3674
- var _useState13 = useState((_initialState$showGlo = initialState == null ? void 0 : initialState.showGlobalFilter) != null ? _initialState$showGlo : false),
3675
- showGlobalFilter = _useState13[0],
3676
- setShowGlobalFilter = _useState13[1];
3677
-
3678
- var _useState14 = useState(function () {
3679
- return Object.assign.apply(Object, [{}].concat(getAllLeafColumnDefs(props.columns).map(function (col) {
3680
- var _ref, _col$id$toString, _col$id, _col$accessorKey, _col$filterFn$name, _ref2, _col$filterFn, _initialState$current7, _ref3, _col$id$toString2, _col$id2, _col$accessorKey2, _ref4;
3681
-
3682
- return _ref4 = {}, _ref4[(_ref = (_col$id$toString = (_col$id = col.id) == null ? void 0 : _col$id.toString()) != null ? _col$id$toString : (_col$accessorKey = col.accessorKey) == null ? void 0 : _col$accessorKey.toString()) != null ? _ref : ''] = col.filterFn instanceof Function ? (_col$filterFn$name = col.filterFn.name) != null ? _col$filterFn$name : 'custom' : (_ref2 = (_col$filterFn = col.filterFn) != null ? _col$filterFn : initialState == null ? void 0 : (_initialState$current7 = initialState.currentFilterFns) == null ? void 0 : _initialState$current7[(_ref3 = (_col$id$toString2 = (_col$id2 = col.id) == null ? void 0 : _col$id2.toString()) != null ? _col$id$toString2 : (_col$accessorKey2 = col.accessorKey) == null ? void 0 : _col$accessorKey2.toString()) != null ? _ref3 : '']) != null ? _ref2 : getDefaultColumnFilterFn(col), _ref4;
3683
- })));
3684
- }),
3685
- currentFilterFns = _useState14[0],
3686
- setCurrentFilterFns = _useState14[1];
3687
-
3688
- var _useState15 = useState(props.globalFilterFn instanceof String ? props.globalFilterFn : 'fuzzy'),
3689
- currentGlobalFilterFn = _useState15[0],
3690
- setCurrentGlobalFilterFn = _useState15[1];
3691
-
3692
- var displayColumns = useMemo(function () {
3693
- var _props$localization, _props$displayColumnD, _props$localization2, _props$displayColumnD2, _props$localization3, _props$displayColumnD3, _props$localization4, _props$displayColumnD4, _props$localization6, _props$displayColumnD5;
3694
-
3695
- return [columnOrder.includes('mrt-row-drag') && _extends({
3696
- header: (_props$localization = props.localization) == null ? void 0 : _props$localization.move,
3697
- size: 60
3698
- }, defaultDisplayColumnDefOptions, (_props$displayColumnD = props.displayColumnDefOptions) == null ? void 0 : _props$displayColumnD['mrt-row-drag'], {
3699
- id: 'mrt-row-drag'
3700
- }), columnOrder.includes('mrt-row-actions') && _extends({
3701
- Cell: function Cell(_ref5) {
3702
- var cell = _ref5.cell;
3703
- return React.createElement(MRT_ToggleRowActionMenuButton, {
3704
- row: cell.row,
3705
- table: table
3706
- });
3707
- },
3708
- header: (_props$localization2 = props.localization) == null ? void 0 : _props$localization2.actions,
3709
- size: 70
3710
- }, defaultDisplayColumnDefOptions, (_props$displayColumnD2 = props.displayColumnDefOptions) == null ? void 0 : _props$displayColumnD2['mrt-row-actions'], {
3711
- id: 'mrt-row-actions'
3712
- }), columnOrder.includes('mrt-row-expand') && _extends({
3713
- Cell: function Cell(_ref6) {
3714
- var cell = _ref6.cell;
3715
- return React.createElement(MRT_ExpandButton, {
3716
- row: cell.row,
3717
- table: table
3718
- });
3719
- },
3720
- Header: function Header() {
3721
- return props.enableExpandAll ? React.createElement(MRT_ExpandAllButton, {
3722
- table: table
3723
- }) : null;
3724
- },
3725
- header: (_props$localization3 = props.localization) == null ? void 0 : _props$localization3.expand,
3726
- size: 60
3727
- }, defaultDisplayColumnDefOptions, (_props$displayColumnD3 = props.displayColumnDefOptions) == null ? void 0 : _props$displayColumnD3['mrt-row-expand'], {
3728
- id: 'mrt-row-expand'
3729
- }), columnOrder.includes('mrt-row-select') && _extends({
3730
- Cell: function Cell(_ref7) {
3731
- var cell = _ref7.cell;
3732
- return React.createElement(MRT_SelectCheckbox, {
3733
- row: cell.row,
3734
- table: table
3735
- });
3736
- },
3737
- Header: function Header() {
3738
- return props.enableSelectAll ? React.createElement(MRT_SelectCheckbox, {
3739
- selectAll: true,
3740
- table: table
3741
- }) : null;
3742
- },
3743
- header: (_props$localization4 = props.localization) == null ? void 0 : _props$localization4.select,
3744
- size: 60
3745
- }, defaultDisplayColumnDefOptions, (_props$displayColumnD4 = props.displayColumnDefOptions) == null ? void 0 : _props$displayColumnD4['mrt-row-select'], {
3746
- id: 'mrt-row-select'
3747
- }), columnOrder.includes('mrt-row-numbers') && _extends({
3748
- Cell: function Cell(_ref8) {
3749
- var cell = _ref8.cell;
3750
- return cell.row.index + 1;
3751
- },
3752
- Header: function Header() {
3753
- var _props$localization5;
3754
-
3755
- return (_props$localization5 = props.localization) == null ? void 0 : _props$localization5.rowNumber;
3756
- },
3757
- header: (_props$localization6 = props.localization) == null ? void 0 : _props$localization6.rowNumbers,
3758
- size: 60
3759
- }, defaultDisplayColumnDefOptions, (_props$displayColumnD5 = props.displayColumnDefOptions) == null ? void 0 : _props$displayColumnD5['mrt-row-numbers'], {
3760
- id: 'mrt-row-numbers'
3761
- })].filter(Boolean);
3762
- }, [columnOrder, props.displayColumnDefOptions, props.editingMode, props.enableColumnDragging, props.enableColumnOrdering, props.enableEditing, props.enableExpandAll, props.enableExpanding, props.enableGrouping, props.enableRowActions, props.enableRowDragging, props.enableRowNumbers, props.enableRowOrdering, props.enableRowSelection, props.enableSelectAll, props.localization, props.muiTableBodyCellProps, props.muiTableHeadCellProps, props.positionActionsColumn]);
3763
- var columnDefs = useMemo(function () {
3764
- return prepareColumns([].concat(displayColumns, props.columns), currentFilterFns);
3765
- }, [currentFilterFns, displayColumns, props.columns]);
3766
- var data = useMemo(function () {
3767
- var _props$state, _props$state2;
3768
-
3769
- return ((_props$state = props.state) != null && _props$state.isLoading || (_props$state2 = props.state) != null && _props$state2.showSkeletons) && !props.data.length ? [].concat(Array(10).fill(null)).map(function () {
3770
- return Object.assign.apply(Object, [{}].concat(getAllLeafColumnDefs(props.columns).map(function (col) {
3771
- var _ref9, _col$id3, _ref10;
3772
-
3773
- return _ref10 = {}, _ref10[(_ref9 = (_col$id3 = col.id) != null ? _col$id3 : col.accessorKey) != null ? _ref9 : ''] = null, _ref10;
3774
- })));
3775
- }) : props.data;
3776
- }, [props.data, (_props$state3 = props.state) == null ? void 0 : _props$state3.isLoading, (_props$state4 = props.state) == null ? void 0 : _props$state4.showSkeletons]); //@ts-ignore
3777
-
3778
- var table = _extends({}, useReactTable(_extends({
3779
- getCoreRowModel: getCoreRowModel(),
3780
- getExpandedRowModel: getExpandedRowModel(),
3781
- getFacetedRowModel: getFacetedRowModel(),
3782
- getFilteredRowModel: getFilteredRowModel(),
3783
- getGroupedRowModel: getGroupedRowModel(),
3784
- getPaginationRowModel: getPaginationRowModel(),
3785
- getSortedRowModel: getSortedRowModel(),
3786
- onColumnOrderChange: setColumnOrder,
3787
- getSubRows: function getSubRows(row) {
3788
- return row == null ? void 0 : row.subRows;
3789
- }
3790
- }, props, {
3791
- //@ts-ignore
3792
- columns: columnDefs,
3793
- data: data,
3794
- globalFilterFn: //@ts-ignore
3795
- (_MRT_FilterFns$curren = MRT_FilterFns[currentGlobalFilterFn]) != null ? _MRT_FilterFns$curren : MRT_FilterFns.fuzzy,
3796
- initialState: initialState,
3797
- state: _extends({
3798
- columnOrder: columnOrder,
3799
- currentDraggingColumn: currentDraggingColumn,
3800
- currentDraggingRow: currentDraggingRow,
3801
- currentEditingCell: currentEditingCell,
3802
- currentEditingRow: currentEditingRow,
3803
- currentFilterFns: currentFilterFns,
3804
- currentGlobalFilterFn: currentGlobalFilterFn,
3805
- currentHoveredColumn: currentHoveredColumn,
3806
- currentHoveredRow: currentHoveredRow,
3807
- density: density,
3808
- isFullScreen: isFullScreen,
3809
- showAlertBanner: showAlertBanner,
3810
- showColumnFilters: showColumnFilters,
3811
- showGlobalFilter: showGlobalFilter
3812
- }, props.state),
3813
- tableId: tableId
3814
- })), {
3815
- setCurrentDraggingColumn: (_props$onCurrentDragg = props.onCurrentDraggingColumnChange) != null ? _props$onCurrentDragg : setCurrentDraggingColumn,
3816
- setCurrentDraggingRow: (_props$onCurrentDragg2 = props.onCurrentDraggingRowChange) != null ? _props$onCurrentDragg2 : setCurrentDraggingRow,
3817
- setCurrentEditingCell: (_props$onCurrentEditi = props.onCurrentEditingCellChange) != null ? _props$onCurrentEditi : setCurrentEditingCell,
3818
- setCurrentEditingRow: (_props$onCurrentEditi2 = props.onCurrentEditingRowChange) != null ? _props$onCurrentEditi2 : setCurrentEditingRow,
3819
- setCurrentFilterFns: (_props$onCurrentFilte = props.onCurrentFilterFnsChange) != null ? _props$onCurrentFilte : setCurrentFilterFns,
3820
- setCurrentGlobalFilterFn: (_props$onCurrentGloba = props.onCurrentGlobalFilterFnChange) != null ? _props$onCurrentGloba : setCurrentGlobalFilterFn,
3821
- setCurrentHoveredColumn: (_props$onCurrentHover = props.onCurrentHoveredColumnChange) != null ? _props$onCurrentHover : setCurrentHoveredColumn,
3822
- setCurrentHoveredRow: (_props$onCurrentHover2 = props.onCurrentHoveredRowChange) != null ? _props$onCurrentHover2 : setCurrentHoveredRow,
3823
- setDensity: (_props$onDensityChang = props.onDensityChange) != null ? _props$onDensityChang : setDensity,
3824
- setIsFullScreen: (_props$onIsFullScreen = props.onIsFullScreenChange) != null ? _props$onIsFullScreen : setIsFullScreen,
3825
- setShowAlertBanner: (_props$onShowAlertBan = props.onShowAlertBannerChange) != null ? _props$onShowAlertBan : setShowAlertBanner,
3826
- setShowFilters: (_props$onShowFiltersC = props.onShowFiltersChange) != null ? _props$onShowFiltersC : setShowFilters,
3827
- setShowGlobalFilter: (_props$onShowGlobalFi = props.onShowGlobalFilterChange) != null ? _props$onShowGlobalFi : setShowGlobalFilter
3828
- });
3829
-
3830
- useEffect(function () {
3831
- return props == null ? void 0 : props.onTableInstanceChange == null ? void 0 : props.onTableInstanceChange(table);
3832
- }, [table]);
3833
- return React.createElement(React.Fragment, null, React.createElement(Dialog, {
3834
- PaperComponent: Box,
3835
- TransitionComponent: Grow,
3836
- disablePortal: true,
3837
- fullScreen: true,
3838
- keepMounted: false,
3839
- onClose: function onClose() {
3840
- return setIsFullScreen(false);
3841
- },
3842
- open: isFullScreen,
3843
- transitionDuration: 400
3844
- }, React.createElement(MRT_TablePaper, {
3845
- table: table
3846
- })), !isFullScreen && React.createElement(MRT_TablePaper, {
3847
- table: table
3848
- }));
3849
- };
3850
-
3851
- var _excluded$5 = ["autoResetExpanded", "columnResizeMode", "defaultColumn", "editingMode", "enableColumnActions", "enableColumnFilterChangeMode", "enableColumnFilters", "enableColumnOrdering", "enableColumnResizing", "enableDensityToggle", "enableExpandAll", "enableFilters", "enableFullScreenToggle", "enableGlobalFilter", "enableGlobalFilterChangeMode", "enableGlobalFilterRankedResults", "enableGrouping", "enableHiding", "enableMultiRowSelection", "enableMultiSort", "enablePagination", "enablePinning", "enableRowSelection", "enableSelectAll", "enableSorting", "enableStickyHeader", "enableTableFooter", "enableTableHead", "enableToolbarBottom", "enableToolbarInternalActions", "enableToolbarTop", "icons", "localization", "positionActionsColumn", "positionExpandColumn", "positionGlobalFilter", "positionPagination", "positionToolbarAlertBanner", "positionToolbarDropZone", "rowNumberMode", "selectAllMode"];
3852
- var MaterialReactTable = (function (_ref) {
3853
- var _ref$autoResetExpande = _ref.autoResetExpanded,
3854
- autoResetExpanded = _ref$autoResetExpande === void 0 ? false : _ref$autoResetExpande,
3855
- _ref$columnResizeMode = _ref.columnResizeMode,
3856
- columnResizeMode = _ref$columnResizeMode === void 0 ? 'onEnd' : _ref$columnResizeMode,
3857
- _ref$defaultColumn = _ref.defaultColumn,
3858
- defaultColumn = _ref$defaultColumn === void 0 ? {
3859
- minSize: 40,
3860
- maxSize: 1000,
3861
- size: 180
3862
- } : _ref$defaultColumn,
3863
- _ref$editingMode = _ref.editingMode,
3864
- editingMode = _ref$editingMode === void 0 ? 'row' : _ref$editingMode,
3865
- _ref$enableColumnActi = _ref.enableColumnActions,
3866
- enableColumnActions = _ref$enableColumnActi === void 0 ? true : _ref$enableColumnActi,
3867
- _ref$enableColumnFilt = _ref.enableColumnFilterChangeMode,
3868
- enableColumnFilterChangeMode = _ref$enableColumnFilt === void 0 ? false : _ref$enableColumnFilt,
3869
- _ref$enableColumnFilt2 = _ref.enableColumnFilters,
3870
- enableColumnFilters = _ref$enableColumnFilt2 === void 0 ? true : _ref$enableColumnFilt2,
3871
- _ref$enableColumnOrde = _ref.enableColumnOrdering,
3872
- enableColumnOrdering = _ref$enableColumnOrde === void 0 ? false : _ref$enableColumnOrde,
3873
- _ref$enableColumnResi = _ref.enableColumnResizing,
3874
- enableColumnResizing = _ref$enableColumnResi === void 0 ? false : _ref$enableColumnResi,
3875
- _ref$enableDensityTog = _ref.enableDensityToggle,
3876
- enableDensityToggle = _ref$enableDensityTog === void 0 ? true : _ref$enableDensityTog,
3877
- _ref$enableExpandAll = _ref.enableExpandAll,
3878
- enableExpandAll = _ref$enableExpandAll === void 0 ? true : _ref$enableExpandAll,
3879
- _ref$enableFilters = _ref.enableFilters,
3880
- enableFilters = _ref$enableFilters === void 0 ? true : _ref$enableFilters,
3881
- _ref$enableFullScreen = _ref.enableFullScreenToggle,
3882
- enableFullScreenToggle = _ref$enableFullScreen === void 0 ? true : _ref$enableFullScreen,
3883
- _ref$enableGlobalFilt = _ref.enableGlobalFilter,
3884
- enableGlobalFilter = _ref$enableGlobalFilt === void 0 ? true : _ref$enableGlobalFilt,
3885
- _ref$enableGlobalFilt2 = _ref.enableGlobalFilterChangeMode,
3886
- enableGlobalFilterChangeMode = _ref$enableGlobalFilt2 === void 0 ? false : _ref$enableGlobalFilt2,
3887
- _ref$enableGlobalFilt3 = _ref.enableGlobalFilterRankedResults,
3888
- enableGlobalFilterRankedResults = _ref$enableGlobalFilt3 === void 0 ? true : _ref$enableGlobalFilt3,
3889
- _ref$enableGrouping = _ref.enableGrouping,
3890
- enableGrouping = _ref$enableGrouping === void 0 ? false : _ref$enableGrouping,
3891
- _ref$enableHiding = _ref.enableHiding,
3892
- enableHiding = _ref$enableHiding === void 0 ? true : _ref$enableHiding,
3893
- _ref$enableMultiRowSe = _ref.enableMultiRowSelection,
3894
- enableMultiRowSelection = _ref$enableMultiRowSe === void 0 ? true : _ref$enableMultiRowSe,
3895
- _ref$enableMultiSort = _ref.enableMultiSort,
3896
- enableMultiSort = _ref$enableMultiSort === void 0 ? true : _ref$enableMultiSort,
3897
- _ref$enablePagination = _ref.enablePagination,
3898
- enablePagination = _ref$enablePagination === void 0 ? true : _ref$enablePagination,
3899
- _ref$enablePinning = _ref.enablePinning,
3900
- enablePinning = _ref$enablePinning === void 0 ? false : _ref$enablePinning,
3901
- _ref$enableRowSelecti = _ref.enableRowSelection,
3902
- enableRowSelection = _ref$enableRowSelecti === void 0 ? false : _ref$enableRowSelecti,
3903
- _ref$enableSelectAll = _ref.enableSelectAll,
3904
- enableSelectAll = _ref$enableSelectAll === void 0 ? true : _ref$enableSelectAll,
3905
- _ref$enableSorting = _ref.enableSorting,
3906
- enableSorting = _ref$enableSorting === void 0 ? true : _ref$enableSorting,
3907
- _ref$enableStickyHead = _ref.enableStickyHeader,
3908
- enableStickyHeader = _ref$enableStickyHead === void 0 ? false : _ref$enableStickyHead,
3909
- _ref$enableTableFoote = _ref.enableTableFooter,
3910
- enableTableFooter = _ref$enableTableFoote === void 0 ? true : _ref$enableTableFoote,
3911
- _ref$enableTableHead = _ref.enableTableHead,
3912
- enableTableHead = _ref$enableTableHead === void 0 ? true : _ref$enableTableHead,
3913
- _ref$enableToolbarBot = _ref.enableToolbarBottom,
3914
- enableToolbarBottom = _ref$enableToolbarBot === void 0 ? true : _ref$enableToolbarBot,
3915
- _ref$enableToolbarInt = _ref.enableToolbarInternalActions,
3916
- enableToolbarInternalActions = _ref$enableToolbarInt === void 0 ? true : _ref$enableToolbarInt,
3917
- _ref$enableToolbarTop = _ref.enableToolbarTop,
3918
- enableToolbarTop = _ref$enableToolbarTop === void 0 ? true : _ref$enableToolbarTop,
3919
- icons = _ref.icons,
3920
- localization = _ref.localization,
3921
- _ref$positionActionsC = _ref.positionActionsColumn,
3922
- positionActionsColumn = _ref$positionActionsC === void 0 ? 'first' : _ref$positionActionsC,
3923
- _ref$positionExpandCo = _ref.positionExpandColumn,
3924
- positionExpandColumn = _ref$positionExpandCo === void 0 ? 'first' : _ref$positionExpandCo,
3925
- _ref$positionGlobalFi = _ref.positionGlobalFilter,
3926
- positionGlobalFilter = _ref$positionGlobalFi === void 0 ? 'right' : _ref$positionGlobalFi,
3927
- _ref$positionPaginati = _ref.positionPagination,
3928
- positionPagination = _ref$positionPaginati === void 0 ? 'bottom' : _ref$positionPaginati,
3929
- _ref$positionToolbarA = _ref.positionToolbarAlertBanner,
3930
- positionToolbarAlertBanner = _ref$positionToolbarA === void 0 ? 'top' : _ref$positionToolbarA,
3931
- _ref$positionToolbarD = _ref.positionToolbarDropZone,
3932
- positionToolbarDropZone = _ref$positionToolbarD === void 0 ? 'top' : _ref$positionToolbarD,
3933
- _ref$rowNumberMode = _ref.rowNumberMode,
3934
- rowNumberMode = _ref$rowNumberMode === void 0 ? 'original' : _ref$rowNumberMode,
3935
- _ref$selectAllMode = _ref.selectAllMode,
3936
- selectAllMode = _ref$selectAllMode === void 0 ? 'all' : _ref$selectAllMode,
3937
- rest = _objectWithoutPropertiesLoose(_ref, _excluded$5);
3938
-
3939
- return React.createElement(MRT_TableRoot, Object.assign({
3940
- autoResetExpanded: autoResetExpanded,
3941
- columnResizeMode: columnResizeMode,
3942
- defaultColumn: defaultColumn,
3943
- editingMode: editingMode,
3944
- enableColumnActions: enableColumnActions,
3945
- enableColumnFilterChangeMode: enableColumnFilterChangeMode,
3946
- enableColumnFilters: enableColumnFilters,
3947
- enableColumnOrdering: enableColumnOrdering,
3948
- enableColumnResizing: enableColumnResizing,
3949
- enableDensityToggle: enableDensityToggle,
3950
- enableExpandAll: enableExpandAll,
3951
- enableFilters: enableFilters,
3952
- enableFullScreenToggle: enableFullScreenToggle,
3953
- enableGlobalFilter: enableGlobalFilter,
3954
- enableGlobalFilterChangeMode: enableGlobalFilterChangeMode,
3955
- enableGlobalFilterRankedResults: enableGlobalFilterRankedResults,
3956
- enableGrouping: enableGrouping,
3957
- enableHiding: enableHiding,
3958
- enableMultiRowSelection: enableMultiRowSelection,
3959
- enableMultiSort: enableMultiSort,
3960
- enablePagination: enablePagination,
3961
- enablePinning: enablePinning,
3962
- enableRowSelection: enableRowSelection,
3963
- enableSelectAll: enableSelectAll,
3964
- enableSorting: enableSorting,
3965
- enableStickyHeader: enableStickyHeader,
3966
- enableTableFooter: enableTableFooter,
3967
- enableTableHead: enableTableHead,
3968
- enableToolbarBottom: enableToolbarBottom,
3969
- enableToolbarInternalActions: enableToolbarInternalActions,
3970
- enableToolbarTop: enableToolbarTop,
3971
- icons: _extends({}, MRT_Default_Icons, icons),
3972
- localization: _extends({}, MRT_DefaultLocalization_EN, localization),
3973
- positionActionsColumn: positionActionsColumn,
3974
- positionExpandColumn: positionExpandColumn,
3975
- positionGlobalFilter: positionGlobalFilter,
3976
- positionPagination: positionPagination,
3977
- positionToolbarAlertBanner: positionToolbarAlertBanner,
3978
- positionToolbarDropZone: positionToolbarDropZone,
3979
- rowNumberMode: rowNumberMode,
3980
- selectAllMode: selectAllMode
3981
- }, rest));
3982
- });
3983
-
3984
- export default MaterialReactTable;
3985
- //# sourceMappingURL=material-react-table.esm.js.map