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.
Files changed (41) hide show
  1. package/README.md +1 -1
  2. package/dist/MaterialReactTable.d.ts +38 -36
  3. package/dist/body/MRT_TableBody.d.ts +2 -1
  4. package/dist/material-react-table.cjs.development.js +630 -86
  5. package/dist/material-react-table.cjs.development.js.map +1 -1
  6. package/dist/material-react-table.cjs.production.min.js +1 -1
  7. package/dist/material-react-table.cjs.production.min.js.map +1 -1
  8. package/dist/material-react-table.esm.js +137 -84
  9. package/dist/material-react-table.esm.js.map +1 -1
  10. package/dist/table/MRT_Table.d.ts +2 -1
  11. package/dist/table/MRT_TableRoot.d.ts +1 -0
  12. package/dist/toolbar/MRT_LinearProgressBar.d.ts +1 -0
  13. package/dist/utils.d.ts +1 -1
  14. package/package.json +11 -10
  15. package/src/MaterialReactTable.tsx +51 -47
  16. package/src/body/MRT_TableBody.tsx +53 -14
  17. package/src/body/MRT_TableBodyCell.tsx +13 -9
  18. package/src/body/MRT_TableBodyRow.tsx +4 -3
  19. package/src/body/MRT_TableDetailPanel.tsx +2 -2
  20. package/src/buttons/MRT_EditActionButtons.tsx +2 -2
  21. package/src/buttons/MRT_ExpandButton.tsx +2 -2
  22. package/src/buttons/MRT_FullScreenToggleButton.tsx +2 -2
  23. package/src/buttons/MRT_ToggleDensePaddingButton.tsx +2 -2
  24. package/src/buttons/MRT_ToggleFiltersButton.tsx +2 -2
  25. package/src/buttons/MRT_ToggleGlobalFilterButton.tsx +4 -4
  26. package/src/head/MRT_TableHeadCellFilterLabel.tsx +1 -0
  27. package/src/inputs/MRT_EditCellTextField.tsx +8 -8
  28. package/src/inputs/MRT_FilterTextField.tsx +2 -2
  29. package/src/inputs/MRT_SearchTextField.tsx +4 -4
  30. package/src/inputs/MRT_SelectCheckbox.tsx +4 -4
  31. package/src/menus/MRT_ColumnActionMenu.tsx +2 -2
  32. package/src/menus/MRT_ShowHideColumnsMenu.tsx +1 -1
  33. package/src/menus/MRT_ShowHideColumnsMenuItems.tsx +2 -2
  34. package/src/table/MRT_Table.tsx +10 -3
  35. package/src/table/MRT_TableContainer.tsx +10 -4
  36. package/src/table/MRT_TableRoot.tsx +11 -11
  37. package/src/toolbar/MRT_LinearProgressBar.tsx +17 -2
  38. package/src/toolbar/MRT_ToolbarBottom.tsx +4 -4
  39. package/src/toolbar/MRT_ToolbarInternalButtons.tsx +2 -1
  40. package/src/toolbar/MRT_ToolbarTop.tsx +13 -6
  41. 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;
@@ -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
- onCellClick?: ({ cell, event, tableInstance, }: {
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
- onCellEditBlur?: ({ cell, event, tableInstance, }: {
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
- onCellEditChange?: ({ cell, event, tableInstance, }: {
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
- onColumnFilterValueChange?: ({ column, event, filterValue, }: {
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
- onGlobalSearchFilterChange?: ({ event, tableInstance, }: {
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
- onRowClick?: ({ event, row, tableInstance, }: {
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
- onEditSubmit?: ({ row, tableInstance, }: {
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
- onSelectAllChange?: ({ event, selectedRows, tableInstance, }: {
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
- onSelectChange?: ({ event, row, selectedRows, tableInstance, }: {
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
- onToggleColumnVisibility?: ({ column, columnVisibility, tableInstance, }: {
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
- onToggleDensePadding?: ({ event, isDensePadding, tableInstance, }: {
345
+ onMrtToggleDensePadding?: ({ event, isDensePadding, tableInstance, }: {
346
346
  event: MouseEvent<HTMLButtonElement>;
347
347
  isDensePadding: boolean;
348
348
  tableInstance: MRT_TableInstance<D>;
349
349
  }) => void;
350
- onToggleFullScreen?: ({ event, isFullScreen, tableInstance, }: {
350
+ onMrtToggleFullScreen?: ({ event, isFullScreen, tableInstance, }: {
351
351
  event: MouseEvent<HTMLButtonElement>;
352
352
  isFullScreen: boolean;
353
353
  tableInstance: MRT_TableInstance<D>;
354
354
  }) => void;
355
- onToggleShowFilters?: ({ event, showFilters, tableInstance, }: {
355
+ onMrtToggleShowFilters?: ({ event, showFilters, tableInstance, }: {
356
356
  event: MouseEvent<HTMLButtonElement>;
357
357
  showFilters: boolean;
358
358
  tableInstance: MRT_TableInstance<D>;
359
359
  }) => void;
360
- onToggleShowGlobalFilter?: ({ event, showGlobalFilter, tableInstance, }: {
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 {};