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.
- package/dist/cjs/MaterialReactTable.d.ts +21 -20
- package/dist/cjs/aggregationFns.d.ts +11 -0
- package/dist/cjs/column.utils.d.ts +77 -2
- package/dist/cjs/{filtersFns.d.ts → filterFns.d.ts} +0 -0
- package/dist/cjs/index.min.js +4 -5
- package/dist/cjs/index.min.js.map +1 -1
- package/dist/{esm/toolbar/MRT_ToolbarBottom.d.ts → cjs/toolbar/MRT_BottomToolbar.d.ts} +1 -1
- package/dist/{esm/toolbar/MRT_ToolbarTop.d.ts → cjs/toolbar/MRT_TopToolbar.d.ts} +1 -1
- package/dist/esm/MaterialReactTable.d.ts +21 -20
- package/dist/esm/aggregationFns.d.ts +11 -0
- package/dist/esm/column.utils.d.ts +77 -2
- package/dist/esm/{filtersFns.d.ts → filterFns.d.ts} +0 -0
- package/dist/esm/material-react-table.esm.min.js +4 -5
- package/dist/esm/material-react-table.esm.min.js.map +1 -1
- package/dist/{cjs/toolbar/MRT_ToolbarBottom.d.ts → esm/toolbar/MRT_BottomToolbar.d.ts} +1 -1
- package/dist/{cjs/toolbar/MRT_ToolbarTop.d.ts → esm/toolbar/MRT_TopToolbar.d.ts} +1 -1
- package/dist/index.d.ts +102 -101
- package/package.json +10 -10
- package/src/MaterialReactTable.tsx +43 -28
- package/src/aggregationFns.ts +3 -0
- package/src/body/MRT_TableBody.tsx +9 -8
- package/src/column.utils.ts +16 -8
- package/src/{filtersFns.ts → filterFns.ts} +0 -0
- package/src/head/MRT_TableHeadCellFilterContainer.tsx +2 -2
- package/src/head/MRT_TableHeadCellFilterLabel.tsx +2 -2
- package/src/inputs/MRT_FilterTextField.tsx +4 -4
- package/src/menus/MRT_FilterOptionMenu.tsx +6 -8
- package/src/table/MRT_TablePaper.tsx +5 -5
- package/src/table/MRT_TableRoot.tsx +20 -21
- package/src/toolbar/{MRT_ToolbarBottom.tsx → MRT_BottomToolbar.tsx} +10 -10
- package/src/toolbar/{MRT_ToolbarTop.tsx → MRT_TopToolbar.tsx} +8 -8
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
|
|
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
|
-
|
|
233
|
+
setColumnFilterFns: Dispatch<SetStateAction<{
|
|
234
234
|
[key: string]: MRT_FilterOption;
|
|
235
235
|
}>>;
|
|
236
|
-
|
|
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
|
-
|
|
255
|
-
|
|
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' | '
|
|
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
|
-
|
|
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
|
-
|
|
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
|
-
|
|
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,
|
|
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.
|
|
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.
|
|
64
|
-
"@storybook/addon-actions": "^6.5.
|
|
65
|
-
"@storybook/addon-essentials": "^6.5.
|
|
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.
|
|
68
|
-
"@storybook/addon-storysource": "^6.5.
|
|
69
|
-
"@storybook/addons": "^6.5.
|
|
70
|
-
"@storybook/react": "^6.5.
|
|
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.
|
|
100
|
-
"@tanstack/react-virtual": "^3.0.0-beta.
|
|
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 {
|
|
45
|
+
import { MRT_AggregationFns } from './aggregationFns';
|
|
46
46
|
import { MRT_Default_Icons, MRT_Icons } from './icons';
|
|
47
|
-
import {
|
|
48
|
-
import {
|
|
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
|
-
|
|
103
|
+
setColumnFilterFns: Dispatch<
|
|
103
104
|
SetStateAction<{
|
|
104
105
|
[key: string]: MRT_FilterOption;
|
|
105
106
|
}>
|
|
106
107
|
>;
|
|
107
|
-
|
|
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
|
-
|
|
128
|
-
|
|
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
|
-
|
|
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
|
-
|
|
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
|
-
|
|
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
|
-
|
|
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?:
|
|
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
|
-
|
|
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
|
-
|
|
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
|
);
|
|
@@ -30,21 +30,22 @@ export const MRT_TableBody: FC<Props> = ({ table, tableContainerRef }) => {
|
|
|
30
30
|
? muiTableBodyProps({ table })
|
|
31
31
|
: muiTableBodyProps;
|
|
32
32
|
|
|
33
|
-
const
|
|
34
|
-
|
|
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
|
-
!
|
|
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(
|
|
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
|
-
|
|
69
|
-
...
|
|
69
|
+
overscan: density === 'compact' ? 30 : 10,
|
|
70
|
+
...vProps,
|
|
70
71
|
})
|
|
71
72
|
: ({} as any);
|
|
72
73
|
|
package/src/column.utils.ts
CHANGED
|
@@ -7,7 +7,7 @@ import {
|
|
|
7
7
|
MRT_DisplayColumnIds,
|
|
8
8
|
MRT_FilterOption,
|
|
9
9
|
} from '.';
|
|
10
|
-
import { MRT_FilterFns } from './
|
|
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
|
-
|
|
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(
|
|
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(
|
|
75
|
+
if (Object.keys(filterFns).includes(columnFilterFns[columnDef.id])) {
|
|
68
76
|
columnDef.filterFn =
|
|
69
77
|
// @ts-ignore
|
|
70
|
-
|
|
78
|
+
filterFns[columnFilterFns[columnDef.id]] ?? filterFns.fuzzy;
|
|
71
79
|
//@ts-ignore
|
|
72
|
-
columnDef._filterFn =
|
|
80
|
+
columnDef._filterFn = columnFilterFns[columnDef.id];
|
|
73
81
|
}
|
|
74
|
-
if (Object.keys(
|
|
82
|
+
if (Object.keys(sortingFns).includes(columnDef.sortingFn as string)) {
|
|
75
83
|
// @ts-ignore
|
|
76
|
-
columnDef.sortingFn =
|
|
84
|
+
columnDef.sortingFn = sortingFns[columnDef.sortingFn];
|
|
77
85
|
}
|
|
78
86
|
} else if (columnDef.columnDefType === 'display') {
|
|
79
87
|
columnDef = {
|
|
File without changes
|