material-react-table 1.5.11 → 1.6.0

package/src/body/MRT_TableBodyCellValue.tsx

@@ -1,5 +1,10 @@
-import React, { FC } from 'react';
-import { MRT_Cell, MRT_TableInstance } from '..';
+import React, { FC, ReactNode } from 'react';
+import Box from '@mui/material/Box';
+import { darken, lighten } from '@mui/material/styles';
+import highlightWords from 'highlight-words';
+import type { MRT_Cell, MRT_TableInstance } from '..';
+
+const allowedTypes = ['string', 'number'];
 
 interface Props {
   cell: MRT_Cell;
@@ -7,28 +12,93 @@ interface Props {
 }
 
 export const MRT_TableBodyCellValue: FC<Props> = ({ cell, table }) => {
+  const {
+    getState,
+    options: { enableFilterMatchHighlighting },
+  } = table;
   const { column, row } = cell;
   const { columnDef } = column;
+  const { globalFilter } = getState();
+  const filterValue = column.getFilterValue();
+
+  let renderedCellValue =
+    cell.getIsAggregated() && columnDef.AggregatedCell
+      ? columnDef.AggregatedCell({
+          cell,
+          column,
+          row,
+          table,
+        })
+      : row.getIsGrouped() && !cell.getIsGrouped()
+      ? null
+      : cell.getIsGrouped() && columnDef.GroupedCell
+      ? columnDef.GroupedCell({
+          cell,
+          column,
+          row,
+          table,
+        })
+      : undefined;
+
+  const isGroupedValue = renderedCellValue !== undefined;
+
+  if (!isGroupedValue) {
+    renderedCellValue = cell.renderValue() as number | string | ReactNode;
+  }
+
+  if (
+    enableFilterMatchHighlighting &&
+    renderedCellValue &&
+    allowedTypes.includes(typeof renderedCellValue) &&
+    ((filterValue &&
+      allowedTypes.includes(typeof filterValue) &&
+      columnDef.filterVariant === 'text') ||
+      (globalFilter && allowedTypes.includes(typeof globalFilter)))
+  ) {
+    const chunks = highlightWords?.({
+      text: renderedCellValue?.toString() as string,
+      query: (column.getFilterValue() ?? globalFilter ?? '').toString(),
+    });
+    if (chunks?.length > 1 || chunks?.[0]?.match) {
+      renderedCellValue = (
+        <span aria-label={renderedCellValue as string} role="note">
+          {chunks?.map(({ key, match, text }) => (
+            <Box
+              aria-hidden="true"
+              component="span"
+              key={key}
+              sx={
+                match
+                  ? {
+                      backgroundColor: (theme) =>
+                        theme.palette.mode === 'dark'
+                          ? darken(theme.palette.warning.dark, 0.25)
+                          : lighten(theme.palette.warning.light, 0.5),
+                      borderRadius: '2px',
+                      color: (theme) =>
+                        theme.palette.mode === 'dark' ? 'white' : 'black',
+                      padding: '2px 1px',
+                    }
+                  : undefined
+              }
+            >
+              {text}
+            </Box>
+          )) ?? renderedCellValue}
+        </span>
+      );
+    }
+  }
+
+  if (columnDef.Cell && !isGroupedValue) {
+    renderedCellValue = columnDef.Cell({
+      cell,
+      renderedCellValue,
+      column,
+      row,
+      table,
+    });
+  }
 
-  return (
-    <>
-      {cell.getIsAggregated() && columnDef.AggregatedCell
-        ? columnDef.AggregatedCell({
-            cell,
-            column,
-            row,
-            table,
-          })
-        : row.getIsGrouped() && !cell.getIsGrouped()
-        ? null
-        : cell.getIsGrouped() && columnDef.GroupedCell
-        ? columnDef.GroupedCell({
-            cell,
-            column,
-            row,
-            table,
-          })
-        : columnDef?.Cell?.({ cell, column, row, table }) ?? cell.renderValue()}
-    </>
-  );
+  return <>{renderedCellValue}</>;
 };

package/src/buttons/MRT_ToggleGlobalFilterButton.tsx

@@ -35,6 +35,7 @@ export const MRT_ToggleGlobalFilterButton = <
   return (
     <Tooltip arrow title={rest?.title ?? localization.showHideSearch}>
       <IconButton
+        aria-label={rest?.title ?? localization.showHideSearch}
         disabled={!!globalFilter}
         onClick={handleToggleSearch}
         {...rest}

package/src/column.utils.ts

@@ -300,12 +300,13 @@ export const getCommonCellStyles = ({
 });
 
 export const MRT_DefaultColumn = {
+  filterVariant: 'text',
   minSize: 40,
   maxSize: 1000,
   size: 180,
-};
+} as const;
 
-export const MRT_DefaultDisplayColumn: Partial<MRT_ColumnDef> = {
+export const MRT_DefaultDisplayColumn = {
   columnDefType: 'display',
   enableClickToCopy: false,
   enableColumnActions: false,
@@ -318,4 +319,4 @@ export const MRT_DefaultDisplayColumn: Partial<MRT_ColumnDef> = {
   enableHiding: false,
   enableResizing: false,
   enableSorting: false,
-};
+} as const;

package/src/index.tsx

@@ -6,6 +6,7 @@ import type { MRT_Icons } from './icons';
 export type { MRT_Icons };
 
 import { MRT_CopyButton } from './buttons/MRT_CopyButton';
+import { MRT_EditActionButtons } from './buttons/MRT_EditActionButtons';
 import { MRT_FilterOptionMenu } from './menus/MRT_FilterOptionMenu';
 import { MRT_FullScreenToggleButton } from './buttons/MRT_FullScreenToggleButton';
 import { MRT_GlobalFilterTextField } from './inputs/MRT_GlobalFilterTextField';
@@ -23,6 +24,7 @@ import { MRT_BottomToolbar } from './toolbar/MRT_BottomToolbar';
 
 export {
   MRT_CopyButton,
+  MRT_EditActionButtons,
   MRT_FilterOptionMenu,
   MRT_FullScreenToggleButton,
   MRT_GlobalFilterTextField,

package/src/toolbar/MRT_ToolbarDropZone.tsx

@@ -46,17 +46,19 @@ export const MRT_ToolbarDropZone = <TData extends Record<string, any> = {}>({
             theme.palette.info.main,
             hoveredColumn?.id === 'drop-zone' ? 0.2 : 0.1,
           ),
+          backdropFilter: 'blur(4px)',
+          boxSizing: 'border-box',
           border: `dashed ${theme.palette.info.main} 2px`,
           display: 'flex',
           justifyContent: 'center',
-          height: 'calc(100% - 4px)',
+          height: '100%',
           position: 'absolute',
-          width: 'calc(100% - 4px)',
-          zIndex: 2,
+          width: '100%',
+          zIndex: 4,
         })}
         onDragEnter={handleDragEnter}
       >
-        <Typography>
+        <Typography fontStyle="italic">
           {localization.dropToGroupBy.replace(
             '{column}',
             draggingColumn?.columnDef?.header ?? '',

package/src/toolbar/MRT_TopToolbar.tsx

@@ -5,11 +5,11 @@ import useMediaQuery from '@mui/material/useMediaQuery';
 import { lighten } from '@mui/material/styles';
 import { MRT_GlobalFilterTextField } from '../inputs/MRT_GlobalFilterTextField';
 import { MRT_LinearProgressBar } from './MRT_LinearProgressBar';
-import type { MRT_TableInstance } from '..';
 import { MRT_TablePagination } from './MRT_TablePagination';
 import { MRT_ToolbarAlertBanner } from './MRT_ToolbarAlertBanner';
 import { MRT_ToolbarInternalButtons } from './MRT_ToolbarInternalButtons';
 import { MRT_ToolbarDropZone } from './MRT_ToolbarDropZone';
+import type { MRT_TableInstance } from '..';
 import type { Theme } from '@mui/material/styles';
 
 export const commonToolbarStyles = ({ theme }: { theme: Theme }) => ({
@@ -102,6 +102,7 @@ export const MRT_TopToolbar = <TData extends Record<string, any> = {}>({
           right: 0,
           top: 0,
           width: '100%',
+          zIndex: 2,
         }}
       >
         {enableGlobalFilter && positionGlobalFilter === 'left' && (