material-react-table 0.6.4 → 0.6.7

package/dist/menus/MRT_ColumnActionMenu.d.ts

@@ -8,7 +8,6 @@ export declare const commonMenuItemStyles: {
 };
 export declare const commonListItemStyles: {
     display: string;
-    gap: string;
     alignItems: string;
 };
 interface Props {

package/package.json

@@ -1,5 +1,5 @@
 {
-  "version": "0.6.4",
+  "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.",
@@ -55,13 +55,13 @@
     }
   ],
   "devDependencies": {
-    "@babel/core": "^7.17.5",
+    "@babel/core": "^7.17.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",
-    "@mui/icons-material": "^5.5.0",
-    "@mui/material": "^5.5.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",
     "@storybook/addon-a11y": "^6.4.19",
     "@storybook/addon-actions": "^6.4.19",
@@ -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,8 +134,9 @@ export type MRT_ColumnInterface<D extends {} = {}> = ColumnInterface<D> &
     Header?: string;
     accessor?: string;
     columns?: MRT_ColumnInterface<D>[];
+    disableClickToCopy?: boolean;
+    disableEditing?: boolean;
     disableFilters?: boolean;
-    editable?: boolean;
     filter?: MRT_FilterType | string | FilterType<D>;
     filterSelectOptions?: (string | { text: string; value: string })[];
     filterTypes?: (MRT_FILTER_TYPE | string)[];
@@ -232,6 +233,7 @@ export type MaterialReactTableProps<D extends {} = {}> = UseTableOptions<D> &
     disableFullScreenToggle?: boolean;
     disableSelectAll?: boolean;
     disableSubRowTree?: boolean;
+    enableClickToCopy?: boolean;
     enableColumnGrouping?: boolean;
     enableColumnResizing?: boolean;
     enableRowActions?: boolean;
@@ -314,7 +316,7 @@ export type MaterialReactTableProps<D extends {} = {}> = UseTableOptions<D> &
       event: MouseEvent<HTMLTableCellElement>,
       cell: MRT_Cell<D>,
     ) => void;
-    onColumnHide?: (column: Column<D>, visibleColumns: Column<D>[]) => void;
+    onColumnHide?: (column: Column<D>, hiddenColumns?: string[]) => void;
     onDetailPanelClick?: (
       event: MouseEvent<HTMLTableCellElement>,
       row: Row<D>,

package/src/body/MRT_TableBodyCell.tsx

@@ -3,6 +3,7 @@ import { Skeleton, TableCell, TableCellProps } from '@mui/material';
 import { useMRT } from '../useMRT';
 import { MRT_EditCellTextField } from '../inputs/MRT_EditCellTextField';
 import type { MRT_Cell } from '..';
+import { MRT_CopyButton } from '../buttons/MRT_CopyButton';
 
 export const commonTableBodyCellStyles = (densePadding: boolean) => ({
   p: densePadding ? '0.5rem' : '1rem',
@@ -22,6 +23,7 @@ interface Props {
 
 export const MRT_TableBodyCell: FC<Props> = ({ cell }) => {
   const {
+    enableClickToCopy,
     isLoading,
     muiTableBodyCellProps,
     muiTableBodyCellSkeletonProps,
@@ -72,7 +74,8 @@ export const MRT_TableBodyCell: FC<Props> = ({ cell }) => {
           width={Math.random() * (120 - 60) + 60}
           {...muiTableBodyCellSkeletonProps}
         />
-      ) : currentEditingRow?.id === cell.row.id ? (
+      ) : !cell.column.disableEditing &&
+        currentEditingRow?.id === cell.row.id ? (
         <MRT_EditCellTextField cell={cell} />
       ) : cell.isPlaceholder ? null : cell.isAggregated ? (
         cell.render('Aggregated')
@@ -80,6 +83,8 @@ export const MRT_TableBodyCell: FC<Props> = ({ cell }) => {
         <span>
           {cell.render('Cell')} ({cell.row.subRows.length})
         </span>
+      ) : enableClickToCopy && !cell.column.disableClickToCopy ? (
+        <MRT_CopyButton cell={cell} />
       ) : (
         cell.render('Cell')
       )}

package/src/body/MRT_TableBodyRow.tsx

@@ -1,5 +1,5 @@
 import React, { FC, MouseEvent } from 'react';
-import { alpha, TableCell, TableRow } from '@mui/material';
+import { TableCell, TableRow } from '@mui/material';
 import {
   commonTableBodyCellStyles,
   MRT_TableBodyCell,
@@ -52,15 +52,8 @@ export const MRT_TableBodyRow: FC<Props> = ({ row }) => {
         onClick={(event: MouseEvent<HTMLTableRowElement>) =>
           onRowClick?.(event, row)
         }
+        selected={row.isSelected}
         {...tableRowProps}
-        sx={(theme) =>
-          ({
-            backgroundColor: row.isSelected
-              ? alpha(theme.palette.primary.light, 0.1)
-              : 'transparent',
-            ...tableRowProps?.sx,
-          } as any)
-        }
       >
         {enableRowNumbers && (
           <TableCell sx={{ ...commonTableBodyCellStyles(densePadding) }}>

package/src/buttons/MRT_CopyButton.tsx

@@ -0,0 +1,50 @@
+import React, { FC, useState } from 'react';
+import { Button, Tooltip } from '@mui/material';
+import { useMRT } from '../useMRT';
+import { MRT_Cell } from '..';
+
+interface Props {
+  cell: MRT_Cell;
+}
+
+export const MRT_CopyButton: FC<Props> = ({ cell }) => {
+  const { localization } = useMRT();
+
+  const [copied, setCopied] = useState(false);
+
+  const handleCopy = (text: string) => {
+    navigator.clipboard.writeText(text);
+    setCopied(true);
+    setTimeout(() => setCopied(false), 4000);
+  };
+
+  return (
+    <Tooltip
+      arrow
+      enterDelay={1000}
+      enterNextDelay={1000}
+      placement="top"
+      title={copied ? localization.copiedToClipboard : localization.clickToCopy}
+    >
+      <Button
+        aria-label={localization.clickToCopy}
+        onClick={() => handleCopy(cell.value)}
+        size="small"
+        sx={{
+          backgroundColor: 'transparent',
+          color: 'inherit',
+          letterSpacing: 'inherit',
+          fontFamily: 'inherit',
+          fontSize: 'inherit',
+          m: '-0.25rem',
+          textTransform: 'inherit',
+          textAlign: 'inherit',
+          minWidth: 'unset',
+        }}
+        variant="text"
+      >
+        {cell.render('Cell')}
+      </Button>
+    </Tooltip>
+  );
+};

package/src/buttons/MRT_ExpandButton.tsx

@@ -1,4 +1,4 @@
-import React, { FC } from 'react';
+import React, { FC, MouseEvent } from 'react';
 import { IconButton, TableCell } from '@mui/material';
 import { useMRT } from '../useMRT';
 import type { MRT_Row } from '..';
@@ -12,12 +12,19 @@ export const MRT_ExpandButton: FC<Props> = ({ row }) => {
   const {
     icons: { ExpandMoreIcon },
     localization,
+    onRowExpandChange,
     renderDetailPanel,
     tableInstance: {
       state: { densePadding },
     },
   } = useMRT();
 
+  const handleToggleExpand = (event: MouseEvent<HTMLButtonElement>) => {
+    // @ts-ignore
+    row.getToggleRowExpandedProps()?.onClick(event);
+    onRowExpandChange?.(event, row);
+  };
+
   return (
     <TableCell
       size="small"
@@ -32,6 +39,7 @@ export const MRT_ExpandButton: FC<Props> = ({ row }) => {
         disabled={!row.canExpand && !renderDetailPanel}
         title={localization.expand}
         {...row.getToggleRowExpandedProps()}
+        onClick={handleToggleExpand}
       >
         <ExpandMoreIcon
           style={{

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>

package/src/icons.ts

@@ -1,7 +1,9 @@
 import ArrowRightIcon from '@mui/icons-material/ArrowRight';
 import CancelIcon from '@mui/icons-material/Cancel';
+import CheckBoxIcon from '@mui/icons-material/CheckBox';
 import ClearAllIcon from '@mui/icons-material/ClearAll';
 import CloseIcon from '@mui/icons-material/Close';
+import ContentCopyIcon from '@mui/icons-material/ContentCopy';
 import DensityMediumIcon from '@mui/icons-material/DensityMedium';
 import DensitySmallIcon from '@mui/icons-material/DensitySmall';
 import DoubleArrowDownIcon from '@mui/icons-material/KeyboardDoubleArrowDown';
@@ -27,8 +29,10 @@ import VisibilityOffIcon from '@mui/icons-material/VisibilityOff';
 export interface MRT_Icons {
   ArrowRightIcon: any;
   CancelIcon: any;
+  CheckBoxIcon: any;
   ClearAllIcon: any;
   CloseIcon: any;
+  ContentCopyIcon: any;
   DensityMediumIcon: any;
   DensitySmallIcon: any;
   DoubleArrowDownIcon: any;
@@ -55,8 +59,10 @@ export interface MRT_Icons {
 export const MRT_Default_Icons: MRT_Icons = {
   ArrowRightIcon,
   CancelIcon,
+  CheckBoxIcon,
   ClearAllIcon,
   CloseIcon,
+  ContentCopyIcon,
   DensityMediumIcon,
   DensitySmallIcon,
   DoubleArrowDownIcon,

package/src/inputs/MRT_EditCellTextField.tsx

@@ -47,7 +47,7 @@ export const MRT_EditCellTextField: FC<Props> = ({ cell }) => {
     },
   };
 
-  if (cell.column.editable && cell.column.Edit) {
+  if (!cell.column.disableEditing && cell.column.Edit) {
     return <>{cell.column.Edit({ ...textFieldProps, cell })}</>;
   }
 

package/src/localization.ts

@@ -5,7 +5,9 @@ export interface MRT_Localization {
   clearFilter: string;
   clearSearch: string;
   clearSort: string;
+  clickToCopy: string;
   columnActions: string;
+  copiedToClipboard: string;
   edit: string;
   expand: string;
   expandAll: string;
@@ -52,7 +54,9 @@ export const MRT_DefaultLocalization_EN: MRT_Localization = {
   clearFilter: 'Clear filter',
   clearSearch: 'Clear search',
   clearSort: 'Clear sort',
+  clickToCopy: 'Click to copy',
   columnActions: 'Column Actions',
+  copiedToClipboard: 'Copied to clipboard',
   edit: 'Edit',
   expand: 'Expand',
   expandAll: 'Expand all',

package/src/menus/MRT_ColumnActionMenu.tsx

@@ -1,5 +1,5 @@
 import React, { FC, useState } from 'react';
-import { Box, IconButton, Menu, MenuItem } from '@mui/material';
+import { Box, IconButton, ListItemIcon, Menu, MenuItem } from '@mui/material';
 import { useMRT } from '../useMRT';
 import type { MRT_HeaderGroup } from '..';
 import { MRT_FilterTypeMenu } from './MRT_FilterTypeMenu';
@@ -14,7 +14,6 @@ export const commonMenuItemStyles = {
 
 export const commonListItemStyles = {
   display: 'flex',
-  gap: '0.75rem',
   alignItems: 'center',
 };
 
@@ -137,7 +136,9 @@ export const MRT_ColumnActionMenu: FC<Props> = ({
             sx={commonMenuItemStyles}
           >
             <Box sx={commonListItemStyles}>
-              <ClearAllIcon />
+              <ListItemIcon>
+                <ClearAllIcon />
+              </ListItemIcon>
               {localization.clearSort}
             </Box>
           </MenuItem>,
@@ -148,7 +149,9 @@ export const MRT_ColumnActionMenu: FC<Props> = ({
             sx={commonMenuItemStyles}
           >
             <Box sx={commonListItemStyles}>
-              <SortIcon />
+              <ListItemIcon>
+                <SortIcon />
+              </ListItemIcon>
               {localization.sortByColumnAsc?.replace(
                 '{column}',
                 String(column.Header),
@@ -165,7 +168,9 @@ export const MRT_ColumnActionMenu: FC<Props> = ({
             sx={commonMenuItemStyles}
           >
             <Box sx={commonListItemStyles}>
-              <SortIcon style={{ transform: 'rotate(180deg) scaleX(-1)' }} />
+              <ListItemIcon>
+                <SortIcon style={{ transform: 'rotate(180deg) scaleX(-1)' }} />
+              </ListItemIcon>
               {localization.sortByColumnDesc?.replace(
                 '{column}',
                 String(column.Header),
@@ -182,7 +187,9 @@ export const MRT_ColumnActionMenu: FC<Props> = ({
             sx={commonMenuItemStyles}
           >
             <Box sx={commonListItemStyles}>
-              <FilterListOffIcon />
+              <ListItemIcon>
+                <FilterListOffIcon />
+              </ListItemIcon>
               {localization.clearFilter}
             </Box>
           </MenuItem>,
@@ -193,7 +200,9 @@ export const MRT_ColumnActionMenu: FC<Props> = ({
             sx={commonMenuItemStyles}
           >
             <Box sx={commonListItemStyles}>
-              <FilterListIcon />
+              <ListItemIcon>
+                <FilterListIcon />
+              </ListItemIcon>
               {localization.filterByColumn?.replace(
                 '{column}',
                 String(column.Header),
@@ -227,7 +236,9 @@ export const MRT_ColumnActionMenu: FC<Props> = ({
             sx={commonMenuItemStyles}
           >
             <Box sx={commonListItemStyles}>
-              <DynamicFeedIcon />
+              <ListItemIcon>
+                <DynamicFeedIcon />
+              </ListItemIcon>
               {localization[
                 column.isGrouped ? 'ungroupByColumn' : 'groupByColumn'
               ]?.replace('{column}', String(column.Header))}
@@ -237,7 +248,9 @@ export const MRT_ColumnActionMenu: FC<Props> = ({
       {!disableColumnHiding && [
         <MenuItem key={0} onClick={handleHideColumn} sx={commonMenuItemStyles}>
           <Box sx={commonListItemStyles}>
-            <VisibilityOffIcon />
+            <ListItemIcon>
+              <VisibilityOffIcon />
+            </ListItemIcon>
             {localization.hideColumn?.replace(
               '{column}',
               String(column.Header),
@@ -251,8 +264,9 @@ export const MRT_ColumnActionMenu: FC<Props> = ({
           sx={commonMenuItemStyles}
         >
           <Box sx={commonListItemStyles}>
-            <ViewColumnIcon />
-
+            <ListItemIcon>
+              <ViewColumnIcon />
+            </ListItemIcon>
             {localization.showAllColumns?.replace(
               '{column}',
               String(column.Header),

package/src/menus/MRT_FilterTypeMenu.tsx

@@ -43,68 +43,72 @@ export const MRT_FilterTypeMenu: FC<Props> = ({
     divider: boolean;
     fn: Function;
   }[] = useMemo(
-    () => [
-      {
-        type: MRT_FILTER_TYPE.FUZZY,
-        label: localization.filterFuzzy,
-        divider: false,
-        fn: fuzzy,
-      },
-      {
-        type: MRT_FILTER_TYPE.CONTAINS,
-        label: localization.filterContains,
-        divider: true,
-        fn: contains,
-      },
-      {
-        type: MRT_FILTER_TYPE.STARTS_WITH,
-        label: localization.filterStartsWith,
-        divider: false,
-        fn: startsWith,
-      },
-      {
-        type: MRT_FILTER_TYPE.ENDS_WITH,
-        label: localization.filterEndsWith,
-        divider: true,
-        fn: endsWith,
-      },
-      {
-        type: MRT_FILTER_TYPE.EQUALS,
-        label: localization.filterEquals,
-        divider: false,
-        fn: equals,
-      },
-      {
-        type: MRT_FILTER_TYPE.NOT_EQUALS,
-        label: localization.filterNotEquals,
-        divider: true,
-        fn: notEquals,
-      },
-      {
-        type: MRT_FILTER_TYPE.GREATER_THAN,
-        label: localization.filterGreaterThan,
-        divider: false,
-        fn: greaterThan,
-      },
-      {
-        type: MRT_FILTER_TYPE.LESS_THAN,
-        label: localization.filterLessThan,
-        divider: true,
-        fn: lessThan,
-      },
-      {
-        type: MRT_FILTER_TYPE.EMPTY,
-        label: localization.filterEmpty,
-        divider: false,
-        fn: empty,
-      },
-      {
-        type: MRT_FILTER_TYPE.NOT_EMPTY,
-        label: localization.filterNotEmpty,
-        divider: false,
-        fn: notEmpty,
-      },
-    ],
+    () =>
+      [
+        {
+          type: MRT_FILTER_TYPE.FUZZY,
+          label: localization.filterFuzzy,
+          divider: false,
+          fn: fuzzy,
+        },
+        {
+          type: MRT_FILTER_TYPE.CONTAINS,
+          label: localization.filterContains,
+          divider: true,
+          fn: contains,
+        },
+        {
+          type: MRT_FILTER_TYPE.STARTS_WITH,
+          label: localization.filterStartsWith,
+          divider: false,
+          fn: startsWith,
+        },
+        {
+          type: MRT_FILTER_TYPE.ENDS_WITH,
+          label: localization.filterEndsWith,
+          divider: true,
+          fn: endsWith,
+        },
+        {
+          type: MRT_FILTER_TYPE.EQUALS,
+          label: localization.filterEquals,
+          divider: false,
+          fn: equals,
+        },
+        {
+          type: MRT_FILTER_TYPE.NOT_EQUALS,
+          label: localization.filterNotEquals,
+          divider: true,
+          fn: notEquals,
+        },
+        {
+          type: MRT_FILTER_TYPE.GREATER_THAN,
+          label: localization.filterGreaterThan,
+          divider: false,
+          fn: greaterThan,
+        },
+        {
+          type: MRT_FILTER_TYPE.LESS_THAN,
+          label: localization.filterLessThan,
+          divider: true,
+          fn: lessThan,
+        },
+        {
+          type: MRT_FILTER_TYPE.EMPTY,
+          label: localization.filterEmpty,
+          divider: false,
+          fn: empty,
+        },
+        {
+          type: MRT_FILTER_TYPE.NOT_EMPTY,
+          label: localization.filterNotEmpty,
+          divider: false,
+          fn: notEmpty,
+        },
+      ].filter(
+        (filterType) =>
+          !column.filterTypes || column.filterTypes.includes(filterType.type),
+      ),
     [],
   );
 

package/src/menus/MRT_RowActionMenu.tsx

@@ -1,8 +1,11 @@
 import React, { FC } from 'react';
-import { Menu, MenuItem } from '@mui/material';
+import { Box, ListItemIcon, Menu, MenuItem } from '@mui/material';
 import { useMRT } from '../useMRT';
 import type { MRT_Row } from '..';
-import { commonMenuItemStyles } from './MRT_ColumnActionMenu';
+import {
+  commonListItemStyles,
+  commonMenuItemStyles,
+} from './MRT_ColumnActionMenu';
 
 interface Props {
   anchorEl: HTMLElement | null;
@@ -36,8 +39,12 @@ export const MRT_RowActionMenu: FC<Props> = ({
     >
       {enableRowEditing && (
         <MenuItem onClick={handleEdit} sx={commonMenuItemStyles}>
-          <EditIcon />
-          {localization.edit}
+          <Box sx={commonListItemStyles}>
+            <ListItemIcon>
+              <EditIcon />
+            </ListItemIcon>
+            {localization.edit}
+          </Box>
         </MenuItem>
       )}
       {renderRowActionMenuItems?.(row, tableInstance, () =>

package/src/menus/MRT_ShowHideColumnsMenuItems.tsx

@@ -3,6 +3,7 @@ import { FormControlLabel, MenuItem, Switch } from '@mui/material';
 import { ColumnInstance } from 'react-table';
 import type { MRT_ColumnInstance } from '..';
 import { commonMenuItemStyles } from './MRT_ColumnActionMenu';
+import { useMRT } from '../useMRT';
 
 interface Props {
   column: MRT_ColumnInstance;
@@ -13,6 +14,7 @@ export const MRT_ShowHideColumnsMenuItems: FC<Props> = ({
   column,
   isSubMenu,
 }) => {
+  const { onColumnHide, tableInstance } = useMRT();
   const isParentHeader = !!column?.columns?.length;
 
   const allChildColumnsVisible =
@@ -29,6 +31,7 @@ export const MRT_ShowHideColumnsMenuItems: FC<Props> = ({
     } else {
       column.toggleHidden();
     }
+    onColumnHide?.(column, tableInstance.state.hiddenColumns);
   };
 
   return (