material-react-table 0.18.0 → 0.19.0
Sign up to get free protection for your applications and to get access to all the features.
- package/dist/MaterialReactTable.d.ts +169 -133
- package/dist/body/MRT_TableBody.d.ts +1 -1
- package/dist/body/MRT_TableBodyCell.d.ts +1 -1
- package/dist/body/MRT_TableBodyRow.d.ts +1 -1
- package/dist/body/MRT_TableDetailPanel.d.ts +1 -1
- package/dist/buttons/MRT_ColumnPinningButtons.d.ts +1 -1
- package/dist/buttons/MRT_CopyButton.d.ts +1 -1
- package/dist/buttons/MRT_EditActionButtons.d.ts +1 -1
- package/dist/buttons/MRT_ExpandAllButton.d.ts +1 -1
- package/dist/buttons/MRT_ExpandButton.d.ts +1 -1
- package/dist/buttons/MRT_FullScreenToggleButton.d.ts +1 -1
- package/dist/buttons/MRT_GrabHandleButton.d.ts +1 -1
- package/dist/buttons/MRT_ShowHideColumnsButton.d.ts +1 -1
- package/dist/buttons/MRT_ToggleDensePaddingButton.d.ts +1 -1
- package/dist/buttons/MRT_ToggleFiltersButton.d.ts +1 -1
- package/dist/buttons/MRT_ToggleGlobalFilterButton.d.ts +1 -1
- package/dist/buttons/MRT_ToggleRowActionMenuButton.d.ts +1 -1
- package/dist/filtersFns.d.ts +31 -23
- package/dist/footer/MRT_TableFooter.d.ts +1 -1
- package/dist/footer/MRT_TableFooterCell.d.ts +1 -1
- package/dist/footer/MRT_TableFooterRow.d.ts +1 -1
- package/dist/head/MRT_DraggableTableHeadCell.d.ts +1 -1
- package/dist/head/MRT_TableHead.d.ts +1 -1
- package/dist/head/MRT_TableHeadCell.d.ts +1 -1
- package/dist/head/MRT_TableHeadCellColumnActionsButton.d.ts +1 -1
- package/dist/head/MRT_TableHeadCellFilterContainer.d.ts +1 -1
- package/dist/head/MRT_TableHeadCellFilterLabel.d.ts +1 -1
- package/dist/head/MRT_TableHeadCellResizeHandle.d.ts +1 -1
- package/dist/head/MRT_TableHeadCellSortLabel.d.ts +1 -1
- package/dist/head/MRT_TableHeadRow.d.ts +1 -1
- package/dist/inputs/MRT_EditCellTextField.d.ts +1 -1
- package/dist/inputs/MRT_FilterRangeFields.d.ts +1 -1
- package/dist/inputs/MRT_FilterTextField.d.ts +1 -1
- package/dist/inputs/MRT_GlobalFilterTextField.d.ts +1 -1
- package/dist/inputs/MRT_SelectCheckbox.d.ts +1 -1
- package/dist/material-react-table.cjs.development.js +760 -759
- 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 +762 -761
- package/dist/material-react-table.esm.js.map +1 -1
- package/dist/menus/MRT_ColumnActionMenu.d.ts +1 -1
- package/dist/menus/MRT_FilterOptionMenu.d.ts +1 -1
- package/dist/menus/MRT_RowActionMenu.d.ts +1 -1
- package/dist/menus/MRT_ShowHideColumnsMenu.d.ts +1 -1
- package/dist/menus/MRT_ShowHideColumnsMenuItems.d.ts +1 -1
- package/dist/sortingFns.d.ts +10 -3
- package/dist/table/MRT_Table.d.ts +1 -1
- package/dist/table/MRT_TableContainer.d.ts +1 -1
- package/dist/table/MRT_TablePaper.d.ts +1 -1
- package/dist/toolbar/MRT_LinearProgressBar.d.ts +1 -1
- package/dist/toolbar/MRT_TablePagination.d.ts +1 -1
- package/dist/toolbar/MRT_ToolbarAlertBanner.d.ts +1 -1
- package/dist/toolbar/MRT_ToolbarBottom.d.ts +1 -1
- package/dist/toolbar/MRT_ToolbarInternalButtons.d.ts +1 -1
- package/dist/toolbar/MRT_ToolbarTop.d.ts +1 -1
- package/dist/utils.d.ts +10 -16
- package/package.json +4 -4
- package/src/MaterialReactTable.tsx +167 -156
- package/src/body/MRT_TableBody.tsx +5 -6
- package/src/body/MRT_TableBodyCell.tsx +18 -27
- package/src/body/MRT_TableBodyRow.tsx +7 -7
- package/src/body/MRT_TableDetailPanel.tsx +7 -7
- package/src/buttons/MRT_ColumnPinningButtons.tsx +3 -3
- package/src/buttons/MRT_CopyButton.tsx +5 -7
- package/src/buttons/MRT_EditActionButtons.tsx +4 -5
- package/src/buttons/MRT_ExpandAllButton.tsx +4 -5
- package/src/buttons/MRT_ExpandButton.tsx +4 -5
- package/src/buttons/MRT_FullScreenToggleButton.tsx +3 -7
- package/src/buttons/MRT_GrabHandleButton.tsx +39 -41
- package/src/buttons/MRT_ShowHideColumnsButton.tsx +4 -4
- package/src/buttons/MRT_ToggleDensePaddingButton.tsx +3 -7
- package/src/buttons/MRT_ToggleFiltersButton.tsx +3 -4
- package/src/buttons/MRT_ToggleGlobalFilterButton.tsx +4 -8
- package/src/buttons/MRT_ToggleRowActionMenuButton.tsx +6 -6
- package/src/filtersFns.ts +24 -23
- package/src/footer/MRT_TableFooter.tsx +5 -6
- package/src/footer/MRT_TableFooterCell.tsx +8 -11
- package/src/footer/MRT_TableFooterRow.tsx +5 -9
- package/src/head/MRT_DraggableTableHeadCell.tsx +4 -6
- package/src/head/MRT_TableHead.tsx +5 -5
- package/src/head/MRT_TableHeadCell.tsx +18 -29
- package/src/head/MRT_TableHeadCellColumnActionsButton.tsx +6 -8
- package/src/head/MRT_TableHeadCellFilterContainer.tsx +5 -7
- package/src/head/MRT_TableHeadCellFilterLabel.tsx +13 -19
- package/src/head/MRT_TableHeadCellResizeHandle.tsx +12 -11
- package/src/head/MRT_TableHeadCellSortLabel.tsx +3 -5
- package/src/head/MRT_TableHeadRow.tsx +6 -6
- package/src/inputs/MRT_EditCellTextField.tsx +12 -14
- package/src/inputs/MRT_FilterRangeFields.tsx +4 -4
- package/src/inputs/MRT_FilterTextField.tsx +27 -38
- package/src/inputs/MRT_GlobalFilterTextField.tsx +5 -6
- package/src/inputs/MRT_SelectCheckbox.tsx +9 -12
- package/src/menus/MRT_ColumnActionMenu.tsx +5 -9
- package/src/menus/MRT_FilterOptionMenu.tsx +16 -48
- package/src/menus/MRT_RowActionMenu.tsx +4 -5
- package/src/menus/MRT_ShowHideColumnsMenu.tsx +8 -9
- package/src/menus/MRT_ShowHideColumnsMenuItems.tsx +11 -10
- package/src/sortingFns.ts +11 -3
- package/src/table/MRT_Table.tsx +7 -11
- package/src/table/MRT_TableContainer.tsx +5 -6
- package/src/table/MRT_TablePaper.tsx +7 -8
- package/src/table/MRT_TableRoot.tsx +118 -132
- package/src/toolbar/MRT_LinearProgressBar.tsx +4 -5
- package/src/toolbar/MRT_TablePagination.tsx +7 -9
- package/src/toolbar/MRT_ToolbarAlertBanner.tsx +13 -9
- package/src/toolbar/MRT_ToolbarBottom.tsx +8 -9
- package/src/toolbar/MRT_ToolbarInternalButtons.tsx +10 -10
- package/src/toolbar/MRT_ToolbarTop.tsx +11 -11
- package/src/utils.ts +56 -50
@@ -10,10 +10,10 @@ import type { MRT_Cell, MRT_Row, MRT_TableInstance } from '..';
|
|
10
10
|
|
11
11
|
interface Props {
|
12
12
|
cell: MRT_Cell;
|
13
|
-
|
13
|
+
table: MRT_TableInstance;
|
14
14
|
}
|
15
15
|
|
16
|
-
export const MRT_EditCellTextField: FC<Props> = ({ cell,
|
16
|
+
export const MRT_EditCellTextField: FC<Props> = ({ cell, table }) => {
|
17
17
|
const {
|
18
18
|
getState,
|
19
19
|
options: {
|
@@ -25,18 +25,16 @@ export const MRT_EditCellTextField: FC<Props> = ({ cell, instance }) => {
|
|
25
25
|
},
|
26
26
|
setCurrentEditingCell,
|
27
27
|
setCurrentEditingRow,
|
28
|
-
} =
|
29
|
-
|
30
|
-
const [value, setValue] = useState(cell.getValue());
|
31
|
-
|
28
|
+
} = table;
|
32
29
|
const { column, row } = cell;
|
33
|
-
|
34
30
|
const { columnDef } = column;
|
35
31
|
|
32
|
+
const [value, setValue] = useState(cell.getValue());
|
33
|
+
|
36
34
|
const handleChange = (event: ChangeEvent<HTMLInputElement>) => {
|
37
35
|
setValue(event.target.value);
|
38
|
-
columnDef.onCellEditChange?.({ event, cell,
|
39
|
-
onCellEditChange?.({ event, cell,
|
36
|
+
columnDef.onCellEditChange?.({ event, cell, table });
|
37
|
+
onCellEditChange?.({ event, cell, table });
|
40
38
|
};
|
41
39
|
|
42
40
|
const handleBlur = (event: FocusEvent<HTMLInputElement>) => {
|
@@ -46,20 +44,20 @@ export const MRT_EditCellTextField: FC<Props> = ({ cell, instance }) => {
|
|
46
44
|
setCurrentEditingRow({ ...getState().currentEditingRow } as MRT_Row);
|
47
45
|
}
|
48
46
|
setCurrentEditingCell(null);
|
49
|
-
columnDef.onCellEditBlur?.({ event, cell,
|
50
|
-
onCellEditBlur?.({ event, cell,
|
47
|
+
columnDef.onCellEditBlur?.({ event, cell, table });
|
48
|
+
onCellEditBlur?.({ event, cell, table });
|
51
49
|
};
|
52
50
|
|
53
51
|
const mTableBodyCellEditTextFieldProps =
|
54
52
|
muiTableBodyCellEditTextFieldProps instanceof Function
|
55
|
-
? muiTableBodyCellEditTextFieldProps({ cell,
|
53
|
+
? muiTableBodyCellEditTextFieldProps({ cell, table })
|
56
54
|
: muiTableBodyCellEditTextFieldProps;
|
57
55
|
|
58
56
|
const mcTableBodyCellEditTextFieldProps =
|
59
57
|
columnDef.muiTableBodyCellEditTextFieldProps instanceof Function
|
60
58
|
? columnDef.muiTableBodyCellEditTextFieldProps({
|
61
59
|
cell,
|
62
|
-
|
60
|
+
table,
|
63
61
|
})
|
64
62
|
: columnDef.muiTableBodyCellEditTextFieldProps;
|
65
63
|
|
@@ -69,7 +67,7 @@ export const MRT_EditCellTextField: FC<Props> = ({ cell, instance }) => {
|
|
69
67
|
};
|
70
68
|
|
71
69
|
if (enableEditing && columnDef.enableEditing !== false && columnDef.Edit) {
|
72
|
-
return <>{columnDef.Edit?.({ cell,
|
70
|
+
return <>{columnDef.Edit?.({ cell, table })}</>;
|
73
71
|
}
|
74
72
|
|
75
73
|
return (
|
@@ -5,14 +5,14 @@ import { MRT_Header, MRT_TableInstance } from '..';
|
|
5
5
|
|
6
6
|
interface Props {
|
7
7
|
header: MRT_Header;
|
8
|
-
|
8
|
+
table: MRT_TableInstance;
|
9
9
|
}
|
10
10
|
|
11
|
-
export const MRT_FilterRangeFields: FC<Props> = ({ header,
|
11
|
+
export const MRT_FilterRangeFields: FC<Props> = ({ header, table }) => {
|
12
12
|
return (
|
13
13
|
<Box sx={{ display: 'grid', gridTemplateColumns: '6fr 6fr', gap: '1rem' }}>
|
14
|
-
<MRT_FilterTextField header={header} inputIndex={0}
|
15
|
-
<MRT_FilterTextField header={header} inputIndex={1}
|
14
|
+
<MRT_FilterTextField header={header} inputIndex={0} table={table} />
|
15
|
+
<MRT_FilterTextField header={header} inputIndex={1} table={table} />
|
16
16
|
</Box>
|
17
17
|
);
|
18
18
|
};
|
@@ -21,13 +21,13 @@ import type { MRT_Header, MRT_TableInstance } from '..';
|
|
21
21
|
interface Props {
|
22
22
|
header: MRT_Header;
|
23
23
|
inputIndex?: number;
|
24
|
-
|
24
|
+
table: MRT_TableInstance;
|
25
25
|
}
|
26
26
|
|
27
27
|
export const MRT_FilterTextField: FC<Props> = ({
|
28
28
|
header,
|
29
29
|
inputIndex,
|
30
|
-
|
30
|
+
table,
|
31
31
|
}) => {
|
32
32
|
const {
|
33
33
|
getState,
|
@@ -40,26 +40,23 @@ export const MRT_FilterTextField: FC<Props> = ({
|
|
40
40
|
tableId,
|
41
41
|
},
|
42
42
|
setCurrentFilterFns,
|
43
|
-
} =
|
44
|
-
|
43
|
+
} = table;
|
45
44
|
const { column } = header;
|
46
|
-
|
47
45
|
const { columnDef } = column;
|
48
|
-
|
49
46
|
const { currentFilterFns } = getState();
|
50
47
|
|
51
48
|
const [anchorEl, setAnchorEl] = useState<null | HTMLElement>(null);
|
52
49
|
|
53
50
|
const mTableHeadCellFilterTextFieldProps =
|
54
51
|
muiTableHeadCellFilterTextFieldProps instanceof Function
|
55
|
-
? muiTableHeadCellFilterTextFieldProps({ column,
|
52
|
+
? muiTableHeadCellFilterTextFieldProps({ column, table })
|
56
53
|
: muiTableHeadCellFilterTextFieldProps;
|
57
54
|
|
58
55
|
const mcTableHeadCellFilterTextFieldProps =
|
59
56
|
columnDef.muiTableHeadCellFilterTextFieldProps instanceof Function
|
60
57
|
? columnDef.muiTableHeadCellFilterTextFieldProps({
|
61
58
|
column,
|
62
|
-
|
59
|
+
table,
|
63
60
|
})
|
64
61
|
: columnDef.muiTableHeadCellFilterTextFieldProps;
|
65
62
|
|
@@ -121,21 +118,23 @@ export const MRT_FilterTextField: FC<Props> = ({
|
|
121
118
|
};
|
122
119
|
|
123
120
|
if (columnDef.Filter) {
|
124
|
-
return <>{columnDef.Filter?.({ header,
|
121
|
+
return <>{columnDef.Filter?.({ header, table })}</>;
|
125
122
|
}
|
126
123
|
|
127
124
|
const filterId = `mrt-${tableId}-${header.id}-filter-text-field${
|
128
125
|
inputIndex ?? ''
|
129
126
|
}`;
|
130
|
-
const
|
127
|
+
const currentFilterOption = currentFilterFns?.[header.id];
|
131
128
|
const isSelectFilter = !!columnDef.filterSelectOptions;
|
132
|
-
const filterChipLabel =
|
133
|
-
|
134
|
-
|
135
|
-
|
136
|
-
|
137
|
-
|
138
|
-
|
129
|
+
const filterChipLabel = ['empty', 'notEmpty'].includes(currentFilterOption)
|
130
|
+
? //@ts-ignore
|
131
|
+
localization[
|
132
|
+
`filter${
|
133
|
+
currentFilterOption.charAt(0).toUpperCase() +
|
134
|
+
currentFilterOption.slice(1)
|
135
|
+
}`
|
136
|
+
]
|
137
|
+
: '';
|
139
138
|
const filterPlaceholder =
|
140
139
|
inputIndex === undefined
|
141
140
|
? localization.filterByColumn?.replace(
|
@@ -175,26 +174,16 @@ export const MRT_FilterTextField: FC<Props> = ({
|
|
175
174
|
helperText={
|
176
175
|
showChangeModeButton ? (
|
177
176
|
<label htmlFor={filterId}>
|
178
|
-
{
|
179
|
-
|
180
|
-
|
181
|
-
|
182
|
-
|
183
|
-
|
184
|
-
|
185
|
-
|
186
|
-
|
187
|
-
|
188
|
-
) ?? ''
|
189
|
-
: localization.filterMode.replace(
|
190
|
-
'{filterType}',
|
191
|
-
// @ts-ignore
|
192
|
-
localization[
|
193
|
-
`filter${
|
194
|
-
filterFn.charAt(0).toUpperCase() + filterFn.slice(1)
|
195
|
-
}`
|
196
|
-
],
|
197
|
-
)}
|
177
|
+
{localization.filterMode.replace(
|
178
|
+
'{filterType}',
|
179
|
+
// @ts-ignore
|
180
|
+
localization[
|
181
|
+
`filter${
|
182
|
+
currentFilterOption.charAt(0).toUpperCase() +
|
183
|
+
currentFilterOption.slice(1)
|
184
|
+
}`
|
185
|
+
],
|
186
|
+
)}
|
198
187
|
</label>
|
199
188
|
) : null
|
200
189
|
}
|
@@ -303,7 +292,7 @@ export const MRT_FilterTextField: FC<Props> = ({
|
|
303
292
|
anchorEl={anchorEl}
|
304
293
|
header={header}
|
305
294
|
setAnchorEl={setAnchorEl}
|
306
|
-
|
295
|
+
table={table}
|
307
296
|
/>
|
308
297
|
</>
|
309
298
|
);
|
@@ -17,10 +17,10 @@ import { MRT_FilterOptionMenu } from '../menus/MRT_FilterOptionMenu';
|
|
17
17
|
import { MRT_TableInstance } from '..';
|
18
18
|
|
19
19
|
interface Props {
|
20
|
-
|
20
|
+
table: MRT_TableInstance;
|
21
21
|
}
|
22
22
|
|
23
|
-
export const MRT_GlobalFilterTextField: FC<Props> = ({
|
23
|
+
export const MRT_GlobalFilterTextField: FC<Props> = ({ table }) => {
|
24
24
|
const {
|
25
25
|
getState,
|
26
26
|
setGlobalFilter,
|
@@ -31,8 +31,7 @@ export const MRT_GlobalFilterTextField: FC<Props> = ({ instance }) => {
|
|
31
31
|
muiSearchTextFieldProps,
|
32
32
|
tableId,
|
33
33
|
},
|
34
|
-
} =
|
35
|
-
|
34
|
+
} = table;
|
36
35
|
const { globalFilter, showGlobalFilter } = getState();
|
37
36
|
|
38
37
|
const [anchorEl, setAnchorEl] = useState<null | HTMLElement>(null);
|
@@ -61,7 +60,7 @@ export const MRT_GlobalFilterTextField: FC<Props> = ({ instance }) => {
|
|
61
60
|
|
62
61
|
const textFieldProps =
|
63
62
|
muiSearchTextFieldProps instanceof Function
|
64
|
-
? muiSearchTextFieldProps({
|
63
|
+
? muiSearchTextFieldProps({ table })
|
65
64
|
: muiSearchTextFieldProps;
|
66
65
|
|
67
66
|
return (
|
@@ -111,7 +110,7 @@ export const MRT_GlobalFilterTextField: FC<Props> = ({ instance }) => {
|
|
111
110
|
<MRT_FilterOptionMenu
|
112
111
|
anchorEl={anchorEl}
|
113
112
|
setAnchorEl={setAnchorEl}
|
114
|
-
|
113
|
+
table={table}
|
115
114
|
/>
|
116
115
|
</Collapse>
|
117
116
|
);
|
@@ -5,10 +5,10 @@ import type { MRT_Row, MRT_TableInstance } from '..';
|
|
5
5
|
interface Props {
|
6
6
|
row?: MRT_Row;
|
7
7
|
selectAll?: boolean;
|
8
|
-
|
8
|
+
table: MRT_TableInstance;
|
9
9
|
}
|
10
10
|
|
11
|
-
export const MRT_SelectCheckbox: FC<Props> = ({ row, selectAll,
|
11
|
+
export const MRT_SelectCheckbox: FC<Props> = ({ row, selectAll, table }) => {
|
12
12
|
const {
|
13
13
|
getState,
|
14
14
|
options: {
|
@@ -17,16 +17,15 @@ export const MRT_SelectCheckbox: FC<Props> = ({ row, selectAll, instance }) => {
|
|
17
17
|
muiSelectAllCheckboxProps,
|
18
18
|
selectAllMode,
|
19
19
|
},
|
20
|
-
} =
|
21
|
-
|
20
|
+
} = table;
|
22
21
|
const { density } = getState();
|
23
22
|
|
24
23
|
const handleSelectChange = (event: ChangeEvent<HTMLInputElement>) => {
|
25
24
|
if (selectAll) {
|
26
25
|
if (selectAllMode === 'all') {
|
27
|
-
|
26
|
+
table.getToggleAllRowsSelectedHandler()(event as any);
|
28
27
|
} else if (selectAllMode === 'page') {
|
29
|
-
|
28
|
+
table.getToggleAllPageRowsSelectedHandler()(event as any);
|
30
29
|
}
|
31
30
|
} else if (row) {
|
32
31
|
row?.getToggleSelectedHandler()(event as any);
|
@@ -35,10 +34,10 @@ export const MRT_SelectCheckbox: FC<Props> = ({ row, selectAll, instance }) => {
|
|
35
34
|
|
36
35
|
const checkboxProps = selectAll
|
37
36
|
? muiSelectAllCheckboxProps instanceof Function
|
38
|
-
? muiSelectAllCheckboxProps({
|
37
|
+
? muiSelectAllCheckboxProps({ table })
|
39
38
|
: muiSelectAllCheckboxProps
|
40
39
|
: muiSelectCheckboxProps instanceof Function
|
41
|
-
? muiSelectCheckboxProps({ row: row as MRT_Row,
|
40
|
+
? muiSelectCheckboxProps({ row: row as MRT_Row, table })
|
42
41
|
: muiSelectCheckboxProps;
|
43
42
|
|
44
43
|
return (
|
@@ -52,12 +51,10 @@ export const MRT_SelectCheckbox: FC<Props> = ({ row, selectAll, instance }) => {
|
|
52
51
|
>
|
53
52
|
<Checkbox
|
54
53
|
checked={
|
55
|
-
selectAll ?
|
54
|
+
selectAll ? table.getIsAllRowsSelected() : row?.getIsSelected()
|
56
55
|
}
|
57
56
|
indeterminate={
|
58
|
-
selectAll
|
59
|
-
? instance.getIsSomeRowsSelected()
|
60
|
-
: row?.getIsSomeSelected()
|
57
|
+
selectAll ? table.getIsSomeRowsSelected() : row?.getIsSomeSelected()
|
61
58
|
}
|
62
59
|
inputProps={{
|
63
60
|
'aria-label': selectAll
|
@@ -20,14 +20,14 @@ interface Props {
|
|
20
20
|
anchorEl: HTMLElement | null;
|
21
21
|
header: MRT_Header;
|
22
22
|
setAnchorEl: (anchorEl: HTMLElement | null) => void;
|
23
|
-
|
23
|
+
table: MRT_TableInstance;
|
24
24
|
}
|
25
25
|
|
26
26
|
export const MRT_ColumnActionMenu: FC<Props> = ({
|
27
27
|
anchorEl,
|
28
28
|
header,
|
29
29
|
setAnchorEl,
|
30
|
-
|
30
|
+
table,
|
31
31
|
}) => {
|
32
32
|
const {
|
33
33
|
getState,
|
@@ -58,17 +58,13 @@ export const MRT_ColumnActionMenu: FC<Props> = ({
|
|
58
58
|
localization,
|
59
59
|
},
|
60
60
|
setShowFilters,
|
61
|
-
} =
|
62
|
-
|
61
|
+
} = table;
|
63
62
|
const { column } = header;
|
64
|
-
|
65
63
|
const { columnDef } = column;
|
66
|
-
|
67
64
|
const { columnSizing, columnVisibility, density } = getState();
|
68
65
|
|
69
66
|
const [filterMenuAnchorEl, setFilterMenuAnchorEl] =
|
70
67
|
useState<null | HTMLElement>(null);
|
71
|
-
|
72
68
|
const [showHideColumnsMenuAnchorEl, setShowHideColumnsMenuAnchorEl] =
|
73
69
|
useState<null | HTMLElement>(null);
|
74
70
|
|
@@ -265,7 +261,7 @@ export const MRT_ColumnActionMenu: FC<Props> = ({
|
|
265
261
|
key={2}
|
266
262
|
onSelect={handleFilterByColumn}
|
267
263
|
setAnchorEl={setFilterMenuAnchorEl}
|
268
|
-
|
264
|
+
table={table}
|
269
265
|
/>
|
270
266
|
),
|
271
267
|
].filter(Boolean)}
|
@@ -394,7 +390,7 @@ export const MRT_ColumnActionMenu: FC<Props> = ({
|
|
394
390
|
isSubMenu
|
395
391
|
key={2}
|
396
392
|
setAnchorEl={setShowHideColumnsMenuAnchorEl}
|
397
|
-
|
393
|
+
table={table}
|
398
394
|
/>,
|
399
395
|
]}
|
400
396
|
</Menu>
|
@@ -1,24 +1,6 @@
|
|
1
1
|
import React, { FC, useMemo } from 'react';
|
2
2
|
import { Menu, MenuItem } from '@mui/material';
|
3
|
-
import type {
|
4
|
-
MRT_FilterFn,
|
5
|
-
MRT_FILTER_OPTION,
|
6
|
-
MRT_Header,
|
7
|
-
MRT_TableInstance,
|
8
|
-
} from '..';
|
9
|
-
import {
|
10
|
-
between,
|
11
|
-
contains,
|
12
|
-
empty,
|
13
|
-
endsWith,
|
14
|
-
equals,
|
15
|
-
fuzzy,
|
16
|
-
greaterThan,
|
17
|
-
lessThan,
|
18
|
-
notEmpty,
|
19
|
-
notEquals,
|
20
|
-
startsWith,
|
21
|
-
} from '../filtersFns';
|
3
|
+
import type { MRT_FilterOption, MRT_Header, MRT_TableInstance } from '..';
|
22
4
|
|
23
5
|
const commonMenuItemStyles = {
|
24
6
|
py: '6px',
|
@@ -31,7 +13,7 @@ interface Props {
|
|
31
13
|
header?: MRT_Header;
|
32
14
|
onSelect?: () => void;
|
33
15
|
setAnchorEl: (anchorEl: HTMLElement | null) => void;
|
34
|
-
|
16
|
+
table: MRT_TableInstance;
|
35
17
|
}
|
36
18
|
|
37
19
|
export const MRT_FilterOptionMenu: FC<Props> = ({
|
@@ -39,7 +21,7 @@ export const MRT_FilterOptionMenu: FC<Props> = ({
|
|
39
21
|
header,
|
40
22
|
onSelect,
|
41
23
|
setAnchorEl,
|
42
|
-
|
24
|
+
table,
|
43
25
|
}) => {
|
44
26
|
const {
|
45
27
|
getState,
|
@@ -50,12 +32,9 @@ export const MRT_FilterOptionMenu: FC<Props> = ({
|
|
50
32
|
},
|
51
33
|
setCurrentFilterFns,
|
52
34
|
setCurrentGlobalFilterFn,
|
53
|
-
} =
|
54
|
-
|
55
|
-
const { density, currentFilterFns, currentGlobalFilterFn } = getState();
|
56
|
-
|
35
|
+
} = table;
|
36
|
+
const { currentFilterFns, currentGlobalFilterFn, density } = getState();
|
57
37
|
const { column } = header ?? {};
|
58
|
-
|
59
38
|
const { columnDef } = column ?? {};
|
60
39
|
|
61
40
|
const allowedColumnFilterOptions =
|
@@ -68,67 +47,56 @@ export const MRT_FilterOptionMenu: FC<Props> = ({
|
|
68
47
|
option: 'fuzzy',
|
69
48
|
label: localization.filterFuzzy,
|
70
49
|
divider: false,
|
71
|
-
fn: fuzzy,
|
72
50
|
},
|
73
51
|
{
|
74
52
|
option: 'contains',
|
75
53
|
label: localization.filterContains,
|
76
54
|
divider: false,
|
77
|
-
fn: contains,
|
78
55
|
},
|
79
56
|
{
|
80
57
|
option: 'startsWith',
|
81
58
|
label: localization.filterStartsWith,
|
82
59
|
divider: false,
|
83
|
-
fn: startsWith,
|
84
60
|
},
|
85
61
|
{
|
86
62
|
option: 'endsWith',
|
87
63
|
label: localization.filterEndsWith,
|
88
64
|
divider: true,
|
89
|
-
fn: endsWith,
|
90
65
|
},
|
91
66
|
{
|
92
67
|
option: 'equals',
|
93
68
|
label: localization.filterEquals,
|
94
69
|
divider: false,
|
95
|
-
fn: equals,
|
96
70
|
},
|
97
71
|
{
|
98
72
|
option: 'notEquals',
|
99
73
|
label: localization.filterNotEquals,
|
100
74
|
divider: true,
|
101
|
-
fn: notEquals,
|
102
75
|
},
|
103
76
|
{
|
104
77
|
option: 'between',
|
105
78
|
label: localization.filterBetween,
|
106
79
|
divider: false,
|
107
|
-
fn: between,
|
108
80
|
},
|
109
81
|
{
|
110
82
|
option: 'greaterThan',
|
111
83
|
label: localization.filterGreaterThan,
|
112
84
|
divider: false,
|
113
|
-
fn: greaterThan,
|
114
85
|
},
|
115
86
|
{
|
116
87
|
option: 'lessThan',
|
117
88
|
label: localization.filterLessThan,
|
118
89
|
divider: true,
|
119
|
-
fn: lessThan,
|
120
90
|
},
|
121
91
|
{
|
122
92
|
option: 'empty',
|
123
93
|
label: localization.filterEmpty,
|
124
94
|
divider: false,
|
125
|
-
fn: empty,
|
126
95
|
},
|
127
96
|
{
|
128
97
|
option: 'notEmpty',
|
129
98
|
label: localization.filterNotEmpty,
|
130
99
|
divider: false,
|
131
|
-
fn: notEmpty,
|
132
100
|
},
|
133
101
|
].filter((filterType) =>
|
134
102
|
columnDef
|
@@ -138,7 +106,7 @@ export const MRT_FilterOptionMenu: FC<Props> = ({
|
|
138
106
|
enabledGlobalFilterOptions.includes(filterType.option)) &&
|
139
107
|
['fuzzy', 'contains'].includes(filterType.option),
|
140
108
|
) as Array<{
|
141
|
-
option:
|
109
|
+
option: MRT_FilterOption;
|
142
110
|
label: string;
|
143
111
|
divider: boolean;
|
144
112
|
fn: Function;
|
@@ -146,21 +114,21 @@ export const MRT_FilterOptionMenu: FC<Props> = ({
|
|
146
114
|
[],
|
147
115
|
);
|
148
116
|
|
149
|
-
const handleSelectFilterType = (
|
117
|
+
const handleSelectFilterType = (option: MRT_FilterOption) => {
|
150
118
|
if (header && column) {
|
151
|
-
setCurrentFilterFns((prev: { [key: string]:
|
119
|
+
setCurrentFilterFns((prev: { [key: string]: any }) => ({
|
152
120
|
...prev,
|
153
|
-
[header.id]:
|
121
|
+
[header.id]: option,
|
154
122
|
}));
|
155
|
-
if (['empty', 'notEmpty'].includes(
|
123
|
+
if (['empty', 'notEmpty'].includes(option)) {
|
156
124
|
column.setFilterValue(' ');
|
157
|
-
} else if (
|
125
|
+
} else if (option === 'between') {
|
158
126
|
column.setFilterValue(['', '']);
|
159
127
|
} else {
|
160
128
|
column.setFilterValue('');
|
161
129
|
}
|
162
130
|
} else {
|
163
|
-
setCurrentGlobalFilterFn(
|
131
|
+
setCurrentGlobalFilterFn(option);
|
164
132
|
}
|
165
133
|
setAnchorEl(null);
|
166
134
|
onSelect?.();
|
@@ -180,14 +148,14 @@ export const MRT_FilterOptionMenu: FC<Props> = ({
|
|
180
148
|
dense: density === 'compact',
|
181
149
|
}}
|
182
150
|
>
|
183
|
-
{filterOptions.map(({ option, label, divider
|
151
|
+
{filterOptions.map(({ option, label, divider }, index) => (
|
184
152
|
<MenuItem
|
185
153
|
divider={divider}
|
186
154
|
key={index}
|
187
|
-
onClick={() => handleSelectFilterType(option
|
188
|
-
selected={option === filterOption
|
155
|
+
onClick={() => handleSelectFilterType(option)}
|
156
|
+
selected={option === filterOption}
|
189
157
|
sx={commonMenuItemStyles}
|
190
|
-
value={option
|
158
|
+
value={option}
|
191
159
|
>
|
192
160
|
{label}
|
193
161
|
</MenuItem>
|
@@ -11,7 +11,7 @@ interface Props {
|
|
11
11
|
handleEdit: () => void;
|
12
12
|
row: MRT_Row;
|
13
13
|
setAnchorEl: (anchorEl: HTMLElement | null) => void;
|
14
|
-
|
14
|
+
table: MRT_TableInstance;
|
15
15
|
}
|
16
16
|
|
17
17
|
export const MRT_RowActionMenu: FC<Props> = ({
|
@@ -19,7 +19,7 @@ export const MRT_RowActionMenu: FC<Props> = ({
|
|
19
19
|
handleEdit,
|
20
20
|
row,
|
21
21
|
setAnchorEl,
|
22
|
-
|
22
|
+
table,
|
23
23
|
}) => {
|
24
24
|
const {
|
25
25
|
getState,
|
@@ -29,8 +29,7 @@ export const MRT_RowActionMenu: FC<Props> = ({
|
|
29
29
|
localization,
|
30
30
|
renderRowActionMenuItems,
|
31
31
|
},
|
32
|
-
} =
|
33
|
-
|
32
|
+
} = table;
|
34
33
|
const { density } = getState();
|
35
34
|
|
36
35
|
return (
|
@@ -54,7 +53,7 @@ export const MRT_RowActionMenu: FC<Props> = ({
|
|
54
53
|
)}
|
55
54
|
{renderRowActionMenuItems?.({
|
56
55
|
row,
|
57
|
-
|
56
|
+
table,
|
58
57
|
closeMenu: () => setAnchorEl(null),
|
59
58
|
})}
|
60
59
|
</Menu>
|
@@ -8,14 +8,14 @@ interface Props {
|
|
8
8
|
anchorEl: HTMLElement | null;
|
9
9
|
isSubMenu?: boolean;
|
10
10
|
setAnchorEl: (anchorEl: HTMLElement | null) => void;
|
11
|
-
|
11
|
+
table: MRT_TableInstance;
|
12
12
|
}
|
13
13
|
|
14
14
|
export const MRT_ShowHideColumnsMenu: FC<Props> = ({
|
15
15
|
anchorEl,
|
16
16
|
isSubMenu,
|
17
17
|
setAnchorEl,
|
18
|
-
|
18
|
+
table,
|
19
19
|
}) => {
|
20
20
|
const {
|
21
21
|
getAllColumns,
|
@@ -29,8 +29,7 @@ export const MRT_ShowHideColumnsMenu: FC<Props> = ({
|
|
29
29
|
getState,
|
30
30
|
toggleAllColumnsVisible,
|
31
31
|
options: { localization, enablePinning, enableColumnOrdering },
|
32
|
-
} =
|
33
|
-
|
32
|
+
} = table;
|
34
33
|
const { density, columnOrder, columnPinning } = getState();
|
35
34
|
|
36
35
|
const hideAllColumns = () => {
|
@@ -43,7 +42,7 @@ export const MRT_ShowHideColumnsMenu: FC<Props> = ({
|
|
43
42
|
const columns = getAllColumns();
|
44
43
|
if (
|
45
44
|
columnOrder.length > 0 &&
|
46
|
-
!columns.some((col) => col.columnDefType === 'group')
|
45
|
+
!columns.some((col) => col.columnDef.columnDefType === 'group')
|
47
46
|
) {
|
48
47
|
return [
|
49
48
|
...getLeftLeafColumns(),
|
@@ -91,8 +90,8 @@ export const MRT_ShowHideColumnsMenu: FC<Props> = ({
|
|
91
90
|
{!isSubMenu && enableColumnOrdering && (
|
92
91
|
<Button
|
93
92
|
onClick={() =>
|
94
|
-
|
95
|
-
getDefaultColumnOrderIds(
|
93
|
+
table.setColumnOrder(
|
94
|
+
getDefaultColumnOrderIds(table.options as any),
|
96
95
|
)
|
97
96
|
}
|
98
97
|
>
|
@@ -102,7 +101,7 @@ export const MRT_ShowHideColumnsMenu: FC<Props> = ({
|
|
102
101
|
{!isSubMenu && enablePinning && (
|
103
102
|
<Button
|
104
103
|
disabled={!getIsSomeColumnsPinned()}
|
105
|
-
onClick={() =>
|
104
|
+
onClick={() => table.resetColumnPinning(true)}
|
106
105
|
>
|
107
106
|
{localization.unpinAll}
|
108
107
|
</Button>
|
@@ -121,7 +120,7 @@ export const MRT_ShowHideColumnsMenu: FC<Props> = ({
|
|
121
120
|
column={column}
|
122
121
|
isSubMenu={isSubMenu}
|
123
122
|
key={`${index}-${column.id}`}
|
124
|
-
|
123
|
+
table={table}
|
125
124
|
/>
|
126
125
|
))}
|
127
126
|
</Menu>
|