material-react-table 0.6.5 → 0.6.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/MaterialReactTable.d.ts +2 -0
- package/dist/buttons/MRT_CopyButton.d.ts +7 -0
- package/dist/icons.d.ts +2 -0
- package/dist/localization.d.ts +2 -0
- package/dist/material-react-table.cjs.development.js +63 -2
- 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 +63 -2
- package/dist/material-react-table.esm.js.map +1 -1
- package/package.json +4 -4
- package/src/MaterialReactTable.tsx +2 -0
- package/src/body/MRT_TableBodyCell.tsx +8 -1
- package/src/buttons/MRT_CopyButton.tsx +50 -0
- package/src/icons.ts +6 -0
- package/src/localization.ts +4 -0
- package/src/menus/MRT_FilterTypeMenu.tsx +66 -62
|
@@ -4,8 +4,10 @@ import { Menu, MenuItem, TextField, InputAdornment, Tooltip, IconButton, Chip, F
|
|
|
4
4
|
import { matchSorter } from 'match-sorter';
|
|
5
5
|
import ArrowRightIcon from '@mui/icons-material/ArrowRight';
|
|
6
6
|
import CancelIcon from '@mui/icons-material/Cancel';
|
|
7
|
+
import CheckBoxIcon from '@mui/icons-material/CheckBox';
|
|
7
8
|
import ClearAllIcon from '@mui/icons-material/ClearAll';
|
|
8
9
|
import CloseIcon from '@mui/icons-material/Close';
|
|
10
|
+
import ContentCopyIcon from '@mui/icons-material/ContentCopy';
|
|
9
11
|
import DensityMediumIcon from '@mui/icons-material/DensityMedium';
|
|
10
12
|
import DensitySmallIcon from '@mui/icons-material/DensitySmall';
|
|
11
13
|
import DoubleArrowDownIcon from '@mui/icons-material/KeyboardDoubleArrowDown';
|
|
@@ -445,7 +447,9 @@ var MRT_FilterTypeMenu = function MRT_FilterTypeMenu(_ref) {
|
|
|
445
447
|
label: localization.filterNotEmpty,
|
|
446
448
|
divider: false,
|
|
447
449
|
fn: notEmpty
|
|
448
|
-
}]
|
|
450
|
+
}].filter(function (filterType) {
|
|
451
|
+
return !column.filterTypes || column.filterTypes.includes(filterType.type);
|
|
452
|
+
});
|
|
449
453
|
}, []);
|
|
450
454
|
|
|
451
455
|
var handleSelectFilterType = function handleSelectFilterType(value) {
|
|
@@ -1185,6 +1189,52 @@ var MRT_EditCellTextField = function MRT_EditCellTextField(_ref) {
|
|
|
1185
1189
|
}, textFieldProps));
|
|
1186
1190
|
};
|
|
1187
1191
|
|
|
1192
|
+
var MRT_CopyButton = function MRT_CopyButton(_ref) {
|
|
1193
|
+
var cell = _ref.cell;
|
|
1194
|
+
|
|
1195
|
+
var _useMRT = useMRT(),
|
|
1196
|
+
_useMRT$icons = _useMRT.icons,
|
|
1197
|
+
CheckBoxIcon = _useMRT$icons.CheckBoxIcon,
|
|
1198
|
+
ContentCopyIcon = _useMRT$icons.ContentCopyIcon,
|
|
1199
|
+
localization = _useMRT.localization;
|
|
1200
|
+
|
|
1201
|
+
var _useState = useState(false),
|
|
1202
|
+
copied = _useState[0],
|
|
1203
|
+
setCopied = _useState[1];
|
|
1204
|
+
|
|
1205
|
+
var handleCopy = function handleCopy(text) {
|
|
1206
|
+
navigator.clipboard.writeText(text);
|
|
1207
|
+
setCopied(true);
|
|
1208
|
+
setTimeout(function () {
|
|
1209
|
+
return setCopied(false);
|
|
1210
|
+
}, 2000);
|
|
1211
|
+
};
|
|
1212
|
+
|
|
1213
|
+
return React.createElement(Tooltip, {
|
|
1214
|
+
arrow: true,
|
|
1215
|
+
title: copied ? localization.copiedToClipboard : localization.clickToCopy
|
|
1216
|
+
}, React.createElement(IconButton, {
|
|
1217
|
+
"aria-label": localization.clickToCopy,
|
|
1218
|
+
onClick: function onClick() {
|
|
1219
|
+
return handleCopy(cell.value);
|
|
1220
|
+
},
|
|
1221
|
+
size: "small",
|
|
1222
|
+
sx: {
|
|
1223
|
+
opacity: 0.05,
|
|
1224
|
+
m: '0 0.5rem',
|
|
1225
|
+
transition: 'all 0.2s ease-in-out',
|
|
1226
|
+
'&:hover': {
|
|
1227
|
+
opacity: 1
|
|
1228
|
+
}
|
|
1229
|
+
}
|
|
1230
|
+
}, copied ? React.createElement(CheckBoxIcon, {
|
|
1231
|
+
color: "success",
|
|
1232
|
+
fontSize: "small"
|
|
1233
|
+
}) : React.createElement(ContentCopyIcon, {
|
|
1234
|
+
fontSize: "small"
|
|
1235
|
+
})));
|
|
1236
|
+
};
|
|
1237
|
+
|
|
1188
1238
|
var commonTableBodyCellStyles = function commonTableBodyCellStyles(densePadding) {
|
|
1189
1239
|
return {
|
|
1190
1240
|
p: densePadding ? '0.5rem' : '1rem',
|
|
@@ -1203,6 +1253,7 @@ var MRT_TableBodyCell = function MRT_TableBodyCell(_ref) {
|
|
|
1203
1253
|
var cell = _ref.cell;
|
|
1204
1254
|
|
|
1205
1255
|
var _useMRT = useMRT(),
|
|
1256
|
+
enableCellCopyButtons = _useMRT.enableCellCopyButtons,
|
|
1206
1257
|
isLoading = _useMRT.isLoading,
|
|
1207
1258
|
muiTableBodyCellProps = _useMRT.muiTableBodyCellProps,
|
|
1208
1259
|
muiTableBodyCellSkeletonProps = _useMRT.muiTableBodyCellSkeletonProps,
|
|
@@ -1230,7 +1281,13 @@ var MRT_TableBodyCell = function MRT_TableBodyCell(_ref) {
|
|
|
1230
1281
|
width: Math.random() * (120 - 60) + 60
|
|
1231
1282
|
}, muiTableBodyCellSkeletonProps)) : !cell.column.disableEditing && (currentEditingRow == null ? void 0 : currentEditingRow.id) === cell.row.id ? React.createElement(MRT_EditCellTextField, {
|
|
1232
1283
|
cell: cell
|
|
1233
|
-
}) : cell.isPlaceholder ? null : cell.isAggregated ? cell.render('Aggregated') : cell.isGrouped ? React.createElement("span", null, cell.render('Cell'), " (", cell.row.subRows.length, ")") : cell.
|
|
1284
|
+
}) : cell.isPlaceholder ? null : cell.isAggregated ? cell.render('Aggregated') : cell.isGrouped ? React.createElement("span", null, cell.render('Cell'), " (", cell.row.subRows.length, ")") : enableCellCopyButtons && !cell.column.disableCellCopyButton ? React.createElement(Box, {
|
|
1285
|
+
sx: {
|
|
1286
|
+
whiteSpace: 'nowrap'
|
|
1287
|
+
}
|
|
1288
|
+
}, cell.render('Cell'), React.createElement(MRT_CopyButton, {
|
|
1289
|
+
cell: cell
|
|
1290
|
+
})) : cell.render('Cell'));
|
|
1234
1291
|
};
|
|
1235
1292
|
|
|
1236
1293
|
var MRT_SelectCheckbox = function MRT_SelectCheckbox(_ref) {
|
|
@@ -3012,7 +3069,9 @@ var MRT_DefaultLocalization_EN = {
|
|
|
3012
3069
|
clearFilter: 'Clear filter',
|
|
3013
3070
|
clearSearch: 'Clear search',
|
|
3014
3071
|
clearSort: 'Clear sort',
|
|
3072
|
+
clickToCopy: 'Click to copy',
|
|
3015
3073
|
columnActions: 'Column Actions',
|
|
3074
|
+
copiedToClipboard: 'Copied to clipboard',
|
|
3016
3075
|
edit: 'Edit',
|
|
3017
3076
|
expand: 'Expand',
|
|
3018
3077
|
expandAll: 'Expand all',
|
|
@@ -3055,8 +3114,10 @@ var MRT_DefaultLocalization_EN = {
|
|
|
3055
3114
|
var MRT_Default_Icons = {
|
|
3056
3115
|
ArrowRightIcon: ArrowRightIcon,
|
|
3057
3116
|
CancelIcon: CancelIcon,
|
|
3117
|
+
CheckBoxIcon: CheckBoxIcon,
|
|
3058
3118
|
ClearAllIcon: ClearAllIcon,
|
|
3059
3119
|
CloseIcon: CloseIcon,
|
|
3120
|
+
ContentCopyIcon: ContentCopyIcon,
|
|
3060
3121
|
DensityMediumIcon: DensityMediumIcon,
|
|
3061
3122
|
DensitySmallIcon: DensitySmallIcon,
|
|
3062
3123
|
DoubleArrowDownIcon: DoubleArrowDownIcon,
|