material-react-table 0.32.2 → 0.33.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 (31) hide show
  1. package/dist/cjs/MaterialReactTable.d.ts +21 -20
  2. package/dist/cjs/aggregationFns.d.ts +11 -0
  3. package/dist/cjs/column.utils.d.ts +77 -2
  4. package/dist/cjs/{filtersFns.d.ts → filterFns.d.ts} +0 -0
  5. package/dist/cjs/index.min.js +4 -5
  6. package/dist/cjs/index.min.js.map +1 -1
  7. package/dist/{esm/toolbar/MRT_ToolbarBottom.d.ts → cjs/toolbar/MRT_BottomToolbar.d.ts} +1 -1
  8. package/dist/{esm/toolbar/MRT_ToolbarTop.d.ts → cjs/toolbar/MRT_TopToolbar.d.ts} +1 -1
  9. package/dist/esm/MaterialReactTable.d.ts +21 -20
  10. package/dist/esm/aggregationFns.d.ts +11 -0
  11. package/dist/esm/column.utils.d.ts +77 -2
  12. package/dist/esm/{filtersFns.d.ts → filterFns.d.ts} +0 -0
  13. package/dist/esm/material-react-table.esm.min.js +4 -5
  14. package/dist/esm/material-react-table.esm.min.js.map +1 -1
  15. package/dist/{cjs/toolbar/MRT_ToolbarBottom.d.ts → esm/toolbar/MRT_BottomToolbar.d.ts} +1 -1
  16. package/dist/{cjs/toolbar/MRT_ToolbarTop.d.ts → esm/toolbar/MRT_TopToolbar.d.ts} +1 -1
  17. package/dist/index.d.ts +102 -101
  18. package/package.json +10 -10
  19. package/src/MaterialReactTable.tsx +43 -28
  20. package/src/aggregationFns.ts +3 -0
  21. package/src/body/MRT_TableBody.tsx +9 -8
  22. package/src/column.utils.ts +16 -8
  23. package/src/{filtersFns.ts → filterFns.ts} +0 -0
  24. package/src/head/MRT_TableHeadCellFilterContainer.tsx +2 -2
  25. package/src/head/MRT_TableHeadCellFilterLabel.tsx +2 -2
  26. package/src/inputs/MRT_FilterTextField.tsx +4 -4
  27. package/src/menus/MRT_FilterOptionMenu.tsx +6 -8
  28. package/src/table/MRT_TablePaper.tsx +5 -5
  29. package/src/table/MRT_TableRoot.tsx +20 -21
  30. package/src/toolbar/{MRT_ToolbarBottom.tsx → MRT_BottomToolbar.tsx} +10 -10
  31. package/src/toolbar/{MRT_ToolbarTop.tsx → MRT_TopToolbar.tsx} +8 -8
@@ -3,5 +3,5 @@ import { MRT_TableInstance } from '..';
3
3
  interface Props {
4
4
  table: MRT_TableInstance;
5
5
  }
6
- export declare const MRT_ToolbarBottom: FC<Props>;
6
+ export declare const MRT_BottomToolbar: FC<Props>;
7
7
  export {};
@@ -17,5 +17,5 @@ export declare const commonToolbarStyles: ({ theme }: {
17
17
  interface Props {
18
18
  table: MRT_TableInstance;
19
19
  }
20
- export declare const MRT_ToolbarTop: FC<Props>;
20
+ export declare const MRT_TopToolbar: FC<Props>;
21
21
  export {};
package/dist/index.d.ts CHANGED
@@ -1,92 +1,10 @@
1
1
  import { Dispatch, SetStateAction, ReactNode, FocusEvent, ChangeEvent, DragEvent, FC } from 'react';
2
- import { ButtonProps, TextFieldProps, TableCellProps, IconButtonProps, LinearProgressProps, CheckboxProps, SkeletonProps, TableBodyProps, TableRowProps, TableContainerProps, TableFooterProps, TableHeadProps, TablePaginationProps, PaperProps, TableProps, AlertProps, ToolbarProps } from '@mui/material';
2
+ import { ButtonProps, TextFieldProps, TableCellProps, IconButtonProps, LinearProgressProps, CheckboxProps, SkeletonProps, TableBodyProps, TableRowProps, ToolbarProps, TableContainerProps, TableFooterProps, TableHeadProps, TablePaginationProps, PaperProps, TableProps, AlertProps } from '@mui/material';
3
3
  import { Row, Table, TableState, ColumnDef, DeepKeys, Column, Header, HeaderGroup, Cell, SortingFn, FilterFn, TableOptions, OnChangeFn } from '@tanstack/react-table';
4
4
  import { VirtualizerOptions } from '@tanstack/react-virtual';
5
5
  import * as _tanstack_table_core from '@tanstack/table-core';
6
6
  import { RankingInfo } from '@tanstack/match-sorter-utils';
7
7
 
8
- interface MRT_Localization {
9
- actions: string;
10
- and: string;
11
- cancel: string;
12
- changeFilterMode: string;
13
- changeSearchMode: string;
14
- clearFilter: string;
15
- clearSearch: string;
16
- clearSort: string;
17
- clickToCopy: string;
18
- columnActions: string;
19
- copiedToClipboard: string;
20
- dropToGroupBy: string;
21
- edit: string;
22
- expand: string;
23
- expandAll: string;
24
- filterArrIncludes: string;
25
- filterArrIncludesAll: string;
26
- filterArrIncludesSome: string;
27
- filterBetween: string;
28
- filterBetweenInclusive: string;
29
- filterByColumn: string;
30
- filterContains: string;
31
- filterEmpty: string;
32
- filterEndsWith: string;
33
- filterEquals: string;
34
- filterEqualsString: string;
35
- filterFuzzy: string;
36
- filterGreaterThan: string;
37
- filterGreaterThanOrEqualTo: string;
38
- filterInNumberRange: string;
39
- filterIncludesString: string;
40
- filterIncludesStringSensitive: string;
41
- filterLessThan: string;
42
- filterLessThanOrEqualTo: string;
43
- filterMode: string;
44
- filterNotEmpty: string;
45
- filterNotEquals: string;
46
- filterStartsWith: string;
47
- filterWeakEquals: string;
48
- filteringByColumn: string;
49
- grab: string;
50
- groupByColumn: string;
51
- groupedBy: string;
52
- hideAll: string;
53
- hideColumn: string;
54
- max: string;
55
- min: string;
56
- move: string;
57
- or: string;
58
- pinToLeft: string;
59
- pinToRight: string;
60
- resetColumnSize: string;
61
- resetOrder: string;
62
- rowActions: string;
63
- rowNumber: string;
64
- rowNumbers: string;
65
- save: string;
66
- search: string;
67
- select: string;
68
- selectedCountOfRowCountRowsSelected: string;
69
- showAll: string;
70
- showAllColumns: string;
71
- showHideColumns: string;
72
- showHideFilters: string;
73
- showHideSearch: string;
74
- sortByColumnAsc: string;
75
- sortByColumnDesc: string;
76
- sortedByColumnAsc: string;
77
- sortedByColumnDesc: string;
78
- thenBy: string;
79
- toggleDensity: string;
80
- toggleFullScreen: string;
81
- toggleSelectAll: string;
82
- toggleSelectRow: string;
83
- toggleVisibility: string;
84
- ungroupByColumn: string;
85
- unpin: string;
86
- unpinAll: string;
87
- unsorted: string;
88
- }
89
-
90
8
  interface MRT_Icons {
91
9
  ArrowRightIcon: any;
92
10
  CancelIcon: any;
@@ -187,6 +105,88 @@ declare const MRT_FilterFns: {
187
105
  inNumberRange: _tanstack_table_core.FilterFn<any>;
188
106
  };
189
107
 
108
+ interface MRT_Localization {
109
+ actions: string;
110
+ and: string;
111
+ cancel: string;
112
+ changeFilterMode: string;
113
+ changeSearchMode: string;
114
+ clearFilter: string;
115
+ clearSearch: string;
116
+ clearSort: string;
117
+ clickToCopy: string;
118
+ columnActions: string;
119
+ copiedToClipboard: string;
120
+ dropToGroupBy: string;
121
+ edit: string;
122
+ expand: string;
123
+ expandAll: string;
124
+ filterArrIncludes: string;
125
+ filterArrIncludesAll: string;
126
+ filterArrIncludesSome: string;
127
+ filterBetween: string;
128
+ filterBetweenInclusive: string;
129
+ filterByColumn: string;
130
+ filterContains: string;
131
+ filterEmpty: string;
132
+ filterEndsWith: string;
133
+ filterEquals: string;
134
+ filterEqualsString: string;
135
+ filterFuzzy: string;
136
+ filterGreaterThan: string;
137
+ filterGreaterThanOrEqualTo: string;
138
+ filterInNumberRange: string;
139
+ filterIncludesString: string;
140
+ filterIncludesStringSensitive: string;
141
+ filterLessThan: string;
142
+ filterLessThanOrEqualTo: string;
143
+ filterMode: string;
144
+ filterNotEmpty: string;
145
+ filterNotEquals: string;
146
+ filterStartsWith: string;
147
+ filterWeakEquals: string;
148
+ filteringByColumn: string;
149
+ grab: string;
150
+ groupByColumn: string;
151
+ groupedBy: string;
152
+ hideAll: string;
153
+ hideColumn: string;
154
+ max: string;
155
+ min: string;
156
+ move: string;
157
+ or: string;
158
+ pinToLeft: string;
159
+ pinToRight: string;
160
+ resetColumnSize: string;
161
+ resetOrder: string;
162
+ rowActions: string;
163
+ rowNumber: string;
164
+ rowNumbers: string;
165
+ save: string;
166
+ search: string;
167
+ select: string;
168
+ selectedCountOfRowCountRowsSelected: string;
169
+ showAll: string;
170
+ showAllColumns: string;
171
+ showHideColumns: string;
172
+ showHideFilters: string;
173
+ showHideSearch: string;
174
+ sortByColumnAsc: string;
175
+ sortByColumnDesc: string;
176
+ sortedByColumnAsc: string;
177
+ sortedByColumnDesc: string;
178
+ thenBy: string;
179
+ toggleDensity: string;
180
+ toggleFullScreen: string;
181
+ toggleSelectAll: string;
182
+ toggleSelectRow: string;
183
+ toggleVisibility: string;
184
+ ungroupByColumn: string;
185
+ unpin: string;
186
+ unpinAll: string;
187
+ unsorted: string;
188
+ }
189
+
190
190
  declare const MRT_SortingFns: {
191
191
  fuzzy: <TData extends Record<string, any> = {}>(rowA: Row<TData>, rowB: Row<TData>, columnId: string) => number;
192
192
  alphanumeric: _tanstack_table_core.SortingFn<any>;
@@ -230,10 +230,10 @@ declare type MRT_TableInstance<TData extends Record<string, any> = {}> = Omit<Ta
230
230
  setCurrentDraggingRow: Dispatch<SetStateAction<MRT_Row<TData> | null>>;
231
231
  setCurrentEditingCell: Dispatch<SetStateAction<MRT_Cell | null>>;
232
232
  setCurrentEditingRow: Dispatch<SetStateAction<MRT_Row | null>>;
233
- setCurrentFilterFns: Dispatch<SetStateAction<{
233
+ setColumnFilterFns: Dispatch<SetStateAction<{
234
234
  [key: string]: MRT_FilterOption;
235
235
  }>>;
236
- setCurrentGlobalFilterFn: Dispatch<SetStateAction<MRT_FilterOption>>;
236
+ setGlobalFilterFn: Dispatch<SetStateAction<MRT_FilterOption>>;
237
237
  setCurrentHoveredColumn: Dispatch<SetStateAction<MRT_Column<TData> | {
238
238
  id: string;
239
239
  } | null>>;
@@ -251,8 +251,8 @@ declare type MRT_TableState<TData extends Record<string, any> = {}> = TableState
251
251
  currentDraggingRow: MRT_Row<TData> | null;
252
252
  currentEditingCell: MRT_Cell<TData> | null;
253
253
  currentEditingRow: MRT_Row<TData> | null;
254
- currentFilterFns: Record<string, MRT_FilterOption>;
255
- currentGlobalFilterFn: Record<string, MRT_FilterOption>;
254
+ columnFilterFns: Record<string, MRT_FilterOption>;
255
+ globalFilterFn: Record<string, MRT_FilterOption>;
256
256
  currentHoveredColumn: MRT_Column<TData> | {
257
257
  id: string;
258
258
  } | null;
@@ -442,7 +442,7 @@ declare type MRT_DisplayColumnIds = 'mrt-row-drag' | 'mrt-row-actions' | 'mrt-ro
442
442
  * See the full props list on the official docs site:
443
443
  * @link https://www.material-react-table.com/docs/api/props
444
444
  */
445
- declare type MaterialReactTableProps<TData extends Record<string, any> = {}> = Omit<Partial<TableOptions<TData>>, 'columns' | 'data' | 'initialState' | 'state' | 'expandRowsFn'> & {
445
+ declare type MaterialReactTableProps<TData extends Record<string, any> = {}> = Omit<Partial<TableOptions<TData>>, 'columns' | 'data' | 'expandRowsFn' | 'initialState' | 'onStateChange' | 'state'> & {
446
446
  displayColumnDefOptions?: Partial<{
447
447
  [key in MRT_DisplayColumnIds]: Partial<MRT_ColumnDef>;
448
448
  }>;
@@ -450,6 +450,7 @@ declare type MaterialReactTableProps<TData extends Record<string, any> = {}> = O
450
450
  columns: MRT_ColumnDef<TData>[];
451
451
  data: TData[];
452
452
  editingMode?: 'table' | 'row' | 'cell';
453
+ enableBottomToolbar?: boolean;
453
454
  enableClickToCopy?: boolean;
454
455
  enableColumnActions?: boolean;
455
456
  enableColumnDragging?: boolean;
@@ -471,9 +472,8 @@ declare type MaterialReactTableProps<TData extends Record<string, any> = {}> = O
471
472
  enableStickyHeader?: boolean;
472
473
  enableTableFooter?: boolean;
473
474
  enableTableHead?: boolean;
474
- enableToolbarBottom?: boolean;
475
475
  enableToolbarInternalActions?: boolean;
476
- enableToolbarTop?: boolean;
476
+ enableTopToolbar?: boolean;
477
477
  enabledGlobalFilterOptions?: (MRT_FilterOption | string)[] | null;
478
478
  expandRowsFn?: (dataRow: TData) => TData[];
479
479
  icons?: Partial<MRT_Icons>;
@@ -527,6 +527,9 @@ declare type MaterialReactTableProps<TData extends Record<string, any> = {}> = O
527
527
  table: MRT_TableInstance<TData>;
528
528
  row: MRT_Row<TData>;
529
529
  }) => TableRowProps);
530
+ muiTableBottomToolbarProps?: ToolbarProps | (({ table }: {
531
+ table: MRT_TableInstance<TData>;
532
+ }) => ToolbarProps);
530
533
  muiTableContainerProps?: TableContainerProps | (({ table, }: {
531
534
  table: MRT_TableInstance<TData>;
532
535
  }) => TableContainerProps);
@@ -581,10 +584,7 @@ declare type MaterialReactTableProps<TData extends Record<string, any> = {}> = O
581
584
  muiTableToolbarAlertBannerProps?: AlertProps | (({ table }: {
582
585
  table: MRT_TableInstance<TData>;
583
586
  }) => AlertProps);
584
- muiTableToolbarBottomProps?: ToolbarProps | (({ table }: {
585
- table: MRT_TableInstance<TData>;
586
- }) => ToolbarProps);
587
- muiTableToolbarTopProps?: ToolbarProps | (({ table }: {
587
+ muiTableTopToolbarProps?: ToolbarProps | (({ table }: {
588
588
  table: MRT_TableInstance<TData>;
589
589
  }) => ToolbarProps);
590
590
  onCellEditBlur?: ({ cell, event, table, }: {
@@ -630,13 +630,15 @@ declare type MaterialReactTableProps<TData extends Record<string, any> = {}> = O
630
630
  onShowAlertBannerChange?: OnChangeFn<boolean>;
631
631
  onShowFiltersChange?: OnChangeFn<boolean>;
632
632
  onShowGlobalFilterChange?: OnChangeFn<boolean>;
633
- onTableInstanceChange?: (table: MRT_TableInstance<TData>) => void;
634
633
  positionActionsColumn?: 'first' | 'last';
635
634
  positionExpandColumn?: 'first' | 'last';
636
635
  positionGlobalFilter?: 'left' | 'right';
637
636
  positionPagination?: 'bottom' | 'top' | 'both';
638
637
  positionToolbarAlertBanner?: 'bottom' | 'top' | 'none';
639
638
  positionToolbarDropZone?: 'bottom' | 'top' | 'none' | 'both';
639
+ renderBottomToolbarCustomActions?: ({ table, }: {
640
+ table: MRT_TableInstance<TData>;
641
+ }) => ReactNode;
640
642
  renderDetailPanel?: ({ row, table, }: {
641
643
  row: MRT_Row<TData>;
642
644
  table: MRT_TableInstance<TData>;
@@ -650,9 +652,6 @@ declare type MaterialReactTableProps<TData extends Record<string, any> = {}> = O
650
652
  row: MRT_Row<TData>;
651
653
  table: MRT_TableInstance<TData>;
652
654
  }) => ReactNode;
653
- renderToolbarBottomCustomActions?: ({ table, }: {
654
- table: MRT_TableInstance<TData>;
655
- }) => ReactNode;
656
655
  renderToolbarInternalActions?: ({ table, MRT_ToggleGlobalFilterButton, MRT_ToggleFiltersButton, MRT_ShowHideColumnsButton, MRT_ToggleDensePaddingButton, MRT_FullScreenToggleButton, }: {
657
656
  table: MRT_TableInstance<TData>;
658
657
  MRT_ToggleGlobalFilterButton: FC<IconButtonProps & {
@@ -671,7 +670,7 @@ declare type MaterialReactTableProps<TData extends Record<string, any> = {}> = O
671
670
  table: MRT_TableInstance<TData>;
672
671
  }>;
673
672
  }) => ReactNode;
674
- renderToolbarTopCustomActions?: ({ table, }: {
673
+ renderTopToolbarCustomActions?: ({ table, }: {
675
674
  table: MRT_TableInstance<TData>;
676
675
  }) => ReactNode;
677
676
  rowCount?: number;
@@ -679,8 +678,10 @@ declare type MaterialReactTableProps<TData extends Record<string, any> = {}> = O
679
678
  selectAllMode?: 'all' | 'page';
680
679
  state?: Partial<MRT_TableState<TData>>;
681
680
  tableId?: string;
682
- virtualizerProps?: Partial<VirtualizerOptions<HTMLDivElement, HTMLTableRowElement>>;
681
+ virtualizerProps?: Partial<VirtualizerOptions<HTMLDivElement, HTMLTableRowElement>> | (({ table, }: {
682
+ table: MRT_TableInstance<TData>;
683
+ }) => Partial<VirtualizerOptions<HTMLDivElement, HTMLTableRowElement>>);
683
684
  };
684
- declare const _default: <TData extends Record<string, any> = {}>({ autoResetExpanded, columnResizeMode, defaultColumn, editingMode, enableColumnActions, enableColumnFilterChangeMode, enableColumnFilters, enableColumnOrdering, enableColumnResizing, enableDensityToggle, enableExpandAll, enableFilters, enableFullScreenToggle, enableGlobalFilter, enableGlobalFilterChangeMode, enableGlobalFilterRankedResults, enableGrouping, enableHiding, enableMultiRowSelection, enableMultiSort, enablePagination, enablePinning, enableRowSelection, enableSelectAll, enableSorting, enableStickyHeader, enableTableFooter, enableTableHead, enableToolbarBottom, enableToolbarInternalActions, enableToolbarTop, icons, localization, positionActionsColumn, positionExpandColumn, positionGlobalFilter, positionPagination, positionToolbarAlertBanner, positionToolbarDropZone, rowNumberMode, selectAllMode, ...rest }: MaterialReactTableProps<TData>) => JSX.Element;
685
+ declare const _default: <TData extends Record<string, any> = {}>({ aggregationFns, autoResetExpanded, columnResizeMode, defaultColumn, editingMode, enableBottomToolbar, enableColumnActions, enableColumnFilterChangeMode, enableColumnFilters, enableColumnOrdering, enableColumnResizing, enableDensityToggle, enableExpandAll, enableFilters, enableFullScreenToggle, enableGlobalFilter, enableGlobalFilterChangeMode, enableGlobalFilterRankedResults, enableGrouping, enableHiding, enableMultiRowSelection, enableMultiSort, enablePagination, enablePinning, enableRowSelection, enableSelectAll, enableSorting, enableStickyHeader, enableTableFooter, enableTableHead, enableToolbarInternalActions, enableTopToolbar, filterFns, icons, localization, positionActionsColumn, positionExpandColumn, positionGlobalFilter, positionPagination, positionToolbarAlertBanner, positionToolbarDropZone, rowNumberMode, selectAllMode, sortingFns, ...rest }: MaterialReactTableProps<TData>) => JSX.Element;
685
686
 
686
687
  export { MRT_Cell, MRT_Column, MRT_ColumnDef, MRT_DefinedColumnDef, MRT_DisplayColumnIds, MRT_FilterFn, MRT_FilterOption, MRT_Header, MRT_HeaderGroup, MRT_Icons, MRT_Localization, MRT_Row, MRT_RowModel, MRT_SortingFn, MRT_SortingOption, MRT_TableInstance, MRT_TableState, MaterialReactTableProps, _default as default };
package/package.json CHANGED
@@ -1,5 +1,5 @@
1
1
  {
2
- "version": "0.32.2",
2
+ "version": "0.33.2",
3
3
  "license": "MIT",
4
4
  "name": "material-react-table",
5
5
  "description": "A fully featured Material UI V5 implementation of TanStack React Table V8, written from the ground up in TypeScript.",
@@ -60,14 +60,14 @@
60
60
  "@rollup/plugin-node-resolve": "^13.3.0",
61
61
  "@rollup/plugin-typescript": "^8.3.4",
62
62
  "@size-limit/preset-small-lib": "^8.0.0",
63
- "@storybook/addon-a11y": "^6.5.9",
64
- "@storybook/addon-actions": "^6.5.9",
65
- "@storybook/addon-essentials": "^6.5.9",
63
+ "@storybook/addon-a11y": "^6.5.10",
64
+ "@storybook/addon-actions": "^6.5.10",
65
+ "@storybook/addon-essentials": "^6.5.10",
66
66
  "@storybook/addon-info": "^5.3.21",
67
- "@storybook/addon-links": "^6.5.9",
68
- "@storybook/addon-storysource": "^6.5.9",
69
- "@storybook/addons": "^6.5.9",
70
- "@storybook/react": "^6.5.9",
67
+ "@storybook/addon-links": "^6.5.10",
68
+ "@storybook/addon-storysource": "^6.5.10",
69
+ "@storybook/addons": "^6.5.10",
70
+ "@storybook/react": "^6.5.10",
71
71
  "@types/react": "^18.0.15",
72
72
  "@types/react-dom": "^18.0.6",
73
73
  "babel-loader": "^8.2.5",
@@ -96,7 +96,7 @@
96
96
  },
97
97
  "dependencies": {
98
98
  "@tanstack/match-sorter-utils": "8.1.1",
99
- "@tanstack/react-table": "8.5.5",
100
- "@tanstack/react-virtual": "^3.0.0-beta.14"
99
+ "@tanstack/react-table": "8.5.10",
100
+ "@tanstack/react-virtual": "^3.0.0-beta.17"
101
101
  }
102
102
  }
@@ -42,11 +42,12 @@ import type {
42
42
  TableState,
43
43
  } from '@tanstack/react-table';
44
44
  import type { VirtualizerOptions } from '@tanstack/react-virtual';
45
- import { MRT_Localization, MRT_DefaultLocalization_EN } from './localization';
45
+ import { MRT_AggregationFns } from './aggregationFns';
46
46
  import { MRT_Default_Icons, MRT_Icons } from './icons';
47
- import { MRT_TableRoot } from './table/MRT_TableRoot';
48
- import { MRT_FilterFns } from './filtersFns';
47
+ import { MRT_FilterFns } from './filterFns';
48
+ import { MRT_Localization, MRT_DefaultLocalization_EN } from './localization';
49
49
  import { MRT_SortingFns } from './sortingFns';
50
+ import { MRT_TableRoot } from './table/MRT_TableRoot';
50
51
 
51
52
  type LiteralUnion<T extends U, U = string> = T | (U & Record<never, never>);
52
53
 
@@ -99,12 +100,12 @@ export type MRT_TableInstance<TData extends Record<string, any> = {}> = Omit<
99
100
  setCurrentDraggingRow: Dispatch<SetStateAction<MRT_Row<TData> | null>>;
100
101
  setCurrentEditingCell: Dispatch<SetStateAction<MRT_Cell | null>>;
101
102
  setCurrentEditingRow: Dispatch<SetStateAction<MRT_Row | null>>;
102
- setCurrentFilterFns: Dispatch<
103
+ setColumnFilterFns: Dispatch<
103
104
  SetStateAction<{
104
105
  [key: string]: MRT_FilterOption;
105
106
  }>
106
107
  >;
107
- setCurrentGlobalFilterFn: Dispatch<SetStateAction<MRT_FilterOption>>;
108
+ setGlobalFilterFn: Dispatch<SetStateAction<MRT_FilterOption>>;
108
109
  setCurrentHoveredColumn: Dispatch<
109
110
  SetStateAction<MRT_Column<TData> | { id: string } | null>
110
111
  >;
@@ -124,8 +125,8 @@ export type MRT_TableState<TData extends Record<string, any> = {}> =
124
125
  currentDraggingRow: MRT_Row<TData> | null;
125
126
  currentEditingCell: MRT_Cell<TData> | null;
126
127
  currentEditingRow: MRT_Row<TData> | null;
127
- currentFilterFns: Record<string, MRT_FilterOption>;
128
- currentGlobalFilterFn: Record<string, MRT_FilterOption>;
128
+ columnFilterFns: Record<string, MRT_FilterOption>;
129
+ globalFilterFn: Record<string, MRT_FilterOption>;
129
130
  currentHoveredColumn: MRT_Column<TData> | { id: string } | null;
130
131
  currentHoveredRow: MRT_Row<TData> | { id: string } | null;
131
132
  density: 'comfortable' | 'compact' | 'spacious';
@@ -442,7 +443,12 @@ export type MRT_DisplayColumnIds =
442
443
  export type MaterialReactTableProps<TData extends Record<string, any> = {}> =
443
444
  Omit<
444
445
  Partial<TableOptions<TData>>,
445
- 'columns' | 'data' | 'initialState' | 'state' | 'expandRowsFn'
446
+ | 'columns'
447
+ | 'data'
448
+ | 'expandRowsFn'
449
+ | 'initialState'
450
+ | 'onStateChange'
451
+ | 'state'
446
452
  > & {
447
453
  displayColumnDefOptions?: Partial<{
448
454
  [key in MRT_DisplayColumnIds]: Partial<MRT_ColumnDef>;
@@ -451,6 +457,7 @@ export type MaterialReactTableProps<TData extends Record<string, any> = {}> =
451
457
  columns: MRT_ColumnDef<TData>[];
452
458
  data: TData[];
453
459
  editingMode?: 'table' | 'row' | 'cell';
460
+ enableBottomToolbar?: boolean;
454
461
  enableClickToCopy?: boolean;
455
462
  enableColumnActions?: boolean;
456
463
  enableColumnDragging?: boolean;
@@ -472,9 +479,8 @@ export type MaterialReactTableProps<TData extends Record<string, any> = {}> =
472
479
  enableStickyHeader?: boolean;
473
480
  enableTableFooter?: boolean;
474
481
  enableTableHead?: boolean;
475
- enableToolbarBottom?: boolean;
476
482
  enableToolbarInternalActions?: boolean;
477
- enableToolbarTop?: boolean;
483
+ enableTopToolbar?: boolean;
478
484
  enabledGlobalFilterOptions?: (MRT_FilterOption | string)[] | null;
479
485
  expandRowsFn?: (dataRow: TData) => TData[];
480
486
  icons?: Partial<MRT_Icons>;
@@ -572,6 +578,9 @@ export type MaterialReactTableProps<TData extends Record<string, any> = {}> =
572
578
  table: MRT_TableInstance<TData>;
573
579
  row: MRT_Row<TData>;
574
580
  }) => TableRowProps);
581
+ muiTableBottomToolbarProps?:
582
+ | ToolbarProps
583
+ | (({ table }: { table: MRT_TableInstance<TData> }) => ToolbarProps);
575
584
  muiTableContainerProps?:
576
585
  | TableContainerProps
577
586
  | (({
@@ -675,10 +684,7 @@ export type MaterialReactTableProps<TData extends Record<string, any> = {}> =
675
684
  muiTableToolbarAlertBannerProps?:
676
685
  | AlertProps
677
686
  | (({ table }: { table: MRT_TableInstance<TData> }) => AlertProps);
678
- muiTableToolbarBottomProps?:
679
- | ToolbarProps
680
- | (({ table }: { table: MRT_TableInstance<TData> }) => ToolbarProps);
681
- muiTableToolbarTopProps?:
687
+ muiTableTopToolbarProps?:
682
688
  | ToolbarProps
683
689
  | (({ table }: { table: MRT_TableInstance<TData> }) => ToolbarProps);
684
690
  onCellEditBlur?: ({
@@ -737,13 +743,17 @@ export type MaterialReactTableProps<TData extends Record<string, any> = {}> =
737
743
  onShowAlertBannerChange?: OnChangeFn<boolean>;
738
744
  onShowFiltersChange?: OnChangeFn<boolean>;
739
745
  onShowGlobalFilterChange?: OnChangeFn<boolean>;
740
- onTableInstanceChange?: (table: MRT_TableInstance<TData>) => void;
741
746
  positionActionsColumn?: 'first' | 'last';
742
747
  positionExpandColumn?: 'first' | 'last';
743
748
  positionGlobalFilter?: 'left' | 'right';
744
749
  positionPagination?: 'bottom' | 'top' | 'both';
745
750
  positionToolbarAlertBanner?: 'bottom' | 'top' | 'none';
746
751
  positionToolbarDropZone?: 'bottom' | 'top' | 'none' | 'both';
752
+ renderBottomToolbarCustomActions?: ({
753
+ table,
754
+ }: {
755
+ table: MRT_TableInstance<TData>;
756
+ }) => ReactNode;
747
757
  renderDetailPanel?: ({
748
758
  row,
749
759
  table,
@@ -767,11 +777,6 @@ export type MaterialReactTableProps<TData extends Record<string, any> = {}> =
767
777
  row: MRT_Row<TData>;
768
778
  table: MRT_TableInstance<TData>;
769
779
  }) => ReactNode;
770
- renderToolbarBottomCustomActions?: ({
771
- table,
772
- }: {
773
- table: MRT_TableInstance<TData>;
774
- }) => ReactNode;
775
780
  renderToolbarInternalActions?: ({
776
781
  table,
777
782
  MRT_ToggleGlobalFilterButton,
@@ -797,7 +802,7 @@ export type MaterialReactTableProps<TData extends Record<string, any> = {}> =
797
802
  IconButtonProps & { table: MRT_TableInstance<TData> }
798
803
  >;
799
804
  }) => ReactNode;
800
- renderToolbarTopCustomActions?: ({
805
+ renderTopToolbarCustomActions?: ({
801
806
  table,
802
807
  }: {
803
808
  table: MRT_TableInstance<TData>;
@@ -807,16 +812,22 @@ export type MaterialReactTableProps<TData extends Record<string, any> = {}> =
807
812
  selectAllMode?: 'all' | 'page';
808
813
  state?: Partial<MRT_TableState<TData>>;
809
814
  tableId?: string;
810
- virtualizerProps?: Partial<
811
- VirtualizerOptions<HTMLDivElement, HTMLTableRowElement>
812
- >;
815
+ virtualizerProps?:
816
+ | Partial<VirtualizerOptions<HTMLDivElement, HTMLTableRowElement>>
817
+ | (({
818
+ table,
819
+ }: {
820
+ table: MRT_TableInstance<TData>;
821
+ }) => Partial<VirtualizerOptions<HTMLDivElement, HTMLTableRowElement>>);
813
822
  };
814
823
 
815
824
  export default <TData extends Record<string, any> = {}>({
825
+ aggregationFns,
816
826
  autoResetExpanded = false,
817
827
  columnResizeMode = 'onEnd',
818
828
  defaultColumn = { minSize: 40, maxSize: 1000, size: 180 },
819
829
  editingMode = 'row',
830
+ enableBottomToolbar = true,
820
831
  enableColumnActions = true,
821
832
  enableColumnFilterChangeMode = false,
822
833
  enableColumnFilters = true,
@@ -841,9 +852,9 @@ export default <TData extends Record<string, any> = {}>({
841
852
  enableStickyHeader = false,
842
853
  enableTableFooter = true,
843
854
  enableTableHead = true,
844
- enableToolbarBottom = true,
845
855
  enableToolbarInternalActions = true,
846
- enableToolbarTop = true,
856
+ enableTopToolbar = true,
857
+ filterFns,
847
858
  icons,
848
859
  localization,
849
860
  positionActionsColumn = 'first',
@@ -854,13 +865,16 @@ export default <TData extends Record<string, any> = {}>({
854
865
  positionToolbarDropZone = 'top',
855
866
  rowNumberMode = 'original',
856
867
  selectAllMode = 'all',
868
+ sortingFns,
857
869
  ...rest
858
870
  }: MaterialReactTableProps<TData>) => (
859
871
  <MRT_TableRoot
872
+ aggregationFns={{ ...MRT_AggregationFns, ...aggregationFns }}
860
873
  autoResetExpanded={autoResetExpanded}
861
874
  columnResizeMode={columnResizeMode}
862
875
  defaultColumn={defaultColumn}
863
876
  editingMode={editingMode}
877
+ enableBottomToolbar={enableBottomToolbar}
864
878
  enableColumnActions={enableColumnActions}
865
879
  enableColumnFilterChangeMode={enableColumnFilterChangeMode}
866
880
  enableColumnFilters={enableColumnFilters}
@@ -885,9 +899,9 @@ export default <TData extends Record<string, any> = {}>({
885
899
  enableStickyHeader={enableStickyHeader}
886
900
  enableTableFooter={enableTableFooter}
887
901
  enableTableHead={enableTableHead}
888
- enableToolbarBottom={enableToolbarBottom}
889
902
  enableToolbarInternalActions={enableToolbarInternalActions}
890
- enableToolbarTop={enableToolbarTop}
903
+ enableTopToolbar={enableTopToolbar}
904
+ filterFns={{ ...MRT_FilterFns, ...filterFns }}
891
905
  icons={{ ...MRT_Default_Icons, ...icons }}
892
906
  localization={{ ...MRT_DefaultLocalization_EN, ...localization }}
893
907
  positionActionsColumn={positionActionsColumn}
@@ -898,6 +912,7 @@ export default <TData extends Record<string, any> = {}>({
898
912
  positionToolbarDropZone={positionToolbarDropZone}
899
913
  rowNumberMode={rowNumberMode}
900
914
  selectAllMode={selectAllMode}
915
+ sortingFns={{ ...MRT_SortingFns, ...sortingFns }}
901
916
  {...rest}
902
917
  />
903
918
  );
@@ -0,0 +1,3 @@
1
+ import { aggregationFns } from '@tanstack/react-table';
2
+
3
+ export const MRT_AggregationFns = { ...aggregationFns };
@@ -30,21 +30,22 @@ export const MRT_TableBody: FC<Props> = ({ table, tableContainerRef }) => {
30
30
  ? muiTableBodyProps({ table })
31
31
  : muiTableBodyProps;
32
32
 
33
- const getIsSomeColumnsSorted = () => {
34
- return Object.values(sorting).some(Boolean);
35
- };
33
+ const vProps =
34
+ virtualizerProps instanceof Function
35
+ ? virtualizerProps({ table })
36
+ : virtualizerProps;
36
37
 
37
38
  const rows = useMemo(() => {
38
39
  if (
39
40
  enableGlobalFilterRankedResults &&
40
41
  globalFilter &&
41
- !getIsSomeColumnsSorted()
42
+ !Object.values(sorting).some(Boolean)
42
43
  ) {
43
44
  const rankedRows = getPrePaginationRowModel().rows.sort((a, b) =>
44
45
  rankGlobalFuzzy(a, b),
45
46
  );
46
47
  if (enablePagination) {
47
- return rankedRows.slice(0, pagination.pageSize);
48
+ return rankedRows.slice(pagination.pageIndex, pagination.pageSize);
48
49
  }
49
50
  return rankedRows;
50
51
  }
@@ -62,11 +63,11 @@ export const MRT_TableBody: FC<Props> = ({ table, tableContainerRef }) => {
62
63
 
63
64
  const rowVirtualizer: Virtualizer = enableRowVirtualization
64
65
  ? useVirtualizer({
66
+ count: rows.length,
65
67
  estimateSize: () => (density === 'compact' ? 25 : 50),
66
- overscan: density === 'compact' ? 30 : 10,
67
68
  getScrollElement: () => tableContainerRef.current as HTMLDivElement,
68
- count: rows.length,
69
- ...virtualizerProps,
69
+ overscan: density === 'compact' ? 30 : 10,
70
+ ...vProps,
70
71
  })
71
72
  : ({} as any);
72
73
 
@@ -7,7 +7,7 @@ import {
7
7
  MRT_DisplayColumnIds,
8
8
  MRT_FilterOption,
9
9
  } from '.';
10
- import { MRT_FilterFns } from './filtersFns';
10
+ import { MRT_FilterFns } from './filterFns';
11
11
  import { MRT_SortingFns } from './sortingFns';
12
12
 
13
13
  export const defaultDisplayColumnDefOptions = {
@@ -50,7 +50,10 @@ export const getAllLeafColumnDefs = <TData extends Record<string, any> = {}>(
50
50
 
51
51
  export const prepareColumns = <TData extends Record<string, any> = {}>(
52
52
  columnDefs: MRT_ColumnDef<TData>[],
53
- currentFilterFns: { [key: string]: MRT_FilterOption },
53
+ columnFilterFns: { [key: string]: MRT_FilterOption },
54
+ filterFns: typeof MRT_FilterFns & MaterialReactTableProps<TData>['filterFns'],
55
+ sortingFns: typeof MRT_SortingFns &
56
+ MaterialReactTableProps<TData>['sortingFns'],
54
57
  ): MRT_DefinedColumnDef<TData>[] =>
55
58
  columnDefs.map((columnDef) => {
56
59
  if (!columnDef.id) columnDef.id = getColumnId(columnDef);
@@ -62,18 +65,23 @@ export const prepareColumns = <TData extends Record<string, any> = {}>(
62
65
  if (!columnDef.columnDefType) columnDef.columnDefType = 'data';
63
66
  if (!!columnDef.columns?.length) {
64
67
  columnDef.columnDefType = 'group';
65
- columnDef.columns = prepareColumns(columnDef.columns, currentFilterFns);
68
+ columnDef.columns = prepareColumns(
69
+ columnDef.columns,
70
+ columnFilterFns,
71
+ filterFns,
72
+ sortingFns,
73
+ );
66
74
  } else if (columnDef.columnDefType === 'data') {
67
- if (Object.keys(MRT_FilterFns).includes(currentFilterFns[columnDef.id])) {
75
+ if (Object.keys(filterFns).includes(columnFilterFns[columnDef.id])) {
68
76
  columnDef.filterFn =
69
77
  // @ts-ignore
70
- MRT_FilterFns[currentFilterFns[columnDef.id]] ?? MRT_FilterFns.fuzzy;
78
+ filterFns[columnFilterFns[columnDef.id]] ?? filterFns.fuzzy;
71
79
  //@ts-ignore
72
- columnDef._filterFn = currentFilterFns[columnDef.id];
80
+ columnDef._filterFn = columnFilterFns[columnDef.id];
73
81
  }
74
- if (Object.keys(MRT_SortingFns).includes(columnDef.sortingFn as string)) {
82
+ if (Object.keys(sortingFns).includes(columnDef.sortingFn as string)) {
75
83
  // @ts-ignore
76
- columnDef.sortingFn = MRT_SortingFns[columnDef.sortingFn];
84
+ columnDef.sortingFn = sortingFns[columnDef.sortingFn];
77
85
  }
78
86
  } else if (columnDef.columnDefType === 'display') {
79
87
  columnDef = {
File without changes