material-react-table 0.17.0 → 0.18.1
Sign up to get free protection for your applications and to get access to all the features.
- package/dist/MaterialReactTable.d.ts +7 -100
- package/dist/material-react-table.cjs.development.js +40 -162
- package/dist/material-react-table.cjs.development.js.map +1 -1
- package/dist/material-react-table.cjs.production.min.js +1 -1
- package/dist/material-react-table.cjs.production.min.js.map +1 -1
- package/dist/material-react-table.esm.js +41 -163
- package/dist/material-react-table.esm.js.map +1 -1
- package/package.json +1 -1
- package/src/MaterialReactTable.tsx +5 -178
- package/src/body/MRT_TableBodyCell.tsx +1 -9
- package/src/body/MRT_TableBodyRow.tsx +2 -5
- package/src/body/MRT_TableDetailPanel.tsx +1 -5
- package/src/buttons/MRT_ExpandButton.tsx +2 -4
- package/src/buttons/MRT_FullScreenToggleButton.tsx +2 -8
- package/src/buttons/MRT_ToggleDensePaddingButton.tsx +2 -8
- package/src/buttons/MRT_ToggleFiltersButton.tsx +2 -8
- package/src/buttons/MRT_ToggleGlobalFilterButton.tsx +2 -8
- package/src/head/MRT_TableHeadCellResizeHandle.tsx +3 -2
- package/src/inputs/MRT_EditCellTextField.tsx +3 -3
- package/src/inputs/MRT_FilterTextField.tsx +0 -26
- package/src/inputs/MRT_GlobalFilterTextField.tsx +0 -4
- package/src/inputs/MRT_SelectCheckbox.tsx +0 -24
- package/src/table/MRT_TableRoot.tsx +5 -24
- package/src/toolbar/MRT_ToolbarAlertBanner.tsx +9 -4
@@ -1,6 +1,6 @@
|
|
1
|
-
import { ChangeEvent, Dispatch, FC, FocusEvent,
|
1
|
+
import { ChangeEvent, Dispatch, FC, FocusEvent, ReactNode, SetStateAction } from 'react';
|
2
2
|
import { AlertProps, ButtonProps, CheckboxProps, IconButtonProps, LinearProgressProps, PaperProps, SkeletonProps, TableBodyProps, TableCellProps, TableContainerProps, TableFooterProps, TableHeadProps, TablePaginationProps, TableProps, TableRowProps, TextFieldProps, ToolbarProps } from '@mui/material';
|
3
|
-
import { Cell, Column, ColumnDef,
|
3
|
+
import { Cell, Column, ColumnDef, FilterFn, FilterFnOption, Header, HeaderGroup, OnChangeFn, Overwrite, ReactTableGenerics, Row, SortingFn, SortingFnOption, TableGenerics, TableInstance, TableState, UseTableInstanceOptions } from '@tanstack/react-table';
|
4
4
|
import { Options as VirtualizerOptions } from 'react-virtual';
|
5
5
|
import { MRT_Localization } from './localization';
|
6
6
|
import { MRT_Icons } from './icons';
|
@@ -49,6 +49,7 @@ export declare type MRT_TableInstance<D extends Record<string, any> = {}> = Omit
|
|
49
49
|
setCurrentGlobalFilterFn: Dispatch<SetStateAction<MRT_FilterFn>>;
|
50
50
|
setDensity: Dispatch<SetStateAction<'comfortable' | 'compact' | 'spacious'>>;
|
51
51
|
setIsFullScreen: Dispatch<SetStateAction<boolean>>;
|
52
|
+
setShowAlertBanner: Dispatch<SetStateAction<boolean>>;
|
52
53
|
setShowFilters: Dispatch<SetStateAction<boolean>>;
|
53
54
|
setShowGlobalFilter: Dispatch<SetStateAction<boolean>>;
|
54
55
|
};
|
@@ -60,6 +61,7 @@ export declare type MRT_TableState<D extends Record<string, any> = {}> = TableSt
|
|
60
61
|
density: 'comfortable' | 'compact' | 'spacious';
|
61
62
|
isLoading: boolean;
|
62
63
|
isFullScreen: boolean;
|
64
|
+
showAlertBanner: boolean;
|
63
65
|
showFilters: boolean;
|
64
66
|
showGlobalFilter: boolean;
|
65
67
|
showProgressBars: boolean;
|
@@ -139,23 +141,11 @@ export declare type MRT_ColumnDef<D extends Record<string, any> = {}> = Omit<Col
|
|
139
141
|
cell: MRT_Cell<D>;
|
140
142
|
instance: MRT_TableInstance<D>;
|
141
143
|
}) => void;
|
142
|
-
|
144
|
+
onCellEditChange?: ({ cell, event, instance, }: {
|
143
145
|
event: ChangeEvent<HTMLInputElement>;
|
144
146
|
cell: MRT_Cell<D>;
|
145
147
|
instance: MRT_TableInstance<D>;
|
146
148
|
}) => void;
|
147
|
-
onColumnFilterValueChanged?: ({ column, event, filterValue, instance, }: {
|
148
|
-
column: MRT_Column<D>;
|
149
|
-
event: ChangeEvent<HTMLInputElement>;
|
150
|
-
filterValue: any;
|
151
|
-
instance: MRT_TableInstance<D>;
|
152
|
-
}) => void;
|
153
|
-
onColumnFilterValueChangedDebounced?: ({ column, event, filterValue, instance, }: {
|
154
|
-
column: MRT_Column<D>;
|
155
|
-
event: ChangeEvent<HTMLInputElement>;
|
156
|
-
filterValue: any;
|
157
|
-
instance: MRT_TableInstance<D>;
|
158
|
-
}) => void;
|
159
149
|
sortingFn?: MRT_SortingFn;
|
160
150
|
};
|
161
151
|
export declare type MRT_Column<D extends Record<string, any> = {}> = Omit<Column<D>, 'header' | 'footer' | 'columns' | 'columnDef'> & {
|
@@ -310,114 +300,31 @@ export declare type MaterialReactTableProps<D extends Record<string, any> = {}>
|
|
310
300
|
muiTableToolbarTopProps?: ToolbarProps | (({ instance }: {
|
311
301
|
instance: MRT_TableInstance<D>;
|
312
302
|
}) => ToolbarProps);
|
313
|
-
onCellClick?: ({ cell, event, instance, }: {
|
314
|
-
cell: MRT_Cell<D>;
|
315
|
-
instance: MRT_TableInstance<D>;
|
316
|
-
event: MouseEvent<HTMLTableCellElement>;
|
317
|
-
}) => void;
|
318
303
|
onCellEditBlur?: ({ cell, event, instance, }: {
|
319
304
|
event: FocusEvent<HTMLInputElement>;
|
320
305
|
cell: MRT_Cell<D>;
|
321
306
|
instance: MRT_TableInstance<D>;
|
322
307
|
}) => void;
|
323
|
-
|
308
|
+
onCellEditChange?: ({ cell, event, instance, }: {
|
324
309
|
event: ChangeEvent<HTMLInputElement>;
|
325
310
|
cell: MRT_Cell<D>;
|
326
311
|
instance: MRT_TableInstance<D>;
|
327
312
|
}) => void;
|
328
|
-
onColumnFilterValueChanged?: ({ column, event, filterValue, instance, }: {
|
329
|
-
column: MRT_Column<D>;
|
330
|
-
event: ChangeEvent<HTMLInputElement>;
|
331
|
-
filterValue: any;
|
332
|
-
instance: MRT_TableInstance<D>;
|
333
|
-
}) => void;
|
334
|
-
onColumnFilterValueChangedDebounced?: ({ column, event, filterValue, instance, }: {
|
335
|
-
column: MRT_Column<D>;
|
336
|
-
event: ChangeEvent<HTMLInputElement>;
|
337
|
-
filterValue: any;
|
338
|
-
instance: MRT_TableInstance<D>;
|
339
|
-
}) => void;
|
340
|
-
onColumnOrderChanged?: ({ columnOrder, instance, }: {
|
341
|
-
columnOrder: ColumnOrderState;
|
342
|
-
instance: MRT_TableInstance<D>;
|
343
|
-
}) => void;
|
344
|
-
onColumnPinningChanged?: ({ columnPinning, instance, }: {
|
345
|
-
columnPinning: ColumnPinningState;
|
346
|
-
instance: MRT_TableInstance<D>;
|
347
|
-
}) => void;
|
348
|
-
onColumnVisibilityChanged?: ({ column, columnVisibility, instance, }: {
|
349
|
-
column: MRT_Column<D>;
|
350
|
-
columnVisibility: VisibilityState;
|
351
|
-
instance: MRT_TableInstance<D>;
|
352
|
-
}) => void;
|
353
313
|
onCurrentEditingCellChange?: OnChangeFn<MRT_Cell>;
|
354
314
|
onCurrentEditingRowChange?: OnChangeFn<MRT_Row>;
|
355
315
|
onCurrentFilterFnsChange?: OnChangeFn<{
|
356
316
|
[key: string]: MRT_FilterFn;
|
357
317
|
}>;
|
358
318
|
onCurrentGlobalFilterFnChange?: OnChangeFn<MRT_FilterFn>;
|
359
|
-
onDetailPanelClick?: ({ event, row, instance, }: {
|
360
|
-
event: MouseEvent<HTMLTableCellElement>;
|
361
|
-
row: MRT_Row<D>;
|
362
|
-
instance: MRT_TableInstance<D>;
|
363
|
-
}) => void;
|
364
319
|
onEditRowSubmit?: ({ row, instance, }: {
|
365
320
|
row: MRT_Row<D>;
|
366
321
|
instance: MRT_TableInstance<D>;
|
367
322
|
}) => Promise<void> | void;
|
368
|
-
onExpandChanged?: ({ event, row, }: {
|
369
|
-
event: MouseEvent<HTMLButtonElement>;
|
370
|
-
row: MRT_Row<D>;
|
371
|
-
instance: MRT_TableInstance<D>;
|
372
|
-
}) => void;
|
373
|
-
onGlobalFilterValueChanged?: ({ event, instance, }: {
|
374
|
-
event: ChangeEvent<HTMLInputElement>;
|
375
|
-
instance: MRT_TableInstance<D>;
|
376
|
-
}) => void;
|
377
|
-
onGlobalFilterValueChangedDebounced?: ({ event, instance, }: {
|
378
|
-
event: ChangeEvent<HTMLInputElement>;
|
379
|
-
instance: MRT_TableInstance<D>;
|
380
|
-
}) => void;
|
381
323
|
onDensityChange?: OnChangeFn<boolean>;
|
382
|
-
onDensityChanged?: ({ event, density, instance, }: {
|
383
|
-
event: MouseEvent<HTMLButtonElement>;
|
384
|
-
density: 'comfortable' | 'compact' | 'spacious';
|
385
|
-
instance: MRT_TableInstance<D>;
|
386
|
-
}) => void;
|
387
324
|
onIsFullScreenChange?: OnChangeFn<boolean>;
|
388
|
-
|
389
|
-
event: MouseEvent<HTMLButtonElement>;
|
390
|
-
isFullScreen: boolean;
|
391
|
-
instance: MRT_TableInstance<D>;
|
392
|
-
}) => void;
|
393
|
-
onRowClick?: ({ event, row, instance, }: {
|
394
|
-
event: MouseEvent<HTMLTableRowElement>;
|
395
|
-
row: MRT_Row<D>;
|
396
|
-
instance: MRT_TableInstance<D>;
|
397
|
-
}) => void;
|
398
|
-
onRowSelectAllChanged?: ({ event, selectedRows, instance, }: {
|
399
|
-
event: ChangeEvent;
|
400
|
-
selectedRows: MRT_Row<D>[];
|
401
|
-
instance: MRT_TableInstance<D>;
|
402
|
-
}) => void;
|
403
|
-
onRowSelectionChanged?: ({ event, row, selectedRows, instance, }: {
|
404
|
-
event: ChangeEvent;
|
405
|
-
row: MRT_Row<D>;
|
406
|
-
selectedRows: MRT_Row<D>[];
|
407
|
-
instance: MRT_TableInstance<D>;
|
408
|
-
}) => void;
|
325
|
+
onShowAlertBannerChange?: OnChangeFn<boolean>;
|
409
326
|
onShowFiltersChange?: OnChangeFn<boolean>;
|
410
|
-
onShowFiltersChanged?: ({ event, instance, showFilters, }: {
|
411
|
-
event: MouseEvent<HTMLButtonElement>;
|
412
|
-
instance: MRT_TableInstance<D>;
|
413
|
-
showFilters: boolean;
|
414
|
-
}) => void;
|
415
327
|
onShowGlobalFilterChange?: OnChangeFn<boolean>;
|
416
|
-
onShowGlobalFilterChanged?: ({ event, instance, showGlobalFilter, }: {
|
417
|
-
event: MouseEvent<HTMLButtonElement>;
|
418
|
-
instance: MRT_TableInstance<D>;
|
419
|
-
showGlobalFilter: boolean;
|
420
|
-
}) => void;
|
421
328
|
positionActionsColumn?: 'first' | 'last';
|
422
329
|
positionGlobalFilter?: 'left' | 'right';
|
423
330
|
positionPagination?: 'bottom' | 'top' | 'both';
|
@@ -196,7 +196,6 @@ var MRT_ExpandButton = function MRT_ExpandButton(_ref) {
|
|
196
196
|
ExpandMoreIcon = _instance$options.icons.ExpandMoreIcon,
|
197
197
|
localization = _instance$options.localization,
|
198
198
|
muiExpandButtonProps = _instance$options.muiExpandButtonProps,
|
199
|
-
onExpandChanged = _instance$options.onExpandChanged,
|
200
199
|
renderDetailPanel = _instance$options.renderDetailPanel;
|
201
200
|
|
202
201
|
var _getState = getState(),
|
@@ -207,13 +206,8 @@ var MRT_ExpandButton = function MRT_ExpandButton(_ref) {
|
|
207
206
|
row: row
|
208
207
|
}) : muiExpandButtonProps;
|
209
208
|
|
210
|
-
var handleToggleExpand = function handleToggleExpand(
|
209
|
+
var handleToggleExpand = function handleToggleExpand() {
|
211
210
|
row.toggleExpanded();
|
212
|
-
onExpandChanged == null ? void 0 : onExpandChanged({
|
213
|
-
event: event,
|
214
|
-
row: row,
|
215
|
-
instance: instance
|
216
|
-
});
|
217
211
|
};
|
218
212
|
|
219
213
|
return React__default.createElement(material.Tooltip, {
|
@@ -4084,16 +4078,11 @@ var MRT_SelectCheckbox = function MRT_SelectCheckbox(_ref) {
|
|
4084
4078
|
var row = _ref.row,
|
4085
4079
|
selectAll = _ref.selectAll,
|
4086
4080
|
instance = _ref.instance;
|
4087
|
-
var
|
4088
|
-
getPaginationRowModel = instance.getPaginationRowModel,
|
4089
|
-
getSelectedRowModel = instance.getSelectedRowModel,
|
4090
|
-
getState = instance.getState,
|
4081
|
+
var getState = instance.getState,
|
4091
4082
|
_instance$options = instance.options,
|
4092
4083
|
localization = _instance$options.localization,
|
4093
4084
|
muiSelectCheckboxProps = _instance$options.muiSelectCheckboxProps,
|
4094
4085
|
muiSelectAllCheckboxProps = _instance$options.muiSelectAllCheckboxProps,
|
4095
|
-
onRowSelectionChanged = _instance$options.onRowSelectionChanged,
|
4096
|
-
onRowSelectAllChanged = _instance$options.onRowSelectAllChanged,
|
4097
4086
|
selectAllMode = _instance$options.selectAllMode;
|
4098
4087
|
|
4099
4088
|
var _getState = getState(),
|
@@ -4106,22 +4095,8 @@ var MRT_SelectCheckbox = function MRT_SelectCheckbox(_ref) {
|
|
4106
4095
|
} else if (selectAllMode === 'page') {
|
4107
4096
|
instance.getToggleAllPageRowsSelectedHandler()(event);
|
4108
4097
|
}
|
4109
|
-
|
4110
|
-
onRowSelectAllChanged == null ? void 0 : onRowSelectAllChanged({
|
4111
|
-
event: event,
|
4112
|
-
selectedRows: event.target.checked ? selectAllMode === 'all' ? getRowModel().flatRows : getPaginationRowModel().flatRows : [],
|
4113
|
-
instance: instance
|
4114
|
-
});
|
4115
4098
|
} else if (row) {
|
4116
4099
|
row == null ? void 0 : row.getToggleSelectedHandler()(event);
|
4117
|
-
onRowSelectionChanged == null ? void 0 : onRowSelectionChanged({
|
4118
|
-
event: event,
|
4119
|
-
row: row,
|
4120
|
-
selectedRows: event.target.checked ? [].concat(getSelectedRowModel().flatRows, [row]) : getSelectedRowModel().flatRows.filter(function (selectedRow) {
|
4121
|
-
return selectedRow.id !== row.id;
|
4122
|
-
}),
|
4123
|
-
instance: instance
|
4124
|
-
});
|
4125
4100
|
}
|
4126
4101
|
};
|
4127
4102
|
|
@@ -5134,18 +5109,12 @@ var MRT_FullScreenToggleButton = function MRT_FullScreenToggleButton(_ref) {
|
|
5134
5109
|
FullscreenExitIcon = _instance$options$ico.FullscreenExitIcon,
|
5135
5110
|
FullscreenIcon = _instance$options$ico.FullscreenIcon,
|
5136
5111
|
localization = _instance$options.localization,
|
5137
|
-
onIsFullScreenChanged = _instance$options.onIsFullScreenChanged,
|
5138
5112
|
setIsFullScreen = instance.setIsFullScreen;
|
5139
5113
|
|
5140
5114
|
var _getState = getState(),
|
5141
5115
|
isFullScreen = _getState.isFullScreen;
|
5142
5116
|
|
5143
|
-
var handleToggleFullScreen = function handleToggleFullScreen(
|
5144
|
-
onIsFullScreenChanged == null ? void 0 : onIsFullScreenChanged({
|
5145
|
-
event: event,
|
5146
|
-
isFullScreen: !isFullScreen,
|
5147
|
-
instance: instance
|
5148
|
-
});
|
5117
|
+
var handleToggleFullScreen = function handleToggleFullScreen() {
|
5149
5118
|
setIsFullScreen(!isFullScreen);
|
5150
5119
|
};
|
5151
5120
|
|
@@ -5200,19 +5169,13 @@ var MRT_ToggleDensePaddingButton = function MRT_ToggleDensePaddingButton(_ref) {
|
|
5200
5169
|
DensityMediumIcon = _instance$options$ico.DensityMediumIcon,
|
5201
5170
|
DensitySmallIcon = _instance$options$ico.DensitySmallIcon,
|
5202
5171
|
localization = _instance$options.localization,
|
5203
|
-
onDensityChanged = _instance$options.onDensityChanged,
|
5204
5172
|
setDensity = instance.setDensity;
|
5205
5173
|
|
5206
5174
|
var _getState = getState(),
|
5207
5175
|
density = _getState.density;
|
5208
5176
|
|
5209
|
-
var handleToggleDensePadding = function handleToggleDensePadding(
|
5177
|
+
var handleToggleDensePadding = function handleToggleDensePadding() {
|
5210
5178
|
var nextDensity = density === 'comfortable' ? 'compact' : density === 'compact' ? 'spacious' : 'comfortable';
|
5211
|
-
onDensityChanged == null ? void 0 : onDensityChanged({
|
5212
|
-
event: event,
|
5213
|
-
density: nextDensity,
|
5214
|
-
instance: instance
|
5215
|
-
});
|
5216
5179
|
setDensity(nextDensity);
|
5217
5180
|
};
|
5218
5181
|
|
@@ -5236,18 +5199,12 @@ var MRT_ToggleFiltersButton = function MRT_ToggleFiltersButton(_ref) {
|
|
5236
5199
|
FilterListIcon = _instance$options$ico.FilterListIcon,
|
5237
5200
|
FilterListOffIcon = _instance$options$ico.FilterListOffIcon,
|
5238
5201
|
localization = _instance$options.localization,
|
5239
|
-
onShowFiltersChanged = _instance$options.onShowFiltersChanged,
|
5240
5202
|
setShowFilters = instance.setShowFilters;
|
5241
5203
|
|
5242
5204
|
var _getState = getState(),
|
5243
5205
|
showFilters = _getState.showFilters;
|
5244
5206
|
|
5245
|
-
var handleToggleShowFilters = function handleToggleShowFilters(
|
5246
|
-
onShowFiltersChanged == null ? void 0 : onShowFiltersChanged({
|
5247
|
-
event: event,
|
5248
|
-
showFilters: !showFilters,
|
5249
|
-
instance: instance
|
5250
|
-
});
|
5207
|
+
var handleToggleShowFilters = function handleToggleShowFilters() {
|
5251
5208
|
setShowFilters(!showFilters);
|
5252
5209
|
};
|
5253
5210
|
|
@@ -5273,7 +5230,6 @@ var MRT_ToggleGlobalFilterButton = function MRT_ToggleGlobalFilterButton(_ref) {
|
|
5273
5230
|
tableId = _instance$options.tableId,
|
5274
5231
|
localization = _instance$options.localization,
|
5275
5232
|
muiSearchTextFieldProps = _instance$options.muiSearchTextFieldProps,
|
5276
|
-
onShowGlobalFilterChanged = _instance$options.onShowGlobalFilterChanged,
|
5277
5233
|
setShowGlobalFilter = instance.setShowGlobalFilter;
|
5278
5234
|
|
5279
5235
|
var _getState = getState(),
|
@@ -5283,12 +5239,7 @@ var MRT_ToggleGlobalFilterButton = function MRT_ToggleGlobalFilterButton(_ref) {
|
|
5283
5239
|
instance: instance
|
5284
5240
|
}) : muiSearchTextFieldProps;
|
5285
5241
|
|
5286
|
-
var handleToggleSearch = function handleToggleSearch(
|
5287
|
-
onShowGlobalFilterChanged == null ? void 0 : onShowGlobalFilterChanged({
|
5288
|
-
event: event,
|
5289
|
-
showGlobalFilter: !showGlobalFilter,
|
5290
|
-
instance: instance
|
5291
|
-
});
|
5242
|
+
var handleToggleSearch = function handleToggleSearch() {
|
5292
5243
|
setShowGlobalFilter(!showGlobalFilter);
|
5293
5244
|
setTimeout(function () {
|
5294
5245
|
var _document$getElementB, _textFieldProps$id;
|
@@ -5318,8 +5269,6 @@ var MRT_GlobalFilterTextField = function MRT_GlobalFilterTextField(_ref) {
|
|
5318
5269
|
CloseIcon = _instance$options$ico.CloseIcon,
|
5319
5270
|
localization = _instance$options.localization,
|
5320
5271
|
muiSearchTextFieldProps = _instance$options.muiSearchTextFieldProps,
|
5321
|
-
onGlobalFilterValueChanged = _instance$options.onGlobalFilterValueChanged,
|
5322
|
-
onGlobalFilterValueChangedDebounced = _instance$options.onGlobalFilterValueChangedDebounced,
|
5323
5272
|
tableId = _instance$options.tableId;
|
5324
5273
|
|
5325
5274
|
var _getState = getState(),
|
@@ -5338,19 +5287,11 @@ var MRT_GlobalFilterTextField = function MRT_GlobalFilterTextField(_ref) {
|
|
5338
5287
|
var _event$target$value;
|
5339
5288
|
|
5340
5289
|
setGlobalFilter((_event$target$value = event.target.value) != null ? _event$target$value : undefined);
|
5341
|
-
onGlobalFilterValueChangedDebounced == null ? void 0 : onGlobalFilterValueChangedDebounced({
|
5342
|
-
event: event,
|
5343
|
-
instance: instance
|
5344
|
-
});
|
5345
5290
|
}, 250), []);
|
5346
5291
|
|
5347
5292
|
var handleChange = function handleChange(event) {
|
5348
5293
|
setSearchValue(event.target.value);
|
5349
5294
|
handleChangeDebounced(event);
|
5350
|
-
onGlobalFilterValueChanged == null ? void 0 : onGlobalFilterValueChanged({
|
5351
|
-
event: event,
|
5352
|
-
instance: instance
|
5353
|
-
});
|
5354
5295
|
};
|
5355
5296
|
|
5356
5297
|
var handleGlobalFilterMenuOpen = function handleGlobalFilterMenuOpen(event) {
|
@@ -5526,7 +5467,8 @@ var MRT_ToolbarAlertBanner = function MRT_ToolbarAlertBanner(_ref) {
|
|
5526
5467
|
muiTableToolbarAlertBannerProps = _instance$options.muiTableToolbarAlertBannerProps;
|
5527
5468
|
|
5528
5469
|
var _getState = getState(),
|
5529
|
-
grouping = _getState.grouping
|
5470
|
+
grouping = _getState.grouping,
|
5471
|
+
showAlertBanner = _getState.showAlertBanner;
|
5530
5472
|
|
5531
5473
|
var alertProps = muiTableToolbarAlertBannerProps instanceof Function ? muiTableToolbarAlertBannerProps({
|
5532
5474
|
instance: instance
|
@@ -5544,11 +5486,12 @@ var MRT_ToolbarAlertBanner = function MRT_ToolbarAlertBanner(_ref) {
|
|
5544
5486
|
}));
|
5545
5487
|
})) : null;
|
5546
5488
|
return React__default.createElement(material.Collapse, {
|
5547
|
-
"in": !!selectMessage || !!groupedByMessage,
|
5489
|
+
"in": showAlertBanner || !!selectMessage || !!groupedByMessage,
|
5548
5490
|
timeout: stackAlertBanner ? 200 : 0
|
5549
5491
|
}, React__default.createElement(material.Alert, Object.assign({
|
5550
5492
|
color: "info",
|
5551
|
-
icon: false
|
5493
|
+
icon: false
|
5494
|
+
}, alertProps, {
|
5552
5495
|
sx: _extends({
|
5553
5496
|
borderRadius: 0,
|
5554
5497
|
fontSize: '1rem',
|
@@ -5560,11 +5503,11 @@ var MRT_ToolbarAlertBanner = function MRT_ToolbarAlertBanner(_ref) {
|
|
5560
5503
|
width: '100%',
|
5561
5504
|
zIndex: 2
|
5562
5505
|
}, alertProps == null ? void 0 : alertProps.sx)
|
5563
|
-
}, alertProps), React__default.createElement(material.Box, {
|
5506
|
+
}), (alertProps == null ? void 0 : alertProps.title) && React__default.createElement(material.AlertTitle, null, alertProps.title), React__default.createElement(material.Box, {
|
5564
5507
|
sx: {
|
5565
5508
|
p: '0.5rem 1rem'
|
5566
5509
|
}
|
5567
|
-
}, selectMessage, selectMessage && groupedByMessage && React__default.createElement("br", null), groupedByMessage)));
|
5510
|
+
}, alertProps == null ? void 0 : alertProps.children, (alertProps == null ? void 0 : alertProps.children) && (selectMessage || groupedByMessage) && React__default.createElement("br", null), selectMessage, selectMessage && groupedByMessage && React__default.createElement("br", null), groupedByMessage)));
|
5568
5511
|
};
|
5569
5512
|
|
5570
5513
|
var MRT_LinearProgressBar = function MRT_LinearProgressBar(_ref) {
|
@@ -5761,8 +5704,6 @@ var MRT_FilterTextField = function MRT_FilterTextField(_ref) {
|
|
5761
5704
|
CloseIcon = _instance$options$ico.CloseIcon,
|
5762
5705
|
localization = _instance$options.localization,
|
5763
5706
|
muiTableHeadCellFilterTextFieldProps = _instance$options.muiTableHeadCellFilterTextFieldProps,
|
5764
|
-
onColumnFilterValueChanged = _instance$options.onColumnFilterValueChanged,
|
5765
|
-
onColumnFilterValueChangedDebounced = _instance$options.onColumnFilterValueChangedDebounced,
|
5766
5707
|
tableId = _instance$options.tableId,
|
5767
5708
|
setCurrentFilterFns = instance.setCurrentFilterFns;
|
5768
5709
|
var column = header.column;
|
@@ -5806,36 +5747,11 @@ var MRT_FilterTextField = function MRT_FilterTextField(_ref) {
|
|
5806
5747
|
|
5807
5748
|
column.setFilterValue((_event$target$value = event.target.value) != null ? _event$target$value : undefined);
|
5808
5749
|
}
|
5809
|
-
|
5810
|
-
onColumnFilterValueChangedDebounced == null ? void 0 : onColumnFilterValueChangedDebounced({
|
5811
|
-
column: column,
|
5812
|
-
event: event,
|
5813
|
-
filterValue: event.target.value,
|
5814
|
-
instance: instance
|
5815
|
-
});
|
5816
|
-
columnDef.onColumnFilterValueChangedDebounced == null ? void 0 : columnDef.onColumnFilterValueChangedDebounced({
|
5817
|
-
column: column,
|
5818
|
-
event: event,
|
5819
|
-
filterValue: event.target.value,
|
5820
|
-
instance: instance
|
5821
|
-
});
|
5822
5750
|
}, 200), []);
|
5823
5751
|
|
5824
5752
|
var handleChange = function handleChange(event) {
|
5825
5753
|
setFilterValue(event.target.value);
|
5826
5754
|
handleChangeDebounced(event);
|
5827
|
-
onColumnFilterValueChanged == null ? void 0 : onColumnFilterValueChanged({
|
5828
|
-
column: column,
|
5829
|
-
event: event,
|
5830
|
-
filterValue: event.target.value,
|
5831
|
-
instance: instance
|
5832
|
-
});
|
5833
|
-
columnDef.onColumnFilterValueChanged == null ? void 0 : columnDef.onColumnFilterValueChanged({
|
5834
|
-
column: column,
|
5835
|
-
event: event,
|
5836
|
-
filterValue: event.target.value,
|
5837
|
-
instance: instance
|
5838
|
-
});
|
5839
5755
|
};
|
5840
5756
|
|
5841
5757
|
var handleFilterMenuOpen = function handleFilterMenuOpen(event) {
|
@@ -6078,6 +5994,7 @@ var MRT_TableHeadCellResizeHandle = function MRT_TableHeadCellResizeHandle(_ref)
|
|
6078
5994
|
var getState = instance.getState;
|
6079
5995
|
|
6080
5996
|
var _getState = getState(),
|
5997
|
+
density = _getState.density,
|
6081
5998
|
showFilters = _getState.showFilters;
|
6082
5999
|
|
6083
6000
|
var column = header.column;
|
@@ -6094,13 +6011,14 @@ var MRT_TableHeadCellResizeHandle = function MRT_TableHeadCellResizeHandle(_ref)
|
|
6094
6011
|
borderRightWidth: '2px',
|
6095
6012
|
cursor: 'col-resize',
|
6096
6013
|
height: showFilters && columnDefType === 'data' ? '4rem' : '2rem',
|
6014
|
+
mr: density === 'compact' ? '-0.5rem' : '-1rem',
|
6097
6015
|
opacity: 0.8,
|
6098
6016
|
position: 'absolute',
|
6099
|
-
mr: '-1rem',
|
6100
6017
|
right: '1px',
|
6101
6018
|
touchAction: 'none',
|
6102
6019
|
transition: column.getIsResizing() ? undefined : 'all 0.2s ease-in-out',
|
6103
6020
|
userSelect: 'none',
|
6021
|
+
zIndex: 4,
|
6104
6022
|
'&:active': {
|
6105
6023
|
backgroundColor: theme.palette.info.main,
|
6106
6024
|
opacity: 1
|
@@ -6918,7 +6836,7 @@ var MRT_EditCellTextField = function MRT_EditCellTextField(_ref) {
|
|
6918
6836
|
enableEditing = _instance$options.enableEditing,
|
6919
6837
|
muiTableBodyCellEditTextFieldProps = _instance$options.muiTableBodyCellEditTextFieldProps,
|
6920
6838
|
onCellEditBlur = _instance$options.onCellEditBlur,
|
6921
|
-
|
6839
|
+
onCellEditChange = _instance$options.onCellEditChange,
|
6922
6840
|
setCurrentEditingCell = instance.setCurrentEditingCell,
|
6923
6841
|
setCurrentEditingRow = instance.setCurrentEditingRow;
|
6924
6842
|
|
@@ -6932,12 +6850,12 @@ var MRT_EditCellTextField = function MRT_EditCellTextField(_ref) {
|
|
6932
6850
|
|
6933
6851
|
var handleChange = function handleChange(event) {
|
6934
6852
|
setValue(event.target.value);
|
6935
|
-
columnDef.
|
6853
|
+
columnDef.onCellEditChange == null ? void 0 : columnDef.onCellEditChange({
|
6936
6854
|
event: event,
|
6937
6855
|
cell: cell,
|
6938
6856
|
instance: instance
|
6939
6857
|
});
|
6940
|
-
|
6858
|
+
onCellEditChange == null ? void 0 : onCellEditChange({
|
6941
6859
|
event: event,
|
6942
6860
|
cell: cell,
|
6943
6861
|
instance: instance
|
@@ -7076,8 +6994,6 @@ var MRT_TableBodyCell = function MRT_TableBodyCell(_ref) {
|
|
7076
6994
|
enableRowNumbers = _instance$options.enableRowNumbers,
|
7077
6995
|
muiTableBodyCellProps = _instance$options.muiTableBodyCellProps,
|
7078
6996
|
muiTableBodyCellSkeletonProps = _instance$options.muiTableBodyCellSkeletonProps,
|
7079
|
-
onCellClick = _instance$options.onCellClick,
|
7080
|
-
onRowClick = _instance$options.onRowClick,
|
7081
6997
|
rowNumberMode = _instance$options.rowNumberMode,
|
7082
6998
|
tableId = _instance$options.tableId,
|
7083
6999
|
setColumnOrder = instance.setColumnOrder,
|
@@ -7149,13 +7065,6 @@ var MRT_TableBodyCell = function MRT_TableBodyCell(_ref) {
|
|
7149
7065
|
};
|
7150
7066
|
|
7151
7067
|
return React__default.createElement(material.TableCell, Object.assign({
|
7152
|
-
onClick: function onClick(event) {
|
7153
|
-
return onCellClick == null ? void 0 : onCellClick({
|
7154
|
-
event: event,
|
7155
|
-
cell: cell,
|
7156
|
-
instance: instance
|
7157
|
-
});
|
7158
|
-
},
|
7159
7068
|
onDoubleClick: handleDoubleClick
|
7160
7069
|
}, tableCellProps, {
|
7161
7070
|
ref: columnDefType === 'data' && enableColumnOrdering ? dropRef : undefined,
|
@@ -7165,7 +7074,7 @@ var MRT_TableBodyCell = function MRT_TableBodyCell(_ref) {
|
|
7165
7074
|
return _extends({
|
7166
7075
|
backgroundColor: column.getIsPinned() ? material.alpha(material.lighten(theme.palette.background["default"], 0.04), 0.95) : undefined,
|
7167
7076
|
boxShadow: getIsLastLeftPinnedColumn() ? "4px 0 4px -2px " + material.alpha(theme.palette.common.black, 0.1) : getIsFirstRightPinnedColumn() ? "-4px 0 4px -2px " + material.alpha(theme.palette.common.black, 0.1) : undefined,
|
7168
|
-
cursor: isEditable && editingMode === 'cell'
|
7077
|
+
cursor: isEditable && editingMode === 'cell' ? 'pointer' : 'text',
|
7169
7078
|
left: column.getIsPinned() === 'left' ? column.getStart('left') + "px" : undefined,
|
7170
7079
|
overflow: 'hidden',
|
7171
7080
|
p: density === 'compact' ? columnDefType === 'display' ? '0 0.5rem' : '0.5rem' : density === 'comfortable' ? columnDefType === 'display' ? '0.5rem 0.75rem' : '1rem' : columnDefType === 'display' ? '1rem 1.25rem' : '1.5rem',
|
@@ -7217,7 +7126,6 @@ var MRT_TableDetailPanel = function MRT_TableDetailPanel(_ref) {
|
|
7217
7126
|
_instance$options = instance.options,
|
7218
7127
|
muiTableBodyRowProps = _instance$options.muiTableBodyRowProps,
|
7219
7128
|
muiTableDetailPanelProps = _instance$options.muiTableDetailPanelProps,
|
7220
|
-
onDetailPanelClick = _instance$options.onDetailPanelClick,
|
7221
7129
|
renderDetailPanel = _instance$options.renderDetailPanel;
|
7222
7130
|
var tableRowProps = muiTableBodyRowProps instanceof Function ? muiTableBodyRowProps({
|
7223
7131
|
row: row,
|
@@ -7228,14 +7136,7 @@ var MRT_TableDetailPanel = function MRT_TableDetailPanel(_ref) {
|
|
7228
7136
|
instance: instance
|
7229
7137
|
}) : muiTableDetailPanelProps;
|
7230
7138
|
return React__default.createElement(material.TableRow, Object.assign({}, tableRowProps), React__default.createElement(material.TableCell, Object.assign({
|
7231
|
-
colSpan: getVisibleLeafColumns().length
|
7232
|
-
onClick: function onClick(event) {
|
7233
|
-
return onDetailPanelClick == null ? void 0 : onDetailPanelClick({
|
7234
|
-
event: event,
|
7235
|
-
row: row,
|
7236
|
-
instance: instance
|
7237
|
-
});
|
7238
|
-
}
|
7139
|
+
colSpan: getVisibleLeafColumns().length
|
7239
7140
|
}, tableCellProps, {
|
7240
7141
|
sx: _extends({
|
7241
7142
|
borderBottom: !row.getIsExpanded() ? 'none' : undefined,
|
@@ -7259,7 +7160,6 @@ var MRT_TableBodyRow = function MRT_TableBodyRow(_ref) {
|
|
7259
7160
|
var getIsSomeColumnsPinned = instance.getIsSomeColumnsPinned,
|
7260
7161
|
_instance$options = instance.options,
|
7261
7162
|
muiTableBodyRowProps = _instance$options.muiTableBodyRowProps,
|
7262
|
-
onRowClick = _instance$options.onRowClick,
|
7263
7163
|
renderDetailPanel = _instance$options.renderDetailPanel;
|
7264
7164
|
var tableRowProps = muiTableBodyRowProps instanceof Function ? muiTableBodyRowProps({
|
7265
7165
|
row: row,
|
@@ -7267,13 +7167,6 @@ var MRT_TableBodyRow = function MRT_TableBodyRow(_ref) {
|
|
7267
7167
|
}) : muiTableBodyRowProps;
|
7268
7168
|
return React__default.createElement(React__default.Fragment, null, React__default.createElement(material.TableRow, Object.assign({
|
7269
7169
|
hover: true,
|
7270
|
-
onClick: function onClick(event) {
|
7271
|
-
return onRowClick == null ? void 0 : onRowClick({
|
7272
|
-
event: event,
|
7273
|
-
row: row,
|
7274
|
-
instance: instance
|
7275
|
-
});
|
7276
|
-
},
|
7277
7170
|
selected: row.getIsSelected()
|
7278
7171
|
}, tableRowProps, {
|
7279
7172
|
sx: function sx(theme) {
|
@@ -7607,7 +7500,7 @@ var MRT_TablePaper = function MRT_TablePaper(_ref) {
|
|
7607
7500
|
};
|
7608
7501
|
|
7609
7502
|
var MRT_TableRoot = function MRT_TableRoot(props) {
|
7610
|
-
var _initialState$columnO, _initialState$current, _initialState$current2, _initialState$density, _initialState$isFullS, _initialState$showFil, _initialState$showGlo, _props$globalFilterFn, _props$state3, _props$state4, _props$onCurrentEditi, _props$onCurrentEditi2, _props$onCurrentFilte, _props$onCurrentGloba, _props$onDensityChang, _props$onIsFullScreen, _props$onShowFiltersC, _props$onShowGlobalFi;
|
7503
|
+
var _initialState$columnO, _initialState$current, _initialState$current2, _initialState$density, _initialState$isFullS, _props$initialState$s, _props$initialState2, _initialState$showFil, _initialState$showGlo, _props$globalFilterFn, _props$state3, _props$state4, _props$onCurrentEditi, _props$onCurrentEditi2, _props$onCurrentFilte, _props$onCurrentGloba, _props$onDensityChang, _props$onIsFullScreen, _props$onShowAlertBan, _props$onShowFiltersC, _props$onShowGlobalFi;
|
7611
7504
|
|
7612
7505
|
var _useState = React.useState(props.tableId),
|
7613
7506
|
tableId = _useState[0],
|
@@ -7646,27 +7539,31 @@ var MRT_TableRoot = function MRT_TableRoot(props) {
|
|
7646
7539
|
isFullScreen = _useState6[0],
|
7647
7540
|
setIsFullScreen = _useState6[1];
|
7648
7541
|
|
7649
|
-
var _useState7 = React.useState((
|
7650
|
-
|
7651
|
-
|
7542
|
+
var _useState7 = React.useState((_props$initialState$s = (_props$initialState2 = props.initialState) == null ? void 0 : _props$initialState2.showAlertBanner) != null ? _props$initialState$s : false),
|
7543
|
+
showAlertBanner = _useState7[0],
|
7544
|
+
setShowAlertBanner = _useState7[1];
|
7652
7545
|
|
7653
|
-
var _useState8 = React.useState((_initialState$
|
7654
|
-
|
7655
|
-
|
7546
|
+
var _useState8 = React.useState((_initialState$showFil = initialState == null ? void 0 : initialState.showFilters) != null ? _initialState$showFil : false),
|
7547
|
+
showFilters = _useState8[0],
|
7548
|
+
setShowFilters = _useState8[1];
|
7656
7549
|
|
7657
|
-
var _useState9 = React.useState(
|
7550
|
+
var _useState9 = React.useState((_initialState$showGlo = initialState == null ? void 0 : initialState.showGlobalFilter) != null ? _initialState$showGlo : false),
|
7551
|
+
showGlobalFilter = _useState9[0],
|
7552
|
+
setShowGlobalFilter = _useState9[1];
|
7553
|
+
|
7554
|
+
var _useState10 = React.useState(function () {
|
7658
7555
|
return Object.assign.apply(Object, [{}].concat(getAllLeafColumnDefs(props.columns).map(function (c) {
|
7659
7556
|
var _ref, _c$filterFn, _initialState$current3, _c$filterSelectOption, _ref2;
|
7660
7557
|
|
7661
7558
|
return _ref2 = {}, _ref2[c.id] = (_ref = (_c$filterFn = c.filterFn) != null ? _c$filterFn : initialState == null ? void 0 : (_initialState$current3 = initialState.currentFilterFns) == null ? void 0 : _initialState$current3[c.id]) != null ? _ref : !!((_c$filterSelectOption = c.filterSelectOptions) != null && _c$filterSelectOption.length) ? 'equals' : 'fuzzy', _ref2;
|
7662
7559
|
})));
|
7663
7560
|
}),
|
7664
|
-
currentFilterFns =
|
7665
|
-
setCurrentFilterFns =
|
7561
|
+
currentFilterFns = _useState10[0],
|
7562
|
+
setCurrentFilterFns = _useState10[1];
|
7666
7563
|
|
7667
|
-
var
|
7668
|
-
currentGlobalFilterFn =
|
7669
|
-
setCurrentGlobalFilterFn =
|
7564
|
+
var _useState11 = React.useState((_props$globalFilterFn = props.globalFilterFn) != null ? _props$globalFilterFn : 'fuzzy'),
|
7565
|
+
currentGlobalFilterFn = _useState11[0],
|
7566
|
+
setCurrentGlobalFilterFn = _useState11[1];
|
7670
7567
|
|
7671
7568
|
var table = React.useMemo(function () {
|
7672
7569
|
return (// @ts-ignore
|
@@ -7790,6 +7687,7 @@ var MRT_TableRoot = function MRT_TableRoot(props) {
|
|
7790
7687
|
currentGlobalFilterFn: currentGlobalFilterFn,
|
7791
7688
|
density: density,
|
7792
7689
|
isFullScreen: isFullScreen,
|
7690
|
+
showAlertBanner: showAlertBanner,
|
7793
7691
|
showFilters: showFilters,
|
7794
7692
|
showGlobalFilter: showGlobalFilter
|
7795
7693
|
}, props.state),
|
@@ -7801,31 +7699,11 @@ var MRT_TableRoot = function MRT_TableRoot(props) {
|
|
7801
7699
|
setCurrentGlobalFilterFn: (_props$onCurrentGloba = props.onCurrentGlobalFilterFnChange) != null ? _props$onCurrentGloba : setCurrentGlobalFilterFn,
|
7802
7700
|
setDensity: (_props$onDensityChang = props.onDensityChange) != null ? _props$onDensityChang : setDensity,
|
7803
7701
|
setIsFullScreen: (_props$onIsFullScreen = props.onIsFullScreenChange) != null ? _props$onIsFullScreen : setIsFullScreen,
|
7702
|
+
setShowAlertBanner: (_props$onShowAlertBan = props.onShowAlertBannerChange) != null ? _props$onShowAlertBan : setShowAlertBanner,
|
7804
7703
|
setShowFilters: (_props$onShowFiltersC = props.onShowFiltersChange) != null ? _props$onShowFiltersC : setShowFilters,
|
7805
7704
|
setShowGlobalFilter: (_props$onShowGlobalFi = props.onShowGlobalFilterChange) != null ? _props$onShowGlobalFi : setShowGlobalFilter
|
7806
7705
|
});
|
7807
7706
|
|
7808
|
-
React.useEffect(function () {
|
7809
|
-
props == null ? void 0 : props.onColumnOrderChanged == null ? void 0 : props.onColumnOrderChanged({
|
7810
|
-
columnOrder: instance.getState().columnOrder,
|
7811
|
-
//@ts-ignore
|
7812
|
-
instance: instance
|
7813
|
-
});
|
7814
|
-
}, [instance.getState().columnOrder]);
|
7815
|
-
React.useEffect(function () {
|
7816
|
-
props == null ? void 0 : props.onColumnPinningChanged == null ? void 0 : props.onColumnPinningChanged({
|
7817
|
-
columnPinning: instance.getState().columnPinning,
|
7818
|
-
//@ts-ignore
|
7819
|
-
instance: instance
|
7820
|
-
});
|
7821
|
-
}, [instance.getState().columnPinning]);
|
7822
|
-
React.useEffect(function () {
|
7823
|
-
props == null ? void 0 : props.onColumnVisibilityChanged == null ? void 0 : props.onColumnVisibilityChanged({
|
7824
|
-
columnPinning: instance.getState().columnVisibility,
|
7825
|
-
//@ts-ignore
|
7826
|
-
instance: instance
|
7827
|
-
});
|
7828
|
-
}, [instance.getState().columnVisibility]);
|
7829
7707
|
return React__default.createElement(React__default.Fragment, null, React__default.createElement(material.Dialog, {
|
7830
7708
|
PaperComponent: material.Box,
|
7831
7709
|
TransitionComponent: material.Grow,
|