material-react-table 0.8.15 → 0.9.0

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 (36) hide show
  1. package/README.md +1 -1
  2. package/dist/MaterialReactTable.d.ts +37 -36
  3. package/dist/material-react-table.cjs.development.js +97 -75
  4. package/dist/material-react-table.cjs.development.js.map +1 -1
  5. package/dist/material-react-table.cjs.production.min.js +1 -1
  6. package/dist/material-react-table.cjs.production.min.js.map +1 -1
  7. package/dist/material-react-table.esm.js +97 -75
  8. package/dist/material-react-table.esm.js.map +1 -1
  9. package/dist/toolbar/MRT_LinearProgressBar.d.ts +1 -0
  10. package/dist/utils.d.ts +1 -1
  11. package/package.json +1 -1
  12. package/src/MaterialReactTable.tsx +50 -47
  13. package/src/body/MRT_TableBodyCell.tsx +4 -4
  14. package/src/body/MRT_TableBodyRow.tsx +2 -2
  15. package/src/body/MRT_TableDetailPanel.tsx +2 -2
  16. package/src/buttons/MRT_EditActionButtons.tsx +2 -2
  17. package/src/buttons/MRT_ExpandButton.tsx +2 -2
  18. package/src/buttons/MRT_FullScreenToggleButton.tsx +2 -2
  19. package/src/buttons/MRT_ToggleDensePaddingButton.tsx +2 -2
  20. package/src/buttons/MRT_ToggleFiltersButton.tsx +2 -2
  21. package/src/buttons/MRT_ToggleGlobalFilterButton.tsx +4 -4
  22. package/src/head/MRT_TableHeadCellFilterLabel.tsx +1 -0
  23. package/src/inputs/MRT_EditCellTextField.tsx +8 -8
  24. package/src/inputs/MRT_FilterTextField.tsx +2 -2
  25. package/src/inputs/MRT_SearchTextField.tsx +4 -4
  26. package/src/inputs/MRT_SelectCheckbox.tsx +4 -4
  27. package/src/menus/MRT_ColumnActionMenu.tsx +2 -2
  28. package/src/menus/MRT_ShowHideColumnsMenu.tsx +1 -1
  29. package/src/menus/MRT_ShowHideColumnsMenuItems.tsx +2 -2
  30. package/src/table/MRT_TableContainer.tsx +3 -3
  31. package/src/table/MRT_TableRoot.tsx +11 -11
  32. package/src/toolbar/MRT_LinearProgressBar.tsx +17 -2
  33. package/src/toolbar/MRT_ToolbarBottom.tsx +4 -4
  34. package/src/toolbar/MRT_ToolbarInternalButtons.tsx +2 -1
  35. package/src/toolbar/MRT_ToolbarTop.tsx +13 -6
  36. 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
- idPrefix: string;
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
- onCellEditBlur?: ({ cell, event, tableInstance, }: {
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
- onCellEditChange?: ({ cell, event, tableInstance, }: {
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
- onColumnFilterValueChange?: ({ column, event, filterValue, }: {
142
+ onMrtFilterValueChange?: ({ column, event, filterValue, }: {
143
143
  column: MRT_Column<D>;
144
144
  event: ChangeEvent<HTMLInputElement>;
145
145
  filterValue: any;
@@ -192,7 +192,6 @@ export declare type MaterialReactTableProps<D extends Record<string, any> = {}>
192
192
  enabledColumnFilterOptions?: (MRT_FILTER_OPTION | string)[];
193
193
  enabledGlobalFilterOptions?: (MRT_FILTER_OPTION | string)[];
194
194
  icons?: Partial<MRT_Icons>;
195
- idPrefix?: string;
196
195
  localization?: Partial<MRT_Localization>;
197
196
  muiLinearProgressProps?: LinearProgressProps | (({ tableInstance, }: {
198
197
  tableInstance: MRT_TableInstance;
@@ -265,12 +264,12 @@ export declare type MaterialReactTableProps<D extends Record<string, any> = {}>
265
264
  tableInstance: MRT_TableInstance;
266
265
  headerGroup: MRT_HeaderGroup<D>;
267
266
  }) => TableRowProps);
268
- muiTablePaperProps?: PaperProps | (({ tableInstance, }: {
269
- tableInstance: MRT_TableInstance;
270
- }) => PaperProps);
271
267
  muiTablePaginationProps?: Partial<TablePaginationProps> | (({ tableInstance, }: {
272
268
  tableInstance: MRT_TableInstance;
273
269
  }) => Partial<TablePaginationProps>);
270
+ muiTablePaperProps?: PaperProps | (({ tableInstance, }: {
271
+ tableInstance: MRT_TableInstance;
272
+ }) => PaperProps);
274
273
  muiTableProps?: TableProps | (({ tableInstance, }: {
275
274
  tableInstance: MRT_TableInstance;
276
275
  }) => TableProps);
@@ -283,81 +282,81 @@ export declare type MaterialReactTableProps<D extends Record<string, any> = {}>
283
282
  muiTableToolbarTopProps?: ToolbarProps | (({ tableInstance, }: {
284
283
  tableInstance: MRT_TableInstance;
285
284
  }) => ToolbarProps);
286
- onCellClick?: ({ cell, event, tableInstance, }: {
285
+ onMrtCellClick?: ({ cell, event, tableInstance, }: {
287
286
  cell: MRT_Cell<D>;
288
287
  tableInstance: MRT_TableInstance<D>;
289
288
  event: MouseEvent<HTMLTableCellElement>;
290
289
  }) => void;
291
- onCellEditBlur?: ({ cell, event, tableInstance, }: {
290
+ onMrtCellEditBlur?: ({ cell, event, tableInstance, }: {
292
291
  event: FocusEvent<HTMLInputElement>;
293
292
  cell: MRT_Cell<D>;
294
293
  tableInstance: MRT_TableInstance<D>;
295
294
  }) => void;
296
- onCellEditChange?: ({ cell, event, tableInstance, }: {
295
+ onMrtCellEditChange?: ({ cell, event, tableInstance, }: {
297
296
  event: ChangeEvent<HTMLInputElement>;
298
297
  cell: MRT_Cell<D>;
299
298
  tableInstance: MRT_TableInstance<D>;
300
299
  }) => void;
301
- onColumnFilterValueChange?: ({ column, event, filterValue, }: {
302
- column: MRT_Column<D>;
303
- event: ChangeEvent<HTMLInputElement>;
304
- filterValue: any;
305
- }) => void;
306
- onDetailPanelClick?: ({ event, row, tableInstance, }: {
300
+ onMrtDetailPanelClick?: ({ event, row, tableInstance, }: {
307
301
  event: MouseEvent<HTMLTableCellElement>;
308
302
  row: MRT_Row<D>;
309
303
  tableInstance: MRT_TableInstance<D>;
310
304
  }) => void;
311
- onGlobalSearchFilterChange?: ({ event, tableInstance, }: {
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, }: {
312
315
  event: ChangeEvent<HTMLInputElement>;
313
316
  tableInstance: MRT_TableInstance<D>;
314
317
  }) => void;
315
- onRowClick?: ({ event, row, tableInstance, }: {
318
+ onMrtRowClick?: ({ event, row, tableInstance, }: {
316
319
  event: MouseEvent<HTMLTableRowElement>;
317
320
  row: MRT_Row<D>;
318
321
  tableInstance: MRT_TableInstance<D>;
319
322
  }) => void;
320
- onEditSubmit?: ({ row, tableInstance, }: {
321
- row: MRT_Row<D>;
322
- tableInstance: MRT_TableInstance<D>;
323
- }) => Promise<void> | void;
324
- onRowExpandChange?: ({ event, row, }: {
323
+ onMrtRowExpandChange?: ({ event, row, }: {
325
324
  event: MouseEvent<HTMLButtonElement>;
326
325
  row: MRT_Row<D>;
327
326
  tableInstance: MRT_TableInstance<D>;
328
327
  }) => void;
329
- onSelectAllChange?: ({ event, selectedRows, tableInstance, }: {
328
+ onMrtSelectAllChange?: ({ event, selectedRows, tableInstance, }: {
330
329
  event: ChangeEvent;
331
330
  selectedRows: MRT_Row<D>[];
332
331
  tableInstance: MRT_TableInstance<D>;
333
332
  }) => void;
334
- onSelectChange?: ({ event, row, selectedRows, tableInstance, }: {
333
+ onMrtSelectRowChange?: ({ event, row, selectedRows, tableInstance, }: {
335
334
  event: ChangeEvent;
336
335
  row: MRT_Row<D>;
337
336
  selectedRows: MRT_Row<D>[];
338
337
  tableInstance: MRT_TableInstance<D>;
339
338
  }) => void;
340
- onToggleColumnVisibility?: ({ column, columnVisibility, tableInstance, }: {
339
+ onMrtToggleColumnVisibility?: ({ column, columnVisibility, tableInstance, }: {
341
340
  column: MRT_Column<D>;
342
341
  columnVisibility: VisibilityState;
343
342
  tableInstance: MRT_TableInstance<D>;
344
343
  }) => void;
345
- onToggleDensePadding?: ({ event, isDensePadding, tableInstance, }: {
344
+ onMrtToggleDensePadding?: ({ event, isDensePadding, tableInstance, }: {
346
345
  event: MouseEvent<HTMLButtonElement>;
347
346
  isDensePadding: boolean;
348
347
  tableInstance: MRT_TableInstance<D>;
349
348
  }) => void;
350
- onToggleFullScreen?: ({ event, isFullScreen, tableInstance, }: {
349
+ onMrtToggleFullScreen?: ({ event, isFullScreen, tableInstance, }: {
351
350
  event: MouseEvent<HTMLButtonElement>;
352
351
  isFullScreen: boolean;
353
352
  tableInstance: MRT_TableInstance<D>;
354
353
  }) => void;
355
- onToggleShowFilters?: ({ event, showFilters, tableInstance, }: {
354
+ onMrtToggleShowFilters?: ({ event, showFilters, tableInstance, }: {
356
355
  event: MouseEvent<HTMLButtonElement>;
357
356
  showFilters: boolean;
358
357
  tableInstance: MRT_TableInstance<D>;
359
358
  }) => void;
360
- onToggleShowGlobalFilter?: ({ event, showGlobalFilter, tableInstance, }: {
359
+ onMrtToggleShowGlobalFilter?: ({ event, showGlobalFilter, tableInstance, }: {
361
360
  event: MouseEvent<HTMLButtonElement>;
362
361
  showGlobalFilter: boolean;
363
362
  tableInstance: MRT_TableInstance<D>;
@@ -365,6 +364,7 @@ export declare type MaterialReactTableProps<D extends Record<string, any> = {}>
365
364
  persistentStateMode?: 'localStorage' | 'sessionStorage';
366
365
  positionActionsColumn?: 'first' | 'last';
367
366
  positionPagination?: 'bottom' | 'top' | 'both';
367
+ positionGlobalFilter?: 'left' | 'right';
368
368
  positionToolbarActions?: 'bottom' | 'top';
369
369
  positionToolbarAlertBanner?: 'bottom' | 'top';
370
370
  renderDetailPanel?: ({ row, tableInstance, }: {
@@ -402,6 +402,7 @@ export declare type MaterialReactTableProps<D extends Record<string, any> = {}>
402
402
  }>;
403
403
  }) => ReactNode;
404
404
  selectAllMode?: 'all' | 'page';
405
+ tableId?: string;
405
406
  };
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;
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;
407
408
  export default _default;