material-react-table 0.6.6 → 0.6.7

package/package.json

@@ -1,5 +1,5 @@
 {
-  "version": "0.6.6",
+  "version": "0.6.7",
   "license": "MIT",
   "name": "material-react-table",
   "description": "A fully featured Material-UI implementation of react-table, inspired by material-table and the mui DataGrid, written from the ground up in TypeScript.",
@@ -59,7 +59,7 @@
     "@emotion/react": "^11.8.2",
     "@emotion/styled": "^11.8.1",
     "@etchteam/storybook-addon-status": "^4.2.0",
-    "@faker-js/faker": "^6.0.0-beta.0",
+    "@faker-js/faker": "^6.0.0",
     "@mui/icons-material": "^5.5.1",
     "@mui/material": "^5.5.1",
     "@size-limit/preset-small-lib": "^7.0.8",
@@ -75,10 +75,10 @@
     "@types/faker": "^6.6.8",
     "@types/react": "^17.0.40",
     "@types/react-dom": "^17.0.13",
-    "@types/react-table": "^7.7.9",
+    "@types/react-table": "^7.7.10",
     "babel-loader": "^8.2.3",
     "husky": "^7.0.4",
-    "prettier": "^2.5.1",
+    "prettier": "^2.6.0",
     "react": "^17.0.2",
     "react-dom": "^17.0.2",
     "react-is": "^17.0.2",

package/src/MaterialReactTable.tsx

@@ -134,9 +134,9 @@ export type MRT_ColumnInterface<D extends {} = {}> = ColumnInterface<D> &
     Header?: string;
     accessor?: string;
     columns?: MRT_ColumnInterface<D>[];
+    disableClickToCopy?: boolean;
     disableEditing?: boolean;
     disableFilters?: boolean;
-    disableCellCopyButton?: boolean;
     filter?: MRT_FilterType | string | FilterType<D>;
     filterSelectOptions?: (string | { text: string; value: string })[];
     filterTypes?: (MRT_FILTER_TYPE | string)[];
@@ -233,7 +233,7 @@ export type MaterialReactTableProps<D extends {} = {}> = UseTableOptions<D> &
     disableFullScreenToggle?: boolean;
     disableSelectAll?: boolean;
     disableSubRowTree?: boolean;
-    enableCellCopyButtons?: boolean;
+    enableClickToCopy?: boolean;
     enableColumnGrouping?: boolean;
     enableColumnResizing?: boolean;
     enableRowActions?: boolean;

package/src/body/MRT_TableBodyCell.tsx

@@ -1,5 +1,5 @@
 import React, { FC, MouseEvent } from 'react';
-import { Box, Skeleton, TableCell, TableCellProps } from '@mui/material';
+import { Skeleton, TableCell, TableCellProps } from '@mui/material';
 import { useMRT } from '../useMRT';
 import { MRT_EditCellTextField } from '../inputs/MRT_EditCellTextField';
 import type { MRT_Cell } from '..';
@@ -23,7 +23,7 @@ interface Props {
 
 export const MRT_TableBodyCell: FC<Props> = ({ cell }) => {
   const {
-    enableCellCopyButtons,
+    enableClickToCopy,
     isLoading,
     muiTableBodyCellProps,
     muiTableBodyCellSkeletonProps,
@@ -83,11 +83,8 @@ export const MRT_TableBodyCell: FC<Props> = ({ cell }) => {
         <span>
           {cell.render('Cell')} ({cell.row.subRows.length})
         </span>
-      ) : enableCellCopyButtons && !cell.column.disableCellCopyButton ? (
-        <Box sx={{ whiteSpace: 'nowrap' }}>
-          {cell.render('Cell')}
-          {<MRT_CopyButton cell={cell} />}
-        </Box>
+      ) : enableClickToCopy && !cell.column.disableClickToCopy ? (
+        <MRT_CopyButton cell={cell} />
       ) : (
         cell.render('Cell')
       )}

package/src/buttons/MRT_CopyButton.tsx

@@ -1,5 +1,5 @@
 import React, { FC, useState } from 'react';
-import { IconButton, Tooltip } from '@mui/material';
+import { Button, Tooltip } from '@mui/material';
 import { useMRT } from '../useMRT';
 import { MRT_Cell } from '..';
 
@@ -8,43 +8,43 @@ interface Props {
 }
 
 export const MRT_CopyButton: FC<Props> = ({ cell }) => {
-  const {
-    icons: { CheckBoxIcon, ContentCopyIcon },
-    localization,
-  } = useMRT();
+  const { localization } = useMRT();
 
   const [copied, setCopied] = useState(false);
 
   const handleCopy = (text: string) => {
     navigator.clipboard.writeText(text);
     setCopied(true);
-    setTimeout(() => setCopied(false), 2000);
+    setTimeout(() => setCopied(false), 4000);
   };
 
   return (
     <Tooltip
       arrow
+      enterDelay={1000}
+      enterNextDelay={1000}
+      placement="top"
       title={copied ? localization.copiedToClipboard : localization.clickToCopy}
     >
-      <IconButton
+      <Button
         aria-label={localization.clickToCopy}
         onClick={() => handleCopy(cell.value)}
         size="small"
         sx={{
-          opacity: 0.05,
-          m: '0 0.5rem',
-          transition: 'all 0.2s ease-in-out',
-          '&:hover': {
-            opacity: 1,
-          },
+          backgroundColor: 'transparent',
+          color: 'inherit',
+          letterSpacing: 'inherit',
+          fontFamily: 'inherit',
+          fontSize: 'inherit',
+          m: '-0.25rem',
+          textTransform: 'inherit',
+          textAlign: 'inherit',
+          minWidth: 'unset',
         }}
+        variant="text"
       >
-        {copied ? (
-          <CheckBoxIcon color="success" fontSize="small" />
-        ) : (
-          <ContentCopyIcon fontSize="small" />
-        )}
-      </IconButton>
+        {cell.render('Cell')}
+      </Button>
     </Tooltip>
   );
 };

package/src/head/MRT_TableHeadCell.tsx

@@ -1,4 +1,4 @@
-import React, { FC } from 'react';
+import React, { CSSProperties, FC } from 'react';
 import {
   TableCell,
   TableSortLabel,
@@ -16,6 +16,11 @@ import type { MRT_HeaderGroup } from '..';
 export const commonTableHeadCellStyles = (
   densePadding: boolean,
   enableColumnResizing?: boolean,
+  widths?: {
+    maxWidth?: CSSProperties['maxWidth'];
+    minWidth?: CSSProperties['minWidth'];
+    width?: CSSProperties['width'];
+  },
 ) => ({
   fontWeight: 'bold',
   height: '100%',
@@ -23,6 +28,7 @@ export const commonTableHeadCellStyles = (
   pt: densePadding ? '0.75rem' : '1.25rem',
   transition: `all ${enableColumnResizing ? '10ms' : '0.2s'} ease-in-out`,
   verticalAlign: 'text-top',
+  ...widths,
 });
 
 interface Props {
@@ -105,6 +111,11 @@ export const MRT_TableHeadCell: FC<Props> = ({ column }) => {
         ...commonTableHeadCellStyles(
           tableInstance.state.densePadding,
           enableColumnResizing,
+          {
+            maxWidth: column.maxWidth,
+            minWidth: column.minWidth,
+            width: column.width,
+          },
         ),
         ...tableCellProps?.sx,
       }}

package/src/head/MRT_TableHeadCellActions.tsx

@@ -16,7 +16,12 @@ export const MRT_TableHeadCellActions: FC<Props> = () => {
   return (
     <TableCell
       style={{ textAlign: 'center' }}
-      sx={{ ...commonTableHeadCellStyles(densePadding), textAlign: 'center' }}
+      sx={{
+        ...commonTableHeadCellStyles(densePadding),
+        textAlign: 'center',
+        maxWidth: '4rem',
+        width: '4rem',
+      }}
     >
       {localization.actions}
     </TableCell>