material-react-table-narender 2.13.4 → 2.13.6
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/index.d.ts +3 -0
- package/dist/index.esm.js +56 -8
- package/dist/index.esm.js.map +1 -1
- package/dist/index.js +56 -7
- package/dist/index.js.map +1 -1
- package/package.json +3 -3
- package/src/components/menus/MRT_ShowHideColumnsMenu.tsx +12 -0
- package/src/components/menus/MRT_ShowHideColumnsMenuItems.tsx +29 -0
- package/src/icons.ts +2 -0
- package/src/utils/cell.utils.ts +16 -0
package/package.json
CHANGED
@@ -1,5 +1,5 @@
|
|
1
1
|
{
|
2
|
-
"version": "2.13.
|
2
|
+
"version": "2.13.6",
|
3
3
|
"license": "MIT",
|
4
4
|
"name": "material-react-table-narender",
|
5
5
|
"description": "A fully featured Material UI V5 implementation of TanStack React Table V8, written from the ground up in TypeScript.",
|
@@ -35,11 +35,11 @@
|
|
35
35
|
"size-limit": [
|
36
36
|
{
|
37
37
|
"path": "dist/index.js",
|
38
|
-
"limit": "
|
38
|
+
"limit": "60 KB"
|
39
39
|
},
|
40
40
|
{
|
41
41
|
"path": "dist/index.esm.js",
|
42
|
-
"limit": "
|
42
|
+
"limit": "60 KB"
|
43
43
|
}
|
44
44
|
],
|
45
45
|
"engines": {
|
@@ -40,6 +40,7 @@ export const MRT_ShowHideColumnsMenu = <TData extends MRT_RowData>({
|
|
40
40
|
enableColumnPinning,
|
41
41
|
enableHiding,
|
42
42
|
localization,
|
43
|
+
enableColumnResizing,
|
43
44
|
mrtTheme: { menuBackgroundColor },
|
44
45
|
},
|
45
46
|
} = table;
|
@@ -140,6 +141,17 @@ export const MRT_ShowHideColumnsMenu = <TData extends MRT_RowData>({
|
|
140
141
|
{localization.showAll}
|
141
142
|
</Button>
|
142
143
|
)}
|
144
|
+
{
|
145
|
+
enableColumnResizing && (
|
146
|
+
<Button
|
147
|
+
onClick={() => {
|
148
|
+
table.resetColumnSizing(true);
|
149
|
+
}}
|
150
|
+
>
|
151
|
+
{localization.resetColumnSize}
|
152
|
+
</Button>
|
153
|
+
)
|
154
|
+
}
|
143
155
|
</Box>
|
144
156
|
<Divider />
|
145
157
|
{allColumns.map((column, index) => (
|
@@ -21,6 +21,7 @@ import { getCommonTooltipProps } from '../../utils/style.utils';
|
|
21
21
|
import { parseFromValuesOrFunc } from '../../utils/utils';
|
22
22
|
import { MRT_ColumnPinningButtons } from '../buttons/MRT_ColumnPinningButtons';
|
23
23
|
import { MRT_GrabHandleButton } from '../buttons/MRT_GrabHandleButton';
|
24
|
+
import { Button } from '@mui/material';
|
24
25
|
|
25
26
|
export interface MRT_ShowHideColumnsMenuItemsProps<TData extends MRT_RowData>
|
26
27
|
extends MenuItemProps {
|
@@ -48,10 +49,14 @@ export const MRT_ShowHideColumnsMenuItems = <TData extends MRT_RowData>({
|
|
48
49
|
enableColumnPinning,
|
49
50
|
enableHiding,
|
50
51
|
localization,
|
52
|
+
enableColumnResizing,
|
51
53
|
mrtTheme: { draggingBorderColor },
|
54
|
+
icons: { SettingsBackupRestoreIcon },
|
55
|
+
|
52
56
|
},
|
53
57
|
setColumnOrder,
|
54
58
|
} = table;
|
59
|
+
|
55
60
|
const { columnOrder } = getState();
|
56
61
|
const { columnDef } = column;
|
57
62
|
const { columnDefType } = columnDef;
|
@@ -175,6 +180,30 @@ export const MRT_ShowHideColumnsMenuItems = <TData extends MRT_RowData>({
|
|
175
180
|
{columnDef.header}
|
176
181
|
</Typography>
|
177
182
|
)}
|
183
|
+
{
|
184
|
+
enableColumnResizing && columnDefType !== 'group' &&
|
185
|
+
(
|
186
|
+
columnDef.enableResizing !== false ? (
|
187
|
+
<Tooltip
|
188
|
+
{...getCommonTooltipProps()}
|
189
|
+
title={
|
190
|
+
localization.resetColumnSize
|
191
|
+
}
|
192
|
+
>
|
193
|
+
<Button
|
194
|
+
onClick={() => {
|
195
|
+
column.resetSize();
|
196
|
+
}}
|
197
|
+
>
|
198
|
+
<SettingsBackupRestoreIcon />
|
199
|
+
</Button>
|
200
|
+
</Tooltip>
|
201
|
+
) : (
|
202
|
+
<Box sx={{ width: '28px' }} />
|
203
|
+
)
|
204
|
+
)
|
205
|
+
}
|
206
|
+
|
178
207
|
</Box>
|
179
208
|
</MenuItem>
|
180
209
|
{column.columns?.map((c: MRT_Column<TData>, i) => (
|
package/src/icons.ts
CHANGED
@@ -32,6 +32,7 @@ import SortIcon from '@mui/icons-material/Sort';
|
|
32
32
|
import SyncAltIcon from '@mui/icons-material/SyncAlt';
|
33
33
|
import ViewColumnIcon from '@mui/icons-material/ViewColumn';
|
34
34
|
import VisibilityOffIcon from '@mui/icons-material/VisibilityOff';
|
35
|
+
import SettingsBackupRestoreIcon from '@mui/icons-material/SettingsBackupRestore';
|
35
36
|
|
36
37
|
export const MRT_Default_Icons = {
|
37
38
|
ArrowDownwardIcon,
|
@@ -68,6 +69,7 @@ export const MRT_Default_Icons = {
|
|
68
69
|
SyncAltIcon,
|
69
70
|
ViewColumnIcon,
|
70
71
|
VisibilityOffIcon,
|
72
|
+
SettingsBackupRestoreIcon
|
71
73
|
} as const;
|
72
74
|
|
73
75
|
export type MRT_Icons = Record<keyof typeof MRT_Default_Icons, any>;
|
package/src/utils/cell.utils.ts
CHANGED
@@ -149,6 +149,22 @@ export const cellKeyboardShortcuts = <TData extends MRT_RowData = MRT_RowData>({
|
|
149
149
|
].includes(event.key)
|
150
150
|
) {
|
151
151
|
event.preventDefault();
|
152
|
+
if (['ArrowDown'].includes(event.key)) {
|
153
|
+
debugger; // This will pause execution for debugging purposes
|
154
|
+
|
155
|
+
// Select the input element within the MUI Autocomplete component
|
156
|
+
const autocomplete = currentCell.querySelector('.MuiAutocomplete-root input[type="text"]');
|
157
|
+
|
158
|
+
// Check if the current cell is an MUI Autocomplete
|
159
|
+
if (autocomplete) {
|
160
|
+
return; // Exit the function if it's an Autocomplete
|
161
|
+
}
|
162
|
+
|
163
|
+
// Additional logic for when it's not an Autocomplete can go here
|
164
|
+
}
|
165
|
+
|
166
|
+
|
167
|
+
|
152
168
|
|
153
169
|
const currentRow = parentElement || currentCell.closest('tr');
|
154
170
|
const tableElement = containerElement || currentCell.closest('table');
|