material-react-table 0.6.3 → 0.6.6

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.3",
+  "version": "0.6.6",
   "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",
+    "@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",

package/src/MaterialReactTable.tsx

@@ -134,8 +134,9 @@ export type MRT_ColumnInterface<D extends {} = {}> = ColumnInterface<D> &
     Header?: string;
     accessor?: string;
     columns?: MRT_ColumnInterface<D>[];
+    disableEditing?: boolean;
     disableFilters?: boolean;
-    editable?: boolean;
+    disableCellCopyButton?: 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;
+    enableCellCopyButtons?: 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>,
@@ -367,7 +369,7 @@ export type MaterialReactTableProps<D extends {} = {}> = UseTableOptions<D> &
     ) => ReactNode;
   };
 
-export default <D extends {}>({
+export default <D extends {} = {}>({
   defaultColumn = { minWidth: 50, maxWidth: 1000 },
   filterTypes,
   globalFilter = 'fuzzy',

package/src/body/MRT_TableBodyCell.tsx

@@ -1,8 +1,9 @@
 import React, { FC, MouseEvent } from 'react';
-import { Skeleton, TableCell, TableCellProps } from '@mui/material';
+import { Box, 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 {
+    enableCellCopyButtons,
     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,11 @@ 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>
       ) : (
         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 { IconButton, 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 {
+    icons: { CheckBoxIcon, ContentCopyIcon },
+    localization,
+  } = useMRT();
+
+  const [copied, setCopied] = useState(false);
+
+  const handleCopy = (text: string) => {
+    navigator.clipboard.writeText(text);
+    setCopied(true);
+    setTimeout(() => setCopied(false), 2000);
+  };
+
+  return (
+    <Tooltip
+      arrow
+      title={copied ? localization.copiedToClipboard : localization.clickToCopy}
+    >
+      <IconButton
+        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,
+          },
+        }}
+      >
+        {copied ? (
+          <CheckBoxIcon color="success" fontSize="small" />
+        ) : (
+          <ContentCopyIcon fontSize="small" />
+        )}
+      </IconButton>
+    </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/filtersFNs.ts

@@ -1,7 +1,7 @@
 import { matchSorter } from 'match-sorter';
 import { MRT_Row } from '.';
 
-export const fuzzyFilterFN = (
+export const fuzzy = (
   rows: MRT_Row[],
   columnIds: string[] | string,
   filterValue: string | number,
@@ -13,9 +13,9 @@ export const fuzzyFilterFN = (
     sorter: (rankedItems) => rankedItems,
   });
 
-fuzzyFilterFN.autoRemove = (val: any) => !val;
+fuzzy.autoRemove = (val: any) => !val;
 
-export const containsFilterFN = (
+export const contains = (
   rows: MRT_Row[],
   id: string,
   filterValue: string | number,
@@ -28,9 +28,9 @@ export const containsFilterFN = (
       .includes(filterValue.toString().toLowerCase().trim()),
   );
 
-containsFilterFN.autoRemove = (val: any) => !val;
+contains.autoRemove = (val: any) => !val;
 
-export const startsWithFilterFN = (
+export const startsWith = (
   rows: MRT_Row[],
   id: string,
   filterValue: string | number,
@@ -43,9 +43,9 @@ export const startsWithFilterFN = (
       .startsWith(filterValue.toString().toLowerCase().trim()),
   );
 
-startsWithFilterFN.autoRemove = (val: any) => !val;
+startsWith.autoRemove = (val: any) => !val;
 
-export const endsWithFilterFN = (
+export const endsWith = (
   rows: MRT_Row[],
   id: string,
   filterValue: string | number,
@@ -58,9 +58,9 @@ export const endsWithFilterFN = (
       .endsWith(filterValue.toString().toLowerCase().trim()),
   );
 
-endsWithFilterFN.autoRemove = (val: any) => !val;
+endsWith.autoRemove = (val: any) => !val;
 
-export const equalsFilterFN = (
+export const equals = (
   rows: MRT_Row[],
   id: string,
   filterValue: string | number,
@@ -71,9 +71,9 @@ export const equalsFilterFN = (
       filterValue.toString().toLowerCase().trim(),
   );
 
-equalsFilterFN.autoRemove = (val: any) => !val;
+equals.autoRemove = (val: any) => !val;
 
-export const notEqualsFilterFN = (
+export const notEquals = (
   rows: MRT_Row[],
   id: string,
   filterValue: string | number,
@@ -84,9 +84,9 @@ export const notEqualsFilterFN = (
       filterValue.toString().toLowerCase().trim(),
   );
 
-notEqualsFilterFN.autoRemove = (val: any) => !val;
+notEquals.autoRemove = (val: any) => !val;
 
-export const greaterThanFilterFN = (
+export const greaterThan = (
   rows: MRT_Row[],
   id: string,
   filterValue: string | number,
@@ -98,9 +98,9 @@ export const greaterThanFilterFN = (
         filterValue.toString().toLowerCase().trim(),
   );
 
-greaterThanFilterFN.autoRemove = (val: any) => !val;
+greaterThan.autoRemove = (val: any) => !val;
 
-export const lessThanFilterFN = (
+export const lessThan = (
   rows: MRT_Row[],
   id: string,
   filterValue: string | number,
@@ -112,33 +112,33 @@ export const lessThanFilterFN = (
         filterValue.toString().toLowerCase().trim(),
   );
 
-lessThanFilterFN.autoRemove = (val: any) => !val;
+lessThan.autoRemove = (val: any) => !val;
 
-export const emptyFilterFN = (
+export const empty = (
   rows: MRT_Row[],
   id: string,
   _filterValue: string | number,
 ) => rows.filter((row) => !row.values[id].toString().toLowerCase().trim());
 
-emptyFilterFN.autoRemove = (val: any) => !val;
+empty.autoRemove = (val: any) => !val;
 
-export const notEmptyFilterFN = (
+export const notEmpty = (
   rows: MRT_Row[],
   id: string,
   _filterValue: string | number,
 ) => rows.filter((row) => !!row.values[id].toString().toLowerCase().trim());
 
-notEmptyFilterFN.autoRemove = (val: any) => !val;
+notEmpty.autoRemove = (val: any) => !val;
 
 export const defaultFilterFNs = {
-  contains: containsFilterFN,
-  empty: emptyFilterFN,
-  endsWith: endsWithFilterFN,
-  equals: equalsFilterFN,
-  fuzzy: fuzzyFilterFN,
-  greaterThan: greaterThanFilterFN,
-  lessThan: lessThanFilterFN,
-  notEmpty: notEmptyFilterFN,
-  notEquals: notEqualsFilterFN,
-  startsWith: startsWithFilterFN,
+  contains,
+  empty,
+  endsWith,
+  equals,
+  fuzzy,
+  greaterThan,
+  lessThan,
+  notEmpty,
+  notEquals,
+  startsWith,
 };

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/inputs/MRT_FilterTextField.tsx

@@ -77,6 +77,7 @@ export const MRT_FilterTextField: FC<Props> = ({ column }) => {
     return <>{column.Filter?.({ column })}</>;
   }
 
+  const filterId = `mrt-${idPrefix}-${column.id}-filter-text-field`;
   const filterType = tableInstance.state.currentFilterTypes[column.id];
   const isSelectFilter = !!column.filterSelectOptions;
   const filterChipLabel =
@@ -98,7 +99,7 @@ export const MRT_FilterTextField: FC<Props> = ({ column }) => {
     <>
       <TextField
         fullWidth
-        id={`mrt-${idPrefix}-${column.id}-filter-text-field`}
+        id={filterId}
         inputProps={{
           disabled: !!filterChipLabel,
           sx: {
@@ -108,17 +109,28 @@ export const MRT_FilterTextField: FC<Props> = ({ column }) => {
           title: filterPlaceholder,
         }}
         helperText={
-          filterType instanceof Function
-            ? ''
-            : localization.filterMode.replace(
-                '{filterType}',
-                // @ts-ignore
-                localization[
-                  `filter${
-                    filterType.charAt(0).toUpperCase() + filterType.slice(1)
-                  }`
-                ],
-              )
+          <label htmlFor={filterId}>
+            {filterType instanceof Function
+              ? localization.filterMode.replace(
+                  '{filterType}',
+                  // @ts-ignore
+                  localization[
+                    `filter${
+                      filterType.name.charAt(0).toUpperCase() +
+                      filterType.name.slice(1)
+                    }`
+                  ] ?? '',
+                ) ?? ''
+              : localization.filterMode.replace(
+                  '{filterType}',
+                  // @ts-ignore
+                  localization[
+                    `filter${
+                      filterType.charAt(0).toUpperCase() + filterType.slice(1)
+                    }`
+                  ],
+                )}
+          </label>
         }
         FormHelperTextProps={{
           sx: { fontSize: '0.6rem', lineHeight: '0.8rem' },

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),