material-react-table 1.5.11 → 1.6.0

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.
@@ -24,6 +24,7 @@ export declare const MRT_TableRoot: <TData extends Record<string, any> = {}>(pro
24
24
  enableDensityToggle?: boolean | undefined;
25
25
  enableEditing?: boolean | undefined;
26
26
  enableExpandAll?: boolean | undefined;
27
+ enableFilterMatchHighlighting?: boolean | undefined;
27
28
  enableFullScreenToggle?: boolean | undefined;
28
29
  enableGlobalFilterModes?: boolean | undefined;
29
30
  enableGlobalFilterRankedResults?: boolean | undefined;
@@ -50,139 +51,139 @@ export declare const MRT_TableRoot: <TData extends Record<string, any> = {}>(pro
50
51
  layoutMode?: "grid" | "semantic" | undefined;
51
52
  localization?: Partial<MRT_Localization> | undefined;
52
53
  memoMode?: "rows" | "cells" | "table-body" | undefined;
53
- muiBottomToolbarProps?: import("@mui/material").ToolbarProps<"div", {}> | (({ table }: {
54
+ muiBottomToolbarProps?: import("@mui/material").ToolbarProps<"div", {}> | ((props: {
54
55
  table: MRT_TableInstance<TData>;
55
56
  }) => import("@mui/material").ToolbarProps<"div", {}>) | undefined;
56
- muiExpandAllButtonProps?: import("@mui/material").IconButtonProps<"button", {}> | (({ table }: {
57
+ muiExpandAllButtonProps?: import("@mui/material").IconButtonProps<"button", {}> | ((props: {
57
58
  table: MRT_TableInstance<TData>;
58
59
  }) => import("@mui/material").IconButtonProps<"button", {}>) | undefined;
59
- muiExpandButtonProps?: import("@mui/material").IconButtonProps<"button", {}> | (({ row, table, }: {
60
+ muiExpandButtonProps?: import("@mui/material").IconButtonProps<"button", {}> | ((props: {
60
61
  table: MRT_TableInstance<TData>;
61
62
  row: MRT_Row<TData>;
62
63
  }) => import("@mui/material").IconButtonProps<"button", {}>) | undefined;
63
- muiLinearProgressProps?: import("@mui/material").LinearProgressProps | (({ isTopToolbar, table, }: {
64
+ muiLinearProgressProps?: import("@mui/material").LinearProgressProps | ((props: {
64
65
  isTopToolbar: boolean;
65
66
  table: MRT_TableInstance<TData>;
66
67
  }) => import("@mui/material").LinearProgressProps) | undefined;
67
- muiSearchTextFieldProps?: import("@mui/material").TextFieldProps | (({ table }: {
68
+ muiSearchTextFieldProps?: import("@mui/material").TextFieldProps | ((props: {
68
69
  table: MRT_TableInstance<TData>;
69
70
  }) => import("@mui/material").TextFieldProps) | undefined;
70
- muiSelectAllCheckboxProps?: import("@mui/material").CheckboxProps | (({ table }: {
71
+ muiSelectAllCheckboxProps?: import("@mui/material").CheckboxProps | ((props: {
71
72
  table: MRT_TableInstance<TData>;
72
73
  }) => import("@mui/material").CheckboxProps) | undefined;
73
- muiSelectCheckboxProps?: import("@mui/material").CheckboxProps | import("@mui/material").RadioProps | (({ table, row, }: {
74
+ muiSelectCheckboxProps?: import("@mui/material").CheckboxProps | import("@mui/material").RadioProps | ((props: {
74
75
  table: MRT_TableInstance<TData>;
75
76
  row: MRT_Row<TData>;
76
77
  }) => import("@mui/material").CheckboxProps | import("@mui/material").RadioProps) | undefined;
77
- muiTableBodyCellCopyButtonProps?: import("@mui/material").ButtonProps<"button", {}> | (({ cell, column, row, table, }: {
78
+ muiTableBodyCellCopyButtonProps?: import("@mui/material").ButtonProps<"button", {}> | ((props: {
78
79
  cell: MRT_Cell<TData>;
79
80
  column: MRT_Column<TData>;
80
81
  row: MRT_Row<TData>;
81
82
  table: MRT_TableInstance<TData>;
82
83
  }) => import("@mui/material").ButtonProps<"button", {}>) | undefined;
83
- muiTableBodyCellEditTextFieldProps?: import("@mui/material").TextFieldProps | (({ cell, column, row, table, }: {
84
+ muiTableBodyCellEditTextFieldProps?: import("@mui/material").TextFieldProps | ((props: {
84
85
  cell: MRT_Cell<TData>;
85
86
  column: MRT_Column<TData>;
86
87
  row: MRT_Row<TData>;
87
88
  table: MRT_TableInstance<TData>;
88
89
  }) => import("@mui/material").TextFieldProps) | undefined;
89
- muiTableBodyCellProps?: import("@mui/material").TableCellProps | (({ cell, column, row, table, }: {
90
+ muiTableBodyCellProps?: import("@mui/material").TableCellProps | ((props: {
90
91
  cell: MRT_Cell<TData>;
91
92
  column: MRT_Column<TData>;
92
93
  row: MRT_Row<TData>;
93
94
  table: MRT_TableInstance<TData>;
94
95
  }) => import("@mui/material").TableCellProps) | undefined;
95
- muiTableBodyCellSkeletonProps?: import("@mui/material").SkeletonProps<"span", {}> | (({ cell, column, row, table, }: {
96
+ muiTableBodyCellSkeletonProps?: import("@mui/material").SkeletonProps<"span", {}> | ((props: {
96
97
  cell: MRT_Cell<TData>;
97
98
  column: MRT_Column<TData>;
98
99
  row: MRT_Row<TData>;
99
100
  table: MRT_TableInstance<TData>;
100
101
  }) => import("@mui/material").SkeletonProps<"span", {}>) | undefined;
101
- muiTableBodyProps?: import("@mui/material").TableBodyProps<"tbody", {}> | (({ table }: {
102
+ muiTableBodyProps?: import("@mui/material").TableBodyProps<"tbody", {}> | ((props: {
102
103
  table: MRT_TableInstance<TData>;
103
104
  }) => import("@mui/material").TableBodyProps<"tbody", {}>) | undefined;
104
- muiTableBodyRowDragHandleProps?: import("@mui/material").IconButtonProps<"button", {}> | (({ table, row, }: {
105
+ muiTableBodyRowDragHandleProps?: import("@mui/material").IconButtonProps<"button", {}> | ((props: {
105
106
  table: MRT_TableInstance<TData>;
106
107
  row: MRT_Row<TData>;
107
108
  }) => import("@mui/material").IconButtonProps<"button", {}>) | undefined;
108
- muiTableBodyRowProps?: import("@mui/material").TableRowProps<"tr", {}> | (({ isDetailPanel, row, table, }: {
109
+ muiTableBodyRowProps?: import("@mui/material").TableRowProps<"tr", {}> | ((props: {
109
110
  isDetailPanel?: boolean | undefined;
110
111
  row: MRT_Row<TData>;
111
112
  table: MRT_TableInstance<TData>;
112
113
  }) => import("@mui/material").TableRowProps<"tr", {}>) | undefined;
113
- muiTableContainerProps?: import("@mui/material").TableContainerProps<"div", {}> | (({ table, }: {
114
+ muiTableContainerProps?: import("@mui/material").TableContainerProps<"div", {}> | ((props: {
114
115
  table: MRT_TableInstance<TData>;
115
116
  }) => import("@mui/material").TableContainerProps<"div", {}>) | undefined;
116
- muiTableDetailPanelProps?: import("@mui/material").TableCellProps | (({ table, row, }: {
117
+ muiTableDetailPanelProps?: import("@mui/material").TableCellProps | ((props: {
117
118
  table: MRT_TableInstance<TData>;
118
119
  row: MRT_Row<TData>;
119
120
  }) => import("@mui/material").TableCellProps) | undefined;
120
- muiTableFooterCellProps?: import("@mui/material").TableCellProps | (({ table, column, }: {
121
+ muiTableFooterCellProps?: import("@mui/material").TableCellProps | ((props: {
121
122
  table: MRT_TableInstance<TData>;
122
123
  column: MRT_Column<TData>;
123
124
  }) => import("@mui/material").TableCellProps) | undefined;
124
- muiTableFooterProps?: import("@mui/material").TableFooterProps<"tfoot", {}> | (({ table }: {
125
+ muiTableFooterProps?: import("@mui/material").TableFooterProps<"tfoot", {}> | ((props: {
125
126
  table: MRT_TableInstance<TData>;
126
127
  }) => import("@mui/material").TableFooterProps<"tfoot", {}>) | undefined;
127
- muiTableFooterRowProps?: import("@mui/material").TableRowProps<"tr", {}> | (({ table, footerGroup, }: {
128
+ muiTableFooterRowProps?: import("@mui/material").TableRowProps<"tr", {}> | ((props: {
128
129
  table: MRT_TableInstance<TData>;
129
130
  footerGroup: import("..").MRT_HeaderGroup<TData>;
130
131
  }) => import("@mui/material").TableRowProps<"tr", {}>) | undefined;
131
- muiTableHeadCellColumnActionsButtonProps?: import("@mui/material").IconButtonProps<"button", {}> | (({ table, column, }: {
132
+ muiTableHeadCellColumnActionsButtonProps?: import("@mui/material").IconButtonProps<"button", {}> | ((props: {
132
133
  table: MRT_TableInstance<TData>;
133
134
  column: MRT_Column<TData>;
134
135
  }) => import("@mui/material").IconButtonProps<"button", {}>) | undefined;
135
- muiTableHeadCellDragHandleProps?: import("@mui/material").IconButtonProps<"button", {}> | (({ table, column, }: {
136
+ muiTableHeadCellDragHandleProps?: import("@mui/material").IconButtonProps<"button", {}> | ((props: {
136
137
  table: MRT_TableInstance<TData>;
137
138
  column: MRT_Column<TData>;
138
139
  }) => import("@mui/material").IconButtonProps<"button", {}>) | undefined;
139
- muiTableHeadCellFilterCheckboxProps?: import("@mui/material").CheckboxProps | (({ column, table, }: {
140
+ muiTableHeadCellFilterCheckboxProps?: import("@mui/material").CheckboxProps | ((props: {
140
141
  column: MRT_Column<TData>;
141
142
  table: MRT_TableInstance<TData>;
142
143
  }) => import("@mui/material").CheckboxProps) | undefined;
143
- muiTableHeadCellFilterTextFieldProps?: import("@mui/material").TextFieldProps | (({ table, column, rangeFilterIndex, }: {
144
+ muiTableHeadCellFilterTextFieldProps?: import("@mui/material").TextFieldProps | ((props: {
144
145
  table: MRT_TableInstance<TData>;
145
146
  column: MRT_Column<TData>;
146
147
  rangeFilterIndex?: number | undefined;
147
148
  }) => import("@mui/material").TextFieldProps) | undefined;
148
- muiTableHeadCellProps?: import("@mui/material").TableCellProps | (({ table, column, }: {
149
+ muiTableHeadCellProps?: import("@mui/material").TableCellProps | ((props: {
149
150
  table: MRT_TableInstance<TData>;
150
151
  column: MRT_Column<TData>;
151
152
  }) => import("@mui/material").TableCellProps) | undefined;
152
- muiTableHeadProps?: import("@mui/material").TableHeadProps<"thead", {}> | (({ table }: {
153
+ muiTableHeadProps?: import("@mui/material").TableHeadProps<"thead", {}> | ((props: {
153
154
  table: MRT_TableInstance<TData>;
154
155
  }) => import("@mui/material").TableHeadProps<"thead", {}>) | undefined;
155
- muiTableHeadRowProps?: import("@mui/material").TableRowProps<"tr", {}> | (({ table, headerGroup, }: {
156
+ muiTableHeadRowProps?: import("@mui/material").TableRowProps<"tr", {}> | ((props: {
156
157
  table: MRT_TableInstance<TData>;
157
158
  headerGroup: import("..").MRT_HeaderGroup<TData>;
158
159
  }) => import("@mui/material").TableRowProps<"tr", {}>) | undefined;
159
- muiTablePaginationProps?: Partial<import("@mui/material").TablePaginationProps<React.JSXElementConstructor<import("@mui/material").TablePaginationBaseProps>, {}>> | (({ table, }: {
160
+ muiTablePaginationProps?: Partial<import("@mui/material").TablePaginationProps<React.JSXElementConstructor<import("@mui/material").TablePaginationBaseProps>, {}>> | ((props: {
160
161
  table: MRT_TableInstance<TData>;
161
162
  }) => Partial<import("@mui/material").TablePaginationProps<React.JSXElementConstructor<import("@mui/material").TablePaginationBaseProps>, {}>>) | undefined;
162
- muiTablePaperProps?: import("@mui/material").PaperProps<"div", {}> | (({ table }: {
163
+ muiTablePaperProps?: import("@mui/material").PaperProps<"div", {}> | ((props: {
163
164
  table: MRT_TableInstance<TData>;
164
165
  }) => import("@mui/material").PaperProps<"div", {}>) | undefined;
165
- muiTableProps?: import("@mui/material").TableProps<"table", {}> | (({ table }: {
166
+ muiTableProps?: import("@mui/material").TableProps<"table", {}> | ((props: {
166
167
  table: MRT_TableInstance<TData>;
167
168
  }) => import("@mui/material").TableProps<"table", {}>) | undefined;
168
- muiToolbarAlertBannerChipProps?: import("@mui/material").ChipProps<"div", {}> | (({ table }: {
169
+ muiToolbarAlertBannerChipProps?: import("@mui/material").ChipProps<"div", {}> | ((props: {
169
170
  table: MRT_TableInstance<TData>;
170
171
  }) => import("@mui/material").ChipProps<"div", {}>) | undefined;
171
- muiToolbarAlertBannerProps?: import("@mui/material").AlertProps | (({ table }: {
172
+ muiToolbarAlertBannerProps?: import("@mui/material").AlertProps | ((props: {
172
173
  table: MRT_TableInstance<TData>;
173
174
  }) => import("@mui/material").AlertProps) | undefined;
174
- muiTopToolbarProps?: import("@mui/material").ToolbarProps<"div", {}> | (({ table }: {
175
+ muiTopToolbarProps?: import("@mui/material").ToolbarProps<"div", {}> | ((props: {
175
176
  table: MRT_TableInstance<TData>;
176
177
  }) => import("@mui/material").ToolbarProps<"div", {}>) | undefined;
177
178
  onDensityChange?: import("@tanstack/react-table").OnChangeFn<import("..").DensityState> | undefined;
178
179
  onDraggingColumnChange?: import("@tanstack/react-table").OnChangeFn<MRT_Column<TData> | null> | undefined;
179
180
  onDraggingRowChange?: import("@tanstack/react-table").OnChangeFn<MRT_Row<TData> | null> | undefined;
180
181
  onEditingCellChange?: import("@tanstack/react-table").OnChangeFn<MRT_Cell<TData> | null> | undefined;
181
- onEditingRowCancel?: (({ row, table, }: {
182
+ onEditingRowCancel?: ((props: {
182
183
  row: MRT_Row<TData>;
183
184
  table: MRT_TableInstance<TData>;
184
185
  }) => void) | undefined;
185
- onEditingRowSave?: (({ exitEditingMode, row, table, values, }: {
186
+ onEditingRowSave?: ((props: {
186
187
  exitEditingMode: () => void;
187
188
  row: MRT_Row<TData>;
188
189
  table: MRT_TableInstance<TData>;
@@ -206,49 +207,49 @@ export declare const MRT_TableRoot: <TData extends Record<string, any> = {}>(pro
206
207
  positionPagination?: "bottom" | "top" | "none" | "both" | undefined;
207
208
  positionToolbarAlertBanner?: "bottom" | "top" | "none" | undefined;
208
209
  positionToolbarDropZone?: "bottom" | "top" | "none" | "both" | undefined;
209
- renderBottomToolbar?: React.ReactNode | (({ table }: {
210
+ renderBottomToolbar?: React.ReactNode | ((props: {
210
211
  table: MRT_TableInstance<TData>;
211
212
  }) => React.ReactNode);
212
- renderBottomToolbarCustomActions?: (({ table, }: {
213
+ renderBottomToolbarCustomActions?: ((props: {
213
214
  table: MRT_TableInstance<TData>;
214
215
  }) => React.ReactNode) | undefined;
215
- renderColumnActionsMenuItems?: (({ column, closeMenu, table, }: {
216
+ renderColumnActionsMenuItems?: ((props: {
216
217
  column: MRT_Column<TData>;
217
218
  closeMenu: () => void;
218
219
  table: MRT_TableInstance<TData>;
219
220
  }) => React.ReactNode[]) | undefined;
220
- renderColumnFilterModeMenuItems?: (({ column, internalFilterOptions, onSelectFilterMode, table, }: {
221
+ renderColumnFilterModeMenuItems?: ((props: {
221
222
  column: MRT_Column<TData>;
222
223
  internalFilterOptions: import("..").MRT_InternalFilterOption[];
223
224
  onSelectFilterMode: (filterMode: MRT_FilterOption) => void;
224
225
  table: MRT_TableInstance<TData>;
225
226
  }) => React.ReactNode[]) | undefined;
226
- renderDetailPanel?: (({ row, table, }: {
227
+ renderDetailPanel?: ((props: {
227
228
  row: MRT_Row<TData>;
228
229
  table: MRT_TableInstance<TData>;
229
230
  }) => React.ReactNode) | undefined;
230
- renderGlobalFilterModeMenuItems?: (({ internalFilterOptions, onSelectFilterMode, table, }: {
231
+ renderGlobalFilterModeMenuItems?: ((props: {
231
232
  internalFilterOptions: import("..").MRT_InternalFilterOption[];
232
233
  onSelectFilterMode: (filterMode: MRT_FilterOption) => void;
233
234
  table: MRT_TableInstance<TData>;
234
235
  }) => React.ReactNode[]) | undefined;
235
- renderRowActionMenuItems?: (({ closeMenu, row, table, }: {
236
+ renderRowActionMenuItems?: ((props: {
236
237
  closeMenu: () => void;
237
238
  row: MRT_Row<TData>;
238
239
  table: MRT_TableInstance<TData>;
239
240
  }) => React.ReactNode[]) | undefined;
240
- renderRowActions?: (({ cell, row, table, }: {
241
+ renderRowActions?: ((props: {
241
242
  cell: MRT_Cell<TData>;
242
243
  row: MRT_Row<TData>;
243
244
  table: MRT_TableInstance<TData>;
244
245
  }) => React.ReactNode) | undefined;
245
- renderToolbarInternalActions?: (({ table, }: {
246
+ renderToolbarInternalActions?: ((props: {
246
247
  table: MRT_TableInstance<TData>;
247
248
  }) => React.ReactNode) | undefined;
248
- renderTopToolbar?: React.ReactNode | (({ table }: {
249
+ renderTopToolbar?: React.ReactNode | ((props: {
249
250
  table: MRT_TableInstance<TData>;
250
251
  }) => React.ReactNode);
251
- renderTopToolbarCustomActions?: (({ table, }: {
252
+ renderTopToolbarCustomActions?: ((props: {
252
253
  table: MRT_TableInstance<TData>;
253
254
  }) => React.ReactNode) | undefined;
254
255
  rowCount?: number | undefined;
@@ -256,11 +257,11 @@ export declare const MRT_TableRoot: <TData extends Record<string, any> = {}>(pro
256
257
  selectAllMode?: "all" | "page" | undefined;
257
258
  state?: Partial<MRT_TableState<TData>> | undefined;
258
259
  columnVirtualizerInstanceRef?: React.MutableRefObject<import("@tanstack/react-virtual").Virtualizer<HTMLDivElement, HTMLTableCellElement> | null> | undefined;
259
- columnVirtualizerProps?: Partial<import("@tanstack/react-virtual").VirtualizerOptions<HTMLDivElement, HTMLTableCellElement>> | (({ table, }: {
260
+ columnVirtualizerProps?: Partial<import("@tanstack/react-virtual").VirtualizerOptions<HTMLDivElement, HTMLTableCellElement>> | ((props: {
260
261
  table: MRT_TableInstance<TData>;
261
262
  }) => Partial<import("@tanstack/react-virtual").VirtualizerOptions<HTMLDivElement, HTMLTableCellElement>>) | undefined;
262
263
  rowVirtualizerInstanceRef?: React.MutableRefObject<import("@tanstack/react-virtual").Virtualizer<HTMLDivElement, HTMLTableRowElement> | null> | undefined;
263
- rowVirtualizerProps?: Partial<import("@tanstack/react-virtual").VirtualizerOptions<HTMLDivElement, HTMLTableRowElement>> | (({ table, }: {
264
+ rowVirtualizerProps?: Partial<import("@tanstack/react-virtual").VirtualizerOptions<HTMLDivElement, HTMLTableRowElement>> | ((props: {
264
265
  table: MRT_TableInstance<TData>;
265
266
  }) => Partial<import("@tanstack/react-virtual").VirtualizerOptions<HTMLDivElement, HTMLTableRowElement>>) | undefined;
266
267
  tableInstanceRef?: React.MutableRefObject<MRT_TableInstance<TData> | null> | undefined;
@@ -68,6 +68,7 @@ import TableCell from '@mui/material/TableCell';
68
68
  import TableSortLabel from '@mui/material/TableSortLabel';
69
69
  import TableBody from '@mui/material/TableBody';
70
70
  import Skeleton from '@mui/material/Skeleton';
71
+ import highlightWords from 'highlight-words';
71
72
  import TableFooter from '@mui/material/TableFooter';
72
73
  import DialogActions from '@mui/material/DialogActions';
73
74
  import DialogContent from '@mui/material/DialogContent';
@@ -262,6 +263,7 @@ const getCommonCellStyles = ({ column, header, table, tableCellProps, theme, })
262
263
  : undefined, minWidth: `max(${column.getSize()}px, ${(_g = column.columnDef.minSize) !== null && _g !== void 0 ? _g : 30}px)`, width: (_h = header === null || header === void 0 ? void 0 : header.getSize()) !== null && _h !== void 0 ? _h : column.getSize() }));
263
264
  };
264
265
  const MRT_DefaultColumn = {
266
+ filterVariant: 'text',
265
267
  minSize: 40,
266
268
  maxSize: 1000,
267
269
  size: 180,
@@ -1271,7 +1273,7 @@ const MRT_ToggleFiltersButton = (_a) => {
1271
1273
  };
1272
1274
 
1273
1275
  const MRT_ToggleGlobalFilterButton = (_a) => {
1274
- var _b;
1276
+ var _b, _c;
1275
1277
  var { table } = _a, rest = __rest(_a, ["table"]);
1276
1278
  const { getState, options: { icons: { SearchIcon, SearchOffIcon }, localization, }, refs: { searchInputRef }, setShowGlobalFilter, } = table;
1277
1279
  const { globalFilter, showGlobalFilter } = getState();
@@ -1280,7 +1282,7 @@ const MRT_ToggleGlobalFilterButton = (_a) => {
1280
1282
  queueMicrotask(() => { var _a; return (_a = searchInputRef.current) === null || _a === void 0 ? void 0 : _a.focus(); });
1281
1283
  };
1282
1284
  return (React.createElement(Tooltip, { arrow: true, title: (_b = rest === null || rest === void 0 ? void 0 : rest.title) !== null && _b !== void 0 ? _b : localization.showHideSearch },
1283
- React.createElement(IconButton, Object.assign({ disabled: !!globalFilter, onClick: handleToggleSearch }, rest, { title: undefined }), showGlobalFilter ? React.createElement(SearchOffIcon, null) : React.createElement(SearchIcon, null))));
1285
+ React.createElement(IconButton, Object.assign({ "aria-label": (_c = rest === null || rest === void 0 ? void 0 : rest.title) !== null && _c !== void 0 ? _c : localization.showHideSearch, disabled: !!globalFilter, onClick: handleToggleSearch }, rest, { title: undefined }), showGlobalFilter ? React.createElement(SearchOffIcon, null) : React.createElement(SearchIcon, null))));
1284
1286
  };
1285
1287
 
1286
1288
  const MRT_ToolbarInternalButtons = ({ table, }) => {
@@ -1321,15 +1323,17 @@ const MRT_ToolbarDropZone = ({ table, }) => {
1321
1323
  React.createElement(Box, { className: "Mui-ToolbarDropZone", sx: (theme) => ({
1322
1324
  alignItems: 'center',
1323
1325
  backgroundColor: alpha(theme.palette.info.main, (hoveredColumn === null || hoveredColumn === void 0 ? void 0 : hoveredColumn.id) === 'drop-zone' ? 0.2 : 0.1),
1326
+ backdropFilter: 'blur(4px)',
1327
+ boxSizing: 'border-box',
1324
1328
  border: `dashed ${theme.palette.info.main} 2px`,
1325
1329
  display: 'flex',
1326
1330
  justifyContent: 'center',
1327
- height: 'calc(100% - 4px)',
1331
+ height: '100%',
1328
1332
  position: 'absolute',
1329
- width: 'calc(100% - 4px)',
1330
- zIndex: 2,
1333
+ width: '100%',
1334
+ zIndex: 4,
1331
1335
  }), onDragEnter: handleDragEnter },
1332
- React.createElement(Typography, null, localization.dropToGroupBy.replace('{column}', (_b = (_a = draggingColumn === null || draggingColumn === void 0 ? void 0 : draggingColumn.columnDef) === null || _a === void 0 ? void 0 : _a.header) !== null && _b !== void 0 ? _b : '')))));
1336
+ React.createElement(Typography, { fontStyle: "italic" }, localization.dropToGroupBy.replace('{column}', (_b = (_a = draggingColumn === null || draggingColumn === void 0 ? void 0 : draggingColumn.columnDef) === null || _a === void 0 ? void 0 : _a.header) !== null && _b !== void 0 ? _b : '')))));
1333
1337
  };
1334
1338
 
1335
1339
  const commonToolbarStyles = ({ theme }) => ({
@@ -1374,6 +1378,7 @@ const MRT_TopToolbar = ({ table, }) => {
1374
1378
  right: 0,
1375
1379
  top: 0,
1376
1380
  width: '100%',
1381
+ zIndex: 2,
1377
1382
  } },
1378
1383
  enableGlobalFilter && positionGlobalFilter === 'left' && (React.createElement(MRT_GlobalFilterTextField, { table: table })), (_a = renderTopToolbarCustomActions === null || renderTopToolbarCustomActions === void 0 ? void 0 : renderTopToolbarCustomActions({ table })) !== null && _a !== void 0 ? _a : React.createElement("span", null),
1379
1384
  enableToolbarInternalActions ? (React.createElement(Box, { sx: {
@@ -2132,11 +2137,15 @@ const MRT_TableBodyRowGrabHandle = ({ cell, rowRef, table, }) => {
2132
2137
  return (React.createElement(MRT_GrabHandleButton, { iconButtonProps: iconButtonProps, onDragStart: handleDragStart, onDragEnd: handleDragEnd, table: table }));
2133
2138
  };
2134
2139
 
2140
+ const allowedTypes = ['string', 'number'];
2135
2141
  const MRT_TableBodyCellValue = ({ cell, table }) => {
2136
- var _a, _b;
2142
+ var _a, _b, _c, _d;
2143
+ const { getState, options: { enableFilterMatchHighlighting }, } = table;
2137
2144
  const { column, row } = cell;
2138
2145
  const { columnDef } = column;
2139
- return (React.createElement(React.Fragment, null, cell.getIsAggregated() && columnDef.AggregatedCell
2146
+ const { globalFilter } = getState();
2147
+ const filterValue = column.getFilterValue();
2148
+ let renderedCellValue = cell.getIsAggregated() && columnDef.AggregatedCell
2140
2149
  ? columnDef.AggregatedCell({
2141
2150
  cell,
2142
2151
  column,
@@ -2152,7 +2161,45 @@ const MRT_TableBodyCellValue = ({ cell, table }) => {
2152
2161
  row,
2153
2162
  table,
2154
2163
  })
2155
- : (_b = (_a = columnDef === null || columnDef === void 0 ? void 0 : columnDef.Cell) === null || _a === void 0 ? void 0 : _a.call(columnDef, { cell, column, row, table })) !== null && _b !== void 0 ? _b : cell.renderValue()));
2164
+ : undefined;
2165
+ const isGroupedValue = renderedCellValue !== undefined;
2166
+ if (!isGroupedValue) {
2167
+ renderedCellValue = cell.renderValue();
2168
+ }
2169
+ if (enableFilterMatchHighlighting &&
2170
+ renderedCellValue &&
2171
+ allowedTypes.includes(typeof renderedCellValue) &&
2172
+ ((filterValue &&
2173
+ allowedTypes.includes(typeof filterValue) &&
2174
+ columnDef.filterVariant === 'text') ||
2175
+ (globalFilter && allowedTypes.includes(typeof globalFilter)))) {
2176
+ const chunks = highlightWords === null || highlightWords === void 0 ? void 0 : highlightWords({
2177
+ text: renderedCellValue === null || renderedCellValue === void 0 ? void 0 : renderedCellValue.toString(),
2178
+ query: ((_b = (_a = column.getFilterValue()) !== null && _a !== void 0 ? _a : globalFilter) !== null && _b !== void 0 ? _b : '').toString(),
2179
+ });
2180
+ if ((chunks === null || chunks === void 0 ? void 0 : chunks.length) > 1 || ((_c = chunks === null || chunks === void 0 ? void 0 : chunks[0]) === null || _c === void 0 ? void 0 : _c.match)) {
2181
+ renderedCellValue = (React.createElement("span", { "aria-label": renderedCellValue, role: "note" }, (_d = chunks === null || chunks === void 0 ? void 0 : chunks.map(({ key, match, text }) => (React.createElement(Box, { "aria-hidden": "true", component: "span", key: key, sx: match
2182
+ ? {
2183
+ backgroundColor: (theme) => theme.palette.mode === 'dark'
2184
+ ? darken(theme.palette.warning.dark, 0.25)
2185
+ : lighten(theme.palette.warning.light, 0.5),
2186
+ borderRadius: '2px',
2187
+ color: (theme) => theme.palette.mode === 'dark' ? 'white' : 'black',
2188
+ padding: '2px 1px',
2189
+ }
2190
+ : undefined }, text)))) !== null && _d !== void 0 ? _d : renderedCellValue));
2191
+ }
2192
+ }
2193
+ if (columnDef.Cell && !isGroupedValue) {
2194
+ renderedCellValue = columnDef.Cell({
2195
+ cell,
2196
+ renderedCellValue,
2197
+ column,
2198
+ row,
2199
+ table,
2200
+ });
2201
+ }
2202
+ return React.createElement(React.Fragment, null, renderedCellValue);
2156
2203
  };
2157
2204
 
2158
2205
  const MRT_TableBodyCell = ({ cell, enableHover, measureElement, numRows, rowIndex, rowRef, table, virtualCell, }) => {
@@ -2231,7 +2278,7 @@ const MRT_TableBodyCell = ({ cell, enableHover, measureElement, numRows, rowInde
2231
2278
  if (node) {
2232
2279
  measureElement === null || measureElement === void 0 ? void 0 : measureElement(node);
2233
2280
  }
2234
- } }, tableCellProps, { onDragEnter: handleDragEnter, onDoubleClick: handleDoubleClick, sx: (theme) => (Object.assign(Object.assign({ alignItems: layoutMode === 'grid' ? 'center' : undefined, cursor: isEditable && editingMode === 'cell' ? 'pointer' : 'inherit', overflow: 'hidden', p: density === 'compact'
2281
+ } }, tableCellProps, { onDragEnter: handleDragEnter, onDoubleClick: handleDoubleClick, sx: (theme) => (Object.assign(Object.assign({ alignItems: layoutMode === 'grid' ? 'center' : undefined, cursor: isEditable && editingMode === 'cell' ? 'pointer' : 'inherit', justifyContent: layoutMode === 'grid' ? tableCellProps.align : undefined, overflow: 'hidden', p: density === 'compact'
2235
2282
  ? columnDefType === 'display'
2236
2283
  ? '0 0.5rem'
2237
2284
  : '0.5rem'
@@ -2268,7 +2315,13 @@ const MRT_TableBodyCell = ({ cell, enableHover, measureElement, numRows, rowInde
2268
2315
  column.id === 'mrt-row-numbers' ? (rowIndex + 1) : column.id === 'mrt-row-drag' ? (React.createElement(MRT_TableBodyRowGrabHandle, { cell: cell, rowRef: rowRef, table: table })) : columnDefType === 'display' &&
2269
2316
  (column.id === 'mrt-row-select' ||
2270
2317
  column.id === 'mrt-row-expand' ||
2271
- !row.getIsGrouped()) ? ((_a = columnDef.Cell) === null || _a === void 0 ? void 0 : _a.call(columnDef, { cell, column, row, table })) : isEditing ? (React.createElement(MRT_EditCellTextField, { cell: cell, table: table })) : (enableClickToCopy || columnDef.enableClickToCopy) &&
2318
+ !row.getIsGrouped()) ? ((_a = columnDef.Cell) === null || _a === void 0 ? void 0 : _a.call(columnDef, {
2319
+ cell,
2320
+ renderedCellValue: cell.renderValue(),
2321
+ column,
2322
+ row,
2323
+ table,
2324
+ })) : isEditing ? (React.createElement(MRT_EditCellTextField, { cell: cell, table: table })) : (enableClickToCopy || columnDef.enableClickToCopy) &&
2272
2325
  columnDef.enableClickToCopy !== false ? (React.createElement(MRT_CopyButton, { cell: cell, table: table },
2273
2326
  React.createElement(MRT_TableBodyCellValue, { cell: cell, table: table }))) : (React.createElement(MRT_TableBodyCellValue, { cell: cell, table: table }))),
2274
2327
  cell.getIsGrouped() && !columnDef.GroupedCell && (React.createElement(React.Fragment, null,
@@ -2946,7 +2999,7 @@ const MRT_Localization_EN = {
2946
2999
 
2947
3000
  const MaterialReactTable = (_a) => {
2948
3001
  var _b;
2949
- var { aggregationFns, autoResetExpanded = false, columnResizeMode = 'onEnd', defaultColumn, defaultDisplayColumn, editingMode = 'modal', enableBottomToolbar = true, enableColumnActions = true, enableColumnFilters = true, enableColumnOrdering = false, enableColumnResizing = false, enableDensityToggle = true, enableExpandAll = true, enableFilters = true, enableFullScreenToggle = true, enableGlobalFilter = true, enableGlobalFilterRankedResults = true, enableGrouping = false, enableHiding = true, enableMultiRowSelection = true, enableMultiSort = true, enablePagination = true, enablePinning = false, enableRowSelection = false, enableSelectAll = true, enableSorting = true, enableStickyHeader = false, enableTableFooter = true, enableTableHead = true, enableToolbarInternalActions = true, enableTopToolbar = true, filterFns, icons, layoutMode = 'semantic', localization, manualFiltering, manualGrouping, manualPagination, manualSorting, positionActionsColumn = 'first', positionExpandColumn = 'first', positionGlobalFilter = 'right', positionPagination = 'bottom', positionToolbarAlertBanner = 'top', positionToolbarDropZone = 'top', rowNumberMode = 'original', selectAllMode = 'page', sortingFns } = _a, rest = __rest(_a, ["aggregationFns", "autoResetExpanded", "columnResizeMode", "defaultColumn", "defaultDisplayColumn", "editingMode", "enableBottomToolbar", "enableColumnActions", "enableColumnFilters", "enableColumnOrdering", "enableColumnResizing", "enableDensityToggle", "enableExpandAll", "enableFilters", "enableFullScreenToggle", "enableGlobalFilter", "enableGlobalFilterRankedResults", "enableGrouping", "enableHiding", "enableMultiRowSelection", "enableMultiSort", "enablePagination", "enablePinning", "enableRowSelection", "enableSelectAll", "enableSorting", "enableStickyHeader", "enableTableFooter", "enableTableHead", "enableToolbarInternalActions", "enableTopToolbar", "filterFns", "icons", "layoutMode", "localization", "manualFiltering", "manualGrouping", "manualPagination", "manualSorting", "positionActionsColumn", "positionExpandColumn", "positionGlobalFilter", "positionPagination", "positionToolbarAlertBanner", "positionToolbarDropZone", "rowNumberMode", "selectAllMode", "sortingFns"]);
3002
+ var { aggregationFns, autoResetExpanded = false, columnResizeMode = 'onEnd', defaultColumn, defaultDisplayColumn, editingMode = 'modal', enableBottomToolbar = true, enableColumnActions = true, enableColumnFilters = true, enableColumnOrdering = false, enableColumnResizing = false, enableDensityToggle = true, enableExpandAll = true, enableFilterMatchHighlighting = true, enableFilters = true, enableFullScreenToggle = true, enableGlobalFilter = true, enableGlobalFilterRankedResults = true, enableGrouping = false, enableHiding = true, enableMultiRowSelection = true, enableMultiSort = true, enablePagination = true, enablePinning = false, enableRowSelection = false, enableSelectAll = true, enableSorting = true, enableStickyHeader = false, enableTableFooter = true, enableTableHead = true, enableToolbarInternalActions = true, enableTopToolbar = true, filterFns, icons, layoutMode = 'semantic', localization, manualFiltering, manualGrouping, manualPagination, manualSorting, positionActionsColumn = 'first', positionExpandColumn = 'first', positionGlobalFilter = 'right', positionPagination = 'bottom', positionToolbarAlertBanner = 'top', positionToolbarDropZone = 'top', rowNumberMode = 'original', selectAllMode = 'page', sortingFns } = _a, rest = __rest(_a, ["aggregationFns", "autoResetExpanded", "columnResizeMode", "defaultColumn", "defaultDisplayColumn", "editingMode", "enableBottomToolbar", "enableColumnActions", "enableColumnFilters", "enableColumnOrdering", "enableColumnResizing", "enableDensityToggle", "enableExpandAll", "enableFilterMatchHighlighting", "enableFilters", "enableFullScreenToggle", "enableGlobalFilter", "enableGlobalFilterRankedResults", "enableGrouping", "enableHiding", "enableMultiRowSelection", "enableMultiSort", "enablePagination", "enablePinning", "enableRowSelection", "enableSelectAll", "enableSorting", "enableStickyHeader", "enableTableFooter", "enableTableHead", "enableToolbarInternalActions", "enableTopToolbar", "filterFns", "icons", "layoutMode", "localization", "manualFiltering", "manualGrouping", "manualPagination", "manualSorting", "positionActionsColumn", "positionExpandColumn", "positionGlobalFilter", "positionPagination", "positionToolbarAlertBanner", "positionToolbarDropZone", "rowNumberMode", "selectAllMode", "sortingFns"]);
2950
3003
  const _icons = useMemo(() => (Object.assign(Object.assign({}, MRT_Default_Icons), icons)), [icons]);
2951
3004
  const _localization = useMemo(() => (Object.assign(Object.assign({}, MRT_Localization_EN), localization)), [localization]);
2952
3005
  const _aggregationFns = useMemo(() => (Object.assign(Object.assign({}, MRT_AggregationFns), aggregationFns)), []);
@@ -2969,8 +3022,8 @@ const MaterialReactTable = (_a) => {
2969
3022
  manualPagination = true;
2970
3023
  manualSorting = true;
2971
3024
  }
2972
- return (React.createElement(MRT_TableRoot, Object.assign({ aggregationFns: _aggregationFns, autoResetExpanded: autoResetExpanded, columnResizeMode: columnResizeMode, defaultColumn: _defaultColumn, defaultDisplayColumn: _defaultDisplayColumn, editingMode: editingMode, enableBottomToolbar: enableBottomToolbar, enableColumnActions: enableColumnActions, enableColumnFilters: enableColumnFilters, enableColumnOrdering: enableColumnOrdering, enableColumnResizing: enableColumnResizing, enableDensityToggle: enableDensityToggle, enableExpandAll: enableExpandAll, enableFilters: enableFilters, enableFullScreenToggle: enableFullScreenToggle, enableGlobalFilter: enableGlobalFilter, enableGlobalFilterRankedResults: enableGlobalFilterRankedResults, enableGrouping: enableGrouping, enableHiding: enableHiding, enableMultiRowSelection: enableMultiRowSelection, enableMultiSort: enableMultiSort, enablePagination: enablePagination, enablePinning: enablePinning, enableRowSelection: enableRowSelection, enableSelectAll: enableSelectAll, enableSorting: enableSorting, enableStickyHeader: enableStickyHeader, enableTableFooter: enableTableFooter, enableTableHead: enableTableHead, enableToolbarInternalActions: enableToolbarInternalActions, enableTopToolbar: enableTopToolbar, filterFns: _filterFns, icons: _icons, layoutMode: layoutMode, localization: _localization, manualFiltering: manualFiltering, manualGrouping: manualGrouping, manualPagination: manualPagination, manualSorting: manualSorting, positionActionsColumn: positionActionsColumn, positionExpandColumn: positionExpandColumn, positionGlobalFilter: positionGlobalFilter, positionPagination: positionPagination, positionToolbarAlertBanner: positionToolbarAlertBanner, positionToolbarDropZone: positionToolbarDropZone, rowNumberMode: rowNumberMode, selectAllMode: selectAllMode, sortingFns: _sortingFns }, rest)));
3025
+ return (React.createElement(MRT_TableRoot, Object.assign({ aggregationFns: _aggregationFns, autoResetExpanded: autoResetExpanded, columnResizeMode: columnResizeMode, defaultColumn: _defaultColumn, defaultDisplayColumn: _defaultDisplayColumn, editingMode: editingMode, enableBottomToolbar: enableBottomToolbar, enableColumnActions: enableColumnActions, enableColumnFilters: enableColumnFilters, enableColumnOrdering: enableColumnOrdering, enableColumnResizing: enableColumnResizing, enableDensityToggle: enableDensityToggle, enableExpandAll: enableExpandAll, enableFilterMatchHighlighting: enableFilterMatchHighlighting, enableFilters: enableFilters, enableFullScreenToggle: enableFullScreenToggle, enableGlobalFilter: enableGlobalFilter, enableGlobalFilterRankedResults: enableGlobalFilterRankedResults, enableGrouping: enableGrouping, enableHiding: enableHiding, enableMultiRowSelection: enableMultiRowSelection, enableMultiSort: enableMultiSort, enablePagination: enablePagination, enablePinning: enablePinning, enableRowSelection: enableRowSelection, enableSelectAll: enableSelectAll, enableSorting: enableSorting, enableStickyHeader: enableStickyHeader, enableTableFooter: enableTableFooter, enableTableHead: enableTableHead, enableToolbarInternalActions: enableToolbarInternalActions, enableTopToolbar: enableTopToolbar, filterFns: _filterFns, icons: _icons, layoutMode: layoutMode, localization: _localization, manualFiltering: manualFiltering, manualGrouping: manualGrouping, manualPagination: manualPagination, manualSorting: manualSorting, positionActionsColumn: positionActionsColumn, positionExpandColumn: positionExpandColumn, positionGlobalFilter: positionGlobalFilter, positionPagination: positionPagination, positionToolbarAlertBanner: positionToolbarAlertBanner, positionToolbarDropZone: positionToolbarDropZone, rowNumberMode: rowNumberMode, selectAllMode: selectAllMode, sortingFns: _sortingFns }, rest)));
2973
3026
  };
2974
3027
 
2975
- export { MRT_BottomToolbar, MRT_CopyButton, MRT_FilterOptionMenu, MRT_FullScreenToggleButton, MRT_GlobalFilterTextField, MRT_ShowHideColumnsButton, MRT_TablePagination, MRT_ToggleDensePaddingButton, MRT_ToggleFiltersButton, MRT_ToggleGlobalFilterButton, MRT_ToggleRowActionMenuButton, MRT_ToolbarAlertBanner, MRT_ToolbarDropZone, MRT_ToolbarInternalButtons, MRT_TopToolbar, MaterialReactTable as default };
3028
+ export { MRT_BottomToolbar, MRT_CopyButton, MRT_EditActionButtons, MRT_FilterOptionMenu, MRT_FullScreenToggleButton, MRT_GlobalFilterTextField, MRT_ShowHideColumnsButton, MRT_TablePagination, MRT_ToggleDensePaddingButton, MRT_ToggleFiltersButton, MRT_ToggleGlobalFilterButton, MRT_ToggleRowActionMenuButton, MRT_ToolbarAlertBanner, MRT_ToolbarDropZone, MRT_ToolbarInternalButtons, MRT_TopToolbar, MaterialReactTable as default };
2976
3029
  //# sourceMappingURL=material-react-table.esm.js.map