material-react-table 2.11.3 → 2.12.0

package/README.md

@@ -16,9 +16,6 @@ View [Documentation](https://www.material-react-table.com/)
 </a>
 <a href="https://github.com/KevinVandy/material-react-table/blob/v2/LICENSE" target="_blank">
   <img alt="" src="https://badgen.net/github/license/KevinVandy/material-react-table?color=blue" />
-</a>
-<a href="http://makeapullrequest.com" target="_blank">
-  <img alt="" src="https://img.shields.io/badge/PRs-welcome-brightgreen.svg?style=flat-square" />
 </a>
  <a
   href="https://github.com/sponsors/kevinvandy"
@@ -27,14 +24,21 @@ View [Documentation](https://www.material-react-table.com/)
 >
   <img alt="" src="https://img.shields.io/badge/sponsor-violet" />
 </a>
+<a
+  href="https://discord.gg/5wqyRx6fnm"
+  target="_blank"
+  rel="noopener"
+>
+  <img alt="" src="https://dcbadge.vercel.app/api/server/5wqyRx6fnm?style=flat">
+</a>
 
 ## About
 
 ### _Quickly Create React Data Tables with Material Design_
 
-### __Built with [Material UI <sup>V5</sup>](https://mui.com) and [TanStack Table <sup>V8</sup>](https://tanstack.com/table/v8)__
+### **Built with [Material UI <sup>V5</sup>](https://mui.com) and [TanStack Table <sup>V8</sup>](https://tanstack.com/table/v8)**
 
-<img src="https://material-react-table.com/banner.png" alt="MRT" height="50"/>
+<img src="https://material-react-table.com/banner.png" alt="MRT" height="50" />
 
 > Want to use Mantine instead of Material UI? Check out [Mantine React Table](https://www.mantine-react-table.com)
 
@@ -46,19 +50,19 @@ View [Documentation](https://www.material-react-table.com/)
 
 ### Quick Examples
 
- - [Basic Table](https://www.material-react-table.com/docs/examples/basic/) (See Default Features)
- - [Minimal Table](https://www.material-react-table.com/docs/examples/minimal/) (Turn off Features like Pagination, Sorting, Filtering, and Toolbars)
- - [Advanced Table](https://www.material-react-table.com/docs/examples/advanced/) (See some of the Advanced Features)
- - [Custom Headless Table](https://www.material-react-table.com/docs/examples/custom-headless/) (Build your own table markup)
- - [Dragging / Ordering Examples](https://www.material-react-table.com/docs/examples/column-ordering/) (Drag and Drop)
- - [Editing (CRUD) Examples](https://www.material-react-table.com/docs/examples/editing-crud/) (Create, Edit, and Delete Rows)
- - [Expanding / Grouping Examples](https://www.material-react-table.com/docs/examples/aggregation-and-grouping/) (Sum, Average, Count, etc.)
- - [Filtering Examples](https://www.material-react-table.com/docs/examples/filter-variants/) (Faceted Values, Switching Filters, etc.)
- - [Sticky Pinning Examples](https://www.material-react-table.com/docs/examples/sticky-header/) (Sticky Headers, Sticky Columns, Sticky Rows, etc.)
- - [Remote Data Fetching Examples](https://www.material-react-table.com/docs/examples/react-query/) (Server-side Pagination, Sorting, and Filtering)
- - [Virtualized Examples](https://www.material-react-table.com/docs/examples/virtualized/) (10,000 rows at once!)
- - [Infinite Scrolling](https://www.material-react-table.com/docs/examples/infinite-scrolling/) (Fetch data as you scroll)
- - [Localization (i18n)](https://www.material-react-table.com/docs/guides/localization#built-in-locale-examples) (Over a dozen languages built-in)
+- [Basic Table](https://www.material-react-table.com/docs/examples/basic/) (See Default Features)
+- [Minimal Table](https://www.material-react-table.com/docs/examples/minimal/) (Turn off Features like Pagination, Sorting, Filtering, and Toolbars)
+- [Advanced Table](https://www.material-react-table.com/docs/examples/advanced/) (See some of the Advanced Features)
+- [Custom Headless Table](https://www.material-react-table.com/docs/examples/custom-headless/) (Build your own table markup)
+- [Dragging / Ordering Examples](https://www.material-react-table.com/docs/examples/column-ordering/) (Drag and Drop)
+- [Editing (CRUD) Examples](https://www.material-react-table.com/docs/examples/editing-crud/) (Create, Edit, and Delete Rows)
+- [Expanding / Grouping Examples](https://www.material-react-table.com/docs/examples/aggregation-and-grouping/) (Sum, Average, Count, etc.)
+- [Filtering Examples](https://www.material-react-table.com/docs/examples/filter-variants/) (Faceted Values, Switching Filters, etc.)
+- [Sticky Pinning Examples](https://www.material-react-table.com/docs/examples/sticky-header/) (Sticky Headers, Sticky Columns, Sticky Rows, etc.)
+- [Remote Data Fetching Examples](https://www.material-react-table.com/docs/examples/react-query/) (Server-side Pagination, Sorting, and Filtering)
+- [Virtualized Examples](https://www.material-react-table.com/docs/examples/virtualized/) (10,000 rows at once!)
+- [Infinite Scrolling](https://www.material-react-table.com/docs/examples/infinite-scrolling/) (Fetch data as you scroll)
+- [Localization (i18n)](https://www.material-react-table.com/docs/guides/localization#built-in-locale-examples) (Over a dozen languages built-in)
 
 View additional [storybook examples](https://www.material-react-table.dev/)
 
@@ -68,7 +72,7 @@ _All features can easily be enabled/disabled_
 
 _**Fully Fleshed out [Docs](https://www.material-react-table.com/docs/guides#guides) are available for all features**_
 
-- [x] 30-54kb gzipped - [Bundlephobia](https://bundlephobia.com/package/material-react-table)
+- [x] 30-56kb gzipped - [Bundlephobia](https://bundlephobia.com/package/material-react-table)
 - [x] Advanced TypeScript Generics Support (TypeScript Optional)
 - [x] Aggregation and Grouping (Sum, Average, Count, etc.)
 - [x] Cell Actions (Right-click Context Menu)
@@ -132,7 +136,10 @@ npm install material-react-table
 
 ```jsx
 import { useMemo, useState, useEffect } from 'react';
-import { MaterialReactTable, useMaterialReactTable } from 'material-react-table';
+import {
+  MaterialReactTable,
+  useMaterialReactTable,
+} from 'material-react-table';
 
 //data must be stable reference (useState, useMemo, useQuery, defined outside of component, etc.)
 const data = [
@@ -144,7 +151,7 @@ const data = [
     name: 'Sara',
     age: 25,
   },
-]
+];
 
 export default function App() {
   const columns = useMemo(
@@ -185,7 +192,7 @@ export default function App() {
   const someEventHandler = () => {
     //read the table state during an event from the table instance
     console.log(table.getState().sorting);
-  }
+  };
 
   return (
     <MaterialReactTable table={table} /> //other more lightweight MRT sub components also available

package/dist/index.d.ts

@@ -1181,6 +1181,24 @@ declare const prepareColumns: <TData extends MRT_RowData>({ columnDefs, tableOpt
 }) => MRT_DefinedColumnDef<TData>[];
 declare const reorderColumn: <TData extends MRT_RowData>(draggedColumn: MRT_Column<TData>, targetColumn: MRT_Column<TData>, columnOrder: _tanstack_react_table.ColumnOrderState) => _tanstack_react_table.ColumnOrderState;
 declare const getDefaultColumnFilterFn: <TData extends MRT_RowData>(columnDef: MRT_ColumnDef<TData>) => MRT_FilterOption;
+declare const getColumnFilterInfo: <TData extends MRT_RowData>({ header, table, }: {
+    header: MRT_Header<TData>;
+    table: MRT_TableInstance<TData>;
+}) => {
+    readonly allowedColumnFilterOptions: LiteralUnion<string & MRT_FilterOption, string>[] | null | undefined;
+    readonly currentFilterOption: MRT_FilterOption;
+    readonly facetedUniqueValues: Map<any, number>;
+    readonly isAutocompleteFilter: boolean;
+    readonly isDateFilter: boolean;
+    readonly isMultiSelectFilter: boolean;
+    readonly isRangeFilter: boolean;
+    readonly isSelectFilter: boolean;
+    readonly isTextboxFilter: boolean;
+};
+declare const useDropdownOptions: <TData extends MRT_RowData>({ header, table, }: {
+    header: MRT_Header<TData>;
+    table: MRT_TableInstance<TData>;
+}) => DropdownOption[] | undefined;
 
 declare function defaultDisplayColumnProps<TData extends MRT_RowData>({ header, id, size, tableOptions, }: {
     header?: keyof MRT_Localization;
@@ -1834,4 +1852,4 @@ interface MRT_TopToolbarProps<TData extends MRT_RowData> {
 }
 declare const MRT_TopToolbar: <TData extends MRT_RowData>({ table, }: MRT_TopToolbarProps<TData>) => react_jsx_runtime.JSX.Element;
 
-export { type DropdownOption, type LiteralUnion, MRT_ActionMenuItem, type MRT_ActionMenuItemProps, type MRT_AggregationFn, MRT_AggregationFns, type MRT_AggregationOption, MRT_BottomToolbar, type MRT_BottomToolbarProps, type MRT_Cell, type MRT_Column, MRT_ColumnActionMenu, type MRT_ColumnActionMenuProps, type MRT_ColumnDef, type MRT_ColumnFilterFnsState, type MRT_ColumnFiltersState, type MRT_ColumnHelper, type MRT_ColumnOrderState, MRT_ColumnPinningButtons, type MRT_ColumnPinningButtonsProps, type MRT_ColumnPinningState, type MRT_ColumnSizingInfoState, type MRT_ColumnSizingState, type MRT_ColumnVirtualizer, MRT_CopyButton, type MRT_CopyButtonProps, MRT_DefaultColumn, MRT_DefaultDisplayColumn, type MRT_DefinedColumnDef, type MRT_DefinedTableOptions, type MRT_DensityState, type MRT_DisplayColumnDef, type MRT_DisplayColumnIds, MRT_EditActionButtons, type MRT_EditActionButtonsProps, MRT_EditCellTextField, type MRT_EditCellTextFieldProps, MRT_EditRowModal, type MRT_EditRowModalProps, MRT_ExpandAllButton, type MRT_ExpandAllButtonProps, MRT_ExpandButton, type MRT_ExpandButtonProps, type MRT_ExpandedState, MRT_FilterCheckbox, type MRT_FilterCheckboxProps, type MRT_FilterFn, MRT_FilterFns, type MRT_FilterOption, MRT_FilterOptionMenu, type MRT_FilterOptionMenuProps, MRT_FilterRangeFields, type MRT_FilterRangeFieldsProps, MRT_FilterRangeSlider, type MRT_FilterRangeSliderProps, MRT_FilterTextField, type MRT_FilterTextFieldProps, MRT_GlobalFilterTextField, type MRT_GlobalFilterTextFieldProps, MRT_GrabHandleButton, type MRT_GrabHandleButtonProps, type MRT_GroupColumnDef, type MRT_GroupingState, type MRT_Header, type MRT_HeaderGroup, type MRT_Icons, type MRT_InternalFilterOption, MRT_LinearProgressBar, type MRT_LinearProgressBarProps, type MRT_Localization, type MRT_PaginationState, type MRT_Row, MRT_RowActionMenu, type MRT_RowActionMenuProps, type MRT_RowData, type MRT_RowModel, MRT_RowPinButton, type MRT_RowPinButtonProps, type MRT_RowSelectionState, type MRT_RowVirtualizer, MRT_SelectCheckbox, type MRT_SelectCheckboxProps, MRT_ShowHideColumnsButton, type MRT_ShowHideColumnsButtonProps, MRT_ShowHideColumnsMenu, MRT_ShowHideColumnsMenuItems, type MRT_ShowHideColumnsMenuItemsProps, type MRT_ShowHideColumnsMenuProps, type MRT_SortingFn, MRT_SortingFns, type MRT_SortingOption, type MRT_SortingState, type MRT_StatefulTableOptions, MRT_Table, MRT_TableBody, MRT_TableBodyCell, type MRT_TableBodyCellProps, MRT_TableBodyCellValue, type MRT_TableBodyCellValueProps, type MRT_TableBodyProps, MRT_TableBodyRow, MRT_TableBodyRowGrabHandle, type MRT_TableBodyRowGrabHandleProps, MRT_TableBodyRowPinButton, type MRT_TableBodyRowPinButtonProps, type MRT_TableBodyRowProps, MRT_TableContainer, type MRT_TableContainerProps, MRT_TableDetailPanel, type MRT_TableDetailPanelProps, MRT_TableFooter, MRT_TableFooterCell, type MRT_TableFooterCellProps, type MRT_TableFooterProps, MRT_TableFooterRow, type MRT_TableFooterRowProps, MRT_TableHead, MRT_TableHeadCell, MRT_TableHeadCellColumnActionsButton, type MRT_TableHeadCellColumnActionsButtonProps, MRT_TableHeadCellFilterContainer, type MRT_TableHeadCellFilterContainerProps, MRT_TableHeadCellFilterLabel, type MRT_TableHeadCellFilterLabelProps, MRT_TableHeadCellGrabHandle, type MRT_TableHeadCellGrabHandleProps, type MRT_TableHeadCellProps, MRT_TableHeadCellResizeHandle, type MRT_TableHeadCellResizeHandleProps, MRT_TableHeadCellSortLabel, type MRT_TableHeadCellSortLabelProps, type MRT_TableHeadProps, MRT_TableHeadRow, type MRT_TableHeadRowProps, type MRT_TableInstance, MRT_TableLoadingOverlay, type MRT_TableLoadingOverlayProps, type MRT_TableOptions, MRT_TablePagination, type MRT_TablePaginationProps, MRT_TablePaper, type MRT_TablePaperProps, type MRT_TableProps, type MRT_TableState, type MRT_Theme, MRT_ToggleDensePaddingButton, type MRT_ToggleDensePaddingButtonProps, MRT_ToggleFiltersButton, type MRT_ToggleFiltersButtonProps, MRT_ToggleFullScreenButton, type MRT_ToggleFullScreenButtonProps, MRT_ToggleGlobalFilterButton, type MRT_ToggleGlobalFilterButtonProps, MRT_ToggleRowActionMenuButton, type MRT_ToggleRowActionMenuButtonProps, MRT_ToolbarAlertBanner, type MRT_ToolbarAlertBannerProps, MRT_ToolbarDropZone, type MRT_ToolbarDropZoneProps, MRT_ToolbarInternalButtons, type MRT_ToolbarInternalButtonsProps, MRT_TopToolbar, type MRT_TopToolbarProps, type MRT_Updater, type MRT_VirtualItem, type MRT_Virtualizer, type MRT_VirtualizerOptions, type MRT_VisibilityState, MaterialReactTable, type MaterialReactTableProps, Memo_MRT_TableBody, Memo_MRT_TableBodyCell, Memo_MRT_TableBodyRow, type Prettify, type Xor, createMRTColumnHelper, createRow, defaultDisplayColumnProps, flexRender, getAllLeafColumnDefs, getCanRankRows, getColumnId, getDefaultColumnFilterFn, getDefaultColumnOrderIds, getIsRankingRows, getIsRowSelected, getLeadingDisplayColumnIds, getMRT_RowSelectionHandler, getMRT_Rows, getMRT_SelectAllHandler, getTrailingDisplayColumnIds, isCellEditable, mrtFilterOptions, openEditingCell, prepareColumns, rankGlobalFuzzy, reorderColumn, showRowActionsColumn, showRowDragColumn, showRowExpandColumn, showRowNumbersColumn, showRowPinningColumn, showRowSelectionColumn, showRowSpacerColumn, useMRT_ColumnVirtualizer, useMRT_Effects, useMRT_RowVirtualizer, useMRT_Rows, useMRT_TableInstance, useMRT_TableOptions, useMaterialReactTable };
+export { type DropdownOption, type LiteralUnion, MRT_ActionMenuItem, type MRT_ActionMenuItemProps, type MRT_AggregationFn, MRT_AggregationFns, type MRT_AggregationOption, MRT_BottomToolbar, type MRT_BottomToolbarProps, type MRT_Cell, type MRT_Column, MRT_ColumnActionMenu, type MRT_ColumnActionMenuProps, type MRT_ColumnDef, type MRT_ColumnFilterFnsState, type MRT_ColumnFiltersState, type MRT_ColumnHelper, type MRT_ColumnOrderState, MRT_ColumnPinningButtons, type MRT_ColumnPinningButtonsProps, type MRT_ColumnPinningState, type MRT_ColumnSizingInfoState, type MRT_ColumnSizingState, type MRT_ColumnVirtualizer, MRT_CopyButton, type MRT_CopyButtonProps, MRT_DefaultColumn, MRT_DefaultDisplayColumn, type MRT_DefinedColumnDef, type MRT_DefinedTableOptions, type MRT_DensityState, type MRT_DisplayColumnDef, type MRT_DisplayColumnIds, MRT_EditActionButtons, type MRT_EditActionButtonsProps, MRT_EditCellTextField, type MRT_EditCellTextFieldProps, MRT_EditRowModal, type MRT_EditRowModalProps, MRT_ExpandAllButton, type MRT_ExpandAllButtonProps, MRT_ExpandButton, type MRT_ExpandButtonProps, type MRT_ExpandedState, MRT_FilterCheckbox, type MRT_FilterCheckboxProps, type MRT_FilterFn, MRT_FilterFns, type MRT_FilterOption, MRT_FilterOptionMenu, type MRT_FilterOptionMenuProps, MRT_FilterRangeFields, type MRT_FilterRangeFieldsProps, MRT_FilterRangeSlider, type MRT_FilterRangeSliderProps, MRT_FilterTextField, type MRT_FilterTextFieldProps, MRT_GlobalFilterTextField, type MRT_GlobalFilterTextFieldProps, MRT_GrabHandleButton, type MRT_GrabHandleButtonProps, type MRT_GroupColumnDef, type MRT_GroupingState, type MRT_Header, type MRT_HeaderGroup, type MRT_Icons, type MRT_InternalFilterOption, MRT_LinearProgressBar, type MRT_LinearProgressBarProps, type MRT_Localization, type MRT_PaginationState, type MRT_Row, MRT_RowActionMenu, type MRT_RowActionMenuProps, type MRT_RowData, type MRT_RowModel, MRT_RowPinButton, type MRT_RowPinButtonProps, type MRT_RowSelectionState, type MRT_RowVirtualizer, MRT_SelectCheckbox, type MRT_SelectCheckboxProps, MRT_ShowHideColumnsButton, type MRT_ShowHideColumnsButtonProps, MRT_ShowHideColumnsMenu, MRT_ShowHideColumnsMenuItems, type MRT_ShowHideColumnsMenuItemsProps, type MRT_ShowHideColumnsMenuProps, type MRT_SortingFn, MRT_SortingFns, type MRT_SortingOption, type MRT_SortingState, type MRT_StatefulTableOptions, MRT_Table, MRT_TableBody, MRT_TableBodyCell, type MRT_TableBodyCellProps, MRT_TableBodyCellValue, type MRT_TableBodyCellValueProps, type MRT_TableBodyProps, MRT_TableBodyRow, MRT_TableBodyRowGrabHandle, type MRT_TableBodyRowGrabHandleProps, MRT_TableBodyRowPinButton, type MRT_TableBodyRowPinButtonProps, type MRT_TableBodyRowProps, MRT_TableContainer, type MRT_TableContainerProps, MRT_TableDetailPanel, type MRT_TableDetailPanelProps, MRT_TableFooter, MRT_TableFooterCell, type MRT_TableFooterCellProps, type MRT_TableFooterProps, MRT_TableFooterRow, type MRT_TableFooterRowProps, MRT_TableHead, MRT_TableHeadCell, MRT_TableHeadCellColumnActionsButton, type MRT_TableHeadCellColumnActionsButtonProps, MRT_TableHeadCellFilterContainer, type MRT_TableHeadCellFilterContainerProps, MRT_TableHeadCellFilterLabel, type MRT_TableHeadCellFilterLabelProps, MRT_TableHeadCellGrabHandle, type MRT_TableHeadCellGrabHandleProps, type MRT_TableHeadCellProps, MRT_TableHeadCellResizeHandle, type MRT_TableHeadCellResizeHandleProps, MRT_TableHeadCellSortLabel, type MRT_TableHeadCellSortLabelProps, type MRT_TableHeadProps, MRT_TableHeadRow, type MRT_TableHeadRowProps, type MRT_TableInstance, MRT_TableLoadingOverlay, type MRT_TableLoadingOverlayProps, type MRT_TableOptions, MRT_TablePagination, type MRT_TablePaginationProps, MRT_TablePaper, type MRT_TablePaperProps, type MRT_TableProps, type MRT_TableState, type MRT_Theme, MRT_ToggleDensePaddingButton, type MRT_ToggleDensePaddingButtonProps, MRT_ToggleFiltersButton, type MRT_ToggleFiltersButtonProps, MRT_ToggleFullScreenButton, type MRT_ToggleFullScreenButtonProps, MRT_ToggleGlobalFilterButton, type MRT_ToggleGlobalFilterButtonProps, MRT_ToggleRowActionMenuButton, type MRT_ToggleRowActionMenuButtonProps, MRT_ToolbarAlertBanner, type MRT_ToolbarAlertBannerProps, MRT_ToolbarDropZone, type MRT_ToolbarDropZoneProps, MRT_ToolbarInternalButtons, type MRT_ToolbarInternalButtonsProps, MRT_TopToolbar, type MRT_TopToolbarProps, type MRT_Updater, type MRT_VirtualItem, type MRT_Virtualizer, type MRT_VirtualizerOptions, type MRT_VisibilityState, MaterialReactTable, type MaterialReactTableProps, Memo_MRT_TableBody, Memo_MRT_TableBodyCell, Memo_MRT_TableBodyRow, type Prettify, type Xor, createMRTColumnHelper, createRow, defaultDisplayColumnProps, flexRender, getAllLeafColumnDefs, getCanRankRows, getColumnFilterInfo, getColumnId, getDefaultColumnFilterFn, getDefaultColumnOrderIds, getIsRankingRows, getIsRowSelected, getLeadingDisplayColumnIds, getMRT_RowSelectionHandler, getMRT_Rows, getMRT_SelectAllHandler, getTrailingDisplayColumnIds, isCellEditable, mrtFilterOptions, openEditingCell, prepareColumns, rankGlobalFuzzy, reorderColumn, showRowActionsColumn, showRowDragColumn, showRowExpandColumn, showRowNumbersColumn, showRowPinningColumn, showRowSelectionColumn, showRowSpacerColumn, useDropdownOptions, useMRT_ColumnVirtualizer, useMRT_Effects, useMRT_RowVirtualizer, useMRT_Rows, useMRT_TableInstance, useMRT_TableOptions, useMaterialReactTable };

package/dist/index.esm.js

@@ -1,6 +1,6 @@
 import { flexRender as flexRender$1, createRow as createRow$1, sortingFns, aggregationFns, filterFns, getCoreRowModel, getExpandedRowModel, getFacetedMinMaxValues, getFacetedRowModel, getFacetedUniqueValues, getFilteredRowModel, getGroupedRowModel, getPaginationRowModel, getSortedRowModel, useReactTable } from '@tanstack/react-table';
+import { useMemo, useState, useReducer, useRef, useEffect, useCallback, memo, Fragment as Fragment$1, useLayoutEffect } from 'react';
 import { compareItems, rankItem, rankings } from '@tanstack/match-sorter-utils';
-import { useState, useMemo, useReducer, useRef, useEffect, useCallback, memo, Fragment as Fragment$1, useLayoutEffect } from 'react';
 import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
 import IconButton from '@mui/material/IconButton';
 import Tooltip from '@mui/material/Tooltip';
@@ -169,6 +169,54 @@ const getDefaultColumnFilterFn = (columnDef) => {
         return 'equals';
     return 'fuzzy';
 };
+const getColumnFilterInfo = ({ header, table, }) => {
+    var _a;
+    const { options: { columnFilterModeOptions }, } = table;
+    const { column } = header;
+    const { columnDef } = column;
+    const { filterVariant } = columnDef;
+    const isDateFilter = !!((filterVariant === null || filterVariant === void 0 ? void 0 : filterVariant.startsWith('date')) || (filterVariant === null || filterVariant === void 0 ? void 0 : filterVariant.startsWith('time')));
+    const isAutocompleteFilter = filterVariant === 'autocomplete';
+    const isRangeFilter = (filterVariant === null || filterVariant === void 0 ? void 0 : filterVariant.includes('range')) ||
+        ['between', 'betweenInclusive', 'inNumberRange'].includes(columnDef._filterFn);
+    const isSelectFilter = filterVariant === 'select';
+    const isMultiSelectFilter = filterVariant === 'multi-select';
+    const isTextboxFilter = ['autocomplete', 'text'].includes(filterVariant) ||
+        (!isSelectFilter && !isMultiSelectFilter);
+    const currentFilterOption = columnDef._filterFn;
+    const allowedColumnFilterOptions = (_a = columnDef === null || columnDef === void 0 ? void 0 : columnDef.columnFilterModeOptions) !== null && _a !== void 0 ? _a : columnFilterModeOptions;
+    const facetedUniqueValues = column.getFacetedUniqueValues();
+    return {
+        allowedColumnFilterOptions,
+        currentFilterOption,
+        facetedUniqueValues,
+        isAutocompleteFilter,
+        isDateFilter,
+        isMultiSelectFilter,
+        isRangeFilter,
+        isSelectFilter,
+        isTextboxFilter,
+    };
+};
+const useDropdownOptions = ({ header, table, }) => {
+    const { column } = header;
+    const { columnDef } = column;
+    const { facetedUniqueValues, isAutocompleteFilter, isMultiSelectFilter, isSelectFilter, } = getColumnFilterInfo({ header, table });
+    return useMemo(() => {
+        var _a;
+        return (_a = columnDef.filterSelectOptions) !== null && _a !== void 0 ? _a : ((isSelectFilter || isMultiSelectFilter || isAutocompleteFilter) &&
+            facetedUniqueValues
+            ? Array.from(facetedUniqueValues.keys())
+                .filter((value) => value !== null && value !== undefined)
+                .sort((a, b) => a.localeCompare(b))
+            : undefined);
+    }, [
+        columnDef.filterSelectOptions,
+        facetedUniqueValues,
+        isMultiSelectFilter,
+        isSelectFilter,
+    ]);
+};
 
 const flexRender = flexRender$1;
 function createMRTColumnHelper() {
@@ -2008,6 +2056,11 @@ const MRT_TableBodyCell = (_a) => {
             setHoveredColumn(columnDef.enableColumnOrdering !== false ? column : null);
         }
     };
+    const handleDragOver = (e) => {
+        if (columnDef.enableColumnOrdering !== false) {
+            e.preventDefault();
+        }
+    };
     const handleContextMenu = (e) => {
         var _a;
         (_a = tableCellProps === null || tableCellProps === void 0 ? void 0 : tableCellProps.onContextMenu) === null || _a === void 0 ? void 0 : _a.call(tableCellProps, e);
@@ -2017,7 +2070,7 @@ const MRT_TableBodyCell = (_a) => {
             table.refs.actionCellRef.current = e.currentTarget;
         }
     };
-    return (jsx(TableCell, Object.assign({ align: theme.direction === 'rtl' ? 'right' : 'left', "data-index": staticColumnIndex, "data-pinned": !!isColumnPinned || undefined }, tableCellProps, { onContextMenu: handleContextMenu, onDoubleClick: handleDoubleClick, onDragEnter: handleDragEnter, sx: (theme) => (Object.assign(Object.assign({ '&:hover': {
+    return (jsx(TableCell, Object.assign({ align: theme.direction === 'rtl' ? 'right' : 'left', "data-index": staticColumnIndex, "data-pinned": !!isColumnPinned || undefined }, tableCellProps, { onContextMenu: handleContextMenu, onDoubleClick: handleDoubleClick, onDragEnter: handleDragEnter, onDragOver: handleDragOver, sx: (theme) => (Object.assign(Object.assign({ '&:hover': {
                 outline: (actionCell === null || actionCell === void 0 ? void 0 : actionCell.id) === cell.id ||
                     (editDisplayMode === 'cell' && isEditable) ||
                     (editDisplayMode === 'table' && (isCreating || isEditing))
@@ -2062,7 +2115,7 @@ const Memo_MRT_TableBodyCell = memo(MRT_TableBodyCell, (prev, next) => next.cell
 
 const MRT_TableDetailPanel = (_a) => {
     var { parentRowRef, row, rowVirtualizer, staticRowIndex, table, virtualRow } = _a, rest = __rest(_a, ["parentRowRef", "row", "rowVirtualizer", "staticRowIndex", "table", "virtualRow"]);
-    const { getState, getVisibleLeafColumns, options: { enableRowVirtualization, layoutMode, mrtTheme: { baseBackgroundColor }, muiDetailPanelProps, muiTableBodyRowProps, renderDetailPanel, }, } = table;
+    const { getState, getVisibleLeafColumns, options: { layoutMode, mrtTheme: { baseBackgroundColor }, muiDetailPanelProps, muiTableBodyRowProps, renderDetailPanel, }, } = table;
     const { isLoading } = getState();
     const tableRowProps = parseFromValuesOrFunc(muiTableBodyRowProps, {
         isDetailPanel: true,
@@ -2087,9 +2140,7 @@ const MRT_TableDetailPanel = (_a) => {
                     : undefined, transform: virtualRow
                     ? `translateY(${virtualRow === null || virtualRow === void 0 ? void 0 : virtualRow.start}px)`
                     : undefined, width: '100%' }, parseFromValuesOrFunc(tableRowProps === null || tableRowProps === void 0 ? void 0 : tableRowProps.sx, theme)));
-        }, children: jsx(TableCell, Object.assign({ className: "Mui-TableBodyCell-DetailPanel", colSpan: getVisibleLeafColumns().length }, tableCellProps, { sx: (theme) => (Object.assign({ backgroundColor: virtualRow ? baseBackgroundColor : undefined, borderBottom: !row.getIsExpanded() ? 'none' : undefined, display: (layoutMode === null || layoutMode === void 0 ? void 0 : layoutMode.startsWith('grid')) ? 'flex' : undefined, py: !!DetailPanel && row.getIsExpanded() ? '1rem' : 0, transition: !enableRowVirtualization
-                    ? 'all 150ms ease-in-out'
-                    : undefined, width: `100%` }, parseFromValuesOrFunc(tableCellProps === null || tableCellProps === void 0 ? void 0 : tableCellProps.sx, theme))), children: enableRowVirtualization ? (row.getIsExpanded() && DetailPanel) : (jsx(Collapse, { in: row.getIsExpanded(), mountOnEnter: true, unmountOnExit: true, children: DetailPanel })) })) })));
+        }, children: jsx(TableCell, Object.assign({ className: "Mui-TableBodyCell-DetailPanel", colSpan: getVisibleLeafColumns().length }, tableCellProps, { sx: (theme) => (Object.assign({ backgroundColor: virtualRow ? baseBackgroundColor : undefined, borderBottom: !row.getIsExpanded() ? 'none' : undefined, display: (layoutMode === null || layoutMode === void 0 ? void 0 : layoutMode.startsWith('grid')) ? 'flex' : undefined, py: !!DetailPanel && row.getIsExpanded() ? '1rem' : 0, transition: !virtualRow ? 'all 150ms ease-in-out' : undefined, width: `100%` }, parseFromValuesOrFunc(tableCellProps === null || tableCellProps === void 0 ? void 0 : tableCellProps.sx, theme))), children: virtualRow ? (row.getIsExpanded() && DetailPanel) : (jsx(Collapse, { in: row.getIsExpanded(), mountOnEnter: true, unmountOnExit: true, children: DetailPanel })) })) })));
 };
 
 const MRT_TableBodyRow = (_a) => {
@@ -2135,6 +2186,9 @@ const MRT_TableBodyRow = (_a) => {
             setHoveredRow(row);
         }
     };
+    const handleDragOver = (e) => {
+        e.preventDefault();
+    };
     const rowRef = useRef(null);
     const cellHighlightColor = isRowSelected
         ? selectedRowBackgroundColor
@@ -2148,7 +2202,7 @@ const MRT_TableBodyRow = (_a) => {
                 ? `${lighten(baseBackgroundColor, 0.3)}`
                 : `${darken(baseBackgroundColor, 0.3)}`
         : undefined;
-    return (jsxs(Fragment, { children: [jsxs(TableRow, Object.assign({ "data-index": renderDetailPanel ? staticRowIndex * 2 : staticRowIndex, "data-pinned": !!isRowPinned || undefined, "data-selected": isRowSelected || undefined, onDragEnter: handleDragEnter, ref: (node) => {
+    return (jsxs(Fragment, { children: [jsxs(TableRow, Object.assign({ "data-index": renderDetailPanel ? staticRowIndex * 2 : staticRowIndex, "data-pinned": !!isRowPinned || undefined, "data-selected": isRowSelected || undefined, onDragEnter: handleDragEnter, onDragOver: handleDragOver, ref: (node) => {
                     if (node) {
                         rowRef.current = node;
                         rowVirtualizer === null || rowVirtualizer === void 0 ? void 0 : rowVirtualizer.measureElement(node);
@@ -2743,9 +2797,9 @@ const MRT_FilterCheckbox = (_a) => {
 };
 
 const MRT_FilterTextField = (_a) => {
-    var _b, _c, _d, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r, _s, _t, _u;
+    var _b, _c, _d, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r, _s, _t;
     var { header, rangeFilterIndex, table } = _a, rest = __rest(_a, ["header", "rangeFilterIndex", "table"]);
-    const { options: { columnFilterModeOptions, enableColumnFilterModes, icons: { CloseIcon, FilterListIcon }, localization, manualFiltering, muiFilterAutocompleteProps, muiFilterDatePickerProps, muiFilterDateTimePickerProps, muiFilterTextFieldProps, muiFilterTimePickerProps, }, refs: { filterInputRefs }, setColumnFilterFns, } = table;
+    const { options: { enableColumnFilterModes, icons: { CloseIcon, FilterListIcon }, localization, manualFiltering, muiFilterAutocompleteProps, muiFilterDatePickerProps, muiFilterDateTimePickerProps, muiFilterTextFieldProps, muiFilterTimePickerProps, }, refs: { filterInputRefs }, setColumnFilterFns, } = table;
     const { column } = header;
     const { columnDef } = column;
     const { filterVariant } = columnDef;
@@ -2769,14 +2823,8 @@ const MRT_FilterTextField = (_a) => {
         column,
         table,
     }));
-    const isDateFilter = (filterVariant === null || filterVariant === void 0 ? void 0 : filterVariant.startsWith('date')) || (filterVariant === null || filterVariant === void 0 ? void 0 : filterVariant.startsWith('time'));
-    const isAutocompleteFilter = filterVariant === 'autocomplete';
-    const isRangeFilter = (filterVariant === null || filterVariant === void 0 ? void 0 : filterVariant.includes('range')) || rangeFilterIndex !== undefined;
-    const isSelectFilter = filterVariant === 'select';
-    const isMultiSelectFilter = filterVariant === 'multi-select';
-    const isTextboxFilter = ['autocomplete', 'text'].includes(filterVariant) ||
-        (!isSelectFilter && !isMultiSelectFilter);
-    const currentFilterOption = columnDef._filterFn;
+    const { allowedColumnFilterOptions, currentFilterOption, facetedUniqueValues, isAutocompleteFilter, isDateFilter, isMultiSelectFilter, isRangeFilter, isSelectFilter, isTextboxFilter, } = getColumnFilterInfo({ header, table });
+    const dropdownOptions = useDropdownOptions({ header, table });
     const filterChipLabel = ['empty', 'notEmpty'].includes(currentFilterOption)
         ? //@ts-ignore
             localization[`filter${((_c = (_b = currentFilterOption === null || currentFilterOption === void 0 ? void 0 : currentFilterOption.charAt) === null || _b === void 0 ? void 0 : _b.call(currentFilterOption, 0)) === null || _c === void 0 ? void 0 : _c.toUpperCase()) +
@@ -2789,13 +2837,11 @@ const MRT_FilterTextField = (_a) => {
             : rangeFilterIndex === 1
                 ? localization.max
                 : '';
-    const allowedColumnFilterOptions = (_g = columnDef === null || columnDef === void 0 ? void 0 : columnDef.columnFilterModeOptions) !== null && _g !== void 0 ? _g : columnFilterModeOptions;
-    const showChangeModeButton = enableColumnFilterModes &&
+    const showChangeModeButton = !!(enableColumnFilterModes &&
         columnDef.enableColumnFilterModes !== false &&
         !rangeFilterIndex &&
         (allowedColumnFilterOptions === undefined ||
-            !!(allowedColumnFilterOptions === null || allowedColumnFilterOptions === void 0 ? void 0 : allowedColumnFilterOptions.length));
-    const facetedUniqueValues = column.getFacetedUniqueValues();
+            !!(allowedColumnFilterOptions === null || allowedColumnFilterOptions === void 0 ? void 0 : allowedColumnFilterOptions.length)));
     const [anchorEl, setAnchorEl] = useState(null);
     const [filterValue, setFilterValue] = useState(() => {
         var _a, _b;
@@ -2882,23 +2928,9 @@ const MRT_FilterTextField = (_a) => {
         isMounted.current = true;
     }, [column.getFilterValue()]);
     if (columnDef.Filter) {
-        return (jsx(Fragment, { children: (_h = columnDef.Filter) === null || _h === void 0 ? void 0 : _h.call(columnDef, { column, header, rangeFilterIndex, table }) }));
+        return (jsx(Fragment, { children: (_g = columnDef.Filter) === null || _g === void 0 ? void 0 : _g.call(columnDef, { column, header, rangeFilterIndex, table }) }));
     }
-    const dropdownOptions = useMemo(() => {
-        var _a;
-        return (_a = columnDef.filterSelectOptions) !== null && _a !== void 0 ? _a : ((isSelectFilter || isMultiSelectFilter || isAutocompleteFilter) &&
-            facetedUniqueValues
-            ? Array.from(facetedUniqueValues.keys())
-                .filter((value) => value !== null && value !== undefined)
-                .sort((a, b) => a.localeCompare(b))
-            : undefined);
-    }, [
-        columnDef.filterSelectOptions,
-        facetedUniqueValues,
-        isMultiSelectFilter,
-        isSelectFilter,
-    ]);
-    const endAdornment = !isAutocompleteFilter && !isDateFilter && !filterChipLabel ? (jsx(InputAdornment, { position: "end", sx: { mr: isSelectFilter || isMultiSelectFilter ? '20px' : undefined }, children: jsx(Tooltip, { placement: "right", title: (_j = localization.clearFilter) !== null && _j !== void 0 ? _j : '', children: jsx("span", { children: jsx(IconButton, { "aria-label": localization.clearFilter, disabled: !((_k = filterValue === null || filterValue === void 0 ? void 0 : filterValue.toString()) === null || _k === void 0 ? void 0 : _k.length), onClick: handleClear, size: "small", sx: {
+    const endAdornment = !isAutocompleteFilter && !isDateFilter && !filterChipLabel ? (jsx(InputAdornment, { position: "end", sx: { mr: isSelectFilter || isMultiSelectFilter ? '20px' : undefined }, children: jsx(Tooltip, { placement: "right", title: (_h = localization.clearFilter) !== null && _h !== void 0 ? _h : '', children: jsx("span", { children: jsx(IconButton, { "aria-label": localization.clearFilter, disabled: !((_j = filterValue === null || filterValue === void 0 ? void 0 : filterValue.toString()) === null || _j === void 0 ? void 0 : _j.length), onClick: handleClear, size: "small", sx: {
                         height: '2rem',
                         transform: 'scale(0.9)',
                         width: '2rem',
@@ -2914,7 +2946,7 @@ const MRT_FilterTextField = (_a) => {
             ? { endAdornment, startAdornment }
             : { startAdornment }, fullWidth: true, helperText: showChangeModeButton ? (jsx("label", { children: localization.filterMode.replace('{filterType}', 
             // @ts-ignore
-            localization[`filter${((_l = currentFilterOption === null || currentFilterOption === void 0 ? void 0 : currentFilterOption.charAt(0)) === null || _l === void 0 ? void 0 : _l.toUpperCase()) +
+            localization[`filter${((_k = currentFilterOption === null || currentFilterOption === void 0 ? void 0 : currentFilterOption.charAt(0)) === null || _k === void 0 ? void 0 : _k.toUpperCase()) +
                 (currentFilterOption === null || currentFilterOption === void 0 ? void 0 : currentFilterOption.slice(1))}`]) })) : null, inputProps: {
             'aria-label': filterPlaceholder,
             autoComplete: 'new-password', // disable autocomplete and autofill
@@ -2948,15 +2980,15 @@ const MRT_FilterTextField = (_a) => {
         value: filterValue || null,
     };
     return (jsxs(Fragment, { children: [(filterVariant === null || filterVariant === void 0 ? void 0 : filterVariant.startsWith('time')) ? (jsx(TimePicker, Object.assign({}, commonDatePickerProps, timePickerProps, { slotProps: {
-                    field: Object.assign({ clearable: true, onClear: () => handleClear() }, (_m = timePickerProps === null || timePickerProps === void 0 ? void 0 : timePickerProps.slotProps) === null || _m === void 0 ? void 0 : _m.field),
-                    textField: Object.assign(Object.assign({}, commonTextFieldProps), (_o = timePickerProps === null || timePickerProps === void 0 ? void 0 : timePickerProps.slotProps) === null || _o === void 0 ? void 0 : _o.textField),
+                    field: Object.assign({ clearable: true, onClear: () => handleClear() }, (_l = timePickerProps === null || timePickerProps === void 0 ? void 0 : timePickerProps.slotProps) === null || _l === void 0 ? void 0 : _l.field),
+                    textField: Object.assign(Object.assign({}, commonTextFieldProps), (_m = timePickerProps === null || timePickerProps === void 0 ? void 0 : timePickerProps.slotProps) === null || _m === void 0 ? void 0 : _m.textField),
                 } }))) : (filterVariant === null || filterVariant === void 0 ? void 0 : filterVariant.startsWith('datetime')) ? (jsx(DateTimePicker, Object.assign({}, commonDatePickerProps, dateTimePickerProps, { slotProps: {
-                    field: Object.assign({ clearable: true, onClear: () => handleClear() }, (_p = dateTimePickerProps === null || dateTimePickerProps === void 0 ? void 0 : dateTimePickerProps.slotProps) === null || _p === void 0 ? void 0 : _p.field),
-                    textField: Object.assign(Object.assign({}, commonTextFieldProps), (_q = dateTimePickerProps === null || dateTimePickerProps === void 0 ? void 0 : dateTimePickerProps.slotProps) === null || _q === void 0 ? void 0 : _q.textField),
+                    field: Object.assign({ clearable: true, onClear: () => handleClear() }, (_o = dateTimePickerProps === null || dateTimePickerProps === void 0 ? void 0 : dateTimePickerProps.slotProps) === null || _o === void 0 ? void 0 : _o.field),
+                    textField: Object.assign(Object.assign({}, commonTextFieldProps), (_p = dateTimePickerProps === null || dateTimePickerProps === void 0 ? void 0 : dateTimePickerProps.slotProps) === null || _p === void 0 ? void 0 : _p.textField),
                 } }))) : (filterVariant === null || filterVariant === void 0 ? void 0 : filterVariant.startsWith('date')) ? (jsx(DatePicker, Object.assign({}, commonDatePickerProps, datePickerProps, { slotProps: {
-                    field: Object.assign({ clearable: true, onClear: () => handleClear() }, (_r = datePickerProps === null || datePickerProps === void 0 ? void 0 : datePickerProps.slotProps) === null || _r === void 0 ? void 0 : _r.field),
-                    textField: Object.assign(Object.assign({}, commonTextFieldProps), (_s = datePickerProps === null || datePickerProps === void 0 ? void 0 : datePickerProps.slotProps) === null || _s === void 0 ? void 0 : _s.textField),
-                } }))) : isAutocompleteFilter ? (jsx(Autocomplete, Object.assign({ freeSolo: true, getOptionLabel: (option) => getValueAndLabel(option).label, onChange: (_e, newValue) => handleAutocompleteChange(newValue), options: (_t = dropdownOptions === null || dropdownOptions === void 0 ? void 0 : dropdownOptions.map((option) => getValueAndLabel(option))) !== null && _t !== void 0 ? _t : [] }, autocompleteProps, { renderInput: (builtinTextFieldProps) => {
+                    field: Object.assign({ clearable: true, onClear: () => handleClear() }, (_q = datePickerProps === null || datePickerProps === void 0 ? void 0 : datePickerProps.slotProps) === null || _q === void 0 ? void 0 : _q.field),
+                    textField: Object.assign(Object.assign({}, commonTextFieldProps), (_r = datePickerProps === null || datePickerProps === void 0 ? void 0 : datePickerProps.slotProps) === null || _r === void 0 ? void 0 : _r.textField),
+                } }))) : isAutocompleteFilter ? (jsx(Autocomplete, Object.assign({ freeSolo: true, getOptionLabel: (option) => getValueAndLabel(option).label, onChange: (_e, newValue) => handleAutocompleteChange(newValue), options: (_s = dropdownOptions === null || dropdownOptions === void 0 ? void 0 : dropdownOptions.map((option) => getValueAndLabel(option))) !== null && _s !== void 0 ? _s : [] }, autocompleteProps, { renderInput: (builtinTextFieldProps) => {
                     var _a;
                     return (jsx(TextField, Object.assign({}, builtinTextFieldProps, commonTextFieldProps, { InputProps: Object.assign(Object.assign({}, builtinTextFieldProps.InputProps), { startAdornment: (_a = commonTextFieldProps === null || commonTextFieldProps === void 0 ? void 0 : commonTextFieldProps.InputProps) === null || _a === void 0 ? void 0 : _a.startAdornment }), inputProps: Object.assign(Object.assign({}, builtinTextFieldProps.inputProps), commonTextFieldProps === null || commonTextFieldProps === void 0 ? void 0 : commonTextFieldProps.inputProps), onChange: handleTextFieldChange, onClick: (e) => e.stopPropagation() })));
                 }, value: autocompleteValue }))) : (jsx(TextField, Object.assign({ select: isSelectFilter || isMultiSelectFilter }, commonTextFieldProps, { SelectProps: Object.assign({ MenuProps: { disableScrollLock: true }, displayEmpty: true, multiple: isMultiSelectFilter, renderValue: isMultiSelectFilter
@@ -2967,7 +2999,7 @@ const MRT_FilterTextField = (_a) => {
                         : undefined }, commonTextFieldProps.SelectProps), onChange: handleTextFieldChange, onClick: (e) => e.stopPropagation(), value: filterValue !== null && filterValue !== void 0 ? filterValue : '', children: (isSelectFilter || isMultiSelectFilter) && [
                     jsx(MenuItem, { disabled: true, divider: true, hidden: true, value: "", children: jsx(Box, { sx: { opacity: 0.5 }, children: filterPlaceholder }) }, "p"),
                     ...[
-                        (_u = textFieldProps.children) !== null && _u !== void 0 ? _u : dropdownOptions === null || dropdownOptions === void 0 ? void 0 : dropdownOptions.map((option, index) => {
+                        (_t = textFieldProps.children) !== null && _t !== void 0 ? _t : dropdownOptions === null || dropdownOptions === void 0 ? void 0 : dropdownOptions.map((option, index) => {
                             var _a;
                             const { label, value } = getValueAndLabel(option);
                             return (jsxs(MenuItem, { sx: {
@@ -2984,7 +3016,7 @@ const MRT_FilterTextField = (_a) => {
 
 const MRT_FilterRangeFields = (_a) => {
     var { header, table } = _a, rest = __rest(_a, ["header", "table"]);
-    return (jsxs(Box, Object.assign({}, rest, { sx: (theme) => (Object.assign({ display: 'grid', gap: '1rem', gridTemplateColumns: '1fr 1fr' }, parseFromValuesOrFunc(rest === null || rest === void 0 ? void 0 : rest.sx, theme))), children: [jsx(MRT_FilterTextField, { header: header, rangeFilterIndex: 0, table: table }), jsx(MRT_FilterTextField, { header: header, rangeFilterIndex: 1, table: table })] })));
+    return (jsx(Box, Object.assign({}, rest, { sx: (theme) => (Object.assign({ display: 'grid', gap: '1rem', gridTemplateColumns: '1fr 1fr' }, parseFromValuesOrFunc(rest === null || rest === void 0 ? void 0 : rest.sx, theme))), children: [0, 1].map((rangeFilterIndex) => (jsx(MRT_FilterTextField, { header: header, rangeFilterIndex: rangeFilterIndex, table: table }, rangeFilterIndex))) })));
 };
 
 const MRT_FilterRangeSlider = (_a) => {
@@ -3060,41 +3092,45 @@ const MRT_FilterRangeSlider = (_a) => {
 };
 
 const MRT_TableHeadCellFilterContainer = (_a) => {
-    var _b;
     var { header, table } = _a, rest = __rest(_a, ["header", "table"]);
     const { getState, options: { columnFilterDisplayMode }, } = table;
     const { showColumnFilters } = getState();
     const { column } = header;
     const { columnDef } = column;
-    return (jsx(Collapse, Object.assign({ in: showColumnFilters || columnFilterDisplayMode === 'popover', mountOnEnter: true, unmountOnExit: true }, rest, { children: columnDef.filterVariant === 'checkbox' ? (jsx(MRT_FilterCheckbox, { column: column, table: table })) : columnDef.filterVariant === 'range-slider' ? (jsx(MRT_FilterRangeSlider, { header: header, table: table })) : ((_b = columnDef.filterVariant) === null || _b === void 0 ? void 0 : _b.includes('range')) ||
-            ['between', 'betweenInclusive', 'inNumberRange'].includes(columnDef._filterFn) ? (jsx(MRT_FilterRangeFields, { header: header, table: table })) : (jsx(MRT_FilterTextField, { header: header, table: table })) })));
+    const { isRangeFilter } = getColumnFilterInfo({ header, table });
+    return (jsx(Collapse, Object.assign({ in: showColumnFilters || columnFilterDisplayMode === 'popover', mountOnEnter: true, unmountOnExit: true }, rest, { children: columnDef.filterVariant === 'checkbox' ? (jsx(MRT_FilterCheckbox, { column: column, table: table })) : columnDef.filterVariant === 'range-slider' ? (jsx(MRT_FilterRangeSlider, { header: header, table: table })) : isRangeFilter ? (jsx(MRT_FilterRangeFields, { header: header, table: table })) : (jsx(MRT_FilterTextField, { header: header, table: table })) })));
 };
 
 const MRT_TableHeadCellFilterLabel = (_a) => {
-    var _b, _c, _d;
+    var _b, _c;
     var { header, table } = _a, rest = __rest(_a, ["header", "table"]);
     const { options: { columnFilterDisplayMode, icons: { FilterAltIcon }, localization, }, refs: { filterInputRefs }, setShowColumnFilters, } = table;
     const { column } = header;
     const { columnDef } = column;
     const filterValue = column.getFilterValue();
     const [anchorEl, setAnchorEl] = useState(null);
+    const { currentFilterOption, isMultiSelectFilter, isRangeFilter, isSelectFilter, } = getColumnFilterInfo({ header, table });
+    const dropdownOptions = useDropdownOptions({ header, table });
+    const getSelectLabel = (index) => getValueAndLabel(dropdownOptions === null || dropdownOptions === void 0 ? void 0 : 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 = ((_b = columnDef.filterVariant) === null || _b === void 0 ? void 0 : _b.includes('range')) ||
-        ['between', 'betweenInclusive', 'inNumberRange'].includes(columnDef._filterFn);
-    const currentFilterOption = columnDef._filterFn;
     const filterTooltip = columnFilterDisplayMode === 'popover' && !isFilterActive
-        ? (_c = localization.filterByColumn) === null || _c === void 0 ? void 0 : _c.replace('{column}', String(columnDef.header))
+        ? (_b = localization.filterByColumn) === null || _b === void 0 ? void 0 : _b.replace('{column}', String(columnDef.header))
         : localization.filteringByColumn
             .replace('{column}', String(columnDef.header))
             .replace('{filterType}', currentFilterOption
             ? // @ts-ignore
-                localization[`filter${((_d = currentFilterOption === null || currentFilterOption === void 0 ? void 0 : currentFilterOption.charAt(0)) === null || _d === void 0 ? void 0 : _d.toUpperCase()) +
+                localization[`filter${((_c = currentFilterOption === null || currentFilterOption === void 0 ? void 0 : currentFilterOption.charAt(0)) === null || _c === void 0 ? void 0 : _c.toUpperCase()) +
                     (currentFilterOption === null || currentFilterOption === void 0 ? void 0 : currentFilterOption.slice(1))}`]
             : '')
             .replace('{filterValue}', `"${Array.isArray(filterValue)
-            ? filterValue.join(`" ${isRangeFilter ? localization.and : localization.or} "`)
-            : filterValue}"`)
+            ? filterValue
+                .map((value, index) => isMultiSelectFilter ? getSelectLabel(index) : value)
+                .join(`" ${isRangeFilter ? localization.and : localization.or} "`)
+            : isSelectFilter
+                ? getSelectLabel()
+                : filterValue}"`)
             .replace('" "', '');
     return (jsxs(Fragment, { children: [jsx(Grow, { in: columnFilterDisplayMode === 'popover' ||
                     (!!filterValue && !isRangeFilter) ||
@@ -3112,7 +3148,7 @@ const MRT_TableHeadCellFilterLabel = (_a) => {
                                     (_d = (_c = filterInputRefs.current[`${column.id}-0`]) === null || _c === void 0 ? void 0 : _c.select) === null || _d === void 0 ? void 0 : _d.call(_c);
                                 });
                                 event.stopPropagation();
-                            }, size: "small" }, rest, { sx: (theme) => (Object.assign({ height: '16px', ml: '4px', opacity: isFilterActive ? 1 : 0.3, p: '8px', transform: 'scale(0.75)', transition: 'all 150ms ease-in-out', width: '16px' }, parseFromValuesOrFunc(rest === null || rest === void 0 ? void 0 : rest.sx, theme))), children: jsx(FilterAltIcon, {}) })) }) }) }), jsx(Popover, { anchorEl: anchorEl, anchorOrigin: {
+                            }, size: "small" }, rest, { sx: (theme) => (Object.assign({ height: '16px', ml: '4px', opacity: isFilterActive ? 1 : 0.3, p: '8px', transform: 'scale(0.75)', transition: 'all 150ms ease-in-out', width: '16px' }, parseFromValuesOrFunc(rest === null || rest === void 0 ? void 0 : rest.sx, theme))), children: jsx(FilterAltIcon, {}) })) }) }) }), columnFilterDisplayMode === 'popover' && (jsx(Popover, { anchorEl: anchorEl, anchorOrigin: {
                     horizontal: 'center',
                     vertical: 'top',
                 }, disableScrollLock: true, onClick: (event) => event.stopPropagation(), onClose: (event) => {
@@ -3122,7 +3158,7 @@ const MRT_TableHeadCellFilterLabel = (_a) => {
                 }, onKeyDown: (event) => event.key === 'Enter' && setAnchorEl(null), open: !!anchorEl, slotProps: { paper: { sx: { overflow: 'visible' } } }, transformOrigin: {
                     horizontal: 'center',
                     vertical: 'bottom',
-                }, children: jsx(Box, { sx: { p: '1rem' }, children: jsx(MRT_TableHeadCellFilterContainer, { header: header, table: table }) }) })] }));
+                }, children: jsx(Box, { sx: { p: '1rem' }, children: jsx(MRT_TableHeadCellFilterContainer, { header: header, table: table }) }) }))] }));
 };
 
 const MRT_TableHeadCellGrabHandle = (_a) => {
@@ -3302,6 +3338,11 @@ const MRT_TableHeadCell = (_a) => {
             setHoveredColumn(columnDef.enableColumnOrdering !== false ? column : null);
         }
     };
+    const handleDragOver = (e) => {
+        if (columnDef.enableColumnOrdering !== false) {
+            e.preventDefault();
+        }
+    };
     const HeaderElement = (_b = parseFromValuesOrFunc(columnDef.Header, {
         column,
         header,
@@ -3311,7 +3352,7 @@ const MRT_TableHeadCell = (_a) => {
             ? 'center'
             : theme.direction === 'rtl'
                 ? 'right'
-                : 'left', colSpan: header.colSpan, "data-index": staticColumnIndex, "data-pinned": !!isColumnPinned || undefined, onDragEnter: handleDragEnter, ref: (node) => {
+                : 'left', colSpan: header.colSpan, "data-index": staticColumnIndex, "data-pinned": !!isColumnPinned || undefined, onDragEnter: handleDragEnter, onDragOver: handleDragOver, ref: (node) => {
             var _a;
             if (node) {
                 tableHeadCellRefs.current[column.id] = node;
@@ -3454,7 +3495,7 @@ const MRT_ToolbarAlertBanner = (_a) => {
 
 const MRT_TableHead = (_a) => {
     var { columnVirtualizer, table } = _a, rest = __rest(_a, ["columnVirtualizer", "table"]);
-    const { getHeaderGroups, getSelectedRowModel, getState, options: { enableStickyHeader, layoutMode, muiTableHeadProps, positionToolbarAlertBanner, }, refs: { tableHeadRef }, } = table;
+    const { getState, options: { enableStickyHeader, layoutMode, muiTableHeadProps, positionToolbarAlertBanner, }, refs: { tableHeadRef }, } = table;
     const { isFullScreen, showAlertBanner } = getState();
     const tableHeadProps = Object.assign(Object.assign({}, parseFromValuesOrFunc(muiTableHeadProps, { table })), rest);
     const stickyHeader = enableStickyHeader || isFullScreen;
@@ -3465,12 +3506,14 @@ const MRT_TableHead = (_a) => {
                 tableHeadProps.ref.current = ref;
             }
         }, sx: (theme) => (Object.assign({ display: (layoutMode === null || layoutMode === void 0 ? void 0 : layoutMode.startsWith('grid')) ? 'grid' : undefined, opacity: 0.97, position: stickyHeader ? 'sticky' : 'relative', top: stickyHeader && (layoutMode === null || layoutMode === void 0 ? void 0 : layoutMode.startsWith('grid')) ? 0 : undefined, zIndex: stickyHeader ? 2 : undefined }, parseFromValuesOrFunc(tableHeadProps === null || tableHeadProps === void 0 ? void 0 : tableHeadProps.sx, theme))), children: positionToolbarAlertBanner === 'head-overlay' &&
-            (showAlertBanner || getSelectedRowModel().rows.length > 0) ? (jsx("tr", { style: {
+            (showAlertBanner || table.getSelectedRowModel().rows.length > 0) ? (jsx("tr", { style: {
                 display: (layoutMode === null || layoutMode === void 0 ? void 0 : layoutMode.startsWith('grid')) ? 'grid' : undefined,
             }, children: jsx("th", { colSpan: table.getVisibleLeafColumns().length, style: {
                     display: (layoutMode === null || layoutMode === void 0 ? void 0 : layoutMode.startsWith('grid')) ? 'grid' : undefined,
                     padding: 0,
-                }, children: jsx(MRT_ToolbarAlertBanner, { table: table }) }) })) : (getHeaderGroups().map((headerGroup) => (jsx(MRT_TableHeadRow, { columnVirtualizer: columnVirtualizer, headerGroup: headerGroup, table: table }, headerGroup.id)))) })));
+                }, children: jsx(MRT_ToolbarAlertBanner, { table: table }) }) })) : (table
+            .getHeaderGroups()
+            .map((headerGroup) => (jsx(MRT_TableHeadRow, { columnVirtualizer: columnVirtualizer, headerGroup: headerGroup, table: table }, headerGroup.id)))) })));
 };
 
 const MRT_Table = (_a) => {
@@ -3719,6 +3762,9 @@ const MRT_ToolbarDropZone = (_a) => {
     const handleDragEnter = (_event) => {
         setHoveredColumn({ id: 'drop-zone' });
     };
+    const handleDragOver = (e) => {
+        e.preventDefault();
+    };
     useEffect(() => {
         var _a;
         if (((_a = table.options.state) === null || _a === void 0 ? void 0 : _a.showToolbarDropZone) !== undefined) {
@@ -3728,7 +3774,7 @@ const MRT_ToolbarDropZone = (_a) => {
                 !grouping.includes(draggingColumn.id));
         }
     }, [enableGrouping, draggingColumn, grouping]);
-    return (jsx(Fade, { in: showToolbarDropZone, children: jsx(Box, Object.assign({ className: "Mui-ToolbarDropZone", onDragEnter: handleDragEnter }, rest, { sx: (theme) => (Object.assign({ alignItems: 'center', backdropFilter: 'blur(4px)', backgroundColor: alpha(theme.palette.info.main, (hoveredColumn === null || hoveredColumn === void 0 ? void 0 : hoveredColumn.id) === 'drop-zone' ? 0.2 : 0.1), border: `dashed ${theme.palette.info.main} 2px`, boxSizing: 'border-box', display: 'flex', height: '100%', justifyContent: 'center', position: 'absolute', width: '100%', zIndex: 4 }, parseFromValuesOrFunc(rest === null || rest === void 0 ? void 0 : rest.sx, theme))), children: jsx(Typography, { fontStyle: "italic", children: localization.dropToGroupBy.replace('{column}', (_c = (_b = draggingColumn === null || draggingColumn === void 0 ? void 0 : draggingColumn.columnDef) === null || _b === void 0 ? void 0 : _b.header) !== null && _c !== void 0 ? _c : '') }) })) }));
+    return (jsx(Fade, { in: showToolbarDropZone, children: jsx(Box, Object.assign({ className: "Mui-ToolbarDropZone", onDragEnter: handleDragEnter, onDragOver: handleDragOver }, rest, { sx: (theme) => (Object.assign({ alignItems: 'center', backdropFilter: 'blur(4px)', backgroundColor: alpha(theme.palette.info.main, (hoveredColumn === null || hoveredColumn === void 0 ? void 0 : hoveredColumn.id) === 'drop-zone' ? 0.2 : 0.1), border: `dashed ${theme.palette.info.main} 2px`, boxSizing: 'border-box', display: 'flex', height: '100%', justifyContent: 'center', position: 'absolute', width: '100%', zIndex: 4 }, parseFromValuesOrFunc(rest === null || rest === void 0 ? void 0 : rest.sx, theme))), children: jsx(Typography, { fontStyle: "italic", children: localization.dropToGroupBy.replace('{column}', (_c = (_b = draggingColumn === null || draggingColumn === void 0 ? void 0 : draggingColumn.columnDef) === null || _b === void 0 ? void 0 : _b.header) !== null && _c !== void 0 ? _c : '') }) })) }));
 };
 
 const MRT_BottomToolbar = (_a) => {
@@ -4073,16 +4119,16 @@ const MRT_TablePaper = (_a) => {
         }, style: Object.assign(Object.assign({}, (isFullScreen
             ? {
                 bottom: 0,
-                height: '100vh',
+                height: '100dvh',
                 left: 0,
                 margin: 0,
-                maxHeight: '100vh',
-                maxWidth: '100vw',
+                maxHeight: '100dvh',
+                maxWidth: '100dvw',
                 padding: 0,
                 position: 'fixed',
                 right: 0,
                 top: 0,
-                width: '100vw',
+                width: '100dvw',
                 zIndex: 999,
             }
             : {})), paperProps === null || paperProps === void 0 ? void 0 : paperProps.style), sx: (theme) => (Object.assign({ backgroundColor: baseBackgroundColor, backgroundImage: 'unset', overflow: 'hidden', transition: 'all 100ms ease-in-out' }, parseFromValuesOrFunc(paperProps === null || paperProps === void 0 ? void 0 : paperProps.sx, theme))), children: [enableTopToolbar &&
@@ -4102,5 +4148,5 @@ const MaterialReactTable = (props) => {
     return jsx(MRT_TablePaper, { table: table });
 };
 
-export { MRT_ActionMenuItem, MRT_AggregationFns, MRT_BottomToolbar, MRT_ColumnActionMenu, MRT_ColumnPinningButtons, MRT_CopyButton, MRT_DefaultColumn, MRT_DefaultDisplayColumn, MRT_EditActionButtons, MRT_EditCellTextField, MRT_EditRowModal, MRT_ExpandAllButton, MRT_ExpandButton, MRT_FilterCheckbox, MRT_FilterFns, MRT_FilterOptionMenu, MRT_FilterRangeFields, MRT_FilterRangeSlider, MRT_FilterTextField, MRT_GlobalFilterTextField, MRT_GrabHandleButton, MRT_LinearProgressBar, MRT_RowActionMenu, MRT_RowPinButton, MRT_SelectCheckbox, MRT_ShowHideColumnsButton, MRT_ShowHideColumnsMenu, MRT_ShowHideColumnsMenuItems, MRT_SortingFns, MRT_Table, MRT_TableBody, MRT_TableBodyCell, MRT_TableBodyCellValue, MRT_TableBodyRow, MRT_TableBodyRowGrabHandle, MRT_TableBodyRowPinButton, MRT_TableContainer, MRT_TableDetailPanel, MRT_TableFooter, MRT_TableFooterCell, MRT_TableFooterRow, MRT_TableHead, MRT_TableHeadCell, MRT_TableHeadCellColumnActionsButton, MRT_TableHeadCellFilterContainer, MRT_TableHeadCellFilterLabel, MRT_TableHeadCellGrabHandle, MRT_TableHeadCellResizeHandle, MRT_TableHeadCellSortLabel, MRT_TableHeadRow, MRT_TableLoadingOverlay, MRT_TablePagination, MRT_TablePaper, MRT_ToggleDensePaddingButton, MRT_ToggleFiltersButton, MRT_ToggleFullScreenButton, MRT_ToggleGlobalFilterButton, MRT_ToggleRowActionMenuButton, MRT_ToolbarAlertBanner, MRT_ToolbarDropZone, MRT_ToolbarInternalButtons, MRT_TopToolbar, MaterialReactTable, Memo_MRT_TableBody, Memo_MRT_TableBodyCell, Memo_MRT_TableBodyRow, createMRTColumnHelper, createRow, defaultDisplayColumnProps, flexRender, getAllLeafColumnDefs, getCanRankRows, getColumnId, getDefaultColumnFilterFn, getDefaultColumnOrderIds, getIsRankingRows, getIsRowSelected, getLeadingDisplayColumnIds, getMRT_RowSelectionHandler, getMRT_Rows, getMRT_SelectAllHandler, getTrailingDisplayColumnIds, isCellEditable, mrtFilterOptions, openEditingCell, prepareColumns, rankGlobalFuzzy, reorderColumn, showRowActionsColumn, showRowDragColumn, showRowExpandColumn, showRowNumbersColumn, showRowPinningColumn, showRowSelectionColumn, showRowSpacerColumn, useMRT_ColumnVirtualizer, useMRT_Effects, useMRT_RowVirtualizer, useMRT_Rows, useMRT_TableInstance, useMRT_TableOptions, useMaterialReactTable };
+export { MRT_ActionMenuItem, MRT_AggregationFns, MRT_BottomToolbar, MRT_ColumnActionMenu, MRT_ColumnPinningButtons, MRT_CopyButton, MRT_DefaultColumn, MRT_DefaultDisplayColumn, MRT_EditActionButtons, MRT_EditCellTextField, MRT_EditRowModal, MRT_ExpandAllButton, MRT_ExpandButton, MRT_FilterCheckbox, MRT_FilterFns, MRT_FilterOptionMenu, MRT_FilterRangeFields, MRT_FilterRangeSlider, MRT_FilterTextField, MRT_GlobalFilterTextField, MRT_GrabHandleButton, MRT_LinearProgressBar, MRT_RowActionMenu, MRT_RowPinButton, MRT_SelectCheckbox, MRT_ShowHideColumnsButton, MRT_ShowHideColumnsMenu, MRT_ShowHideColumnsMenuItems, MRT_SortingFns, MRT_Table, MRT_TableBody, MRT_TableBodyCell, MRT_TableBodyCellValue, MRT_TableBodyRow, MRT_TableBodyRowGrabHandle, MRT_TableBodyRowPinButton, MRT_TableContainer, MRT_TableDetailPanel, MRT_TableFooter, MRT_TableFooterCell, MRT_TableFooterRow, MRT_TableHead, MRT_TableHeadCell, MRT_TableHeadCellColumnActionsButton, MRT_TableHeadCellFilterContainer, MRT_TableHeadCellFilterLabel, MRT_TableHeadCellGrabHandle, MRT_TableHeadCellResizeHandle, MRT_TableHeadCellSortLabel, MRT_TableHeadRow, MRT_TableLoadingOverlay, MRT_TablePagination, MRT_TablePaper, MRT_ToggleDensePaddingButton, MRT_ToggleFiltersButton, MRT_ToggleFullScreenButton, MRT_ToggleGlobalFilterButton, MRT_ToggleRowActionMenuButton, MRT_ToolbarAlertBanner, MRT_ToolbarDropZone, MRT_ToolbarInternalButtons, MRT_TopToolbar, MaterialReactTable, Memo_MRT_TableBody, Memo_MRT_TableBodyCell, Memo_MRT_TableBodyRow, createMRTColumnHelper, createRow, defaultDisplayColumnProps, flexRender, getAllLeafColumnDefs, getCanRankRows, getColumnFilterInfo, getColumnId, getDefaultColumnFilterFn, getDefaultColumnOrderIds, getIsRankingRows, getIsRowSelected, getLeadingDisplayColumnIds, getMRT_RowSelectionHandler, getMRT_Rows, getMRT_SelectAllHandler, getTrailingDisplayColumnIds, isCellEditable, mrtFilterOptions, openEditingCell, prepareColumns, rankGlobalFuzzy, reorderColumn, showRowActionsColumn, showRowDragColumn, showRowExpandColumn, showRowNumbersColumn, showRowPinningColumn, showRowSelectionColumn, showRowSpacerColumn, useDropdownOptions, useMRT_ColumnVirtualizer, useMRT_Effects, useMRT_RowVirtualizer, useMRT_Rows, useMRT_TableInstance, useMRT_TableOptions, useMaterialReactTable };
 //# sourceMappingURL=index.esm.js.map