material-react-table 2.4.0 → 2.5.0

package/src/menus/MRT_ColumnActionMenu.tsx

@@ -67,6 +67,7 @@ export const MRT_ColumnActionMenu = <TData extends MRT_RowData>({
       renderColumnActionsMenuItems,
     },
     refs: { filterInputRefs },
+    setColumnFilterFns,
     setColumnOrder,
     setColumnSizingInfo,
     setShowColumnFilters,
@@ -119,8 +120,14 @@ export const MRT_ColumnActionMenu = <TData extends MRT_RowData>({
   };
 
   const handleClearFilter = () => {
-    column.setFilterValue('');
+    column.setFilterValue(undefined);
     setAnchorEl(null);
+    if (['empty', 'notEmpty'].includes(columnDef._filterFn)) {
+      setColumnFilterFns((prev) => ({
+        ...prev,
+        [header.id]: allowedColumnFilterOptions?.[0] ?? 'fuzzy',
+      }));
+    }
   };
 
   const handleFilterByColumn = () => {

package/src/menus/MRT_ShowHideColumnsMenuItems.tsx

@@ -89,8 +89,9 @@ export const MRT_ShowHideColumnsMenuItems = <TData extends MRT_RowData>({
     }
   };
 
-  if (!columnDef.header || columnDef.visibleInShowHideMenu === false)
+  if (!columnDef.header || columnDef.visibleInShowHideMenu === false) {
     return null;
+  }
 
   return (
     <>

package/src/style.utils.ts

@@ -90,25 +90,6 @@ export const getCommonMRTCellStyles = <TData extends MRT_RowData>({
       column.getIsPinned() === 'left'
         ? `${column.getStart('left')}px`
         : undefined,
-    ml:
-      table.options.enableColumnVirtualization &&
-      column.getIsPinned() === 'left' &&
-      column.getPinnedIndex() === 0
-        ? `-${
-            column.getSize() *
-            (table.getState().columnPinning.left?.length ?? 1)
-          }px`
-        : undefined,
-    mr:
-      table.options.enableColumnVirtualization &&
-      column.getIsPinned() === 'right' &&
-      column.getPinnedIndex() === table.getVisibleLeafColumns().length - 1
-        ? `-${
-            column.getSize() *
-            (table.getState().columnPinning.right?.length ?? 1) *
-            1.2
-          }px`
-        : undefined,
     opacity:
       table.getState().draggingColumn?.id === column.id ||
       table.getState().hoveredColumn?.id === column.id

package/src/table/MRT_Table.tsx

@@ -53,14 +53,9 @@ export const MRT_Table = <TData extends MRT_RowData>({
 
   const columnVirtualizer = useMRT_ColumnVirtualizer(table);
 
-  const virtualColumns = columnVirtualizer
-    ? columnVirtualizer.getVirtualItems()
-    : undefined;
-
   const commonTableGroupProps = {
     columnVirtualizer,
     table,
-    virtualColumns,
   };
 
   return (

package/src/toolbar/MRT_TablePagination.tsx

@@ -4,7 +4,7 @@ import InputLabel from '@mui/material/InputLabel';
 import MenuItem from '@mui/material/MenuItem';
 import Pagination, { type PaginationProps } from '@mui/material/Pagination';
 import PaginationItem from '@mui/material/PaginationItem';
-import Select from '@mui/material/Select';
+import Select, { type SelectProps } from '@mui/material/Select';
 import Tooltip from '@mui/material/Tooltip';
 import Typography from '@mui/material/Typography';
 import { parseFromValuesOrFunc } from '../column.utils';
@@ -15,6 +15,7 @@ const defaultRowsPerPage = [5, 10, 15, 20, 25, 30, 50, 100];
 interface Props<TData extends MRT_RowData>
   extends Partial<
     PaginationProps & {
+      SelectProps?: Partial<SelectProps>;
       disabled?: boolean;
       rowsPerPageOptions?: { label: string; value: number }[] | number[];
       showRowsPerPage?: boolean;
@@ -71,6 +72,9 @@ export const MRT_TablePagination = <TData extends MRT_RowData>({
     ..._rest
   } = paginationProps ?? {};
 
+  const disableBack = pageIndex <= 0 || disabled;
+  const disableNext = lastRowIndex >= totalRowCount || disabled;
+
   return (
     <Box
       className="MuiTablePagination-root"
@@ -165,47 +169,55 @@ export const MRT_TablePagination = <TData extends MRT_RowData>({
           } ${totalRowCount.toLocaleString()}`}</Typography>
           <Box gap="xs">
             {showFirstButton && (
-              <Tooltip title={localization.goToFirstPage}>
+              <Tooltip enterDelay={1000} title={localization.goToFirstPage}>
+                <span>
+                  <IconButton
+                    aria-label={localization.goToFirstPage}
+                    disabled={disableBack}
+                    onClick={() => setPageIndex(0)}
+                    size="small"
+                  >
+                    <FirstPageIcon />
+                  </IconButton>
+                </span>
+              </Tooltip>
+            )}
+            <Tooltip enterDelay={1000} title={localization.goToPreviousPage}>
+              <span>
                 <IconButton
-                  aria-label={localization.goToFirstPage}
-                  disabled={pageIndex <= 0 || disabled}
-                  onClick={() => setPageIndex(0)}
+                  aria-label={localization.goToPreviousPage}
+                  disabled={disableBack}
+                  onClick={() => setPageIndex(pageIndex - 1)}
                   size="small"
                 >
-                  <FirstPageIcon />
+                  <ChevronLeftIcon />
                 </IconButton>
-              </Tooltip>
-            )}
-            <Tooltip title={localization.goToPreviousPage}>
-              <IconButton
-                aria-label={localization.goToPreviousPage}
-                disabled={pageIndex <= 0 || disabled}
-                onClick={() => setPageIndex(pageIndex - 1)}
-                size="small"
-              >
-                <ChevronLeftIcon />
-              </IconButton>
+              </span>
             </Tooltip>
-            <Tooltip title={localization.goToNextPage}>
-              <IconButton
-                aria-label={localization.goToNextPage}
-                disabled={lastRowIndex >= totalRowCount || disabled}
-                onClick={() => setPageIndex(pageIndex + 1)}
-                size="small"
-              >
-                <ChevronRightIcon />
-              </IconButton>
-            </Tooltip>
-            {showLastButton && (
-              <Tooltip title={localization.goToLastPage}>
+            <Tooltip enterDelay={1000} title={localization.goToNextPage}>
+              <span>
                 <IconButton
-                  aria-label={localization.goToLastPage}
-                  disabled={lastRowIndex >= totalRowCount || disabled}
-                  onClick={() => setPageIndex(numberOfPages - 1)}
+                  aria-label={localization.goToNextPage}
+                  disabled={disableNext}
+                  onClick={() => setPageIndex(pageIndex + 1)}
                   size="small"
                 >
-                  <LastPageIcon />
+                  <ChevronRightIcon />
                 </IconButton>
+              </span>
+            </Tooltip>
+            {showLastButton && (
+              <Tooltip enterDelay={1000} title={localization.goToLastPage}>
+                <span>
+                  <IconButton
+                    aria-label={localization.goToLastPage}
+                    disabled={disableNext}
+                    onClick={() => setPageIndex(numberOfPages - 1)}
+                    size="small"
+                  >
+                    <LastPageIcon />
+                  </IconButton>
+                </span>
               </Tooltip>
             )}
           </Box>

package/src/toolbar/MRT_TopToolbar.tsx

@@ -36,11 +36,23 @@ export const MRT_TopToolbar = <TData extends MRT_RowData>({
   const { isFullScreen, showGlobalFilter } = getState();
 
   const isMobile = useMediaQuery('(max-width:720px)');
+  const isTablet = useMediaQuery('(max-width:1024px)');
 
   const toolbarProps = parseFromValuesOrFunc(muiTopToolbarProps, { table });
 
   const stackAlertBanner =
-    isMobile || !!renderTopToolbarCustomActions || showGlobalFilter;
+    isMobile ||
+    !!renderTopToolbarCustomActions ||
+    (showGlobalFilter && isTablet);
+
+  const globalFilterProps = {
+    sx: !isTablet
+      ? {
+          zIndex: 2,
+        }
+      : undefined,
+    table,
+  };
 
   return (
     <Box
@@ -83,7 +95,7 @@ export const MRT_TopToolbar = <TData extends MRT_RowData>({
         }}
       >
         {enableGlobalFilter && positionGlobalFilter === 'left' && (
-          <MRT_GlobalFilterTextField table={table} />
+          <MRT_GlobalFilterTextField {...globalFilterProps} />
         )}
         {renderTopToolbarCustomActions?.({ table }) ?? <span />}
         {enableToolbarInternalActions ? (
@@ -97,14 +109,14 @@ export const MRT_TopToolbar = <TData extends MRT_RowData>({
             }}
           >
             {enableGlobalFilter && positionGlobalFilter === 'right' && (
-              <MRT_GlobalFilterTextField table={table} />
+              <MRT_GlobalFilterTextField {...globalFilterProps} />
             )}
             <MRT_ToolbarInternalButtons table={table} />
           </Box>
         ) : (
           enableGlobalFilter &&
           positionGlobalFilter === 'right' && (
-            <MRT_GlobalFilterTextField table={table} />
+            <MRT_GlobalFilterTextField {...globalFilterProps} />
           )
         )}
       </Box>

package/src/types.ts

@@ -93,28 +93,30 @@ export type MRT_ColumnFilterFnsState = Record<string, MRT_FilterOption>;
 
 export type MRT_RowData = Record<string, any>;
 
-export type {
-  ColumnFiltersState as MRT_ColumnFiltersState,
-  ColumnOrderState as MRT_ColumnOrderState,
-  ColumnPinningState as MRT_ColumnPinningState,
-  ColumnSizingInfoState as MRT_ColumnSizingInfoState,
-  ColumnSizingState as MRT_ColumnSizingState,
-  ExpandedState as MRT_ExpandedState,
-  GroupingState as MRT_GroupingState,
-  PaginationState as MRT_PaginationState,
-  RowSelectionState as MRT_RowSelectionState,
-  SortingState as MRT_SortingState,
-  Updater as MRT_Updater,
-  VirtualItem as MRT_VirtualItem,
-  Virtualizer as MRT_Virtualizer,
-  VirtualizerOptions as MRT_VirtualizerOptions,
-  VisibilityState as MRT_VisibilityState,
-};
+export type MRT_ColumnFiltersState = ColumnFiltersState;
+export type MRT_ColumnOrderState = ColumnOrderState;
+export type MRT_ColumnPinningState = ColumnPinningState;
+export type MRT_ColumnSizingInfoState = ColumnSizingInfoState;
+export type MRT_ColumnSizingState = ColumnSizingState;
+export type MRT_ExpandedState = ExpandedState;
+export type MRT_GroupingState = GroupingState;
+export type MRT_PaginationState = PaginationState;
+export type MRT_RowSelectionState = RowSelectionState;
+export type MRT_SortingState = SortingState;
+export type MRT_Updater<T> = Updater<T>;
+export type MRT_VirtualItem = VirtualItem;
+export type MRT_VisibilityState = VisibilityState;
+
+export type MRT_VirtualizerOptions<
+  TScrollElement extends Element | Window = Element | Window,
+  TItemElement extends Element = Element,
+> = VirtualizerOptions<TScrollElement, TItemElement>;
 
 export type MRT_ColumnVirtualizer<
   TScrollElement extends Element | Window = HTMLDivElement,
   TItemElement extends Element = HTMLTableCellElement,
 > = Virtualizer<TScrollElement, TItemElement> & {
+  virtualColumns: MRT_VirtualItem[];
   virtualPaddingLeft?: number;
   virtualPaddingRight?: number;
 };
@@ -122,7 +124,16 @@ export type MRT_ColumnVirtualizer<
 export type MRT_RowVirtualizer<
   TScrollElement extends Element | Window = HTMLDivElement,
   TItemElement extends Element = HTMLTableRowElement,
-> = Virtualizer<TScrollElement, TItemElement>;
+> = Virtualizer<TScrollElement, TItemElement> & {
+  virtualRows: MRT_VirtualItem[];
+};
+
+/**
+ * @deprecated use `MRT_ColumnVirtualizer` or `MRT_RowVirtualizer` instead
+ */
+export type MRT_Virtualizer<_TScrollElement = any, _TItemElement = any> =
+  | MRT_ColumnVirtualizer
+  | MRT_RowVirtualizer;
 
 export type MRT_ColumnHelper<TData extends MRT_RowData> = {
   accessor: <
@@ -374,6 +385,7 @@ export type MRT_ColumnDef<TData extends MRT_RowData, TValue = unknown> = Omit<
     renderedCellValue: ReactNode;
     row: MRT_Row<TData>;
     rowRef?: RefObject<HTMLTableRowElement>;
+    staticRowIndex?: number;
     table: MRT_TableInstance<TData>;
   }) => ReactNode;
   Edit?: (props: {
@@ -663,10 +675,19 @@ export type MRT_HeaderGroup<TData extends MRT_RowData> = Omit<
 
 export type MRT_Row<TData extends MRT_RowData> = Omit<
   Row<TData>,
-  '_valuesCache' | 'getAllCells' | 'getVisibleCells' | 'subRows'
+  | '_valuesCache'
+  | 'getAllCells'
+  | 'getParentRow'
+  | 'getParentRows'
+  | 'getRow'
+  | 'getVisibleCells'
+  | 'subRows'
 > & {
   _valuesCache: Record<LiteralUnion<string & DeepKeys<TData>>, any>;
   getAllCells: () => MRT_Cell<TData>[];
+  getParentRow: () => MRT_Row<TData> | null;
+  getParentRows: () => MRT_Row<TData>[];
+  getRow: () => MRT_Row<TData>;
   getVisibleCells: () => MRT_Cell<TData>[];
   subRows?: MRT_Row<TData>[];
 };
@@ -743,7 +764,9 @@ export type MRT_TableOptions<TData extends MRT_RowData> = Omit<
   columnFilterModeOptions?: Array<
     LiteralUnion<string & MRT_FilterOption>
   > | null;
-  columnVirtualizerInstanceRef?: MutableRefObject<MRT_ColumnVirtualizer | null>;
+  columnVirtualizerInstanceRef?: MutableRefObject<
+    MRT_ColumnVirtualizer | MRT_Virtualizer | null
+  >;
   columnVirtualizerOptions?:
     | ((props: {
         table: MRT_TableInstance<TData>;
@@ -955,6 +978,7 @@ export type MRT_TableOptions<TData extends MRT_RowData> = Omit<
     | ((props: { table: MRT_TableInstance<TData> }) => Partial<
         PaginationProps & {
           SelectProps?: Partial<SelectProps>;
+          disabled?: boolean;
           rowsPerPageOptions?: { label: string; value: number }[] | number[];
           showRowsPerPage?: boolean;
         }
@@ -962,6 +986,7 @@ export type MRT_TableOptions<TData extends MRT_RowData> = Omit<
     | Partial<
         PaginationProps & {
           SelectProps?: Partial<SelectProps>;
+          disabled?: boolean;
           rowsPerPageOptions?: { label: string; value: number }[] | number[];
           showRowsPerPage?: boolean;
         }
@@ -981,6 +1006,7 @@ export type MRT_TableOptions<TData extends MRT_RowData> = Omit<
   muiSelectCheckboxProps?:
     | ((props: {
         row: MRT_Row<TData>;
+        staticRowIndex?: number;
         table: MRT_TableInstance<TData>;
       }) => CheckboxProps | RadioProps)
     | (CheckboxProps | RadioProps);
@@ -1175,7 +1201,9 @@ export type MRT_TableOptions<TData extends MRT_RowData> = Omit<
     | 'sticky'
     | 'top'
     | 'top-and-bottom';
-  rowVirtualizerInstanceRef?: MutableRefObject<MRT_RowVirtualizer | null>;
+  rowVirtualizerInstanceRef?: MutableRefObject<
+    MRT_RowVirtualizer | MRT_Virtualizer | null
+  >;
   rowVirtualizerOptions?:
     | ((props: {
         table: MRT_TableInstance<TData>;