material-react-table 0.8.14 → 0.9.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.
- package/README.md +2 -1
- package/dist/MaterialReactTable.d.ts +41 -37
- package/dist/material-react-table.cjs.development.js +223 -185
- 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 +223 -185
- package/dist/material-react-table.esm.js.map +1 -1
- package/dist/table/MRT_TableRoot.d.ts +1 -0
- package/dist/toolbar/MRT_LinearProgressBar.d.ts +1 -0
- package/dist/utils.d.ts +4 -3
- package/package.json +9 -9
- package/src/MaterialReactTable.tsx +56 -47
- package/src/body/MRT_TableBodyCell.tsx +28 -10
- package/src/body/MRT_TableBodyRow.tsx +4 -3
- package/src/body/MRT_TableDetailPanel.tsx +2 -2
- package/src/buttons/MRT_ColumnPinningButtons.tsx +1 -1
- package/src/buttons/MRT_EditActionButtons.tsx +2 -2
- package/src/buttons/MRT_ExpandButton.tsx +2 -2
- package/src/buttons/MRT_FullScreenToggleButton.tsx +2 -2
- package/src/buttons/MRT_ToggleDensePaddingButton.tsx +2 -2
- package/src/buttons/MRT_ToggleFiltersButton.tsx +2 -2
- package/src/buttons/MRT_ToggleGlobalFilterButton.tsx +4 -4
- package/src/footer/MRT_TableFooterCell.tsx +6 -6
- package/src/head/MRT_DraggableTableHeadCell.tsx +8 -16
- package/src/head/MRT_TableHeadCell.tsx +12 -10
- package/src/head/MRT_TableHeadCellFilterLabel.tsx +1 -0
- package/src/inputs/MRT_EditCellTextField.tsx +8 -8
- package/src/inputs/MRT_FilterTextField.tsx +2 -2
- package/src/inputs/MRT_SearchTextField.tsx +4 -4
- package/src/inputs/MRT_SelectCheckbox.tsx +4 -4
- package/src/menus/MRT_ColumnActionMenu.tsx +2 -2
- package/src/menus/MRT_ShowHideColumnsMenu.tsx +18 -5
- package/src/menus/MRT_ShowHideColumnsMenuItems.tsx +18 -18
- package/src/table/MRT_TableContainer.tsx +3 -3
- package/src/table/MRT_TableRoot.tsx +24 -13
- package/src/toolbar/MRT_LinearProgressBar.tsx +17 -2
- package/src/toolbar/MRT_ToolbarBottom.tsx +4 -4
- package/src/toolbar/MRT_ToolbarInternalButtons.tsx +2 -1
- package/src/toolbar/MRT_ToolbarTop.tsx +13 -6
- package/src/utils.ts +24 -2
package/README.md
CHANGED
|
@@ -19,7 +19,7 @@
|
|
|
19
19
|
|
|
20
20
|
View the [docs (alpha) site](https://www.material-react-table.com/)
|
|
21
21
|
|
|
22
|
-
View a basic [example](https://codesandbox.io/s/github/KevinVandy/material-react-table/tree/main/material-react-table-docs/examples/basic/sandbox)
|
|
22
|
+
View a basic [example](https://codesandbox.io/s/github/KevinVandy/material-react-table/tree/main/material-react-table-docs/examples/basic/sandbox?file=/src/TS.tsx)
|
|
23
23
|
|
|
24
24
|
View additional [storybook examples](https://www.material-react-table.dev/)
|
|
25
25
|
|
|
@@ -72,3 +72,4 @@ npm install @mui/material @mui/icons-material @emotion/react @emotion/styled
|
|
|
72
72
|
npm install material-react-table
|
|
73
73
|
```
|
|
74
74
|
|
|
75
|
+
_`@tanstack/react-table` and `react-dnd`_ are internal dependencies, so you don't need to install them.
|
|
@@ -21,21 +21,24 @@ export interface MRT_RowModel<D extends Record<string, any> = {}> {
|
|
|
21
21
|
}
|
|
22
22
|
export declare type MRT_TableInstance<D extends Record<string, any> = {}> = Omit<TableInstance<Overwrite<Partial<TableGenerics>, {
|
|
23
23
|
Row: D;
|
|
24
|
-
}>>, 'getAllColumns' | 'getAllFlatColumns' | 'getAllLeafColumns' | 'getColumn' | 'getExpandedRowModel' | 'getFlatHeaders' | 'getPaginationRowModel' | 'getPrePaginationRowModel' | 'getRowModel' | 'getSelectedRowModel' | 'getState' | 'options'> & {
|
|
24
|
+
}>>, 'getAllColumns' | 'getAllFlatColumns' | 'getAllLeafColumns' | 'getCenterLeafColumns' | 'getColumn' | 'getExpandedRowModel' | 'getFlatHeaders' | 'getLeftLeafColumns' | 'getPaginationRowModel' | 'getPrePaginationRowModel' | 'getRightLeafColumns' | 'getRowModel' | 'getSelectedRowModel' | 'getState' | 'options'> & {
|
|
25
25
|
getAllColumns: () => MRT_Column<D>[];
|
|
26
26
|
getAllFlatColumns: () => MRT_Column<D>[];
|
|
27
27
|
getAllLeafColumns: () => MRT_Column<D>[];
|
|
28
|
+
getCenterLeafColumns: () => MRT_Column<D>[];
|
|
28
29
|
getColumn: (columnId: string) => MRT_Column<D>;
|
|
29
30
|
getExpandedRowModel: () => MRT_RowModel<D>;
|
|
30
31
|
getFlatHeaders: () => MRT_Header<D>[];
|
|
32
|
+
getLeftLeafColumns: () => MRT_Column<D>[];
|
|
31
33
|
getPaginationRowModel: () => MRT_RowModel<D>;
|
|
32
34
|
getPrePaginationRowModel: () => MRT_RowModel<D>;
|
|
35
|
+
getRightLeafColumns: () => MRT_Column<D>[];
|
|
33
36
|
getRowModel: () => MRT_RowModel<D>;
|
|
34
37
|
getSelectedRowModel: () => MRT_RowModel<D>;
|
|
35
38
|
getState: () => MRT_TableState<D>;
|
|
36
39
|
options: MaterialReactTableProps<D> & {
|
|
37
40
|
icons: MRT_Icons;
|
|
38
|
-
|
|
41
|
+
tableId: string;
|
|
39
42
|
localization: MRT_Localization;
|
|
40
43
|
};
|
|
41
44
|
setCurrentEditingCell: Dispatch<SetStateAction<MRT_Cell | null>>;
|
|
@@ -63,6 +66,10 @@ export declare type MRT_TableState<D extends Record<string, any> = {}> = TableSt
|
|
|
63
66
|
showSkeletons: boolean;
|
|
64
67
|
};
|
|
65
68
|
export declare type MRT_ColumnDef<D extends Record<string, any> = {}> = Omit<ColumnDef<D>, 'accessorFN' | 'header' | 'footer' | 'columns' | 'filterFn'> & {
|
|
69
|
+
Cell?: ({ cell, tableInstance, }: {
|
|
70
|
+
cell: MRT_Cell<D>;
|
|
71
|
+
tableInstance: MRT_TableInstance<D>;
|
|
72
|
+
}) => ReactNode;
|
|
66
73
|
Edit?: ({ cell, tableInstance, }: {
|
|
67
74
|
cell: MRT_Cell<D>;
|
|
68
75
|
tableInstance: MRT_TableInstance<D>;
|
|
@@ -79,10 +86,6 @@ export declare type MRT_ColumnDef<D extends Record<string, any> = {}> = Omit<Col
|
|
|
79
86
|
header: MRT_Header<D>;
|
|
80
87
|
tableInstance: MRT_TableInstance<D>;
|
|
81
88
|
}) => ReactNode);
|
|
82
|
-
Cell?: ({ cell, tableInstance, }: {
|
|
83
|
-
cell: MRT_Cell<D>;
|
|
84
|
-
tableInstance: MRT_TableInstance<D>;
|
|
85
|
-
}) => ReactNode;
|
|
86
89
|
accessorFN?: (row: D) => any;
|
|
87
90
|
columns?: MRT_ColumnDef<D>[];
|
|
88
91
|
enableClickToCopy?: boolean;
|
|
@@ -126,17 +129,17 @@ export declare type MRT_ColumnDef<D extends Record<string, any> = {}> = Omit<Col
|
|
|
126
129
|
tableInstance: MRT_TableInstance;
|
|
127
130
|
column: MRT_Column<D>;
|
|
128
131
|
}) => TableCellProps);
|
|
129
|
-
|
|
132
|
+
onMrtCellEditBlur?: ({ cell, event, tableInstance, }: {
|
|
130
133
|
event: FocusEvent<HTMLInputElement>;
|
|
131
134
|
cell: MRT_Cell<D>;
|
|
132
135
|
tableInstance: MRT_TableInstance<D>;
|
|
133
136
|
}) => void;
|
|
134
|
-
|
|
137
|
+
onMrtCellEditChange?: ({ cell, event, tableInstance, }: {
|
|
135
138
|
event: ChangeEvent<HTMLInputElement>;
|
|
136
139
|
cell: MRT_Cell<D>;
|
|
137
140
|
tableInstance: MRT_TableInstance<D>;
|
|
138
141
|
}) => void;
|
|
139
|
-
|
|
142
|
+
onMrtFilterValueChange?: ({ column, event, filterValue, }: {
|
|
140
143
|
column: MRT_Column<D>;
|
|
141
144
|
event: ChangeEvent<HTMLInputElement>;
|
|
142
145
|
filterValue: any;
|
|
@@ -189,7 +192,6 @@ export declare type MaterialReactTableProps<D extends Record<string, any> = {}>
|
|
|
189
192
|
enabledColumnFilterOptions?: (MRT_FILTER_OPTION | string)[];
|
|
190
193
|
enabledGlobalFilterOptions?: (MRT_FILTER_OPTION | string)[];
|
|
191
194
|
icons?: Partial<MRT_Icons>;
|
|
192
|
-
idPrefix?: string;
|
|
193
195
|
localization?: Partial<MRT_Localization>;
|
|
194
196
|
muiLinearProgressProps?: LinearProgressProps | (({ tableInstance, }: {
|
|
195
197
|
tableInstance: MRT_TableInstance;
|
|
@@ -262,12 +264,12 @@ export declare type MaterialReactTableProps<D extends Record<string, any> = {}>
|
|
|
262
264
|
tableInstance: MRT_TableInstance;
|
|
263
265
|
headerGroup: MRT_HeaderGroup<D>;
|
|
264
266
|
}) => TableRowProps);
|
|
265
|
-
muiTablePaperProps?: PaperProps | (({ tableInstance, }: {
|
|
266
|
-
tableInstance: MRT_TableInstance;
|
|
267
|
-
}) => PaperProps);
|
|
268
267
|
muiTablePaginationProps?: Partial<TablePaginationProps> | (({ tableInstance, }: {
|
|
269
268
|
tableInstance: MRT_TableInstance;
|
|
270
269
|
}) => Partial<TablePaginationProps>);
|
|
270
|
+
muiTablePaperProps?: PaperProps | (({ tableInstance, }: {
|
|
271
|
+
tableInstance: MRT_TableInstance;
|
|
272
|
+
}) => PaperProps);
|
|
271
273
|
muiTableProps?: TableProps | (({ tableInstance, }: {
|
|
272
274
|
tableInstance: MRT_TableInstance;
|
|
273
275
|
}) => TableProps);
|
|
@@ -280,81 +282,81 @@ export declare type MaterialReactTableProps<D extends Record<string, any> = {}>
|
|
|
280
282
|
muiTableToolbarTopProps?: ToolbarProps | (({ tableInstance, }: {
|
|
281
283
|
tableInstance: MRT_TableInstance;
|
|
282
284
|
}) => ToolbarProps);
|
|
283
|
-
|
|
285
|
+
onMrtCellClick?: ({ cell, event, tableInstance, }: {
|
|
284
286
|
cell: MRT_Cell<D>;
|
|
285
287
|
tableInstance: MRT_TableInstance<D>;
|
|
286
288
|
event: MouseEvent<HTMLTableCellElement>;
|
|
287
289
|
}) => void;
|
|
288
|
-
|
|
290
|
+
onMrtCellEditBlur?: ({ cell, event, tableInstance, }: {
|
|
289
291
|
event: FocusEvent<HTMLInputElement>;
|
|
290
292
|
cell: MRT_Cell<D>;
|
|
291
293
|
tableInstance: MRT_TableInstance<D>;
|
|
292
294
|
}) => void;
|
|
293
|
-
|
|
295
|
+
onMrtCellEditChange?: ({ cell, event, tableInstance, }: {
|
|
294
296
|
event: ChangeEvent<HTMLInputElement>;
|
|
295
297
|
cell: MRT_Cell<D>;
|
|
296
298
|
tableInstance: MRT_TableInstance<D>;
|
|
297
299
|
}) => void;
|
|
298
|
-
|
|
299
|
-
column: MRT_Column<D>;
|
|
300
|
-
event: ChangeEvent<HTMLInputElement>;
|
|
301
|
-
filterValue: any;
|
|
302
|
-
}) => void;
|
|
303
|
-
onDetailPanelClick?: ({ event, row, tableInstance, }: {
|
|
300
|
+
onMrtDetailPanelClick?: ({ event, row, tableInstance, }: {
|
|
304
301
|
event: MouseEvent<HTMLTableCellElement>;
|
|
305
302
|
row: MRT_Row<D>;
|
|
306
303
|
tableInstance: MRT_TableInstance<D>;
|
|
307
304
|
}) => void;
|
|
308
|
-
|
|
305
|
+
onMrtEditRowSubmit?: ({ row, tableInstance, }: {
|
|
306
|
+
row: MRT_Row<D>;
|
|
307
|
+
tableInstance: MRT_TableInstance<D>;
|
|
308
|
+
}) => Promise<void> | void;
|
|
309
|
+
onMrtFilterValueChange?: ({ column, event, filterValue, }: {
|
|
310
|
+
column: MRT_Column<D>;
|
|
311
|
+
event: ChangeEvent<HTMLInputElement>;
|
|
312
|
+
filterValue: any;
|
|
313
|
+
}) => void;
|
|
314
|
+
onMrtGlobalFilterValueChange?: ({ event, tableInstance, }: {
|
|
309
315
|
event: ChangeEvent<HTMLInputElement>;
|
|
310
316
|
tableInstance: MRT_TableInstance<D>;
|
|
311
317
|
}) => void;
|
|
312
|
-
|
|
318
|
+
onMrtRowClick?: ({ event, row, tableInstance, }: {
|
|
313
319
|
event: MouseEvent<HTMLTableRowElement>;
|
|
314
320
|
row: MRT_Row<D>;
|
|
315
321
|
tableInstance: MRT_TableInstance<D>;
|
|
316
322
|
}) => void;
|
|
317
|
-
|
|
318
|
-
row: MRT_Row<D>;
|
|
319
|
-
tableInstance: MRT_TableInstance<D>;
|
|
320
|
-
}) => Promise<void> | void;
|
|
321
|
-
onRowExpandChange?: ({ event, row, }: {
|
|
323
|
+
onMrtRowExpandChange?: ({ event, row, }: {
|
|
322
324
|
event: MouseEvent<HTMLButtonElement>;
|
|
323
325
|
row: MRT_Row<D>;
|
|
324
326
|
tableInstance: MRT_TableInstance<D>;
|
|
325
327
|
}) => void;
|
|
326
|
-
|
|
328
|
+
onMrtSelectAllChange?: ({ event, selectedRows, tableInstance, }: {
|
|
327
329
|
event: ChangeEvent;
|
|
328
330
|
selectedRows: MRT_Row<D>[];
|
|
329
331
|
tableInstance: MRT_TableInstance<D>;
|
|
330
332
|
}) => void;
|
|
331
|
-
|
|
333
|
+
onMrtSelectRowChange?: ({ event, row, selectedRows, tableInstance, }: {
|
|
332
334
|
event: ChangeEvent;
|
|
333
335
|
row: MRT_Row<D>;
|
|
334
336
|
selectedRows: MRT_Row<D>[];
|
|
335
337
|
tableInstance: MRT_TableInstance<D>;
|
|
336
338
|
}) => void;
|
|
337
|
-
|
|
339
|
+
onMrtToggleColumnVisibility?: ({ column, columnVisibility, tableInstance, }: {
|
|
338
340
|
column: MRT_Column<D>;
|
|
339
341
|
columnVisibility: VisibilityState;
|
|
340
342
|
tableInstance: MRT_TableInstance<D>;
|
|
341
343
|
}) => void;
|
|
342
|
-
|
|
344
|
+
onMrtToggleDensePadding?: ({ event, isDensePadding, tableInstance, }: {
|
|
343
345
|
event: MouseEvent<HTMLButtonElement>;
|
|
344
346
|
isDensePadding: boolean;
|
|
345
347
|
tableInstance: MRT_TableInstance<D>;
|
|
346
348
|
}) => void;
|
|
347
|
-
|
|
349
|
+
onMrtToggleFullScreen?: ({ event, isFullScreen, tableInstance, }: {
|
|
348
350
|
event: MouseEvent<HTMLButtonElement>;
|
|
349
351
|
isFullScreen: boolean;
|
|
350
352
|
tableInstance: MRT_TableInstance<D>;
|
|
351
353
|
}) => void;
|
|
352
|
-
|
|
354
|
+
onMrtToggleShowFilters?: ({ event, showFilters, tableInstance, }: {
|
|
353
355
|
event: MouseEvent<HTMLButtonElement>;
|
|
354
356
|
showFilters: boolean;
|
|
355
357
|
tableInstance: MRT_TableInstance<D>;
|
|
356
358
|
}) => void;
|
|
357
|
-
|
|
359
|
+
onMrtToggleShowGlobalFilter?: ({ event, showGlobalFilter, tableInstance, }: {
|
|
358
360
|
event: MouseEvent<HTMLButtonElement>;
|
|
359
361
|
showGlobalFilter: boolean;
|
|
360
362
|
tableInstance: MRT_TableInstance<D>;
|
|
@@ -362,6 +364,7 @@ export declare type MaterialReactTableProps<D extends Record<string, any> = {}>
|
|
|
362
364
|
persistentStateMode?: 'localStorage' | 'sessionStorage';
|
|
363
365
|
positionActionsColumn?: 'first' | 'last';
|
|
364
366
|
positionPagination?: 'bottom' | 'top' | 'both';
|
|
367
|
+
positionGlobalFilter?: 'left' | 'right';
|
|
365
368
|
positionToolbarActions?: 'bottom' | 'top';
|
|
366
369
|
positionToolbarAlertBanner?: 'bottom' | 'top';
|
|
367
370
|
renderDetailPanel?: ({ row, tableInstance, }: {
|
|
@@ -399,6 +402,7 @@ export declare type MaterialReactTableProps<D extends Record<string, any> = {}>
|
|
|
399
402
|
}>;
|
|
400
403
|
}) => ReactNode;
|
|
401
404
|
selectAllMode?: 'all' | 'page';
|
|
405
|
+
tableId?: string;
|
|
402
406
|
};
|
|
403
|
-
declare const _default: <D extends Record<string, any> = {}>({ autoResetExpanded, columnResizeMode, defaultColumn, editingMode, enableColumnActions, enableColumnFilters, enableColumnOrdering, enableColumnResizing, enableDensePaddingToggle, enableExpandAll, enableFilters, enableFullScreenToggle, enableGlobalFilter, enableGrouping, enableHiding, enableMultiRowSelection, enablePagination, enablePinning, enableSelectAll, enableSorting, enableStickyHeader, enableTableFooter, enableTableHead, enableToolbarBottom, enableToolbarInternalActions, enableToolbarTop, icons, localization, persistentStateMode, positionActionsColumn, positionPagination, positionToolbarActions, positionToolbarAlertBanner, selectAllMode, ...rest }: MaterialReactTableProps<D>) => JSX.Element;
|
|
407
|
+
declare const _default: <D extends Record<string, any> = {}>({ autoResetExpanded, columnResizeMode, defaultColumn, editingMode, enableColumnActions, enableColumnFilters, enableColumnOrdering, enableColumnResizing, enableDensePaddingToggle, enableExpandAll, enableFilters, enableFullScreenToggle, enableGlobalFilter, enableGrouping, enableHiding, enableMultiRowSelection, enablePagination, enablePinning, enableSelectAll, enableSorting, enableStickyHeader, enableTableFooter, enableTableHead, enableToolbarBottom, enableToolbarInternalActions, enableToolbarTop, icons, localization, persistentStateMode, positionActionsColumn, positionPagination, positionGlobalFilter, positionToolbarActions, positionToolbarAlertBanner, selectAllMode, ...rest }: MaterialReactTableProps<D>) => JSX.Element;
|
|
404
408
|
export default _default;
|