material-react-table 2.11.3 → 2.12.1

package/locales/hr/index.d.ts

@@ -0,0 +1,3 @@
+import { type MRT_Localization } from '../..';
+export declare const MRT_Localization_HR: MRT_Localization;
+  

package/locales/hr/index.esm.d.ts

@@ -0,0 +1,3 @@
+import { type MRT_Localization } from '../..';
+export declare const MRT_Localization_HR: MRT_Localization;
+  

package/locales/hr/index.esm.js

@@ -0,0 +1,95 @@
+const MRT_Localization_HR = {
+    actions: 'Radnje',
+    and: 'i',
+    cancel: 'Odustani',
+    changeFilterMode: 'Promijeni način filtriranja',
+    changeSearchMode: 'Promijeni način pretraživanja',
+    clearFilter: 'Očisti filtriranje',
+    clearSearch: 'Očisti pretragu',
+    clearSelection: 'Očisti odabir',
+    clearSort: 'Očisti sortiranje',
+    clickToCopy: 'Klikni za kopiranje',
+    copy: 'Kopiraj',
+    collapse: 'Sažmi',
+    collapseAll: 'Sažmi sve',
+    columnActions: 'Radnje s stupcima',
+    copiedToClipboard: 'Kopirano u međuspremnik',
+    dropToGroupBy: 'Ispusti za grupiranje po {column}',
+    edit: 'Uredi',
+    expand: 'Proširi',
+    expandAll: 'Proširi sve',
+    filterArrIncludes: 'Uključuje',
+    filterArrIncludesAll: 'Uključuje sve',
+    filterArrIncludesSome: 'Uključuje',
+    filterBetween: 'Između',
+    filterBetweenInclusive: 'Između uključivo',
+    filterByColumn: 'Filtriraj po {column}',
+    filterContains: 'Sadrži',
+    filterEmpty: 'Prazno',
+    filterEndsWith: 'Završava s',
+    filterEquals: 'Jednako',
+    filterEqualsString: 'Jednako',
+    filterFuzzy: 'Maglovito',
+    filterGreaterThan: 'Veće od',
+    filterGreaterThanOrEqualTo: 'Veće od ili jednako',
+    filterInNumberRange: 'Između',
+    filterIncludesString: 'Sadrži',
+    filterIncludesStringSensitive: 'Sadrži',
+    filterLessThan: 'Manje od',
+    filterLessThanOrEqualTo: 'Manje od ili jednako',
+    filterMode: 'Način filtriranja: {filterType}',
+    filterNotEmpty: 'Nije prazno',
+    filterNotEquals: 'Nije jednako',
+    filterStartsWith: 'Počinje s',
+    filterWeakEquals: 'Jednako',
+    filteringByColumn: 'Filtriranje po {column} - {filterType} {filterValue}',
+    goToFirstPage: 'Idi na prvu stranicu',
+    goToLastPage: 'Idi na zadnju stranicu',
+    goToNextPage: 'Idi na sljedeću stranicu',
+    goToPreviousPage: 'Idi na prethodnu stranicu',
+    grab: 'Uhvati',
+    groupByColumn: 'Grupiraj po {column}',
+    groupedBy: 'Grupirano po ',
+    hideAll: 'Sakrij sve',
+    hideColumn: 'Sakrij stupac {column}',
+    max: 'Maks.',
+    min: 'Min.',
+    move: 'Premjesti',
+    noRecordsToDisplay: 'Nema zapisa za prikaz',
+    noResultsFound: 'Nema pronađenih rezultata',
+    of: 'od',
+    or: 'ili',
+    pin: 'Prikači',
+    pinToLeft: 'Prikači na lijevo',
+    pinToRight: 'Prikači na desno',
+    resetColumnSize: 'Resetiraj veličinu stupca',
+    resetOrder: 'Resetiraj redoslijed',
+    rowActions: 'Radnje retka',
+    rowNumber: '#',
+    rowNumbers: 'Brojevi redaka',
+    rowsPerPage: 'Redaka po stranici',
+    save: 'Spremi',
+    search: 'Pretraži',
+    selectedCountOfRowCountRowsSelected: '{selectedCount} od {rowCount} odabranih redaka',
+    select: 'Odaberi',
+    showAll: 'Prikaži sve',
+    showAllColumns: 'Prikaži sve stupce',
+    showHideColumns: 'Prikaži/sakrij stupce',
+    showHideFilters: 'Prikaži/sakrij filtere',
+    showHideSearch: 'Prikaži/sakrij pretragu',
+    sortByColumnAsc: 'Sortiraj po {column} uzlazno',
+    sortByColumnDesc: 'Sortiraj po {column} silazno',
+    sortedByColumnAsc: 'Sortirano po {column} uzlazno',
+    sortedByColumnDesc: 'Sortirano po {column} silazno',
+    thenBy: ', zatim po ',
+    toggleDensity: 'Promijeni gustoću',
+    toggleFullScreen: 'Prebaci u puni zaslon',
+    toggleSelectAll: 'Prebaci odabir svih',
+    toggleSelectRow: 'Prebaci odabir retka',
+    toggleVisibility: 'Prebaci vidljivost',
+    ungroupByColumn: 'Razgrupiraj po {column}',
+    unpin: 'Odkači',
+    unpinAll: 'Odkači sve',
+};
+
+export { MRT_Localization_HR };

package/locales/hr/index.js

@@ -0,0 +1,99 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+const MRT_Localization_HR = {
+    actions: 'Radnje',
+    and: 'i',
+    cancel: 'Odustani',
+    changeFilterMode: 'Promijeni način filtriranja',
+    changeSearchMode: 'Promijeni način pretraživanja',
+    clearFilter: 'Očisti filtriranje',
+    clearSearch: 'Očisti pretragu',
+    clearSelection: 'Očisti odabir',
+    clearSort: 'Očisti sortiranje',
+    clickToCopy: 'Klikni za kopiranje',
+    copy: 'Kopiraj',
+    collapse: 'Sažmi',
+    collapseAll: 'Sažmi sve',
+    columnActions: 'Radnje s stupcima',
+    copiedToClipboard: 'Kopirano u međuspremnik',
+    dropToGroupBy: 'Ispusti za grupiranje po {column}',
+    edit: 'Uredi',
+    expand: 'Proširi',
+    expandAll: 'Proširi sve',
+    filterArrIncludes: 'Uključuje',
+    filterArrIncludesAll: 'Uključuje sve',
+    filterArrIncludesSome: 'Uključuje',
+    filterBetween: 'Između',
+    filterBetweenInclusive: 'Između uključivo',
+    filterByColumn: 'Filtriraj po {column}',
+    filterContains: 'Sadrži',
+    filterEmpty: 'Prazno',
+    filterEndsWith: 'Završava s',
+    filterEquals: 'Jednako',
+    filterEqualsString: 'Jednako',
+    filterFuzzy: 'Maglovito',
+    filterGreaterThan: 'Veće od',
+    filterGreaterThanOrEqualTo: 'Veće od ili jednako',
+    filterInNumberRange: 'Između',
+    filterIncludesString: 'Sadrži',
+    filterIncludesStringSensitive: 'Sadrži',
+    filterLessThan: 'Manje od',
+    filterLessThanOrEqualTo: 'Manje od ili jednako',
+    filterMode: 'Način filtriranja: {filterType}',
+    filterNotEmpty: 'Nije prazno',
+    filterNotEquals: 'Nije jednako',
+    filterStartsWith: 'Počinje s',
+    filterWeakEquals: 'Jednako',
+    filteringByColumn: 'Filtriranje po {column} - {filterType} {filterValue}',
+    goToFirstPage: 'Idi na prvu stranicu',
+    goToLastPage: 'Idi na zadnju stranicu',
+    goToNextPage: 'Idi na sljedeću stranicu',
+    goToPreviousPage: 'Idi na prethodnu stranicu',
+    grab: 'Uhvati',
+    groupByColumn: 'Grupiraj po {column}',
+    groupedBy: 'Grupirano po ',
+    hideAll: 'Sakrij sve',
+    hideColumn: 'Sakrij stupac {column}',
+    max: 'Maks.',
+    min: 'Min.',
+    move: 'Premjesti',
+    noRecordsToDisplay: 'Nema zapisa za prikaz',
+    noResultsFound: 'Nema pronađenih rezultata',
+    of: 'od',
+    or: 'ili',
+    pin: 'Prikači',
+    pinToLeft: 'Prikači na lijevo',
+    pinToRight: 'Prikači na desno',
+    resetColumnSize: 'Resetiraj veličinu stupca',
+    resetOrder: 'Resetiraj redoslijed',
+    rowActions: 'Radnje retka',
+    rowNumber: '#',
+    rowNumbers: 'Brojevi redaka',
+    rowsPerPage: 'Redaka po stranici',
+    save: 'Spremi',
+    search: 'Pretraži',
+    selectedCountOfRowCountRowsSelected: '{selectedCount} od {rowCount} odabranih redaka',
+    select: 'Odaberi',
+    showAll: 'Prikaži sve',
+    showAllColumns: 'Prikaži sve stupce',
+    showHideColumns: 'Prikaži/sakrij stupce',
+    showHideFilters: 'Prikaži/sakrij filtere',
+    showHideSearch: 'Prikaži/sakrij pretragu',
+    sortByColumnAsc: 'Sortiraj po {column} uzlazno',
+    sortByColumnDesc: 'Sortiraj po {column} silazno',
+    sortedByColumnAsc: 'Sortirano po {column} uzlazno',
+    sortedByColumnDesc: 'Sortirano po {column} silazno',
+    thenBy: ', zatim po ',
+    toggleDensity: 'Promijeni gustoću',
+    toggleFullScreen: 'Prebaci u puni zaslon',
+    toggleSelectAll: 'Prebaci odabir svih',
+    toggleSelectRow: 'Prebaci odabir retka',
+    toggleVisibility: 'Prebaci vidljivost',
+    ungroupByColumn: 'Razgrupiraj po {column}',
+    unpin: 'Odkači',
+    unpinAll: 'Odkači sve',
+};
+
+exports.MRT_Localization_HR = MRT_Localization_HR;

package/locales/hr/package.json

@@ -0,0 +1,6 @@
+{
+  "main": "index.js",
+  "module": "index.esm.js",
+  "sideEffects": false,
+  "types": "index.d.ts"
+}

package/package.json

@@ -1,5 +1,5 @@
 {
-  "version": "2.11.3",
+  "version": "2.12.1",
   "license": "MIT",
   "name": "material-react-table",
   "description": "A fully featured Material UI V5 implementation of TanStack React Table V8, written from the ground up in TypeScript.",
@@ -61,32 +61,32 @@
     "storybook:dev": "storybook dev -p 6006"
   },
   "devDependencies": {
-    "@babel/core": "^7.23.9",
+    "@babel/core": "^7.24.0",
     "@babel/preset-react": "^7.23.3",
-    "@emotion/react": "^11.11.3",
+    "@emotion/react": "^11.11.4",
     "@emotion/styled": "^11.11.0",
     "@faker-js/faker": "^8.4.1",
-    "@mui/icons-material": "^5.15.10",
-    "@mui/material": "^5.15.10",
-    "@mui/x-date-pickers": "^6.19.4",
+    "@mui/icons-material": "^5.15.11",
+    "@mui/material": "^5.15.11",
+    "@mui/x-date-pickers": "^6.19.5",
     "@rollup/plugin-typescript": "^11.1.6",
     "@size-limit/preset-small-lib": "^11.0.2",
-    "@storybook/addon-a11y": "^7.6.15",
-    "@storybook/addon-essentials": "^7.6.15",
-    "@storybook/addon-interactions": "^7.6.15",
-    "@storybook/addon-links": "^7.6.15",
-    "@storybook/addon-storysource": "^7.6.15",
-    "@storybook/blocks": "^7.6.15",
-    "@storybook/react": "^7.6.15",
-    "@storybook/react-vite": "^7.6.15",
+    "@storybook/addon-a11y": "^7.6.17",
+    "@storybook/addon-essentials": "^7.6.17",
+    "@storybook/addon-interactions": "^7.6.17",
+    "@storybook/addon-links": "^7.6.17",
+    "@storybook/addon-storysource": "^7.6.17",
+    "@storybook/blocks": "^7.6.17",
+    "@storybook/react": "^7.6.17",
+    "@storybook/react-vite": "^7.6.17",
     "@storybook/testing-library": "^0.2.2",
-    "@types/node": "^20.11.17",
-    "@types/react": "^18.2.55",
+    "@types/node": "^20.11.22",
+    "@types/react": "^18.2.60",
     "@types/react-dom": "^18.2.19",
-    "@typescript-eslint/eslint-plugin": "^7.0.1",
-    "@typescript-eslint/parser": "^7.0.1",
+    "@typescript-eslint/eslint-plugin": "^7.1.0",
+    "@typescript-eslint/parser": "^7.1.0",
     "@vitejs/plugin-react": "^4.2.1",
-    "eslint": "^8.56.0",
+    "eslint": "^8.57.0",
     "eslint-plugin-mui-path-imports": "^0.0.15",
     "eslint-plugin-perfectionist": "^2.5.0",
     "prop-types": "^15.8.1",
@@ -99,11 +99,11 @@
     "rollup-plugin-dts": "^6.1.0",
     "rollup-plugin-peer-deps-external": "^2.2.4",
     "size-limit": "^11.0.2",
-    "storybook": "^7.6.15",
+    "storybook": "^7.6.17",
     "storybook-dark-mode": "^3.0.3",
     "tslib": "^2.6.2",
     "typescript": "^5.3.3",
-    "vite": "^5.1.1"
+    "vite": "^5.1.4"
   },
   "peerDependencies": {
     "@emotion/react": ">=11.11",
@@ -111,13 +111,13 @@
     "@mui/icons-material": ">=5.11",
     "@mui/material": ">=5.13",
     "@mui/x-date-pickers": ">=6.15.0",
-    "react": ">=18.0",
-    "react-dom": ">=18.0"
+    "react": ">=17.0",
+    "react-dom": ">=17.0"
   },
   "dependencies": {
     "@tanstack/match-sorter-utils": "8.11.8",
-    "@tanstack/react-table": "8.12.0",
-    "@tanstack/react-virtual": "3.0.4",
+    "@tanstack/react-table": "8.13.2",
+    "@tanstack/react-virtual": "3.1.3",
     "highlight-words": "1.2.2"
   }
 }

package/src/components/body/MRT_TableBodyCell.tsx

@@ -210,6 +210,12 @@ export const MRT_TableBodyCell = <TData extends MRT_RowData>({
     }
   };
 
+  const handleDragOver = (e: DragEvent) => {
+    if (columnDef.enableColumnOrdering !== false) {
+      e.preventDefault();
+    }
+  };
+
   const handleContextMenu = (e: MouseEvent<HTMLTableCellElement>) => {
     tableCellProps?.onContextMenu?.(e);
     if (isRightClickable) {
@@ -228,6 +234,7 @@ export const MRT_TableBodyCell = <TData extends MRT_RowData>({
       onContextMenu={handleContextMenu}
       onDoubleClick={handleDoubleClick}
       onDragEnter={handleDragEnter}
+      onDragOver={handleDragOver}
       sx={(theme) => ({
         '&:hover': {
           outline:

package/src/components/body/MRT_TableBodyRow.tsx

@@ -140,6 +140,10 @@ export const MRT_TableBodyRow = <TData extends MRT_RowData>({
     }
   };
 
+  const handleDragOver = (e: DragEvent) => {
+    e.preventDefault();
+  };
+
   const rowRef = useRef<HTMLTableRowElement | null>(null);
 
   const cellHighlightColor = isRowSelected
@@ -164,6 +168,7 @@ export const MRT_TableBodyRow = <TData extends MRT_RowData>({
         data-pinned={!!isRowPinned || undefined}
         data-selected={isRowSelected || undefined}
         onDragEnter={handleDragEnter}
+        onDragOver={handleDragOver}
         ref={(node: HTMLTableRowElement) => {
           if (node) {
             rowRef.current = node;

package/src/components/body/MRT_TableDetailPanel.tsx

@@ -34,7 +34,6 @@ export const MRT_TableDetailPanel = <TData extends MRT_RowData>({
     getState,
     getVisibleLeafColumns,
     options: {
-      enableRowVirtualization,
       layoutMode,
       mrtTheme: { baseBackgroundColor },
       muiDetailPanelProps,
@@ -93,14 +92,12 @@ export const MRT_TableDetailPanel = <TData extends MRT_RowData>({
           borderBottom: !row.getIsExpanded() ? 'none' : undefined,
           display: layoutMode?.startsWith('grid') ? 'flex' : undefined,
           py: !!DetailPanel && row.getIsExpanded() ? '1rem' : 0,
-          transition: !enableRowVirtualization
-            ? 'all 150ms ease-in-out'
-            : undefined,
+          transition: !virtualRow ? 'all 150ms ease-in-out' : undefined,
           width: `100%`,
           ...(parseFromValuesOrFunc(tableCellProps?.sx, theme) as any),
         })}
       >
-        {enableRowVirtualization ? (
+        {virtualRow ? (
           row.getIsExpanded() && DetailPanel
         ) : (
           <Collapse in={row.getIsExpanded()} mountOnEnter unmountOnExit>

package/src/components/head/MRT_TableHead.tsx

@@ -20,8 +20,6 @@ export const MRT_TableHead = <TData extends MRT_RowData>({
   ...rest
 }: MRT_TableHeadProps<TData>) => {
   const {
-    getHeaderGroups,
-    getSelectedRowModel,
     getState,
     options: {
       enableStickyHeader,
@@ -60,7 +58,7 @@ export const MRT_TableHead = <TData extends MRT_RowData>({
       })}
     >
       {positionToolbarAlertBanner === 'head-overlay' &&
-      (showAlertBanner || getSelectedRowModel().rows.length > 0) ? (
+      (showAlertBanner || table.getSelectedRowModel().rows.length > 0) ? (
         <tr
           style={{
             display: layoutMode?.startsWith('grid') ? 'grid' : undefined,
@@ -77,14 +75,16 @@ export const MRT_TableHead = <TData extends MRT_RowData>({
           </th>
         </tr>
       ) : (
-        getHeaderGroups().map((headerGroup) => (
-          <MRT_TableHeadRow
-            columnVirtualizer={columnVirtualizer}
-            headerGroup={headerGroup as any}
-            key={headerGroup.id}
-            table={table}
-          />
-        ))
+        table
+          .getHeaderGroups()
+          .map((headerGroup) => (
+            <MRT_TableHeadRow
+              columnVirtualizer={columnVirtualizer}
+              headerGroup={headerGroup as any}
+              key={headerGroup.id}
+              table={table}
+            />
+          ))
       )}
     </TableHead>
   );

package/src/components/head/MRT_TableHeadCell.tsx

@@ -141,6 +141,12 @@ export const MRT_TableHeadCell = <TData extends MRT_RowData>({
     }
   };
 
+  const handleDragOver = (e: DragEvent) => {
+    if (columnDef.enableColumnOrdering !== false) {
+      e.preventDefault();
+    }
+  };
+
   const HeaderElement =
     parseFromValuesOrFunc(columnDef.Header, {
       column,
@@ -161,6 +167,7 @@ export const MRT_TableHeadCell = <TData extends MRT_RowData>({
       data-index={staticColumnIndex}
       data-pinned={!!isColumnPinned || undefined}
       onDragEnter={handleDragEnter}
+      onDragOver={handleDragOver}
       ref={(node: HTMLTableCellElement) => {
         if (node) {
           tableHeadCellRefs.current[column.id] = node;

package/src/components/head/MRT_TableHeadCellFilterContainer.tsx

@@ -4,6 +4,7 @@ import {
   type MRT_RowData,
   type MRT_TableInstance,
 } from '../../types';
+import { getColumnFilterInfo } from '../../utils/column.utils';
 import { MRT_FilterCheckbox } from '../inputs/MRT_FilterCheckbox';
 import { MRT_FilterRangeFields } from '../inputs/MRT_FilterRangeFields';
 import { MRT_FilterRangeSlider } from '../inputs/MRT_FilterRangeSlider';
@@ -28,6 +29,7 @@ export const MRT_TableHeadCellFilterContainer = <TData extends MRT_RowData>({
   const { showColumnFilters } = getState();
   const { column } = header;
   const { columnDef } = column;
+  const { isRangeFilter } = getColumnFilterInfo({ header, table });
 
   return (
     <Collapse
@@ -40,10 +42,7 @@ export const MRT_TableHeadCellFilterContainer = <TData extends MRT_RowData>({
         <MRT_FilterCheckbox column={column} table={table} />
       ) : columnDef.filterVariant === 'range-slider' ? (
         <MRT_FilterRangeSlider header={header} table={table} />
-      ) : columnDef.filterVariant?.includes('range') ||
-        ['between', 'betweenInclusive', 'inNumberRange'].includes(
-          columnDef._filterFn,
-        ) ? (
+      ) : isRangeFilter ? (
         <MRT_FilterRangeFields header={header} table={table} />
       ) : (
         <MRT_FilterTextField header={header} table={table} />

package/src/components/head/MRT_TableHeadCellFilterLabel.tsx

@@ -10,7 +10,11 @@ import {
   type MRT_RowData,
   type MRT_TableInstance,
 } from '../../types';
-import { parseFromValuesOrFunc } from '../../utils/utils';
+import {
+  getColumnFilterInfo,
+  useDropdownOptions,
+} from '../../utils/column.utils';
+import { getValueAndLabel, parseFromValuesOrFunc } from '../../utils/utils';
 
 export interface MRT_TableHeadCellFilterLabelProps<TData extends MRT_RowData>
   extends IconButtonProps {
@@ -35,20 +39,32 @@ export const MRT_TableHeadCellFilterLabel = <TData extends MRT_RowData = {}>({
   const { column } = header;
   const { columnDef } = column;
 
-  const filterValue = column.getFilterValue();
+  const filterValue = column.getFilterValue() as [string, string] | string;
 
   const [anchorEl, setAnchorEl] = useState<HTMLButtonElement | null>(null);
 
+  const {
+    currentFilterOption,
+    isMultiSelectFilter,
+    isRangeFilter,
+    isSelectFilter,
+  } = getColumnFilterInfo({ header, table });
+
+  const dropdownOptions = useDropdownOptions({ header, table });
+
+  const getSelectLabel = (index?: number) =>
+    getValueAndLabel(
+      dropdownOptions?.find(
+        (option) =>
+          getValueAndLabel(option).value ===
+          (index !== undefined ? filterValue[index] : filterValue),
+      ),
+    ).label;
+
   const isFilterActive =
     (Array.isArray(filterValue) && filterValue.some(Boolean)) ||
     (!!filterValue && !Array.isArray(filterValue));
 
-  const isRangeFilter =
-    columnDef.filterVariant?.includes('range') ||
-    ['between', 'betweenInclusive', 'inNumberRange'].includes(
-      columnDef._filterFn,
-    );
-  const currentFilterOption = columnDef._filterFn;
   const filterTooltip =
     columnFilterDisplayMode === 'popover' && !isFilterActive
       ? localization.filterByColumn?.replace(
@@ -73,10 +89,16 @@ export const MRT_TableHeadCellFilterLabel = <TData extends MRT_RowData = {}>({
             '{filterValue}',
             `"${
               Array.isArray(filterValue)
-                ? (filterValue as [string, string]).join(
-                    `" ${isRangeFilter ? localization.and : localization.or} "`,
-                  )
-                : (filterValue as string)
+                ? (filterValue as [string, string])
+                    .map((value, index) =>
+                      isMultiSelectFilter ? getSelectLabel(index) : value,
+                    )
+                    .join(
+                      `" ${isRangeFilter ? localization.and : localization.or} "`,
+                    )
+                : isSelectFilter
+                  ? getSelectLabel()
+                  : (filterValue as string)
             }"`,
           )
           .replace('" "', '');
@@ -126,31 +148,33 @@ export const MRT_TableHeadCellFilterLabel = <TData extends MRT_RowData = {}>({
           </Tooltip>
         </Box>
       </Grow>
-      <Popover
-        anchorEl={anchorEl}
-        anchorOrigin={{
-          horizontal: 'center',
-          vertical: 'top',
-        }}
-        disableScrollLock
-        onClick={(event) => event.stopPropagation()}
-        onClose={(event) => {
-          //@ts-ignore
-          event.stopPropagation();
-          setAnchorEl(null);
-        }}
-        onKeyDown={(event) => event.key === 'Enter' && setAnchorEl(null)}
-        open={!!anchorEl}
-        slotProps={{ paper: { sx: { overflow: 'visible' } } }}
-        transformOrigin={{
-          horizontal: 'center',
-          vertical: 'bottom',
-        }}
-      >
-        <Box sx={{ p: '1rem' }}>
-          <MRT_TableHeadCellFilterContainer header={header} table={table} />
-        </Box>
-      </Popover>
+      {columnFilterDisplayMode === 'popover' && (
+        <Popover
+          anchorEl={anchorEl}
+          anchorOrigin={{
+            horizontal: 'center',
+            vertical: 'top',
+          }}
+          disableScrollLock
+          onClick={(event) => event.stopPropagation()}
+          onClose={(event) => {
+            //@ts-ignore
+            event.stopPropagation();
+            setAnchorEl(null);
+          }}
+          onKeyDown={(event) => event.key === 'Enter' && setAnchorEl(null)}
+          open={!!anchorEl}
+          slotProps={{ paper: { sx: { overflow: 'visible' } } }}
+          transformOrigin={{
+            horizontal: 'center',
+            vertical: 'bottom',
+          }}
+        >
+          <Box sx={{ p: '1rem' }}>
+            <MRT_TableHeadCellFilterContainer header={header} table={table} />
+          </Box>
+        </Popover>
+      )}
     </>
   );
 };

package/src/components/inputs/MRT_FilterRangeFields.tsx

@@ -28,8 +28,14 @@ export const MRT_FilterRangeFields = <TData extends MRT_RowData>({
         ...(parseFromValuesOrFunc(rest?.sx, theme) as any),
       })}
     >
-      <MRT_FilterTextField header={header} rangeFilterIndex={0} table={table} />
-      <MRT_FilterTextField header={header} rangeFilterIndex={1} table={table} />
+      {[0, 1].map((rangeFilterIndex) => (
+        <MRT_FilterTextField
+          header={header}
+          key={rangeFilterIndex}
+          rangeFilterIndex={rangeFilterIndex}
+          table={table}
+        />
+      ))}
     </Box>
   );
 };