material-react-table 0.3.3 → 0.3.4

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 (55) hide show
  1. package/dist/MaterialReactTable.d.ts +8 -5
  2. package/dist/buttons/MRT_ToggleSearchButton.d.ts +4 -0
  3. package/dist/inputs/{MRT_EditCellTextfield.d.ts → MRT_EditCellTextField.d.ts} +1 -1
  4. package/dist/inputs/MRT_FilterTextField.d.ts +1 -1
  5. package/dist/material-react-table.cjs.development.js +250 -160
  6. package/dist/material-react-table.cjs.development.js.map +1 -1
  7. package/dist/material-react-table.cjs.production.min.js +1 -1
  8. package/dist/material-react-table.cjs.production.min.js.map +1 -1
  9. package/dist/material-react-table.esm.js +253 -163
  10. package/dist/material-react-table.esm.js.map +1 -1
  11. package/dist/menus/MRT_ColumnActionMenu.d.ts +2 -2
  12. package/dist/menus/MRT_RowActionMenu.d.ts +1 -0
  13. package/dist/table/MRT_TableButtonCell.d.ts +3 -0
  14. package/dist/useMaterialReactTable.d.ts +2 -0
  15. package/dist/utils/localization.d.ts +2 -0
  16. package/dist/utils/useMRTCalcs.d.ts +1 -1
  17. package/package.json +8 -6
  18. package/src/@types/react-table-config.d.ts +33 -55
  19. package/src/MaterialReactTable.tsx +22 -54
  20. package/src/body/MRT_TableBody.tsx +1 -2
  21. package/src/body/MRT_TableBodyCell.tsx +7 -14
  22. package/src/body/MRT_TableBodyRow.tsx +7 -24
  23. package/src/body/MRT_TableDetailPanel.tsx +3 -12
  24. package/src/buttons/MRT_EditActionButtons.tsx +4 -10
  25. package/src/buttons/MRT_ExpandAllButton.tsx +7 -18
  26. package/src/buttons/MRT_ExpandButton.tsx +8 -15
  27. package/src/buttons/MRT_ShowHideColumnsButton.tsx +2 -9
  28. package/src/buttons/MRT_ToggleColumnActionMenuButton.tsx +4 -8
  29. package/src/buttons/MRT_ToggleRowActionMenuButton.tsx +42 -24
  30. package/src/buttons/MRT_ToggleSearchButton.tsx +29 -0
  31. package/src/footer/MRT_TableFooter.tsx +1 -4
  32. package/src/footer/MRT_TableFooterCell.tsx +2 -4
  33. package/src/footer/MRT_TableFooterRow.tsx +4 -10
  34. package/src/head/MRT_TableHead.tsx +2 -7
  35. package/src/head/MRT_TableHeadCell.tsx +15 -15
  36. package/src/head/MRT_TableHeadRow.tsx +2 -4
  37. package/src/inputs/MRT_DensePaddingSwitch.tsx +4 -2
  38. package/src/inputs/{MRT_EditCellTextfield.tsx → MRT_EditCellTextField.tsx} +21 -14
  39. package/src/inputs/MRT_FilterTextField.tsx +39 -16
  40. package/src/inputs/MRT_SearchTextField.tsx +40 -43
  41. package/src/inputs/MRT_SelectAllCheckbox.tsx +8 -13
  42. package/src/inputs/MRT_SelectCheckbox.tsx +9 -13
  43. package/src/menus/MRT_ColumnActionMenu.tsx +51 -35
  44. package/src/menus/MRT_RowActionMenu.tsx +6 -25
  45. package/src/table/MRT_Table.tsx +1 -2
  46. package/src/table/MRT_TableButtonCell.tsx +9 -0
  47. package/src/table/MRT_TableContainer.tsx +2 -7
  48. package/src/table/MRT_TableSpacerCell.tsx +1 -3
  49. package/src/toolbar/MRT_TablePagination.tsx +3 -6
  50. package/src/toolbar/MRT_ToolbarBottom.tsx +4 -6
  51. package/src/toolbar/MRT_ToolbarButtons.tsx +3 -1
  52. package/src/toolbar/MRT_ToolbarTop.tsx +8 -17
  53. package/src/useMaterialReactTable.tsx +14 -21
  54. package/src/utils/localization.ts +10 -6
  55. package/src/utils/useMRTCalcs.tsx +1 -3
@@ -24,6 +24,7 @@ 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'));
27
28
 
28
29
  function asyncGeneratorStep(gen, resolve, reject, _next, _throw, key, arg) {
29
30
  try {
@@ -129,7 +130,7 @@ var MaterialReactTableContext = /*#__PURE__*/function () {
129
130
  }();
130
131
 
131
132
  var MaterialReactTableProvider = function MaterialReactTableProvider(props) {
132
- var _props$defaultShowFil, _props$defaultDensePa;
133
+ var _props$defaultShowSea, _props$defaultShowFil, _props$defaultDensePa;
133
134
 
134
135
  var hooks = [reactTable.useResizeColumns, reactTable.useFilters, reactTable.useGlobalFilter, reactTable.useGroupBy, reactTable.useSortBy, reactTable.useExpanded, reactTable.usePagination, reactTable.useRowSelect];
135
136
  if (props.enableColumnResizing) hooks.unshift(reactTable.useFlexLayout);
@@ -138,26 +139,32 @@ var MaterialReactTableProvider = function MaterialReactTableProvider(props) {
138
139
  tableInstance: tableInstance
139
140
  });
140
141
 
141
- var _useState = React.useState((_props$defaultShowFil = props.defaultShowFilters) != null ? _props$defaultShowFil : false),
142
- showFilters = _useState[0],
143
- setShowFilters = _useState[1];
142
+ var _useState = React.useState((_props$defaultShowSea = props.defaultShowSearchTextField) != null ? _props$defaultShowSea : false),
143
+ showSearch = _useState[0],
144
+ setShowSearch = _useState[1];
144
145
 
145
- var _useState2 = React.useState((_props$defaultDensePa = props.defaultDensePadding) != null ? _props$defaultDensePa : false),
146
- densePadding = _useState2[0],
147
- setDensePadding = _useState2[1];
146
+ var _useState2 = React.useState((_props$defaultShowFil = props.defaultShowFilters) != null ? _props$defaultShowFil : false),
147
+ showFilters = _useState2[0],
148
+ setShowFilters = _useState2[1];
148
149
 
149
- var _useState3 = React.useState(null),
150
- currentEditingRow = _useState3[0],
151
- setCurrentEditingRow = _useState3[1];
150
+ var _useState3 = React.useState((_props$defaultDensePa = props.defaultDensePadding) != null ? _props$defaultDensePa : false),
151
+ densePadding = _useState3[0],
152
+ setDensePadding = _useState3[1];
153
+
154
+ var _useState4 = React.useState(null),
155
+ currentEditingRow = _useState4[0],
156
+ setCurrentEditingRow = _useState4[1];
152
157
 
153
158
  return React__default.createElement(MaterialReactTableContext.Provider, {
154
159
  value: _extends({}, mrtCalcs, props, {
160
+ currentEditingRow: currentEditingRow,
155
161
  densePadding: densePadding,
162
+ setCurrentEditingRow: setCurrentEditingRow,
156
163
  setDensePadding: setDensePadding,
157
164
  setShowFilters: setShowFilters,
158
- currentEditingRow: currentEditingRow,
159
- setCurrentEditingRow: setCurrentEditingRow,
165
+ setShowSearch: setShowSearch,
160
166
  showFilters: showFilters,
167
+ showSearch: showSearch,
161
168
  // @ts-ignore
162
169
  tableInstance: tableInstance
163
170
  })
@@ -169,7 +176,9 @@ var useMaterialReactTable = function useMaterialReactTable() {
169
176
  );
170
177
  };
171
178
 
172
- var MRT_FilterTextfield = function MRT_FilterTextfield(_ref) {
179
+ var MRT_FilterTextField = function MRT_FilterTextField(_ref) {
180
+ var _localization$filterT, _localization$filterT2, _localization$filterT3, _localization$filterT4;
181
+
173
182
  var column = _ref.column;
174
183
 
175
184
  var _useMaterialReactTabl = useMaterialReactTable(),
@@ -189,14 +198,21 @@ var MRT_FilterTextfield = function MRT_FilterTextfield(_ref) {
189
198
  };
190
199
 
191
200
  if (column.Filter) {
192
- return React__default.createElement(React__default.Fragment, null, column.Filter({
201
+ return React__default.createElement(React__default.Fragment, null, column.Filter == null ? void 0 : column.Filter({
193
202
  column: column
194
203
  }));
195
204
  }
196
205
 
197
206
  return React__default.createElement(material.TextField, {
207
+ fullWidth: true,
208
+ id: "filter-" + column.id + "-column",
209
+ inputProps: {
210
+ style: {
211
+ textOverflow: 'ellipsis'
212
+ }
213
+ },
198
214
  margin: "dense",
199
- placeholder: localization == null ? void 0 : localization.filterTextFieldPlaceholder,
215
+ placeholder: localization == null ? void 0 : (_localization$filterT = localization.filterTextFieldPlaceholder) == null ? void 0 : _localization$filterT.replace('{column}', String(column.Header)),
200
216
  onChange: function onChange(e) {
201
217
  setFilterValue(e.target.value);
202
218
  handleChange(e.target.value);
@@ -207,20 +223,25 @@ var MRT_FilterTextfield = function MRT_FilterTextfield(_ref) {
207
223
  value: filterValue != null ? filterValue : '',
208
224
  variant: "standard",
209
225
  InputProps: {
210
- startAdornment: React__default.createElement(material.InputAdornment, {
226
+ startAdornment: React__default.createElement(material.Tooltip, {
227
+ arrow: true,
228
+ title: (_localization$filterT2 = localization == null ? void 0 : (_localization$filterT3 = localization.filterTextFieldPlaceholder) == null ? void 0 : _localization$filterT3.replace('{column}', String(column.Header))) != null ? _localization$filterT2 : ''
229
+ }, React__default.createElement(material.InputAdornment, {
211
230
  position: "start"
212
- }, React__default.createElement(FilterIcon, null)),
231
+ }, React__default.createElement(FilterIcon, null))),
213
232
  endAdornment: React__default.createElement(material.InputAdornment, {
214
233
  position: "end"
215
- }, React__default.createElement(material.IconButton, {
234
+ }, React__default.createElement(material.Tooltip, {
235
+ arrow: true,
236
+ title: (_localization$filterT4 = localization == null ? void 0 : localization.filterTextFieldClearButtonTitle) != null ? _localization$filterT4 : ''
237
+ }, React__default.createElement("span", null, React__default.createElement(material.IconButton, {
216
238
  "aria-label": localization == null ? void 0 : localization.filterTextFieldClearButtonTitle,
217
239
  disabled: (filterValue == null ? void 0 : filterValue.length) === 0,
218
240
  onClick: handleClear,
219
- size: "small",
220
- title: localization == null ? void 0 : localization.filterTextFieldClearButtonTitle
241
+ size: "small"
221
242
  }, React__default.createElement(CloseIcon, {
222
243
  fontSize: "small"
223
- })))
244
+ })))))
224
245
  }
225
246
  });
226
247
  };
@@ -230,6 +251,8 @@ var MenuItem = /*#__PURE__*/material.styled(material.MenuItem)({
230
251
  gap: '0.75rem'
231
252
  });
232
253
  var MRT_ColumnActionMenu = function MRT_ColumnActionMenu(_ref) {
254
+ var _localization$columnA, _localization$columnA2, _localization$filterT, _localization, _localization$columnA3;
255
+
233
256
  var anchorEl = _ref.anchorEl,
234
257
  column = _ref.column,
235
258
  setAnchorEl = _ref.setAnchorEl;
@@ -238,7 +261,9 @@ var MRT_ColumnActionMenu = function MRT_ColumnActionMenu(_ref) {
238
261
  disableColumnHiding = _useMaterialReactTabl.disableColumnHiding,
239
262
  enableColumnGrouping = _useMaterialReactTabl.enableColumnGrouping,
240
263
  disableSortBy = _useMaterialReactTabl.disableSortBy,
241
- localization = _useMaterialReactTabl.localization;
264
+ localization = _useMaterialReactTabl.localization,
265
+ disableFilters = _useMaterialReactTabl.disableFilters,
266
+ setShowFilters = _useMaterialReactTabl.setShowFilters;
242
267
 
243
268
  var handleClearSort = function handleClearSort() {
244
269
  column.clearSortBy();
@@ -265,6 +290,17 @@ var MRT_ColumnActionMenu = function MRT_ColumnActionMenu(_ref) {
265
290
  setAnchorEl(null);
266
291
  };
267
292
 
293
+ var handleFilterByColumn = function handleFilterByColumn() {
294
+ setShowFilters(true);
295
+ setTimeout(function () {
296
+ var _document$getElementB, _column$muiTableHeadC, _column$muiTableHeadC2;
297
+
298
+ return (_document$getElementB = document.getElementById( // @ts-ignore
299
+ (_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();
300
+ }, 200);
301
+ setAnchorEl(null);
302
+ };
303
+
268
304
  return React__default.createElement(material.Menu, {
269
305
  anchorEl: anchorEl,
270
306
  open: !!anchorEl,
@@ -279,7 +315,7 @@ var MRT_ColumnActionMenu = function MRT_ColumnActionMenu(_ref) {
279
315
  key: 2,
280
316
  disabled: column.isSorted && !column.isSortedDesc,
281
317
  onClick: handleSortAsc
282
- }, React__default.createElement(SortIcon, null), " ", localization == null ? void 0 : localization.columnActionMenuItemSortAsc), React__default.createElement(MenuItem, {
318
+ }, 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, {
283
319
  key: 3,
284
320
  disabled: column.isSorted && column.isSortedDesc,
285
321
  onClick: handleSortDesc
@@ -287,25 +323,30 @@ var MRT_ColumnActionMenu = function MRT_ColumnActionMenu(_ref) {
287
323
  style: {
288
324
  transform: 'rotate(180deg) scaleX(-1)'
289
325
  }
290
- }), ' ', localization == null ? void 0 : localization.columnActionMenuItemSortDesc), React__default.createElement(material.Divider, {
291
- key: 4
292
- })], !disableColumnHiding && React__default.createElement(MenuItem, {
293
- onClick: handleHideColumn
294
- }, React__default.createElement(VisibilityOffIcon, null), " ", localization == null ? void 0 : localization.columnActionMenuItemHideColumn), enableColumnGrouping && column.canGroupBy && React__default.createElement(MenuItem, {
295
- disabled: column.isGrouped,
296
- onClick: handleGroupByColumn
297
- }, React__default.createElement(DynamicFeedIcon, null), " ", localization == null ? void 0 : localization.columnActionMenuItemGroupBy), enableColumnGrouping && column.canGroupBy && React__default.createElement(MenuItem, {
298
- disabled: !column.isGrouped,
326
+ }), ' ', 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, {
327
+ key: 0
328
+ }), React__default.createElement(MenuItem, {
329
+ key: 1,
330
+ onClick: handleFilterByColumn
331
+ }, 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, {
332
+ key: 1
333
+ }), React__default.createElement(MenuItem, {
334
+ key: 2,
299
335
  onClick: handleGroupByColumn
300
- }, React__default.createElement(DynamicFeedIcon, null), " ", localization == null ? void 0 : localization.columnActionMenuItemUnGroupBy));
336
+ }, 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, {
337
+ key: 0
338
+ }), React__default.createElement(MenuItem, {
339
+ key: 1,
340
+ onClick: handleHideColumn
341
+ }, React__default.createElement(VisibilityOffIcon, null), ' ', localization == null ? void 0 : (_localization$columnA3 = localization.columnActionMenuItemHideColumn) == null ? void 0 : _localization$columnA3.replace('{column}', String(column.Header)))]);
301
342
  };
302
343
 
303
344
  var IconButton = /*#__PURE__*/material.styled(material.IconButton)({
304
345
  opacity: 0.5,
305
346
  transition: 'opacity 0.2s',
306
347
  marginRight: '2px',
307
- height: '2rem',
308
- width: '2rem',
348
+ height: '1.6rem',
349
+ width: '1.6rem',
309
350
  '&:hover': {
310
351
  opacity: 1
311
352
  }
@@ -328,9 +369,9 @@ var MRT_ToggleColumnActionMenuButton = function MRT_ToggleColumnActionMenuButton
328
369
 
329
370
  return React__default.createElement(React__default.Fragment, null, React__default.createElement(IconButton, {
330
371
  "aria-label": localization == null ? void 0 : localization.columnActionMenuButtonTitle,
331
- title: localization == null ? void 0 : localization.columnActionMenuButtonTitle,
332
372
  onClick: handleClick,
333
- size: "small"
373
+ size: "small",
374
+ title: localization == null ? void 0 : localization.columnActionMenuButtonTitle
334
375
  }, React__default.createElement(MoreVertIcon, null)), React__default.createElement(MRT_ColumnActionMenu, {
335
376
  anchorEl: anchorEl,
336
377
  column: column,
@@ -347,23 +388,27 @@ var StyledTableHeadCell = /*#__PURE__*/material.styled(material.TableCell, {
347
388
  enableColumnResizing = _ref.enableColumnResizing;
348
389
  return {
349
390
  fontWeight: 'bold',
350
- verticalAlign: 'text-top',
391
+ height: '100%',
351
392
  padding: densePadding ? '0.5rem' : '1rem',
352
- transition: "all " + (enableColumnResizing ? '10ms' : '0.2s') + " ease-in-out"
393
+ transition: "all " + (enableColumnResizing ? '10ms' : '0.2s') + " ease-in-out",
394
+ verticalAlign: 'text-top'
353
395
  };
354
396
  });
355
- var TableCellContents = /*#__PURE__*/material.styled('div')({
356
- display: 'grid'
397
+ var TableCellWrapper = /*#__PURE__*/material.styled('div')({
398
+ alignContent: 'space-between',
399
+ display: 'grid',
400
+ height: '100%'
357
401
  });
358
- var TableCellText = /*#__PURE__*/material.styled('div')({
402
+ var TableCellTopContents = /*#__PURE__*/material.styled('div')({
359
403
  width: '100%',
360
404
  display: 'flex',
361
- justifyContent: 'space-between'
405
+ justifyContent: 'space-between',
406
+ alignItems: 'flex-start'
362
407
  });
363
408
  var CellFlexItem = /*#__PURE__*/material.styled('span')({
409
+ alignItems: 'center',
364
410
  display: 'flex',
365
- flexWrap: 'nowrap',
366
- alignItems: 'center'
411
+ flexWrap: 'nowrap'
367
412
  });
368
413
  var Divider = /*#__PURE__*/material.styled(material.Divider)({
369
414
  borderRightWidth: '2px',
@@ -397,17 +442,14 @@ var MRT_TableHeadCell = function MRT_TableHeadCell(_ref2) {
397
442
  align: isParentHeader ? 'center' : 'left',
398
443
  densePadding: densePadding,
399
444
  enableColumnResizing: enableColumnResizing
400
- }, tableCellProps), React__default.createElement(TableCellContents, null, React__default.createElement(TableCellText, {
445
+ }, tableCellProps), React__default.createElement(TableCellWrapper, null, React__default.createElement(TableCellTopContents, {
401
446
  style: {
402
447
  justifyContent: isParentHeader ? 'center' : undefined
403
448
  }
404
449
  }, React__default.createElement(CellFlexItem, Object.assign({}, column.getSortByToggleProps()), column.render('Header'), !isParentHeader && column.canSort && React__default.createElement(material.TableSortLabel, {
405
450
  "aria-label": column.isSorted ? column.sortDescFirst ? localization == null ? void 0 : localization.columnActionMenuItemClearSort : localization == null ? void 0 : localization.columnActionMenuItemSortDesc : localization == null ? void 0 : localization.columnActionMenuItemSortAsc,
406
451
  active: column.isSorted,
407
- direction: column.isSortedDesc ? 'desc' : 'asc',
408
- style: {
409
- margin: 0
410
- }
452
+ direction: column.isSortedDesc ? 'desc' : 'asc'
411
453
  })), React__default.createElement(CellFlexItem, null, !disableColumnActions && !isParentHeader && React__default.createElement(MRT_ToggleColumnActionMenuButton, {
412
454
  column: column
413
455
  }), enableColumnResizing && !isParentHeader && React__default.createElement(Divider, Object.assign({
@@ -418,34 +460,40 @@ var MRT_TableHeadCell = function MRT_TableHeadCell(_ref2) {
418
460
  }
419
461
  }, column.getResizerProps())))), !disableFilters && column.canFilter && React__default.createElement(material.Collapse, {
420
462
  "in": showFilters
421
- }, React__default.createElement(MRT_FilterTextfield, {
463
+ }, React__default.createElement(MRT_FilterTextField, {
422
464
  column: column
423
465
  }))));
424
466
  };
425
467
 
426
- var TableCell = /*#__PURE__*/material.styled(material.TableCell, {
468
+ var MRT_TableButtonCell = /*#__PURE__*/material.styled(material.TableCell, {
427
469
  shouldForwardProp: function shouldForwardProp(prop) {
428
470
  return prop !== 'densePadding';
429
471
  }
430
472
  })(function (_ref) {
431
473
  var densePadding = _ref.densePadding;
432
474
  return {
433
- padding: densePadding ? '0' : '0.6rem',
475
+ padding: densePadding ? '1px' : '0.6rem',
476
+ textAlign: 'center',
434
477
  transition: 'all 0.2s ease-in-out'
435
478
  };
436
479
  });
480
+
437
481
  var MRT_SelectAllCheckbox = function MRT_SelectAllCheckbox() {
482
+ var _localization$selectA;
483
+
438
484
  var _useMaterialReactTabl = useMaterialReactTable(),
439
485
  tableInstance = _useMaterialReactTabl.tableInstance,
440
486
  disableSelectAll = _useMaterialReactTabl.disableSelectAll,
441
487
  densePadding = _useMaterialReactTabl.densePadding,
442
488
  localization = _useMaterialReactTabl.localization;
443
489
 
444
- return React__default.createElement(TableCell, {
490
+ return React__default.createElement(MRT_TableButtonCell, {
445
491
  densePadding: densePadding,
446
492
  variant: "head"
447
493
  }, !disableSelectAll ? React__default.createElement(material.Checkbox, Object.assign({
448
- "aria-label": localization == null ? void 0 : localization.selectAllCheckboxTitle
494
+ inputProps: {
495
+ 'aria-label': (_localization$selectA = localization == null ? void 0 : localization.selectAllCheckboxTitle) != null ? _localization$selectA : ''
496
+ }
449
497
  }, tableInstance.getToggleAllPageRowsSelectedProps())) : null);
450
498
  };
451
499
 
@@ -465,18 +513,12 @@ var MRT_ExpandAllButton = function MRT_ExpandAllButton() {
465
513
  tableInstance = _useMaterialReactTabl.tableInstance,
466
514
  localization = _useMaterialReactTabl.localization,
467
515
  anyRowsExpanded = _useMaterialReactTabl.anyRowsExpanded,
468
- densePadding = _useMaterialReactTabl.densePadding,
469
- renderDetailPanel = _useMaterialReactTabl.renderDetailPanel;
516
+ densePadding = _useMaterialReactTabl.densePadding;
470
517
 
471
- return React__default.createElement(material.TableCell, Object.assign({
472
- size: "small"
473
- }, tableInstance.getToggleAllRowsExpandedProps(), {
474
- style: {
475
- padding: densePadding ? '0' : '0.5rem 0.5rem',
476
- transition: 'all 0.2s ease-in-out',
477
- width: (renderDetailPanel ? 2 : tableInstance.expandedDepth + 2) + "rem"
478
- }
479
- }), React__default.createElement(material.IconButton, {
518
+ return React__default.createElement(MRT_TableButtonCell, Object.assign({
519
+ size: "small",
520
+ densePadding: densePadding
521
+ }, tableInstance.getToggleAllRowsExpandedProps()), React__default.createElement(material.IconButton, {
480
522
  "aria-label": localization == null ? void 0 : localization.expandAllButtonTitle,
481
523
  title: localization == null ? void 0 : localization.expandAllButtonTitle
482
524
  }, React__default.createElement(ArrowRightIcon, {
@@ -534,7 +576,11 @@ var MRT_TableHeadRow = function MRT_TableHeadRow(_ref) {
534
576
  style: _extends({}, headerGroup.getHeaderGroupProps().style, (_mTableHeadRowProps$s = mTableHeadRowProps == null ? void 0 : mTableHeadRowProps.style) != null ? _mTableHeadRowProps$s : {})
535
577
  });
536
578
 
537
- 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), enableRowActions && positionActionsColumn === 'first' && (isParentHeader ? React__default.createElement(MRT_TableSpacerCell, null) : React__default.createElement(StyledTableHeadCell, {
580
+ style: {
581
+ textAlign: 'center'
582
+ }
583
+ }, localization == null ? void 0 : localization.actionsHeadColumnTitle)), anyRowsCanExpand || renderDetailPanel ? !disableExpandAll && !isParentHeader ? React__default.createElement(MRT_ExpandAllButton, null) : React__default.createElement(MRT_TableSpacerCell, {
538
584
  width: (renderDetailPanel ? 2 : tableInstance.expandedDepth + 0.5) + "rem"
539
585
  }) : null, enableSelection ? !isParentHeader ? React__default.createElement(MRT_SelectAllCheckbox, null) : React__default.createElement(MRT_TableSpacerCell, {
540
586
  width: "1rem"
@@ -562,51 +608,52 @@ var MRT_TableHead = function MRT_TableHead() {
562
608
  }));
563
609
  };
564
610
 
565
- var MRT_EditCellTextfield = function MRT_EditCellTextfield(_ref) {
566
- var _cell$column$muiTable, _currentEditingRow$va;
611
+ var MRT_EditCellTextField = function MRT_EditCellTextField(_ref) {
612
+ var _cell$column$muiTable;
567
613
 
568
614
  var cell = _ref.cell;
569
615
 
570
616
  var _useMaterialReactTabl = useMaterialReactTable(),
571
- localization = _useMaterialReactTabl.localization,
572
617
  currentEditingRow = _useMaterialReactTabl.currentEditingRow,
573
- setCurrentEditingRow = _useMaterialReactTabl.setCurrentEditingRow,
574
- muiTableBodyCellEditTextFieldProps = _useMaterialReactTabl.muiTableBodyCellEditTextFieldProps;
618
+ localization = _useMaterialReactTabl.localization,
619
+ muiTableBodyCellEditTextFieldProps = _useMaterialReactTabl.muiTableBodyCellEditTextFieldProps,
620
+ setCurrentEditingRow = _useMaterialReactTabl.setCurrentEditingRow;
575
621
 
576
622
  var handleChange = function handleChange(event) {
577
623
  if (currentEditingRow) {
578
- var _extends2;
579
-
580
- setCurrentEditingRow(_extends({}, currentEditingRow, {
581
- values: _extends({}, cell.row.values, (_extends2 = {}, _extends2[cell.column.id] = event.target.value, _extends2))
582
- }));
624
+ cell.row.values[cell.column.id] = event.target.value;
625
+ setCurrentEditingRow(_extends({}, currentEditingRow));
583
626
  }
627
+
628
+ cell.column.onCellEditChange == null ? void 0 : cell.column.onCellEditChange(event, cell);
584
629
  };
585
630
 
586
- var textFieldProps = _extends({}, muiTableBodyCellEditTextFieldProps, cell.column.muiTableBodyCellEditTextFieldProps, {
631
+ var mTableBodyCellEditTextFieldProps = muiTableBodyCellEditTextFieldProps instanceof Function ? muiTableBodyCellEditTextFieldProps(cell) : muiTableBodyCellEditTextFieldProps;
632
+ var mcTableBodyCellEditTextFieldProps = cell.column.muiTableBodyCellEditTextFieldProps instanceof Function ? cell.column.muiTableBodyCellEditTextFieldProps(cell) : cell.column.muiTableBodyCellEditTextFieldProps;
633
+
634
+ var textFieldProps = _extends({}, mTableBodyCellEditTextFieldProps, mcTableBodyCellEditTextFieldProps, {
587
635
  style: _extends({}, muiTableBodyCellEditTextFieldProps == null ? void 0 : muiTableBodyCellEditTextFieldProps.style, (_cell$column$muiTable = cell.column.muiTableBodyCellEditTextFieldProps) == null ? void 0 : _cell$column$muiTable.style)
588
636
  });
589
637
 
590
638
  if (cell.column.editable && cell.column.Edit) {
591
639
  return React__default.createElement(React__default.Fragment, null, cell.column.Edit(_extends({}, textFieldProps, {
592
- cell: cell,
593
- onChange: handleChange
640
+ cell: cell
594
641
  })));
595
642
  }
596
643
 
597
644
  return React__default.createElement(material.TextField, Object.assign({
598
645
  margin: "dense",
599
- placeholder: localization == null ? void 0 : localization.filterTextFieldPlaceholder,
600
646
  onChange: handleChange,
601
647
  onClick: function onClick(e) {
602
648
  return e.stopPropagation();
603
649
  },
604
- value: currentEditingRow == null ? void 0 : (_currentEditingRow$va = currentEditingRow.values) == null ? void 0 : _currentEditingRow$va[cell.column.id],
650
+ placeholder: localization == null ? void 0 : localization.filterTextFieldPlaceholder,
651
+ value: cell.value,
605
652
  variant: "standard"
606
653
  }, textFieldProps));
607
654
  };
608
655
 
609
- var TableCell$1 = /*#__PURE__*/material.styled(material.TableCell, {
656
+ var TableCell = /*#__PURE__*/material.styled(material.TableCell, {
610
657
  shouldForwardProp: function shouldForwardProp(prop) {
611
658
  return prop !== 'densePadding';
612
659
  }
@@ -614,7 +661,8 @@ var TableCell$1 = /*#__PURE__*/material.styled(material.TableCell, {
614
661
  var densePadding = _ref.densePadding;
615
662
  return {
616
663
  padding: densePadding ? '0.5rem' : '1rem',
617
- transition: 'all 0.2s ease-in-out'
664
+ transition: 'all 0.2s ease-in-out',
665
+ whiteSpace: densePadding ? 'nowrap' : 'normal'
618
666
  };
619
667
  });
620
668
  var MRT_TableBodyCell = function MRT_TableBodyCell(_ref2) {
@@ -635,17 +683,17 @@ var MRT_TableBodyCell = function MRT_TableBodyCell(_ref2) {
635
683
  style: _extends({}, cell.getCellProps().style, (_mTableCellBodyProps$ = mTableCellBodyProps == null ? void 0 : mTableCellBodyProps.style) != null ? _mTableCellBodyProps$ : {}, (_mcTableCellBodyProps = mcTableCellBodyProps == null ? void 0 : mcTableCellBodyProps.style) != null ? _mcTableCellBodyProps : {})
636
684
  });
637
685
 
638
- return React__default.createElement(TableCell$1, Object.assign({
686
+ return React__default.createElement(TableCell, Object.assign({
639
687
  densePadding: densePadding,
640
688
  onClick: function onClick(event) {
641
689
  return onCellClick == null ? void 0 : onCellClick(event, cell);
642
690
  }
643
- }, tableCellProps), (currentEditingRow == null ? void 0 : currentEditingRow.id) === cell.row.id ? React__default.createElement(MRT_EditCellTextfield, {
691
+ }, tableCellProps), (currentEditingRow == null ? void 0 : currentEditingRow.id) === cell.row.id ? React__default.createElement(MRT_EditCellTextField, {
644
692
  cell: cell
645
693
  }) : 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'));
646
694
  };
647
695
 
648
- var TableCell$2 = /*#__PURE__*/material.styled(material.TableCell, {
696
+ var TableCell$1 = /*#__PURE__*/material.styled(material.TableCell, {
649
697
  shouldForwardProp: function shouldForwardProp(prop) {
650
698
  return prop !== 'isExpanded';
651
699
  }
@@ -684,7 +732,7 @@ var MRT_TableDetailPanel = function MRT_TableDetailPanel(_ref2) {
684
732
 
685
733
  return React__default.createElement(material.TableRow, Object.assign({
686
734
  hover: true
687
- }, tableRowProps), React__default.createElement(TableCell$2, Object.assign({
735
+ }, tableRowProps), React__default.createElement(TableCell$1, Object.assign({
688
736
  colSpan: tableInstance.visibleColumns.length + 10,
689
737
  isExpanded: row.isExpanded,
690
738
  onClick: function onClick(event) {
@@ -695,17 +743,15 @@ var MRT_TableDetailPanel = function MRT_TableDetailPanel(_ref2) {
695
743
  }, renderDetailPanel == null ? void 0 : renderDetailPanel(row))));
696
744
  };
697
745
 
698
- var TableCell$3 = /*#__PURE__*/material.styled(material.TableCell, {
746
+ var TableCell$2 = /*#__PURE__*/material.styled(MRT_TableButtonCell, {
699
747
  shouldForwardProp: function shouldForwardProp(prop) {
700
- return prop !== 'densePadding' && prop !== 'depth';
748
+ return prop !== 'depth';
701
749
  }
702
750
  })(function (_ref) {
703
- var densePadding = _ref.densePadding,
704
- depth = _ref.depth;
751
+ var depth = _ref.depth;
705
752
  return {
706
- padding: densePadding ? '0' : '0.6rem',
707
753
  paddingLeft: depth + 0.5 + "rem",
708
- transition: 'all 0.2s ease-in-out'
754
+ textAlign: 'left'
709
755
  };
710
756
  });
711
757
  var ExpandMoreIcon = /*#__PURE__*/material.styled(MuiExpandMoreIcon, {
@@ -727,7 +773,7 @@ var MRT_ExpandButton = function MRT_ExpandButton(_ref3) {
727
773
  densePadding = _useMaterialReactTabl.densePadding,
728
774
  renderDetailPanel = _useMaterialReactTabl.renderDetailPanel;
729
775
 
730
- return React__default.createElement(TableCell$3, {
776
+ return React__default.createElement(TableCell$2, {
731
777
  size: "small",
732
778
  densePadding: densePadding,
733
779
  depth: row.depth
@@ -741,24 +787,14 @@ var MRT_ExpandButton = function MRT_ExpandButton(_ref3) {
741
787
  })));
742
788
  };
743
789
 
744
- var TableCell$4 = /*#__PURE__*/material.styled(material.TableCell, {
745
- shouldForwardProp: function shouldForwardProp(prop) {
746
- return prop !== 'densePadding';
747
- }
748
- })(function (_ref) {
749
- var densePadding = _ref.densePadding;
750
- return {
751
- padding: densePadding ? '0' : '0.6rem',
752
- transition: 'all 0.2s ease-in-out'
753
- };
754
- });
755
- var MRT_SelectCheckbox = function MRT_SelectCheckbox(_ref2) {
756
- var row = _ref2.row;
790
+ var MRT_SelectCheckbox = function MRT_SelectCheckbox(_ref) {
791
+ var row = _ref.row;
757
792
 
758
793
  var _useMaterialReactTabl = useMaterialReactTable(),
759
794
  tableInstance = _useMaterialReactTabl.tableInstance,
760
795
  onRowSelectChange = _useMaterialReactTabl.onRowSelectChange,
761
- densePadding = _useMaterialReactTabl.densePadding;
796
+ densePadding = _useMaterialReactTabl.densePadding,
797
+ localization = _useMaterialReactTabl.localization;
762
798
 
763
799
  var onSelectChange = function onSelectChange(event) {
764
800
  var _row$getToggleRowSele;
@@ -767,11 +803,14 @@ var MRT_SelectCheckbox = function MRT_SelectCheckbox(_ref2) {
767
803
  onRowSelectChange == null ? void 0 : onRowSelectChange(event, row, tableInstance.selectedFlatRows);
768
804
  };
769
805
 
770
- return React__default.createElement(TableCell$4, {
806
+ return React__default.createElement(MRT_TableButtonCell, {
771
807
  densePadding: densePadding
772
- }, React__default.createElement(material.Checkbox, Object.assign({}, row.getToggleRowSelectedProps(), {
808
+ }, React__default.createElement(material.Checkbox, Object.assign({
809
+ inputProps: {
810
+ 'aria-label': localization == null ? void 0 : localization.selectCheckboxTitle
811
+ },
773
812
  onChange: onSelectChange
774
- })));
813
+ }, row.getToggleRowSelectedProps())));
775
814
  };
776
815
 
777
816
  var MenuItem$1 = /*#__PURE__*/material.styled(material.MenuItem)({
@@ -783,20 +822,15 @@ var MRT_RowActionMenu = function MRT_RowActionMenu(_ref) {
783
822
 
784
823
  var anchorEl = _ref.anchorEl,
785
824
  row = _ref.row,
825
+ handleEdit = _ref.handleEdit,
786
826
  setAnchorEl = _ref.setAnchorEl;
787
827
 
788
828
  var _useMaterialReactTabl = useMaterialReactTable(),
789
829
  enableRowEditing = _useMaterialReactTabl.enableRowEditing,
790
830
  localization = _useMaterialReactTabl.localization,
791
831
  renderRowActionMenuItems = _useMaterialReactTabl.renderRowActionMenuItems,
792
- setCurrentEditingRow = _useMaterialReactTabl.setCurrentEditingRow,
793
832
  tableInstance = _useMaterialReactTabl.tableInstance;
794
833
 
795
- var handleEdit = function handleEdit() {
796
- setCurrentEditingRow(_extends({}, row));
797
- setAnchorEl(null);
798
- };
799
-
800
834
  return React__default.createElement(material.Menu, {
801
835
  anchorEl: anchorEl,
802
836
  open: !!anchorEl,
@@ -1586,6 +1620,7 @@ var MRT_EditActionButtons = function MRT_EditActionButtons(_ref) {
1586
1620
  currentEditingRow = _useMaterialReactTabl.currentEditingRow;
1587
1621
 
1588
1622
  var handleCancel = function handleCancel() {
1623
+ row.values = row.original;
1589
1624
  setCurrentEditingRow(null);
1590
1625
  };
1591
1626
 
@@ -1641,11 +1676,17 @@ var IconButton$1 = /*#__PURE__*/material.styled(material.IconButton)({
1641
1676
  }
1642
1677
  });
1643
1678
  var MRT_ToggleRowActionMenuButton = function MRT_ToggleRowActionMenuButton(_ref) {
1679
+ var _localization$rowActi;
1680
+
1644
1681
  var row = _ref.row;
1645
1682
 
1646
1683
  var _useMaterialReactTabl = useMaterialReactTable(),
1647
- localization = _useMaterialReactTabl.localization,
1648
1684
  currentEditingRow = _useMaterialReactTabl.currentEditingRow,
1685
+ densePadding = _useMaterialReactTabl.densePadding,
1686
+ localization = _useMaterialReactTabl.localization,
1687
+ renderRowActionMenuItems = _useMaterialReactTabl.renderRowActionMenuItems,
1688
+ enableRowEditing = _useMaterialReactTabl.enableRowEditing,
1689
+ setCurrentEditingRow = _useMaterialReactTabl.setCurrentEditingRow,
1649
1690
  renderRowActions = _useMaterialReactTabl.renderRowActions,
1650
1691
  tableInstance = _useMaterialReactTabl.tableInstance;
1651
1692
 
@@ -1659,26 +1700,32 @@ var MRT_ToggleRowActionMenuButton = function MRT_ToggleRowActionMenuButton(_ref)
1659
1700
  setAnchorEl(event.currentTarget);
1660
1701
  };
1661
1702
 
1662
- if (renderRowActions) {
1663
- return React__default.createElement(React__default.Fragment, null, renderRowActions(row, tableInstance));
1664
- }
1665
-
1666
- if (row.id === (currentEditingRow == null ? void 0 : currentEditingRow.id)) {
1667
- return React__default.createElement(MRT_EditActionButtons, {
1668
- row: row
1669
- });
1670
- }
1703
+ var handleEdit = function handleEdit() {
1704
+ setCurrentEditingRow(_extends({}, row));
1705
+ setAnchorEl(null);
1706
+ };
1671
1707
 
1672
- return React__default.createElement(React__default.Fragment, null, React__default.createElement(IconButton$1, {
1708
+ return React__default.createElement(MRT_TableButtonCell, {
1709
+ densePadding: densePadding
1710
+ }, renderRowActions ? React__default.createElement(React__default.Fragment, null, renderRowActions(row, tableInstance)) : row.id === (currentEditingRow == null ? void 0 : currentEditingRow.id) ? React__default.createElement(MRT_EditActionButtons, {
1711
+ row: row
1712
+ }) : !renderRowActionMenuItems && enableRowEditing ? React__default.createElement(material.Tooltip, {
1713
+ placement: "right",
1714
+ arrow: true,
1715
+ title: (_localization$rowActi = localization == null ? void 0 : localization.rowActionMenuItemEdit) != null ? _localization$rowActi : ''
1716
+ }, React__default.createElement(IconButton$1, {
1717
+ onClick: handleEdit
1718
+ }, React__default.createElement(EditIcon, null))) : renderRowActionMenuItems ? React__default.createElement(React__default.Fragment, null, React__default.createElement(IconButton$1, {
1673
1719
  "aria-label": localization == null ? void 0 : localization.rowActionMenuButtonTitle,
1674
1720
  title: localization == null ? void 0 : localization.rowActionMenuButtonTitle,
1675
1721
  onClick: handleOpenRowActionMenu,
1676
1722
  size: "small"
1677
1723
  }, React__default.createElement(MoreHorizIcon, null)), React__default.createElement(MRT_RowActionMenu, {
1678
1724
  anchorEl: anchorEl,
1725
+ handleEdit: handleEdit,
1679
1726
  row: row,
1680
1727
  setAnchorEl: setAnchorEl
1681
- }));
1728
+ })) : null);
1682
1729
  };
1683
1730
 
1684
1731
  var TableRow = /*#__PURE__*/material.styled(material.TableRow, {
@@ -1718,9 +1765,9 @@ var MRT_TableBodyRow = function MRT_TableBodyRow(_ref2) {
1718
1765
  onClick: function onClick(event) {
1719
1766
  return onRowClick == null ? void 0 : onRowClick(event, row);
1720
1767
  }
1721
- }, tableRowProps), enableRowActions && positionActionsColumn === 'first' && React__default.createElement(material.TableCell, null, React__default.createElement(MRT_ToggleRowActionMenuButton, {
1768
+ }, tableRowProps), enableRowActions && positionActionsColumn === 'first' && React__default.createElement(MRT_ToggleRowActionMenuButton, {
1722
1769
  row: row
1723
- })), (anyRowsCanExpand || renderDetailPanel) && React__default.createElement(MRT_ExpandButton, {
1770
+ }), (anyRowsCanExpand || renderDetailPanel) && React__default.createElement(MRT_ExpandButton, {
1724
1771
  row: row
1725
1772
  }), enableSelection && React__default.createElement(MRT_SelectCheckbox, {
1726
1773
  row: row
@@ -1729,9 +1776,9 @@ var MRT_TableBodyRow = function MRT_TableBodyRow(_ref2) {
1729
1776
  key: cell.getCellProps().key,
1730
1777
  cell: cell
1731
1778
  });
1732
- }), enableRowActions && positionActionsColumn === 'last' && React__default.createElement(material.TableCell, null, React__default.createElement(MRT_ToggleRowActionMenuButton, {
1779
+ }), enableRowActions && positionActionsColumn === 'last' && React__default.createElement(MRT_ToggleRowActionMenuButton, {
1733
1780
  row: row
1734
- }))), renderDetailPanel && React__default.createElement(MRT_TableDetailPanel, {
1781
+ })), renderDetailPanel && React__default.createElement(MRT_TableDetailPanel, {
1735
1782
  row: row
1736
1783
  }));
1737
1784
  };
@@ -1762,7 +1809,7 @@ var MRT_TableBody = function MRT_TableBody() {
1762
1809
  }));
1763
1810
  };
1764
1811
 
1765
- var TableCell$5 = /*#__PURE__*/material.styled(material.TableCell, {
1812
+ var TableCell$3 = /*#__PURE__*/material.styled(material.TableCell, {
1766
1813
  shouldForwardProp: function shouldForwardProp(prop) {
1767
1814
  return prop !== 'densePadding' && prop !== 'enableColumnResizing';
1768
1815
  }
@@ -1794,7 +1841,7 @@ var MRT_TableFooterCell = function MRT_TableFooterCell(_ref2) {
1794
1841
  style: _extends({}, column.getFooterProps().style, (_mTableFooterCellProp = mTableFooterCellProps == null ? void 0 : mTableFooterCellProps.style) != null ? _mTableFooterCellProp : {}, (_mcTableFooterCellPro = mcTableFooterCellProps == null ? void 0 : mcTableFooterCellProps.style) != null ? _mcTableFooterCellPro : {})
1795
1842
  });
1796
1843
 
1797
- return React__default.createElement(TableCell$5, Object.assign({
1844
+ return React__default.createElement(TableCell$3, Object.assign({
1798
1845
  align: isParentHeader ? 'center' : 'left',
1799
1846
  densePadding: densePadding,
1800
1847
  enableColumnResizing: enableColumnResizing,
@@ -1873,10 +1920,11 @@ var TextField = /*#__PURE__*/material.styled(material.TextField)({
1873
1920
  });
1874
1921
  var MRT_SearchTextField = function MRT_SearchTextField() {
1875
1922
  var _useMaterialReactTabl = useMaterialReactTable(),
1876
- tableInstance = _useMaterialReactTabl.tableInstance,
1877
- muiSearchTextFieldProps = _useMaterialReactTabl.muiSearchTextFieldProps,
1923
+ showSearch = _useMaterialReactTabl.showSearch,
1878
1924
  localization = _useMaterialReactTabl.localization,
1879
- onGlobalFilterChange = _useMaterialReactTabl.onGlobalFilterChange;
1925
+ muiSearchTextFieldProps = _useMaterialReactTabl.muiSearchTextFieldProps,
1926
+ onGlobalFilterChange = _useMaterialReactTabl.onGlobalFilterChange,
1927
+ tableInstance = _useMaterialReactTabl.tableInstance;
1880
1928
 
1881
1929
  var _useState = React.useState(''),
1882
1930
  searchValue = _useState[0],
@@ -1894,7 +1942,11 @@ var MRT_SearchTextField = function MRT_SearchTextField() {
1894
1942
  tableInstance.setGlobalFilter(undefined);
1895
1943
  };
1896
1944
 
1897
- return React__default.createElement(TextField, Object.assign({
1945
+ return React__default.createElement(material.Collapse, {
1946
+ "in": showSearch,
1947
+ orientation: "horizontal"
1948
+ }, React__default.createElement(TextField, Object.assign({
1949
+ id: "global-search-text-field",
1898
1950
  placeholder: localization == null ? void 0 : localization.searchTextFieldPlaceholder,
1899
1951
  onChange: function onChange(event) {
1900
1952
  setSearchValue(event.target.value);
@@ -1920,7 +1972,7 @@ var MRT_SearchTextField = function MRT_SearchTextField() {
1920
1972
  fontSize: "small"
1921
1973
  })))
1922
1974
  }
1923
- }, muiSearchTextFieldProps));
1975
+ }, muiSearchTextFieldProps)));
1924
1976
  };
1925
1977
 
1926
1978
  var MRT_ToggleFiltersButton = function MRT_ToggleFiltersButton() {
@@ -2008,7 +2060,7 @@ var MRT_ShowHideColumnsButton = function MRT_ShowHideColumnsButton() {
2008
2060
  };
2009
2061
 
2010
2062
  var MRT_DensePaddingSwitch = function MRT_DensePaddingSwitch() {
2011
- var _localization$toggleD;
2063
+ var _localization$toggleD, _localization$toggleD2;
2012
2064
 
2013
2065
  var _useMaterialReactTabl = useMaterialReactTable(),
2014
2066
  densePadding = _useMaterialReactTabl.densePadding,
@@ -2019,6 +2071,9 @@ var MRT_DensePaddingSwitch = function MRT_DensePaddingSwitch() {
2019
2071
  arrow: true,
2020
2072
  title: (_localization$toggleD = localization == null ? void 0 : localization.toggleDensePaddingSwitchTitle) != null ? _localization$toggleD : ''
2021
2073
  }, React__default.createElement(material.Switch, {
2074
+ inputProps: {
2075
+ 'aria-label': (_localization$toggleD2 = localization == null ? void 0 : localization.toggleDensePaddingSwitchTitle) != null ? _localization$toggleD2 : ''
2076
+ },
2022
2077
  color: "default",
2023
2078
  checked: densePadding,
2024
2079
  size: "small",
@@ -2028,6 +2083,33 @@ var MRT_DensePaddingSwitch = function MRT_DensePaddingSwitch() {
2028
2083
  }));
2029
2084
  };
2030
2085
 
2086
+ var MRT_ToggleSearchButton = function MRT_ToggleSearchButton() {
2087
+ var _localization$toggleS;
2088
+
2089
+ var _useMaterialReactTabl = useMaterialReactTable(),
2090
+ localization = _useMaterialReactTabl.localization,
2091
+ setShowSearch = _useMaterialReactTabl.setShowSearch,
2092
+ showSearch = _useMaterialReactTabl.showSearch,
2093
+ muiSearchTextFieldProps = _useMaterialReactTabl.muiSearchTextFieldProps;
2094
+
2095
+ var handleToggleSearch = function handleToggleSearch() {
2096
+ setShowSearch(!showSearch);
2097
+ setTimeout(function () {
2098
+ var _document$getElementB, _muiSearchTextFieldPr;
2099
+
2100
+ return (_document$getElementB = document.getElementById((_muiSearchTextFieldPr = muiSearchTextFieldProps == null ? void 0 : muiSearchTextFieldProps.id) != null ? _muiSearchTextFieldPr : "global-search-text-field")) == null ? void 0 : _document$getElementB.focus();
2101
+ }, 200);
2102
+ };
2103
+
2104
+ return React__default.createElement(material.Tooltip, {
2105
+ arrow: true,
2106
+ title: (_localization$toggleS = localization == null ? void 0 : localization.toggleSearchButtonTitle) != null ? _localization$toggleS : ''
2107
+ }, React__default.createElement(material.IconButton, {
2108
+ size: "small",
2109
+ onClick: handleToggleSearch
2110
+ }, showSearch ? React__default.createElement(SearchOffIcon, null) : React__default.createElement(SearchIcon, null)));
2111
+ };
2112
+
2031
2113
  var ToolbarButtonsContainer = /*#__PURE__*/material.styled('div')({
2032
2114
  display: 'flex',
2033
2115
  gap: '0.5rem',
@@ -2037,9 +2119,10 @@ var MRT_ToolbarButtons = function MRT_ToolbarButtons() {
2037
2119
  var _useMaterialReactTabl = useMaterialReactTable(),
2038
2120
  disableFilters = _useMaterialReactTabl.disableFilters,
2039
2121
  disableColumnHiding = _useMaterialReactTabl.disableColumnHiding,
2040
- disableDensePaddingToggle = _useMaterialReactTabl.disableDensePaddingToggle;
2122
+ disableDensePaddingToggle = _useMaterialReactTabl.disableDensePaddingToggle,
2123
+ disableGlobalFilter = _useMaterialReactTabl.disableGlobalFilter;
2041
2124
 
2042
- 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));
2125
+ 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));
2043
2126
  };
2044
2127
 
2045
2128
  var MRT_TablePagination = function MRT_TablePagination() {
@@ -2064,12 +2147,16 @@ var MRT_TablePagination = function MRT_TablePagination() {
2064
2147
  page: tableInstance.state.pageIndex,
2065
2148
  rowsPerPage: tableInstance.state.pageSize,
2066
2149
  showFirstButton: tableInstance.rows.length / tableInstance.state.pageSize > 2,
2067
- showLastButton: tableInstance.rows.length / tableInstance.state.pageSize > 2
2150
+ showLastButton: tableInstance.rows.length / tableInstance.state.pageSize > 2,
2151
+ style: {
2152
+ padding: 0
2153
+ }
2068
2154
  }, tablePaginationProps));
2069
2155
  };
2070
2156
 
2071
2157
  var Toolbar = /*#__PURE__*/material.styled(material.Toolbar)({
2072
- display: 'grid'
2158
+ display: 'grid',
2159
+ padding: '0.5rem !important'
2073
2160
  });
2074
2161
  var ToolbarTopRow = /*#__PURE__*/material.styled('div')({
2075
2162
  padding: '0.5rem',
@@ -2081,27 +2168,25 @@ var ToolbarActionsContainer = /*#__PURE__*/material.styled('div')({
2081
2168
  gap: '0.5rem'
2082
2169
  });
2083
2170
  var MRT_ToolbarTop = function MRT_ToolbarTop() {
2171
+ var _renderToolbarActions;
2172
+
2084
2173
  var _useMaterialReactTabl = useMaterialReactTable(),
2085
2174
  disableGlobalFilter = _useMaterialReactTabl.disableGlobalFilter,
2086
2175
  hideToolbarActions = _useMaterialReactTabl.hideToolbarActions,
2087
2176
  manualPagination = _useMaterialReactTabl.manualPagination,
2088
- muiTableTitleProps = _useMaterialReactTabl.muiTableTitleProps,
2089
2177
  muiTableToolbarTopProps = _useMaterialReactTabl.muiTableToolbarTopProps,
2090
2178
  positionPagination = _useMaterialReactTabl.positionPagination,
2091
2179
  positionToolbarActions = _useMaterialReactTabl.positionToolbarActions,
2092
- tableInstance = _useMaterialReactTabl.tableInstance,
2093
- title = _useMaterialReactTabl.title;
2180
+ renderToolbarActions = _useMaterialReactTabl.renderToolbarActions,
2181
+ tableInstance = _useMaterialReactTabl.tableInstance;
2094
2182
 
2095
2183
  var toolbarProps = muiTableToolbarTopProps instanceof Function ? muiTableToolbarTopProps(tableInstance) : muiTableToolbarTopProps;
2096
2184
  return React__default.createElement(Toolbar, Object.assign({
2097
2185
  variant: "dense"
2098
- }, toolbarProps), React__default.createElement(ToolbarTopRow, null, title ? React__default.createElement(material.Typography, Object.assign({
2099
- variant: "h5"
2100
- }, 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)));
2186
+ }, toolbarProps), React__default.createElement(ToolbarTopRow, null, (_renderToolbarActions = renderToolbarActions == null ? void 0 : renderToolbarActions(tableInstance)) != null ? _renderToolbarActions : 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)));
2101
2187
  };
2102
2188
 
2103
2189
  var Toolbar$1 = /*#__PURE__*/material.styled(material.Toolbar)({
2104
- padding: 0,
2105
2190
  display: 'flex',
2106
2191
  justifyContent: 'space-between'
2107
2192
  });
@@ -2116,6 +2201,9 @@ var MRT_ToolbarBottom = function MRT_ToolbarBottom() {
2116
2201
 
2117
2202
  var toolbarProps = muiTableToolbarBottomProps instanceof Function ? muiTableToolbarBottomProps(tableInstance) : muiTableToolbarBottomProps;
2118
2203
  return React__default.createElement(Toolbar$1, Object.assign({
2204
+ style: {
2205
+ padding: 0
2206
+ },
2119
2207
  variant: "dense"
2120
2208
  }, 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));
2121
2209
  };
@@ -2153,26 +2241,28 @@ var defaultLocalization = {
2153
2241
  actionsHeadColumnTitle: 'Actions',
2154
2242
  columnActionMenuButtonTitle: 'Column Actions',
2155
2243
  columnActionMenuItemClearSort: 'Clear sorting',
2156
- columnActionMenuItemGroupBy: 'Group by column',
2157
- columnActionMenuItemHideColumn: 'Hide column',
2158
- columnActionMenuItemSortAsc: 'Sort ascending',
2159
- columnActionMenuItemSortDesc: 'Sort descending',
2160
- columnActionMenuItemUnGroupBy: 'Ungroup column',
2244
+ columnActionMenuItemGroupBy: 'Group by {column}',
2245
+ columnActionMenuItemHideColumn: 'Hide {column} column',
2246
+ columnActionMenuItemSortAsc: 'Sort by {column} ascending',
2247
+ columnActionMenuItemSortDesc: 'Sort by {column} descending',
2248
+ columnActionMenuItemUnGroupBy: 'Ungroup by {column}',
2161
2249
  expandAllButtonTitle: 'Expand all',
2162
2250
  expandButtonTitle: 'Expand',
2163
2251
  filterTextFieldClearButtonTitle: 'Clear filter',
2164
- filterTextFieldPlaceholder: 'Filter',
2252
+ filterTextFieldPlaceholder: 'Filter by {column}',
2165
2253
  rowActionButtonCancel: 'Cancel',
2166
2254
  rowActionButtonSave: 'Save',
2167
2255
  rowActionMenuButtonTitle: 'Row Actions',
2168
2256
  rowActionMenuItemEdit: 'Edit',
2257
+ selectCheckboxTitle: 'Select row',
2169
2258
  rowActionsColumnTitle: 'Actions',
2170
2259
  searchTextFieldClearButtonTitle: 'Clear search',
2171
2260
  searchTextFieldPlaceholder: 'Search',
2172
2261
  selectAllCheckboxTitle: 'Select all',
2173
2262
  showHideColumnsButtonTitle: 'Show/Hide columns',
2174
2263
  toggleDensePaddingSwitchTitle: 'Toggle dense padding',
2175
- toggleFilterButtonTitle: 'Toggle filters'
2264
+ toggleFilterButtonTitle: 'Toggle filters',
2265
+ toggleSearchButtonTitle: 'Toggle search'
2176
2266
  };
2177
2267
 
2178
2268
  var _excluded = ["defaultColumn", "localization", "positionActionsColumn", "positionPagination", "positionToolbarActions"];