material-react-table 0.13.0 → 0.13.3
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 +9 -5
- package/dist/MaterialReactTable.d.ts +55 -42
- package/dist/material-react-table.cjs.development.js +103 -80
- 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 +103 -80
- package/dist/material-react-table.esm.js.map +1 -1
- package/dist/utils.d.ts +5 -2
- package/package.json +3 -3
- package/src/MaterialReactTable.tsx +65 -39
- package/src/buttons/MRT_ExpandAllButton.tsx +8 -0
- package/src/buttons/MRT_ExpandButton.tsx +8 -0
- package/src/inputs/MRT_FilterTextField.tsx +4 -0
- package/src/inputs/MRT_SelectCheckbox.tsx +14 -5
- package/src/menus/MRT_ShowHideColumnsMenu.tsx +8 -1
- package/src/table/MRT_TableRoot.tsx +16 -43
- package/src/toolbar/MRT_ToolbarInternalButtons.tsx +2 -2
- package/src/utils.ts +33 -1
package/README.md
CHANGED
|
@@ -1,13 +1,17 @@
|
|
|
1
1
|
# Material React Table
|
|
2
2
|
|
|
3
|
-
<a href="https://bundlephobia.com/result?p=material-react-table" target="
|
|
4
|
-
<img alt="" src="https://badgen.net/bundlephobia/minzip/material-react-table" />
|
|
3
|
+
<a href="https://bundlephobia.com/result?p=material-react-table" target="_blank_">
|
|
4
|
+
<img alt="" src="https://badgen.net/bundlephobia/minzip/material-react-table@latest" />
|
|
5
5
|
</a>
|
|
6
6
|
|
|
7
|
-
<a href="https://npmjs.com/package/material-react-table" target="
|
|
7
|
+
<a href="https://npmjs.com/package/material-react-table" target="_blank_">
|
|
8
8
|
<img alt="" src="https://img.shields.io/npm/dm/material-react-table.svg" />
|
|
9
9
|
</a>
|
|
10
10
|
|
|
11
|
+
<a href="https://github.com/KevinVandy/material-react-table" target="_blank_">
|
|
12
|
+
<img alt="" src="https://img.shields.io/github/stars/KevinVandy/material-react-table.svg?style=social&label=Star" />
|
|
13
|
+
</a>
|
|
14
|
+
|
|
11
15
|
> This Project is based on `@tanstack/react-table` v8, which itself is still in beta, so therefore this package is also still in alpha/beta
|
|
12
16
|
|
|
13
17
|
- A fully featured Material UI V5 implementation of Tanstack React Table v8 (beta)
|
|
@@ -46,7 +50,7 @@ _All features can easily be enabled/disabled_
|
|
|
46
50
|
- [x] Filtering and multiple built-in filter modes
|
|
47
51
|
- [x] Full Screen mode
|
|
48
52
|
- [x] Global Filtering (Search across all columns, rank by best match)
|
|
49
|
-
- [x]
|
|
53
|
+
- [x] Header Groups & Footers
|
|
50
54
|
- [x] Localization (i18n) support
|
|
51
55
|
- [x] Manage your own state
|
|
52
56
|
- [x] Pagination (supports client-side and server-side)
|
|
@@ -58,7 +62,7 @@ _All features can easily be enabled/disabled_
|
|
|
58
62
|
- [x] Sorting
|
|
59
63
|
- [x] Theming (Respects your Material UI Theme)
|
|
60
64
|
- [x] Toolbars (Add your own action buttons)
|
|
61
|
-
- [x] Tree Data / Expanding
|
|
65
|
+
- [x] Tree Data / Expanding Sub-rows
|
|
62
66
|
- [x] Virtualization (react-virtual)
|
|
63
67
|
|
|
64
68
|
### Installation
|
|
@@ -106,31 +106,31 @@ export declare type MRT_ColumnDef<D extends Record<string, any> = {}> = Omit<Col
|
|
|
106
106
|
header: string;
|
|
107
107
|
id: keyof D | string;
|
|
108
108
|
muiTableBodyCellCopyButtonProps?: ButtonProps | (({ instance, cell, }: {
|
|
109
|
-
instance: MRT_TableInstance
|
|
109
|
+
instance: MRT_TableInstance<D>;
|
|
110
110
|
cell: MRT_Cell<D>;
|
|
111
111
|
}) => ButtonProps);
|
|
112
112
|
muiTableBodyCellEditTextFieldProps?: TextFieldProps | (({ instance, cell, }: {
|
|
113
|
-
instance: MRT_TableInstance
|
|
113
|
+
instance: MRT_TableInstance<D>;
|
|
114
114
|
cell: MRT_Cell<D>;
|
|
115
115
|
}) => TextFieldProps);
|
|
116
116
|
muiTableBodyCellProps?: TableCellProps | (({ instance, cell, }: {
|
|
117
|
-
instance: MRT_TableInstance
|
|
117
|
+
instance: MRT_TableInstance<D>;
|
|
118
118
|
cell: MRT_Cell<D>;
|
|
119
119
|
}) => TableCellProps);
|
|
120
120
|
muiTableFooterCellProps?: TableCellProps | (({ instance, column, }: {
|
|
121
|
-
instance: MRT_TableInstance
|
|
121
|
+
instance: MRT_TableInstance<D>;
|
|
122
122
|
column: MRT_Column<D>;
|
|
123
123
|
}) => TableCellProps);
|
|
124
124
|
muiTableHeadCellColumnActionsButtonProps?: IconButtonProps | (({ instance, column, }: {
|
|
125
|
-
instance: MRT_TableInstance
|
|
125
|
+
instance: MRT_TableInstance<D>;
|
|
126
126
|
column: MRT_Column<D>;
|
|
127
127
|
}) => IconButtonProps);
|
|
128
128
|
muiTableHeadCellFilterTextFieldProps?: TextFieldProps | (({ instance, column, }: {
|
|
129
|
-
instance: MRT_TableInstance
|
|
129
|
+
instance: MRT_TableInstance<D>;
|
|
130
130
|
column: MRT_Column<D>;
|
|
131
131
|
}) => TextFieldProps);
|
|
132
132
|
muiTableHeadCellProps?: TableCellProps | (({ instance, column, }: {
|
|
133
|
-
instance: MRT_TableInstance
|
|
133
|
+
instance: MRT_TableInstance<D>;
|
|
134
134
|
column: MRT_Column<D>;
|
|
135
135
|
}) => TableCellProps);
|
|
136
136
|
onCellEditBlur?: ({ cell, event, instance, }: {
|
|
@@ -143,15 +143,17 @@ export declare type MRT_ColumnDef<D extends Record<string, any> = {}> = Omit<Col
|
|
|
143
143
|
cell: MRT_Cell<D>;
|
|
144
144
|
instance: MRT_TableInstance<D>;
|
|
145
145
|
}) => void;
|
|
146
|
-
onColumnFilterValueChanged?: ({ column, event, filterValue, }: {
|
|
146
|
+
onColumnFilterValueChanged?: ({ column, event, filterValue, instance, }: {
|
|
147
147
|
column: MRT_Column<D>;
|
|
148
148
|
event: ChangeEvent<HTMLInputElement>;
|
|
149
149
|
filterValue: any;
|
|
150
|
+
instance: MRT_TableInstance<D>;
|
|
150
151
|
}) => void;
|
|
151
|
-
onColumnFilterValueChangedDebounced?: ({ column, event, filterValue, }: {
|
|
152
|
+
onColumnFilterValueChangedDebounced?: ({ column, event, filterValue, instance, }: {
|
|
152
153
|
column: MRT_Column<D>;
|
|
153
154
|
event: ChangeEvent<HTMLInputElement>;
|
|
154
155
|
filterValue: any;
|
|
156
|
+
instance: MRT_TableInstance<D>;
|
|
155
157
|
}) => void;
|
|
156
158
|
};
|
|
157
159
|
export declare type MRT_Column<D extends Record<string, any> = {}> = Omit<Column<D>, 'header' | 'footer' | 'columns' | 'columnDef'> & {
|
|
@@ -184,7 +186,7 @@ export declare type MaterialReactTableProps<D extends Record<string, any> = {}>
|
|
|
184
186
|
enableClickToCopy?: boolean;
|
|
185
187
|
enableColumnActions?: boolean;
|
|
186
188
|
enableColumnOrdering?: boolean;
|
|
187
|
-
|
|
189
|
+
enableDensityToggle?: boolean;
|
|
188
190
|
enableEditing?: boolean;
|
|
189
191
|
enableExpandAll?: boolean;
|
|
190
192
|
enableFullScreenToggle?: boolean;
|
|
@@ -204,94 +206,103 @@ export declare type MaterialReactTableProps<D extends Record<string, any> = {}>
|
|
|
204
206
|
enabledGlobalFilterOptions?: (MRT_FILTER_OPTION | string)[] | null;
|
|
205
207
|
icons?: Partial<MRT_Icons>;
|
|
206
208
|
localization?: Partial<MRT_Localization>;
|
|
209
|
+
muiExpandAllButtonProps?: IconButtonProps | (({ instance }: {
|
|
210
|
+
instance: MRT_TableInstance<D>;
|
|
211
|
+
}) => IconButtonProps);
|
|
212
|
+
muiExpandButtonProps?: IconButtonProps | (({ instance, }: {
|
|
213
|
+
instance: MRT_TableInstance<D>;
|
|
214
|
+
row: MRT_Row<D>;
|
|
215
|
+
}) => IconButtonProps);
|
|
207
216
|
muiLinearProgressProps?: LinearProgressProps | (({ instance, }: {
|
|
208
|
-
instance: MRT_TableInstance
|
|
217
|
+
instance: MRT_TableInstance<D>;
|
|
209
218
|
}) => LinearProgressProps);
|
|
210
219
|
muiSearchTextFieldProps?: TextFieldProps | (({ instance }: {
|
|
211
|
-
instance: MRT_TableInstance
|
|
220
|
+
instance: MRT_TableInstance<D>;
|
|
212
221
|
}) => TextFieldProps);
|
|
213
|
-
|
|
214
|
-
instance: MRT_TableInstance
|
|
215
|
-
|
|
216
|
-
|
|
222
|
+
muiSelectAllCheckboxProps?: CheckboxProps | (({ instance }: {
|
|
223
|
+
instance: MRT_TableInstance<D>;
|
|
224
|
+
}) => CheckboxProps);
|
|
225
|
+
muiSelectCheckboxProps?: CheckboxProps | (({ instance, row, }: {
|
|
226
|
+
instance: MRT_TableInstance<D>;
|
|
227
|
+
row: MRT_Row<D>;
|
|
217
228
|
}) => CheckboxProps);
|
|
218
229
|
muiTableBodyCellCopyButtonProps?: ButtonProps | (({ instance, cell, }: {
|
|
219
|
-
instance: MRT_TableInstance
|
|
230
|
+
instance: MRT_TableInstance<D>;
|
|
220
231
|
cell: MRT_Cell<D>;
|
|
221
232
|
}) => ButtonProps);
|
|
222
233
|
muiTableBodyCellEditTextFieldProps?: TextFieldProps | (({ instance, cell, }: {
|
|
223
|
-
instance: MRT_TableInstance
|
|
234
|
+
instance: MRT_TableInstance<D>;
|
|
224
235
|
cell: MRT_Cell<D>;
|
|
225
236
|
}) => TextFieldProps);
|
|
226
237
|
muiTableBodyCellProps?: TableCellProps | (({ instance, cell, }: {
|
|
227
|
-
instance: MRT_TableInstance
|
|
238
|
+
instance: MRT_TableInstance<D>;
|
|
228
239
|
cell: MRT_Cell<D>;
|
|
229
240
|
}) => TableCellProps);
|
|
230
241
|
muiTableBodyCellSkeletonProps?: SkeletonProps | (({ instance, cell, }: {
|
|
231
|
-
instance: MRT_TableInstance
|
|
242
|
+
instance: MRT_TableInstance<D>;
|
|
232
243
|
cell: MRT_Cell<D>;
|
|
233
244
|
}) => SkeletonProps);
|
|
234
245
|
muiTableBodyProps?: TableBodyProps | (({ instance }: {
|
|
235
|
-
instance: MRT_TableInstance
|
|
246
|
+
instance: MRT_TableInstance<D>;
|
|
236
247
|
}) => TableBodyProps);
|
|
237
248
|
muiTableBodyRowProps?: TableRowProps | (({ instance, row, }: {
|
|
238
|
-
instance: MRT_TableInstance
|
|
249
|
+
instance: MRT_TableInstance<D>;
|
|
239
250
|
row: MRT_Row<D>;
|
|
240
251
|
}) => TableRowProps);
|
|
241
252
|
muiTableContainerProps?: TableContainerProps | (({ instance, }: {
|
|
242
|
-
instance: MRT_TableInstance
|
|
253
|
+
instance: MRT_TableInstance<D>;
|
|
243
254
|
}) => TableContainerProps);
|
|
244
255
|
muiTableDetailPanelProps?: TableCellProps | (({ instance, row, }: {
|
|
245
|
-
instance: MRT_TableInstance
|
|
256
|
+
instance: MRT_TableInstance<D>;
|
|
246
257
|
row: MRT_Row<D>;
|
|
247
258
|
}) => TableCellProps);
|
|
248
259
|
muiTableFooterCellProps?: TableCellProps | (({ instance, column, }: {
|
|
249
|
-
instance: MRT_TableInstance
|
|
260
|
+
instance: MRT_TableInstance<D>;
|
|
250
261
|
column: MRT_Column<D>;
|
|
251
262
|
}) => TableCellProps);
|
|
252
|
-
muiTableFooterProps?: TableFooterProps | (({ instance }: {
|
|
253
|
-
instance: MRT_TableInstance
|
|
263
|
+
muiTableFooterProps?: TableFooterProps | (({ instance, }: {
|
|
264
|
+
instance: MRT_TableInstance<D>;
|
|
254
265
|
}) => TableFooterProps);
|
|
255
266
|
muiTableFooterRowProps?: TableRowProps | (({ instance, footerGroup, }: {
|
|
256
|
-
instance: MRT_TableInstance
|
|
267
|
+
instance: MRT_TableInstance<D>;
|
|
257
268
|
footerGroup: MRT_HeaderGroup<D>;
|
|
258
269
|
}) => TableRowProps);
|
|
259
270
|
muiTableHeadCellColumnActionsButtonProps?: IconButtonProps | (({ instance, column, }: {
|
|
260
|
-
instance: MRT_TableInstance
|
|
271
|
+
instance: MRT_TableInstance<D>;
|
|
261
272
|
column: MRT_Column<D>;
|
|
262
273
|
}) => IconButtonProps);
|
|
263
274
|
muiTableHeadCellFilterTextFieldProps?: TextFieldProps | (({ instance, column, }: {
|
|
264
|
-
instance: MRT_TableInstance
|
|
275
|
+
instance: MRT_TableInstance<D>;
|
|
265
276
|
column: MRT_Column<D>;
|
|
266
277
|
}) => TextFieldProps);
|
|
267
278
|
muiTableHeadCellProps?: TableCellProps | (({ instance, column, }: {
|
|
268
|
-
instance: MRT_TableInstance
|
|
279
|
+
instance: MRT_TableInstance<D>;
|
|
269
280
|
column: MRT_Column<D>;
|
|
270
281
|
}) => TableCellProps);
|
|
271
282
|
muiTableHeadProps?: TableHeadProps | (({ instance }: {
|
|
272
|
-
instance: MRT_TableInstance
|
|
283
|
+
instance: MRT_TableInstance<D>;
|
|
273
284
|
}) => TableHeadProps);
|
|
274
285
|
muiTableHeadRowProps?: TableRowProps | (({ instance, headerGroup, }: {
|
|
275
|
-
instance: MRT_TableInstance
|
|
286
|
+
instance: MRT_TableInstance<D>;
|
|
276
287
|
headerGroup: MRT_HeaderGroup<D>;
|
|
277
288
|
}) => TableRowProps);
|
|
278
289
|
muiTablePaginationProps?: Partial<TablePaginationProps> | (({ instance, }: {
|
|
279
|
-
instance: MRT_TableInstance
|
|
290
|
+
instance: MRT_TableInstance<D>;
|
|
280
291
|
}) => Partial<TablePaginationProps>);
|
|
281
292
|
muiTablePaperProps?: PaperProps | (({ instance }: {
|
|
282
|
-
instance: MRT_TableInstance
|
|
293
|
+
instance: MRT_TableInstance<D>;
|
|
283
294
|
}) => PaperProps);
|
|
284
295
|
muiTableProps?: TableProps | (({ instance }: {
|
|
285
|
-
instance: MRT_TableInstance
|
|
296
|
+
instance: MRT_TableInstance<D>;
|
|
286
297
|
}) => TableProps);
|
|
287
298
|
muiTableToolbarAlertBannerProps?: AlertProps | (({ instance }: {
|
|
288
|
-
instance: MRT_TableInstance
|
|
299
|
+
instance: MRT_TableInstance<D>;
|
|
289
300
|
}) => AlertProps);
|
|
290
301
|
muiTableToolbarBottomProps?: ToolbarProps | (({ instance }: {
|
|
291
|
-
instance: MRT_TableInstance
|
|
302
|
+
instance: MRT_TableInstance<D>;
|
|
292
303
|
}) => ToolbarProps);
|
|
293
304
|
muiTableToolbarTopProps?: ToolbarProps | (({ instance }: {
|
|
294
|
-
instance: MRT_TableInstance
|
|
305
|
+
instance: MRT_TableInstance<D>;
|
|
295
306
|
}) => ToolbarProps);
|
|
296
307
|
onCellClick?: ({ cell, event, instance, }: {
|
|
297
308
|
cell: MRT_Cell<D>;
|
|
@@ -308,15 +319,17 @@ export declare type MaterialReactTableProps<D extends Record<string, any> = {}>
|
|
|
308
319
|
cell: MRT_Cell<D>;
|
|
309
320
|
instance: MRT_TableInstance<D>;
|
|
310
321
|
}) => void;
|
|
311
|
-
onColumnFilterValueChanged?: ({ column, event, filterValue, }: {
|
|
322
|
+
onColumnFilterValueChanged?: ({ column, event, filterValue, instance, }: {
|
|
312
323
|
column: MRT_Column<D>;
|
|
313
324
|
event: ChangeEvent<HTMLInputElement>;
|
|
314
325
|
filterValue: any;
|
|
326
|
+
instance: MRT_TableInstance<D>;
|
|
315
327
|
}) => void;
|
|
316
|
-
onColumnFilterValueChangedDebounced?: ({ column, event, filterValue, }: {
|
|
328
|
+
onColumnFilterValueChangedDebounced?: ({ column, event, filterValue, instance, }: {
|
|
317
329
|
column: MRT_Column<D>;
|
|
318
330
|
event: ChangeEvent<HTMLInputElement>;
|
|
319
331
|
filterValue: any;
|
|
332
|
+
instance: MRT_TableInstance<D>;
|
|
320
333
|
}) => void;
|
|
321
334
|
onColumnVisibilityChanged?: ({ column, columnVisibility, instance, }: {
|
|
322
335
|
column: MRT_Column<D>;
|
|
@@ -436,5 +449,5 @@ export declare type MaterialReactTableProps<D extends Record<string, any> = {}>
|
|
|
436
449
|
tableId?: string;
|
|
437
450
|
virtualizerProps?: VirtualizerOptions<HTMLDivElement>;
|
|
438
451
|
};
|
|
439
|
-
declare const _default: <D extends Record<string, any> = {}>({ autoResetExpanded, columnResizeMode, defaultColumn, editingMode, enableColumnActions, enableColumnFilters, enableColumnOrdering, enableColumnResizing,
|
|
452
|
+
declare const _default: <D extends Record<string, any> = {}>({ autoResetExpanded, columnResizeMode, defaultColumn, editingMode, enableColumnActions, enableColumnFilters, enableColumnOrdering, enableColumnResizing, enableDensityToggle, enableExpandAll, enableFilters, enableFullScreenToggle, enableGlobalFilter, enableGrouping, enableHiding, enableMultiRowSelection, enablePagination, enablePinning, enableRowSelection, enableSelectAll, enableSorting, enableStickyHeader, enableTableFooter, enableTableHead, enableToolbarBottom, enableToolbarInternalActions, enableToolbarTop, icons, localization, persistentStateMode, positionActionsColumn, positionGlobalFilter, positionPagination, positionToolbarActions, positionToolbarAlertBanner, rowNumberMode, selectAllMode, ...rest }: MaterialReactTableProps<D>) => JSX.Element;
|
|
440
453
|
export default _default;
|