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.
@@ -33,6 +33,7 @@ export declare type MRT_ColumnInterface<D extends {} = {}> = ColumnInterface<D>
33
33
  columns?: MRT_ColumnInterface<D>[];
34
34
  disableEditing?: boolean;
35
35
  disableFilters?: boolean;
36
+ disableCellCopyButton?: boolean;
36
37
  filter?: MRT_FilterType | string | FilterType<D>;
37
38
  filterSelectOptions?: (string | {
38
39
  text: string;
@@ -78,6 +79,7 @@ export declare type MaterialReactTableProps<D extends {} = {}> = UseTableOptions
78
79
  disableFullScreenToggle?: boolean;
79
80
  disableSelectAll?: boolean;
80
81
  disableSubRowTree?: boolean;
82
+ enableCellCopyButtons?: boolean;
81
83
  enableColumnGrouping?: boolean;
82
84
  enableColumnResizing?: boolean;
83
85
  enableRowActions?: boolean;
@@ -0,0 +1,7 @@
1
+ import { FC } from 'react';
2
+ import { MRT_Cell } from '..';
3
+ interface Props {
4
+ cell: MRT_Cell;
5
+ }
6
+ export declare const MRT_CopyButton: FC<Props>;
7
+ export {};
package/dist/icons.d.ts CHANGED
@@ -1,8 +1,10 @@
1
1
  export interface MRT_Icons {
2
2
  ArrowRightIcon: any;
3
3
  CancelIcon: any;
4
+ CheckBoxIcon: any;
4
5
  ClearAllIcon: any;
5
6
  CloseIcon: any;
7
+ ContentCopyIcon: any;
6
8
  DensityMediumIcon: any;
7
9
  DensitySmallIcon: any;
8
10
  DoubleArrowDownIcon: any;
@@ -5,7 +5,9 @@ export interface MRT_Localization {
5
5
  clearFilter: string;
6
6
  clearSearch: string;
7
7
  clearSort: string;
8
+ clickToCopy: string;
8
9
  columnActions: string;
10
+ copiedToClipboard: string;
9
11
  edit: string;
10
12
  expand: string;
11
13
  expandAll: string;
@@ -11,8 +11,10 @@ var material = require('@mui/material');
11
11
  var matchSorter = require('match-sorter');
12
12
  var ArrowRightIcon = _interopDefault(require('@mui/icons-material/ArrowRight'));
13
13
  var CancelIcon = _interopDefault(require('@mui/icons-material/Cancel'));
14
+ var CheckBoxIcon = _interopDefault(require('@mui/icons-material/CheckBox'));
14
15
  var ClearAllIcon = _interopDefault(require('@mui/icons-material/ClearAll'));
15
16
  var CloseIcon = _interopDefault(require('@mui/icons-material/Close'));
17
+ var ContentCopyIcon = _interopDefault(require('@mui/icons-material/ContentCopy'));
16
18
  var DensityMediumIcon = _interopDefault(require('@mui/icons-material/DensityMedium'));
17
19
  var DensitySmallIcon = _interopDefault(require('@mui/icons-material/DensitySmall'));
18
20
  var DoubleArrowDownIcon = _interopDefault(require('@mui/icons-material/KeyboardDoubleArrowDown'));
@@ -452,7 +454,9 @@ var MRT_FilterTypeMenu = function MRT_FilterTypeMenu(_ref) {
452
454
  label: localization.filterNotEmpty,
453
455
  divider: false,
454
456
  fn: notEmpty
455
- }];
457
+ }].filter(function (filterType) {
458
+ return !column.filterTypes || column.filterTypes.includes(filterType.type);
459
+ });
456
460
  }, []);
457
461
 
458
462
  var handleSelectFilterType = function handleSelectFilterType(value) {
@@ -1192,6 +1196,52 @@ var MRT_EditCellTextField = function MRT_EditCellTextField(_ref) {
1192
1196
  }, textFieldProps));
1193
1197
  };
1194
1198
 
1199
+ var MRT_CopyButton = function MRT_CopyButton(_ref) {
1200
+ var cell = _ref.cell;
1201
+
1202
+ var _useMRT = useMRT(),
1203
+ _useMRT$icons = _useMRT.icons,
1204
+ CheckBoxIcon = _useMRT$icons.CheckBoxIcon,
1205
+ ContentCopyIcon = _useMRT$icons.ContentCopyIcon,
1206
+ localization = _useMRT.localization;
1207
+
1208
+ var _useState = React.useState(false),
1209
+ copied = _useState[0],
1210
+ setCopied = _useState[1];
1211
+
1212
+ var handleCopy = function handleCopy(text) {
1213
+ navigator.clipboard.writeText(text);
1214
+ setCopied(true);
1215
+ setTimeout(function () {
1216
+ return setCopied(false);
1217
+ }, 2000);
1218
+ };
1219
+
1220
+ return React__default.createElement(material.Tooltip, {
1221
+ arrow: true,
1222
+ title: copied ? localization.copiedToClipboard : localization.clickToCopy
1223
+ }, React__default.createElement(material.IconButton, {
1224
+ "aria-label": localization.clickToCopy,
1225
+ onClick: function onClick() {
1226
+ return handleCopy(cell.value);
1227
+ },
1228
+ size: "small",
1229
+ sx: {
1230
+ opacity: 0.05,
1231
+ m: '0 0.5rem',
1232
+ transition: 'all 0.2s ease-in-out',
1233
+ '&:hover': {
1234
+ opacity: 1
1235
+ }
1236
+ }
1237
+ }, copied ? React__default.createElement(CheckBoxIcon, {
1238
+ color: "success",
1239
+ fontSize: "small"
1240
+ }) : React__default.createElement(ContentCopyIcon, {
1241
+ fontSize: "small"
1242
+ })));
1243
+ };
1244
+
1195
1245
  var commonTableBodyCellStyles = function commonTableBodyCellStyles(densePadding) {
1196
1246
  return {
1197
1247
  p: densePadding ? '0.5rem' : '1rem',
@@ -1210,6 +1260,7 @@ var MRT_TableBodyCell = function MRT_TableBodyCell(_ref) {
1210
1260
  var cell = _ref.cell;
1211
1261
 
1212
1262
  var _useMRT = useMRT(),
1263
+ enableCellCopyButtons = _useMRT.enableCellCopyButtons,
1213
1264
  isLoading = _useMRT.isLoading,
1214
1265
  muiTableBodyCellProps = _useMRT.muiTableBodyCellProps,
1215
1266
  muiTableBodyCellSkeletonProps = _useMRT.muiTableBodyCellSkeletonProps,
@@ -1237,7 +1288,13 @@ var MRT_TableBodyCell = function MRT_TableBodyCell(_ref) {
1237
1288
  width: Math.random() * (120 - 60) + 60
1238
1289
  }, muiTableBodyCellSkeletonProps)) : !cell.column.disableEditing && (currentEditingRow == null ? void 0 : currentEditingRow.id) === cell.row.id ? React__default.createElement(MRT_EditCellTextField, {
1239
1290
  cell: cell
1240
- }) : cell.isPlaceholder ? null : cell.isAggregated ? cell.render('Aggregated') : cell.isGrouped ? React__default.createElement("span", null, cell.render('Cell'), " (", cell.row.subRows.length, ")") : cell.render('Cell'));
1291
+ }) : cell.isPlaceholder ? null : cell.isAggregated ? cell.render('Aggregated') : cell.isGrouped ? React__default.createElement("span", null, cell.render('Cell'), " (", cell.row.subRows.length, ")") : enableCellCopyButtons && !cell.column.disableCellCopyButton ? React__default.createElement(material.Box, {
1292
+ sx: {
1293
+ whiteSpace: 'nowrap'
1294
+ }
1295
+ }, cell.render('Cell'), React__default.createElement(MRT_CopyButton, {
1296
+ cell: cell
1297
+ })) : cell.render('Cell'));
1241
1298
  };
1242
1299
 
1243
1300
  var MRT_SelectCheckbox = function MRT_SelectCheckbox(_ref) {
@@ -3019,7 +3076,9 @@ var MRT_DefaultLocalization_EN = {
3019
3076
  clearFilter: 'Clear filter',
3020
3077
  clearSearch: 'Clear search',
3021
3078
  clearSort: 'Clear sort',
3079
+ clickToCopy: 'Click to copy',
3022
3080
  columnActions: 'Column Actions',
3081
+ copiedToClipboard: 'Copied to clipboard',
3023
3082
  edit: 'Edit',
3024
3083
  expand: 'Expand',
3025
3084
  expandAll: 'Expand all',
@@ -3062,8 +3121,10 @@ var MRT_DefaultLocalization_EN = {
3062
3121
  var MRT_Default_Icons = {
3063
3122
  ArrowRightIcon: ArrowRightIcon,
3064
3123
  CancelIcon: CancelIcon,
3124
+ CheckBoxIcon: CheckBoxIcon,
3065
3125
  ClearAllIcon: ClearAllIcon,
3066
3126
  CloseIcon: CloseIcon,
3127
+ ContentCopyIcon: ContentCopyIcon,
3067
3128
  DensityMediumIcon: DensityMediumIcon,
3068
3129
  DensitySmallIcon: DensitySmallIcon,
3069
3130
  DoubleArrowDownIcon: DoubleArrowDownIcon,