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.
Files changed (72) hide show
  1. package/README.md +32 -162
  2. package/dist/MaterialReactTable.d.ts +17 -7
  3. package/dist/body/MRT_TableBodyCell.d.ts +3 -0
  4. package/dist/body/MRT_TableBodyRow.d.ts +16 -1
  5. package/dist/buttons/MRT_FullScreenToggleButton.d.ts +4 -0
  6. package/dist/buttons/MRT_ToggleSearchButton.d.ts +4 -0
  7. package/dist/head/MRT_TableHeadCell.d.ts +4 -1
  8. package/dist/head/MRT_TableHeadCellActions.d.ts +5 -0
  9. package/dist/inputs/MRT_EditCellTextField.d.ts +7 -0
  10. package/dist/inputs/MRT_FilterTextField.d.ts +1 -1
  11. package/dist/material-react-table.cjs.development.js +799 -441
  12. package/dist/material-react-table.cjs.development.js.map +1 -1
  13. package/dist/material-react-table.cjs.production.min.js +1 -1
  14. package/dist/material-react-table.cjs.production.min.js.map +1 -1
  15. package/dist/material-react-table.esm.js +800 -442
  16. package/dist/material-react-table.esm.js.map +1 -1
  17. package/dist/menus/MRT_ColumnActionMenu.d.ts +2 -2
  18. package/dist/menus/MRT_RowActionMenu.d.ts +1 -0
  19. package/dist/table/MRT_TableButtonCell.d.ts +3 -0
  20. package/dist/toolbar/MRT_ToolbarAlertBanner.d.ts +5 -0
  21. package/dist/toolbar/MRT_ToolbarInternalButtons.d.ts +5 -0
  22. package/dist/useMRT.d.ts +20 -0
  23. package/dist/utils/localization.d.ts +12 -3
  24. package/package.json +26 -23
  25. package/src/@types/faker.d.ts +4 -0
  26. package/src/@types/react-table-config.d.ts +156 -0
  27. package/src/MaterialReactTable.tsx +29 -9
  28. package/src/body/MRT_TableBody.tsx +3 -25
  29. package/src/body/MRT_TableBodyCell.tsx +30 -9
  30. package/src/body/MRT_TableBodyRow.tsx +22 -14
  31. package/src/body/MRT_TableDetailPanel.tsx +19 -8
  32. package/src/buttons/MRT_EditActionButtons.tsx +11 -6
  33. package/src/buttons/MRT_ExpandAllButton.tsx +19 -25
  34. package/src/buttons/MRT_ExpandButton.tsx +28 -26
  35. package/src/buttons/MRT_FullScreenToggleButton.tsx +23 -0
  36. package/src/buttons/MRT_ShowHideColumnsButton.tsx +34 -3
  37. package/src/buttons/MRT_ToggleColumnActionMenuButton.tsx +5 -5
  38. package/src/buttons/MRT_ToggleFiltersButton.tsx +2 -2
  39. package/src/buttons/MRT_ToggleRowActionMenuButton.tsx +48 -26
  40. package/src/buttons/MRT_ToggleSearchButton.tsx +33 -0
  41. package/src/footer/MRT_TableFooter.tsx +4 -4
  42. package/src/footer/MRT_TableFooterCell.tsx +23 -7
  43. package/src/footer/MRT_TableFooterRow.tsx +9 -4
  44. package/src/head/MRT_TableHead.tsx +4 -4
  45. package/src/head/MRT_TableHeadCell.tsx +41 -20
  46. package/src/head/MRT_TableHeadCellActions.tsx +18 -0
  47. package/src/head/MRT_TableHeadRow.tsx +17 -11
  48. package/src/inputs/MRT_DensePaddingSwitch.tsx +5 -3
  49. package/src/inputs/MRT_EditCellTextField.tsx +64 -0
  50. package/src/inputs/MRT_FilterTextField.tsx +43 -18
  51. package/src/inputs/MRT_SearchTextField.tsx +39 -34
  52. package/src/inputs/MRT_SelectAllCheckbox.tsx +10 -14
  53. package/src/inputs/MRT_SelectCheckbox.tsx +11 -13
  54. package/src/menus/MRT_ColumnActionMenu.tsx +66 -23
  55. package/src/menus/MRT_RowActionMenu.tsx +4 -8
  56. package/src/menus/MRT_ShowHideColumnsMenu.tsx +24 -15
  57. package/src/table/MRT_Table.tsx +2 -2
  58. package/src/table/MRT_TableButtonCell.tsx +9 -0
  59. package/src/table/MRT_TableContainer.tsx +52 -5
  60. package/src/table/MRT_TableSpacerCell.tsx +5 -5
  61. package/src/toolbar/MRT_TablePagination.tsx +3 -2
  62. package/src/toolbar/MRT_ToolbarAlertBanner.tsx +102 -0
  63. package/src/toolbar/MRT_ToolbarBottom.tsx +11 -22
  64. package/src/toolbar/{MRT_ToolbarButtons.tsx → MRT_ToolbarInternalButtons.tsx} +13 -4
  65. package/src/toolbar/MRT_ToolbarTop.tsx +16 -30
  66. package/src/useMRT.tsx +112 -0
  67. package/src/utils/localization.ts +30 -12
  68. package/dist/toolbar/MRT_ToolbarButtons.d.ts +0 -5
  69. package/dist/useMaterialReactTable.d.ts +0 -15
  70. package/dist/utils/useMRTCalcs.d.ts +0 -11
  71. package/src/useMaterialReactTable.tsx +0 -96
  72. 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 ArrowRightIcon = _interopDefault(require('@mui/icons-material/KeyboardDoubleArrowDown'));
19
- var ExpandMoreIcon = _interopDefault(require('@mui/icons-material/ExpandMore'));
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 useMRTCalcs = function useMRTCalcs(_ref) {
98
- var tableInstance = _ref.tableInstance;
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((_props$defaultShowFil = props.defaultShowFilters) != null ? _props$defaultShowFil : false),
142
- showFilters = _useState[0],
143
- setShowFilters = _useState[1];
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
- currentEditingRowId = _useState3[0],
151
- setCurrentEditingRowId = _useState3[1];
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({}, mrtCalcs, props, {
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
- currentEditingRowId: currentEditingRowId,
159
- setCurrentEditingRowId: setCurrentEditingRowId,
152
+ setShowSearch: setShowSearch,
160
153
  showFilters: showFilters,
161
- // @ts-ignore
154
+ showSearch: showSearch,
155
+ //@ts-ignore
162
156
  tableInstance: tableInstance
163
157
  })
164
158
  }, props.children);
165
159
  };
166
- var useMaterialReactTable = function useMaterialReactTable() {
160
+ var useMRT = function useMRT() {
167
161
  return (//@ts-ignore
168
162
  React.useContext(MaterialReactTableContext)
169
163
  );
170
164
  };
171
165
 
172
- var MRT_FilterTextfield = function MRT_FilterTextfield(_ref) {
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 _useMaterialReactTabl = useMaterialReactTable(),
176
- localization = _useMaterialReactTabl.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
- //@ts-ignore
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.InputAdornment, {
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.IconButton, {
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 _useMaterialReactTabl = useMaterialReactTable(),
239
- disableColumnHiding = _useMaterialReactTabl.disableColumnHiding,
240
- enableColumnGrouping = _useMaterialReactTabl.enableColumnGrouping,
241
- disableSortBy = _useMaterialReactTabl.disableSortBy,
242
- localization = _useMaterialReactTabl.localization;
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), " ", localization == null ? void 0 : localization.columnActionMenuItemSortAsc), React__default.createElement(MenuItem, {
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: 4
293
- })], !disableColumnHiding && React__default.createElement(MenuItem, {
294
- onClick: handleHideColumn
295
- }, React__default.createElement(VisibilityOffIcon, null), " ", localization == null ? void 0 : localization.columnActionMenuItemHideColumn), enableColumnGrouping && column.canGroupBy && React__default.createElement(MenuItem, {
296
- disabled: column.isGrouped,
297
- onClick: handleGroupByColumn
298
- }, React__default.createElement(DynamicFeedIcon, null), " ", localization == null ? void 0 : localization.columnActionMenuItemGroupBy), enableColumnGrouping && column.canGroupBy && React__default.createElement(MenuItem, {
299
- disabled: !column.isGrouped,
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), " ", localization == null ? void 0 : localization.columnActionMenuItemUnGroupBy));
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: '2rem',
309
- width: '2rem',
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 _useMaterialReactTabl = useMaterialReactTable(),
318
- localization = _useMaterialReactTabl.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 StyledTableHeadCell = /*#__PURE__*/material.styled(material.TableCell)({
343
- fontWeight: 'bold',
344
- verticalAlign: 'text-top'
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 TableCellContents = /*#__PURE__*/material.styled('div')({
347
- display: 'grid'
385
+ var TableCellWrapper = /*#__PURE__*/material.styled('div')({
386
+ alignContent: 'space-between',
387
+ display: 'grid',
388
+ height: '100%'
348
389
  });
349
- var TableCellText = /*#__PURE__*/material.styled('div')({
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(_ref) {
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 = _ref.column;
409
+ var column = _ref2.column;
368
410
 
369
- var _useMaterialReactTabl = useMaterialReactTable(),
370
- densePadding = _useMaterialReactTabl.densePadding,
371
- disableColumnActions = _useMaterialReactTabl.disableColumnActions,
372
- disableFilters = _useMaterialReactTabl.disableFilters,
373
- enableColumnResizing = _useMaterialReactTabl.enableColumnResizing,
374
- localization = _useMaterialReactTabl.localization,
375
- muiTableHeadCellProps = _useMaterialReactTabl.muiTableHeadCellProps,
376
- showFilters = _useMaterialReactTabl.showFilters,
377
- tableInstance = _useMaterialReactTabl.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(StyledTableHeadCell, Object.assign({
390
- align: isParentHeader ? 'center' : 'left'
391
- }, tableCellProps), React__default.createElement(TableCellContents, null, React__default.createElement(TableCellText, {
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(MRT_FilterTextfield, {
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 _useMaterialReactTabl = useMaterialReactTable(),
419
- tableInstance = _useMaterialReactTabl.tableInstance,
420
- disableSelectAll = _useMaterialReactTabl.disableSelectAll,
421
- densePadding = _useMaterialReactTabl.densePadding;
470
+ var _localization$selectA;
422
471
 
423
- return React__default.createElement(material.TableCell, {
424
- style: {
425
- width: '2rem',
426
- padding: densePadding ? '0' : '0.6rem',
427
- transition: 'all 0.2s ease-in-out'
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
- "aria-label": ""
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 _useMaterialReactTabl = useMaterialReactTable(),
437
- tableInstance = _useMaterialReactTabl.tableInstance,
438
- localization = _useMaterialReactTabl.localization,
439
- anyRowsExpanded = _useMaterialReactTabl.anyRowsExpanded,
440
- densePadding = _useMaterialReactTabl.densePadding,
441
- renderDetailPanel = _useMaterialReactTabl.renderDetailPanel;
442
-
443
- return React__default.createElement(material.TableCell, Object.assign({
444
- size: "small"
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
- style: {
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 _mTableBodyRowProps$s;
519
+ var _mTableBodyCellrops$s;
465
520
 
466
521
  var width = _ref.width;
467
522
 
468
- var _useMaterialReactTabl = useMaterialReactTable(),
469
- muiTableBodyCellProps = _useMaterialReactTabl.muiTableBodyCellProps;
523
+ var _useMRT = useMRT(),
524
+ muiTableBodyCellProps = _useMRT.muiTableBodyCellProps;
470
525
 
471
- var mTableBodyRowProps = muiTableBodyCellProps instanceof Function ? muiTableBodyCellProps() : muiTableBodyCellProps;
526
+ var mTableBodyCellrops = muiTableBodyCellProps instanceof Function ? muiTableBodyCellProps() : muiTableBodyCellProps;
472
527
 
473
- var tableCellProps = _extends({}, mTableBodyRowProps, {
528
+ var tableCellProps = _extends({}, mTableBodyCellrops, {
474
529
  style: _extends({
475
530
  width: width
476
- }, (_mTableBodyRowProps$s = mTableBodyRowProps == null ? void 0 : mTableBodyRowProps.style) != null ? _mTableBodyRowProps$s : {})
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 _useMaterialReactTabl = useMaterialReactTable(),
488
- anyRowsCanExpand = _useMaterialReactTabl.anyRowsCanExpand,
489
- disableExpandAll = _useMaterialReactTabl.disableExpandAll,
490
- enableRowActions = _useMaterialReactTabl.enableRowActions,
491
- enableSelection = _useMaterialReactTabl.enableSelection,
492
- localization = _useMaterialReactTabl.localization,
493
- muiTableHeadRowProps = _useMaterialReactTabl.muiTableHeadRowProps,
494
- positionActionsColumn = _useMaterialReactTabl.positionActionsColumn,
495
- renderDetailPanel = _useMaterialReactTabl.renderDetailPanel,
496
- tableInstance = _useMaterialReactTabl.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), enableRowActions && positionActionsColumn === 'first' && (isParentHeader ? React__default.createElement(MRT_TableSpacerCell, null) : React__default.createElement(StyledTableHeadCell, null, localization == null ? void 0 : localization.actionsHeadColumnTitle)), anyRowsCanExpand || renderDetailPanel ? !disableExpandAll && !isParentHeader ? React__default.createElement(MRT_ExpandAllButton, null) : React__default.createElement(MRT_TableSpacerCell, {
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(StyledTableHeadCell, null, localization == null ? void 0 : localization.actionsHeadColumnTitle)));
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 _useMaterialReactTabl = useMaterialReactTable(),
525
- tableInstance = _useMaterialReactTabl.tableInstance,
526
- muiTableHeadProps = _useMaterialReactTabl.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, index) {
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: index + "-" + headerGroup.id,
599
+ key: headerGroup.getHeaderGroupProps().key,
532
600
  headerGroup: headerGroup
533
601
  });
534
602
  }));
535
603
  };
536
604
 
537
- var MRT_TableBodyCell = function MRT_TableBodyCell(_ref) {
538
- var _mTableCellBodyProps$;
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 _useMaterialReactTabl = useMaterialReactTable(),
543
- onCellClick = _useMaterialReactTabl.onCellClick,
544
- muiTableBodyCellProps = _useMaterialReactTabl.muiTableBodyCellProps,
545
- densePadding = _useMaterialReactTabl.densePadding;
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(material.TableCell, Object.assign({
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), 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'));
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 MRT_TableDetailPanel = function MRT_TableDetailPanel(_ref) {
564
- var _mTableBodyRowProps$s;
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 = _ref.row;
706
+ var row = _ref2.row;
567
707
 
568
- var _useMaterialReactTabl = useMaterialReactTable(),
569
- tableInstance = _useMaterialReactTabl.tableInstance,
570
- renderDetailPanel = _useMaterialReactTabl.renderDetailPanel,
571
- muiTableDetailPanelProps = _useMaterialReactTabl.muiTableDetailPanelProps,
572
- muiTableBodyRowProps = _useMaterialReactTabl.muiTableBodyRowProps,
573
- onDetailPanelClick = _useMaterialReactTabl.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(material.TableCell, Object.assign({
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 MRT_ExpandButton = function MRT_ExpandButton(_ref) {
605
- var row = _ref.row;
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 _useMaterialReactTabl = useMaterialReactTable(),
608
- localization = _useMaterialReactTabl.localization,
609
- tableInstance = _useMaterialReactTabl.tableInstance,
610
- densePadding = _useMaterialReactTabl.densePadding,
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(material.TableCell, {
770
+ return React__default.createElement(TableCell$1, {
614
771
  size: "small",
615
- style: {
616
- padding: densePadding ? '0' : '0.6rem 0',
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
- style: {
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 _useMaterialReactTabl = useMaterialReactTable(),
638
- tableInstance = _useMaterialReactTabl.tableInstance,
639
- onRowSelectChange = _useMaterialReactTabl.onRowSelectChange,
640
- densePadding = _useMaterialReactTabl.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(material.TableCell, {
650
- style: {
651
- width: '2rem',
652
- padding: densePadding ? '0' : '0.6rem',
653
- transition: 'all 0.2s ease-in-out'
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 _useMaterialReactTabl = useMaterialReactTable(),
672
- enableRowEditing = _useMaterialReactTabl.enableRowEditing,
673
- localization = _useMaterialReactTabl.localization,
674
- renderRowActionMenuItems = _useMaterialReactTabl.renderRowActionMenuItems,
675
- setCurrentEditingRowId = _useMaterialReactTabl.setCurrentEditingRowId,
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 _useMaterialReactTabl = useMaterialReactTable(),
1466
- localization = _useMaterialReactTabl.localization,
1467
- setCurrentEditingRowId = _useMaterialReactTabl.setCurrentEditingRowId,
1468
- onRowEditSubmit = _useMaterialReactTabl.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
- setCurrentEditingRowId(null);
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
- setCurrentEditingRowId(null);
1481
- _context.next = 3;
1482
- return onRowEditSubmit == null ? void 0 : onRowEditSubmit(row);
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 _useMaterialReactTabl = useMaterialReactTable(),
1527
- localization = _useMaterialReactTabl.localization,
1528
- currentEditingRowId = _useMaterialReactTabl.currentEditingRowId,
1529
- renderRowActions = _useMaterialReactTabl.renderRowActions,
1530
- tableInstance = _useMaterialReactTabl.tableInstance;
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
- if (renderRowActions) {
1543
- return React__default.createElement(React__default.Fragment, null, renderRowActions(row, tableInstance));
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(React__default.Fragment, null, React__default.createElement(IconButton$1, {
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 MRT_TableBodyRow = function MRT_TableBodyRow(_ref) {
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 = _ref.row;
1739
+ var row = _ref2.row;
1568
1740
 
1569
- var _useMaterialReactTabl = useMaterialReactTable(),
1570
- anyRowsCanExpand = _useMaterialReactTabl.anyRowsCanExpand,
1571
- enableRowActions = _useMaterialReactTabl.enableRowActions,
1572
- enableSelection = _useMaterialReactTabl.enableSelection,
1573
- muiTableBodyRowProps = _useMaterialReactTabl.muiTableBodyRowProps,
1574
- onRowClick = _useMaterialReactTabl.onRowClick,
1575
- positionActionsColumn = _useMaterialReactTabl.positionActionsColumn,
1576
- renderDetailPanel = _useMaterialReactTabl.renderDetailPanel;
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(material.TableRow, Object.assign({
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(material.TableCell, null, React__default.createElement(MRT_ToggleRowActionMenuButton, {
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
- })), (anyRowsCanExpand || renderDetailPanel) && React__default.createElement(MRT_ExpandButton, {
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(material.TableCell, null, React__default.createElement(MRT_ToggleRowActionMenuButton, {
1774
+ }), enableRowActions && positionActionsColumn === 'last' && React__default.createElement(MRT_ToggleRowActionMenuButton, {
1604
1775
  row: row
1605
- }))), renderDetailPanel && React__default.createElement(MRT_TableDetailPanel, {
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 _useMaterialReactTabl = useMaterialReactTable(),
1630
- tableInstance = _useMaterialReactTabl.tableInstance,
1631
- muiTableBodyProps = _useMaterialReactTabl.muiTableBodyProps,
1632
- isLoading = _useMaterialReactTabl.isLoading,
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), isLoading && React__default.createElement(CircularProgressWrapper, null, React__default.createElement(material.CircularProgress, null)), rows.map(function (row) {
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
- fontWeight: 'bold'
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(_ref) {
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 = _ref.column;
1824
+ var column = _ref2.column;
1657
1825
 
1658
- var _useMaterialReactTabl = useMaterialReactTable(),
1659
- muiTableFooterCellProps = _useMaterialReactTabl.muiTableFooterCellProps,
1660
- densePadding = _useMaterialReactTabl.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 _useMaterialReactTabl = useMaterialReactTable(),
1684
- renderDetailPanel = _useMaterialReactTabl.renderDetailPanel,
1685
- columns = _useMaterialReactTabl.columns,
1686
- anyRowsCanExpand = _useMaterialReactTabl.anyRowsCanExpand,
1687
- enableSelection = _useMaterialReactTabl.enableSelection,
1688
- enableRowActions = _useMaterialReactTabl.enableRowActions,
1689
- positionActionsColumn = _useMaterialReactTabl.positionActionsColumn,
1690
- tableInstance = _useMaterialReactTabl.tableInstance,
1691
- muiTableFooterRowProps = _useMaterialReactTabl.muiTableFooterRowProps; //if no content in row, skip row
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, index) {
1877
+ }), footerGroup.headers.map(function (column) {
1708
1878
  return React__default.createElement(MRT_TableFooterCell, {
1709
- key: index + "-" + column.id,
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 _useMaterialReactTabl = useMaterialReactTable(),
1717
- muiTableFooterProps = _useMaterialReactTabl.muiTableFooterProps,
1718
- tableInstance = _useMaterialReactTabl.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, index) {
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: index + "-" + footerGroup.id,
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 _useMaterialReactTabl = useMaterialReactTable(),
1732
- tableInstance = _useMaterialReactTabl.tableInstance,
1733
- muiTableProps = _useMaterialReactTabl.muiTableProps,
1734
- hideTableHead = _useMaterialReactTabl.hideTableHead,
1735
- hideTableFooter = _useMaterialReactTabl.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 _useMaterialReactTabl = useMaterialReactTable(),
1749
- tableInstance = _useMaterialReactTabl.tableInstance,
1750
- muiSearchTextFieldProps = _useMaterialReactTabl.muiSearchTextFieldProps,
1751
- localization = _useMaterialReactTabl.localization,
1752
- onGlobalFilterChange = _useMaterialReactTabl.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(TextField, Object.assign({
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 _useMaterialReactTabl = useMaterialReactTable(),
1803
- localization = _useMaterialReactTabl.localization,
1804
- setShowFilters = _useMaterialReactTabl.setShowFilters,
1805
- showFilters = _useMaterialReactTabl.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 _useMaterialReactTabl = useMaterialReactTable(),
1825
- maxColumnDepth = _useMaterialReactTabl.maxColumnDepth;
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 + 1 + "rem"
2018
+ paddingLeft: (column.depth + 0.5) * 2 + "rem"
1831
2019
  }
1832
- }, isMaxDepth ? React__default.createElement(material.FormControlLabel, {
1833
- checked: column.isVisible,
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 isMaxDepth && column.toggleHidden();
2025
+ return handleToggleColumnHidden(column);
1838
2026
  }
1839
- }) : React__default.createElement(material.Typography, null, column.Header)), (_column$columns = column.columns) == null ? void 0 : _column$columns.map(function (c, i) {
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 _useMaterialReactTabl = useMaterialReactTable(),
1851
- tableInstance = _useMaterialReactTabl.tableInstance,
1852
- localization = _useMaterialReactTabl.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
- }, tableInstance.columns.map(function (column, index) {
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 _useMaterialReactTabl = useMaterialReactTable(),
1887
- densePadding = _useMaterialReactTabl.densePadding,
1888
- setDensePadding = _useMaterialReactTabl.setDensePadding,
1889
- localization = _useMaterialReactTabl.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 MRT_ToolbarButtons = function MRT_ToolbarButtons() {
1910
- var _useMaterialReactTabl = useMaterialReactTable(),
1911
- disableFilters = _useMaterialReactTabl.disableFilters,
1912
- disableColumnHiding = _useMaterialReactTabl.disableColumnHiding,
1913
- disableDensePaddingToggle = _useMaterialReactTabl.disableDensePaddingToggle;
1914
-
1915
- return React__default.createElement(ToolbarButtonsContainer, null, !disableFilters && React__default.createElement(MRT_ToggleFiltersButton, null), !disableColumnHiding && React__default.createElement(MRT_ShowHideColumnsButton, null), !disableDensePaddingToggle && React__default.createElement(MRT_DensePaddingSwitch, null));
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 _useMaterialReactTabl = useMaterialReactTable(),
1920
- tableInstance = _useMaterialReactTabl.tableInstance,
1921
- muiTablePaginationProps = _useMaterialReactTabl.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 _useMaterialReactTabl = useMaterialReactTable(),
1958
- disableGlobalFilter = _useMaterialReactTabl.disableGlobalFilter,
1959
- disableColumnHiding = _useMaterialReactTabl.disableColumnHiding,
1960
- muiTableTitleProps = _useMaterialReactTabl.muiTableTitleProps,
1961
- disableFilters = _useMaterialReactTabl.disableFilters,
1962
- manualPagination = _useMaterialReactTabl.manualPagination,
1963
- positionPagination = _useMaterialReactTabl.positionPagination,
1964
- muiTableToolbarTopProps = _useMaterialReactTabl.muiTableToolbarTopProps,
1965
- hideToolbarActions = _useMaterialReactTabl.hideToolbarActions,
1966
- positionToolbarActions = _useMaterialReactTabl.positionToolbarActions,
1967
- title = _useMaterialReactTabl.title,
1968
- tableInstance = _useMaterialReactTabl.tableInstance; // if no features in the toolbar are enabled, don't render anything
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, title ? React__default.createElement(material.Typography, Object.assign({
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 _useMaterialReactTabl = useMaterialReactTable(),
1990
- disableGlobalFilter = _useMaterialReactTabl.disableGlobalFilter,
1991
- disableColumnHiding = _useMaterialReactTabl.disableColumnHiding,
1992
- manualPagination = _useMaterialReactTabl.manualPagination,
1993
- positionPagination = _useMaterialReactTabl.positionPagination,
1994
- disableFilters = _useMaterialReactTabl.disableFilters,
1995
- hideToolbarActions = _useMaterialReactTabl.hideToolbarActions,
1996
- positionToolbarActions = _useMaterialReactTabl.positionToolbarActions,
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(MRT_ToolbarButtons, null) : React__default.createElement("span", null), !manualPagination && ['bottom', 'both'].includes(positionPagination != null ? positionPagination : '') && React__default.createElement(MRT_TablePagination, null));
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 _useMaterialReactTabl = useMaterialReactTable(),
2014
- muiTableContainerProps = _useMaterialReactTabl.muiTableContainerProps,
2015
- hideToolbarTop = _useMaterialReactTabl.hideToolbarTop,
2016
- hideToolbarBottom = _useMaterialReactTabl.hideToolbarBottom,
2017
- isFetching = _useMaterialReactTabl.isFetching;
2018
-
2019
- return React__default.createElement(material.TableContainer, Object.assign({
2020
- component: material.Paper
2021
- }, muiTableContainerProps), !hideToolbarTop && React__default.createElement(MRT_ToolbarTop, null), isFetching && React__default.createElement(material.LinearProgress, null), React__default.createElement(MRT_Table, null), !hideToolbarBottom && React__default.createElement(MRT_ToolbarBottom, null));
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
- rowActionButtonSave: 'Save',
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
- positionToolbarActions: positionToolbarActions
2427
+ positionPagination: positionPagination,
2428
+ positionToolbarActions: positionToolbarActions,
2429
+ positionToolbarAlertBanner: positionToolbarAlertBanner
2072
2430
  }, rest), React__default.createElement(MRT_TableContainer, null));
2073
2431
  });
2074
2432