material-react-table 0.18.0 → 0.19.0
Sign up to get free protection for your applications and to get access to all the features.
- package/dist/MaterialReactTable.d.ts +169 -133
- package/dist/body/MRT_TableBody.d.ts +1 -1
- package/dist/body/MRT_TableBodyCell.d.ts +1 -1
- package/dist/body/MRT_TableBodyRow.d.ts +1 -1
- package/dist/body/MRT_TableDetailPanel.d.ts +1 -1
- package/dist/buttons/MRT_ColumnPinningButtons.d.ts +1 -1
- package/dist/buttons/MRT_CopyButton.d.ts +1 -1
- package/dist/buttons/MRT_EditActionButtons.d.ts +1 -1
- package/dist/buttons/MRT_ExpandAllButton.d.ts +1 -1
- package/dist/buttons/MRT_ExpandButton.d.ts +1 -1
- package/dist/buttons/MRT_FullScreenToggleButton.d.ts +1 -1
- package/dist/buttons/MRT_GrabHandleButton.d.ts +1 -1
- package/dist/buttons/MRT_ShowHideColumnsButton.d.ts +1 -1
- package/dist/buttons/MRT_ToggleDensePaddingButton.d.ts +1 -1
- package/dist/buttons/MRT_ToggleFiltersButton.d.ts +1 -1
- package/dist/buttons/MRT_ToggleGlobalFilterButton.d.ts +1 -1
- package/dist/buttons/MRT_ToggleRowActionMenuButton.d.ts +1 -1
- package/dist/filtersFns.d.ts +31 -23
- package/dist/footer/MRT_TableFooter.d.ts +1 -1
- package/dist/footer/MRT_TableFooterCell.d.ts +1 -1
- package/dist/footer/MRT_TableFooterRow.d.ts +1 -1
- package/dist/head/MRT_DraggableTableHeadCell.d.ts +1 -1
- package/dist/head/MRT_TableHead.d.ts +1 -1
- package/dist/head/MRT_TableHeadCell.d.ts +1 -1
- package/dist/head/MRT_TableHeadCellColumnActionsButton.d.ts +1 -1
- package/dist/head/MRT_TableHeadCellFilterContainer.d.ts +1 -1
- package/dist/head/MRT_TableHeadCellFilterLabel.d.ts +1 -1
- package/dist/head/MRT_TableHeadCellResizeHandle.d.ts +1 -1
- package/dist/head/MRT_TableHeadCellSortLabel.d.ts +1 -1
- package/dist/head/MRT_TableHeadRow.d.ts +1 -1
- package/dist/inputs/MRT_EditCellTextField.d.ts +1 -1
- package/dist/inputs/MRT_FilterRangeFields.d.ts +1 -1
- package/dist/inputs/MRT_FilterTextField.d.ts +1 -1
- package/dist/inputs/MRT_GlobalFilterTextField.d.ts +1 -1
- package/dist/inputs/MRT_SelectCheckbox.d.ts +1 -1
- package/dist/material-react-table.cjs.development.js +760 -759
- 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 +762 -761
- package/dist/material-react-table.esm.js.map +1 -1
- package/dist/menus/MRT_ColumnActionMenu.d.ts +1 -1
- package/dist/menus/MRT_FilterOptionMenu.d.ts +1 -1
- package/dist/menus/MRT_RowActionMenu.d.ts +1 -1
- package/dist/menus/MRT_ShowHideColumnsMenu.d.ts +1 -1
- package/dist/menus/MRT_ShowHideColumnsMenuItems.d.ts +1 -1
- package/dist/sortingFns.d.ts +10 -3
- package/dist/table/MRT_Table.d.ts +1 -1
- package/dist/table/MRT_TableContainer.d.ts +1 -1
- package/dist/table/MRT_TablePaper.d.ts +1 -1
- package/dist/toolbar/MRT_LinearProgressBar.d.ts +1 -1
- package/dist/toolbar/MRT_TablePagination.d.ts +1 -1
- package/dist/toolbar/MRT_ToolbarAlertBanner.d.ts +1 -1
- package/dist/toolbar/MRT_ToolbarBottom.d.ts +1 -1
- package/dist/toolbar/MRT_ToolbarInternalButtons.d.ts +1 -1
- package/dist/toolbar/MRT_ToolbarTop.d.ts +1 -1
- package/dist/utils.d.ts +10 -16
- package/package.json +4 -4
- package/src/MaterialReactTable.tsx +167 -156
- package/src/body/MRT_TableBody.tsx +5 -6
- package/src/body/MRT_TableBodyCell.tsx +18 -27
- package/src/body/MRT_TableBodyRow.tsx +7 -7
- package/src/body/MRT_TableDetailPanel.tsx +7 -7
- package/src/buttons/MRT_ColumnPinningButtons.tsx +3 -3
- package/src/buttons/MRT_CopyButton.tsx +5 -7
- package/src/buttons/MRT_EditActionButtons.tsx +4 -5
- package/src/buttons/MRT_ExpandAllButton.tsx +4 -5
- package/src/buttons/MRT_ExpandButton.tsx +4 -5
- package/src/buttons/MRT_FullScreenToggleButton.tsx +3 -7
- package/src/buttons/MRT_GrabHandleButton.tsx +39 -41
- package/src/buttons/MRT_ShowHideColumnsButton.tsx +4 -4
- package/src/buttons/MRT_ToggleDensePaddingButton.tsx +3 -7
- package/src/buttons/MRT_ToggleFiltersButton.tsx +3 -4
- package/src/buttons/MRT_ToggleGlobalFilterButton.tsx +4 -8
- package/src/buttons/MRT_ToggleRowActionMenuButton.tsx +6 -6
- package/src/filtersFns.ts +24 -23
- package/src/footer/MRT_TableFooter.tsx +5 -6
- package/src/footer/MRT_TableFooterCell.tsx +8 -11
- package/src/footer/MRT_TableFooterRow.tsx +5 -9
- package/src/head/MRT_DraggableTableHeadCell.tsx +4 -6
- package/src/head/MRT_TableHead.tsx +5 -5
- package/src/head/MRT_TableHeadCell.tsx +18 -29
- package/src/head/MRT_TableHeadCellColumnActionsButton.tsx +6 -8
- package/src/head/MRT_TableHeadCellFilterContainer.tsx +5 -7
- package/src/head/MRT_TableHeadCellFilterLabel.tsx +13 -19
- package/src/head/MRT_TableHeadCellResizeHandle.tsx +12 -11
- package/src/head/MRT_TableHeadCellSortLabel.tsx +3 -5
- package/src/head/MRT_TableHeadRow.tsx +6 -6
- package/src/inputs/MRT_EditCellTextField.tsx +12 -14
- package/src/inputs/MRT_FilterRangeFields.tsx +4 -4
- package/src/inputs/MRT_FilterTextField.tsx +27 -38
- package/src/inputs/MRT_GlobalFilterTextField.tsx +5 -6
- package/src/inputs/MRT_SelectCheckbox.tsx +9 -12
- package/src/menus/MRT_ColumnActionMenu.tsx +5 -9
- package/src/menus/MRT_FilterOptionMenu.tsx +16 -48
- package/src/menus/MRT_RowActionMenu.tsx +4 -5
- package/src/menus/MRT_ShowHideColumnsMenu.tsx +8 -9
- package/src/menus/MRT_ShowHideColumnsMenuItems.tsx +11 -10
- package/src/sortingFns.ts +11 -3
- package/src/table/MRT_Table.tsx +7 -11
- package/src/table/MRT_TableContainer.tsx +5 -6
- package/src/table/MRT_TablePaper.tsx +7 -8
- package/src/table/MRT_TableRoot.tsx +118 -132
- package/src/toolbar/MRT_LinearProgressBar.tsx +4 -5
- package/src/toolbar/MRT_TablePagination.tsx +7 -9
- package/src/toolbar/MRT_ToolbarAlertBanner.tsx +13 -9
- package/src/toolbar/MRT_ToolbarBottom.tsx +8 -9
- package/src/toolbar/MRT_ToolbarInternalButtons.tsx +10 -10
- package/src/toolbar/MRT_ToolbarTop.tsx +11 -11
- package/src/utils.ts +56 -50
@@ -30,28 +30,27 @@ import {
|
|
30
30
|
Column,
|
31
31
|
ColumnDef,
|
32
32
|
FilterFn,
|
33
|
-
FilterFnOption,
|
34
33
|
Header,
|
35
34
|
HeaderGroup,
|
36
35
|
OnChangeFn,
|
37
|
-
Overwrite,
|
38
|
-
ReactTableGenerics,
|
39
36
|
Row,
|
40
37
|
SortingFn,
|
41
|
-
|
42
|
-
|
43
|
-
TableInstance,
|
38
|
+
Table,
|
39
|
+
TableOptions,
|
44
40
|
TableState,
|
45
|
-
UseTableInstanceOptions,
|
46
41
|
} from '@tanstack/react-table';
|
47
42
|
import { Options as VirtualizerOptions } from 'react-virtual';
|
48
43
|
import { MRT_Localization, MRT_DefaultLocalization_EN } from './localization';
|
49
44
|
import { MRT_Default_Icons, MRT_Icons } from './icons';
|
50
45
|
import { MRT_TableRoot } from './table/MRT_TableRoot';
|
46
|
+
import { MRT_FilterFns } from './filtersFns';
|
47
|
+
import { MRT_SortingFns } from './sortingFns';
|
48
|
+
|
49
|
+
type LiteralUnion<T extends U, U = string> = T | (U & Record<never, never>);
|
51
50
|
|
52
51
|
export type MRT_TableOptions<D extends Record<string, any> = {}> = Partial<
|
53
52
|
Omit<
|
54
|
-
|
53
|
+
TableOptions<D>,
|
55
54
|
'columns' | 'data' | 'initialState' | 'state' | 'expandRowsFn'
|
56
55
|
>
|
57
56
|
> & {
|
@@ -69,14 +68,7 @@ export interface MRT_RowModel<D extends Record<string, any> = {}> {
|
|
69
68
|
}
|
70
69
|
|
71
70
|
export type MRT_TableInstance<D extends Record<string, any> = {}> = Omit<
|
72
|
-
|
73
|
-
Overwrite<
|
74
|
-
Partial<TableGenerics>,
|
75
|
-
{
|
76
|
-
Row: D;
|
77
|
-
}
|
78
|
-
>
|
79
|
-
>,
|
71
|
+
Table<D>,
|
80
72
|
| 'getAllColumns'
|
81
73
|
| 'getAllFlatColumns'
|
82
74
|
| 'getAllLeafColumns'
|
@@ -118,10 +110,10 @@ export type MRT_TableInstance<D extends Record<string, any> = {}> = Omit<
|
|
118
110
|
setCurrentEditingRow: Dispatch<SetStateAction<MRT_Row | null>>;
|
119
111
|
setCurrentFilterFns: Dispatch<
|
120
112
|
SetStateAction<{
|
121
|
-
[key: string]:
|
113
|
+
[key: string]: MRT_FilterOption;
|
122
114
|
}>
|
123
115
|
>;
|
124
|
-
setCurrentGlobalFilterFn: Dispatch<SetStateAction<
|
116
|
+
setCurrentGlobalFilterFn: Dispatch<SetStateAction<MRT_FilterOption>>;
|
125
117
|
setDensity: Dispatch<SetStateAction<'comfortable' | 'compact' | 'spacious'>>;
|
126
118
|
setIsFullScreen: Dispatch<SetStateAction<boolean>>;
|
127
119
|
setShowAlertBanner: Dispatch<SetStateAction<boolean>>;
|
@@ -132,8 +124,8 @@ export type MRT_TableInstance<D extends Record<string, any> = {}> = Omit<
|
|
132
124
|
export type MRT_TableState<D extends Record<string, any> = {}> = TableState & {
|
133
125
|
currentEditingCell: MRT_Cell<D> | null;
|
134
126
|
currentEditingRow: MRT_Row<D> | null;
|
135
|
-
currentFilterFns: Record<string,
|
136
|
-
currentGlobalFilterFn: Record<string,
|
127
|
+
currentFilterFns: Record<string, MRT_FilterOption>;
|
128
|
+
currentGlobalFilterFn: Record<string, MRT_FilterOption>;
|
137
129
|
density: 'comfortable' | 'compact' | 'spacious';
|
138
130
|
isLoading: boolean;
|
139
131
|
isFullScreen: boolean;
|
@@ -147,165 +139,206 @@ export type MRT_TableState<D extends Record<string, any> = {}> = TableState & {
|
|
147
139
|
export type MRT_ColumnDef<D extends Record<string, any> = {}> = Omit<
|
148
140
|
ColumnDef<D>,
|
149
141
|
| 'accessorFn'
|
142
|
+
| 'accessorKey'
|
150
143
|
| 'aggregatedCell'
|
151
144
|
| 'cell'
|
152
145
|
| 'columns'
|
153
146
|
| 'filterFn'
|
154
147
|
| 'footer'
|
155
148
|
| 'header'
|
149
|
+
| 'id'
|
156
150
|
| 'sortingFn'
|
157
151
|
> & {
|
158
152
|
AggregatedCell?: ({
|
159
153
|
cell,
|
160
|
-
|
154
|
+
table,
|
161
155
|
}: {
|
162
156
|
cell: MRT_Cell<D>;
|
163
|
-
|
157
|
+
table: MRT_TableInstance<D>;
|
164
158
|
}) => ReactNode;
|
165
159
|
Cell?: ({
|
166
160
|
cell,
|
167
|
-
|
161
|
+
table,
|
168
162
|
}: {
|
169
163
|
cell: MRT_Cell<D>;
|
170
|
-
|
164
|
+
table: MRT_TableInstance<D>;
|
171
165
|
}) => ReactNode;
|
172
166
|
Edit?: ({
|
173
167
|
cell,
|
174
|
-
|
168
|
+
table,
|
175
169
|
}: {
|
176
170
|
cell: MRT_Cell<D>;
|
177
|
-
|
171
|
+
table: MRT_TableInstance<D>;
|
178
172
|
}) => ReactNode;
|
179
173
|
Filter?: ({
|
180
174
|
header,
|
181
|
-
|
175
|
+
table,
|
182
176
|
}: {
|
183
177
|
header: MRT_Header<D>;
|
184
|
-
|
178
|
+
table: MRT_TableInstance<D>;
|
185
179
|
}) => ReactNode;
|
186
180
|
Footer?:
|
187
181
|
| ReactNode
|
188
182
|
| (({
|
189
183
|
footer,
|
190
|
-
|
184
|
+
table,
|
191
185
|
}: {
|
192
186
|
footer: MRT_Header<D>;
|
193
|
-
|
187
|
+
table: MRT_TableInstance<D>;
|
194
188
|
}) => ReactNode);
|
195
189
|
Header?:
|
196
190
|
| ReactNode
|
197
191
|
| (({
|
198
192
|
header,
|
199
|
-
|
193
|
+
table,
|
200
194
|
}: {
|
201
195
|
header: MRT_Header<D>;
|
202
|
-
|
196
|
+
table: MRT_TableInstance<D>;
|
203
197
|
}) => ReactNode);
|
198
|
+
/**
|
199
|
+
* Either an `accessorKey` or a combination of an `accessorFn` and `id` are required for a data column definition.
|
200
|
+
* Specify a function here to point to the correct property in the data object.
|
201
|
+
*
|
202
|
+
* @example accessorFn: (row) => row.username
|
203
|
+
*/
|
204
204
|
accessorFn?: (row: D) => any;
|
205
|
+
/**
|
206
|
+
* Either an `accessorKey` or a combination of an `accessorFn` and `id` are required for a data column definition.
|
207
|
+
* Specify which key in the row this column should use to access the correct data.
|
208
|
+
*
|
209
|
+
* @example accessorKey: 'username'
|
210
|
+
*/
|
211
|
+
accessorKey?: LiteralUnion<string & keyof D>;
|
212
|
+
/**
|
213
|
+
* Specify what type of column this is. Either `data`, `display`, or `group`. Defaults to `data`.
|
214
|
+
* Leave this blank if you are just creating a normal data column.
|
215
|
+
*
|
216
|
+
* @default 'data'
|
217
|
+
*
|
218
|
+
* @example columnDefType: 'display'
|
219
|
+
*/
|
220
|
+
columnDefType?: 'data' | 'display' | 'group';
|
205
221
|
columns?: MRT_ColumnDef<D>[];
|
206
222
|
enableClickToCopy?: boolean;
|
207
223
|
enableColumnActions?: boolean;
|
208
224
|
enableColumnFilterChangeMode?: boolean;
|
209
225
|
enableColumnOrdering?: boolean;
|
210
226
|
enableEditing?: boolean;
|
211
|
-
enabledColumnFilterOptions?:
|
212
|
-
filterFn?: MRT_FilterFn
|
227
|
+
enabledColumnFilterOptions?: MRT_FilterOption[] | null;
|
228
|
+
filterFn?: MRT_FilterFn<D>;
|
213
229
|
filterSelectOptions?: (string | { text: string; value: string })[];
|
214
230
|
footer?: string;
|
215
231
|
header: string;
|
216
|
-
|
232
|
+
/**
|
233
|
+
* Either an `accessorKey` or a combination of an `accessorFn` and `id` are required for a data column definition.
|
234
|
+
*
|
235
|
+
* If you have also specified an `accessorFn`, MRT still needs to have a valid `id` to be able to identify the column uniquely.
|
236
|
+
*
|
237
|
+
* `id` defaults to the `accessorKey` or `header` if not specified.
|
238
|
+
*
|
239
|
+
* @default gets set to the same value as `accessorKey` by default
|
240
|
+
*/
|
241
|
+
id?: LiteralUnion<string & keyof D>;
|
217
242
|
muiTableBodyCellCopyButtonProps?:
|
218
243
|
| ButtonProps
|
219
244
|
| (({
|
220
|
-
|
245
|
+
table,
|
221
246
|
cell,
|
222
247
|
}: {
|
223
|
-
|
248
|
+
table: MRT_TableInstance<D>;
|
224
249
|
cell: MRT_Cell<D>;
|
225
250
|
}) => ButtonProps);
|
226
251
|
muiTableBodyCellEditTextFieldProps?:
|
227
252
|
| TextFieldProps
|
228
253
|
| (({
|
229
|
-
|
254
|
+
table,
|
230
255
|
cell,
|
231
256
|
}: {
|
232
|
-
|
257
|
+
table: MRT_TableInstance<D>;
|
233
258
|
cell: MRT_Cell<D>;
|
234
259
|
}) => TextFieldProps);
|
235
260
|
muiTableBodyCellProps?:
|
236
261
|
| TableCellProps
|
237
262
|
| (({
|
238
|
-
|
263
|
+
table,
|
239
264
|
cell,
|
240
265
|
}: {
|
241
|
-
|
266
|
+
table: MRT_TableInstance<D>;
|
242
267
|
cell: MRT_Cell<D>;
|
243
268
|
}) => TableCellProps);
|
244
269
|
muiTableFooterCellProps?:
|
245
270
|
| TableCellProps
|
246
271
|
| (({
|
247
|
-
|
272
|
+
table,
|
248
273
|
column,
|
249
274
|
}: {
|
250
|
-
|
275
|
+
table: MRT_TableInstance<D>;
|
251
276
|
column: MRT_Column<D>;
|
252
277
|
}) => TableCellProps);
|
253
278
|
muiTableHeadCellColumnActionsButtonProps?:
|
254
279
|
| IconButtonProps
|
255
280
|
| (({
|
256
|
-
|
281
|
+
table,
|
257
282
|
column,
|
258
283
|
}: {
|
259
|
-
|
284
|
+
table: MRT_TableInstance<D>;
|
260
285
|
column: MRT_Column<D>;
|
261
286
|
}) => IconButtonProps);
|
262
287
|
muiTableHeadCellFilterTextFieldProps?:
|
263
288
|
| TextFieldProps
|
264
289
|
| (({
|
265
|
-
|
290
|
+
table,
|
266
291
|
column,
|
267
292
|
}: {
|
268
|
-
|
293
|
+
table: MRT_TableInstance<D>;
|
269
294
|
column: MRT_Column<D>;
|
270
295
|
}) => TextFieldProps);
|
271
296
|
muiTableHeadCellProps?:
|
272
297
|
| TableCellProps
|
273
298
|
| (({
|
274
|
-
|
299
|
+
table,
|
275
300
|
column,
|
276
301
|
}: {
|
277
|
-
|
302
|
+
table: MRT_TableInstance<D>;
|
278
303
|
column: MRT_Column<D>;
|
279
304
|
}) => TableCellProps);
|
280
305
|
onCellEditBlur?: ({
|
281
306
|
cell,
|
282
307
|
event,
|
283
|
-
|
308
|
+
table,
|
284
309
|
}: {
|
285
310
|
event: FocusEvent<HTMLInputElement>;
|
286
311
|
cell: MRT_Cell<D>;
|
287
|
-
|
312
|
+
table: MRT_TableInstance<D>;
|
288
313
|
}) => void;
|
289
314
|
onCellEditChange?: ({
|
290
315
|
cell,
|
291
316
|
event,
|
292
|
-
|
317
|
+
table,
|
293
318
|
}: {
|
294
319
|
event: ChangeEvent<HTMLInputElement>;
|
295
320
|
cell: MRT_Cell<D>;
|
296
|
-
|
321
|
+
table: MRT_TableInstance<D>;
|
297
322
|
}) => void;
|
298
323
|
sortingFn?: MRT_SortingFn;
|
299
324
|
};
|
300
325
|
|
326
|
+
export type MRT_DefinedColumnDef<D extends Record<string, any> = {}> = Omit<
|
327
|
+
MRT_ColumnDef<D>,
|
328
|
+
'id'
|
329
|
+
> & {
|
330
|
+
id: string;
|
331
|
+
};
|
332
|
+
|
301
333
|
export type MRT_Column<D extends Record<string, any> = {}> = Omit<
|
302
334
|
Column<D>,
|
303
|
-
'header' | 'footer' | 'columns' | 'columnDef'
|
335
|
+
'header' | 'footer' | 'columns' | 'columnDef' | 'filterFn'
|
304
336
|
> & {
|
337
|
+
columnDef: MRT_DefinedColumnDef<D>;
|
305
338
|
columns?: MRT_Column<D>[];
|
306
|
-
|
307
|
-
header: string;
|
339
|
+
filterFn?: MRT_FilterFn<D>;
|
308
340
|
footer: string;
|
341
|
+
header: string;
|
309
342
|
};
|
310
343
|
|
311
344
|
export type MRT_Header<D extends Record<string, any> = {}> = Omit<
|
@@ -341,27 +374,17 @@ export type MRT_Cell<D extends Record<string, any> = {}> = Omit<
|
|
341
374
|
row: MRT_Row<D>;
|
342
375
|
};
|
343
376
|
|
344
|
-
export type MRT_SortingOption =
|
377
|
+
export type MRT_SortingOption = keyof typeof MRT_SortingFns;
|
345
378
|
|
346
|
-
export type MRT_SortingFn
|
379
|
+
export type MRT_SortingFn<D extends Record<string, any> = {}> =
|
380
|
+
| SortingFn<D>
|
381
|
+
| MRT_SortingOption;
|
347
382
|
|
348
|
-
export type
|
349
|
-
| 'between'
|
350
|
-
| 'contains'
|
351
|
-
| 'empty'
|
352
|
-
| 'endsWith'
|
353
|
-
| 'equals'
|
354
|
-
| 'fuzzy'
|
355
|
-
| 'greaterThan'
|
356
|
-
| 'greaterThanOrEqual'
|
357
|
-
| 'lessThan'
|
358
|
-
| 'lessThanOrEqual'
|
359
|
-
| 'notEmpty'
|
360
|
-
| 'notEquals'
|
361
|
-
| 'startsWith'
|
362
|
-
| FilterFnOption<TableGenerics>;
|
383
|
+
export type MRT_FilterOption = keyof typeof MRT_FilterFns;
|
363
384
|
|
364
|
-
export type MRT_FilterFn
|
385
|
+
export type MRT_FilterFn<D extends Record<string, any> = {}> =
|
386
|
+
| FilterFn<D>
|
387
|
+
| MRT_FilterOption;
|
365
388
|
|
366
389
|
export type MaterialReactTableProps<D extends Record<string, any> = {}> =
|
367
390
|
MRT_TableOptions<D> & {
|
@@ -387,221 +410,209 @@ export type MaterialReactTableProps<D extends Record<string, any> = {}> =
|
|
387
410
|
enableToolbarBottom?: boolean;
|
388
411
|
enableToolbarInternalActions?: boolean;
|
389
412
|
enableToolbarTop?: boolean;
|
390
|
-
enabledColumnFilterOptions?: (
|
391
|
-
enabledGlobalFilterOptions?: (
|
413
|
+
enabledColumnFilterOptions?: (MRT_FilterOption | string)[] | null;
|
414
|
+
enabledGlobalFilterOptions?: (MRT_FilterOption | string)[] | null;
|
392
415
|
icons?: Partial<MRT_Icons>;
|
393
416
|
localization?: Partial<MRT_Localization>;
|
394
417
|
muiExpandAllButtonProps?:
|
395
418
|
| IconButtonProps
|
396
|
-
| (({
|
419
|
+
| (({ table }: { table: MRT_TableInstance<D> }) => IconButtonProps);
|
397
420
|
muiExpandButtonProps?:
|
398
421
|
| IconButtonProps
|
399
422
|
| (({
|
400
|
-
|
423
|
+
table,
|
401
424
|
}: {
|
402
|
-
|
425
|
+
table: MRT_TableInstance<D>;
|
403
426
|
row: MRT_Row<D>;
|
404
427
|
}) => IconButtonProps);
|
405
428
|
muiLinearProgressProps?:
|
406
429
|
| LinearProgressProps
|
407
|
-
| (({
|
408
|
-
instance,
|
409
|
-
}: {
|
410
|
-
instance: MRT_TableInstance<D>;
|
411
|
-
}) => LinearProgressProps);
|
430
|
+
| (({ table }: { table: MRT_TableInstance<D> }) => LinearProgressProps);
|
412
431
|
muiSearchTextFieldProps?:
|
413
432
|
| TextFieldProps
|
414
|
-
| (({
|
433
|
+
| (({ table }: { table: MRT_TableInstance<D> }) => TextFieldProps);
|
415
434
|
muiSelectAllCheckboxProps?:
|
416
435
|
| CheckboxProps
|
417
|
-
| (({
|
436
|
+
| (({ table }: { table: MRT_TableInstance<D> }) => CheckboxProps);
|
418
437
|
muiSelectCheckboxProps?:
|
419
438
|
| CheckboxProps
|
420
439
|
| (({
|
421
|
-
|
440
|
+
table,
|
422
441
|
row,
|
423
442
|
}: {
|
424
|
-
|
443
|
+
table: MRT_TableInstance<D>;
|
425
444
|
row: MRT_Row<D>;
|
426
445
|
}) => CheckboxProps);
|
427
446
|
muiTableBodyCellCopyButtonProps?:
|
428
447
|
| ButtonProps
|
429
448
|
| (({
|
430
|
-
|
449
|
+
table,
|
431
450
|
cell,
|
432
451
|
}: {
|
433
|
-
|
452
|
+
table: MRT_TableInstance<D>;
|
434
453
|
cell: MRT_Cell<D>;
|
435
454
|
}) => ButtonProps);
|
436
455
|
muiTableBodyCellEditTextFieldProps?:
|
437
456
|
| TextFieldProps
|
438
457
|
| (({
|
439
|
-
|
458
|
+
table,
|
440
459
|
cell,
|
441
460
|
}: {
|
442
|
-
|
461
|
+
table: MRT_TableInstance<D>;
|
443
462
|
cell: MRT_Cell<D>;
|
444
463
|
}) => TextFieldProps);
|
445
464
|
muiTableBodyCellProps?:
|
446
465
|
| TableCellProps
|
447
466
|
| (({
|
448
|
-
|
467
|
+
table,
|
449
468
|
cell,
|
450
469
|
}: {
|
451
|
-
|
470
|
+
table: MRT_TableInstance<D>;
|
452
471
|
cell: MRT_Cell<D>;
|
453
472
|
}) => TableCellProps);
|
454
473
|
muiTableBodyCellSkeletonProps?:
|
455
474
|
| SkeletonProps
|
456
475
|
| (({
|
457
|
-
|
476
|
+
table,
|
458
477
|
cell,
|
459
478
|
}: {
|
460
|
-
|
479
|
+
table: MRT_TableInstance<D>;
|
461
480
|
cell: MRT_Cell<D>;
|
462
481
|
}) => SkeletonProps);
|
463
482
|
muiTableBodyProps?:
|
464
483
|
| TableBodyProps
|
465
|
-
| (({
|
484
|
+
| (({ table }: { table: MRT_TableInstance<D> }) => TableBodyProps);
|
466
485
|
muiTableBodyRowProps?:
|
467
486
|
| TableRowProps
|
468
487
|
| (({
|
469
|
-
|
488
|
+
table,
|
470
489
|
row,
|
471
490
|
}: {
|
472
|
-
|
491
|
+
table: MRT_TableInstance<D>;
|
473
492
|
row: MRT_Row<D>;
|
474
493
|
}) => TableRowProps);
|
475
494
|
muiTableContainerProps?:
|
476
495
|
| TableContainerProps
|
477
|
-
| (({
|
478
|
-
instance,
|
479
|
-
}: {
|
480
|
-
instance: MRT_TableInstance<D>;
|
481
|
-
}) => TableContainerProps);
|
496
|
+
| (({ table }: { table: MRT_TableInstance<D> }) => TableContainerProps);
|
482
497
|
muiTableDetailPanelProps?:
|
483
498
|
| TableCellProps
|
484
499
|
| (({
|
485
|
-
|
500
|
+
table,
|
486
501
|
row,
|
487
502
|
}: {
|
488
|
-
|
503
|
+
table: MRT_TableInstance<D>;
|
489
504
|
row: MRT_Row<D>;
|
490
505
|
}) => TableCellProps);
|
491
506
|
muiTableFooterCellProps?:
|
492
507
|
| TableCellProps
|
493
508
|
| (({
|
494
|
-
|
509
|
+
table,
|
495
510
|
column,
|
496
511
|
}: {
|
497
|
-
|
512
|
+
table: MRT_TableInstance<D>;
|
498
513
|
column: MRT_Column<D>;
|
499
514
|
}) => TableCellProps);
|
500
515
|
muiTableFooterProps?:
|
501
516
|
| TableFooterProps
|
502
|
-
| (({
|
503
|
-
instance,
|
504
|
-
}: {
|
505
|
-
instance: MRT_TableInstance<D>;
|
506
|
-
}) => TableFooterProps);
|
517
|
+
| (({ table }: { table: MRT_TableInstance<D> }) => TableFooterProps);
|
507
518
|
muiTableFooterRowProps?:
|
508
519
|
| TableRowProps
|
509
520
|
| (({
|
510
|
-
|
521
|
+
table,
|
511
522
|
footerGroup,
|
512
523
|
}: {
|
513
|
-
|
524
|
+
table: MRT_TableInstance<D>;
|
514
525
|
footerGroup: MRT_HeaderGroup<D>;
|
515
526
|
}) => TableRowProps);
|
516
527
|
muiTableHeadCellColumnActionsButtonProps?:
|
517
528
|
| IconButtonProps
|
518
529
|
| (({
|
519
|
-
|
530
|
+
table,
|
520
531
|
column,
|
521
532
|
}: {
|
522
|
-
|
533
|
+
table: MRT_TableInstance<D>;
|
523
534
|
column: MRT_Column<D>;
|
524
535
|
}) => IconButtonProps);
|
525
536
|
muiTableHeadCellFilterTextFieldProps?:
|
526
537
|
| TextFieldProps
|
527
538
|
| (({
|
528
|
-
|
539
|
+
table,
|
529
540
|
column,
|
530
541
|
}: {
|
531
|
-
|
542
|
+
table: MRT_TableInstance<D>;
|
532
543
|
column: MRT_Column<D>;
|
533
544
|
}) => TextFieldProps);
|
534
545
|
muiTableHeadCellProps?:
|
535
546
|
| TableCellProps
|
536
547
|
| (({
|
537
|
-
|
548
|
+
table,
|
538
549
|
column,
|
539
550
|
}: {
|
540
|
-
|
551
|
+
table: MRT_TableInstance<D>;
|
541
552
|
column: MRT_Column<D>;
|
542
553
|
}) => TableCellProps);
|
543
554
|
muiTableHeadProps?:
|
544
555
|
| TableHeadProps
|
545
|
-
| (({
|
556
|
+
| (({ table }: { table: MRT_TableInstance<D> }) => TableHeadProps);
|
546
557
|
muiTableHeadRowProps?:
|
547
558
|
| TableRowProps
|
548
559
|
| (({
|
549
|
-
|
560
|
+
table,
|
550
561
|
headerGroup,
|
551
562
|
}: {
|
552
|
-
|
563
|
+
table: MRT_TableInstance<D>;
|
553
564
|
headerGroup: MRT_HeaderGroup<D>;
|
554
565
|
}) => TableRowProps);
|
555
566
|
muiTablePaginationProps?:
|
556
567
|
| Partial<TablePaginationProps>
|
557
568
|
| (({
|
558
|
-
|
569
|
+
table,
|
559
570
|
}: {
|
560
|
-
|
571
|
+
table: MRT_TableInstance<D>;
|
561
572
|
}) => Partial<TablePaginationProps>);
|
562
573
|
muiTablePaperProps?:
|
563
574
|
| PaperProps
|
564
|
-
| (({
|
575
|
+
| (({ table }: { table: MRT_TableInstance<D> }) => PaperProps);
|
565
576
|
muiTableProps?:
|
566
577
|
| TableProps
|
567
|
-
| (({
|
578
|
+
| (({ table }: { table: MRT_TableInstance<D> }) => TableProps);
|
568
579
|
muiTableToolbarAlertBannerProps?:
|
569
580
|
| AlertProps
|
570
|
-
| (({
|
581
|
+
| (({ table }: { table: MRT_TableInstance<D> }) => AlertProps);
|
571
582
|
muiTableToolbarBottomProps?:
|
572
583
|
| ToolbarProps
|
573
|
-
| (({
|
584
|
+
| (({ table }: { table: MRT_TableInstance<D> }) => ToolbarProps);
|
574
585
|
muiTableToolbarTopProps?:
|
575
586
|
| ToolbarProps
|
576
|
-
| (({
|
587
|
+
| (({ table }: { table: MRT_TableInstance<D> }) => ToolbarProps);
|
577
588
|
onCellEditBlur?: ({
|
578
589
|
cell,
|
579
590
|
event,
|
580
|
-
|
591
|
+
table,
|
581
592
|
}: {
|
582
593
|
event: FocusEvent<HTMLInputElement>;
|
583
594
|
cell: MRT_Cell<D>;
|
584
|
-
|
595
|
+
table: MRT_TableInstance<D>;
|
585
596
|
}) => void;
|
586
597
|
onCellEditChange?: ({
|
587
598
|
cell,
|
588
599
|
event,
|
589
|
-
|
600
|
+
table,
|
590
601
|
}: {
|
591
602
|
event: ChangeEvent<HTMLInputElement>;
|
592
603
|
cell: MRT_Cell<D>;
|
593
|
-
|
604
|
+
table: MRT_TableInstance<D>;
|
594
605
|
}) => void;
|
595
606
|
onCurrentEditingCellChange?: OnChangeFn<MRT_Cell>;
|
596
607
|
onCurrentEditingRowChange?: OnChangeFn<MRT_Row>;
|
597
|
-
onCurrentFilterFnsChange?: OnChangeFn<{ [key: string]:
|
598
|
-
onCurrentGlobalFilterFnChange?: OnChangeFn<
|
608
|
+
onCurrentFilterFnsChange?: OnChangeFn<{ [key: string]: MRT_FilterOption }>;
|
609
|
+
onCurrentGlobalFilterFnChange?: OnChangeFn<MRT_FilterOption>;
|
599
610
|
onEditRowSubmit?: ({
|
600
611
|
row,
|
601
|
-
|
612
|
+
table,
|
602
613
|
}: {
|
603
614
|
row: MRT_Row<D>;
|
604
|
-
|
615
|
+
table: MRT_TableInstance<D>;
|
605
616
|
}) => Promise<void> | void;
|
606
617
|
onDensityChange?: OnChangeFn<boolean>;
|
607
618
|
onIsFullScreenChange?: OnChangeFn<boolean>;
|
@@ -614,60 +625,60 @@ export type MaterialReactTableProps<D extends Record<string, any> = {}> =
|
|
614
625
|
positionToolbarAlertBanner?: 'bottom' | 'top';
|
615
626
|
renderDetailPanel?: ({
|
616
627
|
row,
|
617
|
-
|
628
|
+
table,
|
618
629
|
}: {
|
619
630
|
row: MRT_Row<D>;
|
620
|
-
|
631
|
+
table: MRT_TableInstance<D>;
|
621
632
|
}) => ReactNode;
|
622
633
|
renderRowActionMenuItems?: ({
|
623
634
|
closeMenu,
|
624
635
|
row,
|
625
|
-
|
636
|
+
table,
|
626
637
|
}: {
|
627
638
|
closeMenu: () => void;
|
628
639
|
row: MRT_Row<D>;
|
629
|
-
|
640
|
+
table: MRT_TableInstance<D>;
|
630
641
|
}) => ReactNode[];
|
631
642
|
renderRowActions?: ({
|
632
643
|
row,
|
633
|
-
|
644
|
+
table,
|
634
645
|
}: {
|
635
646
|
row: MRT_Row<D>;
|
636
|
-
|
647
|
+
table: MRT_TableInstance<D>;
|
637
648
|
}) => ReactNode;
|
638
649
|
renderToolbarBottomCustomActions?: ({
|
639
|
-
|
650
|
+
table,
|
640
651
|
}: {
|
641
|
-
|
652
|
+
table: MRT_TableInstance<D>;
|
642
653
|
}) => ReactNode;
|
643
654
|
renderToolbarTopCustomActions?: ({
|
644
|
-
|
655
|
+
table,
|
645
656
|
}: {
|
646
|
-
|
657
|
+
table: MRT_TableInstance<D>;
|
647
658
|
}) => ReactNode;
|
648
659
|
renderToolbarInternalActions?: ({
|
649
|
-
|
660
|
+
table,
|
650
661
|
MRT_ToggleGlobalFilterButton,
|
651
662
|
MRT_ToggleFiltersButton,
|
652
663
|
MRT_ShowHideColumnsButton,
|
653
664
|
MRT_ToggleDensePaddingButton,
|
654
665
|
MRT_FullScreenToggleButton,
|
655
666
|
}: {
|
656
|
-
|
667
|
+
table: MRT_TableInstance<D>;
|
657
668
|
MRT_ToggleGlobalFilterButton: FC<
|
658
|
-
IconButtonProps & {
|
669
|
+
IconButtonProps & { table: MRT_TableInstance<D> }
|
659
670
|
>;
|
660
671
|
MRT_ToggleFiltersButton: FC<
|
661
|
-
IconButtonProps & {
|
672
|
+
IconButtonProps & { table: MRT_TableInstance<D> }
|
662
673
|
>;
|
663
674
|
MRT_ShowHideColumnsButton: FC<
|
664
|
-
IconButtonProps & {
|
675
|
+
IconButtonProps & { table: MRT_TableInstance<D> }
|
665
676
|
>;
|
666
677
|
MRT_ToggleDensePaddingButton: FC<
|
667
|
-
IconButtonProps & {
|
678
|
+
IconButtonProps & { table: MRT_TableInstance<D> }
|
668
679
|
>;
|
669
680
|
MRT_FullScreenToggleButton: FC<
|
670
|
-
IconButtonProps & {
|
681
|
+
IconButtonProps & { table: MRT_TableInstance<D> }
|
671
682
|
>;
|
672
683
|
}) => ReactNode;
|
673
684
|
rowCount?: number;
|