material-react-table 0.8.15 → 0.9.2
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 +1 -1
- package/dist/MaterialReactTable.d.ts +38 -36
- package/dist/body/MRT_TableBody.d.ts +2 -1
- package/dist/material-react-table.cjs.development.js +630 -86
- 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 +137 -84
- package/dist/material-react-table.esm.js.map +1 -1
- package/dist/table/MRT_Table.d.ts +2 -1
- package/dist/table/MRT_TableRoot.d.ts +1 -0
- package/dist/toolbar/MRT_LinearProgressBar.d.ts +1 -0
- package/dist/utils.d.ts +1 -1
- package/package.json +11 -10
- package/src/MaterialReactTable.tsx +51 -47
- package/src/body/MRT_TableBody.tsx +53 -14
- package/src/body/MRT_TableBodyCell.tsx +13 -9
- package/src/body/MRT_TableBodyRow.tsx +4 -3
- package/src/body/MRT_TableDetailPanel.tsx +2 -2
- 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/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 +1 -1
- package/src/menus/MRT_ShowHideColumnsMenuItems.tsx +2 -2
- package/src/table/MRT_Table.tsx +10 -3
- package/src/table/MRT_TableContainer.tsx +10 -4
- package/src/table/MRT_TableRoot.tsx +11 -11
- 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 +1 -1
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
|
|
|
@@ -38,7 +38,7 @@ export declare type MRT_TableInstance<D extends Record<string, any> = {}> = Omit
|
|
|
38
38
|
getState: () => MRT_TableState<D>;
|
|
39
39
|
options: MaterialReactTableProps<D> & {
|
|
40
40
|
icons: MRT_Icons;
|
|
41
|
-
|
|
41
|
+
tableId: string;
|
|
42
42
|
localization: MRT_Localization;
|
|
43
43
|
};
|
|
44
44
|
setCurrentEditingCell: Dispatch<SetStateAction<MRT_Cell | null>>;
|
|
@@ -66,6 +66,10 @@ export declare type MRT_TableState<D extends Record<string, any> = {}> = TableSt
|
|
|
66
66
|
showSkeletons: boolean;
|
|
67
67
|
};
|
|
68
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;
|
|
69
73
|
Edit?: ({ cell, tableInstance, }: {
|
|
70
74
|
cell: MRT_Cell<D>;
|
|
71
75
|
tableInstance: MRT_TableInstance<D>;
|
|
@@ -82,10 +86,6 @@ export declare type MRT_ColumnDef<D extends Record<string, any> = {}> = Omit<Col
|
|
|
82
86
|
header: MRT_Header<D>;
|
|
83
87
|
tableInstance: MRT_TableInstance<D>;
|
|
84
88
|
}) => ReactNode);
|
|
85
|
-
Cell?: ({ cell, tableInstance, }: {
|
|
86
|
-
cell: MRT_Cell<D>;
|
|
87
|
-
tableInstance: MRT_TableInstance<D>;
|
|
88
|
-
}) => ReactNode;
|
|
89
89
|
accessorFN?: (row: D) => any;
|
|
90
90
|
columns?: MRT_ColumnDef<D>[];
|
|
91
91
|
enableClickToCopy?: boolean;
|
|
@@ -129,17 +129,17 @@ export declare type MRT_ColumnDef<D extends Record<string, any> = {}> = Omit<Col
|
|
|
129
129
|
tableInstance: MRT_TableInstance;
|
|
130
130
|
column: MRT_Column<D>;
|
|
131
131
|
}) => TableCellProps);
|
|
132
|
-
|
|
132
|
+
onMrtCellEditBlur?: ({ cell, event, tableInstance, }: {
|
|
133
133
|
event: FocusEvent<HTMLInputElement>;
|
|
134
134
|
cell: MRT_Cell<D>;
|
|
135
135
|
tableInstance: MRT_TableInstance<D>;
|
|
136
136
|
}) => void;
|
|
137
|
-
|
|
137
|
+
onMrtCellEditChange?: ({ cell, event, tableInstance, }: {
|
|
138
138
|
event: ChangeEvent<HTMLInputElement>;
|
|
139
139
|
cell: MRT_Cell<D>;
|
|
140
140
|
tableInstance: MRT_TableInstance<D>;
|
|
141
141
|
}) => void;
|
|
142
|
-
|
|
142
|
+
onMrtFilterValueChange?: ({ column, event, filterValue, }: {
|
|
143
143
|
column: MRT_Column<D>;
|
|
144
144
|
event: ChangeEvent<HTMLInputElement>;
|
|
145
145
|
filterValue: any;
|
|
@@ -182,6 +182,7 @@ export declare type MaterialReactTableProps<D extends Record<string, any> = {}>
|
|
|
182
182
|
enablePersistentState?: boolean;
|
|
183
183
|
enableRowActions?: boolean;
|
|
184
184
|
enableRowNumbers?: boolean;
|
|
185
|
+
enableRowVirtualization?: boolean;
|
|
185
186
|
enableSelectAll?: boolean;
|
|
186
187
|
enableStickyHeader?: boolean;
|
|
187
188
|
enableTableFooter?: boolean;
|
|
@@ -192,7 +193,6 @@ export declare type MaterialReactTableProps<D extends Record<string, any> = {}>
|
|
|
192
193
|
enabledColumnFilterOptions?: (MRT_FILTER_OPTION | string)[];
|
|
193
194
|
enabledGlobalFilterOptions?: (MRT_FILTER_OPTION | string)[];
|
|
194
195
|
icons?: Partial<MRT_Icons>;
|
|
195
|
-
idPrefix?: string;
|
|
196
196
|
localization?: Partial<MRT_Localization>;
|
|
197
197
|
muiLinearProgressProps?: LinearProgressProps | (({ tableInstance, }: {
|
|
198
198
|
tableInstance: MRT_TableInstance;
|
|
@@ -265,12 +265,12 @@ export declare type MaterialReactTableProps<D extends Record<string, any> = {}>
|
|
|
265
265
|
tableInstance: MRT_TableInstance;
|
|
266
266
|
headerGroup: MRT_HeaderGroup<D>;
|
|
267
267
|
}) => TableRowProps);
|
|
268
|
-
muiTablePaperProps?: PaperProps | (({ tableInstance, }: {
|
|
269
|
-
tableInstance: MRT_TableInstance;
|
|
270
|
-
}) => PaperProps);
|
|
271
268
|
muiTablePaginationProps?: Partial<TablePaginationProps> | (({ tableInstance, }: {
|
|
272
269
|
tableInstance: MRT_TableInstance;
|
|
273
270
|
}) => Partial<TablePaginationProps>);
|
|
271
|
+
muiTablePaperProps?: PaperProps | (({ tableInstance, }: {
|
|
272
|
+
tableInstance: MRT_TableInstance;
|
|
273
|
+
}) => PaperProps);
|
|
274
274
|
muiTableProps?: TableProps | (({ tableInstance, }: {
|
|
275
275
|
tableInstance: MRT_TableInstance;
|
|
276
276
|
}) => TableProps);
|
|
@@ -283,81 +283,81 @@ export declare type MaterialReactTableProps<D extends Record<string, any> = {}>
|
|
|
283
283
|
muiTableToolbarTopProps?: ToolbarProps | (({ tableInstance, }: {
|
|
284
284
|
tableInstance: MRT_TableInstance;
|
|
285
285
|
}) => ToolbarProps);
|
|
286
|
-
|
|
286
|
+
onMrtCellClick?: ({ cell, event, tableInstance, }: {
|
|
287
287
|
cell: MRT_Cell<D>;
|
|
288
288
|
tableInstance: MRT_TableInstance<D>;
|
|
289
289
|
event: MouseEvent<HTMLTableCellElement>;
|
|
290
290
|
}) => void;
|
|
291
|
-
|
|
291
|
+
onMrtCellEditBlur?: ({ cell, event, tableInstance, }: {
|
|
292
292
|
event: FocusEvent<HTMLInputElement>;
|
|
293
293
|
cell: MRT_Cell<D>;
|
|
294
294
|
tableInstance: MRT_TableInstance<D>;
|
|
295
295
|
}) => void;
|
|
296
|
-
|
|
296
|
+
onMrtCellEditChange?: ({ cell, event, tableInstance, }: {
|
|
297
297
|
event: ChangeEvent<HTMLInputElement>;
|
|
298
298
|
cell: MRT_Cell<D>;
|
|
299
299
|
tableInstance: MRT_TableInstance<D>;
|
|
300
300
|
}) => void;
|
|
301
|
-
|
|
302
|
-
column: MRT_Column<D>;
|
|
303
|
-
event: ChangeEvent<HTMLInputElement>;
|
|
304
|
-
filterValue: any;
|
|
305
|
-
}) => void;
|
|
306
|
-
onDetailPanelClick?: ({ event, row, tableInstance, }: {
|
|
301
|
+
onMrtDetailPanelClick?: ({ event, row, tableInstance, }: {
|
|
307
302
|
event: MouseEvent<HTMLTableCellElement>;
|
|
308
303
|
row: MRT_Row<D>;
|
|
309
304
|
tableInstance: MRT_TableInstance<D>;
|
|
310
305
|
}) => void;
|
|
311
|
-
|
|
306
|
+
onMrtEditRowSubmit?: ({ row, tableInstance, }: {
|
|
307
|
+
row: MRT_Row<D>;
|
|
308
|
+
tableInstance: MRT_TableInstance<D>;
|
|
309
|
+
}) => Promise<void> | void;
|
|
310
|
+
onMrtFilterValueChange?: ({ column, event, filterValue, }: {
|
|
311
|
+
column: MRT_Column<D>;
|
|
312
|
+
event: ChangeEvent<HTMLInputElement>;
|
|
313
|
+
filterValue: any;
|
|
314
|
+
}) => void;
|
|
315
|
+
onMrtGlobalFilterValueChange?: ({ event, tableInstance, }: {
|
|
312
316
|
event: ChangeEvent<HTMLInputElement>;
|
|
313
317
|
tableInstance: MRT_TableInstance<D>;
|
|
314
318
|
}) => void;
|
|
315
|
-
|
|
319
|
+
onMrtRowClick?: ({ event, row, tableInstance, }: {
|
|
316
320
|
event: MouseEvent<HTMLTableRowElement>;
|
|
317
321
|
row: MRT_Row<D>;
|
|
318
322
|
tableInstance: MRT_TableInstance<D>;
|
|
319
323
|
}) => void;
|
|
320
|
-
|
|
321
|
-
row: MRT_Row<D>;
|
|
322
|
-
tableInstance: MRT_TableInstance<D>;
|
|
323
|
-
}) => Promise<void> | void;
|
|
324
|
-
onRowExpandChange?: ({ event, row, }: {
|
|
324
|
+
onMrtRowExpandChange?: ({ event, row, }: {
|
|
325
325
|
event: MouseEvent<HTMLButtonElement>;
|
|
326
326
|
row: MRT_Row<D>;
|
|
327
327
|
tableInstance: MRT_TableInstance<D>;
|
|
328
328
|
}) => void;
|
|
329
|
-
|
|
329
|
+
onMrtSelectAllChange?: ({ event, selectedRows, tableInstance, }: {
|
|
330
330
|
event: ChangeEvent;
|
|
331
331
|
selectedRows: MRT_Row<D>[];
|
|
332
332
|
tableInstance: MRT_TableInstance<D>;
|
|
333
333
|
}) => void;
|
|
334
|
-
|
|
334
|
+
onMrtSelectRowChange?: ({ event, row, selectedRows, tableInstance, }: {
|
|
335
335
|
event: ChangeEvent;
|
|
336
336
|
row: MRT_Row<D>;
|
|
337
337
|
selectedRows: MRT_Row<D>[];
|
|
338
338
|
tableInstance: MRT_TableInstance<D>;
|
|
339
339
|
}) => void;
|
|
340
|
-
|
|
340
|
+
onMrtToggleColumnVisibility?: ({ column, columnVisibility, tableInstance, }: {
|
|
341
341
|
column: MRT_Column<D>;
|
|
342
342
|
columnVisibility: VisibilityState;
|
|
343
343
|
tableInstance: MRT_TableInstance<D>;
|
|
344
344
|
}) => void;
|
|
345
|
-
|
|
345
|
+
onMrtToggleDensePadding?: ({ event, isDensePadding, tableInstance, }: {
|
|
346
346
|
event: MouseEvent<HTMLButtonElement>;
|
|
347
347
|
isDensePadding: boolean;
|
|
348
348
|
tableInstance: MRT_TableInstance<D>;
|
|
349
349
|
}) => void;
|
|
350
|
-
|
|
350
|
+
onMrtToggleFullScreen?: ({ event, isFullScreen, tableInstance, }: {
|
|
351
351
|
event: MouseEvent<HTMLButtonElement>;
|
|
352
352
|
isFullScreen: boolean;
|
|
353
353
|
tableInstance: MRT_TableInstance<D>;
|
|
354
354
|
}) => void;
|
|
355
|
-
|
|
355
|
+
onMrtToggleShowFilters?: ({ event, showFilters, tableInstance, }: {
|
|
356
356
|
event: MouseEvent<HTMLButtonElement>;
|
|
357
357
|
showFilters: boolean;
|
|
358
358
|
tableInstance: MRT_TableInstance<D>;
|
|
359
359
|
}) => void;
|
|
360
|
-
|
|
360
|
+
onMrtToggleShowGlobalFilter?: ({ event, showGlobalFilter, tableInstance, }: {
|
|
361
361
|
event: MouseEvent<HTMLButtonElement>;
|
|
362
362
|
showGlobalFilter: boolean;
|
|
363
363
|
tableInstance: MRT_TableInstance<D>;
|
|
@@ -365,6 +365,7 @@ export declare type MaterialReactTableProps<D extends Record<string, any> = {}>
|
|
|
365
365
|
persistentStateMode?: 'localStorage' | 'sessionStorage';
|
|
366
366
|
positionActionsColumn?: 'first' | 'last';
|
|
367
367
|
positionPagination?: 'bottom' | 'top' | 'both';
|
|
368
|
+
positionGlobalFilter?: 'left' | 'right';
|
|
368
369
|
positionToolbarActions?: 'bottom' | 'top';
|
|
369
370
|
positionToolbarAlertBanner?: 'bottom' | 'top';
|
|
370
371
|
renderDetailPanel?: ({ row, tableInstance, }: {
|
|
@@ -402,6 +403,7 @@ export declare type MaterialReactTableProps<D extends Record<string, any> = {}>
|
|
|
402
403
|
}>;
|
|
403
404
|
}) => ReactNode;
|
|
404
405
|
selectAllMode?: 'all' | 'page';
|
|
406
|
+
tableId?: string;
|
|
405
407
|
};
|
|
406
|
-
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;
|
|
408
|
+
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;
|
|
407
409
|
export default _default;
|
|
@@ -1,7 +1,8 @@
|
|
|
1
|
-
import { FC } from 'react';
|
|
1
|
+
import { FC, RefObject } from 'react';
|
|
2
2
|
import { MRT_TableInstance } from '..';
|
|
3
3
|
interface Props {
|
|
4
4
|
tableInstance: MRT_TableInstance;
|
|
5
|
+
tableContainerRef: RefObject<HTMLDivElement>;
|
|
5
6
|
}
|
|
6
7
|
export declare const MRT_TableBody: FC<Props>;
|
|
7
8
|
export {};
|