material-react-table 1.5.12 → 1.6.1

package/dist/cjs/types/table/MRT_TableRoot.d.ts

@@ -24,6 +24,7 @@ export declare const MRT_TableRoot: <TData extends Record<string, any> = {}>(pro
     enableDensityToggle?: boolean | undefined;
     enableEditing?: boolean | undefined;
     enableExpandAll?: boolean | undefined;
+    enableFilterMatchHighlighting?: boolean | undefined;
     enableFullScreenToggle?: boolean | undefined;
     enableGlobalFilterModes?: boolean | undefined;
     enableGlobalFilterRankedResults?: boolean | undefined;
@@ -50,139 +51,139 @@ export declare const MRT_TableRoot: <TData extends Record<string, any> = {}>(pro
     layoutMode?: "grid" | "semantic" | undefined;
     localization?: Partial<MRT_Localization> | undefined;
     memoMode?: "rows" | "cells" | "table-body" | undefined;
-    muiBottomToolbarProps?: import("@mui/material").ToolbarProps<"div", {}> | (({ table }: {
+    muiBottomToolbarProps?: import("@mui/material").ToolbarProps<"div", {}> | ((props: {
         table: MRT_TableInstance<TData>;
     }) => import("@mui/material").ToolbarProps<"div", {}>) | undefined;
-    muiExpandAllButtonProps?: import("@mui/material").IconButtonProps<"button", {}> | (({ table }: {
+    muiExpandAllButtonProps?: import("@mui/material").IconButtonProps<"button", {}> | ((props: {
         table: MRT_TableInstance<TData>;
     }) => import("@mui/material").IconButtonProps<"button", {}>) | undefined;
-    muiExpandButtonProps?: import("@mui/material").IconButtonProps<"button", {}> | (({ row, table, }: {
+    muiExpandButtonProps?: import("@mui/material").IconButtonProps<"button", {}> | ((props: {
         table: MRT_TableInstance<TData>;
         row: MRT_Row<TData>;
     }) => import("@mui/material").IconButtonProps<"button", {}>) | undefined;
-    muiLinearProgressProps?: import("@mui/material").LinearProgressProps | (({ isTopToolbar, table, }: {
+    muiLinearProgressProps?: import("@mui/material").LinearProgressProps | ((props: {
         isTopToolbar: boolean;
         table: MRT_TableInstance<TData>;
     }) => import("@mui/material").LinearProgressProps) | undefined;
-    muiSearchTextFieldProps?: import("@mui/material").TextFieldProps | (({ table }: {
+    muiSearchTextFieldProps?: import("@mui/material").TextFieldProps | ((props: {
         table: MRT_TableInstance<TData>;
     }) => import("@mui/material").TextFieldProps) | undefined;
-    muiSelectAllCheckboxProps?: import("@mui/material").CheckboxProps | (({ table }: {
+    muiSelectAllCheckboxProps?: import("@mui/material").CheckboxProps | ((props: {
         table: MRT_TableInstance<TData>;
     }) => import("@mui/material").CheckboxProps) | undefined;
-    muiSelectCheckboxProps?: import("@mui/material").CheckboxProps | import("@mui/material").RadioProps | (({ table, row, }: {
+    muiSelectCheckboxProps?: import("@mui/material").CheckboxProps | import("@mui/material").RadioProps | ((props: {
         table: MRT_TableInstance<TData>;
         row: MRT_Row<TData>;
     }) => import("@mui/material").CheckboxProps | import("@mui/material").RadioProps) | undefined;
-    muiTableBodyCellCopyButtonProps?: import("@mui/material").ButtonProps<"button", {}> | (({ cell, column, row, table, }: {
+    muiTableBodyCellCopyButtonProps?: import("@mui/material").ButtonProps<"button", {}> | ((props: {
         cell: MRT_Cell<TData>;
         column: MRT_Column<TData>;
         row: MRT_Row<TData>;
         table: MRT_TableInstance<TData>;
     }) => import("@mui/material").ButtonProps<"button", {}>) | undefined;
-    muiTableBodyCellEditTextFieldProps?: import("@mui/material").TextFieldProps | (({ cell, column, row, table, }: {
+    muiTableBodyCellEditTextFieldProps?: import("@mui/material").TextFieldProps | ((props: {
         cell: MRT_Cell<TData>;
         column: MRT_Column<TData>;
         row: MRT_Row<TData>;
         table: MRT_TableInstance<TData>;
     }) => import("@mui/material").TextFieldProps) | undefined;
-    muiTableBodyCellProps?: import("@mui/material").TableCellProps | (({ cell, column, row, table, }: {
+    muiTableBodyCellProps?: import("@mui/material").TableCellProps | ((props: {
         cell: MRT_Cell<TData>;
         column: MRT_Column<TData>;
         row: MRT_Row<TData>;
         table: MRT_TableInstance<TData>;
     }) => import("@mui/material").TableCellProps) | undefined;
-    muiTableBodyCellSkeletonProps?: import("@mui/material").SkeletonProps<"span", {}> | (({ cell, column, row, table, }: {
+    muiTableBodyCellSkeletonProps?: import("@mui/material").SkeletonProps<"span", {}> | ((props: {
         cell: MRT_Cell<TData>;
         column: MRT_Column<TData>;
         row: MRT_Row<TData>;
         table: MRT_TableInstance<TData>;
     }) => import("@mui/material").SkeletonProps<"span", {}>) | undefined;
-    muiTableBodyProps?: import("@mui/material").TableBodyProps<"tbody", {}> | (({ table }: {
+    muiTableBodyProps?: import("@mui/material").TableBodyProps<"tbody", {}> | ((props: {
         table: MRT_TableInstance<TData>;
     }) => import("@mui/material").TableBodyProps<"tbody", {}>) | undefined;
-    muiTableBodyRowDragHandleProps?: import("@mui/material").IconButtonProps<"button", {}> | (({ table, row, }: {
+    muiTableBodyRowDragHandleProps?: import("@mui/material").IconButtonProps<"button", {}> | ((props: {
         table: MRT_TableInstance<TData>;
         row: MRT_Row<TData>;
     }) => import("@mui/material").IconButtonProps<"button", {}>) | undefined;
-    muiTableBodyRowProps?: import("@mui/material").TableRowProps<"tr", {}> | (({ isDetailPanel, row, table, }: {
+    muiTableBodyRowProps?: import("@mui/material").TableRowProps<"tr", {}> | ((props: {
         isDetailPanel?: boolean | undefined;
         row: MRT_Row<TData>;
         table: MRT_TableInstance<TData>;
     }) => import("@mui/material").TableRowProps<"tr", {}>) | undefined;
-    muiTableContainerProps?: import("@mui/material").TableContainerProps<"div", {}> | (({ table, }: {
+    muiTableContainerProps?: import("@mui/material").TableContainerProps<"div", {}> | ((props: {
         table: MRT_TableInstance<TData>;
     }) => import("@mui/material").TableContainerProps<"div", {}>) | undefined;
-    muiTableDetailPanelProps?: import("@mui/material").TableCellProps | (({ table, row, }: {
+    muiTableDetailPanelProps?: import("@mui/material").TableCellProps | ((props: {
         table: MRT_TableInstance<TData>;
         row: MRT_Row<TData>;
     }) => import("@mui/material").TableCellProps) | undefined;
-    muiTableFooterCellProps?: import("@mui/material").TableCellProps | (({ table, column, }: {
+    muiTableFooterCellProps?: import("@mui/material").TableCellProps | ((props: {
         table: MRT_TableInstance<TData>;
         column: MRT_Column<TData>;
     }) => import("@mui/material").TableCellProps) | undefined;
-    muiTableFooterProps?: import("@mui/material").TableFooterProps<"tfoot", {}> | (({ table }: {
+    muiTableFooterProps?: import("@mui/material").TableFooterProps<"tfoot", {}> | ((props: {
         table: MRT_TableInstance<TData>;
     }) => import("@mui/material").TableFooterProps<"tfoot", {}>) | undefined;
-    muiTableFooterRowProps?: import("@mui/material").TableRowProps<"tr", {}> | (({ table, footerGroup, }: {
+    muiTableFooterRowProps?: import("@mui/material").TableRowProps<"tr", {}> | ((props: {
         table: MRT_TableInstance<TData>;
         footerGroup: import("..").MRT_HeaderGroup<TData>;
     }) => import("@mui/material").TableRowProps<"tr", {}>) | undefined;
-    muiTableHeadCellColumnActionsButtonProps?: import("@mui/material").IconButtonProps<"button", {}> | (({ table, column, }: {
+    muiTableHeadCellColumnActionsButtonProps?: import("@mui/material").IconButtonProps<"button", {}> | ((props: {
         table: MRT_TableInstance<TData>;
         column: MRT_Column<TData>;
     }) => import("@mui/material").IconButtonProps<"button", {}>) | undefined;
-    muiTableHeadCellDragHandleProps?: import("@mui/material").IconButtonProps<"button", {}> | (({ table, column, }: {
+    muiTableHeadCellDragHandleProps?: import("@mui/material").IconButtonProps<"button", {}> | ((props: {
         table: MRT_TableInstance<TData>;
         column: MRT_Column<TData>;
     }) => import("@mui/material").IconButtonProps<"button", {}>) | undefined;
-    muiTableHeadCellFilterCheckboxProps?: import("@mui/material").CheckboxProps | (({ column, table, }: {
+    muiTableHeadCellFilterCheckboxProps?: import("@mui/material").CheckboxProps | ((props: {
         column: MRT_Column<TData>;
         table: MRT_TableInstance<TData>;
     }) => import("@mui/material").CheckboxProps) | undefined;
-    muiTableHeadCellFilterTextFieldProps?: import("@mui/material").TextFieldProps | (({ table, column, rangeFilterIndex, }: {
+    muiTableHeadCellFilterTextFieldProps?: import("@mui/material").TextFieldProps | ((props: {
         table: MRT_TableInstance<TData>;
         column: MRT_Column<TData>;
         rangeFilterIndex?: number | undefined;
     }) => import("@mui/material").TextFieldProps) | undefined;
-    muiTableHeadCellProps?: import("@mui/material").TableCellProps | (({ table, column, }: {
+    muiTableHeadCellProps?: import("@mui/material").TableCellProps | ((props: {
         table: MRT_TableInstance<TData>;
         column: MRT_Column<TData>;
     }) => import("@mui/material").TableCellProps) | undefined;
-    muiTableHeadProps?: import("@mui/material").TableHeadProps<"thead", {}> | (({ table }: {
+    muiTableHeadProps?: import("@mui/material").TableHeadProps<"thead", {}> | ((props: {
         table: MRT_TableInstance<TData>;
     }) => import("@mui/material").TableHeadProps<"thead", {}>) | undefined;
-    muiTableHeadRowProps?: import("@mui/material").TableRowProps<"tr", {}> | (({ table, headerGroup, }: {
+    muiTableHeadRowProps?: import("@mui/material").TableRowProps<"tr", {}> | ((props: {
         table: MRT_TableInstance<TData>;
         headerGroup: import("..").MRT_HeaderGroup<TData>;
     }) => import("@mui/material").TableRowProps<"tr", {}>) | undefined;
-    muiTablePaginationProps?: Partial<import("@mui/material").TablePaginationProps<React.JSXElementConstructor<import("@mui/material").TablePaginationBaseProps>, {}>> | (({ table, }: {
+    muiTablePaginationProps?: Partial<import("@mui/material").TablePaginationProps<React.JSXElementConstructor<import("@mui/material").TablePaginationBaseProps>, {}>> | ((props: {
         table: MRT_TableInstance<TData>;
     }) => Partial<import("@mui/material").TablePaginationProps<React.JSXElementConstructor<import("@mui/material").TablePaginationBaseProps>, {}>>) | undefined;
-    muiTablePaperProps?: import("@mui/material").PaperProps<"div", {}> | (({ table }: {
+    muiTablePaperProps?: import("@mui/material").PaperProps<"div", {}> | ((props: {
         table: MRT_TableInstance<TData>;
     }) => import("@mui/material").PaperProps<"div", {}>) | undefined;
-    muiTableProps?: import("@mui/material").TableProps<"table", {}> | (({ table }: {
+    muiTableProps?: import("@mui/material").TableProps<"table", {}> | ((props: {
         table: MRT_TableInstance<TData>;
     }) => import("@mui/material").TableProps<"table", {}>) | undefined;
-    muiToolbarAlertBannerChipProps?: import("@mui/material").ChipProps<"div", {}> | (({ table }: {
+    muiToolbarAlertBannerChipProps?: import("@mui/material").ChipProps<"div", {}> | ((props: {
         table: MRT_TableInstance<TData>;
     }) => import("@mui/material").ChipProps<"div", {}>) | undefined;
-    muiToolbarAlertBannerProps?: import("@mui/material").AlertProps | (({ table }: {
+    muiToolbarAlertBannerProps?: import("@mui/material").AlertProps | ((props: {
         table: MRT_TableInstance<TData>;
     }) => import("@mui/material").AlertProps) | undefined;
-    muiTopToolbarProps?: import("@mui/material").ToolbarProps<"div", {}> | (({ table }: {
+    muiTopToolbarProps?: import("@mui/material").ToolbarProps<"div", {}> | ((props: {
         table: MRT_TableInstance<TData>;
     }) => import("@mui/material").ToolbarProps<"div", {}>) | undefined;
     onDensityChange?: import("@tanstack/react-table").OnChangeFn<import("..").DensityState> | undefined;
     onDraggingColumnChange?: import("@tanstack/react-table").OnChangeFn<MRT_Column<TData> | null> | undefined;
     onDraggingRowChange?: import("@tanstack/react-table").OnChangeFn<MRT_Row<TData> | null> | undefined;
     onEditingCellChange?: import("@tanstack/react-table").OnChangeFn<MRT_Cell<TData> | null> | undefined;
-    onEditingRowCancel?: (({ row, table, }: {
+    onEditingRowCancel?: ((props: {
         row: MRT_Row<TData>;
         table: MRT_TableInstance<TData>;
     }) => void) | undefined;
-    onEditingRowSave?: (({ exitEditingMode, row, table, values, }: {
+    onEditingRowSave?: ((props: {
         exitEditingMode: () => void;
         row: MRT_Row<TData>;
         table: MRT_TableInstance<TData>;
@@ -206,49 +207,49 @@ export declare const MRT_TableRoot: <TData extends Record<string, any> = {}>(pro
     positionPagination?: "bottom" | "top" | "none" | "both" | undefined;
     positionToolbarAlertBanner?: "bottom" | "top" | "none" | undefined;
     positionToolbarDropZone?: "bottom" | "top" | "none" | "both" | undefined;
-    renderBottomToolbar?: React.ReactNode | (({ table }: {
+    renderBottomToolbar?: React.ReactNode | ((props: {
         table: MRT_TableInstance<TData>;
     }) => React.ReactNode);
-    renderBottomToolbarCustomActions?: (({ table, }: {
+    renderBottomToolbarCustomActions?: ((props: {
         table: MRT_TableInstance<TData>;
     }) => React.ReactNode) | undefined;
-    renderColumnActionsMenuItems?: (({ column, closeMenu, table, }: {
+    renderColumnActionsMenuItems?: ((props: {
         column: MRT_Column<TData>;
         closeMenu: () => void;
         table: MRT_TableInstance<TData>;
     }) => React.ReactNode[]) | undefined;
-    renderColumnFilterModeMenuItems?: (({ column, internalFilterOptions, onSelectFilterMode, table, }: {
+    renderColumnFilterModeMenuItems?: ((props: {
         column: MRT_Column<TData>;
         internalFilterOptions: import("..").MRT_InternalFilterOption[];
         onSelectFilterMode: (filterMode: MRT_FilterOption) => void;
         table: MRT_TableInstance<TData>;
     }) => React.ReactNode[]) | undefined;
-    renderDetailPanel?: (({ row, table, }: {
+    renderDetailPanel?: ((props: {
         row: MRT_Row<TData>;
         table: MRT_TableInstance<TData>;
     }) => React.ReactNode) | undefined;
-    renderGlobalFilterModeMenuItems?: (({ internalFilterOptions, onSelectFilterMode, table, }: {
+    renderGlobalFilterModeMenuItems?: ((props: {
         internalFilterOptions: import("..").MRT_InternalFilterOption[];
         onSelectFilterMode: (filterMode: MRT_FilterOption) => void;
         table: MRT_TableInstance<TData>;
     }) => React.ReactNode[]) | undefined;
-    renderRowActionMenuItems?: (({ closeMenu, row, table, }: {
+    renderRowActionMenuItems?: ((props: {
         closeMenu: () => void;
         row: MRT_Row<TData>;
         table: MRT_TableInstance<TData>;
     }) => React.ReactNode[]) | undefined;
-    renderRowActions?: (({ cell, row, table, }: {
+    renderRowActions?: ((props: {
         cell: MRT_Cell<TData>;
         row: MRT_Row<TData>;
         table: MRT_TableInstance<TData>;
     }) => React.ReactNode) | undefined;
-    renderToolbarInternalActions?: (({ table, }: {
+    renderToolbarInternalActions?: ((props: {
         table: MRT_TableInstance<TData>;
     }) => React.ReactNode) | undefined;
-    renderTopToolbar?: React.ReactNode | (({ table }: {
+    renderTopToolbar?: React.ReactNode | ((props: {
         table: MRT_TableInstance<TData>;
     }) => React.ReactNode);
-    renderTopToolbarCustomActions?: (({ table, }: {
+    renderTopToolbarCustomActions?: ((props: {
         table: MRT_TableInstance<TData>;
     }) => React.ReactNode) | undefined;
     rowCount?: number | undefined;
@@ -256,11 +257,11 @@ export declare const MRT_TableRoot: <TData extends Record<string, any> = {}>(pro
     selectAllMode?: "all" | "page" | undefined;
     state?: Partial<MRT_TableState<TData>> | undefined;
     columnVirtualizerInstanceRef?: React.MutableRefObject<import("@tanstack/react-virtual").Virtualizer<HTMLDivElement, HTMLTableCellElement> | null> | undefined;
-    columnVirtualizerProps?: Partial<import("@tanstack/react-virtual").VirtualizerOptions<HTMLDivElement, HTMLTableCellElement>> | (({ table, }: {
+    columnVirtualizerProps?: Partial<import("@tanstack/react-virtual").VirtualizerOptions<HTMLDivElement, HTMLTableCellElement>> | ((props: {
         table: MRT_TableInstance<TData>;
     }) => Partial<import("@tanstack/react-virtual").VirtualizerOptions<HTMLDivElement, HTMLTableCellElement>>) | undefined;
     rowVirtualizerInstanceRef?: React.MutableRefObject<import("@tanstack/react-virtual").Virtualizer<HTMLDivElement, HTMLTableRowElement> | null> | undefined;
-    rowVirtualizerProps?: Partial<import("@tanstack/react-virtual").VirtualizerOptions<HTMLDivElement, HTMLTableRowElement>> | (({ table, }: {
+    rowVirtualizerProps?: Partial<import("@tanstack/react-virtual").VirtualizerOptions<HTMLDivElement, HTMLTableRowElement>> | ((props: {
         table: MRT_TableInstance<TData>;
     }) => Partial<import("@tanstack/react-virtual").VirtualizerOptions<HTMLDivElement, HTMLTableRowElement>>) | undefined;
     tableInstanceRef?: React.MutableRefObject<MRT_TableInstance<TData> | null> | undefined;

package/dist/esm/material-react-table.esm.js

@@ -68,6 +68,7 @@ import TableCell from '@mui/material/TableCell';
 import TableSortLabel from '@mui/material/TableSortLabel';
 import TableBody from '@mui/material/TableBody';
 import Skeleton from '@mui/material/Skeleton';
+import highlightWords from 'highlight-words';
 import TableFooter from '@mui/material/TableFooter';
 import DialogActions from '@mui/material/DialogActions';
 import DialogContent from '@mui/material/DialogContent';
@@ -262,6 +263,7 @@ const getCommonCellStyles = ({ column, header, table, tableCellProps, theme, })
             : undefined, minWidth: `max(${column.getSize()}px, ${(_g = column.columnDef.minSize) !== null && _g !== void 0 ? _g : 30}px)`, width: (_h = header === null || header === void 0 ? void 0 : header.getSize()) !== null && _h !== void 0 ? _h : column.getSize() }));
 };
 const MRT_DefaultColumn = {
+    filterVariant: 'text',
     minSize: 40,
     maxSize: 1000,
     size: 180,
@@ -1271,7 +1273,7 @@ const MRT_ToggleFiltersButton = (_a) => {
 };
 
 const MRT_ToggleGlobalFilterButton = (_a) => {
-    var _b;
+    var _b, _c;
     var { table } = _a, rest = __rest(_a, ["table"]);
     const { getState, options: { icons: { SearchIcon, SearchOffIcon }, localization, }, refs: { searchInputRef }, setShowGlobalFilter, } = table;
     const { globalFilter, showGlobalFilter } = getState();
@@ -1280,7 +1282,7 @@ const MRT_ToggleGlobalFilterButton = (_a) => {
         queueMicrotask(() => { var _a; return (_a = searchInputRef.current) === null || _a === void 0 ? void 0 : _a.focus(); });
     };
     return (React.createElement(Tooltip, { arrow: true, title: (_b = rest === null || rest === void 0 ? void 0 : rest.title) !== null && _b !== void 0 ? _b : localization.showHideSearch },
-        React.createElement(IconButton, Object.assign({ disabled: !!globalFilter, onClick: handleToggleSearch }, rest, { title: undefined }), showGlobalFilter ? React.createElement(SearchOffIcon, null) : React.createElement(SearchIcon, null))));
+        React.createElement(IconButton, Object.assign({ "aria-label": (_c = rest === null || rest === void 0 ? void 0 : rest.title) !== null && _c !== void 0 ? _c : localization.showHideSearch, disabled: !!globalFilter, onClick: handleToggleSearch }, rest, { title: undefined }), showGlobalFilter ? React.createElement(SearchOffIcon, null) : React.createElement(SearchIcon, null))));
 };
 
 const MRT_ToolbarInternalButtons = ({ table, }) => {
@@ -1321,15 +1323,17 @@ const MRT_ToolbarDropZone = ({ table, }) => {
         React.createElement(Box, { className: "Mui-ToolbarDropZone", sx: (theme) => ({
                 alignItems: 'center',
                 backgroundColor: alpha(theme.palette.info.main, (hoveredColumn === null || hoveredColumn === void 0 ? void 0 : 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 },
-            React.createElement(Typography, null, localization.dropToGroupBy.replace('{column}', (_b = (_a = draggingColumn === null || draggingColumn === void 0 ? void 0 : draggingColumn.columnDef) === null || _a === void 0 ? void 0 : _a.header) !== null && _b !== void 0 ? _b : '')))));
+            React.createElement(Typography, { fontStyle: "italic" }, localization.dropToGroupBy.replace('{column}', (_b = (_a = draggingColumn === null || draggingColumn === void 0 ? void 0 : draggingColumn.columnDef) === null || _a === void 0 ? void 0 : _a.header) !== null && _b !== void 0 ? _b : '')))));
 };
 
 const commonToolbarStyles = ({ theme }) => ({
@@ -2132,11 +2136,15 @@ const MRT_TableBodyRowGrabHandle = ({ cell, rowRef, table, }) => {
     return (React.createElement(MRT_GrabHandleButton, { iconButtonProps: iconButtonProps, onDragStart: handleDragStart, onDragEnd: handleDragEnd, table: table }));
 };
 
+const allowedTypes = ['string', 'number'];
 const MRT_TableBodyCellValue = ({ cell, table }) => {
-    var _a, _b;
+    var _a, _b, _c, _d;
+    const { getState, options: { enableFilterMatchHighlighting }, } = table;
     const { column, row } = cell;
     const { columnDef } = column;
-    return (React.createElement(React.Fragment, null, cell.getIsAggregated() && columnDef.AggregatedCell
+    const { globalFilter } = getState();
+    const filterValue = column.getFilterValue();
+    let renderedCellValue = cell.getIsAggregated() && columnDef.AggregatedCell
         ? columnDef.AggregatedCell({
             cell,
             column,
@@ -2152,7 +2160,45 @@ const MRT_TableBodyCellValue = ({ cell, table }) => {
                     row,
                     table,
                 })
-                : (_b = (_a = columnDef === null || columnDef === void 0 ? void 0 : columnDef.Cell) === null || _a === void 0 ? void 0 : _a.call(columnDef, { cell, column, row, table })) !== null && _b !== void 0 ? _b : cell.renderValue()));
+                : undefined;
+    const isGroupedValue = renderedCellValue !== undefined;
+    if (!isGroupedValue) {
+        renderedCellValue = cell.renderValue();
+    }
+    if (enableFilterMatchHighlighting &&
+        renderedCellValue &&
+        allowedTypes.includes(typeof renderedCellValue) &&
+        ((filterValue &&
+            allowedTypes.includes(typeof filterValue) &&
+            columnDef.filterVariant === 'text') ||
+            (globalFilter && allowedTypes.includes(typeof globalFilter)))) {
+        const chunks = highlightWords === null || highlightWords === void 0 ? void 0 : highlightWords({
+            text: renderedCellValue === null || renderedCellValue === void 0 ? void 0 : renderedCellValue.toString(),
+            query: ((_b = (_a = column.getFilterValue()) !== null && _a !== void 0 ? _a : globalFilter) !== null && _b !== void 0 ? _b : '').toString(),
+        });
+        if ((chunks === null || chunks === void 0 ? void 0 : chunks.length) > 1 || ((_c = chunks === null || chunks === void 0 ? void 0 : chunks[0]) === null || _c === void 0 ? void 0 : _c.match)) {
+            renderedCellValue = (React.createElement("span", { "aria-label": renderedCellValue, role: "note" }, (_d = chunks === null || chunks === void 0 ? void 0 : chunks.map(({ key, match, text }) => (React.createElement(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)))) !== null && _d !== void 0 ? _d : renderedCellValue));
+        }
+    }
+    if (columnDef.Cell && !isGroupedValue) {
+        renderedCellValue = columnDef.Cell({
+            cell,
+            renderedCellValue,
+            column,
+            row,
+            table,
+        });
+    }
+    return React.createElement(React.Fragment, null, renderedCellValue);
 };
 
 const MRT_TableBodyCell = ({ cell, enableHover, measureElement, numRows, rowIndex, rowRef, table, virtualCell, }) => {
@@ -2268,7 +2314,13 @@ const MRT_TableBodyCell = ({ cell, enableHover, measureElement, numRows, rowInde
             column.id === 'mrt-row-numbers' ? (rowIndex + 1) : column.id === 'mrt-row-drag' ? (React.createElement(MRT_TableBodyRowGrabHandle, { cell: cell, rowRef: rowRef, table: table })) : columnDefType === 'display' &&
             (column.id === 'mrt-row-select' ||
                 column.id === 'mrt-row-expand' ||
-                !row.getIsGrouped()) ? ((_a = columnDef.Cell) === null || _a === void 0 ? void 0 : _a.call(columnDef, { cell, column, row, table })) : isEditing ? (React.createElement(MRT_EditCellTextField, { cell: cell, table: table })) : (enableClickToCopy || columnDef.enableClickToCopy) &&
+                !row.getIsGrouped()) ? ((_a = columnDef.Cell) === null || _a === void 0 ? void 0 : _a.call(columnDef, {
+            cell,
+            renderedCellValue: cell.renderValue(),
+            column,
+            row,
+            table,
+        })) : isEditing ? (React.createElement(MRT_EditCellTextField, { cell: cell, table: table })) : (enableClickToCopy || columnDef.enableClickToCopy) &&
             columnDef.enableClickToCopy !== false ? (React.createElement(MRT_CopyButton, { cell: cell, table: table },
             React.createElement(MRT_TableBodyCellValue, { cell: cell, table: table }))) : (React.createElement(MRT_TableBodyCellValue, { cell: cell, table: table }))),
         cell.getIsGrouped() && !columnDef.GroupedCell && (React.createElement(React.Fragment, null,
@@ -2946,7 +2998,7 @@ const MRT_Localization_EN = {
 
 const MaterialReactTable = (_a) => {
     var _b;
-    var { aggregationFns, autoResetExpanded = false, columnResizeMode = 'onEnd', defaultColumn, defaultDisplayColumn, editingMode = 'modal', enableBottomToolbar = true, enableColumnActions = true, enableColumnFilters = true, enableColumnOrdering = false, enableColumnResizing = false, enableDensityToggle = true, enableExpandAll = true, enableFilters = true, enableFullScreenToggle = true, enableGlobalFilter = true, enableGlobalFilterRankedResults = true, enableGrouping = false, enableHiding = true, enableMultiRowSelection = true, enableMultiSort = true, enablePagination = true, enablePinning = false, enableRowSelection = false, enableSelectAll = true, enableSorting = true, enableStickyHeader = false, enableTableFooter = true, enableTableHead = true, enableToolbarInternalActions = true, enableTopToolbar = true, filterFns, icons, layoutMode = 'semantic', localization, manualFiltering, manualGrouping, manualPagination, manualSorting, positionActionsColumn = 'first', positionExpandColumn = 'first', positionGlobalFilter = 'right', positionPagination = 'bottom', positionToolbarAlertBanner = 'top', positionToolbarDropZone = 'top', rowNumberMode = 'original', selectAllMode = 'page', sortingFns } = _a, rest = __rest(_a, ["aggregationFns", "autoResetExpanded", "columnResizeMode", "defaultColumn", "defaultDisplayColumn", "editingMode", "enableBottomToolbar", "enableColumnActions", "enableColumnFilters", "enableColumnOrdering", "enableColumnResizing", "enableDensityToggle", "enableExpandAll", "enableFilters", "enableFullScreenToggle", "enableGlobalFilter", "enableGlobalFilterRankedResults", "enableGrouping", "enableHiding", "enableMultiRowSelection", "enableMultiSort", "enablePagination", "enablePinning", "enableRowSelection", "enableSelectAll", "enableSorting", "enableStickyHeader", "enableTableFooter", "enableTableHead", "enableToolbarInternalActions", "enableTopToolbar", "filterFns", "icons", "layoutMode", "localization", "manualFiltering", "manualGrouping", "manualPagination", "manualSorting", "positionActionsColumn", "positionExpandColumn", "positionGlobalFilter", "positionPagination", "positionToolbarAlertBanner", "positionToolbarDropZone", "rowNumberMode", "selectAllMode", "sortingFns"]);
+    var { aggregationFns, autoResetExpanded = false, columnResizeMode = 'onEnd', defaultColumn, defaultDisplayColumn, editingMode = 'modal', enableBottomToolbar = true, enableColumnActions = true, enableColumnFilters = true, enableColumnOrdering = false, enableColumnResizing = false, enableDensityToggle = true, enableExpandAll = true, enableFilterMatchHighlighting = true, enableFilters = true, enableFullScreenToggle = true, enableGlobalFilter = true, enableGlobalFilterRankedResults = true, enableGrouping = false, enableHiding = true, enableMultiRowSelection = true, enableMultiSort = true, enablePagination = true, enablePinning = false, enableRowSelection = false, enableSelectAll = true, enableSorting = true, enableStickyHeader = false, enableTableFooter = true, enableTableHead = true, enableToolbarInternalActions = true, enableTopToolbar = true, filterFns, icons, layoutMode = 'semantic', localization, manualFiltering, manualGrouping, manualPagination, manualSorting, positionActionsColumn = 'first', positionExpandColumn = 'first', positionGlobalFilter = 'right', positionPagination = 'bottom', positionToolbarAlertBanner = 'top', positionToolbarDropZone = 'top', rowNumberMode = 'original', selectAllMode = 'page', sortingFns } = _a, rest = __rest(_a, ["aggregationFns", "autoResetExpanded", "columnResizeMode", "defaultColumn", "defaultDisplayColumn", "editingMode", "enableBottomToolbar", "enableColumnActions", "enableColumnFilters", "enableColumnOrdering", "enableColumnResizing", "enableDensityToggle", "enableExpandAll", "enableFilterMatchHighlighting", "enableFilters", "enableFullScreenToggle", "enableGlobalFilter", "enableGlobalFilterRankedResults", "enableGrouping", "enableHiding", "enableMultiRowSelection", "enableMultiSort", "enablePagination", "enablePinning", "enableRowSelection", "enableSelectAll", "enableSorting", "enableStickyHeader", "enableTableFooter", "enableTableHead", "enableToolbarInternalActions", "enableTopToolbar", "filterFns", "icons", "layoutMode", "localization", "manualFiltering", "manualGrouping", "manualPagination", "manualSorting", "positionActionsColumn", "positionExpandColumn", "positionGlobalFilter", "positionPagination", "positionToolbarAlertBanner", "positionToolbarDropZone", "rowNumberMode", "selectAllMode", "sortingFns"]);
     const _icons = useMemo(() => (Object.assign(Object.assign({}, MRT_Default_Icons), icons)), [icons]);
     const _localization = useMemo(() => (Object.assign(Object.assign({}, MRT_Localization_EN), localization)), [localization]);
     const _aggregationFns = useMemo(() => (Object.assign(Object.assign({}, MRT_AggregationFns), aggregationFns)), []);
@@ -2969,8 +3021,8 @@ const MaterialReactTable = (_a) => {
         manualPagination = true;
         manualSorting = true;
     }
-    return (React.createElement(MRT_TableRoot, Object.assign({ aggregationFns: _aggregationFns, autoResetExpanded: autoResetExpanded, columnResizeMode: columnResizeMode, defaultColumn: _defaultColumn, defaultDisplayColumn: _defaultDisplayColumn, editingMode: editingMode, enableBottomToolbar: enableBottomToolbar, enableColumnActions: enableColumnActions, enableColumnFilters: enableColumnFilters, enableColumnOrdering: enableColumnOrdering, enableColumnResizing: enableColumnResizing, enableDensityToggle: enableDensityToggle, enableExpandAll: enableExpandAll, enableFilters: enableFilters, enableFullScreenToggle: enableFullScreenToggle, enableGlobalFilter: enableGlobalFilter, enableGlobalFilterRankedResults: enableGlobalFilterRankedResults, enableGrouping: enableGrouping, enableHiding: enableHiding, enableMultiRowSelection: enableMultiRowSelection, enableMultiSort: enableMultiSort, enablePagination: enablePagination, enablePinning: enablePinning, enableRowSelection: enableRowSelection, enableSelectAll: enableSelectAll, enableSorting: enableSorting, enableStickyHeader: enableStickyHeader, enableTableFooter: enableTableFooter, enableTableHead: enableTableHead, enableToolbarInternalActions: enableToolbarInternalActions, enableTopToolbar: enableTopToolbar, filterFns: _filterFns, icons: _icons, layoutMode: layoutMode, localization: _localization, manualFiltering: manualFiltering, manualGrouping: manualGrouping, manualPagination: manualPagination, manualSorting: manualSorting, positionActionsColumn: positionActionsColumn, positionExpandColumn: positionExpandColumn, positionGlobalFilter: positionGlobalFilter, positionPagination: positionPagination, positionToolbarAlertBanner: positionToolbarAlertBanner, positionToolbarDropZone: positionToolbarDropZone, rowNumberMode: rowNumberMode, selectAllMode: selectAllMode, sortingFns: _sortingFns }, rest)));
+    return (React.createElement(MRT_TableRoot, Object.assign({ aggregationFns: _aggregationFns, autoResetExpanded: autoResetExpanded, columnResizeMode: columnResizeMode, defaultColumn: _defaultColumn, defaultDisplayColumn: _defaultDisplayColumn, editingMode: editingMode, enableBottomToolbar: enableBottomToolbar, enableColumnActions: enableColumnActions, enableColumnFilters: enableColumnFilters, enableColumnOrdering: enableColumnOrdering, enableColumnResizing: enableColumnResizing, enableDensityToggle: enableDensityToggle, enableExpandAll: enableExpandAll, enableFilterMatchHighlighting: enableFilterMatchHighlighting, enableFilters: enableFilters, enableFullScreenToggle: enableFullScreenToggle, enableGlobalFilter: enableGlobalFilter, enableGlobalFilterRankedResults: enableGlobalFilterRankedResults, enableGrouping: enableGrouping, enableHiding: enableHiding, enableMultiRowSelection: enableMultiRowSelection, enableMultiSort: enableMultiSort, enablePagination: enablePagination, enablePinning: enablePinning, enableRowSelection: enableRowSelection, enableSelectAll: enableSelectAll, enableSorting: enableSorting, enableStickyHeader: enableStickyHeader, enableTableFooter: enableTableFooter, enableTableHead: enableTableHead, enableToolbarInternalActions: enableToolbarInternalActions, enableTopToolbar: enableTopToolbar, filterFns: _filterFns, icons: _icons, layoutMode: layoutMode, localization: _localization, manualFiltering: manualFiltering, manualGrouping: manualGrouping, manualPagination: manualPagination, manualSorting: manualSorting, positionActionsColumn: positionActionsColumn, positionExpandColumn: positionExpandColumn, positionGlobalFilter: positionGlobalFilter, positionPagination: positionPagination, positionToolbarAlertBanner: positionToolbarAlertBanner, positionToolbarDropZone: positionToolbarDropZone, rowNumberMode: rowNumberMode, selectAllMode: selectAllMode, sortingFns: _sortingFns }, rest)));
 };
 
-export { MRT_BottomToolbar, MRT_CopyButton, MRT_FilterOptionMenu, MRT_FullScreenToggleButton, MRT_GlobalFilterTextField, MRT_ShowHideColumnsButton, MRT_TablePagination, MRT_ToggleDensePaddingButton, MRT_ToggleFiltersButton, MRT_ToggleGlobalFilterButton, MRT_ToggleRowActionMenuButton, MRT_ToolbarAlertBanner, MRT_ToolbarDropZone, MRT_ToolbarInternalButtons, MRT_TopToolbar, MaterialReactTable as default };
+export { MRT_BottomToolbar, MRT_CopyButton, MRT_EditActionButtons, MRT_FilterOptionMenu, MRT_FullScreenToggleButton, MRT_GlobalFilterTextField, MRT_ShowHideColumnsButton, MRT_TablePagination, MRT_ToggleDensePaddingButton, MRT_ToggleFiltersButton, MRT_ToggleGlobalFilterButton, MRT_ToggleRowActionMenuButton, MRT_ToolbarAlertBanner, MRT_ToolbarDropZone, MRT_ToolbarInternalButtons, MRT_TopToolbar, MaterialReactTable as default };
 //# sourceMappingURL=material-react-table.esm.js.map