material-react-table 0.28.0 → 0.29.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 (21) hide show
  1. package/dist/MaterialReactTable.d.ts +6 -2
  2. package/dist/column.utils.d.ts +1 -0
  3. package/dist/inputs/MRT_FilterTextField.d.ts +1 -1
  4. package/dist/localization.d.ts +9 -0
  5. package/dist/material-react-table.cjs.development.js +184 -121
  6. package/dist/material-react-table.cjs.development.js.map +1 -1
  7. package/dist/material-react-table.cjs.production.min.js +1 -1
  8. package/dist/material-react-table.cjs.production.min.js.map +1 -1
  9. package/dist/material-react-table.esm.js +185 -122
  10. package/dist/material-react-table.esm.js.map +1 -1
  11. package/dist/menus/MRT_FilterOptionMenu.d.ts +7 -0
  12. package/package.json +3 -3
  13. package/src/MaterialReactTable.tsx +6 -0
  14. package/src/column.utils.ts +13 -0
  15. package/src/head/MRT_TableHeadCellFilterContainer.tsx +3 -1
  16. package/src/head/MRT_TableHeadCellFilterLabel.tsx +8 -3
  17. package/src/inputs/MRT_FilterRangeFields.tsx +2 -2
  18. package/src/inputs/MRT_FilterTextField.tsx +123 -82
  19. package/src/localization.ts +18 -0
  20. package/src/menus/MRT_FilterOptionMenu.tsx +101 -99
  21. package/src/table/MRT_TableRoot.tsx +2 -1
package/src/menus/MRT_FilterOptionMenu.tsx CHANGED
@@ -1,6 +1,101 @@
1
1
  import React, { FC, useMemo } from 'react';
2
2
  import { Box, Menu, MenuItem } from '@mui/material';
3
3
  import type { MRT_FilterOption, MRT_Header, MRT_TableInstance } from '..';
4
+ import { MRT_Localization } from '../localization';
5
+
6
+ export const internalFilterOptions = (
7
+ localization: MRT_Localization,
8
+ ): {
9
+ option: string;
10
+ symbol: string;
11
+ label: string;
12
+ divider: boolean;
13
+ }[] => [
14
+ {
15
+ option: 'fuzzy',
16
+ symbol: '≈',
17
+ label: localization.filterFuzzy,
18
+ divider: false,
19
+ },
20
+ {
21
+ option: 'contains',
22
+ symbol: '*',
23
+ label: localization.filterContains,
24
+ divider: false,
25
+ },
26
+ {
27
+ option: 'startsWith',
28
+ symbol: 'a',
29
+ label: localization.filterStartsWith,
30
+ divider: false,
31
+ },
32
+ {
33
+ option: 'endsWith',
34
+ symbol: 'z',
35
+ label: localization.filterEndsWith,
36
+ divider: true,
37
+ },
38
+ {
39
+ option: 'equals',
40
+ symbol: '=',
41
+ label: localization.filterEquals,
42
+ divider: false,
43
+ },
44
+ {
45
+ option: 'notEquals',
46
+ symbol: '≠',
47
+ label: localization.filterNotEquals,
48
+ divider: true,
49
+ },
50
+ {
51
+ option: 'between',
52
+ symbol: '⇿',
53
+ label: localization.filterBetween,
54
+ divider: false,
55
+ },
56
+ {
57
+ option: 'betweenInclusive',
58
+ symbol: '⬌',
59
+ label: localization.filterBetweenInclusive,
60
+ divider: true,
61
+ },
62
+ {
63
+ option: 'greaterThan',
64
+ symbol: '>',
65
+ label: localization.filterGreaterThan,
66
+ divider: false,
67
+ },
68
+ {
69
+ option: 'greaterThanOrEqualTo',
70
+ symbol: '≥',
71
+ label: localization.filterGreaterThanOrEqualTo,
72
+ divider: false,
73
+ },
74
+ {
75
+ option: 'lessThan',
76
+ symbol: '<',
77
+ label: localization.filterLessThan,
78
+ divider: false,
79
+ },
80
+ {
81
+ option: 'lessThanOrEqualTo',
82
+ symbol: '≤',
83
+ label: localization.filterLessThanOrEqualTo,
84
+ divider: true,
85
+ },
86
+ {
87
+ option: 'empty',
88
+ symbol: '∅',
89
+ label: localization.filterEmpty,
90
+ divider: false,
91
+ },
92
+ {
93
+ option: 'notEmpty',
94
+ symbol: '!∅',
95
+ label: localization.filterNotEmpty,
96
+ divider: false,
97
+ },
98
+ ];
4
99
 
5
100
  interface Props {
6
101
  anchorEl: HTMLElement | null;
@@ -36,106 +131,13 @@ export const MRT_FilterOptionMenu: FC<Props> = ({
36
131
 
37
132
  const filterOptions = useMemo(
38
133
  () =>
39
- (
40
- [
41
- {
42
- option: 'fuzzy',
43
- symbol: '≈',
44
- label: localization.filterFuzzy,
45
- divider: false,
46
- },
47
- {
48
- option: 'contains',
49
- symbol: '*',
50
- label: localization.filterContains,
51
- divider: false,
52
- },
53
- {
54
- option: 'startsWith',
55
- symbol: 'a',
56
- label: localization.filterStartsWith,
57
- divider: false,
58
- },
59
- {
60
- option: 'endsWith',
61
- symbol: 'z',
62
- label: localization.filterEndsWith,
63
- divider: true,
64
- },
65
- {
66
- option: 'equals',
67
- symbol: '=',
68
- label: localization.filterEquals,
69
- divider: false,
70
- },
71
- {
72
- option: 'notEquals',
73
- symbol: '≠',
74
- label: localization.filterNotEquals,
75
- divider: true,
76
- },
77
- {
78
- option: 'between',
79
- symbol: '⇿',
80
- label: localization.filterBetween,
81
- divider: false,
82
- },
83
- {
84
- option: 'betweenInclusive',
85
- symbol: '⬌',
86
- label: localization.filterBetweenInclusive,
87
- divider: true,
88
- },
89
- {
90
- option: 'greaterThan',
91
- symbol: '>',
92
- label: localization.filterGreaterThan,
93
- divider: false,
94
- },
95
- {
96
- option: 'greaterThanOrEqualTo',
97
- symbol: '≥',
98
- label: localization.filterGreaterThanOrEqualTo,
99
- divider: false,
100
- },
101
- {
102
- option: 'lessThan',
103
- symbol: '<',
104
- label: localization.filterLessThan,
105
- divider: false,
106
- },
107
- {
108
- option: 'lessThanOrEqualTo',
109
- symbol: '≤',
110
- label: localization.filterLessThanOrEqualTo,
111
- divider: true,
112
- },
113
- {
114
- option: 'empty',
115
- symbol: '∅',
116
- label: localization.filterEmpty,
117
- divider: false,
118
- },
119
- {
120
- option: 'notEmpty',
121
- symbol: '!∅',
122
- label: localization.filterNotEmpty,
123
- divider: false,
124
- },
125
- ] as Array<{
126
- divider: boolean;
127
- fn: Function;
128
- label: string;
129
- option: MRT_FilterOption;
130
- symbol?: string;
131
- }>
132
- ).filter((filterType) =>
134
+ internalFilterOptions(localization).filter((filterOption) =>
133
135
  columnDef
134
136
  ? allowedColumnFilterOptions === undefined ||
135
- allowedColumnFilterOptions?.includes(filterType.option)
137
+ allowedColumnFilterOptions?.includes(filterOption.option)
136
138
  : (!enabledGlobalFilterOptions ||
137
- enabledGlobalFilterOptions.includes(filterType.option)) &&
138
- ['fuzzy', 'contains'].includes(filterType.option),
139
+ enabledGlobalFilterOptions.includes(filterOption.option)) &&
140
+ ['fuzzy', 'contains'].includes(filterOption.option),
139
141
  ),
140
142
  [],
141
143
  );
@@ -146,7 +148,7 @@ export const MRT_FilterOptionMenu: FC<Props> = ({
146
148
  ...prev,
147
149
  [header.id]: option,
148
150
  }));
149
- if (['empty', 'notEmpty'].includes(option)) {
151
+ if (['empty', 'notEmpty'].includes(option as string)) {
150
152
  column.setFilterValue(' ');
151
153
  } else if (option === 'between') {
152
154
  column.setFilterValue(['', '']);
@@ -178,7 +180,7 @@ export const MRT_FilterOptionMenu: FC<Props> = ({
178
180
  <MenuItem
179
181
  divider={divider}
180
182
  key={index}
181
- onClick={() => handleSelectFilterType(option)}
183
+ onClick={() => handleSelectFilterType(option as MRT_FilterOption)}
182
184
  selected={option === filterOption}
183
185
  sx={{
184
186
  py: '6px',
package/src/table/MRT_TableRoot.tsx CHANGED
@@ -20,6 +20,7 @@ import {
20
20
  prepareColumns,
21
21
  getAllLeafColumnDefs,
22
22
  getDefaultColumnOrderIds,
23
+ getDefaultColumnFilterFn,
23
24
  } from '../column.utils';
24
25
  import { MRT_FilterFns } from '../filtersFns';
25
26
  import type {
@@ -114,7 +115,7 @@ export const MRT_TableRoot = <TData extends Record<string, any> = {}>(
114
115
  initialState?.currentFilterFns?.[
115
116
  col.id?.toString() ?? col.accessorKey?.toString() ?? ''
116
117
  ] ??
117
- (!!col.filterSelectOptions?.length ? 'equals' : 'fuzzy'),
118
+ getDefaultColumnFilterFn(col),
118
119
  }),
119
120
  ),
120
121
  ),