material-react-table 2.0.0-alpha.1 → 2.0.0-alpha.2

package/src/head/MRT_TableHeadCellFilterLabel.tsx

@@ -1,8 +1,10 @@
-import { type MouseEvent } from 'react';
+import { type MouseEvent, useState } from 'react';
 import Box from '@mui/material/Box';
 import Grow from '@mui/material/Grow';
 import IconButton from '@mui/material/IconButton';
+import Popover from '@mui/material/Popover';
 import Tooltip from '@mui/material/Tooltip';
+import { MRT_TableHeadCellFilterContainer } from './MRT_TableHeadCellFilterContainer';
 import { type MRT_Header, type MRT_TableInstance } from '../types';
 
 interface Props<TData extends Record<string, any>> {
@@ -11,13 +13,14 @@ interface Props<TData extends Record<string, any>> {
 }
 
 export const MRT_TableHeadCellFilterLabel = <
-  TData extends Record<string, any>,
+  TData extends Record<string, any> = {},
 >({
   header,
   table,
 }: Props<TData>) => {
   const {
     options: {
+      columnFilterDisplayMode,
       icons: { FilterAltIcon },
       localization,
     },
@@ -27,71 +30,113 @@ export const MRT_TableHeadCellFilterLabel = <
   const { column } = header;
   const { columnDef } = column;
 
+  const filterValue = column.getFilterValue();
+
+  const [anchorEl, setAnchorEl] = useState<HTMLButtonElement | null>(null);
+
+  const isFilterActive =
+    (Array.isArray(filterValue) && filterValue.some(Boolean)) ||
+    (!!filterValue && !Array.isArray(filterValue));
+
   const isRangeFilter =
-    ['range', 'ranger-slider'].includes(columnDef.filterVariant ?? '') ||
+    columnDef.filterVariant === 'range' ||
     ['between', 'betweenInclusive', 'inNumberRange'].includes(
       columnDef._filterFn,
     );
   const currentFilterOption = columnDef._filterFn;
-  const filterTooltip = localization.filteringByColumn
-    .replace('{column}', String(columnDef.header))
-    .replace(
-      '{filterType}',
-      // @ts-ignore
-      localization[
-        `filter${
-          currentFilterOption?.charAt(0)?.toUpperCase() +
-          currentFilterOption?.slice(1)
-        }`
-      ],
-    )
-    .replace(
-      '{filterValue}',
-      `"${
-        Array.isArray(column.getFilterValue())
-          ? (column.getFilterValue() as [string, string]).join(
-              `" ${isRangeFilter ? localization.and : localization.or} "`,
-            )
-          : (column.getFilterValue() as string)
-      }"`,
-    )
-    .replace('" "', '');
+  const filterTooltip =
+    columnFilterDisplayMode === 'popover' && !isFilterActive
+      ? localization.filterByColumn?.replace(
+          '{column}',
+          String(columnDef.header),
+        )
+      : localization.filteringByColumn
+          .replace('{column}', String(columnDef.header))
+          .replace(
+            '{filterType}',
+            currentFilterOption
+              ? // @ts-ignore
+                localization[
+                  `filter${
+                    currentFilterOption?.charAt(0)?.toUpperCase() +
+                    currentFilterOption?.slice(1)
+                  }`
+                ]
+              : '',
+          )
+          .replace(
+            '{filterValue}',
+            `"${
+              Array.isArray(column.getFilterValue())
+                ? (column.getFilterValue() as [string, string]).join(
+                    `" ${isRangeFilter ? localization.and : localization.or} "`,
+                  )
+                : (column.getFilterValue() as string)
+            }"`,
+          )
+          .replace('" "', '');
 
   return (
-    <Grow
-      unmountOnExit
-      in={
-        (!!column.getFilterValue() && !isRangeFilter) ||
-        (isRangeFilter && // @ts-ignore
-          (!!column.getFilterValue()?.[0] || !!column.getFilterValue()?.[1]))
-      }
-    >
-      <Box component="span" sx={{ flex: '0 0' }}>
-        <Tooltip arrow placement="top" title={filterTooltip}>
-          <IconButton
-            disableRipple
-            onClick={(event: MouseEvent<HTMLButtonElement>) => {
-              setShowColumnFilters(true);
-              queueMicrotask(() => {
-                filterInputRefs.current[`${column.id}-0`]?.focus();
-                filterInputRefs.current[`${column.id}-0`]?.select();
-              });
-              event.stopPropagation();
-            }}
-            size="small"
-            sx={{
-              height: '12px',
-              m: 0,
-              opacity: 0.8,
-              p: '2px',
-              transform: 'scale(0.66)',
-              width: '12px',
-            }}
-          >
-            <FilterAltIcon />
-          </IconButton>
-        </Tooltip>
-      </Box>
-    </Grow>
+    <>
+      <Grow
+        in={
+          columnFilterDisplayMode === 'popover' ||
+          (!!column.getFilterValue() && !isRangeFilter) ||
+          (isRangeFilter && // @ts-ignore
+            (!!column.getFilterValue()?.[0] || !!column.getFilterValue()?.[1]))
+        }
+        unmountOnExit
+      >
+        <Box component="span" sx={{ flex: '0 0' }}>
+          <Tooltip arrow placement="top" title={filterTooltip}>
+            <IconButton
+              disableRipple
+              onClick={(event: MouseEvent<HTMLButtonElement>) => {
+                if (columnFilterDisplayMode === 'popover') {
+                  setAnchorEl(event.currentTarget);
+                } else {
+                  setShowColumnFilters(true);
+                }
+                queueMicrotask(() => {
+                  filterInputRefs.current[`${column.id}-0`]?.focus();
+                  filterInputRefs.current[`${column.id}-0`]?.select();
+                });
+                event.stopPropagation();
+              }}
+              sx={{
+                height: '16px',
+                opacity: 0.8,
+                p: '8px',
+                transform: 'scale(0.75)',
+                width: '16px',
+              }}
+            >
+              <FilterAltIcon />
+            </IconButton>
+          </Tooltip>
+        </Box>
+      </Grow>
+      <Popover
+        anchorEl={anchorEl}
+        anchorOrigin={{
+          horizontal: 'center',
+          vertical: 'top',
+        }}
+        onClose={(event) => {
+          //@ts-ignore
+          event.stopPropagation();
+          setAnchorEl(null);
+        }}
+        open={!!anchorEl}
+        transformOrigin={{
+          horizontal: 'center',
+          vertical: 'bottom',
+        }}
+      >
+        <Box sx={{ p: '1rem' }}>
+          <MRT_TableHeadCellFilterContainer header={header} table={table} />
+        </Box>
+      </Popover>
+    </>
   );
 };

package/src/head/MRT_TableHeadCellGrabHandle.tsx

@@ -22,7 +22,7 @@ export const MRT_TableHeadCellGrabHandle = <TData extends Record<string, any>>({
     setHoveredColumn,
   } = table;
   const { columnDef } = column;
-  const { hoveredColumn, draggingColumn, columnOrder } = getState();
+  const { columnOrder, draggingColumn, hoveredColumn } = getState();
 
   const iconButtonProps = {
     ...parseFromValuesOrFunc(muiColumnDragHandleProps, { column, table }),
@@ -62,8 +62,8 @@ export const MRT_TableHeadCellGrabHandle = <TData extends Record<string, any>>({
   return (
     <MRT_GrabHandleButton
       iconButtonProps={iconButtonProps}
-      onDragStart={handleDragStart}
       onDragEnd={handleDragEnd}
+      onDragStart={handleDragStart}
       table={table}
     />
   );

package/src/head/MRT_TableHeadCellResizeHandle.tsx

@@ -33,23 +33,23 @@ export const MRT_TableHeadCellResizeHandle = <
       }}
       onMouseDown={header.getResizeHandler()}
       onTouchStart={header.getResizeHandler()}
-      sx={(theme) => ({
-        cursor: 'col-resize',
-        mr: density === 'compact' ? '-0.75rem' : '-1rem',
-        position: 'absolute',
-        right: '4px',
-        px: '4px',
-        '&:active > hr': {
-          backgroundColor: theme.palette.info.main,
-          opacity: 1,
-        },
-      })}
       style={{
         transform:
           column.getIsResizing() && columnResizeMode === 'onEnd'
             ? `translateX(${getState().columnSizingInfo.deltaOffset ?? 0}px)`
             : undefined,
       }}
+      sx={(theme) => ({
+        '&:active > hr': {
+          backgroundColor: theme.palette.info.main,
+          opacity: 1,
+        },
+        cursor: 'col-resize',
+        mr: density === 'compact' ? '-0.75rem' : '-1rem',
+        position: 'absolute',
+        px: '4px',
+        right: '4px',
+      })}
     >
       <Divider
         className="Mui-TableHeadCell-ResizeHandle-Divider"

package/src/head/MRT_TableHeadCellSortLabel.tsx

@@ -1,8 +1,8 @@
 import Badge from '@mui/material/Badge';
+import { type TableCellProps } from '@mui/material/TableCell';
 import TableSortLabel from '@mui/material/TableSortLabel';
 import Tooltip from '@mui/material/Tooltip';
 import { type MRT_Header, type MRT_TableInstance } from '../types';
-import { type TableCellProps } from '@mui/material/TableCell';
 
 interface Props<TData extends Record<string, any>> {
   header: MRT_Header<TData>;
@@ -41,25 +41,25 @@ export const MRT_TableHeadCellSortLabel = <TData extends Record<string, any>>({
         overlap="circular"
       >
         <TableSortLabel
-          aria-label={sortTooltip}
+          IconComponent={ArrowDownwardIcon}
           active={!!column.getIsSorted()}
+          aria-label={sortTooltip}
           direction={
             column.getIsSorted()
               ? (column.getIsSorted() as 'asc' | 'desc')
               : undefined
           }
+          onClick={(e) => {
+            e.stopPropagation();
+            header.column.getToggleSortingHandler()?.(e);
+          }}
           sx={{
             flex: '0 0',
-            width: '2.4ch',
             transform:
               tableCellProps?.align !== 'right'
                 ? 'translateX(-0.5ch)'
                 : undefined,
-          }}
-          IconComponent={ArrowDownwardIcon}
-          onClick={(e) => {
-            e.stopPropagation();
-            header.column.getToggleSortingHandler()?.(e);
+            width: '2.4ch',
           }}
         />
       </Badge>

package/src/head/MRT_TableHeadRow.tsx

@@ -1,13 +1,13 @@
+import { type VirtualItem } from '@tanstack/react-virtual';
 import TableRow from '@mui/material/TableRow';
 import { alpha, lighten } from '@mui/material/styles';
 import { MRT_TableHeadCell } from './MRT_TableHeadCell';
-import { type VirtualItem } from '@tanstack/react-virtual';
+import { parseFromValuesOrFunc } from '../column.utils';
 import {
   type MRT_Header,
   type MRT_HeaderGroup,
   type MRT_TableInstance,
 } from '../types';
-import { parseFromValuesOrFunc } from '../column.utils';
 
 interface Props<TData extends Record<string, any>> {
   headerGroup: MRT_HeaderGroup<TData>;

package/src/hooks/useMRT_DisplayColumns.tsx

@@ -1,29 +1,29 @@
 import { type RefObject, useMemo } from 'react';
-import { showExpandColumn } from '../column.utils';
-import { MRT_TableBodyRowPinButton } from '../body/MRT_TableBodyRowPinButton';
 import { MRT_TableBodyRowGrabHandle } from '../body';
+import { MRT_TableBodyRowPinButton } from '../body/MRT_TableBodyRowPinButton';
 import { MRT_ExpandAllButton } from '../buttons/MRT_ExpandAllButton';
 import { MRT_ExpandButton } from '../buttons/MRT_ExpandButton';
 import { MRT_ToggleRowActionMenuButton } from '../buttons/MRT_ToggleRowActionMenuButton';
+import { showExpandColumn } from '../column.utils';
 import { MRT_SelectCheckbox } from '../inputs/MRT_SelectCheckbox';
 import {
   type MRT_ColumnDef,
   type MRT_ColumnOrderState,
-  type MRT_GroupingState,
   type MRT_DefinedTableOptions,
+  type MRT_GroupingState,
   type MRT_Row,
 } from '../types';
 
 interface Params<TData extends Record<string, any>> {
-  creatingRow: MRT_Row<TData> | null;
   columnOrder: MRT_ColumnOrderState;
+  creatingRow: MRT_Row<TData> | null;
   grouping: MRT_GroupingState;
   tableOptions: MRT_DefinedTableOptions<TData>;
 }
 
 export const useMRT_DisplayColumns = <TData extends Record<string, any>>({
-  creatingRow,
   columnOrder,
+  creatingRow,
   grouping,
   tableOptions,
 }: Params<TData>) => {

package/src/hooks/useMRT_Effects.ts

@@ -12,10 +12,10 @@ export const useMRT_Effects = <TData extends Record<string, any> = {}>(
   const {
     globalFilter,
     isFullScreen,
-    pagination,
-    sorting,
     isLoading,
+    pagination,
     showSkeletons,
+    sorting,
   } = getState();
 
   const isMounted = useRef(false);
@@ -38,8 +38,8 @@ export const useMRT_Effects = <TData extends Record<string, any> = {}>(
         if (!previousTop.current) return;
         //restore scroll position
         window.scrollTo({
-          top: -1 * (previousTop.current as number),
           behavior: 'instant',
+          top: -1 * (previousTop.current as number),
         });
       }
     }

package/src/hooks/useMRT_TableInstance.ts

@@ -19,16 +19,14 @@ import {
   getDefaultColumnOrderIds,
   prepareColumns,
 } from '../column.utils';
-import { useMRT_DisplayColumns } from './useMRT_DisplayColumns';
-import { useMRT_Effects } from './useMRT_Effects';
 import {
   type MRT_Cell,
   type MRT_Column,
   type MRT_ColumnDef,
+  type MRT_ColumnFilterFnsState,
   type MRT_ColumnOrderState,
   type MRT_DefinedTableOptions,
   type MRT_DensityState,
-  type MRT_ColumnFilterFnsState,
   type MRT_FilterOption,
   type MRT_GroupingState,
   type MRT_Row,
@@ -36,6 +34,8 @@ import {
   type MRT_TableState,
   type MRT_Updater,
 } from '../types';
+import { useMRT_DisplayColumns } from './useMRT_DisplayColumns';
+import { useMRT_Effects } from './useMRT_Effects';
 
 export const useMRT_TableInstance: <TData extends Record<string, any>>(
   tableOptions: MRT_DefinedTableOptions<TData>,
@@ -104,10 +104,10 @@ export const useMRT_TableInstance: <TData extends Record<string, any>>(
     initialState.grouping ?? [],
   );
   const [hoveredColumn, setHoveredColumn] = useState<
-    MRT_Column<TData> | { id: string } | null
+    { id: string } | MRT_Column<TData> | null
   >(initialState.hoveredColumn ?? null);
   const [hoveredRow, setHoveredRow] = useState<
-    MRT_Row<TData> | { id: string } | null
+    { id: string } | MRT_Row<TData> | null
   >(initialState.hoveredRow ?? null);
   const [isFullScreen, setIsFullScreen] = useState<boolean>(
     initialState?.isFullScreen ?? false,
@@ -207,9 +207,9 @@ export const useMRT_TableInstance: <TData extends Record<string, any>>(
     getSortedRowModel: tableOptions.enableSorting
       ? getSortedRowModel()
       : undefined,
+    getSubRows: (row) => row?.subRows,
     onColumnOrderChange: setColumnOrder,
     onGroupingChange: setGrouping,
-    getSubRows: (row) => row?.subRows,
     ...tableOptions,
     //@ts-ignore
     columns: columnDefs,
@@ -217,9 +217,9 @@ export const useMRT_TableInstance: <TData extends Record<string, any>>(
     globalFilterFn: tableOptions.filterFns?.[globalFilterFn ?? 'fuzzy'],
     initialState,
     state: {
-      creatingRow,
       columnFilterFns,
       columnOrder,
+      creatingRow,
       density,
       draggingColumn,
       draggingRow,
@@ -248,23 +248,24 @@ export const useMRT_TableInstance: <TData extends Record<string, any>>(
     searchInputRef,
     // @ts-ignore
     tableContainerRef,
+    // @ts-ignore
+    tableFooterRef,
     tableHeadCellRefs,
     // @ts-ignore
+    tableHeadRef,
+    // @ts-ignore
     tablePaperRef,
     // @ts-ignore
     topToolbarRef,
-    // @ts-ignore
-    tableFooterRef,
-    // @ts-ignore
-    tableHeadRef,
   };
 
   const setCreatingRow = (row: MRT_Updater<MRT_Row<TData> | null | true>) => {
+    let _row = row;
     if (row === true) {
-      table.setCreatingRow(createRow(table));
-    } else {
-      _setCreatingRow(row as MRT_Row<TData> | null);
+      _row = createRow(table);
     }
+    tableOptions?.onCreatingRowChange?.(_row as MRT_Row<TData> | null) ??
+      _setCreatingRow(_row as MRT_Row<TData> | null);
   };
 
   table.setCreatingRow = setCreatingRow;

package/src/hooks/useMRT_TableOptions.ts

@@ -1,10 +1,10 @@
 import { useMemo } from 'react';
 import { MRT_AggregationFns } from '../aggregationFns';
-import { MRT_FilterFns } from '../filterFns';
-import { MRT_SortingFns } from '../sortingFns';
 import { MRT_DefaultColumn, MRT_DefaultDisplayColumn } from '../column.utils';
-import { MRT_Localization_EN } from '../locales/en';
+import { MRT_FilterFns } from '../filterFns';
 import { MRT_Default_Icons } from '../icons';
+import { MRT_Localization_EN } from '../locales/en';
+import { MRT_SortingFns } from '../sortingFns';
 import { type MRT_DefinedTableOptions, type MRT_TableOptions } from '../types';
 
 export const useMRT_TableOptions: <TData extends Record<string, any>>(

package/src/icons.ts

@@ -13,8 +13,8 @@ import ExpandMoreIcon from '@mui/icons-material/ExpandMore';
 import FilterAltIcon from '@mui/icons-material/FilterAlt';
 import FilterListIcon from '@mui/icons-material/FilterList';
 import FilterListOffIcon from '@mui/icons-material/FilterListOff';
-import FullscreenExitIcon from '@mui/icons-material/FullscreenExit';
 import FullscreenIcon from '@mui/icons-material/Fullscreen';
+import FullscreenExitIcon from '@mui/icons-material/FullscreenExit';
 import KeyboardDoubleArrowDownIcon from '@mui/icons-material/KeyboardDoubleArrowDown';
 import MoreHorizIcon from '@mui/icons-material/MoreHoriz';
 import MoreVertIcon from '@mui/icons-material/MoreVert';
@@ -36,7 +36,6 @@ export interface MRT_Icons {
   DensityLargeIcon: any;
   DensityMediumIcon: any;
   DensitySmallIcon: any;
-  KeyboardDoubleArrowDownIcon: any;
   DragHandleIcon: any;
   DynamicFeedIcon: any;
   EditIcon: any;
@@ -46,6 +45,7 @@ export interface MRT_Icons {
   FilterListOffIcon: any;
   FullscreenExitIcon: any;
   FullscreenIcon: any;
+  KeyboardDoubleArrowDownIcon: any;
   MoreHorizIcon: any;
   MoreVertIcon: any;
   PushPinIcon: any;

package/src/inputs/MRT_EditCellTextField.tsx

@@ -4,8 +4,8 @@ import {
   type KeyboardEvent,
   useState,
 } from 'react';
-import TextField from '@mui/material/TextField';
 import MenuItem from '@mui/material/MenuItem';
+import TextField from '@mui/material/TextField';
 import { type TextFieldProps } from '@mui/material/TextField';
 import { parseFromValuesOrFunc } from '../column.utils';
 import { type MRT_Cell, type MRT_TableInstance } from '../types';
@@ -23,9 +23,9 @@ export const MRT_EditCellTextField = <TData extends Record<string, any>>({
     getState,
     options: { createDisplayMode, editDisplayMode, muiEditTextFieldProps },
     refs: { editInputRefs },
+    setCreatingRow,
     setEditingCell,
     setEditingRow,
-    setCreatingRow,
   } = table;
   const { column, row } = cell;
   const { columnDef } = column;
@@ -100,7 +100,7 @@ export const MRT_EditCellTextField = <TData extends Record<string, any>>({
         }
       }}
       label={
-        ['modal', 'custom'].includes(
+        ['custom', 'modal'].includes(
           (isCreating ? createDisplayMode : editDisplayMode) as string,
         )
           ? column.columnDef.header
@@ -109,7 +109,7 @@ export const MRT_EditCellTextField = <TData extends Record<string, any>>({
       margin="none"
       name={column.id}
       placeholder={
-        !['modal', 'custom'].includes(
+        !['custom', 'modal'].includes(
           (isCreating ? createDisplayMode : editDisplayMode) as string,
         )
           ? columnDef.header
@@ -119,17 +119,17 @@ export const MRT_EditCellTextField = <TData extends Record<string, any>>({
       value={value}
       variant="standard"
       {...textFieldProps}
+      onBlur={handleBlur}
+      onChange={handleChange}
       onClick={(e) => {
         e.stopPropagation();
         textFieldProps?.onClick?.(e);
       }}
-      onBlur={handleBlur}
-      onChange={handleChange}
       onKeyDown={handleEnterKeyDown}
     >
       {textFieldProps.children ??
         columnDef?.editSelectOptions?.map(
-          (option: string | { text: string; value: string }) => {
+          (option: { text: string; value: string } | string) => {
             let value: string;
             let text: string;
             if (typeof option !== 'object') {
@@ -143,10 +143,10 @@ export const MRT_EditCellTextField = <TData extends Record<string, any>>({
               <MenuItem
                 key={value}
                 sx={{
-                  display: 'flex',
-                  m: 0,
                   alignItems: 'center',
+                  display: 'flex',
                   gap: '0.5rem',
+                  m: 0,
                 }}
                 value={value}
               >

package/src/inputs/MRT_FilterCheckbox.tsx

@@ -1,8 +1,8 @@
 import Checkbox from '@mui/material/Checkbox';
 import FormControlLabel from '@mui/material/FormControlLabel';
 import Tooltip from '@mui/material/Tooltip';
-import { type MRT_Column, type MRT_TableInstance } from '../types';
 import { parseFromValuesOrFunc } from '../column.utils';
+import { type MRT_Column, type MRT_TableInstance } from '../types';
 
 interface Props<TData extends Record<string, any>> {
   column: MRT_Column<TData>;
@@ -47,16 +47,12 @@ export const MRT_FilterCheckbox = <TData extends Record<string, any>>({
         control={
           <Checkbox
             checked={column.getFilterValue() === 'true'}
-            indeterminate={column.getFilterValue() === undefined}
             color={
               column.getFilterValue() === undefined ? 'default' : 'primary'
             }
+            indeterminate={column.getFilterValue() === undefined}
             size={density === 'compact' ? 'small' : 'medium'}
             {...checkboxProps}
-            onClick={(e) => {
-              e.stopPropagation();
-              checkboxProps?.onClick?.(e);
-            }}
             onChange={(e, checked) => {
               column.setFilterValue(
                 column.getFilterValue() === undefined
@@ -67,6 +63,10 @@ export const MRT_FilterCheckbox = <TData extends Record<string, any>>({
               );
               checkboxProps?.onChange?.(e, checked);
             }}
+            onClick={(e) => {
+              e.stopPropagation();
+              checkboxProps?.onClick?.(e);
+            }}
             sx={(theme) => ({
               height: '2.5rem',
               width: '2.5rem',
@@ -76,7 +76,7 @@ export const MRT_FilterCheckbox = <TData extends Record<string, any>>({
         }
         disableTypography
         label={checkboxProps.title ?? filterLabel}
-        sx={{ color: 'text.secondary', mt: '-4px', fontWeight: 'normal' }}
+        sx={{ color: 'text.secondary', fontWeight: 'normal', mt: '-4px' }}
         title={undefined}
       />
     </Tooltip>

package/src/inputs/MRT_FilterRangeFields.tsx

@@ -12,7 +12,7 @@ export const MRT_FilterRangeFields = <TData extends Record<string, any>>({
   table,
 }: Props<TData>) => {
   return (
-    <Box sx={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: '1rem' }}>
+    <Box sx={{ display: 'grid', gap: '1rem', gridTemplateColumns: '1fr 1fr' }}>
       <MRT_FilterTextField header={header} rangeFilterIndex={0} table={table} />
       <MRT_FilterTextField header={header} rangeFilterIndex={1} table={table} />
     </Box>