material-react-table 0.3.1 → 0.3.5
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +32 -162
- package/dist/MaterialReactTable.d.ts +17 -7
- package/dist/body/MRT_TableBodyCell.d.ts +3 -0
- package/dist/body/MRT_TableBodyRow.d.ts +16 -1
- package/dist/buttons/MRT_FullScreenToggleButton.d.ts +4 -0
- package/dist/buttons/MRT_ToggleSearchButton.d.ts +4 -0
- package/dist/head/MRT_TableHeadCell.d.ts +4 -1
- package/dist/head/MRT_TableHeadCellActions.d.ts +5 -0
- package/dist/inputs/MRT_EditCellTextField.d.ts +7 -0
- package/dist/inputs/MRT_FilterTextField.d.ts +1 -1
- package/dist/material-react-table.cjs.development.js +799 -441
- package/dist/material-react-table.cjs.development.js.map +1 -1
- package/dist/material-react-table.cjs.production.min.js +1 -1
- package/dist/material-react-table.cjs.production.min.js.map +1 -1
- package/dist/material-react-table.esm.js +800 -442
- package/dist/material-react-table.esm.js.map +1 -1
- package/dist/menus/MRT_ColumnActionMenu.d.ts +2 -2
- package/dist/menus/MRT_RowActionMenu.d.ts +1 -0
- package/dist/table/MRT_TableButtonCell.d.ts +3 -0
- package/dist/toolbar/MRT_ToolbarAlertBanner.d.ts +5 -0
- package/dist/toolbar/MRT_ToolbarInternalButtons.d.ts +5 -0
- package/dist/useMRT.d.ts +20 -0
- package/dist/utils/localization.d.ts +12 -3
- package/package.json +26 -23
- package/src/@types/faker.d.ts +4 -0
- package/src/@types/react-table-config.d.ts +156 -0
- package/src/MaterialReactTable.tsx +29 -9
- package/src/body/MRT_TableBody.tsx +3 -25
- package/src/body/MRT_TableBodyCell.tsx +30 -9
- package/src/body/MRT_TableBodyRow.tsx +22 -14
- package/src/body/MRT_TableDetailPanel.tsx +19 -8
- package/src/buttons/MRT_EditActionButtons.tsx +11 -6
- package/src/buttons/MRT_ExpandAllButton.tsx +19 -25
- package/src/buttons/MRT_ExpandButton.tsx +28 -26
- package/src/buttons/MRT_FullScreenToggleButton.tsx +23 -0
- package/src/buttons/MRT_ShowHideColumnsButton.tsx +34 -3
- package/src/buttons/MRT_ToggleColumnActionMenuButton.tsx +5 -5
- package/src/buttons/MRT_ToggleFiltersButton.tsx +2 -2
- package/src/buttons/MRT_ToggleRowActionMenuButton.tsx +48 -26
- package/src/buttons/MRT_ToggleSearchButton.tsx +33 -0
- package/src/footer/MRT_TableFooter.tsx +4 -4
- package/src/footer/MRT_TableFooterCell.tsx +23 -7
- package/src/footer/MRT_TableFooterRow.tsx +9 -4
- package/src/head/MRT_TableHead.tsx +4 -4
- package/src/head/MRT_TableHeadCell.tsx +41 -20
- package/src/head/MRT_TableHeadCellActions.tsx +18 -0
- package/src/head/MRT_TableHeadRow.tsx +17 -11
- package/src/inputs/MRT_DensePaddingSwitch.tsx +5 -3
- package/src/inputs/MRT_EditCellTextField.tsx +64 -0
- package/src/inputs/MRT_FilterTextField.tsx +43 -18
- package/src/inputs/MRT_SearchTextField.tsx +39 -34
- package/src/inputs/MRT_SelectAllCheckbox.tsx +10 -14
- package/src/inputs/MRT_SelectCheckbox.tsx +11 -13
- package/src/menus/MRT_ColumnActionMenu.tsx +66 -23
- package/src/menus/MRT_RowActionMenu.tsx +4 -8
- package/src/menus/MRT_ShowHideColumnsMenu.tsx +24 -15
- package/src/table/MRT_Table.tsx +2 -2
- package/src/table/MRT_TableButtonCell.tsx +9 -0
- package/src/table/MRT_TableContainer.tsx +52 -5
- package/src/table/MRT_TableSpacerCell.tsx +5 -5
- package/src/toolbar/MRT_TablePagination.tsx +3 -2
- package/src/toolbar/MRT_ToolbarAlertBanner.tsx +102 -0
- package/src/toolbar/MRT_ToolbarBottom.tsx +11 -22
- package/src/toolbar/{MRT_ToolbarButtons.tsx → MRT_ToolbarInternalButtons.tsx} +13 -4
- package/src/toolbar/MRT_ToolbarTop.tsx +16 -30
- package/src/useMRT.tsx +112 -0
- package/src/utils/localization.ts +30 -12
- package/dist/toolbar/MRT_ToolbarButtons.d.ts +0 -5
- package/dist/useMaterialReactTable.d.ts +0 -15
- package/dist/utils/useMRTCalcs.d.ts +0 -11
- package/src/useMaterialReactTable.tsx +0 -96
- package/src/utils/useMRTCalcs.tsx +0 -42
|
@@ -15,8 +15,8 @@ var ClearAllIcon = _interopDefault(require('@mui/icons-material/ClearAll'));
|
|
|
15
15
|
var SortIcon = _interopDefault(require('@mui/icons-material/Sort'));
|
|
16
16
|
var VisibilityOffIcon = _interopDefault(require('@mui/icons-material/VisibilityOff'));
|
|
17
17
|
var DynamicFeedIcon = _interopDefault(require('@mui/icons-material/DynamicFeed'));
|
|
18
|
-
var
|
|
19
|
-
var
|
|
18
|
+
var MuiArrowRightIcon = _interopDefault(require('@mui/icons-material/KeyboardDoubleArrowDown'));
|
|
19
|
+
var MuiExpandMoreIcon = _interopDefault(require('@mui/icons-material/ExpandMore'));
|
|
20
20
|
var MoreHorizIcon = _interopDefault(require('@mui/icons-material/MoreHoriz'));
|
|
21
21
|
var EditIcon = _interopDefault(require('@mui/icons-material/Edit'));
|
|
22
22
|
var SaveIcon = _interopDefault(require('@mui/icons-material/Save'));
|
|
@@ -24,6 +24,9 @@ var CancelIcon = _interopDefault(require('@mui/icons-material/Cancel'));
|
|
|
24
24
|
var SearchIcon = _interopDefault(require('@mui/icons-material/Search'));
|
|
25
25
|
var FilterListOffIcon = _interopDefault(require('@mui/icons-material/FilterListOff'));
|
|
26
26
|
var ViewColumnIcon = _interopDefault(require('@mui/icons-material/ViewColumn'));
|
|
27
|
+
var SearchOffIcon = _interopDefault(require('@mui/icons-material/SearchOff'));
|
|
28
|
+
var FilterListIcon = _interopDefault(require('@mui/icons-material/Fullscreen'));
|
|
29
|
+
var FilterListOffIcon$1 = _interopDefault(require('@mui/icons-material/FullscreenExit'));
|
|
27
30
|
|
|
28
31
|
function asyncGeneratorStep(gen, resolve, reject, _next, _throw, key, arg) {
|
|
29
32
|
try {
|
|
@@ -94,8 +97,16 @@ function _objectWithoutPropertiesLoose(source, excluded) {
|
|
|
94
97
|
return target;
|
|
95
98
|
}
|
|
96
99
|
|
|
97
|
-
var
|
|
98
|
-
|
|
100
|
+
var MaterialReactTableContext = /*#__PURE__*/function () {
|
|
101
|
+
return React.createContext({});
|
|
102
|
+
}();
|
|
103
|
+
|
|
104
|
+
var MaterialReactTableProvider = function MaterialReactTableProvider(props) {
|
|
105
|
+
var _props$defaultDensePa, _props$defaultFullScr, _props$defaultShowFil, _props$defaultShowSea;
|
|
106
|
+
|
|
107
|
+
var hooks = [reactTable.useFilters, reactTable.useGlobalFilter, reactTable.useGroupBy, reactTable.useSortBy, reactTable.useExpanded, reactTable.usePagination, reactTable.useRowSelect];
|
|
108
|
+
if (props.enableColumnResizing) hooks.unshift(reactTable.useResizeColumns, reactTable.useFlexLayout);
|
|
109
|
+
var tableInstance = reactTable.useTable.apply(void 0, [props].concat(hooks));
|
|
99
110
|
var anyRowsCanExpand = React.useMemo(function () {
|
|
100
111
|
return tableInstance.rows.some(function (row) {
|
|
101
112
|
return row.canExpand;
|
|
@@ -106,74 +117,59 @@ var useMRTCalcs = function useMRTCalcs(_ref) {
|
|
|
106
117
|
return row.isExpanded;
|
|
107
118
|
});
|
|
108
119
|
}, [tableInstance.rows]);
|
|
109
|
-
var maxColumnDepth = React.useMemo(function () {
|
|
110
|
-
var maxDepth = 1;
|
|
111
|
-
tableInstance.columns.forEach(function (column) {
|
|
112
|
-
var _column$columns;
|
|
113
|
-
|
|
114
|
-
if ((_column$columns = column.columns) != null && _column$columns.length) {
|
|
115
|
-
maxDepth = Math.max(maxDepth, column.columns.length);
|
|
116
|
-
}
|
|
117
|
-
});
|
|
118
|
-
return maxDepth - 1;
|
|
119
|
-
}, [tableInstance.columns]);
|
|
120
|
-
return {
|
|
121
|
-
anyRowsCanExpand: anyRowsCanExpand,
|
|
122
|
-
anyRowsExpanded: anyRowsExpanded,
|
|
123
|
-
maxColumnDepth: maxColumnDepth
|
|
124
|
-
};
|
|
125
|
-
};
|
|
126
|
-
|
|
127
|
-
var MaterialReactTableContext = /*#__PURE__*/function () {
|
|
128
|
-
return React.createContext({});
|
|
129
|
-
}();
|
|
130
|
-
|
|
131
|
-
var MaterialReactTableProvider = function MaterialReactTableProvider(props) {
|
|
132
|
-
var _props$defaultShowFil, _props$defaultDensePa;
|
|
133
|
-
|
|
134
|
-
var hooks = [reactTable.useResizeColumns, reactTable.useFilters, reactTable.useGlobalFilter, reactTable.useGroupBy, reactTable.useSortBy, reactTable.useExpanded, reactTable.usePagination, reactTable.useRowSelect];
|
|
135
|
-
if (props.enableColumnResizing) hooks.unshift(reactTable.useFlexLayout);
|
|
136
|
-
var tableInstance = reactTable.useTable.apply(void 0, [props].concat(hooks));
|
|
137
|
-
var mrtCalcs = useMRTCalcs({
|
|
138
|
-
tableInstance: tableInstance
|
|
139
|
-
});
|
|
140
120
|
|
|
141
|
-
var _useState = React.useState(
|
|
142
|
-
|
|
143
|
-
|
|
121
|
+
var _useState = React.useState(null),
|
|
122
|
+
currentEditingRow = _useState[0],
|
|
123
|
+
setCurrentEditingRow = _useState[1];
|
|
144
124
|
|
|
145
125
|
var _useState2 = React.useState((_props$defaultDensePa = props.defaultDensePadding) != null ? _props$defaultDensePa : false),
|
|
146
126
|
densePadding = _useState2[0],
|
|
147
127
|
setDensePadding = _useState2[1];
|
|
148
128
|
|
|
149
|
-
var _useState3 = React.useState(null),
|
|
150
|
-
|
|
151
|
-
|
|
129
|
+
var _useState3 = React.useState((_props$defaultFullScr = props.defaultFullScreen) != null ? _props$defaultFullScr : false),
|
|
130
|
+
fullScreen = _useState3[0],
|
|
131
|
+
setFullScreen = _useState3[1];
|
|
132
|
+
|
|
133
|
+
var _useState4 = React.useState((_props$defaultShowFil = props.defaultShowFilters) != null ? _props$defaultShowFil : false),
|
|
134
|
+
showFilters = _useState4[0],
|
|
135
|
+
setShowFilters = _useState4[1];
|
|
136
|
+
|
|
137
|
+
var _useState5 = React.useState((_props$defaultShowSea = props.defaultShowSearchTextField) != null ? _props$defaultShowSea : false),
|
|
138
|
+
showSearch = _useState5[0],
|
|
139
|
+
setShowSearch = _useState5[1];
|
|
152
140
|
|
|
153
141
|
return React__default.createElement(MaterialReactTableContext.Provider, {
|
|
154
|
-
value: _extends({},
|
|
142
|
+
value: _extends({}, props, {
|
|
143
|
+
anyRowsCanExpand: anyRowsCanExpand,
|
|
144
|
+
anyRowsExpanded: anyRowsExpanded,
|
|
145
|
+
currentEditingRow: currentEditingRow,
|
|
155
146
|
densePadding: densePadding,
|
|
147
|
+
setCurrentEditingRow: setCurrentEditingRow,
|
|
156
148
|
setDensePadding: setDensePadding,
|
|
149
|
+
fullScreen: fullScreen,
|
|
150
|
+
setFullScreen: setFullScreen,
|
|
157
151
|
setShowFilters: setShowFilters,
|
|
158
|
-
|
|
159
|
-
setCurrentEditingRowId: setCurrentEditingRowId,
|
|
152
|
+
setShowSearch: setShowSearch,
|
|
160
153
|
showFilters: showFilters,
|
|
161
|
-
|
|
154
|
+
showSearch: showSearch,
|
|
155
|
+
//@ts-ignore
|
|
162
156
|
tableInstance: tableInstance
|
|
163
157
|
})
|
|
164
158
|
}, props.children);
|
|
165
159
|
};
|
|
166
|
-
var
|
|
160
|
+
var useMRT = function useMRT() {
|
|
167
161
|
return (//@ts-ignore
|
|
168
162
|
React.useContext(MaterialReactTableContext)
|
|
169
163
|
);
|
|
170
164
|
};
|
|
171
165
|
|
|
172
|
-
var
|
|
166
|
+
var MRT_FilterTextField = function MRT_FilterTextField(_ref) {
|
|
167
|
+
var _localization$filterT, _localization$filterT2, _localization$filterT3, _localization$filterT4;
|
|
168
|
+
|
|
173
169
|
var column = _ref.column;
|
|
174
170
|
|
|
175
|
-
var
|
|
176
|
-
localization =
|
|
171
|
+
var _useMRT = useMRT(),
|
|
172
|
+
localization = _useMRT.localization;
|
|
177
173
|
|
|
178
174
|
var _useState = React.useState(''),
|
|
179
175
|
filterValue = _useState[0],
|
|
@@ -189,15 +185,21 @@ var MRT_FilterTextfield = function MRT_FilterTextfield(_ref) {
|
|
|
189
185
|
};
|
|
190
186
|
|
|
191
187
|
if (column.Filter) {
|
|
192
|
-
|
|
193
|
-
return React__default.createElement(React__default.Fragment, null, column.Filter({
|
|
188
|
+
return React__default.createElement(React__default.Fragment, null, column.Filter == null ? void 0 : column.Filter({
|
|
194
189
|
column: column
|
|
195
190
|
}));
|
|
196
191
|
}
|
|
197
192
|
|
|
198
193
|
return React__default.createElement(material.TextField, {
|
|
194
|
+
fullWidth: true,
|
|
195
|
+
id: "filter-" + column.id + "-column",
|
|
196
|
+
inputProps: {
|
|
197
|
+
style: {
|
|
198
|
+
textOverflow: 'ellipsis'
|
|
199
|
+
}
|
|
200
|
+
},
|
|
199
201
|
margin: "dense",
|
|
200
|
-
placeholder: localization == null ? void 0 : localization.filterTextFieldPlaceholder,
|
|
202
|
+
placeholder: localization == null ? void 0 : (_localization$filterT = localization.filterTextFieldPlaceholder) == null ? void 0 : _localization$filterT.replace('{column}', String(column.Header)),
|
|
201
203
|
onChange: function onChange(e) {
|
|
202
204
|
setFilterValue(e.target.value);
|
|
203
205
|
handleChange(e.target.value);
|
|
@@ -208,20 +210,25 @@ var MRT_FilterTextfield = function MRT_FilterTextfield(_ref) {
|
|
|
208
210
|
value: filterValue != null ? filterValue : '',
|
|
209
211
|
variant: "standard",
|
|
210
212
|
InputProps: {
|
|
211
|
-
startAdornment: React__default.createElement(material.
|
|
213
|
+
startAdornment: React__default.createElement(material.Tooltip, {
|
|
214
|
+
arrow: true,
|
|
215
|
+
title: (_localization$filterT2 = localization == null ? void 0 : (_localization$filterT3 = localization.filterTextFieldPlaceholder) == null ? void 0 : _localization$filterT3.replace('{column}', String(column.Header))) != null ? _localization$filterT2 : ''
|
|
216
|
+
}, React__default.createElement(material.InputAdornment, {
|
|
212
217
|
position: "start"
|
|
213
|
-
}, React__default.createElement(FilterIcon, null)),
|
|
218
|
+
}, React__default.createElement(FilterIcon, null))),
|
|
214
219
|
endAdornment: React__default.createElement(material.InputAdornment, {
|
|
215
220
|
position: "end"
|
|
216
|
-
}, React__default.createElement(material.
|
|
221
|
+
}, React__default.createElement(material.Tooltip, {
|
|
222
|
+
arrow: true,
|
|
223
|
+
title: (_localization$filterT4 = localization == null ? void 0 : localization.filterTextFieldClearButtonTitle) != null ? _localization$filterT4 : ''
|
|
224
|
+
}, React__default.createElement("span", null, React__default.createElement(material.IconButton, {
|
|
217
225
|
"aria-label": localization == null ? void 0 : localization.filterTextFieldClearButtonTitle,
|
|
218
226
|
disabled: (filterValue == null ? void 0 : filterValue.length) === 0,
|
|
219
227
|
onClick: handleClear,
|
|
220
|
-
size: "small"
|
|
221
|
-
title: localization == null ? void 0 : localization.filterTextFieldClearButtonTitle
|
|
228
|
+
size: "small"
|
|
222
229
|
}, React__default.createElement(CloseIcon, {
|
|
223
230
|
fontSize: "small"
|
|
224
|
-
})))
|
|
231
|
+
})))))
|
|
225
232
|
}
|
|
226
233
|
});
|
|
227
234
|
};
|
|
@@ -231,15 +238,19 @@ var MenuItem = /*#__PURE__*/material.styled(material.MenuItem)({
|
|
|
231
238
|
gap: '0.75rem'
|
|
232
239
|
});
|
|
233
240
|
var MRT_ColumnActionMenu = function MRT_ColumnActionMenu(_ref) {
|
|
241
|
+
var _localization$columnA, _localization$columnA2, _localization$filterT, _localization, _localization$columnA3;
|
|
242
|
+
|
|
234
243
|
var anchorEl = _ref.anchorEl,
|
|
235
244
|
column = _ref.column,
|
|
236
245
|
setAnchorEl = _ref.setAnchorEl;
|
|
237
246
|
|
|
238
|
-
var
|
|
239
|
-
disableColumnHiding =
|
|
240
|
-
|
|
241
|
-
disableSortBy =
|
|
242
|
-
|
|
247
|
+
var _useMRT = useMRT(),
|
|
248
|
+
disableColumnHiding = _useMRT.disableColumnHiding,
|
|
249
|
+
disableFilters = _useMRT.disableFilters,
|
|
250
|
+
disableSortBy = _useMRT.disableSortBy,
|
|
251
|
+
enableColumnGrouping = _useMRT.enableColumnGrouping,
|
|
252
|
+
localization = _useMRT.localization,
|
|
253
|
+
setShowFilters = _useMRT.setShowFilters;
|
|
243
254
|
|
|
244
255
|
var handleClearSort = function handleClearSort() {
|
|
245
256
|
column.clearSortBy();
|
|
@@ -266,6 +277,17 @@ var MRT_ColumnActionMenu = function MRT_ColumnActionMenu(_ref) {
|
|
|
266
277
|
setAnchorEl(null);
|
|
267
278
|
};
|
|
268
279
|
|
|
280
|
+
var handleFilterByColumn = function handleFilterByColumn() {
|
|
281
|
+
setShowFilters(true);
|
|
282
|
+
setTimeout(function () {
|
|
283
|
+
var _document$getElementB, _column$muiTableHeadC, _column$muiTableHeadC2;
|
|
284
|
+
|
|
285
|
+
return (_document$getElementB = document.getElementById( // @ts-ignore
|
|
286
|
+
(_column$muiTableHeadC = (_column$muiTableHeadC2 = column.muiTableHeadCellFilterTextFieldProps) == null ? void 0 : _column$muiTableHeadC2.id) != null ? _column$muiTableHeadC : "filter-" + column.id + "-column")) == null ? void 0 : _document$getElementB.focus();
|
|
287
|
+
}, 200);
|
|
288
|
+
setAnchorEl(null);
|
|
289
|
+
};
|
|
290
|
+
|
|
269
291
|
return React__default.createElement(material.Menu, {
|
|
270
292
|
anchorEl: anchorEl,
|
|
271
293
|
open: !!anchorEl,
|
|
@@ -280,7 +302,7 @@ var MRT_ColumnActionMenu = function MRT_ColumnActionMenu(_ref) {
|
|
|
280
302
|
key: 2,
|
|
281
303
|
disabled: column.isSorted && !column.isSortedDesc,
|
|
282
304
|
onClick: handleSortAsc
|
|
283
|
-
}, React__default.createElement(SortIcon, null),
|
|
305
|
+
}, React__default.createElement(SortIcon, null), ' ', localization == null ? void 0 : (_localization$columnA = localization.columnActionMenuItemSortAsc) == null ? void 0 : _localization$columnA.replace('{column}', String(column.Header))), React__default.createElement(MenuItem, {
|
|
284
306
|
key: 3,
|
|
285
307
|
disabled: column.isSorted && column.isSortedDesc,
|
|
286
308
|
onClick: handleSortDesc
|
|
@@ -288,25 +310,30 @@ var MRT_ColumnActionMenu = function MRT_ColumnActionMenu(_ref) {
|
|
|
288
310
|
style: {
|
|
289
311
|
transform: 'rotate(180deg) scaleX(-1)'
|
|
290
312
|
}
|
|
291
|
-
}), ' ', localization == null ? void 0 : localization.columnActionMenuItemSortDesc), React__default.createElement(material.Divider, {
|
|
292
|
-
key:
|
|
293
|
-
})
|
|
294
|
-
|
|
295
|
-
|
|
296
|
-
|
|
297
|
-
|
|
298
|
-
}
|
|
299
|
-
|
|
313
|
+
}), ' ', localization == null ? void 0 : (_localization$columnA2 = localization.columnActionMenuItemSortDesc) == null ? void 0 : _localization$columnA2.replace('{column}', String(column.Header)))], !disableFilters && column.canFilter && [React__default.createElement(material.Divider, {
|
|
314
|
+
key: 0
|
|
315
|
+
}), React__default.createElement(MenuItem, {
|
|
316
|
+
key: 1,
|
|
317
|
+
onClick: handleFilterByColumn
|
|
318
|
+
}, React__default.createElement(FilterIcon, null), ' ', localization == null ? void 0 : (_localization$filterT = localization.filterTextFieldPlaceholder) == null ? void 0 : _localization$filterT.replace('{column}', String(column.Header)))], enableColumnGrouping && column.canGroupBy && [React__default.createElement(material.Divider, {
|
|
319
|
+
key: 1
|
|
320
|
+
}), React__default.createElement(MenuItem, {
|
|
321
|
+
key: 2,
|
|
300
322
|
onClick: handleGroupByColumn
|
|
301
|
-
}, React__default.createElement(DynamicFeedIcon, null),
|
|
323
|
+
}, React__default.createElement(DynamicFeedIcon, null), ' ', localization == null ? void 0 : (_localization = localization[column.isGrouped ? 'columnActionMenuItemUnGroupBy' : 'columnActionMenuItemGroupBy']) == null ? void 0 : _localization.replace('{column}', String(column.Header)))], !disableColumnHiding && [React__default.createElement(material.Divider, {
|
|
324
|
+
key: 0
|
|
325
|
+
}), React__default.createElement(MenuItem, {
|
|
326
|
+
key: 1,
|
|
327
|
+
onClick: handleHideColumn
|
|
328
|
+
}, React__default.createElement(VisibilityOffIcon, null), ' ', localization == null ? void 0 : (_localization$columnA3 = localization.columnActionMenuItemHideColumn) == null ? void 0 : _localization$columnA3.replace('{column}', String(column.Header)))]);
|
|
302
329
|
};
|
|
303
330
|
|
|
304
331
|
var IconButton = /*#__PURE__*/material.styled(material.IconButton)({
|
|
305
332
|
opacity: 0.5,
|
|
306
333
|
transition: 'opacity 0.2s',
|
|
307
334
|
marginRight: '2px',
|
|
308
|
-
height: '
|
|
309
|
-
width: '
|
|
335
|
+
height: '1.6rem',
|
|
336
|
+
width: '1.6rem',
|
|
310
337
|
'&:hover': {
|
|
311
338
|
opacity: 1
|
|
312
339
|
}
|
|
@@ -314,8 +341,8 @@ var IconButton = /*#__PURE__*/material.styled(material.IconButton)({
|
|
|
314
341
|
var MRT_ToggleColumnActionMenuButton = function MRT_ToggleColumnActionMenuButton(_ref) {
|
|
315
342
|
var column = _ref.column;
|
|
316
343
|
|
|
317
|
-
var
|
|
318
|
-
localization =
|
|
344
|
+
var _useMRT = useMRT(),
|
|
345
|
+
localization = _useMRT.localization;
|
|
319
346
|
|
|
320
347
|
var _useState = React.useState(null),
|
|
321
348
|
anchorEl = _useState[0],
|
|
@@ -329,9 +356,9 @@ var MRT_ToggleColumnActionMenuButton = function MRT_ToggleColumnActionMenuButton
|
|
|
329
356
|
|
|
330
357
|
return React__default.createElement(React__default.Fragment, null, React__default.createElement(IconButton, {
|
|
331
358
|
"aria-label": localization == null ? void 0 : localization.columnActionMenuButtonTitle,
|
|
332
|
-
title: localization == null ? void 0 : localization.columnActionMenuButtonTitle,
|
|
333
359
|
onClick: handleClick,
|
|
334
|
-
size: "small"
|
|
360
|
+
size: "small",
|
|
361
|
+
title: localization == null ? void 0 : localization.columnActionMenuButtonTitle
|
|
335
362
|
}, React__default.createElement(MoreVertIcon, null)), React__default.createElement(MRT_ColumnActionMenu, {
|
|
336
363
|
anchorEl: anchorEl,
|
|
337
364
|
column: column,
|
|
@@ -339,66 +366,78 @@ var MRT_ToggleColumnActionMenuButton = function MRT_ToggleColumnActionMenuButton
|
|
|
339
366
|
}));
|
|
340
367
|
};
|
|
341
368
|
|
|
342
|
-
var
|
|
343
|
-
|
|
344
|
-
|
|
369
|
+
var MRT_StyledTableHeadCell = /*#__PURE__*/material.styled(material.TableCell, {
|
|
370
|
+
shouldForwardProp: function shouldForwardProp(prop) {
|
|
371
|
+
return prop !== 'densePadding' && prop !== 'enableColumnResizing';
|
|
372
|
+
}
|
|
373
|
+
})(function (_ref) {
|
|
374
|
+
var densePadding = _ref.densePadding,
|
|
375
|
+
enableColumnResizing = _ref.enableColumnResizing;
|
|
376
|
+
return {
|
|
377
|
+
fontWeight: 'bold',
|
|
378
|
+
height: '100%',
|
|
379
|
+
padding: densePadding ? '0.5rem' : '1rem',
|
|
380
|
+
paddingTop: densePadding ? '0.75rem' : '1.25rem',
|
|
381
|
+
transition: "all " + (enableColumnResizing ? '10ms' : '0.2s') + " ease-in-out",
|
|
382
|
+
verticalAlign: 'text-top'
|
|
383
|
+
};
|
|
345
384
|
});
|
|
346
|
-
var
|
|
347
|
-
|
|
385
|
+
var TableCellWrapper = /*#__PURE__*/material.styled('div')({
|
|
386
|
+
alignContent: 'space-between',
|
|
387
|
+
display: 'grid',
|
|
388
|
+
height: '100%'
|
|
348
389
|
});
|
|
349
|
-
var
|
|
390
|
+
var TableCellTopContents = /*#__PURE__*/material.styled('div')({
|
|
350
391
|
width: '100%',
|
|
351
392
|
display: 'flex',
|
|
352
|
-
justifyContent: 'space-between'
|
|
393
|
+
justifyContent: 'space-between',
|
|
394
|
+
alignItems: 'flex-start'
|
|
353
395
|
});
|
|
354
396
|
var CellFlexItem = /*#__PURE__*/material.styled('span')({
|
|
397
|
+
alignItems: 'center',
|
|
355
398
|
display: 'flex',
|
|
356
|
-
flexWrap: 'nowrap'
|
|
357
|
-
alignItems: 'center'
|
|
399
|
+
flexWrap: 'nowrap'
|
|
358
400
|
});
|
|
359
401
|
var Divider = /*#__PURE__*/material.styled(material.Divider)({
|
|
360
402
|
borderRightWidth: '2px',
|
|
361
403
|
borderRadius: '2px',
|
|
362
404
|
maxHeight: '2rem'
|
|
363
405
|
});
|
|
364
|
-
var MRT_TableHeadCell = function MRT_TableHeadCell(
|
|
365
|
-
var _column$columns$lengt, _column$columns, _mTableHeadCellProps
|
|
406
|
+
var MRT_TableHeadCell = function MRT_TableHeadCell(_ref2) {
|
|
407
|
+
var _column$columns$lengt, _column$columns, _mTableHeadCellProps$, _mcTableHeadCellProps;
|
|
366
408
|
|
|
367
|
-
var column =
|
|
409
|
+
var column = _ref2.column;
|
|
368
410
|
|
|
369
|
-
var
|
|
370
|
-
densePadding =
|
|
371
|
-
disableColumnActions =
|
|
372
|
-
disableFilters =
|
|
373
|
-
enableColumnResizing =
|
|
374
|
-
localization =
|
|
375
|
-
muiTableHeadCellProps =
|
|
376
|
-
showFilters =
|
|
377
|
-
tableInstance =
|
|
411
|
+
var _useMRT = useMRT(),
|
|
412
|
+
densePadding = _useMRT.densePadding,
|
|
413
|
+
disableColumnActions = _useMRT.disableColumnActions,
|
|
414
|
+
disableFilters = _useMRT.disableFilters,
|
|
415
|
+
enableColumnResizing = _useMRT.enableColumnResizing,
|
|
416
|
+
localization = _useMRT.localization,
|
|
417
|
+
muiTableHeadCellProps = _useMRT.muiTableHeadCellProps,
|
|
418
|
+
showFilters = _useMRT.showFilters,
|
|
419
|
+
tableInstance = _useMRT.tableInstance;
|
|
378
420
|
|
|
379
421
|
var isParentHeader = ((_column$columns$lengt = column == null ? void 0 : (_column$columns = column.columns) == null ? void 0 : _column$columns.length) != null ? _column$columns$lengt : 0) > 0;
|
|
380
422
|
var mTableHeadCellProps = muiTableHeadCellProps instanceof Function ? muiTableHeadCellProps(column) : muiTableHeadCellProps;
|
|
423
|
+
var mcTableHeadCellProps = column.muiTableHeadCellProps instanceof Function ? column.muiTableHeadCellProps(column) : column.muiTableHeadCellProps;
|
|
381
424
|
|
|
382
|
-
var tableCellProps = _extends({}, mTableHeadCellProps, column.getHeaderProps(), {
|
|
383
|
-
style: _extends({
|
|
384
|
-
padding: densePadding ? '0.5rem' : '1rem',
|
|
385
|
-
transition: "all " + (enableColumnResizing ? '10ms' : '0.2s') + " ease-in-out"
|
|
386
|
-
}, column.getHeaderProps().style, (_mTableHeadCellProps$ = mTableHeadCellProps == null ? void 0 : mTableHeadCellProps.style) != null ? _mTableHeadCellProps$ : {})
|
|
425
|
+
var tableCellProps = _extends({}, mTableHeadCellProps, mcTableHeadCellProps, column.getHeaderProps(), {
|
|
426
|
+
style: _extends({}, column.getHeaderProps().style, (_mTableHeadCellProps$ = mTableHeadCellProps == null ? void 0 : mTableHeadCellProps.style) != null ? _mTableHeadCellProps$ : {}, (_mcTableHeadCellProps = mcTableHeadCellProps == null ? void 0 : mcTableHeadCellProps.style) != null ? _mcTableHeadCellProps : {})
|
|
387
427
|
});
|
|
388
428
|
|
|
389
|
-
return React__default.createElement(
|
|
390
|
-
align: isParentHeader ? 'center' : 'left'
|
|
391
|
-
|
|
429
|
+
return React__default.createElement(MRT_StyledTableHeadCell, Object.assign({
|
|
430
|
+
align: isParentHeader ? 'center' : 'left',
|
|
431
|
+
densePadding: densePadding,
|
|
432
|
+
enableColumnResizing: enableColumnResizing
|
|
433
|
+
}, tableCellProps), React__default.createElement(TableCellWrapper, null, React__default.createElement(TableCellTopContents, {
|
|
392
434
|
style: {
|
|
393
435
|
justifyContent: isParentHeader ? 'center' : undefined
|
|
394
436
|
}
|
|
395
437
|
}, React__default.createElement(CellFlexItem, Object.assign({}, column.getSortByToggleProps()), column.render('Header'), !isParentHeader && column.canSort && React__default.createElement(material.TableSortLabel, {
|
|
396
438
|
"aria-label": column.isSorted ? column.sortDescFirst ? localization == null ? void 0 : localization.columnActionMenuItemClearSort : localization == null ? void 0 : localization.columnActionMenuItemSortDesc : localization == null ? void 0 : localization.columnActionMenuItemSortAsc,
|
|
397
439
|
active: column.isSorted,
|
|
398
|
-
direction: column.isSortedDesc ? 'desc' : 'asc'
|
|
399
|
-
style: {
|
|
400
|
-
margin: 0
|
|
401
|
-
}
|
|
440
|
+
direction: column.isSortedDesc ? 'desc' : 'asc'
|
|
402
441
|
})), React__default.createElement(CellFlexItem, null, !disableColumnActions && !isParentHeader && React__default.createElement(MRT_ToggleColumnActionMenuButton, {
|
|
403
442
|
column: column
|
|
404
443
|
}), enableColumnResizing && !isParentHeader && React__default.createElement(Divider, Object.assign({
|
|
@@ -409,91 +448,120 @@ var MRT_TableHeadCell = function MRT_TableHeadCell(_ref) {
|
|
|
409
448
|
}
|
|
410
449
|
}, column.getResizerProps())))), !disableFilters && column.canFilter && React__default.createElement(material.Collapse, {
|
|
411
450
|
"in": showFilters
|
|
412
|
-
}, React__default.createElement(
|
|
451
|
+
}, React__default.createElement(MRT_FilterTextField, {
|
|
413
452
|
column: column
|
|
414
453
|
}))));
|
|
415
454
|
};
|
|
416
455
|
|
|
456
|
+
var MRT_TableButtonCell = /*#__PURE__*/material.styled(material.TableCell, {
|
|
457
|
+
shouldForwardProp: function shouldForwardProp(prop) {
|
|
458
|
+
return prop !== 'densePadding';
|
|
459
|
+
}
|
|
460
|
+
})(function (_ref) {
|
|
461
|
+
var densePadding = _ref.densePadding;
|
|
462
|
+
return {
|
|
463
|
+
padding: densePadding ? '1px' : '0.6rem',
|
|
464
|
+
textAlign: 'center',
|
|
465
|
+
transition: 'all 0.2s ease-in-out'
|
|
466
|
+
};
|
|
467
|
+
});
|
|
468
|
+
|
|
417
469
|
var MRT_SelectAllCheckbox = function MRT_SelectAllCheckbox() {
|
|
418
|
-
var
|
|
419
|
-
tableInstance = _useMaterialReactTabl.tableInstance,
|
|
420
|
-
disableSelectAll = _useMaterialReactTabl.disableSelectAll,
|
|
421
|
-
densePadding = _useMaterialReactTabl.densePadding;
|
|
470
|
+
var _localization$selectA;
|
|
422
471
|
|
|
423
|
-
|
|
424
|
-
|
|
425
|
-
|
|
426
|
-
|
|
427
|
-
|
|
428
|
-
|
|
472
|
+
var _useMRT = useMRT(),
|
|
473
|
+
tableInstance = _useMRT.tableInstance,
|
|
474
|
+
disableSelectAll = _useMRT.disableSelectAll,
|
|
475
|
+
densePadding = _useMRT.densePadding,
|
|
476
|
+
localization = _useMRT.localization;
|
|
477
|
+
|
|
478
|
+
return React__default.createElement(MRT_TableButtonCell, {
|
|
479
|
+
densePadding: densePadding,
|
|
429
480
|
variant: "head"
|
|
430
481
|
}, !disableSelectAll ? React__default.createElement(material.Checkbox, Object.assign({
|
|
431
|
-
|
|
482
|
+
inputProps: {
|
|
483
|
+
'aria-label': (_localization$selectA = localization == null ? void 0 : localization.selectAllCheckboxTitle) != null ? _localization$selectA : ''
|
|
484
|
+
}
|
|
432
485
|
}, tableInstance.getToggleAllPageRowsSelectedProps())) : null);
|
|
433
486
|
};
|
|
434
487
|
|
|
488
|
+
var ArrowRightIcon = /*#__PURE__*/material.styled(MuiArrowRightIcon, {
|
|
489
|
+
shouldForwardProp: function shouldForwardProp(prop) {
|
|
490
|
+
return prop !== 'rotation';
|
|
491
|
+
}
|
|
492
|
+
})(function (_ref) {
|
|
493
|
+
var rotation = _ref.rotation;
|
|
494
|
+
return {
|
|
495
|
+
transform: "rotate(" + rotation + "deg)",
|
|
496
|
+
transition: 'transform 0.2s'
|
|
497
|
+
};
|
|
498
|
+
});
|
|
435
499
|
var MRT_ExpandAllButton = function MRT_ExpandAllButton() {
|
|
436
|
-
var
|
|
437
|
-
tableInstance =
|
|
438
|
-
localization =
|
|
439
|
-
anyRowsExpanded =
|
|
440
|
-
densePadding =
|
|
441
|
-
|
|
442
|
-
|
|
443
|
-
|
|
444
|
-
|
|
445
|
-
}, tableInstance.getToggleAllRowsExpandedProps(), {
|
|
446
|
-
style: {
|
|
447
|
-
padding: densePadding ? '0' : '0.5rem 0.5rem',
|
|
448
|
-
transition: 'all 0.2s ease-in-out',
|
|
449
|
-
width: (renderDetailPanel ? 2 : tableInstance.expandedDepth + 2) + "rem"
|
|
450
|
-
}
|
|
451
|
-
}), React__default.createElement(material.IconButton, {
|
|
500
|
+
var _useMRT = useMRT(),
|
|
501
|
+
tableInstance = _useMRT.tableInstance,
|
|
502
|
+
localization = _useMRT.localization,
|
|
503
|
+
anyRowsExpanded = _useMRT.anyRowsExpanded,
|
|
504
|
+
densePadding = _useMRT.densePadding;
|
|
505
|
+
|
|
506
|
+
return React__default.createElement(MRT_TableButtonCell, Object.assign({
|
|
507
|
+
size: "small",
|
|
508
|
+
densePadding: densePadding
|
|
509
|
+
}, tableInstance.getToggleAllRowsExpandedProps()), React__default.createElement(material.IconButton, {
|
|
452
510
|
"aria-label": localization == null ? void 0 : localization.expandAllButtonTitle,
|
|
453
511
|
title: localization == null ? void 0 : localization.expandAllButtonTitle
|
|
454
512
|
}, React__default.createElement(ArrowRightIcon, {
|
|
455
513
|
fontSize: "small",
|
|
456
|
-
|
|
457
|
-
transform: tableInstance.isAllRowsExpanded ? 'rotate(-180deg)' : anyRowsExpanded ? 'rotate(-90deg)' : 'rotate(0)',
|
|
458
|
-
transition: 'transform 0.2s'
|
|
459
|
-
}
|
|
514
|
+
rotation: tableInstance.isAllRowsExpanded ? -180 : anyRowsExpanded ? -90 : 0
|
|
460
515
|
})));
|
|
461
516
|
};
|
|
462
517
|
|
|
463
518
|
var MRT_TableSpacerCell = function MRT_TableSpacerCell(_ref) {
|
|
464
|
-
var
|
|
519
|
+
var _mTableBodyCellrops$s;
|
|
465
520
|
|
|
466
521
|
var width = _ref.width;
|
|
467
522
|
|
|
468
|
-
var
|
|
469
|
-
muiTableBodyCellProps =
|
|
523
|
+
var _useMRT = useMRT(),
|
|
524
|
+
muiTableBodyCellProps = _useMRT.muiTableBodyCellProps;
|
|
470
525
|
|
|
471
|
-
var
|
|
526
|
+
var mTableBodyCellrops = muiTableBodyCellProps instanceof Function ? muiTableBodyCellProps() : muiTableBodyCellProps;
|
|
472
527
|
|
|
473
|
-
var tableCellProps = _extends({},
|
|
528
|
+
var tableCellProps = _extends({}, mTableBodyCellrops, {
|
|
474
529
|
style: _extends({
|
|
475
530
|
width: width
|
|
476
|
-
}, (
|
|
531
|
+
}, (_mTableBodyCellrops$s = mTableBodyCellrops == null ? void 0 : mTableBodyCellrops.style) != null ? _mTableBodyCellrops$s : {})
|
|
477
532
|
});
|
|
478
533
|
|
|
479
534
|
return React__default.createElement(material.TableCell, Object.assign({}, tableCellProps));
|
|
480
535
|
};
|
|
481
536
|
|
|
537
|
+
var MRT_TableHeadCellActions = function MRT_TableHeadCellActions() {
|
|
538
|
+
var _useMRT = useMRT(),
|
|
539
|
+
densePadding = _useMRT.densePadding,
|
|
540
|
+
localization = _useMRT.localization;
|
|
541
|
+
|
|
542
|
+
return React__default.createElement(MRT_StyledTableHeadCell, {
|
|
543
|
+
densePadding: densePadding,
|
|
544
|
+
style: {
|
|
545
|
+
textAlign: 'center'
|
|
546
|
+
}
|
|
547
|
+
}, localization == null ? void 0 : localization.actionsHeadColumnTitle);
|
|
548
|
+
};
|
|
549
|
+
|
|
482
550
|
var MRT_TableHeadRow = function MRT_TableHeadRow(_ref) {
|
|
483
551
|
var _mTableHeadRowProps$s;
|
|
484
552
|
|
|
485
553
|
var headerGroup = _ref.headerGroup;
|
|
486
554
|
|
|
487
|
-
var
|
|
488
|
-
anyRowsCanExpand =
|
|
489
|
-
disableExpandAll =
|
|
490
|
-
|
|
491
|
-
|
|
492
|
-
|
|
493
|
-
muiTableHeadRowProps =
|
|
494
|
-
positionActionsColumn =
|
|
495
|
-
renderDetailPanel =
|
|
496
|
-
tableInstance =
|
|
555
|
+
var _useMRT = useMRT(),
|
|
556
|
+
anyRowsCanExpand = _useMRT.anyRowsCanExpand,
|
|
557
|
+
disableExpandAll = _useMRT.disableExpandAll,
|
|
558
|
+
enableRowNumbers = _useMRT.enableRowNumbers,
|
|
559
|
+
enableRowActions = _useMRT.enableRowActions,
|
|
560
|
+
enableSelection = _useMRT.enableSelection,
|
|
561
|
+
muiTableHeadRowProps = _useMRT.muiTableHeadRowProps,
|
|
562
|
+
positionActionsColumn = _useMRT.positionActionsColumn,
|
|
563
|
+
renderDetailPanel = _useMRT.renderDetailPanel,
|
|
564
|
+
tableInstance = _useMRT.tableInstance;
|
|
497
565
|
|
|
498
566
|
var isParentHeader = React.useMemo(function () {
|
|
499
567
|
return headerGroup.headers.some(function (h) {
|
|
@@ -508,7 +576,7 @@ var MRT_TableHeadRow = function MRT_TableHeadRow(_ref) {
|
|
|
508
576
|
style: _extends({}, headerGroup.getHeaderGroupProps().style, (_mTableHeadRowProps$s = mTableHeadRowProps == null ? void 0 : mTableHeadRowProps.style) != null ? _mTableHeadRowProps$s : {})
|
|
509
577
|
});
|
|
510
578
|
|
|
511
|
-
return React__default.createElement(material.TableRow, Object.assign({}, tableRowProps),
|
|
579
|
+
return React__default.createElement(material.TableRow, Object.assign({}, tableRowProps), enableRowNumbers && (isParentHeader ? React__default.createElement(MRT_TableSpacerCell, null) : React__default.createElement(MRT_StyledTableHeadCell, null, "#")), enableRowActions && positionActionsColumn === 'first' && (isParentHeader ? React__default.createElement(MRT_TableSpacerCell, null) : React__default.createElement(MRT_TableHeadCellActions, null)), anyRowsCanExpand || renderDetailPanel ? !disableExpandAll && !isParentHeader ? React__default.createElement(MRT_ExpandAllButton, null) : React__default.createElement(MRT_TableSpacerCell, {
|
|
512
580
|
width: (renderDetailPanel ? 2 : tableInstance.expandedDepth + 0.5) + "rem"
|
|
513
581
|
}) : null, enableSelection ? !isParentHeader ? React__default.createElement(MRT_SelectAllCheckbox, null) : React__default.createElement(MRT_TableSpacerCell, {
|
|
514
582
|
width: "1rem"
|
|
@@ -517,60 +585,132 @@ var MRT_TableHeadRow = function MRT_TableHeadRow(_ref) {
|
|
|
517
585
|
key: column.getHeaderProps().key,
|
|
518
586
|
column: column
|
|
519
587
|
});
|
|
520
|
-
}), enableRowActions && positionActionsColumn === 'last' && (isParentHeader ? React__default.createElement(MRT_TableSpacerCell, null) : React__default.createElement(
|
|
588
|
+
}), enableRowActions && positionActionsColumn === 'last' && (isParentHeader ? React__default.createElement(MRT_TableSpacerCell, null) : React__default.createElement(MRT_TableHeadCellActions, null)));
|
|
521
589
|
};
|
|
522
590
|
|
|
523
591
|
var MRT_TableHead = function MRT_TableHead() {
|
|
524
|
-
var
|
|
525
|
-
tableInstance =
|
|
526
|
-
muiTableHeadProps =
|
|
592
|
+
var _useMRT = useMRT(),
|
|
593
|
+
tableInstance = _useMRT.tableInstance,
|
|
594
|
+
muiTableHeadProps = _useMRT.muiTableHeadProps;
|
|
527
595
|
|
|
528
596
|
var tableHeadProps = muiTableHeadProps instanceof Function ? muiTableHeadProps(tableInstance) : muiTableHeadProps;
|
|
529
|
-
return React__default.createElement(material.TableHead, Object.assign({}, tableHeadProps), tableInstance.headerGroups.map(function (headerGroup
|
|
597
|
+
return React__default.createElement(material.TableHead, Object.assign({}, tableHeadProps), tableInstance.headerGroups.map(function (headerGroup) {
|
|
530
598
|
return React__default.createElement(MRT_TableHeadRow, {
|
|
531
|
-
key:
|
|
599
|
+
key: headerGroup.getHeaderGroupProps().key,
|
|
532
600
|
headerGroup: headerGroup
|
|
533
601
|
});
|
|
534
602
|
}));
|
|
535
603
|
};
|
|
536
604
|
|
|
537
|
-
var
|
|
538
|
-
var
|
|
605
|
+
var MRT_EditCellTextField = function MRT_EditCellTextField(_ref) {
|
|
606
|
+
var _cell$column$muiTable;
|
|
539
607
|
|
|
540
608
|
var cell = _ref.cell;
|
|
541
609
|
|
|
542
|
-
var
|
|
543
|
-
|
|
544
|
-
|
|
545
|
-
|
|
610
|
+
var _useMRT = useMRT(),
|
|
611
|
+
currentEditingRow = _useMRT.currentEditingRow,
|
|
612
|
+
localization = _useMRT.localization,
|
|
613
|
+
muiTableBodyCellEditTextFieldProps = _useMRT.muiTableBodyCellEditTextFieldProps,
|
|
614
|
+
setCurrentEditingRow = _useMRT.setCurrentEditingRow;
|
|
615
|
+
|
|
616
|
+
var handleChange = function handleChange(event) {
|
|
617
|
+
if (currentEditingRow) {
|
|
618
|
+
cell.row.values[cell.column.id] = event.target.value;
|
|
619
|
+
setCurrentEditingRow(_extends({}, currentEditingRow));
|
|
620
|
+
}
|
|
621
|
+
|
|
622
|
+
cell.column.onCellEditChange == null ? void 0 : cell.column.onCellEditChange(event, cell);
|
|
623
|
+
};
|
|
624
|
+
|
|
625
|
+
var mTableBodyCellEditTextFieldProps = muiTableBodyCellEditTextFieldProps instanceof Function ? muiTableBodyCellEditTextFieldProps(cell) : muiTableBodyCellEditTextFieldProps;
|
|
626
|
+
var mcTableBodyCellEditTextFieldProps = cell.column.muiTableBodyCellEditTextFieldProps instanceof Function ? cell.column.muiTableBodyCellEditTextFieldProps(cell) : cell.column.muiTableBodyCellEditTextFieldProps;
|
|
627
|
+
|
|
628
|
+
var textFieldProps = _extends({}, mTableBodyCellEditTextFieldProps, mcTableBodyCellEditTextFieldProps, {
|
|
629
|
+
style: _extends({}, muiTableBodyCellEditTextFieldProps == null ? void 0 : muiTableBodyCellEditTextFieldProps.style, (_cell$column$muiTable = cell.column.muiTableBodyCellEditTextFieldProps) == null ? void 0 : _cell$column$muiTable.style)
|
|
630
|
+
});
|
|
631
|
+
|
|
632
|
+
if (cell.column.editable && cell.column.Edit) {
|
|
633
|
+
return React__default.createElement(React__default.Fragment, null, cell.column.Edit(_extends({}, textFieldProps, {
|
|
634
|
+
cell: cell
|
|
635
|
+
})));
|
|
636
|
+
}
|
|
637
|
+
|
|
638
|
+
return React__default.createElement(material.TextField, Object.assign({
|
|
639
|
+
margin: "dense",
|
|
640
|
+
onChange: handleChange,
|
|
641
|
+
onClick: function onClick(e) {
|
|
642
|
+
return e.stopPropagation();
|
|
643
|
+
},
|
|
644
|
+
placeholder: localization == null ? void 0 : localization.filterTextFieldPlaceholder,
|
|
645
|
+
value: cell.value,
|
|
646
|
+
variant: "standard"
|
|
647
|
+
}, textFieldProps));
|
|
648
|
+
};
|
|
649
|
+
|
|
650
|
+
var MRT_StyledTableBodyCell = /*#__PURE__*/material.styled(material.TableCell, {
|
|
651
|
+
shouldForwardProp: function shouldForwardProp(prop) {
|
|
652
|
+
return prop !== 'densePadding';
|
|
653
|
+
}
|
|
654
|
+
})(function (_ref) {
|
|
655
|
+
var densePadding = _ref.densePadding;
|
|
656
|
+
return {
|
|
657
|
+
padding: densePadding ? '0.5rem' : '1rem',
|
|
658
|
+
transition: 'all 0.2s ease-in-out',
|
|
659
|
+
whiteSpace: densePadding ? 'nowrap' : 'normal'
|
|
660
|
+
};
|
|
661
|
+
});
|
|
662
|
+
var MRT_TableBodyCell = function MRT_TableBodyCell(_ref2) {
|
|
663
|
+
var _mTableCellBodyProps$, _mcTableCellBodyProps;
|
|
664
|
+
|
|
665
|
+
var cell = _ref2.cell;
|
|
666
|
+
|
|
667
|
+
var _useMRT = useMRT(),
|
|
668
|
+
onCellClick = _useMRT.onCellClick,
|
|
669
|
+
muiTableBodyCellProps = _useMRT.muiTableBodyCellProps,
|
|
670
|
+
densePadding = _useMRT.densePadding,
|
|
671
|
+
currentEditingRow = _useMRT.currentEditingRow;
|
|
546
672
|
|
|
547
673
|
var mTableCellBodyProps = muiTableBodyCellProps instanceof Function ? muiTableBodyCellProps(cell) : muiTableBodyCellProps;
|
|
674
|
+
var mcTableCellBodyProps = cell.column.muiTableBodyCellProps instanceof Function ? cell.column.muiTableBodyCellProps(cell) : cell.column.muiTableBodyCellProps;
|
|
548
675
|
|
|
549
|
-
var tableCellProps = _extends({}, mTableCellBodyProps, cell.getCellProps(), {
|
|
550
|
-
style: _extends({
|
|
551
|
-
padding: densePadding ? '0.5rem' : '1rem',
|
|
552
|
-
transition: 'all 0.2s ease-in-out'
|
|
553
|
-
}, cell.getCellProps().style, (_mTableCellBodyProps$ = mTableCellBodyProps == null ? void 0 : mTableCellBodyProps.style) != null ? _mTableCellBodyProps$ : {})
|
|
676
|
+
var tableCellProps = _extends({}, mTableCellBodyProps, mcTableCellBodyProps, cell.getCellProps(), {
|
|
677
|
+
style: _extends({}, cell.getCellProps().style, (_mTableCellBodyProps$ = mTableCellBodyProps == null ? void 0 : mTableCellBodyProps.style) != null ? _mTableCellBodyProps$ : {}, (_mcTableCellBodyProps = mcTableCellBodyProps == null ? void 0 : mcTableCellBodyProps.style) != null ? _mcTableCellBodyProps : {})
|
|
554
678
|
});
|
|
555
679
|
|
|
556
|
-
return React__default.createElement(
|
|
680
|
+
return React__default.createElement(MRT_StyledTableBodyCell, Object.assign({
|
|
681
|
+
densePadding: densePadding,
|
|
557
682
|
onClick: function onClick(event) {
|
|
558
683
|
return onCellClick == null ? void 0 : onCellClick(event, cell);
|
|
559
684
|
}
|
|
560
|
-
}, tableCellProps),
|
|
685
|
+
}, tableCellProps), (currentEditingRow == null ? void 0 : currentEditingRow.id) === cell.row.id ? React__default.createElement(MRT_EditCellTextField, {
|
|
686
|
+
cell: cell
|
|
687
|
+
}) : cell.isPlaceholder ? null : cell.isAggregated ? cell.render('Aggregated') : cell.isGrouped ? React__default.createElement("span", null, cell.render('Cell'), " (", cell.row.subRows.length, ")") : cell.render('Cell'));
|
|
561
688
|
};
|
|
562
689
|
|
|
563
|
-
var
|
|
564
|
-
|
|
690
|
+
var TableCell = /*#__PURE__*/material.styled(material.TableCell, {
|
|
691
|
+
shouldForwardProp: function shouldForwardProp(prop) {
|
|
692
|
+
return prop !== 'isExpanded';
|
|
693
|
+
}
|
|
694
|
+
})(function (_ref) {
|
|
695
|
+
var isExpanded = _ref.isExpanded;
|
|
696
|
+
return {
|
|
697
|
+
borderBottom: !isExpanded ? 'none' : undefined,
|
|
698
|
+
paddingBottom: isExpanded ? '1rem' : 0,
|
|
699
|
+
paddingTop: isExpanded ? '1rem' : 0,
|
|
700
|
+
transition: 'all 0.2s ease-in-out'
|
|
701
|
+
};
|
|
702
|
+
});
|
|
703
|
+
var MRT_TableDetailPanel = function MRT_TableDetailPanel(_ref2) {
|
|
704
|
+
var _mTableBodyRowProps$s, _mTableDetailPanelPro;
|
|
565
705
|
|
|
566
|
-
var row =
|
|
706
|
+
var row = _ref2.row;
|
|
567
707
|
|
|
568
|
-
var
|
|
569
|
-
tableInstance =
|
|
570
|
-
renderDetailPanel =
|
|
571
|
-
muiTableDetailPanelProps =
|
|
572
|
-
muiTableBodyRowProps =
|
|
573
|
-
onDetailPanelClick =
|
|
708
|
+
var _useMRT = useMRT(),
|
|
709
|
+
tableInstance = _useMRT.tableInstance,
|
|
710
|
+
renderDetailPanel = _useMRT.renderDetailPanel,
|
|
711
|
+
muiTableDetailPanelProps = _useMRT.muiTableDetailPanelProps,
|
|
712
|
+
muiTableBodyRowProps = _useMRT.muiTableBodyRowProps,
|
|
713
|
+
onDetailPanelClick = _useMRT.onDetailPanelClick;
|
|
574
714
|
|
|
575
715
|
var mTableBodyRowProps = muiTableBodyRowProps instanceof Function ? muiTableBodyRowProps(row) : muiTableBodyRowProps;
|
|
576
716
|
|
|
@@ -581,18 +721,14 @@ var MRT_TableDetailPanel = function MRT_TableDetailPanel(_ref) {
|
|
|
581
721
|
var mTableDetailPanelProps = muiTableDetailPanelProps instanceof Function ? muiTableDetailPanelProps(row) : muiTableDetailPanelProps;
|
|
582
722
|
|
|
583
723
|
var tableCellProps = _extends({}, mTableDetailPanelProps, {
|
|
584
|
-
style: _extends({
|
|
585
|
-
borderBottom: !row.isExpanded ? 'none' : undefined,
|
|
586
|
-
paddingBottom: row.isExpanded ? '1rem' : 0,
|
|
587
|
-
paddingTop: row.isExpanded ? '1rem' : 0,
|
|
588
|
-
transition: 'all 0.2s ease-in-out'
|
|
589
|
-
}, (mTableDetailPanelProps == null ? void 0 : mTableDetailPanelProps.style) || {})
|
|
724
|
+
style: _extends({}, (_mTableDetailPanelPro = mTableDetailPanelProps == null ? void 0 : mTableDetailPanelProps.style) != null ? _mTableDetailPanelPro : {})
|
|
590
725
|
});
|
|
591
726
|
|
|
592
727
|
return React__default.createElement(material.TableRow, Object.assign({
|
|
593
728
|
hover: true
|
|
594
|
-
}, tableRowProps), React__default.createElement(
|
|
729
|
+
}, tableRowProps), React__default.createElement(TableCell, Object.assign({
|
|
595
730
|
colSpan: tableInstance.visibleColumns.length + 10,
|
|
731
|
+
isExpanded: row.isExpanded,
|
|
596
732
|
onClick: function onClick(event) {
|
|
597
733
|
return onDetailPanelClick == null ? void 0 : onDetailPanelClick(event, row);
|
|
598
734
|
}
|
|
@@ -601,43 +737,58 @@ var MRT_TableDetailPanel = function MRT_TableDetailPanel(_ref) {
|
|
|
601
737
|
}, renderDetailPanel == null ? void 0 : renderDetailPanel(row))));
|
|
602
738
|
};
|
|
603
739
|
|
|
604
|
-
var
|
|
605
|
-
|
|
740
|
+
var TableCell$1 = /*#__PURE__*/material.styled(MRT_TableButtonCell, {
|
|
741
|
+
shouldForwardProp: function shouldForwardProp(prop) {
|
|
742
|
+
return prop !== 'depth';
|
|
743
|
+
}
|
|
744
|
+
})(function (_ref) {
|
|
745
|
+
var depth = _ref.depth;
|
|
746
|
+
return {
|
|
747
|
+
paddingLeft: depth + 0.5 + "rem",
|
|
748
|
+
textAlign: 'left'
|
|
749
|
+
};
|
|
750
|
+
});
|
|
751
|
+
var ExpandMoreIcon = /*#__PURE__*/material.styled(MuiExpandMoreIcon, {
|
|
752
|
+
shouldForwardProp: function shouldForwardProp(prop) {
|
|
753
|
+
return prop !== 'rotation';
|
|
754
|
+
}
|
|
755
|
+
})(function (_ref2) {
|
|
756
|
+
var rotation = _ref2.rotation;
|
|
757
|
+
return {
|
|
758
|
+
transform: "rotate(" + rotation + "deg)",
|
|
759
|
+
transition: 'transform 0.2s'
|
|
760
|
+
};
|
|
761
|
+
});
|
|
762
|
+
var MRT_ExpandButton = function MRT_ExpandButton(_ref3) {
|
|
763
|
+
var row = _ref3.row;
|
|
606
764
|
|
|
607
|
-
var
|
|
608
|
-
localization =
|
|
609
|
-
|
|
610
|
-
|
|
611
|
-
renderDetailPanel = _useMaterialReactTabl.renderDetailPanel;
|
|
765
|
+
var _useMRT = useMRT(),
|
|
766
|
+
localization = _useMRT.localization,
|
|
767
|
+
densePadding = _useMRT.densePadding,
|
|
768
|
+
renderDetailPanel = _useMRT.renderDetailPanel;
|
|
612
769
|
|
|
613
|
-
return React__default.createElement(
|
|
770
|
+
return React__default.createElement(TableCell$1, {
|
|
614
771
|
size: "small",
|
|
615
|
-
|
|
616
|
-
|
|
617
|
-
paddingLeft: row.depth + 0.5 + "rem",
|
|
618
|
-
transition: 'all 0.2s ease-in-out',
|
|
619
|
-
width: (renderDetailPanel ? 2 : tableInstance.expandedDepth - row.depth + 2) + "rem"
|
|
620
|
-
}
|
|
772
|
+
densePadding: densePadding,
|
|
773
|
+
depth: row.depth
|
|
621
774
|
}, React__default.createElement(material.IconButton, Object.assign({
|
|
622
|
-
disabled: !row.canExpand && !renderDetailPanel,
|
|
623
775
|
"aria-label": localization == null ? void 0 : localization.expandButtonTitle,
|
|
776
|
+
disabled: !row.canExpand && !renderDetailPanel,
|
|
624
777
|
title: localization == null ? void 0 : localization.expandButtonTitle
|
|
625
778
|
}, row.getToggleRowExpandedProps()), React__default.createElement(ExpandMoreIcon, {
|
|
626
779
|
fontSize: row.canExpand || renderDetailPanel ? 'medium' : 'small',
|
|
627
|
-
|
|
628
|
-
transform: !row.canExpand && !renderDetailPanel ? 'rotate(-90deg)' : row.isExpanded ? 'rotate(-180deg)' : 'rotate(0)',
|
|
629
|
-
transition: 'transform 0.2s'
|
|
630
|
-
}
|
|
780
|
+
rotation: !row.canExpand && !renderDetailPanel ? -90 : row.isExpanded ? -180 : 0
|
|
631
781
|
})));
|
|
632
782
|
};
|
|
633
783
|
|
|
634
784
|
var MRT_SelectCheckbox = function MRT_SelectCheckbox(_ref) {
|
|
635
785
|
var row = _ref.row;
|
|
636
786
|
|
|
637
|
-
var
|
|
638
|
-
tableInstance =
|
|
639
|
-
onRowSelectChange =
|
|
640
|
-
densePadding =
|
|
787
|
+
var _useMRT = useMRT(),
|
|
788
|
+
tableInstance = _useMRT.tableInstance,
|
|
789
|
+
onRowSelectChange = _useMRT.onRowSelectChange,
|
|
790
|
+
densePadding = _useMRT.densePadding,
|
|
791
|
+
localization = _useMRT.localization;
|
|
641
792
|
|
|
642
793
|
var onSelectChange = function onSelectChange(event) {
|
|
643
794
|
var _row$getToggleRowSele;
|
|
@@ -646,15 +797,14 @@ var MRT_SelectCheckbox = function MRT_SelectCheckbox(_ref) {
|
|
|
646
797
|
onRowSelectChange == null ? void 0 : onRowSelectChange(event, row, tableInstance.selectedFlatRows);
|
|
647
798
|
};
|
|
648
799
|
|
|
649
|
-
return React__default.createElement(
|
|
650
|
-
|
|
651
|
-
|
|
652
|
-
|
|
653
|
-
|
|
654
|
-
}
|
|
655
|
-
}, React__default.createElement(material.Checkbox, Object.assign({}, row.getToggleRowSelectedProps(), {
|
|
800
|
+
return React__default.createElement(MRT_TableButtonCell, {
|
|
801
|
+
densePadding: densePadding
|
|
802
|
+
}, React__default.createElement(material.Checkbox, Object.assign({
|
|
803
|
+
inputProps: {
|
|
804
|
+
'aria-label': localization == null ? void 0 : localization.selectCheckboxTitle
|
|
805
|
+
},
|
|
656
806
|
onChange: onSelectChange
|
|
657
|
-
})));
|
|
807
|
+
}, row.getToggleRowSelectedProps())));
|
|
658
808
|
};
|
|
659
809
|
|
|
660
810
|
var MenuItem$1 = /*#__PURE__*/material.styled(material.MenuItem)({
|
|
@@ -666,19 +816,14 @@ var MRT_RowActionMenu = function MRT_RowActionMenu(_ref) {
|
|
|
666
816
|
|
|
667
817
|
var anchorEl = _ref.anchorEl,
|
|
668
818
|
row = _ref.row,
|
|
819
|
+
handleEdit = _ref.handleEdit,
|
|
669
820
|
setAnchorEl = _ref.setAnchorEl;
|
|
670
821
|
|
|
671
|
-
var
|
|
672
|
-
enableRowEditing =
|
|
673
|
-
localization =
|
|
674
|
-
renderRowActionMenuItems =
|
|
675
|
-
|
|
676
|
-
tableInstance = _useMaterialReactTabl.tableInstance;
|
|
677
|
-
|
|
678
|
-
var handleEdit = function handleEdit() {
|
|
679
|
-
setCurrentEditingRowId(row.id);
|
|
680
|
-
setAnchorEl(null);
|
|
681
|
-
};
|
|
822
|
+
var _useMRT = useMRT(),
|
|
823
|
+
enableRowEditing = _useMRT.enableRowEditing,
|
|
824
|
+
localization = _useMRT.localization,
|
|
825
|
+
renderRowActionMenuItems = _useMRT.renderRowActionMenuItems,
|
|
826
|
+
tableInstance = _useMRT.tableInstance;
|
|
682
827
|
|
|
683
828
|
return React__default.createElement(material.Menu, {
|
|
684
829
|
anchorEl: anchorEl,
|
|
@@ -1462,13 +1607,15 @@ var MRT_EditActionButtons = function MRT_EditActionButtons(_ref) {
|
|
|
1462
1607
|
|
|
1463
1608
|
var row = _ref.row;
|
|
1464
1609
|
|
|
1465
|
-
var
|
|
1466
|
-
localization =
|
|
1467
|
-
|
|
1468
|
-
onRowEditSubmit =
|
|
1610
|
+
var _useMRT = useMRT(),
|
|
1611
|
+
localization = _useMRT.localization,
|
|
1612
|
+
setCurrentEditingRow = _useMRT.setCurrentEditingRow,
|
|
1613
|
+
onRowEditSubmit = _useMRT.onRowEditSubmit,
|
|
1614
|
+
currentEditingRow = _useMRT.currentEditingRow;
|
|
1469
1615
|
|
|
1470
1616
|
var handleCancel = function handleCancel() {
|
|
1471
|
-
|
|
1617
|
+
row.values = row.original;
|
|
1618
|
+
setCurrentEditingRow(null);
|
|
1472
1619
|
};
|
|
1473
1620
|
|
|
1474
1621
|
var handleSave = /*#__PURE__*/function () {
|
|
@@ -1477,9 +1624,11 @@ var MRT_EditActionButtons = function MRT_EditActionButtons(_ref) {
|
|
|
1477
1624
|
while (1) {
|
|
1478
1625
|
switch (_context.prev = _context.next) {
|
|
1479
1626
|
case 0:
|
|
1480
|
-
|
|
1481
|
-
|
|
1482
|
-
|
|
1627
|
+
_context.next = 2;
|
|
1628
|
+
return onRowEditSubmit == null ? void 0 : onRowEditSubmit(currentEditingRow != null ? currentEditingRow : row);
|
|
1629
|
+
|
|
1630
|
+
case 2:
|
|
1631
|
+
setCurrentEditingRow(null);
|
|
1483
1632
|
|
|
1484
1633
|
case 3:
|
|
1485
1634
|
case "end":
|
|
@@ -1521,13 +1670,19 @@ var IconButton$1 = /*#__PURE__*/material.styled(material.IconButton)({
|
|
|
1521
1670
|
}
|
|
1522
1671
|
});
|
|
1523
1672
|
var MRT_ToggleRowActionMenuButton = function MRT_ToggleRowActionMenuButton(_ref) {
|
|
1673
|
+
var _localization$rowActi;
|
|
1674
|
+
|
|
1524
1675
|
var row = _ref.row;
|
|
1525
1676
|
|
|
1526
|
-
var
|
|
1527
|
-
|
|
1528
|
-
|
|
1529
|
-
|
|
1530
|
-
|
|
1677
|
+
var _useMRT = useMRT(),
|
|
1678
|
+
currentEditingRow = _useMRT.currentEditingRow,
|
|
1679
|
+
densePadding = _useMRT.densePadding,
|
|
1680
|
+
localization = _useMRT.localization,
|
|
1681
|
+
renderRowActionMenuItems = _useMRT.renderRowActionMenuItems,
|
|
1682
|
+
enableRowEditing = _useMRT.enableRowEditing,
|
|
1683
|
+
setCurrentEditingRow = _useMRT.setCurrentEditingRow,
|
|
1684
|
+
renderRowActions = _useMRT.renderRowActions,
|
|
1685
|
+
tableInstance = _useMRT.tableInstance;
|
|
1531
1686
|
|
|
1532
1687
|
var _useState = React.useState(null),
|
|
1533
1688
|
anchorEl = _useState[0],
|
|
@@ -1539,59 +1694,75 @@ var MRT_ToggleRowActionMenuButton = function MRT_ToggleRowActionMenuButton(_ref)
|
|
|
1539
1694
|
setAnchorEl(event.currentTarget);
|
|
1540
1695
|
};
|
|
1541
1696
|
|
|
1542
|
-
|
|
1543
|
-
|
|
1544
|
-
|
|
1545
|
-
|
|
1546
|
-
if (row.id === currentEditingRowId) {
|
|
1547
|
-
return React__default.createElement(MRT_EditActionButtons, {
|
|
1548
|
-
row: row
|
|
1549
|
-
});
|
|
1550
|
-
}
|
|
1697
|
+
var handleEdit = function handleEdit() {
|
|
1698
|
+
setCurrentEditingRow(_extends({}, row));
|
|
1699
|
+
setAnchorEl(null);
|
|
1700
|
+
};
|
|
1551
1701
|
|
|
1552
|
-
return React__default.createElement(
|
|
1702
|
+
return React__default.createElement(MRT_TableButtonCell, {
|
|
1703
|
+
densePadding: densePadding
|
|
1704
|
+
}, renderRowActions ? React__default.createElement(React__default.Fragment, null, renderRowActions(row, tableInstance)) : row.id === (currentEditingRow == null ? void 0 : currentEditingRow.id) ? React__default.createElement(MRT_EditActionButtons, {
|
|
1705
|
+
row: row
|
|
1706
|
+
}) : !renderRowActionMenuItems && enableRowEditing ? React__default.createElement(material.Tooltip, {
|
|
1707
|
+
placement: "right",
|
|
1708
|
+
arrow: true,
|
|
1709
|
+
title: (_localization$rowActi = localization == null ? void 0 : localization.rowActionMenuItemEdit) != null ? _localization$rowActi : ''
|
|
1710
|
+
}, React__default.createElement(IconButton$1, {
|
|
1711
|
+
onClick: handleEdit
|
|
1712
|
+
}, React__default.createElement(EditIcon, null))) : renderRowActionMenuItems ? React__default.createElement(React__default.Fragment, null, React__default.createElement(IconButton$1, {
|
|
1553
1713
|
"aria-label": localization == null ? void 0 : localization.rowActionMenuButtonTitle,
|
|
1554
1714
|
title: localization == null ? void 0 : localization.rowActionMenuButtonTitle,
|
|
1555
1715
|
onClick: handleOpenRowActionMenu,
|
|
1556
1716
|
size: "small"
|
|
1557
1717
|
}, React__default.createElement(MoreHorizIcon, null)), React__default.createElement(MRT_RowActionMenu, {
|
|
1558
1718
|
anchorEl: anchorEl,
|
|
1719
|
+
handleEdit: handleEdit,
|
|
1559
1720
|
row: row,
|
|
1560
1721
|
setAnchorEl: setAnchorEl
|
|
1561
|
-
}));
|
|
1722
|
+
})) : null);
|
|
1562
1723
|
};
|
|
1563
1724
|
|
|
1564
|
-
var
|
|
1725
|
+
var TableRow = /*#__PURE__*/material.styled(material.TableRow, {
|
|
1726
|
+
shouldForwardProp: function shouldForwardProp(prop) {
|
|
1727
|
+
return prop !== 'isSelected';
|
|
1728
|
+
}
|
|
1729
|
+
})(function (_ref) {
|
|
1730
|
+
var isSelected = _ref.isSelected,
|
|
1731
|
+
theme = _ref.theme;
|
|
1732
|
+
return {
|
|
1733
|
+
backgroundColor: isSelected ? material.alpha(theme.palette.primary.light, 0.1) : 'transparent'
|
|
1734
|
+
};
|
|
1735
|
+
});
|
|
1736
|
+
var MRT_TableBodyRow = function MRT_TableBodyRow(_ref2) {
|
|
1565
1737
|
var _mTableBodyRowProps$s;
|
|
1566
1738
|
|
|
1567
|
-
var row =
|
|
1739
|
+
var row = _ref2.row;
|
|
1568
1740
|
|
|
1569
|
-
var
|
|
1570
|
-
anyRowsCanExpand =
|
|
1571
|
-
enableRowActions =
|
|
1572
|
-
|
|
1573
|
-
|
|
1574
|
-
|
|
1575
|
-
|
|
1576
|
-
|
|
1741
|
+
var _useMRT = useMRT(),
|
|
1742
|
+
anyRowsCanExpand = _useMRT.anyRowsCanExpand,
|
|
1743
|
+
enableRowActions = _useMRT.enableRowActions,
|
|
1744
|
+
enableRowNumbers = _useMRT.enableRowNumbers,
|
|
1745
|
+
enableSelection = _useMRT.enableSelection,
|
|
1746
|
+
muiTableBodyRowProps = _useMRT.muiTableBodyRowProps,
|
|
1747
|
+
onRowClick = _useMRT.onRowClick,
|
|
1748
|
+
positionActionsColumn = _useMRT.positionActionsColumn,
|
|
1749
|
+
renderDetailPanel = _useMRT.renderDetailPanel;
|
|
1577
1750
|
|
|
1578
|
-
var theme = material.useTheme();
|
|
1579
1751
|
var mTableBodyRowProps = muiTableBodyRowProps instanceof Function ? muiTableBodyRowProps(row) : muiTableBodyRowProps;
|
|
1580
1752
|
|
|
1581
1753
|
var tableRowProps = _extends({}, mTableBodyRowProps, row.getRowProps(), {
|
|
1582
|
-
style: _extends({
|
|
1583
|
-
backgroundColor: row.isSelected ? material.alpha(theme.palette.primary.light, 0.1) : 'transparent'
|
|
1584
|
-
}, row.getRowProps().style, (_mTableBodyRowProps$s = mTableBodyRowProps == null ? void 0 : mTableBodyRowProps.style) != null ? _mTableBodyRowProps$s : {})
|
|
1754
|
+
style: _extends({}, row.getRowProps().style, (_mTableBodyRowProps$s = mTableBodyRowProps == null ? void 0 : mTableBodyRowProps.style) != null ? _mTableBodyRowProps$s : {})
|
|
1585
1755
|
});
|
|
1586
1756
|
|
|
1587
|
-
return React__default.createElement(React__default.Fragment, null, React__default.createElement(
|
|
1757
|
+
return React__default.createElement(React__default.Fragment, null, React__default.createElement(TableRow, Object.assign({
|
|
1758
|
+
isSelected: row.isSelected,
|
|
1588
1759
|
hover: true,
|
|
1589
1760
|
onClick: function onClick(event) {
|
|
1590
1761
|
return onRowClick == null ? void 0 : onRowClick(event, row);
|
|
1591
1762
|
}
|
|
1592
|
-
}, tableRowProps), enableRowActions && positionActionsColumn === 'first' && React__default.createElement(
|
|
1763
|
+
}, tableRowProps), enableRowNumbers && React__default.createElement(MRT_StyledTableBodyCell, null, row.index + 1), enableRowActions && positionActionsColumn === 'first' && React__default.createElement(MRT_ToggleRowActionMenuButton, {
|
|
1593
1764
|
row: row
|
|
1594
|
-
})
|
|
1765
|
+
}), (anyRowsCanExpand || renderDetailPanel) && React__default.createElement(MRT_ExpandButton, {
|
|
1595
1766
|
row: row
|
|
1596
1767
|
}), enableSelection && React__default.createElement(MRT_SelectCheckbox, {
|
|
1597
1768
|
row: row
|
|
@@ -1600,9 +1771,9 @@ var MRT_TableBodyRow = function MRT_TableBodyRow(_ref) {
|
|
|
1600
1771
|
key: cell.getCellProps().key,
|
|
1601
1772
|
cell: cell
|
|
1602
1773
|
});
|
|
1603
|
-
}), enableRowActions && positionActionsColumn === 'last' && React__default.createElement(
|
|
1774
|
+
}), enableRowActions && positionActionsColumn === 'last' && React__default.createElement(MRT_ToggleRowActionMenuButton, {
|
|
1604
1775
|
row: row
|
|
1605
|
-
}))
|
|
1776
|
+
})), renderDetailPanel && React__default.createElement(MRT_TableDetailPanel, {
|
|
1606
1777
|
row: row
|
|
1607
1778
|
}));
|
|
1608
1779
|
};
|
|
@@ -1610,27 +1781,13 @@ var MRT_TableBodyRow = function MRT_TableBodyRow(_ref) {
|
|
|
1610
1781
|
var TableBody = /*#__PURE__*/material.styled(material.TableBody)({
|
|
1611
1782
|
overflowY: 'hidden'
|
|
1612
1783
|
});
|
|
1613
|
-
var CircularProgressWrapper = /*#__PURE__*/material.styled('div')(function (_ref) {
|
|
1614
|
-
var theme = _ref.theme;
|
|
1615
|
-
return {
|
|
1616
|
-
backgroundColor: material.alpha(theme.palette.background.paper, 0.5),
|
|
1617
|
-
display: 'grid',
|
|
1618
|
-
height: '100%',
|
|
1619
|
-
justifyContent: 'center',
|
|
1620
|
-
margin: 'auto',
|
|
1621
|
-
paddingTop: '5rem',
|
|
1622
|
-
position: 'fixed',
|
|
1623
|
-
width: 'calc(100% - 2rem)'
|
|
1624
|
-
};
|
|
1625
|
-
});
|
|
1626
1784
|
var MRT_TableBody = function MRT_TableBody() {
|
|
1627
1785
|
var _muiTableBodyProps$st;
|
|
1628
1786
|
|
|
1629
|
-
var
|
|
1630
|
-
tableInstance =
|
|
1631
|
-
muiTableBodyProps =
|
|
1632
|
-
|
|
1633
|
-
manualPagination = _useMaterialReactTabl.manualPagination;
|
|
1787
|
+
var _useMRT = useMRT(),
|
|
1788
|
+
tableInstance = _useMRT.tableInstance,
|
|
1789
|
+
muiTableBodyProps = _useMRT.muiTableBodyProps,
|
|
1790
|
+
manualPagination = _useMRT.manualPagination;
|
|
1634
1791
|
|
|
1635
1792
|
var rows = manualPagination ? tableInstance.rows : tableInstance.page;
|
|
1636
1793
|
|
|
@@ -1638,7 +1795,7 @@ var MRT_TableBody = function MRT_TableBody() {
|
|
|
1638
1795
|
style: _extends({}, tableInstance.getTableBodyProps().style, (_muiTableBodyProps$st = muiTableBodyProps == null ? void 0 : muiTableBodyProps.style) != null ? _muiTableBodyProps$st : {})
|
|
1639
1796
|
});
|
|
1640
1797
|
|
|
1641
|
-
return React__default.createElement(TableBody, Object.assign({}, tableBodyProps),
|
|
1798
|
+
return React__default.createElement(TableBody, Object.assign({}, tableBodyProps), rows.map(function (row) {
|
|
1642
1799
|
tableInstance.prepareRow(row);
|
|
1643
1800
|
return React__default.createElement(MRT_TableBodyRow, {
|
|
1644
1801
|
key: row.getRowProps().key,
|
|
@@ -1647,30 +1804,42 @@ var MRT_TableBody = function MRT_TableBody() {
|
|
|
1647
1804
|
}));
|
|
1648
1805
|
};
|
|
1649
1806
|
|
|
1650
|
-
var TableCell = /*#__PURE__*/material.styled(material.TableCell
|
|
1651
|
-
|
|
1807
|
+
var TableCell$2 = /*#__PURE__*/material.styled(material.TableCell, {
|
|
1808
|
+
shouldForwardProp: function shouldForwardProp(prop) {
|
|
1809
|
+
return prop !== 'densePadding' && prop !== 'enableColumnResizing';
|
|
1810
|
+
}
|
|
1811
|
+
})(function (_ref) {
|
|
1812
|
+
var densePadding = _ref.densePadding,
|
|
1813
|
+
enableColumnResizing = _ref.enableColumnResizing;
|
|
1814
|
+
return {
|
|
1815
|
+
fontWeight: 'bold',
|
|
1816
|
+
verticalAlign: 'text-top',
|
|
1817
|
+
padding: densePadding ? '0.5rem' : '1rem',
|
|
1818
|
+
transition: "all " + (enableColumnResizing ? '10ms' : '0.2s') + " ease-in-out"
|
|
1819
|
+
};
|
|
1652
1820
|
});
|
|
1653
|
-
var MRT_TableFooterCell = function MRT_TableFooterCell(
|
|
1654
|
-
var _column$columns$lengt, _column$columns, _mTableFooterCellProp;
|
|
1821
|
+
var MRT_TableFooterCell = function MRT_TableFooterCell(_ref2) {
|
|
1822
|
+
var _column$columns$lengt, _column$columns, _mTableFooterCellProp, _mcTableFooterCellPro;
|
|
1655
1823
|
|
|
1656
|
-
var column =
|
|
1824
|
+
var column = _ref2.column;
|
|
1657
1825
|
|
|
1658
|
-
var
|
|
1659
|
-
muiTableFooterCellProps =
|
|
1660
|
-
densePadding =
|
|
1826
|
+
var _useMRT = useMRT(),
|
|
1827
|
+
muiTableFooterCellProps = _useMRT.muiTableFooterCellProps,
|
|
1828
|
+
densePadding = _useMRT.densePadding,
|
|
1829
|
+
enableColumnResizing = _useMRT.enableColumnResizing;
|
|
1661
1830
|
|
|
1662
1831
|
var isParentHeader = ((_column$columns$lengt = column == null ? void 0 : (_column$columns = column.columns) == null ? void 0 : _column$columns.length) != null ? _column$columns$lengt : 0) > 0;
|
|
1663
1832
|
var mTableFooterCellProps = muiTableFooterCellProps instanceof Function ? muiTableFooterCellProps(column) : muiTableFooterCellProps;
|
|
1833
|
+
var mcTableFooterCellProps = column.muiTableFooterCellProps instanceof Function ? column.muiTableFooterCellProps(column) : column.muiTableFooterCellProps;
|
|
1664
1834
|
|
|
1665
|
-
var tableCellProps = _extends({}, mTableFooterCellProps, column.getFooterProps(), {
|
|
1666
|
-
style: _extends({
|
|
1667
|
-
padding: densePadding ? '0.5rem' : '1rem',
|
|
1668
|
-
transition: 'all 0.2s ease-in-out'
|
|
1669
|
-
}, column.getFooterProps().style, (_mTableFooterCellProp = mTableFooterCellProps == null ? void 0 : mTableFooterCellProps.style) != null ? _mTableFooterCellProp : {})
|
|
1835
|
+
var tableCellProps = _extends({}, mTableFooterCellProps, mcTableFooterCellProps, column.getFooterProps(), {
|
|
1836
|
+
style: _extends({}, column.getFooterProps().style, (_mTableFooterCellProp = mTableFooterCellProps == null ? void 0 : mTableFooterCellProps.style) != null ? _mTableFooterCellProp : {}, (_mcTableFooterCellPro = mcTableFooterCellProps == null ? void 0 : mcTableFooterCellProps.style) != null ? _mcTableFooterCellPro : {})
|
|
1670
1837
|
});
|
|
1671
1838
|
|
|
1672
|
-
return React__default.createElement(TableCell, Object.assign({
|
|
1839
|
+
return React__default.createElement(TableCell$2, Object.assign({
|
|
1673
1840
|
align: isParentHeader ? 'center' : 'left',
|
|
1841
|
+
densePadding: densePadding,
|
|
1842
|
+
enableColumnResizing: enableColumnResizing,
|
|
1674
1843
|
variant: "head"
|
|
1675
1844
|
}, tableCellProps), column.render('Footer'));
|
|
1676
1845
|
};
|
|
@@ -1680,15 +1849,16 @@ var MRT_TableFooterRow = function MRT_TableFooterRow(_ref) {
|
|
|
1680
1849
|
|
|
1681
1850
|
var footerGroup = _ref.footerGroup;
|
|
1682
1851
|
|
|
1683
|
-
var
|
|
1684
|
-
renderDetailPanel =
|
|
1685
|
-
columns =
|
|
1686
|
-
anyRowsCanExpand =
|
|
1687
|
-
enableSelection =
|
|
1688
|
-
enableRowActions =
|
|
1689
|
-
|
|
1690
|
-
|
|
1691
|
-
|
|
1852
|
+
var _useMRT = useMRT(),
|
|
1853
|
+
renderDetailPanel = _useMRT.renderDetailPanel,
|
|
1854
|
+
columns = _useMRT.columns,
|
|
1855
|
+
anyRowsCanExpand = _useMRT.anyRowsCanExpand,
|
|
1856
|
+
enableSelection = _useMRT.enableSelection,
|
|
1857
|
+
enableRowActions = _useMRT.enableRowActions,
|
|
1858
|
+
enableRowNumbers = _useMRT.enableRowNumbers,
|
|
1859
|
+
positionActionsColumn = _useMRT.positionActionsColumn,
|
|
1860
|
+
tableInstance = _useMRT.tableInstance,
|
|
1861
|
+
muiTableFooterRowProps = _useMRT.muiTableFooterRowProps; //if no content in row, skip row
|
|
1692
1862
|
|
|
1693
1863
|
|
|
1694
1864
|
if (!(columns != null && columns.some(function (c) {
|
|
@@ -1700,26 +1870,26 @@ var MRT_TableFooterRow = function MRT_TableFooterRow(_ref) {
|
|
|
1700
1870
|
style: _extends({}, footerGroup.getFooterGroupProps().style, (_mTableFooterRowProps = mTableFooterRowProps == null ? void 0 : mTableFooterRowProps.style) != null ? _mTableFooterRowProps : {})
|
|
1701
1871
|
});
|
|
1702
1872
|
|
|
1703
|
-
return React__default.createElement(material.TableRow, Object.assign({}, tableRowProps), enableRowActions && positionActionsColumn === 'first' && React__default.createElement(MRT_TableSpacerCell, null), (anyRowsCanExpand || renderDetailPanel) && React__default.createElement(MRT_TableSpacerCell, {
|
|
1873
|
+
return React__default.createElement(material.TableRow, Object.assign({}, tableRowProps), enableRowNumbers && React__default.createElement(MRT_TableSpacerCell, null), enableRowActions && positionActionsColumn === 'first' && React__default.createElement(MRT_TableSpacerCell, null), (anyRowsCanExpand || renderDetailPanel) && React__default.createElement(MRT_TableSpacerCell, {
|
|
1704
1874
|
width: (renderDetailPanel ? 2 : tableInstance.expandedDepth + 0.5) + "rem"
|
|
1705
1875
|
}), enableSelection && React__default.createElement(MRT_TableSpacerCell, {
|
|
1706
1876
|
width: "1rem"
|
|
1707
|
-
}), footerGroup.headers.map(function (column
|
|
1877
|
+
}), footerGroup.headers.map(function (column) {
|
|
1708
1878
|
return React__default.createElement(MRT_TableFooterCell, {
|
|
1709
|
-
key:
|
|
1879
|
+
key: column.getFooterProps().key,
|
|
1710
1880
|
column: column
|
|
1711
1881
|
});
|
|
1712
1882
|
}), enableRowActions && positionActionsColumn === 'last' && React__default.createElement(MRT_TableSpacerCell, null));
|
|
1713
1883
|
};
|
|
1714
1884
|
|
|
1715
1885
|
var MRT_TableFooter = function MRT_TableFooter() {
|
|
1716
|
-
var
|
|
1717
|
-
muiTableFooterProps =
|
|
1718
|
-
tableInstance =
|
|
1886
|
+
var _useMRT = useMRT(),
|
|
1887
|
+
muiTableFooterProps = _useMRT.muiTableFooterProps,
|
|
1888
|
+
tableInstance = _useMRT.tableInstance;
|
|
1719
1889
|
|
|
1720
|
-
return React__default.createElement(material.TableFooter, Object.assign({}, muiTableFooterProps), tableInstance.footerGroups.map(function (footerGroup
|
|
1890
|
+
return React__default.createElement(material.TableFooter, Object.assign({}, muiTableFooterProps), tableInstance.footerGroups.map(function (footerGroup) {
|
|
1721
1891
|
return React__default.createElement(MRT_TableFooterRow, {
|
|
1722
|
-
key:
|
|
1892
|
+
key: footerGroup.getFooterGroupProps().key,
|
|
1723
1893
|
footerGroup: footerGroup
|
|
1724
1894
|
});
|
|
1725
1895
|
}));
|
|
@@ -1728,11 +1898,11 @@ var MRT_TableFooter = function MRT_TableFooter() {
|
|
|
1728
1898
|
var MRT_Table = function MRT_Table() {
|
|
1729
1899
|
var _muiTableProps$style;
|
|
1730
1900
|
|
|
1731
|
-
var
|
|
1732
|
-
tableInstance =
|
|
1733
|
-
muiTableProps =
|
|
1734
|
-
hideTableHead =
|
|
1735
|
-
hideTableFooter =
|
|
1901
|
+
var _useMRT = useMRT(),
|
|
1902
|
+
tableInstance = _useMRT.tableInstance,
|
|
1903
|
+
muiTableProps = _useMRT.muiTableProps,
|
|
1904
|
+
hideTableHead = _useMRT.hideTableHead,
|
|
1905
|
+
hideTableFooter = _useMRT.hideTableFooter;
|
|
1736
1906
|
|
|
1737
1907
|
var tableProps = _extends({}, muiTableProps, tableInstance.getTableProps(), {
|
|
1738
1908
|
style: _extends({}, tableInstance.getTableProps().style, (_muiTableProps$style = muiTableProps == null ? void 0 : muiTableProps.style) != null ? _muiTableProps$style : {})
|
|
@@ -1745,11 +1915,12 @@ var TextField = /*#__PURE__*/material.styled(material.TextField)({
|
|
|
1745
1915
|
justifySelf: 'end'
|
|
1746
1916
|
});
|
|
1747
1917
|
var MRT_SearchTextField = function MRT_SearchTextField() {
|
|
1748
|
-
var
|
|
1749
|
-
|
|
1750
|
-
|
|
1751
|
-
|
|
1752
|
-
onGlobalFilterChange =
|
|
1918
|
+
var _useMRT = useMRT(),
|
|
1919
|
+
showSearch = _useMRT.showSearch,
|
|
1920
|
+
localization = _useMRT.localization,
|
|
1921
|
+
muiSearchTextFieldProps = _useMRT.muiSearchTextFieldProps,
|
|
1922
|
+
onGlobalFilterChange = _useMRT.onGlobalFilterChange,
|
|
1923
|
+
tableInstance = _useMRT.tableInstance;
|
|
1753
1924
|
|
|
1754
1925
|
var _useState = React.useState(''),
|
|
1755
1926
|
searchValue = _useState[0],
|
|
@@ -1767,7 +1938,11 @@ var MRT_SearchTextField = function MRT_SearchTextField() {
|
|
|
1767
1938
|
tableInstance.setGlobalFilter(undefined);
|
|
1768
1939
|
};
|
|
1769
1940
|
|
|
1770
|
-
return React__default.createElement(
|
|
1941
|
+
return React__default.createElement(material.Collapse, {
|
|
1942
|
+
"in": showSearch,
|
|
1943
|
+
orientation: "horizontal"
|
|
1944
|
+
}, React__default.createElement(TextField, Object.assign({
|
|
1945
|
+
id: "global-search-text-field",
|
|
1771
1946
|
placeholder: localization == null ? void 0 : localization.searchTextFieldPlaceholder,
|
|
1772
1947
|
onChange: function onChange(event) {
|
|
1773
1948
|
setSearchValue(event.target.value);
|
|
@@ -1793,16 +1968,16 @@ var MRT_SearchTextField = function MRT_SearchTextField() {
|
|
|
1793
1968
|
fontSize: "small"
|
|
1794
1969
|
})))
|
|
1795
1970
|
}
|
|
1796
|
-
}, muiSearchTextFieldProps));
|
|
1971
|
+
}, muiSearchTextFieldProps)));
|
|
1797
1972
|
};
|
|
1798
1973
|
|
|
1799
1974
|
var MRT_ToggleFiltersButton = function MRT_ToggleFiltersButton() {
|
|
1800
1975
|
var _localization$toggleF;
|
|
1801
1976
|
|
|
1802
|
-
var
|
|
1803
|
-
localization =
|
|
1804
|
-
setShowFilters =
|
|
1805
|
-
showFilters =
|
|
1977
|
+
var _useMRT = useMRT(),
|
|
1978
|
+
localization = _useMRT.localization,
|
|
1979
|
+
setShowFilters = _useMRT.setShowFilters,
|
|
1980
|
+
showFilters = _useMRT.showFilters;
|
|
1806
1981
|
|
|
1807
1982
|
return React__default.createElement(material.Tooltip, {
|
|
1808
1983
|
arrow: true,
|
|
@@ -1817,26 +1992,39 @@ var MRT_ToggleFiltersButton = function MRT_ToggleFiltersButton() {
|
|
|
1817
1992
|
};
|
|
1818
1993
|
|
|
1819
1994
|
var MRT_ShowHideColumnsMenu = function MRT_ShowHideColumnsMenu(_ref) {
|
|
1820
|
-
var _column$columns;
|
|
1995
|
+
var _column$columns$lengt, _column$columns, _column$columns2, _column$isVisible, _column$columns4;
|
|
1821
1996
|
|
|
1822
1997
|
var column = _ref.column;
|
|
1998
|
+
var isParentHeader = ((_column$columns$lengt = column == null ? void 0 : (_column$columns = column.columns) == null ? void 0 : _column$columns.length) != null ? _column$columns$lengt : 0) > 0;
|
|
1999
|
+
var allChildColumnsVisible = isParentHeader && !!((_column$columns2 = column.columns) != null && _column$columns2.every(function (childColumn) {
|
|
2000
|
+
return childColumn.isVisible;
|
|
2001
|
+
}));
|
|
2002
|
+
var switchChecked = (_column$isVisible = column.isVisible) != null ? _column$isVisible : allChildColumnsVisible;
|
|
1823
2003
|
|
|
1824
|
-
var
|
|
1825
|
-
|
|
2004
|
+
var handleToggleColumnHidden = function handleToggleColumnHidden(column) {
|
|
2005
|
+
if (isParentHeader) {
|
|
2006
|
+
var _column$columns3;
|
|
2007
|
+
|
|
2008
|
+
column == null ? void 0 : (_column$columns3 = column.columns) == null ? void 0 : _column$columns3.forEach == null ? void 0 : _column$columns3.forEach(function (childColumn) {
|
|
2009
|
+
childColumn.toggleHidden(switchChecked);
|
|
2010
|
+
});
|
|
2011
|
+
} else {
|
|
2012
|
+
column.toggleHidden();
|
|
2013
|
+
}
|
|
2014
|
+
};
|
|
1826
2015
|
|
|
1827
|
-
var isMaxDepth = column.depth === maxColumnDepth;
|
|
1828
2016
|
return React__default.createElement(React__default.Fragment, null, React__default.createElement(material.MenuItem, {
|
|
1829
2017
|
style: {
|
|
1830
|
-
paddingLeft: column.depth +
|
|
2018
|
+
paddingLeft: (column.depth + 0.5) * 2 + "rem"
|
|
1831
2019
|
}
|
|
1832
|
-
},
|
|
1833
|
-
checked:
|
|
2020
|
+
}, React__default.createElement(material.FormControlLabel, {
|
|
2021
|
+
checked: switchChecked,
|
|
1834
2022
|
control: React__default.createElement(material.Switch, null),
|
|
1835
2023
|
label: column.Header,
|
|
1836
2024
|
onChange: function onChange() {
|
|
1837
|
-
return
|
|
2025
|
+
return handleToggleColumnHidden(column);
|
|
1838
2026
|
}
|
|
1839
|
-
})
|
|
2027
|
+
})), (_column$columns4 = column.columns) == null ? void 0 : _column$columns4.map(function (c, i) {
|
|
1840
2028
|
return React__default.createElement(MRT_ShowHideColumnsMenu, {
|
|
1841
2029
|
key: i + "-" + c.id,
|
|
1842
2030
|
column: c
|
|
@@ -1844,12 +2032,17 @@ var MRT_ShowHideColumnsMenu = function MRT_ShowHideColumnsMenu(_ref) {
|
|
|
1844
2032
|
}));
|
|
1845
2033
|
};
|
|
1846
2034
|
|
|
2035
|
+
var MenuButtons = /*#__PURE__*/material.styled('div')({
|
|
2036
|
+
display: 'flex',
|
|
2037
|
+
justifyContent: 'space-between',
|
|
2038
|
+
padding: '0 0.5rem 0.5rem 0.5rem'
|
|
2039
|
+
});
|
|
1847
2040
|
var MRT_ShowHideColumnsButton = function MRT_ShowHideColumnsButton() {
|
|
1848
2041
|
var _localization$showHid;
|
|
1849
2042
|
|
|
1850
|
-
var
|
|
1851
|
-
tableInstance =
|
|
1852
|
-
localization =
|
|
2043
|
+
var _useMRT = useMRT(),
|
|
2044
|
+
tableInstance = _useMRT.tableInstance,
|
|
2045
|
+
localization = _useMRT.localization;
|
|
1853
2046
|
|
|
1854
2047
|
var _useState = React.useState(null),
|
|
1855
2048
|
anchorEl = _useState[0],
|
|
@@ -1872,7 +2065,17 @@ var MRT_ShowHideColumnsButton = function MRT_ShowHideColumnsButton() {
|
|
|
1872
2065
|
onClose: function onClose() {
|
|
1873
2066
|
return setAnchorEl(null);
|
|
1874
2067
|
}
|
|
1875
|
-
},
|
|
2068
|
+
}, React__default.createElement(MenuButtons, null, React__default.createElement(material.Button, {
|
|
2069
|
+
disabled: !tableInstance.getToggleHideAllColumnsProps().checked && !tableInstance.getToggleHideAllColumnsProps().indeterminate,
|
|
2070
|
+
onClick: function onClick() {
|
|
2071
|
+
return tableInstance.toggleHideAllColumns(true);
|
|
2072
|
+
}
|
|
2073
|
+
}, localization == null ? void 0 : localization.columnShowHideMenuHideAll), React__default.createElement(material.Button, {
|
|
2074
|
+
disabled: tableInstance.getToggleHideAllColumnsProps().checked,
|
|
2075
|
+
onClick: function onClick() {
|
|
2076
|
+
return tableInstance.toggleHideAllColumns(false);
|
|
2077
|
+
}
|
|
2078
|
+
}, localization == null ? void 0 : localization.columnShowHideMenuShowAll)), React__default.createElement(material.Divider, null), tableInstance.columns.map(function (column, index) {
|
|
1876
2079
|
return React__default.createElement(MRT_ShowHideColumnsMenu, {
|
|
1877
2080
|
key: index + "-" + column.id,
|
|
1878
2081
|
column: column
|
|
@@ -1881,17 +2084,20 @@ var MRT_ShowHideColumnsButton = function MRT_ShowHideColumnsButton() {
|
|
|
1881
2084
|
};
|
|
1882
2085
|
|
|
1883
2086
|
var MRT_DensePaddingSwitch = function MRT_DensePaddingSwitch() {
|
|
1884
|
-
var _localization$toggleD;
|
|
2087
|
+
var _localization$toggleD, _localization$toggleD2;
|
|
1885
2088
|
|
|
1886
|
-
var
|
|
1887
|
-
densePadding =
|
|
1888
|
-
setDensePadding =
|
|
1889
|
-
localization =
|
|
2089
|
+
var _useMRT = useMRT(),
|
|
2090
|
+
densePadding = _useMRT.densePadding,
|
|
2091
|
+
setDensePadding = _useMRT.setDensePadding,
|
|
2092
|
+
localization = _useMRT.localization;
|
|
1890
2093
|
|
|
1891
2094
|
return React__default.createElement(material.Tooltip, {
|
|
1892
2095
|
arrow: true,
|
|
1893
2096
|
title: (_localization$toggleD = localization == null ? void 0 : localization.toggleDensePaddingSwitchTitle) != null ? _localization$toggleD : ''
|
|
1894
2097
|
}, React__default.createElement(material.Switch, {
|
|
2098
|
+
inputProps: {
|
|
2099
|
+
'aria-label': (_localization$toggleD2 = localization == null ? void 0 : localization.toggleDensePaddingSwitchTitle) != null ? _localization$toggleD2 : ''
|
|
2100
|
+
},
|
|
1895
2101
|
color: "default",
|
|
1896
2102
|
checked: densePadding,
|
|
1897
2103
|
size: "small",
|
|
@@ -1901,24 +2107,73 @@ var MRT_DensePaddingSwitch = function MRT_DensePaddingSwitch() {
|
|
|
1901
2107
|
}));
|
|
1902
2108
|
};
|
|
1903
2109
|
|
|
2110
|
+
var MRT_ToggleSearchButton = function MRT_ToggleSearchButton() {
|
|
2111
|
+
var _localization$toggleS;
|
|
2112
|
+
|
|
2113
|
+
var _useMRT = useMRT(),
|
|
2114
|
+
localization = _useMRT.localization,
|
|
2115
|
+
setShowSearch = _useMRT.setShowSearch,
|
|
2116
|
+
showSearch = _useMRT.showSearch,
|
|
2117
|
+
muiSearchTextFieldProps = _useMRT.muiSearchTextFieldProps;
|
|
2118
|
+
|
|
2119
|
+
var handleToggleSearch = function handleToggleSearch() {
|
|
2120
|
+
setShowSearch(!showSearch);
|
|
2121
|
+
setTimeout(function () {
|
|
2122
|
+
var _document$getElementB, _muiSearchTextFieldPr;
|
|
2123
|
+
|
|
2124
|
+
return (_document$getElementB = document.getElementById((_muiSearchTextFieldPr = muiSearchTextFieldProps == null ? void 0 : muiSearchTextFieldProps.id) != null ? _muiSearchTextFieldPr : "global-search-text-field")) == null ? void 0 : _document$getElementB.focus();
|
|
2125
|
+
}, 200);
|
|
2126
|
+
};
|
|
2127
|
+
|
|
2128
|
+
return React__default.createElement(material.Tooltip, {
|
|
2129
|
+
arrow: true,
|
|
2130
|
+
title: (_localization$toggleS = localization == null ? void 0 : localization.toggleSearchButtonTitle) != null ? _localization$toggleS : ''
|
|
2131
|
+
}, React__default.createElement(material.IconButton, {
|
|
2132
|
+
size: "small",
|
|
2133
|
+
onClick: handleToggleSearch
|
|
2134
|
+
}, showSearch ? React__default.createElement(SearchOffIcon, null) : React__default.createElement(SearchIcon, null)));
|
|
2135
|
+
};
|
|
2136
|
+
|
|
2137
|
+
var MRT_FullScreenToggleButton = function MRT_FullScreenToggleButton() {
|
|
2138
|
+
var _localization$toggleF;
|
|
2139
|
+
|
|
2140
|
+
var _useMRT = useMRT(),
|
|
2141
|
+
localization = _useMRT.localization,
|
|
2142
|
+
setFullScreen = _useMRT.setFullScreen,
|
|
2143
|
+
fullScreen = _useMRT.fullScreen;
|
|
2144
|
+
|
|
2145
|
+
return React__default.createElement(material.Tooltip, {
|
|
2146
|
+
arrow: true,
|
|
2147
|
+
title: (_localization$toggleF = localization == null ? void 0 : localization.toggleFullScreenButtonTitle) != null ? _localization$toggleF : ''
|
|
2148
|
+
}, React__default.createElement(material.IconButton, {
|
|
2149
|
+
"aria-label": localization == null ? void 0 : localization.toggleFilterButtonTitle,
|
|
2150
|
+
onClick: function onClick() {
|
|
2151
|
+
return setFullScreen(!fullScreen);
|
|
2152
|
+
},
|
|
2153
|
+
size: "small"
|
|
2154
|
+
}, fullScreen ? React__default.createElement(FilterListOffIcon$1, null) : React__default.createElement(FilterListIcon, null)));
|
|
2155
|
+
};
|
|
2156
|
+
|
|
1904
2157
|
var ToolbarButtonsContainer = /*#__PURE__*/material.styled('div')({
|
|
1905
2158
|
display: 'flex',
|
|
1906
2159
|
gap: '0.5rem',
|
|
1907
2160
|
alignItems: 'center'
|
|
1908
2161
|
});
|
|
1909
|
-
var
|
|
1910
|
-
var
|
|
1911
|
-
disableFilters =
|
|
1912
|
-
disableColumnHiding =
|
|
1913
|
-
disableDensePaddingToggle =
|
|
1914
|
-
|
|
1915
|
-
|
|
2162
|
+
var MRT_ToolbarInternalButtons = function MRT_ToolbarInternalButtons() {
|
|
2163
|
+
var _useMRT = useMRT(),
|
|
2164
|
+
disableFilters = _useMRT.disableFilters,
|
|
2165
|
+
disableColumnHiding = _useMRT.disableColumnHiding,
|
|
2166
|
+
disableDensePaddingToggle = _useMRT.disableDensePaddingToggle,
|
|
2167
|
+
disableGlobalFilter = _useMRT.disableGlobalFilter,
|
|
2168
|
+
disableFullScreenToggle = _useMRT.disableFullScreenToggle;
|
|
2169
|
+
|
|
2170
|
+
return React__default.createElement(ToolbarButtonsContainer, null, !disableGlobalFilter && React__default.createElement(MRT_ToggleSearchButton, null), !disableFilters && React__default.createElement(MRT_ToggleFiltersButton, null), !disableColumnHiding && React__default.createElement(MRT_ShowHideColumnsButton, null), !disableDensePaddingToggle && React__default.createElement(MRT_DensePaddingSwitch, null), !disableFullScreenToggle && React__default.createElement(MRT_FullScreenToggleButton, null));
|
|
1916
2171
|
};
|
|
1917
2172
|
|
|
1918
2173
|
var MRT_TablePagination = function MRT_TablePagination() {
|
|
1919
|
-
var
|
|
1920
|
-
tableInstance =
|
|
1921
|
-
muiTablePaginationProps =
|
|
2174
|
+
var _useMRT = useMRT(),
|
|
2175
|
+
tableInstance = _useMRT.tableInstance,
|
|
2176
|
+
muiTablePaginationProps = _useMRT.muiTablePaginationProps;
|
|
1922
2177
|
|
|
1923
2178
|
var tablePaginationProps = muiTablePaginationProps instanceof Function ? muiTablePaginationProps(tableInstance) : muiTablePaginationProps;
|
|
1924
2179
|
|
|
@@ -1937,116 +2192,216 @@ var MRT_TablePagination = function MRT_TablePagination() {
|
|
|
1937
2192
|
page: tableInstance.state.pageIndex,
|
|
1938
2193
|
rowsPerPage: tableInstance.state.pageSize,
|
|
1939
2194
|
showFirstButton: tableInstance.rows.length / tableInstance.state.pageSize > 2,
|
|
1940
|
-
showLastButton: tableInstance.rows.length / tableInstance.state.pageSize > 2
|
|
2195
|
+
showLastButton: tableInstance.rows.length / tableInstance.state.pageSize > 2,
|
|
2196
|
+
style: {
|
|
2197
|
+
padding: 0,
|
|
2198
|
+
position: 'relative',
|
|
2199
|
+
zIndex: 2
|
|
2200
|
+
}
|
|
1941
2201
|
}, tablePaginationProps));
|
|
1942
2202
|
};
|
|
1943
2203
|
|
|
2204
|
+
var Alert = /*#__PURE__*/material.styled(material.Alert, {
|
|
2205
|
+
shouldForwardProp: function shouldForwardProp(prop) {
|
|
2206
|
+
return prop !== 'displayAbsolute' && prop !== 'toolbarPosition';
|
|
2207
|
+
}
|
|
2208
|
+
})(function (_ref) {
|
|
2209
|
+
var displayAbsolute = _ref.displayAbsolute,
|
|
2210
|
+
toolbarPosition = _ref.toolbarPosition;
|
|
2211
|
+
return {
|
|
2212
|
+
borderRadius: 0,
|
|
2213
|
+
fontSize: '1rem',
|
|
2214
|
+
left: 0,
|
|
2215
|
+
marginLeft: !displayAbsolute ? '-0.5rem' : undefined,
|
|
2216
|
+
padding: toolbarPosition === 'bottom' ? '0 1rem' : '0.5rem 1.25rem',
|
|
2217
|
+
position: displayAbsolute ? 'absolute' : 'relative',
|
|
2218
|
+
right: 0,
|
|
2219
|
+
top: 0,
|
|
2220
|
+
width: "calc(100% - " + (displayAbsolute ? '2.5rem' : '1.5rem') + ")",
|
|
2221
|
+
zIndex: 2
|
|
2222
|
+
};
|
|
2223
|
+
});
|
|
2224
|
+
var MRT_ToolbarAlertBanner = function MRT_ToolbarAlertBanner() {
|
|
2225
|
+
var _localization$toolbar, _localization$toolbar2;
|
|
2226
|
+
|
|
2227
|
+
var _useMRT = useMRT(),
|
|
2228
|
+
muiTableToolbarAlertBannerProps = _useMRT.muiTableToolbarAlertBannerProps,
|
|
2229
|
+
tableInstance = _useMRT.tableInstance,
|
|
2230
|
+
positionToolbarAlertBanner = _useMRT.positionToolbarAlertBanner,
|
|
2231
|
+
positionToolbarActions = _useMRT.positionToolbarActions,
|
|
2232
|
+
localization = _useMRT.localization,
|
|
2233
|
+
renderToolbarCustomActions = _useMRT.renderToolbarCustomActions;
|
|
2234
|
+
|
|
2235
|
+
var isMobile = material.useMediaQuery('(max-width:720px)');
|
|
2236
|
+
var alertProps = muiTableToolbarAlertBannerProps instanceof Function ? muiTableToolbarAlertBannerProps(tableInstance) : muiTableToolbarAlertBannerProps;
|
|
2237
|
+
var selectMessage = tableInstance.selectedFlatRows.length > 0 ? localization == null ? void 0 : (_localization$toolbar = localization.toolbarAlertSelectionMessage) == null ? void 0 : (_localization$toolbar2 = _localization$toolbar.replace('{selectedCount}', tableInstance.selectedFlatRows.length.toString())) == null ? void 0 : _localization$toolbar2.replace('{rowCount}', tableInstance.flatRows.length.toString()) : null;
|
|
2238
|
+
var groupedByMessage = tableInstance.state.groupBy.length > 0 ? React__default.createElement("span", null, localization == null ? void 0 : localization.toolbarAlertGroupedByMessage, ' ', tableInstance.state.groupBy.map(function (columnId, index) {
|
|
2239
|
+
var _tableInstance$allCol;
|
|
2240
|
+
|
|
2241
|
+
return React__default.createElement(React.Fragment, {
|
|
2242
|
+
key: index + "-" + columnId
|
|
2243
|
+
}, index > 0 ? localization == null ? void 0 : localization.toolbarAlertGroupedThenByMessage : '', React__default.createElement(material.Chip, {
|
|
2244
|
+
color: "secondary",
|
|
2245
|
+
label: (_tableInstance$allCol = tableInstance.allColumns.find(function (column) {
|
|
2246
|
+
return column.id === columnId;
|
|
2247
|
+
})) == null ? void 0 : _tableInstance$allCol.Header,
|
|
2248
|
+
onDelete: function onDelete() {
|
|
2249
|
+
return tableInstance.toggleGroupBy(columnId, false);
|
|
2250
|
+
}
|
|
2251
|
+
}));
|
|
2252
|
+
})) : null;
|
|
2253
|
+
var displayAbsolute = !(isMobile || positionToolbarAlertBanner === 'bottom' && positionToolbarActions === 'bottom' || positionToolbarAlertBanner === 'top' && !!renderToolbarCustomActions);
|
|
2254
|
+
return React__default.createElement(material.Collapse, {
|
|
2255
|
+
"in": !!selectMessage || !!groupedByMessage,
|
|
2256
|
+
timeout: displayAbsolute ? 0 : 200
|
|
2257
|
+
}, React__default.createElement(Alert, Object.assign({
|
|
2258
|
+
displayAbsolute: displayAbsolute,
|
|
2259
|
+
icon: false,
|
|
2260
|
+
color: "info"
|
|
2261
|
+
}, alertProps), selectMessage, groupedByMessage));
|
|
2262
|
+
};
|
|
2263
|
+
|
|
1944
2264
|
var Toolbar = /*#__PURE__*/material.styled(material.Toolbar)({
|
|
1945
|
-
display: 'grid'
|
|
2265
|
+
display: 'grid',
|
|
2266
|
+
padding: '0 0.5rem !important'
|
|
1946
2267
|
});
|
|
1947
2268
|
var ToolbarTopRow = /*#__PURE__*/material.styled('div')({
|
|
1948
|
-
padding: '0.5rem',
|
|
2269
|
+
padding: '1rem 0.5rem',
|
|
1949
2270
|
display: 'flex',
|
|
1950
2271
|
justifyContent: 'space-between'
|
|
1951
2272
|
});
|
|
1952
2273
|
var ToolbarActionsContainer = /*#__PURE__*/material.styled('div')({
|
|
1953
2274
|
display: 'flex',
|
|
1954
|
-
gap: '0.5rem'
|
|
2275
|
+
gap: '0.5rem',
|
|
2276
|
+
position: 'relative',
|
|
2277
|
+
zIndex: 3
|
|
1955
2278
|
});
|
|
1956
2279
|
var MRT_ToolbarTop = function MRT_ToolbarTop() {
|
|
1957
|
-
var
|
|
1958
|
-
|
|
1959
|
-
|
|
1960
|
-
|
|
1961
|
-
|
|
1962
|
-
manualPagination =
|
|
1963
|
-
|
|
1964
|
-
|
|
1965
|
-
|
|
1966
|
-
|
|
1967
|
-
|
|
1968
|
-
tableInstance =
|
|
1969
|
-
|
|
1970
|
-
|
|
1971
|
-
if (!muiTableToolbarTopProps && !title && disableColumnHiding && disableFilters && disableGlobalFilter) {
|
|
1972
|
-
return null;
|
|
1973
|
-
}
|
|
2280
|
+
var _renderToolbarCustomA;
|
|
2281
|
+
|
|
2282
|
+
var _useMRT = useMRT(),
|
|
2283
|
+
disableGlobalFilter = _useMRT.disableGlobalFilter,
|
|
2284
|
+
hideToolbarActions = _useMRT.hideToolbarActions,
|
|
2285
|
+
manualPagination = _useMRT.manualPagination,
|
|
2286
|
+
muiTableToolbarTopProps = _useMRT.muiTableToolbarTopProps,
|
|
2287
|
+
positionPagination = _useMRT.positionPagination,
|
|
2288
|
+
positionToolbarActions = _useMRT.positionToolbarActions,
|
|
2289
|
+
positionToolbarAlertBanner = _useMRT.positionToolbarAlertBanner,
|
|
2290
|
+
renderToolbarCustomActions = _useMRT.renderToolbarCustomActions,
|
|
2291
|
+
tableInstance = _useMRT.tableInstance;
|
|
1974
2292
|
|
|
1975
2293
|
var toolbarProps = muiTableToolbarTopProps instanceof Function ? muiTableToolbarTopProps(tableInstance) : muiTableToolbarTopProps;
|
|
1976
2294
|
return React__default.createElement(Toolbar, Object.assign({
|
|
1977
2295
|
variant: "dense"
|
|
1978
|
-
}, toolbarProps), React__default.createElement(ToolbarTopRow, null,
|
|
1979
|
-
variant: "h5"
|
|
1980
|
-
}, muiTableTitleProps), title) : React__default.createElement("span", null), React__default.createElement(ToolbarActionsContainer, null, !disableGlobalFilter && React__default.createElement(MRT_SearchTextField, null), !hideToolbarActions && positionToolbarActions === 'top' && React__default.createElement(MRT_ToolbarButtons, null))), React__default.createElement("div", null, !manualPagination && ['top', 'both'].includes(positionPagination != null ? positionPagination : '') && React__default.createElement(MRT_TablePagination, null)));
|
|
2296
|
+
}, toolbarProps), positionToolbarAlertBanner === 'top' && React__default.createElement(MRT_ToolbarAlertBanner, null), React__default.createElement(ToolbarTopRow, null, (_renderToolbarCustomA = renderToolbarCustomActions == null ? void 0 : renderToolbarCustomActions(tableInstance)) != null ? _renderToolbarCustomA : React__default.createElement("span", null), React__default.createElement(ToolbarActionsContainer, null, !disableGlobalFilter && React__default.createElement(MRT_SearchTextField, null), !hideToolbarActions && positionToolbarActions === 'top' && React__default.createElement(MRT_ToolbarInternalButtons, null))), React__default.createElement("div", null, !manualPagination && ['top', 'both'].includes(positionPagination != null ? positionPagination : '') && React__default.createElement(MRT_TablePagination, null)));
|
|
1981
2297
|
};
|
|
1982
2298
|
|
|
1983
2299
|
var Toolbar$1 = /*#__PURE__*/material.styled(material.Toolbar)({
|
|
1984
|
-
padding: 0,
|
|
1985
2300
|
display: 'flex',
|
|
1986
|
-
justifyContent: 'space-between'
|
|
2301
|
+
justifyContent: 'space-between',
|
|
2302
|
+
padding: '0 0.5rem !important',
|
|
2303
|
+
overflowY: 'hidden'
|
|
1987
2304
|
});
|
|
1988
2305
|
var MRT_ToolbarBottom = function MRT_ToolbarBottom() {
|
|
1989
|
-
var
|
|
1990
|
-
|
|
1991
|
-
|
|
1992
|
-
|
|
1993
|
-
positionPagination =
|
|
1994
|
-
|
|
1995
|
-
|
|
1996
|
-
|
|
1997
|
-
muiTableToolbarBottomProps = _useMaterialReactTabl.muiTableToolbarBottomProps,
|
|
1998
|
-
title = _useMaterialReactTabl.title,
|
|
1999
|
-
tableInstance = _useMaterialReactTabl.tableInstance; // if no features in the toolbar are enabled, don't render anything
|
|
2000
|
-
|
|
2001
|
-
|
|
2002
|
-
if (!muiTableToolbarBottomProps && !title && disableColumnHiding && disableFilters && disableGlobalFilter) {
|
|
2003
|
-
return null;
|
|
2004
|
-
}
|
|
2306
|
+
var _useMRT = useMRT(),
|
|
2307
|
+
hideToolbarActions = _useMRT.hideToolbarActions,
|
|
2308
|
+
manualPagination = _useMRT.manualPagination,
|
|
2309
|
+
muiTableToolbarBottomProps = _useMRT.muiTableToolbarBottomProps,
|
|
2310
|
+
positionPagination = _useMRT.positionPagination,
|
|
2311
|
+
positionToolbarActions = _useMRT.positionToolbarActions,
|
|
2312
|
+
positionToolbarAlertBanner = _useMRT.positionToolbarAlertBanner,
|
|
2313
|
+
tableInstance = _useMRT.tableInstance;
|
|
2005
2314
|
|
|
2006
2315
|
var toolbarProps = muiTableToolbarBottomProps instanceof Function ? muiTableToolbarBottomProps(tableInstance) : muiTableToolbarBottomProps;
|
|
2007
2316
|
return React__default.createElement(Toolbar$1, Object.assign({
|
|
2008
2317
|
variant: "dense"
|
|
2009
|
-
}, toolbarProps), !hideToolbarActions && positionToolbarActions === 'bottom' ? React__default.createElement(
|
|
2318
|
+
}, toolbarProps), !hideToolbarActions && positionToolbarActions === 'bottom' ? React__default.createElement(MRT_ToolbarInternalButtons, null) : React__default.createElement("span", null), positionToolbarAlertBanner === 'bottom' && React__default.createElement(MRT_ToolbarAlertBanner, null), !manualPagination && ['bottom', 'both'].includes(positionPagination != null ? positionPagination : '') && React__default.createElement(MRT_TablePagination, null));
|
|
2010
2319
|
};
|
|
2011
2320
|
|
|
2321
|
+
var TableContainer = /*#__PURE__*/material.styled(material.TableContainer, {
|
|
2322
|
+
shouldForwardProp: function shouldForwardProp(prop) {
|
|
2323
|
+
return prop !== 'fullScreen';
|
|
2324
|
+
}
|
|
2325
|
+
})(function (_ref) {
|
|
2326
|
+
var fullScreen = _ref.fullScreen;
|
|
2327
|
+
return {
|
|
2328
|
+
bottom: fullScreen ? '0' : undefined,
|
|
2329
|
+
height: fullScreen ? '100%' : undefined,
|
|
2330
|
+
left: fullScreen ? '0' : undefined,
|
|
2331
|
+
margin: fullScreen ? '0' : undefined,
|
|
2332
|
+
position: fullScreen ? 'absolute' : undefined,
|
|
2333
|
+
right: fullScreen ? '0' : undefined,
|
|
2334
|
+
top: fullScreen ? '0' : undefined,
|
|
2335
|
+
transition: 'all 0.2s ease-in-out',
|
|
2336
|
+
width: fullScreen ? '100vw' : undefined
|
|
2337
|
+
};
|
|
2338
|
+
});
|
|
2339
|
+
var CircularProgressWrapper = /*#__PURE__*/material.styled('div')(function (_ref2) {
|
|
2340
|
+
var theme = _ref2.theme;
|
|
2341
|
+
return {
|
|
2342
|
+
alignItems: 'center',
|
|
2343
|
+
backgroundColor: material.alpha(theme.palette.background.paper, 0.5),
|
|
2344
|
+
display: 'grid',
|
|
2345
|
+
height: '100%',
|
|
2346
|
+
justifyContent: 'center',
|
|
2347
|
+
margin: 'auto',
|
|
2348
|
+
position: 'absolute',
|
|
2349
|
+
width: 'calc(100% - 2rem)'
|
|
2350
|
+
};
|
|
2351
|
+
});
|
|
2012
2352
|
var MRT_TableContainer = function MRT_TableContainer() {
|
|
2013
|
-
var
|
|
2014
|
-
muiTableContainerProps =
|
|
2015
|
-
hideToolbarTop =
|
|
2016
|
-
hideToolbarBottom =
|
|
2017
|
-
|
|
2018
|
-
|
|
2019
|
-
|
|
2020
|
-
|
|
2021
|
-
|
|
2353
|
+
var _useMRT = useMRT(),
|
|
2354
|
+
muiTableContainerProps = _useMRT.muiTableContainerProps,
|
|
2355
|
+
hideToolbarTop = _useMRT.hideToolbarTop,
|
|
2356
|
+
hideToolbarBottom = _useMRT.hideToolbarBottom,
|
|
2357
|
+
fullScreen = _useMRT.fullScreen,
|
|
2358
|
+
isLoading = _useMRT.isLoading,
|
|
2359
|
+
isFetching = _useMRT.isFetching;
|
|
2360
|
+
|
|
2361
|
+
return React__default.createElement(TableContainer, Object.assign({
|
|
2362
|
+
component: material.Paper,
|
|
2363
|
+
fullScreen: fullScreen
|
|
2364
|
+
}, muiTableContainerProps), !hideToolbarTop && React__default.createElement(MRT_ToolbarTop, null), isFetching && React__default.createElement(material.LinearProgress, null), isLoading && React__default.createElement(CircularProgressWrapper, null, React__default.createElement(material.CircularProgress, {
|
|
2365
|
+
"aria-busy": "true",
|
|
2366
|
+
"aria-label": "Loading data"
|
|
2367
|
+
})), React__default.createElement(MRT_Table, null), !hideToolbarBottom && React__default.createElement(MRT_ToolbarBottom, null));
|
|
2022
2368
|
};
|
|
2023
2369
|
|
|
2024
2370
|
var defaultLocalization = {
|
|
2025
2371
|
actionsHeadColumnTitle: 'Actions',
|
|
2026
2372
|
columnActionMenuButtonTitle: 'Column Actions',
|
|
2027
2373
|
columnActionMenuItemClearSort: 'Clear sorting',
|
|
2028
|
-
columnActionMenuItemGroupBy: 'Group by column',
|
|
2029
|
-
columnActionMenuItemHideColumn: 'Hide column',
|
|
2030
|
-
columnActionMenuItemSortAsc: 'Sort ascending',
|
|
2031
|
-
columnActionMenuItemSortDesc: 'Sort descending',
|
|
2032
|
-
columnActionMenuItemUnGroupBy: 'Ungroup column',
|
|
2374
|
+
columnActionMenuItemGroupBy: 'Group by {column}',
|
|
2375
|
+
columnActionMenuItemHideColumn: 'Hide {column} column',
|
|
2376
|
+
columnActionMenuItemSortAsc: 'Sort by {column} ascending',
|
|
2377
|
+
columnActionMenuItemSortDesc: 'Sort by {column} descending',
|
|
2378
|
+
columnActionMenuItemUnGroupBy: 'Ungroup by {column}',
|
|
2379
|
+
columnShowHideMenuHideAll: 'Hide all',
|
|
2380
|
+
columnShowHideMenuShowAll: 'Show all',
|
|
2033
2381
|
expandAllButtonTitle: 'Expand all',
|
|
2034
2382
|
expandButtonTitle: 'Expand',
|
|
2035
2383
|
filterTextFieldClearButtonTitle: 'Clear filter',
|
|
2036
|
-
filterTextFieldPlaceholder: 'Filter',
|
|
2384
|
+
filterTextFieldPlaceholder: 'Filter by {column}',
|
|
2385
|
+
rowActionButtonCancel: 'Cancel',
|
|
2386
|
+
rowActionButtonSave: 'Save',
|
|
2037
2387
|
rowActionMenuButtonTitle: 'Row Actions',
|
|
2038
|
-
rowActionsColumnTitle: 'Actions',
|
|
2039
2388
|
rowActionMenuItemEdit: 'Edit',
|
|
2040
|
-
|
|
2041
|
-
rowActionButtonCancel: 'Cancel',
|
|
2389
|
+
rowActionsColumnTitle: 'Actions',
|
|
2042
2390
|
searchTextFieldClearButtonTitle: 'Clear search',
|
|
2043
2391
|
searchTextFieldPlaceholder: 'Search',
|
|
2392
|
+
selectAllCheckboxTitle: 'Select all',
|
|
2393
|
+
selectCheckboxTitle: 'Select row',
|
|
2044
2394
|
showHideColumnsButtonTitle: 'Show/Hide columns',
|
|
2045
2395
|
toggleDensePaddingSwitchTitle: 'Toggle dense padding',
|
|
2046
|
-
toggleFilterButtonTitle: 'Toggle filters'
|
|
2396
|
+
toggleFilterButtonTitle: 'Toggle filters',
|
|
2397
|
+
toggleFullScreenButtonTitle: 'Toggle full screen',
|
|
2398
|
+
toggleSearchButtonTitle: 'Toggle search',
|
|
2399
|
+
toolbarAlertSelectionMessage: '{selectedCount} of {rowCount} row(s) selected',
|
|
2400
|
+
toolbarAlertGroupedByMessage: 'Grouped by ',
|
|
2401
|
+
toolbarAlertGroupedThenByMessage: ', then by '
|
|
2047
2402
|
};
|
|
2048
2403
|
|
|
2049
|
-
var _excluded = ["defaultColumn", "localization", "positionActionsColumn", "positionPagination", "positionToolbarActions"];
|
|
2404
|
+
var _excluded = ["defaultColumn", "localization", "positionActionsColumn", "positionPagination", "positionToolbarActions", "positionToolbarAlertBanner"];
|
|
2050
2405
|
var MaterialReactTable = (function (_ref) {
|
|
2051
2406
|
var _ref$defaultColumn = _ref.defaultColumn,
|
|
2052
2407
|
defaultColumn = _ref$defaultColumn === void 0 ? {
|
|
@@ -2061,14 +2416,17 @@ var MaterialReactTable = (function (_ref) {
|
|
|
2061
2416
|
positionPagination = _ref$positionPaginati === void 0 ? 'bottom' : _ref$positionPaginati,
|
|
2062
2417
|
_ref$positionToolbarA = _ref.positionToolbarActions,
|
|
2063
2418
|
positionToolbarActions = _ref$positionToolbarA === void 0 ? 'top' : _ref$positionToolbarA,
|
|
2419
|
+
_ref$positionToolbarA2 = _ref.positionToolbarAlertBanner,
|
|
2420
|
+
positionToolbarAlertBanner = _ref$positionToolbarA2 === void 0 ? 'top' : _ref$positionToolbarA2,
|
|
2064
2421
|
rest = _objectWithoutPropertiesLoose(_ref, _excluded);
|
|
2065
2422
|
|
|
2066
2423
|
return React__default.createElement(MaterialReactTableProvider, Object.assign({
|
|
2067
2424
|
defaultColumn: defaultColumn,
|
|
2068
2425
|
localization: _extends({}, defaultLocalization, localization),
|
|
2069
|
-
positionPagination: positionPagination,
|
|
2070
2426
|
positionActionsColumn: positionActionsColumn,
|
|
2071
|
-
|
|
2427
|
+
positionPagination: positionPagination,
|
|
2428
|
+
positionToolbarActions: positionToolbarActions,
|
|
2429
|
+
positionToolbarAlertBanner: positionToolbarAlertBanner
|
|
2072
2430
|
}, rest), React__default.createElement(MRT_TableContainer, null));
|
|
2073
2431
|
});
|
|
2074
2432
|
|