material-react-table 0.25.0 → 0.26.0
Sign up to get free protection for your applications and to get access to all the features.
- package/README.md +11 -9
- package/dist/{utils.d.ts → column.utils.d.ts} +1 -1
- package/dist/filtersFns.d.ts +22 -54
- package/dist/localization.d.ts +3 -0
- package/dist/material-react-table.cjs.development.js +87 -24
- package/dist/material-react-table.cjs.development.js.map +1 -1
- package/dist/material-react-table.cjs.production.min.js +1 -1
- package/dist/material-react-table.cjs.production.min.js.map +1 -1
- package/dist/material-react-table.esm.js +87 -24
- package/dist/material-react-table.esm.js.map +1 -1
- package/dist/table/MRT_TableRoot.d.ts +1 -1
- package/package.json +1 -1
- package/src/{utils.ts → column.utils.ts} +0 -0
- package/src/filtersFns.ts +47 -13
- package/src/head/MRT_TableHeadCellGrabHandle.tsx +1 -1
- package/src/localization.ts +6 -0
- package/src/menus/MRT_FilterOptionMenu.tsx +105 -72
- package/src/menus/MRT_ShowHideColumnsMenu.tsx +1 -1
- package/src/menus/MRT_ShowHideColumnsMenuItems.tsx +1 -1
- package/src/table/MRT_TableRoot.tsx +12 -12
@@ -1,3 +1,3 @@
|
|
1
1
|
/// <reference types="react" />
|
2
|
-
import { MaterialReactTableProps } from '
|
2
|
+
import type { MaterialReactTableProps } from '..';
|
3
3
|
export declare const MRT_TableRoot: <TData extends Record<string, any> = {}>(props: MaterialReactTableProps<TData>) => JSX.Element;
|
package/package.json
CHANGED
@@ -1,5 +1,5 @@
|
|
1
1
|
{
|
2
|
-
"version": "0.
|
2
|
+
"version": "0.26.0",
|
3
3
|
"license": "MIT",
|
4
4
|
"name": "material-react-table",
|
5
5
|
"description": "A fully featured Material UI implementation of TanStack React Table, inspired by material-table and the MUI X DataGrid, written from the ground up in TypeScript.",
|
File without changes
|
package/src/filtersFns.ts
CHANGED
@@ -1,7 +1,7 @@
|
|
1
1
|
import { rankItem, rankings, RankingInfo } from '@tanstack/match-sorter-utils';
|
2
2
|
import { filterFns, Row } from '@tanstack/react-table';
|
3
3
|
|
4
|
-
|
4
|
+
const fuzzy = <TData extends Record<string, any> = {}>(
|
5
5
|
row: Row<TData>,
|
6
6
|
columnId: string,
|
7
7
|
filterValue: string | number,
|
@@ -16,7 +16,7 @@ export const fuzzy = <TData extends Record<string, any> = {}>(
|
|
16
16
|
|
17
17
|
fuzzy.autoRemove = (val: any) => !val;
|
18
18
|
|
19
|
-
|
19
|
+
const contains = <TData extends Record<string, any> = {}>(
|
20
20
|
row: Row<TData>,
|
21
21
|
id: string,
|
22
22
|
filterValue: string | number,
|
@@ -30,7 +30,7 @@ export const contains = <TData extends Record<string, any> = {}>(
|
|
30
30
|
|
31
31
|
contains.autoRemove = (val: any) => !val;
|
32
32
|
|
33
|
-
|
33
|
+
const startsWith = <TData extends Record<string, any> = {}>(
|
34
34
|
row: Row<TData>,
|
35
35
|
id: string,
|
36
36
|
filterValue: string | number,
|
@@ -44,7 +44,7 @@ export const startsWith = <TData extends Record<string, any> = {}>(
|
|
44
44
|
|
45
45
|
startsWith.autoRemove = (val: any) => !val;
|
46
46
|
|
47
|
-
|
47
|
+
const endsWith = <TData extends Record<string, any> = {}>(
|
48
48
|
row: Row<TData>,
|
49
49
|
id: string,
|
50
50
|
filterValue: string | number,
|
@@ -58,7 +58,7 @@ export const endsWith = <TData extends Record<string, any> = {}>(
|
|
58
58
|
|
59
59
|
endsWith.autoRemove = (val: any) => !val;
|
60
60
|
|
61
|
-
|
61
|
+
const equals = <TData extends Record<string, any> = {}>(
|
62
62
|
row: Row<TData>,
|
63
63
|
id: string,
|
64
64
|
filterValue: string | number,
|
@@ -68,7 +68,7 @@ export const equals = <TData extends Record<string, any> = {}>(
|
|
68
68
|
|
69
69
|
equals.autoRemove = (val: any) => !val;
|
70
70
|
|
71
|
-
|
71
|
+
const notEquals = <TData extends Record<string, any> = {}>(
|
72
72
|
row: Row<TData>,
|
73
73
|
id: string,
|
74
74
|
filterValue: string | number,
|
@@ -78,31 +78,47 @@ export const notEquals = <TData extends Record<string, any> = {}>(
|
|
78
78
|
|
79
79
|
notEquals.autoRemove = (val: any) => !val;
|
80
80
|
|
81
|
-
|
81
|
+
const greaterThan = <TData extends Record<string, any> = {}>(
|
82
82
|
row: Row<TData>,
|
83
83
|
id: string,
|
84
84
|
filterValue: string | number,
|
85
85
|
) =>
|
86
86
|
!isNaN(+filterValue) && !isNaN(+row.getValue<string | number>(id))
|
87
|
-
? +row.getValue<string | number>(id)
|
87
|
+
? +row.getValue<string | number>(id) > +filterValue
|
88
88
|
: row.getValue<string | number>(id).toString().toLowerCase().trim() >
|
89
89
|
filterValue.toString().toLowerCase().trim();
|
90
90
|
|
91
91
|
greaterThan.autoRemove = (val: any) => !val;
|
92
92
|
|
93
|
-
|
93
|
+
const greaterThanOrEqualTo = <TData extends Record<string, any> = {}>(
|
94
|
+
row: Row<TData>,
|
95
|
+
id: string,
|
96
|
+
filterValue: string | number,
|
97
|
+
) => equals(row, id, filterValue) || greaterThan(row, id, filterValue);
|
98
|
+
|
99
|
+
greaterThanOrEqualTo.autoRemove = (val: any) => !val;
|
100
|
+
|
101
|
+
const lessThan = <TData extends Record<string, any> = {}>(
|
94
102
|
row: Row<TData>,
|
95
103
|
id: string,
|
96
104
|
filterValue: string | number,
|
97
105
|
) =>
|
98
106
|
!isNaN(+filterValue) && !isNaN(+row.getValue<string | number>(id))
|
99
|
-
? +row.getValue<string | number>(id)
|
107
|
+
? +row.getValue<string | number>(id) < +filterValue
|
100
108
|
: row.getValue<string | number>(id).toString().toLowerCase().trim() <
|
101
109
|
filterValue.toString().toLowerCase().trim();
|
102
110
|
|
103
111
|
lessThan.autoRemove = (val: any) => !val;
|
104
112
|
|
105
|
-
|
113
|
+
const lessThanOrEqualTo = <TData extends Record<string, any> = {}>(
|
114
|
+
row: Row<TData>,
|
115
|
+
id: string,
|
116
|
+
filterValue: string | number,
|
117
|
+
) => equals(row, id, filterValue) || lessThan(row, id, filterValue);
|
118
|
+
|
119
|
+
lessThanOrEqualTo.autoRemove = (val: any) => !val;
|
120
|
+
|
121
|
+
const between = <TData extends Record<string, any> = {}>(
|
106
122
|
row: Row<TData>,
|
107
123
|
id: string,
|
108
124
|
filterValues: [string | number, string | number],
|
@@ -117,7 +133,22 @@ export const between = <TData extends Record<string, any> = {}>(
|
|
117
133
|
|
118
134
|
between.autoRemove = (val: any) => !val;
|
119
135
|
|
120
|
-
|
136
|
+
const betweenInclusive = <TData extends Record<string, any> = {}>(
|
137
|
+
row: Row<TData>,
|
138
|
+
id: string,
|
139
|
+
filterValues: [string | number, string | number],
|
140
|
+
) =>
|
141
|
+
((['', undefined] as any[]).includes(filterValues[0]) ||
|
142
|
+
greaterThanOrEqualTo(row, id, filterValues[0])) &&
|
143
|
+
((!isNaN(+filterValues[0]) &&
|
144
|
+
!isNaN(+filterValues[1]) &&
|
145
|
+
+filterValues[0] > +filterValues[1]) ||
|
146
|
+
(['', undefined] as any[]).includes(filterValues[1]) ||
|
147
|
+
lessThanOrEqualTo(row, id, filterValues[1]));
|
148
|
+
|
149
|
+
betweenInclusive.autoRemove = (val: any) => !val;
|
150
|
+
|
151
|
+
const empty = <TData extends Record<string, any> = {}>(
|
121
152
|
row: Row<TData>,
|
122
153
|
id: string,
|
123
154
|
_filterValue: string | number,
|
@@ -125,7 +156,7 @@ export const empty = <TData extends Record<string, any> = {}>(
|
|
125
156
|
|
126
157
|
empty.autoRemove = (val: any) => !val;
|
127
158
|
|
128
|
-
|
159
|
+
const notEmpty = <TData extends Record<string, any> = {}>(
|
129
160
|
row: Row<TData>,
|
130
161
|
id: string,
|
131
162
|
_filterValue: string | number,
|
@@ -136,13 +167,16 @@ notEmpty.autoRemove = (val: any) => !val;
|
|
136
167
|
export const MRT_FilterFns = {
|
137
168
|
...filterFns,
|
138
169
|
between,
|
170
|
+
betweenInclusive,
|
139
171
|
contains,
|
140
172
|
empty,
|
141
173
|
endsWith,
|
142
174
|
equals,
|
143
175
|
fuzzy,
|
144
176
|
greaterThan,
|
177
|
+
greaterThanOrEqualTo,
|
145
178
|
lessThan,
|
179
|
+
lessThanOrEqualTo,
|
146
180
|
notEmpty,
|
147
181
|
notEquals,
|
148
182
|
startsWith,
|
@@ -1,6 +1,6 @@
|
|
1
1
|
import React, { DragEvent, FC, RefObject } from 'react';
|
2
2
|
import { MRT_GrabHandleButton } from '../buttons/MRT_GrabHandleButton';
|
3
|
-
import { reorderColumn } from '../utils';
|
3
|
+
import { reorderColumn } from '../column.utils';
|
4
4
|
import type { MRT_Column, MRT_TableInstance } from '..';
|
5
5
|
|
6
6
|
interface Props {
|
package/src/localization.ts
CHANGED
@@ -14,6 +14,7 @@ export interface MRT_Localization {
|
|
14
14
|
expand: string;
|
15
15
|
expandAll: string;
|
16
16
|
filterBetween: string;
|
17
|
+
filterBetweenInclusive: string;
|
17
18
|
filterByColumn: string;
|
18
19
|
filterContains: string;
|
19
20
|
filterEmpty: string;
|
@@ -21,7 +22,9 @@ export interface MRT_Localization {
|
|
21
22
|
filterEquals: string;
|
22
23
|
filterFuzzy: string;
|
23
24
|
filterGreaterThan: string;
|
25
|
+
filterGreaterThanOrEqualTo: string;
|
24
26
|
filterLessThan: string;
|
27
|
+
filterLessThanOrEqualTo: string;
|
25
28
|
filterMode: string;
|
26
29
|
filterNotEmpty: string;
|
27
30
|
filterNotEquals: string;
|
@@ -83,6 +86,7 @@ export const MRT_DefaultLocalization_EN: MRT_Localization = {
|
|
83
86
|
expand: 'Expand',
|
84
87
|
expandAll: 'Expand all',
|
85
88
|
filterBetween: 'Between',
|
89
|
+
filterBetweenInclusive: 'Between Inclusive',
|
86
90
|
filterByColumn: 'Filter by {column}',
|
87
91
|
filterContains: 'Contains',
|
88
92
|
filterEmpty: 'Empty',
|
@@ -90,7 +94,9 @@ export const MRT_DefaultLocalization_EN: MRT_Localization = {
|
|
90
94
|
filterEquals: 'Equals',
|
91
95
|
filterFuzzy: 'Fuzzy',
|
92
96
|
filterGreaterThan: 'Greater Than',
|
97
|
+
filterGreaterThanOrEqualTo: 'Greater Than Or Equal To',
|
93
98
|
filterLessThan: 'Less Than',
|
99
|
+
filterLessThanOrEqualTo: 'Less Than Or Equal To',
|
94
100
|
filterMode: 'Filter Mode: {filterType}',
|
95
101
|
filterNotEmpty: 'Not Empty',
|
96
102
|
filterNotEquals: 'Not Equals',
|
@@ -1,13 +1,7 @@
|
|
1
1
|
import React, { FC, useMemo } from 'react';
|
2
|
-
import { Menu, MenuItem } from '@mui/material';
|
2
|
+
import { Box, Menu, MenuItem } from '@mui/material';
|
3
3
|
import type { MRT_FilterOption, MRT_Header, MRT_TableInstance } from '..';
|
4
4
|
|
5
|
-
const commonMenuItemStyles = {
|
6
|
-
py: '6px',
|
7
|
-
my: 0,
|
8
|
-
alignItems: 'center',
|
9
|
-
};
|
10
|
-
|
11
5
|
interface Props {
|
12
6
|
anchorEl: HTMLElement | null;
|
13
7
|
header?: MRT_Header;
|
@@ -42,75 +36,107 @@ export const MRT_FilterOptionMenu: FC<Props> = ({
|
|
42
36
|
|
43
37
|
const filterOptions = useMemo(
|
44
38
|
() =>
|
45
|
-
|
46
|
-
|
47
|
-
|
48
|
-
|
49
|
-
|
50
|
-
|
51
|
-
|
52
|
-
|
53
|
-
|
54
|
-
|
55
|
-
|
56
|
-
|
57
|
-
|
58
|
-
|
59
|
-
|
60
|
-
|
61
|
-
|
62
|
-
|
63
|
-
|
64
|
-
|
65
|
-
|
66
|
-
|
67
|
-
|
68
|
-
|
69
|
-
|
70
|
-
|
71
|
-
|
72
|
-
|
73
|
-
|
74
|
-
|
75
|
-
|
76
|
-
|
77
|
-
|
78
|
-
|
79
|
-
|
80
|
-
|
81
|
-
|
82
|
-
|
83
|
-
|
84
|
-
|
85
|
-
|
86
|
-
|
87
|
-
|
88
|
-
|
89
|
-
|
90
|
-
|
91
|
-
|
92
|
-
|
93
|
-
|
94
|
-
|
95
|
-
|
96
|
-
|
97
|
-
|
98
|
-
|
99
|
-
|
100
|
-
|
101
|
-
|
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) =>
|
102
133
|
columnDef
|
103
134
|
? allowedColumnFilterOptions === undefined ||
|
104
135
|
allowedColumnFilterOptions?.includes(filterType.option)
|
105
136
|
: (!enabledGlobalFilterOptions ||
|
106
137
|
enabledGlobalFilterOptions.includes(filterType.option)) &&
|
107
138
|
['fuzzy', 'contains'].includes(filterType.option),
|
108
|
-
)
|
109
|
-
option: MRT_FilterOption;
|
110
|
-
label: string;
|
111
|
-
divider: boolean;
|
112
|
-
fn: Function;
|
113
|
-
}>,
|
139
|
+
),
|
114
140
|
[],
|
115
141
|
);
|
116
142
|
|
@@ -148,15 +174,22 @@ export const MRT_FilterOptionMenu: FC<Props> = ({
|
|
148
174
|
dense: density === 'compact',
|
149
175
|
}}
|
150
176
|
>
|
151
|
-
{filterOptions.map(({ option, label, divider }, index) => (
|
177
|
+
{filterOptions.map(({ option, label, divider, symbol }, index) => (
|
152
178
|
<MenuItem
|
153
179
|
divider={divider}
|
154
180
|
key={index}
|
155
181
|
onClick={() => handleSelectFilterType(option)}
|
156
182
|
selected={option === filterOption}
|
157
|
-
sx={
|
183
|
+
sx={{
|
184
|
+
py: '6px',
|
185
|
+
my: 0,
|
186
|
+
alignItems: 'center',
|
187
|
+
display: 'flex',
|
188
|
+
gap: '2ch',
|
189
|
+
}}
|
158
190
|
value={option}
|
159
191
|
>
|
192
|
+
<Box sx={{ fontSize: '1.25rem', width: '2ch' }}>{symbol}</Box>
|
160
193
|
{label}
|
161
194
|
</MenuItem>
|
162
195
|
))}
|
@@ -2,7 +2,7 @@ import React, { FC, useMemo, useState } from 'react';
|
|
2
2
|
import { Button, Menu, Divider, Box } from '@mui/material';
|
3
3
|
import { MRT_ShowHideColumnsMenuItems } from './MRT_ShowHideColumnsMenuItems';
|
4
4
|
import type { MRT_Column, MRT_TableInstance } from '..';
|
5
|
-
import { getDefaultColumnOrderIds } from '../utils';
|
5
|
+
import { getDefaultColumnOrderIds } from '../column.utils';
|
6
6
|
|
7
7
|
interface Props {
|
8
8
|
anchorEl: HTMLElement | null;
|
@@ -15,7 +15,7 @@ import {
|
|
15
15
|
} from '@mui/material';
|
16
16
|
import { MRT_ColumnPinningButtons } from '../buttons/MRT_ColumnPinningButtons';
|
17
17
|
import { MRT_GrabHandleButton } from '../buttons/MRT_GrabHandleButton';
|
18
|
-
import { reorderColumn } from '../utils';
|
18
|
+
import { reorderColumn } from '../column.utils';
|
19
19
|
import type { MRT_Column, MRT_TableInstance } from '..';
|
20
20
|
|
21
21
|
interface Props {
|
@@ -10,28 +10,28 @@ import {
|
|
10
10
|
getSortedRowModel,
|
11
11
|
useReactTable,
|
12
12
|
} from '@tanstack/react-table';
|
13
|
-
import {
|
14
|
-
MRT_Cell,
|
15
|
-
MRT_Column,
|
16
|
-
MRT_ColumnDef,
|
17
|
-
MRT_FilterOption,
|
18
|
-
MRT_Row,
|
19
|
-
MRT_TableInstance,
|
20
|
-
MRT_TableState,
|
21
|
-
} from '..';
|
13
|
+
import { Box, Dialog, Grow } from '@mui/material';
|
22
14
|
import { MRT_ExpandAllButton } from '../buttons/MRT_ExpandAllButton';
|
23
15
|
import { MRT_ExpandButton } from '../buttons/MRT_ExpandButton';
|
24
16
|
import { MRT_ToggleRowActionMenuButton } from '../buttons/MRT_ToggleRowActionMenuButton';
|
25
17
|
import { MRT_SelectCheckbox } from '../inputs/MRT_SelectCheckbox';
|
26
|
-
import { MaterialReactTableProps } from '../MaterialReactTable';
|
27
18
|
import { MRT_TablePaper } from './MRT_TablePaper';
|
28
|
-
import { Box, Dialog, Grow } from '@mui/material';
|
29
19
|
import {
|
30
20
|
prepareColumns,
|
31
21
|
getAllLeafColumnDefs,
|
32
22
|
getDefaultColumnOrderIds,
|
33
|
-
} from '../utils';
|
23
|
+
} from '../column.utils';
|
34
24
|
import { MRT_FilterFns } from '../filtersFns';
|
25
|
+
import type {
|
26
|
+
MRT_Cell,
|
27
|
+
MRT_Column,
|
28
|
+
MRT_ColumnDef,
|
29
|
+
MRT_FilterOption,
|
30
|
+
MRT_Row,
|
31
|
+
MRT_TableInstance,
|
32
|
+
MRT_TableState,
|
33
|
+
MaterialReactTableProps,
|
34
|
+
} from '..';
|
35
35
|
|
36
36
|
const defaultDisplayColumnDefOptions = {
|
37
37
|
columnDefType: 'display',
|