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.
- package/README.md +7 -4
- package/dist/cjs/index.js +68 -13
- package/dist/cjs/index.js.map +1 -1
- package/dist/cjs/types/MaterialReactTable.d.ts +68 -66
- package/dist/cjs/types/body/MRT_TableBodyCellValue.d.ts +1 -1
- package/dist/cjs/types/column.utils.d.ts +18 -4
- package/dist/cjs/types/index.d.ts +2 -1
- package/dist/cjs/types/table/MRT_TableRoot.d.ts +48 -47
- package/dist/esm/material-react-table.esm.js +67 -14
- package/dist/esm/material-react-table.esm.js.map +1 -1
- package/dist/esm/types/MaterialReactTable.d.ts +68 -66
- package/dist/esm/types/body/MRT_TableBodyCellValue.d.ts +1 -1
- package/dist/esm/types/column.utils.d.ts +18 -4
- package/dist/esm/types/index.d.ts +2 -1
- package/dist/esm/types/table/MRT_TableRoot.d.ts +48 -47
- package/dist/index.d.ts +78 -69
- package/package.json +3 -2
- package/src/MaterialReactTable.tsx +72 -256
- package/src/body/MRT_TableBodyCell.tsx +9 -1
- package/src/body/MRT_TableBodyCellValue.tsx +93 -23
- package/src/buttons/MRT_ToggleGlobalFilterButton.tsx +1 -0
- package/src/column.utils.ts +4 -3
- package/src/index.tsx +2 -0
- package/src/toolbar/MRT_ToolbarDropZone.tsx +6 -4
- package/src/toolbar/MRT_TopToolbar.tsx +2 -1
@@ -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", {}> | ((
|
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", {}> | ((
|
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", {}> | ((
|
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 | ((
|
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 | ((
|
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 | ((
|
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 | ((
|
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", {}> | ((
|
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 | ((
|
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 | ((
|
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", {}> | ((
|
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", {}> | ((
|
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", {}> | ((
|
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", {}> | ((
|
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", {}> | ((
|
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 | ((
|
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 | ((
|
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", {}> | ((
|
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", {}> | ((
|
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", {}> | ((
|
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", {}> | ((
|
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 | ((
|
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 | ((
|
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 | ((
|
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", {}> | ((
|
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", {}> | ((
|
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>, {}>> | ((
|
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", {}> | ((
|
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", {}> | ((
|
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", {}> | ((
|
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 | ((
|
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", {}> | ((
|
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?: ((
|
182
|
+
onEditingRowCancel?: ((props: {
|
182
183
|
row: MRT_Row<TData>;
|
183
184
|
table: MRT_TableInstance<TData>;
|
184
185
|
}) => void) | undefined;
|
185
|
-
onEditingRowSave?: ((
|
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 | ((
|
210
|
+
renderBottomToolbar?: React.ReactNode | ((props: {
|
210
211
|
table: MRT_TableInstance<TData>;
|
211
212
|
}) => React.ReactNode);
|
212
|
-
renderBottomToolbarCustomActions?: ((
|
213
|
+
renderBottomToolbarCustomActions?: ((props: {
|
213
214
|
table: MRT_TableInstance<TData>;
|
214
215
|
}) => React.ReactNode) | undefined;
|
215
|
-
renderColumnActionsMenuItems?: ((
|
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?: ((
|
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?: ((
|
227
|
+
renderDetailPanel?: ((props: {
|
227
228
|
row: MRT_Row<TData>;
|
228
229
|
table: MRT_TableInstance<TData>;
|
229
230
|
}) => React.ReactNode) | undefined;
|
230
|
-
renderGlobalFilterModeMenuItems?: ((
|
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?: ((
|
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?: ((
|
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?: ((
|
246
|
+
renderToolbarInternalActions?: ((props: {
|
246
247
|
table: MRT_TableInstance<TData>;
|
247
248
|
}) => React.ReactNode) | undefined;
|
248
|
-
renderTopToolbar?: React.ReactNode | ((
|
249
|
+
renderTopToolbar?: React.ReactNode | ((props: {
|
249
250
|
table: MRT_TableInstance<TData>;
|
250
251
|
}) => React.ReactNode);
|
251
|
-
renderTopToolbarCustomActions?: ((
|
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>> | ((
|
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>> | ((
|
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: '
|
1331
|
+
height: '100%',
|
1328
1332
|
position: 'absolute',
|
1329
|
-
width: '
|
1330
|
-
zIndex:
|
1333
|
+
width: '100%',
|
1334
|
+
zIndex: 4,
|
1331
1335
|
}), onDragEnter: handleDragEnter },
|
1332
|
-
React.createElement(Typography,
|
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
|
-
|
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
|
-
:
|
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, {
|
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
|