material-react-table 0.17.1 → 0.19.0-alpha.1

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (110) hide show
  1. package/dist/MaterialReactTable.d.ts +170 -230
  2. package/dist/body/MRT_TableBody.d.ts +1 -1
  3. package/dist/body/MRT_TableBodyCell.d.ts +1 -1
  4. package/dist/body/MRT_TableBodyRow.d.ts +1 -1
  5. package/dist/body/MRT_TableDetailPanel.d.ts +1 -1
  6. package/dist/buttons/MRT_ColumnPinningButtons.d.ts +1 -1
  7. package/dist/buttons/MRT_CopyButton.d.ts +1 -1
  8. package/dist/buttons/MRT_EditActionButtons.d.ts +1 -1
  9. package/dist/buttons/MRT_ExpandAllButton.d.ts +1 -1
  10. package/dist/buttons/MRT_ExpandButton.d.ts +1 -1
  11. package/dist/buttons/MRT_FullScreenToggleButton.d.ts +1 -1
  12. package/dist/buttons/MRT_GrabHandleButton.d.ts +1 -1
  13. package/dist/buttons/MRT_ShowHideColumnsButton.d.ts +1 -1
  14. package/dist/buttons/MRT_ToggleDensePaddingButton.d.ts +1 -1
  15. package/dist/buttons/MRT_ToggleFiltersButton.d.ts +1 -1
  16. package/dist/buttons/MRT_ToggleGlobalFilterButton.d.ts +1 -1
  17. package/dist/buttons/MRT_ToggleRowActionMenuButton.d.ts +1 -1
  18. package/dist/filtersFns.d.ts +31 -23
  19. package/dist/footer/MRT_TableFooter.d.ts +1 -1
  20. package/dist/footer/MRT_TableFooterCell.d.ts +1 -1
  21. package/dist/footer/MRT_TableFooterRow.d.ts +1 -1
  22. package/dist/head/MRT_DraggableTableHeadCell.d.ts +1 -1
  23. package/dist/head/MRT_TableHead.d.ts +1 -1
  24. package/dist/head/MRT_TableHeadCell.d.ts +1 -1
  25. package/dist/head/MRT_TableHeadCellColumnActionsButton.d.ts +1 -1
  26. package/dist/head/MRT_TableHeadCellFilterContainer.d.ts +1 -1
  27. package/dist/head/MRT_TableHeadCellFilterLabel.d.ts +1 -1
  28. package/dist/head/MRT_TableHeadCellResizeHandle.d.ts +1 -1
  29. package/dist/head/MRT_TableHeadCellSortLabel.d.ts +1 -1
  30. package/dist/head/MRT_TableHeadRow.d.ts +1 -1
  31. package/dist/inputs/MRT_EditCellTextField.d.ts +1 -1
  32. package/dist/inputs/MRT_FilterRangeFields.d.ts +1 -1
  33. package/dist/inputs/MRT_FilterTextField.d.ts +1 -1
  34. package/dist/inputs/MRT_GlobalFilterTextField.d.ts +1 -1
  35. package/dist/inputs/MRT_SelectCheckbox.d.ts +1 -1
  36. package/dist/material-react-table.cjs.development.js +791 -915
  37. package/dist/material-react-table.cjs.development.js.map +1 -1
  38. package/dist/material-react-table.cjs.production.min.js +1 -1
  39. package/dist/material-react-table.cjs.production.min.js.map +1 -1
  40. package/dist/material-react-table.esm.js +793 -917
  41. package/dist/material-react-table.esm.js.map +1 -1
  42. package/dist/menus/MRT_ColumnActionMenu.d.ts +1 -1
  43. package/dist/menus/MRT_FilterOptionMenu.d.ts +1 -1
  44. package/dist/menus/MRT_RowActionMenu.d.ts +1 -1
  45. package/dist/menus/MRT_ShowHideColumnsMenu.d.ts +1 -1
  46. package/dist/menus/MRT_ShowHideColumnsMenuItems.d.ts +1 -1
  47. package/dist/sortingFns.d.ts +10 -3
  48. package/dist/table/MRT_Table.d.ts +1 -1
  49. package/dist/table/MRT_TableContainer.d.ts +1 -1
  50. package/dist/table/MRT_TablePaper.d.ts +1 -1
  51. package/dist/toolbar/MRT_LinearProgressBar.d.ts +1 -1
  52. package/dist/toolbar/MRT_TablePagination.d.ts +1 -1
  53. package/dist/toolbar/MRT_ToolbarAlertBanner.d.ts +1 -1
  54. package/dist/toolbar/MRT_ToolbarBottom.d.ts +1 -1
  55. package/dist/toolbar/MRT_ToolbarInternalButtons.d.ts +1 -1
  56. package/dist/toolbar/MRT_ToolbarTop.d.ts +1 -1
  57. package/dist/utils.d.ts +10 -16
  58. package/package.json +4 -4
  59. package/src/MaterialReactTable.tsx +168 -334
  60. package/src/body/MRT_TableBody.tsx +5 -6
  61. package/src/body/MRT_TableBodyCell.tsx +19 -36
  62. package/src/body/MRT_TableBodyRow.tsx +9 -12
  63. package/src/body/MRT_TableDetailPanel.tsx +8 -12
  64. package/src/buttons/MRT_ColumnPinningButtons.tsx +3 -3
  65. package/src/buttons/MRT_CopyButton.tsx +5 -7
  66. package/src/buttons/MRT_EditActionButtons.tsx +4 -5
  67. package/src/buttons/MRT_ExpandAllButton.tsx +4 -5
  68. package/src/buttons/MRT_ExpandButton.tsx +6 -9
  69. package/src/buttons/MRT_FullScreenToggleButton.tsx +5 -15
  70. package/src/buttons/MRT_GrabHandleButton.tsx +39 -41
  71. package/src/buttons/MRT_ShowHideColumnsButton.tsx +4 -4
  72. package/src/buttons/MRT_ToggleDensePaddingButton.tsx +5 -15
  73. package/src/buttons/MRT_ToggleFiltersButton.tsx +5 -12
  74. package/src/buttons/MRT_ToggleGlobalFilterButton.tsx +6 -16
  75. package/src/buttons/MRT_ToggleRowActionMenuButton.tsx +6 -6
  76. package/src/filtersFns.ts +24 -23
  77. package/src/footer/MRT_TableFooter.tsx +5 -6
  78. package/src/footer/MRT_TableFooterCell.tsx +8 -11
  79. package/src/footer/MRT_TableFooterRow.tsx +5 -9
  80. package/src/head/MRT_DraggableTableHeadCell.tsx +4 -6
  81. package/src/head/MRT_TableHead.tsx +5 -5
  82. package/src/head/MRT_TableHeadCell.tsx +18 -29
  83. package/src/head/MRT_TableHeadCellColumnActionsButton.tsx +6 -8
  84. package/src/head/MRT_TableHeadCellFilterContainer.tsx +5 -7
  85. package/src/head/MRT_TableHeadCellFilterLabel.tsx +13 -19
  86. package/src/head/MRT_TableHeadCellResizeHandle.tsx +12 -11
  87. package/src/head/MRT_TableHeadCellSortLabel.tsx +3 -5
  88. package/src/head/MRT_TableHeadRow.tsx +6 -6
  89. package/src/inputs/MRT_EditCellTextField.tsx +13 -15
  90. package/src/inputs/MRT_FilterRangeFields.tsx +4 -4
  91. package/src/inputs/MRT_FilterTextField.tsx +27 -64
  92. package/src/inputs/MRT_GlobalFilterTextField.tsx +5 -10
  93. package/src/inputs/MRT_SelectCheckbox.tsx +9 -36
  94. package/src/menus/MRT_ColumnActionMenu.tsx +5 -9
  95. package/src/menus/MRT_FilterOptionMenu.tsx +16 -48
  96. package/src/menus/MRT_RowActionMenu.tsx +4 -5
  97. package/src/menus/MRT_ShowHideColumnsMenu.tsx +8 -9
  98. package/src/menus/MRT_ShowHideColumnsMenuItems.tsx +11 -10
  99. package/src/sortingFns.ts +11 -3
  100. package/src/table/MRT_Table.tsx +7 -11
  101. package/src/table/MRT_TableContainer.tsx +5 -6
  102. package/src/table/MRT_TablePaper.tsx +7 -8
  103. package/src/table/MRT_TableRoot.tsx +123 -156
  104. package/src/toolbar/MRT_LinearProgressBar.tsx +4 -5
  105. package/src/toolbar/MRT_TablePagination.tsx +7 -9
  106. package/src/toolbar/MRT_ToolbarAlertBanner.tsx +15 -11
  107. package/src/toolbar/MRT_ToolbarBottom.tsx +8 -9
  108. package/src/toolbar/MRT_ToolbarInternalButtons.tsx +10 -10
  109. package/src/toolbar/MRT_ToolbarTop.tsx +11 -11
  110. package/src/utils.ts +56 -50
@@ -3,7 +3,6 @@ import React, {
3
3
  Dispatch,
4
4
  FC,
5
5
  FocusEvent,
6
- MouseEvent,
7
6
  ReactNode,
8
7
  SetStateAction,
9
8
  } from 'react';
@@ -30,32 +29,26 @@ import {
30
29
  Cell,
31
30
  Column,
32
31
  ColumnDef,
33
- ColumnOrderState,
34
- ColumnPinningState,
35
32
  FilterFn,
36
- FilterFnOption,
37
33
  Header,
38
34
  HeaderGroup,
39
35
  OnChangeFn,
40
- Overwrite,
41
- ReactTableGenerics,
42
36
  Row,
43
37
  SortingFn,
44
- SortingFnOption,
45
- TableGenerics,
46
- TableInstance,
38
+ Table,
39
+ TableOptions,
47
40
  TableState,
48
- UseTableInstanceOptions,
49
- VisibilityState,
50
41
  } from '@tanstack/react-table';
51
42
  import { Options as VirtualizerOptions } from 'react-virtual';
52
43
  import { MRT_Localization, MRT_DefaultLocalization_EN } from './localization';
53
44
  import { MRT_Default_Icons, MRT_Icons } from './icons';
54
45
  import { MRT_TableRoot } from './table/MRT_TableRoot';
46
+ import { MRT_FilterFns } from './filtersFns';
47
+ import { MRT_SortingFns } from './sortingFns';
55
48
 
56
49
  export type MRT_TableOptions<D extends Record<string, any> = {}> = Partial<
57
50
  Omit<
58
- UseTableInstanceOptions<ReactTableGenerics>,
51
+ TableOptions<D>,
59
52
  'columns' | 'data' | 'initialState' | 'state' | 'expandRowsFn'
60
53
  >
61
54
  > & {
@@ -73,14 +66,7 @@ export interface MRT_RowModel<D extends Record<string, any> = {}> {
73
66
  }
74
67
 
75
68
  export type MRT_TableInstance<D extends Record<string, any> = {}> = Omit<
76
- TableInstance<
77
- Overwrite<
78
- Partial<TableGenerics>,
79
- {
80
- Row: D;
81
- }
82
- >
83
- >,
69
+ Table<D>,
84
70
  | 'getAllColumns'
85
71
  | 'getAllFlatColumns'
86
72
  | 'getAllLeafColumns'
@@ -122,12 +108,13 @@ export type MRT_TableInstance<D extends Record<string, any> = {}> = Omit<
122
108
  setCurrentEditingRow: Dispatch<SetStateAction<MRT_Row | null>>;
123
109
  setCurrentFilterFns: Dispatch<
124
110
  SetStateAction<{
125
- [key: string]: MRT_FilterFn;
111
+ [key: string]: MRT_FilterOption;
126
112
  }>
127
113
  >;
128
- setCurrentGlobalFilterFn: Dispatch<SetStateAction<MRT_FilterFn>>;
114
+ setCurrentGlobalFilterFn: Dispatch<SetStateAction<MRT_FilterOption>>;
129
115
  setDensity: Dispatch<SetStateAction<'comfortable' | 'compact' | 'spacious'>>;
130
116
  setIsFullScreen: Dispatch<SetStateAction<boolean>>;
117
+ setShowAlertBanner: Dispatch<SetStateAction<boolean>>;
131
118
  setShowFilters: Dispatch<SetStateAction<boolean>>;
132
119
  setShowGlobalFilter: Dispatch<SetStateAction<boolean>>;
133
120
  };
@@ -135,11 +122,12 @@ export type MRT_TableInstance<D extends Record<string, any> = {}> = Omit<
135
122
  export type MRT_TableState<D extends Record<string, any> = {}> = TableState & {
136
123
  currentEditingCell: MRT_Cell<D> | null;
137
124
  currentEditingRow: MRT_Row<D> | null;
138
- currentFilterFns: Record<string, string | Function>;
139
- currentGlobalFilterFn: Record<string, string | Function>;
125
+ currentFilterFns: Record<string, MRT_FilterOption>;
126
+ currentGlobalFilterFn: Record<string, MRT_FilterOption>;
140
127
  density: 'comfortable' | 'compact' | 'spacious';
141
128
  isLoading: boolean;
142
129
  isFullScreen: boolean;
130
+ showAlertBanner: boolean;
143
131
  showFilters: boolean;
144
132
  showGlobalFilter: boolean;
145
133
  showProgressBars: boolean;
@@ -149,187 +137,204 @@ export type MRT_TableState<D extends Record<string, any> = {}> = TableState & {
149
137
  export type MRT_ColumnDef<D extends Record<string, any> = {}> = Omit<
150
138
  ColumnDef<D>,
151
139
  | 'accessorFn'
140
+ | 'accessorKey'
152
141
  | 'aggregatedCell'
153
142
  | 'cell'
154
143
  | 'columns'
155
144
  | 'filterFn'
156
145
  | 'footer'
157
146
  | 'header'
147
+ | 'id'
158
148
  | 'sortingFn'
159
149
  > & {
160
150
  AggregatedCell?: ({
161
151
  cell,
162
- instance,
152
+ table,
163
153
  }: {
164
154
  cell: MRT_Cell<D>;
165
- instance: MRT_TableInstance<D>;
155
+ table: MRT_TableInstance<D>;
166
156
  }) => ReactNode;
167
157
  Cell?: ({
168
158
  cell,
169
- instance,
159
+ table,
170
160
  }: {
171
161
  cell: MRT_Cell<D>;
172
- instance: MRT_TableInstance<D>;
162
+ table: MRT_TableInstance<D>;
173
163
  }) => ReactNode;
174
164
  Edit?: ({
175
165
  cell,
176
- instance,
166
+ table,
177
167
  }: {
178
168
  cell: MRT_Cell<D>;
179
- instance: MRT_TableInstance<D>;
169
+ table: MRT_TableInstance<D>;
180
170
  }) => ReactNode;
181
171
  Filter?: ({
182
172
  header,
183
- instance,
173
+ table,
184
174
  }: {
185
175
  header: MRT_Header<D>;
186
- instance: MRT_TableInstance<D>;
176
+ table: MRT_TableInstance<D>;
187
177
  }) => ReactNode;
188
178
  Footer?:
189
179
  | ReactNode
190
180
  | (({
191
181
  footer,
192
- instance,
182
+ table,
193
183
  }: {
194
184
  footer: MRT_Header<D>;
195
- instance: MRT_TableInstance<D>;
185
+ table: MRT_TableInstance<D>;
196
186
  }) => ReactNode);
197
187
  Header?:
198
188
  | ReactNode
199
189
  | (({
200
190
  header,
201
- instance,
191
+ table,
202
192
  }: {
203
193
  header: MRT_Header<D>;
204
- instance: MRT_TableInstance<D>;
194
+ table: MRT_TableInstance<D>;
205
195
  }) => ReactNode);
196
+ /**
197
+ * Either an `accessorKey` or a combination of an `accessorFn` and `id` are required for a data column definition.
198
+ * Specify a function here to point to the correct property in the data object.
199
+ *
200
+ * @example accessorFn: (row) => row.username
201
+ */
206
202
  accessorFn?: (row: D) => any;
203
+ /**
204
+ * Either an `accessorKey` or a combination of an `accessorFn` and `id` are required for a data column definition.
205
+ * Specify which key in the row this column should use to access the correct data.
206
+ *
207
+ * @example accessorKey: 'username'
208
+ */
209
+ accessorKey?: keyof D;
210
+ /**
211
+ * Specify what type of column this is. Either `data`, `display`, or `group`. Defaults to `data`.
212
+ * Leave this blank if you are just creating a normal data column.
213
+ *
214
+ * @default 'data'
215
+ *
216
+ * @example columnDefType: 'display'
217
+ */
218
+ columnDefType?: 'data' | 'display' | 'group';
207
219
  columns?: MRT_ColumnDef<D>[];
208
220
  enableClickToCopy?: boolean;
209
221
  enableColumnActions?: boolean;
210
222
  enableColumnFilterChangeMode?: boolean;
211
223
  enableColumnOrdering?: boolean;
212
224
  enableEditing?: boolean;
213
- enabledColumnFilterOptions?: (MRT_FILTER_OPTION | string)[] | null;
214
- filterFn?: MRT_FilterFn;
225
+ enabledColumnFilterOptions?: MRT_FilterOption[] | null;
226
+ filterFn?: MRT_FilterFn<D>;
215
227
  filterSelectOptions?: (string | { text: string; value: string })[];
216
228
  footer?: string;
217
229
  header: string;
218
- id: keyof D | string;
230
+ /**
231
+ * Either an `accessorKey` or a combination of an `accessorFn` and `id` are required for a data column definition.
232
+ * If you have also specified an `accessorFn`, MRT still needs to have a valid `id` to be able to identify the column uniquely.
233
+ * `id` defaults to the `accessorKey` or `header` if not specified.
234
+ *
235
+ * @default gets set to the same value as `accessorKey` by default
236
+ */
237
+ id?: string;
219
238
  muiTableBodyCellCopyButtonProps?:
220
239
  | ButtonProps
221
240
  | (({
222
- instance,
241
+ table,
223
242
  cell,
224
243
  }: {
225
- instance: MRT_TableInstance<D>;
244
+ table: MRT_TableInstance<D>;
226
245
  cell: MRT_Cell<D>;
227
246
  }) => ButtonProps);
228
247
  muiTableBodyCellEditTextFieldProps?:
229
248
  | TextFieldProps
230
249
  | (({
231
- instance,
250
+ table,
232
251
  cell,
233
252
  }: {
234
- instance: MRT_TableInstance<D>;
253
+ table: MRT_TableInstance<D>;
235
254
  cell: MRT_Cell<D>;
236
255
  }) => TextFieldProps);
237
256
  muiTableBodyCellProps?:
238
257
  | TableCellProps
239
258
  | (({
240
- instance,
259
+ table,
241
260
  cell,
242
261
  }: {
243
- instance: MRT_TableInstance<D>;
262
+ table: MRT_TableInstance<D>;
244
263
  cell: MRT_Cell<D>;
245
264
  }) => TableCellProps);
246
265
  muiTableFooterCellProps?:
247
266
  | TableCellProps
248
267
  | (({
249
- instance,
268
+ table,
250
269
  column,
251
270
  }: {
252
- instance: MRT_TableInstance<D>;
271
+ table: MRT_TableInstance<D>;
253
272
  column: MRT_Column<D>;
254
273
  }) => TableCellProps);
255
274
  muiTableHeadCellColumnActionsButtonProps?:
256
275
  | IconButtonProps
257
276
  | (({
258
- instance,
277
+ table,
259
278
  column,
260
279
  }: {
261
- instance: MRT_TableInstance<D>;
280
+ table: MRT_TableInstance<D>;
262
281
  column: MRT_Column<D>;
263
282
  }) => IconButtonProps);
264
283
  muiTableHeadCellFilterTextFieldProps?:
265
284
  | TextFieldProps
266
285
  | (({
267
- instance,
286
+ table,
268
287
  column,
269
288
  }: {
270
- instance: MRT_TableInstance<D>;
289
+ table: MRT_TableInstance<D>;
271
290
  column: MRT_Column<D>;
272
291
  }) => TextFieldProps);
273
292
  muiTableHeadCellProps?:
274
293
  | TableCellProps
275
294
  | (({
276
- instance,
295
+ table,
277
296
  column,
278
297
  }: {
279
- instance: MRT_TableInstance<D>;
298
+ table: MRT_TableInstance<D>;
280
299
  column: MRT_Column<D>;
281
300
  }) => TableCellProps);
282
301
  onCellEditBlur?: ({
283
302
  cell,
284
303
  event,
285
- instance,
304
+ table,
286
305
  }: {
287
306
  event: FocusEvent<HTMLInputElement>;
288
307
  cell: MRT_Cell<D>;
289
- instance: MRT_TableInstance<D>;
308
+ table: MRT_TableInstance<D>;
290
309
  }) => void;
291
- onCellEditChanged?: ({
310
+ onCellEditChange?: ({
292
311
  cell,
293
312
  event,
294
- instance,
313
+ table,
295
314
  }: {
296
315
  event: ChangeEvent<HTMLInputElement>;
297
316
  cell: MRT_Cell<D>;
298
- instance: MRT_TableInstance<D>;
299
- }) => void;
300
- onColumnFilterValueChanged?: ({
301
- column,
302
- event,
303
- filterValue,
304
- instance,
305
- }: {
306
- column: MRT_Column<D>;
307
- event: ChangeEvent<HTMLInputElement>;
308
- filterValue: any;
309
- instance: MRT_TableInstance<D>;
310
- }) => void;
311
- onColumnFilterValueChangedDebounced?: ({
312
- column,
313
- event,
314
- filterValue,
315
- instance,
316
- }: {
317
- column: MRT_Column<D>;
318
- event: ChangeEvent<HTMLInputElement>;
319
- filterValue: any;
320
- instance: MRT_TableInstance<D>;
317
+ table: MRT_TableInstance<D>;
321
318
  }) => void;
322
319
  sortingFn?: MRT_SortingFn;
323
320
  };
324
321
 
322
+ export type MRT_DefinedColumnDef<D extends Record<string, any> = {}> = Omit<
323
+ MRT_ColumnDef<D>,
324
+ 'id'
325
+ > & {
326
+ id: string;
327
+ };
328
+
325
329
  export type MRT_Column<D extends Record<string, any> = {}> = Omit<
326
330
  Column<D>,
327
- 'header' | 'footer' | 'columns' | 'columnDef'
331
+ 'header' | 'footer' | 'columns' | 'columnDef' | 'filterFn'
328
332
  > & {
333
+ columnDef: MRT_DefinedColumnDef<D>;
329
334
  columns?: MRT_Column<D>[];
330
- columnDef: MRT_ColumnDef<D>;
331
- header: string;
335
+ filterFn?: MRT_FilterFn<D>;
332
336
  footer: string;
337
+ header: string;
333
338
  };
334
339
 
335
340
  export type MRT_Header<D extends Record<string, any> = {}> = Omit<
@@ -365,27 +370,17 @@ export type MRT_Cell<D extends Record<string, any> = {}> = Omit<
365
370
  row: MRT_Row<D>;
366
371
  };
367
372
 
368
- export type MRT_SortingOption = SortingFnOption<TableGenerics> | 'fuzzy';
373
+ export type MRT_SortingOption = keyof typeof MRT_SortingFns;
369
374
 
370
- export type MRT_SortingFn = SortingFn<TableGenerics> | MRT_SortingOption;
375
+ export type MRT_SortingFn<D extends Record<string, any> = {}> =
376
+ | SortingFn<D>
377
+ | MRT_SortingOption;
371
378
 
372
- export type MRT_FILTER_OPTION =
373
- | 'between'
374
- | 'contains'
375
- | 'empty'
376
- | 'endsWith'
377
- | 'equals'
378
- | 'fuzzy'
379
- | 'greaterThan'
380
- | 'greaterThanOrEqual'
381
- | 'lessThan'
382
- | 'lessThanOrEqual'
383
- | 'notEmpty'
384
- | 'notEquals'
385
- | 'startsWith'
386
- | FilterFnOption<TableGenerics>;
379
+ export type MRT_FilterOption = keyof typeof MRT_FilterFns;
387
380
 
388
- export type MRT_FilterFn = FilterFn<TableGenerics> | MRT_FILTER_OPTION;
381
+ export type MRT_FilterFn<D extends Record<string, any> = {}> =
382
+ | FilterFn<D>
383
+ | MRT_FilterOption;
389
384
 
390
385
  export type MaterialReactTableProps<D extends Record<string, any> = {}> =
391
386
  MRT_TableOptions<D> & {
@@ -411,436 +406,275 @@ export type MaterialReactTableProps<D extends Record<string, any> = {}> =
411
406
  enableToolbarBottom?: boolean;
412
407
  enableToolbarInternalActions?: boolean;
413
408
  enableToolbarTop?: boolean;
414
- enabledColumnFilterOptions?: (MRT_FILTER_OPTION | string)[] | null;
415
- enabledGlobalFilterOptions?: (MRT_FILTER_OPTION | string)[] | null;
409
+ enabledColumnFilterOptions?: (MRT_FilterOption | string)[] | null;
410
+ enabledGlobalFilterOptions?: (MRT_FilterOption | string)[] | null;
416
411
  icons?: Partial<MRT_Icons>;
417
412
  localization?: Partial<MRT_Localization>;
418
413
  muiExpandAllButtonProps?:
419
414
  | IconButtonProps
420
- | (({ instance }: { instance: MRT_TableInstance<D> }) => IconButtonProps);
415
+ | (({ table }: { table: MRT_TableInstance<D> }) => IconButtonProps);
421
416
  muiExpandButtonProps?:
422
417
  | IconButtonProps
423
418
  | (({
424
- instance,
419
+ table,
425
420
  }: {
426
- instance: MRT_TableInstance<D>;
421
+ table: MRT_TableInstance<D>;
427
422
  row: MRT_Row<D>;
428
423
  }) => IconButtonProps);
429
424
  muiLinearProgressProps?:
430
425
  | LinearProgressProps
431
- | (({
432
- instance,
433
- }: {
434
- instance: MRT_TableInstance<D>;
435
- }) => LinearProgressProps);
426
+ | (({ table }: { table: MRT_TableInstance<D> }) => LinearProgressProps);
436
427
  muiSearchTextFieldProps?:
437
428
  | TextFieldProps
438
- | (({ instance }: { instance: MRT_TableInstance<D> }) => TextFieldProps);
429
+ | (({ table }: { table: MRT_TableInstance<D> }) => TextFieldProps);
439
430
  muiSelectAllCheckboxProps?:
440
431
  | CheckboxProps
441
- | (({ instance }: { instance: MRT_TableInstance<D> }) => CheckboxProps);
432
+ | (({ table }: { table: MRT_TableInstance<D> }) => CheckboxProps);
442
433
  muiSelectCheckboxProps?:
443
434
  | CheckboxProps
444
435
  | (({
445
- instance,
436
+ table,
446
437
  row,
447
438
  }: {
448
- instance: MRT_TableInstance<D>;
439
+ table: MRT_TableInstance<D>;
449
440
  row: MRT_Row<D>;
450
441
  }) => CheckboxProps);
451
442
  muiTableBodyCellCopyButtonProps?:
452
443
  | ButtonProps
453
444
  | (({
454
- instance,
445
+ table,
455
446
  cell,
456
447
  }: {
457
- instance: MRT_TableInstance<D>;
448
+ table: MRT_TableInstance<D>;
458
449
  cell: MRT_Cell<D>;
459
450
  }) => ButtonProps);
460
451
  muiTableBodyCellEditTextFieldProps?:
461
452
  | TextFieldProps
462
453
  | (({
463
- instance,
454
+ table,
464
455
  cell,
465
456
  }: {
466
- instance: MRT_TableInstance<D>;
457
+ table: MRT_TableInstance<D>;
467
458
  cell: MRT_Cell<D>;
468
459
  }) => TextFieldProps);
469
460
  muiTableBodyCellProps?:
470
461
  | TableCellProps
471
462
  | (({
472
- instance,
463
+ table,
473
464
  cell,
474
465
  }: {
475
- instance: MRT_TableInstance<D>;
466
+ table: MRT_TableInstance<D>;
476
467
  cell: MRT_Cell<D>;
477
468
  }) => TableCellProps);
478
469
  muiTableBodyCellSkeletonProps?:
479
470
  | SkeletonProps
480
471
  | (({
481
- instance,
472
+ table,
482
473
  cell,
483
474
  }: {
484
- instance: MRT_TableInstance<D>;
475
+ table: MRT_TableInstance<D>;
485
476
  cell: MRT_Cell<D>;
486
477
  }) => SkeletonProps);
487
478
  muiTableBodyProps?:
488
479
  | TableBodyProps
489
- | (({ instance }: { instance: MRT_TableInstance<D> }) => TableBodyProps);
480
+ | (({ table }: { table: MRT_TableInstance<D> }) => TableBodyProps);
490
481
  muiTableBodyRowProps?:
491
482
  | TableRowProps
492
483
  | (({
493
- instance,
484
+ table,
494
485
  row,
495
486
  }: {
496
- instance: MRT_TableInstance<D>;
487
+ table: MRT_TableInstance<D>;
497
488
  row: MRT_Row<D>;
498
489
  }) => TableRowProps);
499
490
  muiTableContainerProps?:
500
491
  | TableContainerProps
501
- | (({
502
- instance,
503
- }: {
504
- instance: MRT_TableInstance<D>;
505
- }) => TableContainerProps);
492
+ | (({ table }: { table: MRT_TableInstance<D> }) => TableContainerProps);
506
493
  muiTableDetailPanelProps?:
507
494
  | TableCellProps
508
495
  | (({
509
- instance,
496
+ table,
510
497
  row,
511
498
  }: {
512
- instance: MRT_TableInstance<D>;
499
+ table: MRT_TableInstance<D>;
513
500
  row: MRT_Row<D>;
514
501
  }) => TableCellProps);
515
502
  muiTableFooterCellProps?:
516
503
  | TableCellProps
517
504
  | (({
518
- instance,
505
+ table,
519
506
  column,
520
507
  }: {
521
- instance: MRT_TableInstance<D>;
508
+ table: MRT_TableInstance<D>;
522
509
  column: MRT_Column<D>;
523
510
  }) => TableCellProps);
524
511
  muiTableFooterProps?:
525
512
  | TableFooterProps
526
- | (({
527
- instance,
528
- }: {
529
- instance: MRT_TableInstance<D>;
530
- }) => TableFooterProps);
513
+ | (({ table }: { table: MRT_TableInstance<D> }) => TableFooterProps);
531
514
  muiTableFooterRowProps?:
532
515
  | TableRowProps
533
516
  | (({
534
- instance,
517
+ table,
535
518
  footerGroup,
536
519
  }: {
537
- instance: MRT_TableInstance<D>;
520
+ table: MRT_TableInstance<D>;
538
521
  footerGroup: MRT_HeaderGroup<D>;
539
522
  }) => TableRowProps);
540
523
  muiTableHeadCellColumnActionsButtonProps?:
541
524
  | IconButtonProps
542
525
  | (({
543
- instance,
526
+ table,
544
527
  column,
545
528
  }: {
546
- instance: MRT_TableInstance<D>;
529
+ table: MRT_TableInstance<D>;
547
530
  column: MRT_Column<D>;
548
531
  }) => IconButtonProps);
549
532
  muiTableHeadCellFilterTextFieldProps?:
550
533
  | TextFieldProps
551
534
  | (({
552
- instance,
535
+ table,
553
536
  column,
554
537
  }: {
555
- instance: MRT_TableInstance<D>;
538
+ table: MRT_TableInstance<D>;
556
539
  column: MRT_Column<D>;
557
540
  }) => TextFieldProps);
558
541
  muiTableHeadCellProps?:
559
542
  | TableCellProps
560
543
  | (({
561
- instance,
544
+ table,
562
545
  column,
563
546
  }: {
564
- instance: MRT_TableInstance<D>;
547
+ table: MRT_TableInstance<D>;
565
548
  column: MRT_Column<D>;
566
549
  }) => TableCellProps);
567
550
  muiTableHeadProps?:
568
551
  | TableHeadProps
569
- | (({ instance }: { instance: MRT_TableInstance<D> }) => TableHeadProps);
552
+ | (({ table }: { table: MRT_TableInstance<D> }) => TableHeadProps);
570
553
  muiTableHeadRowProps?:
571
554
  | TableRowProps
572
555
  | (({
573
- instance,
556
+ table,
574
557
  headerGroup,
575
558
  }: {
576
- instance: MRT_TableInstance<D>;
559
+ table: MRT_TableInstance<D>;
577
560
  headerGroup: MRT_HeaderGroup<D>;
578
561
  }) => TableRowProps);
579
562
  muiTablePaginationProps?:
580
563
  | Partial<TablePaginationProps>
581
564
  | (({
582
- instance,
565
+ table,
583
566
  }: {
584
- instance: MRT_TableInstance<D>;
567
+ table: MRT_TableInstance<D>;
585
568
  }) => Partial<TablePaginationProps>);
586
569
  muiTablePaperProps?:
587
570
  | PaperProps
588
- | (({ instance }: { instance: MRT_TableInstance<D> }) => PaperProps);
571
+ | (({ table }: { table: MRT_TableInstance<D> }) => PaperProps);
589
572
  muiTableProps?:
590
573
  | TableProps
591
- | (({ instance }: { instance: MRT_TableInstance<D> }) => TableProps);
574
+ | (({ table }: { table: MRT_TableInstance<D> }) => TableProps);
592
575
  muiTableToolbarAlertBannerProps?:
593
576
  | AlertProps
594
- | (({ instance }: { instance: MRT_TableInstance<D> }) => AlertProps);
577
+ | (({ table }: { table: MRT_TableInstance<D> }) => AlertProps);
595
578
  muiTableToolbarBottomProps?:
596
579
  | ToolbarProps
597
- | (({ instance }: { instance: MRT_TableInstance<D> }) => ToolbarProps);
580
+ | (({ table }: { table: MRT_TableInstance<D> }) => ToolbarProps);
598
581
  muiTableToolbarTopProps?:
599
582
  | ToolbarProps
600
- | (({ instance }: { instance: MRT_TableInstance<D> }) => ToolbarProps);
601
- onCellClick?: ({
602
- cell,
603
- event,
604
- instance,
605
- }: {
606
- cell: MRT_Cell<D>;
607
- instance: MRT_TableInstance<D>;
608
- event: MouseEvent<HTMLTableCellElement>;
609
- }) => void;
583
+ | (({ table }: { table: MRT_TableInstance<D> }) => ToolbarProps);
610
584
  onCellEditBlur?: ({
611
585
  cell,
612
586
  event,
613
- instance,
587
+ table,
614
588
  }: {
615
589
  event: FocusEvent<HTMLInputElement>;
616
590
  cell: MRT_Cell<D>;
617
- instance: MRT_TableInstance<D>;
591
+ table: MRT_TableInstance<D>;
618
592
  }) => void;
619
- onCellEditChanged?: ({
593
+ onCellEditChange?: ({
620
594
  cell,
621
595
  event,
622
- instance,
596
+ table,
623
597
  }: {
624
598
  event: ChangeEvent<HTMLInputElement>;
625
599
  cell: MRT_Cell<D>;
626
- instance: MRT_TableInstance<D>;
627
- }) => void;
628
- onColumnFilterValueChanged?: ({
629
- column,
630
- event,
631
- filterValue,
632
- instance,
633
- }: {
634
- column: MRT_Column<D>;
635
- event: ChangeEvent<HTMLInputElement>;
636
- filterValue: any;
637
- instance: MRT_TableInstance<D>;
638
- }) => void;
639
- onColumnFilterValueChangedDebounced?: ({
640
- column,
641
- event,
642
- filterValue,
643
- instance,
644
- }: {
645
- column: MRT_Column<D>;
646
- event: ChangeEvent<HTMLInputElement>;
647
- filterValue: any;
648
- instance: MRT_TableInstance<D>;
649
- }) => void;
650
- onColumnOrderChanged?: ({
651
- columnOrder,
652
- instance,
653
- }: {
654
- columnOrder: ColumnOrderState;
655
- instance: MRT_TableInstance<D>;
656
- }) => void;
657
- onColumnPinningChanged?: ({
658
- columnPinning,
659
- instance,
660
- }: {
661
- columnPinning: ColumnPinningState;
662
- instance: MRT_TableInstance<D>;
663
- }) => void;
664
- onColumnVisibilityChanged?: ({
665
- column,
666
- columnVisibility,
667
- instance,
668
- }: {
669
- column: MRT_Column<D>;
670
- columnVisibility: VisibilityState;
671
- instance: MRT_TableInstance<D>;
600
+ table: MRT_TableInstance<D>;
672
601
  }) => void;
673
602
  onCurrentEditingCellChange?: OnChangeFn<MRT_Cell>;
674
603
  onCurrentEditingRowChange?: OnChangeFn<MRT_Row>;
675
- onCurrentFilterFnsChange?: OnChangeFn<{ [key: string]: MRT_FilterFn }>;
676
- onCurrentGlobalFilterFnChange?: OnChangeFn<MRT_FilterFn>;
677
- onDetailPanelClick?: ({
678
- event,
679
- row,
680
- instance,
681
- }: {
682
- event: MouseEvent<HTMLTableCellElement>;
683
- row: MRT_Row<D>;
684
- instance: MRT_TableInstance<D>;
685
- }) => void;
604
+ onCurrentFilterFnsChange?: OnChangeFn<{ [key: string]: MRT_FilterOption }>;
605
+ onCurrentGlobalFilterFnChange?: OnChangeFn<MRT_FilterOption>;
686
606
  onEditRowSubmit?: ({
687
607
  row,
688
- instance,
608
+ table,
689
609
  }: {
690
610
  row: MRT_Row<D>;
691
- instance: MRT_TableInstance<D>;
611
+ table: MRT_TableInstance<D>;
692
612
  }) => Promise<void> | void;
693
- onExpandChanged?: ({
694
- event,
695
- row,
696
- }: {
697
- event: MouseEvent<HTMLButtonElement>;
698
- row: MRT_Row<D>;
699
- instance: MRT_TableInstance<D>;
700
- }) => void;
701
- onGlobalFilterValueChanged?: ({
702
- event,
703
- instance,
704
- }: {
705
- event: ChangeEvent<HTMLInputElement>;
706
- instance: MRT_TableInstance<D>;
707
- }) => void;
708
- onGlobalFilterValueChangedDebounced?: ({
709
- event,
710
- instance,
711
- }: {
712
- event: ChangeEvent<HTMLInputElement>;
713
- instance: MRT_TableInstance<D>;
714
- }) => void;
715
613
  onDensityChange?: OnChangeFn<boolean>;
716
- onDensityChanged?: ({
717
- event,
718
- density,
719
- instance,
720
- }: {
721
- event: MouseEvent<HTMLButtonElement>;
722
- density: 'comfortable' | 'compact' | 'spacious';
723
- instance: MRT_TableInstance<D>;
724
- }) => void;
725
614
  onIsFullScreenChange?: OnChangeFn<boolean>;
726
- onIsFullScreenChanged?: ({
727
- event,
728
- isFullScreen,
729
- instance,
730
- }: {
731
- event: MouseEvent<HTMLButtonElement>;
732
- isFullScreen: boolean;
733
- instance: MRT_TableInstance<D>;
734
- }) => void;
735
- onRowClick?: ({
736
- event,
737
- row,
738
- instance,
739
- }: {
740
- event: MouseEvent<HTMLTableRowElement>;
741
- row: MRT_Row<D>;
742
- instance: MRT_TableInstance<D>;
743
- }) => void;
744
- onRowSelectAllChanged?: ({
745
- event,
746
- selectedRows,
747
- instance,
748
- }: {
749
- event: ChangeEvent;
750
- selectedRows: MRT_Row<D>[];
751
- instance: MRT_TableInstance<D>;
752
- }) => void;
753
- onRowSelectionChanged?: ({
754
- event,
755
- row,
756
- selectedRows,
757
- instance,
758
- }: {
759
- event: ChangeEvent;
760
- row: MRT_Row<D>;
761
- selectedRows: MRT_Row<D>[];
762
- instance: MRT_TableInstance<D>;
763
- }) => void;
615
+ onShowAlertBannerChange?: OnChangeFn<boolean>;
764
616
  onShowFiltersChange?: OnChangeFn<boolean>;
765
- onShowFiltersChanged?: ({
766
- event,
767
- instance,
768
- showFilters,
769
- }: {
770
- event: MouseEvent<HTMLButtonElement>;
771
- instance: MRT_TableInstance<D>;
772
- showFilters: boolean;
773
- }) => void;
774
617
  onShowGlobalFilterChange?: OnChangeFn<boolean>;
775
- onShowGlobalFilterChanged?: ({
776
- event,
777
- instance,
778
- showGlobalFilter,
779
- }: {
780
- event: MouseEvent<HTMLButtonElement>;
781
- instance: MRT_TableInstance<D>;
782
- showGlobalFilter: boolean;
783
- }) => void;
784
618
  positionActionsColumn?: 'first' | 'last';
785
619
  positionGlobalFilter?: 'left' | 'right';
786
620
  positionPagination?: 'bottom' | 'top' | 'both';
787
621
  positionToolbarAlertBanner?: 'bottom' | 'top';
788
622
  renderDetailPanel?: ({
789
623
  row,
790
- instance,
624
+ table,
791
625
  }: {
792
626
  row: MRT_Row<D>;
793
- instance: MRT_TableInstance<D>;
627
+ table: MRT_TableInstance<D>;
794
628
  }) => ReactNode;
795
629
  renderRowActionMenuItems?: ({
796
630
  closeMenu,
797
631
  row,
798
- instance,
632
+ table,
799
633
  }: {
800
634
  closeMenu: () => void;
801
635
  row: MRT_Row<D>;
802
- instance: MRT_TableInstance<D>;
636
+ table: MRT_TableInstance<D>;
803
637
  }) => ReactNode[];
804
638
  renderRowActions?: ({
805
639
  row,
806
- instance,
640
+ table,
807
641
  }: {
808
642
  row: MRT_Row<D>;
809
- instance: MRT_TableInstance<D>;
643
+ table: MRT_TableInstance<D>;
810
644
  }) => ReactNode;
811
645
  renderToolbarBottomCustomActions?: ({
812
- instance,
646
+ table,
813
647
  }: {
814
- instance: MRT_TableInstance<D>;
648
+ table: MRT_TableInstance<D>;
815
649
  }) => ReactNode;
816
650
  renderToolbarTopCustomActions?: ({
817
- instance,
651
+ table,
818
652
  }: {
819
- instance: MRT_TableInstance<D>;
653
+ table: MRT_TableInstance<D>;
820
654
  }) => ReactNode;
821
655
  renderToolbarInternalActions?: ({
822
- instance,
656
+ table,
823
657
  MRT_ToggleGlobalFilterButton,
824
658
  MRT_ToggleFiltersButton,
825
659
  MRT_ShowHideColumnsButton,
826
660
  MRT_ToggleDensePaddingButton,
827
661
  MRT_FullScreenToggleButton,
828
662
  }: {
829
- instance: MRT_TableInstance<D>;
663
+ table: MRT_TableInstance<D>;
830
664
  MRT_ToggleGlobalFilterButton: FC<
831
- IconButtonProps & { instance: MRT_TableInstance<D> }
665
+ IconButtonProps & { table: MRT_TableInstance<D> }
832
666
  >;
833
667
  MRT_ToggleFiltersButton: FC<
834
- IconButtonProps & { instance: MRT_TableInstance<D> }
668
+ IconButtonProps & { table: MRT_TableInstance<D> }
835
669
  >;
836
670
  MRT_ShowHideColumnsButton: FC<
837
- IconButtonProps & { instance: MRT_TableInstance<D> }
671
+ IconButtonProps & { table: MRT_TableInstance<D> }
838
672
  >;
839
673
  MRT_ToggleDensePaddingButton: FC<
840
- IconButtonProps & { instance: MRT_TableInstance<D> }
674
+ IconButtonProps & { table: MRT_TableInstance<D> }
841
675
  >;
842
676
  MRT_FullScreenToggleButton: FC<
843
- IconButtonProps & { instance: MRT_TableInstance<D> }
677
+ IconButtonProps & { table: MRT_TableInstance<D> }
844
678
  >;
845
679
  }) => ReactNode;
846
680
  rowCount?: number;