material-react-table 0.24.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/MaterialReactTable.d.ts +18 -16
- package/dist/{utils.d.ts → column.utils.d.ts} +3 -3
- package/dist/filtersFns.d.ts +22 -54
- package/dist/localization.d.ts +3 -0
- package/dist/material-react-table.cjs.development.js +155 -99
- 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 +155 -99
- package/dist/material-react-table.esm.js.map +1 -1
- package/dist/table/MRT_TableRoot.d.ts +1 -1
- package/package.json +3 -3
- package/src/MaterialReactTable.tsx +29 -24
- package/src/body/MRT_TableBodyCell.tsx +3 -1
- package/src/{utils.ts → column.utils.ts} +2 -1
- package/src/filtersFns.ts +47 -13
- package/src/head/MRT_TableHeadCell.tsx +29 -29
- package/src/head/MRT_TableHeadCellGrabHandle.tsx +1 -1
- package/src/inputs/MRT_FilterTextField.tsx +4 -3
- package/src/inputs/MRT_SelectCheckbox.tsx +13 -18
- package/src/localization.ts +6 -0
- package/src/menus/MRT_ColumnActionMenu.tsx +16 -15
- 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 +57 -40
@@ -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.",
|
@@ -31,7 +31,7 @@
|
|
31
31
|
},
|
32
32
|
"scripts": {
|
33
33
|
"analyze": "size-limit --why",
|
34
|
-
"build": "tsdx build && size-limit && rm -rf material-react-table-docs/node_modules/material-react-table/dist && cp -r dist material-react-table-docs/node_modules/material-react-table/
|
34
|
+
"build": "tsdx build && size-limit && rm -rf material-react-table-docs/node_modules/material-react-table/dist && cp -r dist material-react-table-docs/node_modules/material-react-table/",
|
35
35
|
"build-storybook": "build-storybook",
|
36
36
|
"format": "prettier -w .",
|
37
37
|
"lint": "eslint .",
|
@@ -75,7 +75,7 @@
|
|
75
75
|
"@types/react": "^18.0.15",
|
76
76
|
"@types/react-dom": "^18.0.6",
|
77
77
|
"babel-loader": "^8.2.5",
|
78
|
-
"eslint": "^8.
|
78
|
+
"eslint": "^8.20.0",
|
79
79
|
"eslint-plugin-react-hooks": "^4.6.0",
|
80
80
|
"husky": "^8.0.1",
|
81
81
|
"prettier": "^2.7.1",
|
@@ -49,19 +49,6 @@ import { MRT_SortingFns } from './sortingFns';
|
|
49
49
|
|
50
50
|
type LiteralUnion<T extends U, U = string> = T | (U & Record<never, never>);
|
51
51
|
|
52
|
-
export type MRT_TableOptions<TData extends Record<string, any> = {}> = Partial<
|
53
|
-
Omit<
|
54
|
-
TableOptions<TData>,
|
55
|
-
'columns' | 'data' | 'initialState' | 'state' | 'expandRowsFn'
|
56
|
-
>
|
57
|
-
> & {
|
58
|
-
columns: MRT_ColumnDef<TData>[];
|
59
|
-
data: TData[];
|
60
|
-
expandRowsFn?: (dataRow: TData) => TData[];
|
61
|
-
initialState?: Partial<MRT_TableState<TData>>;
|
62
|
-
state?: Partial<MRT_TableState<TData>>;
|
63
|
-
};
|
64
|
-
|
65
52
|
export interface MRT_RowModel<TData extends Record<string, any> = {}> {
|
66
53
|
flatRows: MRT_Row<TData>[];
|
67
54
|
rows: MRT_Row<TData>[];
|
@@ -218,7 +205,7 @@ export type MRT_ColumnDef<TData extends Record<string, any> = {}> = Omit<
|
|
218
205
|
*
|
219
206
|
* @example accessorKey: 'username'
|
220
207
|
*/
|
221
|
-
accessorKey?:
|
208
|
+
accessorKey?: string & keyof TData;
|
222
209
|
/**
|
223
210
|
* Specify what type of column this is. Either `data`, `display`, or `group`. Defaults to `data`.
|
224
211
|
* Leave this blank if you are just creating a normal data column.
|
@@ -411,6 +398,13 @@ export type MRT_FilterFn<TData extends Record<string, any> = {}> =
|
|
411
398
|
| FilterFn<TData>
|
412
399
|
| MRT_FilterOption;
|
413
400
|
|
401
|
+
export type MRT_DisplayColumnIds =
|
402
|
+
| 'mrt-row-drag'
|
403
|
+
| 'mrt-row-actions'
|
404
|
+
| 'mrt-row-expand'
|
405
|
+
| 'mrt-row-select'
|
406
|
+
| 'mrt-row-numbers';
|
407
|
+
|
414
408
|
/**
|
415
409
|
* `columns` and `data` props are the only required props, but there are over 150 other optional props.
|
416
410
|
*
|
@@ -421,7 +415,15 @@ export type MRT_FilterFn<TData extends Record<string, any> = {}> =
|
|
421
415
|
* @link https://www.material-react-table.com/docs/api/props
|
422
416
|
*/
|
423
417
|
export type MaterialReactTableProps<TData extends Record<string, any> = {}> =
|
424
|
-
|
418
|
+
Omit<
|
419
|
+
Partial<TableOptions<TData>>,
|
420
|
+
'columns' | 'data' | 'initialState' | 'state' | 'expandRowsFn'
|
421
|
+
> & {
|
422
|
+
displayColumnDefOptions?: Partial<{
|
423
|
+
[key in MRT_DisplayColumnIds]: Partial<MRT_ColumnDef>;
|
424
|
+
}>;
|
425
|
+
columns: MRT_ColumnDef<TData>[];
|
426
|
+
data: TData[];
|
425
427
|
editingMode?: 'table' | 'row' | 'cell';
|
426
428
|
enableClickToCopy?: boolean;
|
427
429
|
enableColumnActions?: boolean;
|
@@ -449,7 +451,9 @@ export type MaterialReactTableProps<TData extends Record<string, any> = {}> =
|
|
449
451
|
enableToolbarTop?: boolean;
|
450
452
|
enabledColumnFilterOptions?: (MRT_FilterOption | string)[] | null;
|
451
453
|
enabledGlobalFilterOptions?: (MRT_FilterOption | string)[] | null;
|
454
|
+
expandRowsFn?: (dataRow: TData) => TData[];
|
452
455
|
icons?: Partial<MRT_Icons>;
|
456
|
+
initialState?: Partial<MRT_TableState<TData>>;
|
453
457
|
localization?: Partial<MRT_Localization>;
|
454
458
|
muiExpandAllButtonProps?:
|
455
459
|
| IconButtonProps
|
@@ -522,6 +526,9 @@ export type MaterialReactTableProps<TData extends Record<string, any> = {}> =
|
|
522
526
|
table: MRT_TableInstance<TData>;
|
523
527
|
cell: MRT_Cell<TData>;
|
524
528
|
}) => SkeletonProps);
|
529
|
+
muiTableBodyProps?:
|
530
|
+
| TableBodyProps
|
531
|
+
| (({ table }: { table: MRT_TableInstance<TData> }) => TableBodyProps);
|
525
532
|
muiTableBodyRowDragHandleProps?:
|
526
533
|
| IconButtonProps
|
527
534
|
| (({
|
@@ -531,9 +538,6 @@ export type MaterialReactTableProps<TData extends Record<string, any> = {}> =
|
|
531
538
|
table: MRT_TableInstance<TData>;
|
532
539
|
row: MRT_Row<TData>;
|
533
540
|
}) => IconButtonProps);
|
534
|
-
muiTableBodyProps?:
|
535
|
-
| TableBodyProps
|
536
|
-
| (({ table }: { table: MRT_TableInstance<TData> }) => TableBodyProps);
|
537
541
|
muiTableBodyRowProps?:
|
538
542
|
| TableRowProps
|
539
543
|
| (({
|
@@ -685,6 +689,7 @@ export type MaterialReactTableProps<TData extends Record<string, any> = {}> =
|
|
685
689
|
onCurrentGlobalFilterFnChange?: OnChangeFn<MRT_FilterOption>;
|
686
690
|
onCurrentHoveredColumnChange?: OnChangeFn<MRT_Column<TData> | null>;
|
687
691
|
onCurrentHoveredRowChange?: OnChangeFn<MRT_Row<TData> | null>;
|
692
|
+
onDensityChange?: OnChangeFn<boolean>;
|
688
693
|
onEditRowSubmit?: ({
|
689
694
|
row,
|
690
695
|
table,
|
@@ -692,7 +697,6 @@ export type MaterialReactTableProps<TData extends Record<string, any> = {}> =
|
|
692
697
|
row: MRT_Row<TData>;
|
693
698
|
table: MRT_TableInstance<TData>;
|
694
699
|
}) => Promise<void> | void;
|
695
|
-
onDensityChange?: OnChangeFn<boolean>;
|
696
700
|
onIsFullScreenChange?: OnChangeFn<boolean>;
|
697
701
|
onRowDrop?: ({
|
698
702
|
event,
|
@@ -738,11 +742,6 @@ export type MaterialReactTableProps<TData extends Record<string, any> = {}> =
|
|
738
742
|
}: {
|
739
743
|
table: MRT_TableInstance<TData>;
|
740
744
|
}) => ReactNode;
|
741
|
-
renderToolbarTopCustomActions?: ({
|
742
|
-
table,
|
743
|
-
}: {
|
744
|
-
table: MRT_TableInstance<TData>;
|
745
|
-
}) => ReactNode;
|
746
745
|
renderToolbarInternalActions?: ({
|
747
746
|
table,
|
748
747
|
MRT_ToggleGlobalFilterButton,
|
@@ -768,9 +767,15 @@ export type MaterialReactTableProps<TData extends Record<string, any> = {}> =
|
|
768
767
|
IconButtonProps & { table: MRT_TableInstance<TData> }
|
769
768
|
>;
|
770
769
|
}) => ReactNode;
|
770
|
+
renderToolbarTopCustomActions?: ({
|
771
|
+
table,
|
772
|
+
}: {
|
773
|
+
table: MRT_TableInstance<TData>;
|
774
|
+
}) => ReactNode;
|
771
775
|
rowCount?: number;
|
772
776
|
rowNumberMode?: 'original' | 'static';
|
773
777
|
selectAllMode?: 'all' | 'page';
|
778
|
+
state?: Partial<MRT_TableState<TData>>;
|
774
779
|
tableId?: string;
|
775
780
|
virtualizerProps?: Partial<VirtualizerOptions<HTMLDivElement>>;
|
776
781
|
};
|
@@ -129,7 +129,9 @@ export const MRT_TableBodyCell: FC<Props> = ({
|
|
129
129
|
|
130
130
|
const handleDragEnter = (_e: DragEvent) => {
|
131
131
|
if (enableColumnOrdering && currentDraggingColumn) {
|
132
|
-
setCurrentHoveredColumn(
|
132
|
+
setCurrentHoveredColumn(
|
133
|
+
columnDef.enableColumnOrdering !== false ? column : null,
|
134
|
+
);
|
133
135
|
}
|
134
136
|
};
|
135
137
|
|
@@ -4,6 +4,7 @@ import {
|
|
4
4
|
MRT_Column,
|
5
5
|
MRT_ColumnDef,
|
6
6
|
MRT_DefinedColumnDef,
|
7
|
+
MRT_DisplayColumnIds,
|
7
8
|
MRT_FilterOption,
|
8
9
|
} from '.';
|
9
10
|
import { MRT_FilterFns } from './filtersFns';
|
@@ -92,7 +93,7 @@ export const getLeadingDisplayColumnIds = <
|
|
92
93
|
'mrt-row-expand',
|
93
94
|
props.enableRowSelection && 'mrt-row-select',
|
94
95
|
props.enableRowNumbers && 'mrt-row-numbers',
|
95
|
-
].filter(Boolean) as
|
96
|
+
].filter(Boolean) as MRT_DisplayColumnIds[];
|
96
97
|
|
97
98
|
export const getTrailingDisplayColumnIds = <
|
98
99
|
TData extends Record<string, any> = {},
|
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,
|
@@ -48,13 +48,6 @@ export const MRT_TableHeadCell: FC<Props> = ({ header, table }) => {
|
|
48
48
|
...mcTableHeadCellProps,
|
49
49
|
};
|
50
50
|
|
51
|
-
const headerElement = ((columnDef?.Header instanceof Function
|
52
|
-
? columnDef?.Header?.({
|
53
|
-
header,
|
54
|
-
table,
|
55
|
-
})
|
56
|
-
: columnDef?.Header) ?? columnDef.header) as ReactNode;
|
57
|
-
|
58
51
|
const getIsLastLeftPinnedColumn = () => {
|
59
52
|
return (
|
60
53
|
column.getIsPinned() === 'left' &&
|
@@ -74,12 +67,12 @@ export const MRT_TableHeadCell: FC<Props> = ({ header, table }) => {
|
|
74
67
|
|
75
68
|
const handleDragEnter = (_e: DragEvent) => {
|
76
69
|
if (enableColumnOrdering && currentDraggingColumn) {
|
77
|
-
setCurrentHoveredColumn(
|
70
|
+
setCurrentHoveredColumn(
|
71
|
+
columnDef.enableColumnOrdering !== false ? column : null,
|
72
|
+
);
|
78
73
|
}
|
79
74
|
};
|
80
75
|
|
81
|
-
const tableHeadCellRef = React.useRef<HTMLTableCellElement>(null);
|
82
|
-
|
83
76
|
const draggingBorder =
|
84
77
|
currentDraggingColumn?.id === column.id
|
85
78
|
? `1px dashed ${theme.palette.divider}`
|
@@ -95,6 +88,15 @@ export const MRT_TableHeadCell: FC<Props> = ({ header, table }) => {
|
|
95
88
|
}
|
96
89
|
: undefined;
|
97
90
|
|
91
|
+
const headerElement = ((columnDef?.Header instanceof Function
|
92
|
+
? columnDef?.Header?.({
|
93
|
+
header,
|
94
|
+
table,
|
95
|
+
})
|
96
|
+
: columnDef?.Header) ?? columnDef.header) as ReactNode;
|
97
|
+
|
98
|
+
const tableHeadCellRef = React.useRef<HTMLTableCellElement>(null);
|
99
|
+
|
98
100
|
return (
|
99
101
|
<TableCell
|
100
102
|
align={columnDefType === 'group' ? 'center' : 'left'}
|
@@ -153,7 +155,7 @@ export const MRT_TableHeadCell: FC<Props> = ({ header, table }) => {
|
|
153
155
|
column.getIsPinned() === 'right' ? `${getTotalRight()}px` : undefined,
|
154
156
|
transition: `all ${enableColumnResizing ? 0 : '0.2s'} ease-in-out`,
|
155
157
|
userSelect: enableMultiSort && column.getCanSort() ? 'none' : undefined,
|
156
|
-
verticalAlign: '
|
158
|
+
verticalAlign: 'top',
|
157
159
|
zIndex:
|
158
160
|
column.getIsResizing() || currentDraggingColumn?.id === column.id
|
159
161
|
? 3
|
@@ -167,9 +169,7 @@ export const MRT_TableHeadCell: FC<Props> = ({ header, table }) => {
|
|
167
169
|
width: header.getSize(),
|
168
170
|
})}
|
169
171
|
>
|
170
|
-
{header.isPlaceholder ? null :
|
171
|
-
headerElement
|
172
|
-
) : (
|
172
|
+
{header.isPlaceholder ? null : (
|
173
173
|
<Box
|
174
174
|
sx={{
|
175
175
|
alignItems: 'flex-start',
|
@@ -195,16 +195,16 @@ export const MRT_TableHeadCell: FC<Props> = ({ header, table }) => {
|
|
195
195
|
}}
|
196
196
|
>
|
197
197
|
{headerElement}
|
198
|
-
{
|
198
|
+
{column.getCanSort() && (
|
199
199
|
<MRT_TableHeadCellSortLabel header={header} table={table} />
|
200
200
|
)}
|
201
|
-
{
|
201
|
+
{column.getCanFilter() && (
|
202
202
|
<MRT_TableHeadCellFilterLabel header={header} table={table} />
|
203
203
|
)}
|
204
204
|
</Box>
|
205
|
-
|
206
|
-
{
|
207
|
-
((enableColumnDragging &&
|
205
|
+
{columnDefType !== 'group' && (
|
206
|
+
<Box sx={{ whiteSpace: 'nowrap' }}>
|
207
|
+
{((enableColumnDragging &&
|
208
208
|
columnDef.enableColumnDragging !== false) ||
|
209
209
|
(enableColumnOrdering &&
|
210
210
|
columnDef.enableColumnOrdering !== false) ||
|
@@ -215,21 +215,21 @@ export const MRT_TableHeadCell: FC<Props> = ({ header, table }) => {
|
|
215
215
|
tableHeadCellRef={tableHeadCellRef}
|
216
216
|
/>
|
217
217
|
)}
|
218
|
-
|
219
|
-
|
220
|
-
|
221
|
-
|
222
|
-
|
223
|
-
|
224
|
-
|
225
|
-
|
226
|
-
|
218
|
+
{(enableColumnActions || columnDef.enableColumnActions) &&
|
219
|
+
columnDef.enableColumnActions !== false && (
|
220
|
+
<MRT_TableHeadCellColumnActionsButton
|
221
|
+
header={header}
|
222
|
+
table={table}
|
223
|
+
/>
|
224
|
+
)}
|
225
|
+
</Box>
|
226
|
+
)}
|
227
227
|
{column.getCanResize() && (
|
228
228
|
<MRT_TableHeadCellResizeHandle header={header} table={table} />
|
229
229
|
)}
|
230
230
|
</Box>
|
231
231
|
)}
|
232
|
-
{
|
232
|
+
{column.getCanFilter() && (
|
233
233
|
<MRT_TableHeadCellFilterContainer header={header} table={table} />
|
234
234
|
)}
|
235
235
|
</TableCell>
|
@@ -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 {
|
@@ -73,14 +73,15 @@ export const MRT_FilterTextField: FC<Props> = ({
|
|
73
73
|
|
74
74
|
const handleChangeDebounced = useCallback(
|
75
75
|
debounce((event: ChangeEvent<HTMLInputElement>) => {
|
76
|
+
let value = textFieldProps.type === 'date' ? new Date(event.target.value) : event.target.value
|
76
77
|
if (inputIndex !== undefined) {
|
77
|
-
column.setFilterValue((old: [string, string]) => {
|
78
|
+
column.setFilterValue((old: [string, string | Date]) => {
|
78
79
|
const newFilterValues = old ?? ['', ''];
|
79
|
-
newFilterValues[inputIndex] =
|
80
|
+
newFilterValues[inputIndex] = value;
|
80
81
|
return newFilterValues;
|
81
82
|
});
|
82
83
|
} else {
|
83
|
-
column.setFilterValue(
|
84
|
+
column.setFilterValue(value ?? undefined);
|
84
85
|
}
|
85
86
|
}, 200),
|
86
87
|
[],
|
@@ -1,4 +1,4 @@
|
|
1
|
-
import React, {
|
1
|
+
import React, { FC } from 'react';
|
2
2
|
import { Checkbox, Tooltip } from '@mui/material';
|
3
3
|
import type { MRT_Row, MRT_TableInstance } from '..';
|
4
4
|
|
@@ -20,24 +20,12 @@ export const MRT_SelectCheckbox: FC<Props> = ({ row, selectAll, table }) => {
|
|
20
20
|
} = table;
|
21
21
|
const { density } = getState();
|
22
22
|
|
23
|
-
const
|
24
|
-
if (selectAll) {
|
25
|
-
if (selectAllMode === 'all') {
|
26
|
-
table.getToggleAllRowsSelectedHandler()(event as any);
|
27
|
-
} else if (selectAllMode === 'page') {
|
28
|
-
table.getToggleAllPageRowsSelectedHandler()(event as any);
|
29
|
-
}
|
30
|
-
} else if (row) {
|
31
|
-
row?.getToggleSelectedHandler()(event as any);
|
32
|
-
}
|
33
|
-
};
|
34
|
-
|
35
|
-
const checkboxProps = selectAll
|
23
|
+
const checkboxProps = !row
|
36
24
|
? muiSelectAllCheckboxProps instanceof Function
|
37
25
|
? muiSelectAllCheckboxProps({ table })
|
38
26
|
: muiSelectAllCheckboxProps
|
39
27
|
: muiSelectCheckboxProps instanceof Function
|
40
|
-
? muiSelectCheckboxProps({ row
|
28
|
+
? muiSelectCheckboxProps({ row, table })
|
41
29
|
: muiSelectCheckboxProps;
|
42
30
|
|
43
31
|
return (
|
@@ -61,12 +49,19 @@ export const MRT_SelectCheckbox: FC<Props> = ({ row, selectAll, table }) => {
|
|
61
49
|
? localization.toggleSelectAll
|
62
50
|
: localization.toggleSelectRow,
|
63
51
|
}}
|
64
|
-
onChange={
|
52
|
+
onChange={
|
53
|
+
!row
|
54
|
+
? selectAllMode === 'all'
|
55
|
+
? table.getToggleAllRowsSelectedHandler()
|
56
|
+
: table.getToggleAllPageRowsSelectedHandler()
|
57
|
+
: row.getToggleSelectedHandler()
|
58
|
+
}
|
65
59
|
size={density === 'compact' ? 'small' : 'medium'}
|
66
60
|
{...checkboxProps}
|
67
61
|
sx={{
|
68
|
-
height: density === 'compact' ? '1.
|
69
|
-
width: density === 'compact' ? '1.
|
62
|
+
height: density === 'compact' ? '1.5rem' : '2rem',
|
63
|
+
width: density === 'compact' ? '1.5rem' : '2rem',
|
64
|
+
m: '-1re.m',
|
70
65
|
...checkboxProps?.sx,
|
71
66
|
}}
|
72
67
|
/>
|
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',
|
@@ -326,21 +326,22 @@ export const MRT_ColumnActionMenu: FC<Props> = ({
|
|
326
326
|
</Box>
|
327
327
|
</MenuItem>,
|
328
328
|
]}
|
329
|
-
{enableColumnResizing &&
|
330
|
-
|
331
|
-
|
332
|
-
|
333
|
-
|
334
|
-
|
335
|
-
|
336
|
-
|
337
|
-
<
|
338
|
-
<
|
339
|
-
|
340
|
-
|
341
|
-
|
342
|
-
|
343
|
-
|
329
|
+
{enableColumnResizing &&
|
330
|
+
column.getCanResize() && [
|
331
|
+
<MenuItem
|
332
|
+
disabled={!columnSizing[column.id]}
|
333
|
+
key={0}
|
334
|
+
onClick={handleResetColumnSize}
|
335
|
+
sx={commonMenuItemStyles}
|
336
|
+
>
|
337
|
+
<Box sx={commonListItemStyles}>
|
338
|
+
<ListItemIcon>
|
339
|
+
<RestartAltIcon />
|
340
|
+
</ListItemIcon>
|
341
|
+
{localization.resetColumnSize}
|
342
|
+
</Box>
|
343
|
+
</MenuItem>,
|
344
|
+
]}
|
344
345
|
{enableHiding && [
|
345
346
|
<MenuItem
|
346
347
|
disabled={columnDef.enableHiding === false}
|