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

package/src/footer/MRT_TableFooter.tsx

@@ -1,6 +1,7 @@
+import { type VirtualItem } from '@tanstack/react-virtual';
 import TableFooter from '@mui/material/TableFooter';
 import { MRT_TableFooterRow } from './MRT_TableFooterRow';
-import { type VirtualItem } from '@tanstack/react-virtual';
+import { parseFromValuesOrFunc } from '../column.utils';
 import { type MRT_TableInstance } from '../types';
 
 interface Props<TData extends Record<string, any>> {
@@ -20,13 +21,13 @@ export const MRT_TableFooter = <TData extends Record<string, any>>({
     getFooterGroups,
     getState,
     options: { enableStickyFooter, layoutMode, muiTableFooterProps },
+    refs: { tableFooterRef },
   } = table;
   const { isFullScreen } = getState();
 
-  const tableFooterProps =
-    muiTableFooterProps instanceof Function
-      ? muiTableFooterProps({ table })
-      : muiTableFooterProps;
+  const tableFooterProps = parseFromValuesOrFunc(muiTableFooterProps, {
+    table,
+  });
 
   const stickFooter =
     (isFullScreen || enableStickyFooter) && enableStickyFooter !== false;
@@ -34,6 +35,13 @@ export const MRT_TableFooter = <TData extends Record<string, any>>({
   return (
     <TableFooter
       {...tableFooterProps}
+      ref={(ref: HTMLTableSectionElement) => {
+        tableFooterRef.current = ref;
+        if (tableFooterProps?.ref) {
+          // @ts-ignore
+          tableFooterProps.ref.current = ref;
+        }
+      }}
       sx={(theme) => ({
         bottom: stickFooter ? 0 : undefined,
         display: layoutMode === 'grid' ? 'grid' : 'table-row-group',
@@ -45,9 +53,7 @@ export const MRT_TableFooter = <TData extends Record<string, any>>({
           : undefined,
         position: stickFooter ? 'sticky' : undefined,
         zIndex: stickFooter ? 1 : undefined,
-        ...(tableFooterProps?.sx instanceof Function
-          ? tableFooterProps?.sx(theme)
-          : (tableFooterProps?.sx as any)),
+        ...(parseFromValuesOrFunc(tableFooterProps?.sx, theme) as any),
       })}
     >
       {getFooterGroups().map((footerGroup) => (

package/src/footer/MRT_TableFooterCell.tsx

@@ -1,5 +1,5 @@
 import TableCell from '@mui/material/TableCell';
-import { getCommonCellStyles } from '../column.utils';
+import { getCommonCellStyles, parseFromValuesOrFunc } from '../column.utils';
 import { type MRT_Header, type MRT_TableInstance } from '../types';
 
 interface Props<TData extends Record<string, any>> {
@@ -20,19 +20,12 @@ export const MRT_TableFooterCell = <TData extends Record<string, any>>({
   const { columnDef } = column;
   const { columnDefType } = columnDef;
 
-  const mTableFooterCellProps =
-    muiTableFooterCellProps instanceof Function
-      ? muiTableFooterCellProps({ column, table })
-      : muiTableFooterCellProps;
-
-  const mcTableFooterCellProps =
-    columnDef.muiTableFooterCellProps instanceof Function
-      ? columnDef.muiTableFooterCellProps({ column, table })
-      : columnDef.muiTableFooterCellProps;
-
   const tableCellProps = {
-    ...mTableFooterCellProps,
-    ...mcTableFooterCellProps,
+    ...parseFromValuesOrFunc(muiTableFooterCellProps, { column, table }),
+    ...parseFromValuesOrFunc(columnDef.muiTableFooterCellProps, {
+      column,
+      table,
+    }),
   };
 
   return (
@@ -56,21 +49,15 @@ export const MRT_TableFooterCell = <TData extends Record<string, any>>({
         ...getCommonCellStyles({
           column,
           table,
-          theme,
           tableCellProps,
+          theme,
         }),
       })}
     >
       <>
         {footer.isPlaceholder
           ? null
-          : (columnDef.Footer instanceof Function
-              ? columnDef.Footer?.({
-                  column,
-                  footer,
-                  table,
-                })
-              : columnDef.Footer) ??
+          : parseFromValuesOrFunc(columnDef.Footer, { column, footer, table }) ??
             columnDef.footer ??
             null}
       </>

package/src/footer/MRT_TableFooterRow.tsx

@@ -1,7 +1,8 @@
+import { type VirtualItem } from '@tanstack/react-virtual';
 import TableRow from '@mui/material/TableRow';
 import { lighten } from '@mui/material/styles';
 import { MRT_TableFooterCell } from './MRT_TableFooterCell';
-import { type VirtualItem } from '@tanstack/react-virtual';
+import { parseFromValuesOrFunc } from '../column.utils';
 import {
   type MRT_Header,
   type MRT_HeaderGroup,
@@ -38,10 +39,10 @@ export const MRT_TableFooterRow = <TData extends Record<string, any>>({
   )
     return null;
 
-  const tableRowProps =
-    muiTableFooterRowProps instanceof Function
-      ? muiTableFooterRowProps({ footerGroup, table })
-      : muiTableFooterRowProps;
+  const tableRowProps = parseFromValuesOrFunc(muiTableFooterRowProps, {
+    footerGroup,
+    table,
+  });
 
   return (
     <TableRow
@@ -50,9 +51,7 @@ export const MRT_TableFooterRow = <TData extends Record<string, any>>({
         backgroundColor: lighten(theme.palette.background.default, 0.04),
         display: layoutMode === 'grid' ? 'flex' : 'table-row',
         width: '100%',
-        ...(tableRowProps?.sx instanceof Function
-          ? tableRowProps?.sx(theme)
-          : (tableRowProps?.sx as any)),
+        ...(parseFromValuesOrFunc(tableRowProps?.sx, theme) as any),
       })}
     >
       {virtualPaddingLeft ? (

package/src/head/MRT_TableHead.tsx

@@ -1,6 +1,7 @@
+import { type VirtualItem } from '@tanstack/react-virtual';
 import TableHead from '@mui/material/TableHead';
 import { MRT_TableHeadRow } from './MRT_TableHeadRow';
-import { type VirtualItem } from '@tanstack/react-virtual';
+import { parseFromValuesOrFunc } from '../column.utils';
 import { type MRT_TableInstance } from '../types';
 
 interface Props<TData extends Record<string, any>> {
@@ -20,28 +21,31 @@ export const MRT_TableHead = <TData extends Record<string, any>>({
     getHeaderGroups,
     getState,
     options: { enableStickyHeader, layoutMode, muiTableHeadProps },
+    refs: { tableHeadRef },
   } = table;
   const { isFullScreen } = getState();
 
-  const tableHeadProps =
-    muiTableHeadProps instanceof Function
-      ? muiTableHeadProps({ table })
-      : muiTableHeadProps;
+  const tableHeadProps = parseFromValuesOrFunc(muiTableHeadProps, { table });
 
   const stickyHeader = enableStickyHeader || isFullScreen;
 
   return (
     <TableHead
       {...tableHeadProps}
+      ref={(ref: HTMLTableSectionElement) => {
+        tableHeadRef.current = ref;
+        if (tableHeadProps?.ref) {
+          // @ts-ignore
+          tableHeadProps.ref.current = ref;
+        }
+      }}
       sx={(theme) => ({
         display: layoutMode === 'grid' ? 'grid' : 'table-row-group',
         opacity: 0.97,
         position: stickyHeader ? 'sticky' : 'relative',
         top: stickyHeader && layoutMode === 'grid' ? 0 : undefined,
         zIndex: stickyHeader ? 2 : undefined,
-        ...(tableHeadProps?.sx instanceof Function
-          ? tableHeadProps?.sx(theme)
-          : (tableHeadProps?.sx as any)),
+        ...(parseFromValuesOrFunc(tableHeadProps?.sx, theme) as any),
       })}
     >
       {getHeaderGroups().map((headerGroup) => (

package/src/head/MRT_TableHeadCell.tsx

@@ -1,7 +1,8 @@
-import { type DragEvent, type ReactNode, useMemo } from 'react';
+import { type DragEvent, useMemo } from 'react';
 import Box from '@mui/material/Box';
 import TableCell from '@mui/material/TableCell';
 import { useTheme } from '@mui/material/styles';
+import { type Theme } from '@mui/material/styles';
 import { MRT_TableHeadCellColumnActionsButton } from './MRT_TableHeadCellColumnActionsButton';
 import { MRT_TableHeadCellFilterContainer } from './MRT_TableHeadCellFilterContainer';
 import { MRT_TableHeadCellFilterLabel } from './MRT_TableHeadCellFilterLabel';
@@ -9,7 +10,7 @@ import { MRT_TableHeadCellGrabHandle } from './MRT_TableHeadCellGrabHandle';
 import { MRT_TableHeadCellResizeHandle } from './MRT_TableHeadCellResizeHandle';
 import { MRT_TableHeadCellSortLabel } from './MRT_TableHeadCellSortLabel';
 import { getCommonCellStyles } from '../column.utils';
-import { type Theme } from '@mui/material/styles';
+import { parseFromValuesOrFunc } from '../column.utils';
 import { type MRT_Header, type MRT_TableInstance } from '../types';
 
 interface Props<TData extends Record<string, any>> {
@@ -25,6 +26,7 @@ export const MRT_TableHeadCell = <TData extends Record<string, any>>({
   const {
     getState,
     options: {
+      columnFilterDisplayMode,
       enableColumnActions,
       enableColumnDragging,
       enableColumnOrdering,
@@ -47,19 +49,12 @@ export const MRT_TableHeadCell = <TData extends Record<string, any>>({
   const { columnDef } = column;
   const { columnDefType } = columnDef;
 
-  const mTableHeadCellProps =
-    muiTableHeadCellProps instanceof Function
-      ? muiTableHeadCellProps({ column, table })
-      : muiTableHeadCellProps;
-
-  const mcTableHeadCellProps =
-    columnDef.muiTableHeadCellProps instanceof Function
-      ? columnDef.muiTableHeadCellProps({ column, table })
-      : columnDef.muiTableHeadCellProps;
-
   const tableCellProps = {
-    ...mTableHeadCellProps,
-    ...mcTableHeadCellProps,
+    ...parseFromValuesOrFunc(muiTableHeadCellProps, { column, table }),
+    ...parseFromValuesOrFunc(columnDef.muiTableHeadCellProps, {
+      column,
+      table,
+    }),
   };
 
   const showColumnActions =
@@ -113,13 +108,11 @@ export const MRT_TableHeadCell = <TData extends Record<string, any>>({
   };
 
   const headerElement =
-    columnDef?.Header instanceof Function
-      ? columnDef?.Header?.({
-          column,
-          header,
-          table,
-        })
-      : columnDef?.Header ?? (columnDef.header as ReactNode);
+    parseFromValuesOrFunc(columnDef.Header, {
+      column,
+      header,
+      table,
+    }) ?? columnDef.header;
 
   return (
     <TableCell
@@ -216,14 +209,14 @@ export const MRT_TableHeadCell = <TData extends Record<string, any>>({
             <Box
               className="Mui-TableHeadCell-Content-Wrapper"
               sx={{
+                '&:hover': {
+                  textOverflow: 'clip',
+                },
                 minWidth: `${Math.min(columnDef.header?.length ?? 0, 5)}ch`,
                 overflow: columnDefType === 'data' ? 'hidden' : undefined,
                 textOverflow: 'ellipsis',
                 whiteSpace:
                   (columnDef.header?.length ?? 0) < 20 ? 'nowrap' : 'normal',
-                '&:hover': {
-                  textOverflow: 'clip',
-                },
               }}
               title={columnDefType === 'data' ? columnDef.header : undefined}
             >
@@ -267,7 +260,7 @@ export const MRT_TableHeadCell = <TData extends Record<string, any>>({
           )}
         </Box>
       )}
-      {column.getCanFilter() && (
+      {columnFilterDisplayMode === 'subheader' && column.getCanFilter() && (
         <MRT_TableHeadCellFilterContainer header={header} table={table} />
       )}
     </TableCell>

package/src/head/MRT_TableHeadCellColumnActionsButton.tsx

@@ -1,6 +1,7 @@
 import { type MouseEvent, useState } from 'react';
 import IconButton from '@mui/material/IconButton';
 import Tooltip from '@mui/material/Tooltip';
+import { parseFromValuesOrFunc } from '../column.utils';
 import { MRT_ColumnActionMenu } from '../menus/MRT_ColumnActionMenu';
 import { type MRT_Header, type MRT_TableInstance } from '../types';
 
@@ -17,6 +18,7 @@ export const MRT_TableHeadCellColumnActionsButton = <
 }: Props<TData>) => {
   const {
     options: {
+      columnFilterDisplayMode,
       icons: { MoreVertIcon },
       localization,
       muiColumnActionsButtonProps,
@@ -25,7 +27,7 @@ export const MRT_TableHeadCellColumnActionsButton = <
   const { column } = header;
   const { columnDef } = column;
 
-  const [anchorEl, setAnchorEl] = useState<null | HTMLElement>(null);
+  const [anchorEl, setAnchorEl] = useState<HTMLElement | null>(null);
 
   const handleClick = (event: MouseEvent<HTMLElement>) => {
     event.stopPropagation();
@@ -33,22 +35,15 @@ export const MRT_TableHeadCellColumnActionsButton = <
     setAnchorEl(event.currentTarget);
   };
 
-  const mTableHeadCellColumnActionsButtonProps =
-    muiColumnActionsButtonProps instanceof Function
-      ? muiColumnActionsButtonProps({ column, table })
-      : muiColumnActionsButtonProps;
-
-  const mcTableHeadCellColumnActionsButtonProps =
-    columnDef.muiColumnActionsButtonProps instanceof Function
-      ? columnDef.muiColumnActionsButtonProps({
-          column,
-          table,
-        })
-      : columnDef.muiColumnActionsButtonProps;
-
   const iconButtonProps = {
-    ...mTableHeadCellColumnActionsButtonProps,
-    ...mcTableHeadCellColumnActionsButtonProps,
+    ...parseFromValuesOrFunc(muiColumnActionsButtonProps, {
+      column,
+      table,
+    }),
+    ...parseFromValuesOrFunc(columnDef.muiColumnActionsButtonProps, {
+      column,
+      table,
+    }),
   };
 
   return (
@@ -66,18 +61,18 @@ export const MRT_TableHeadCellColumnActionsButton = <
           size="small"
           {...iconButtonProps}
           sx={(theme) => ({
+            '&:hover': {
+              opacity: 1,
+            },
             height: '2rem',
             m: '-8px -4px',
             opacity: 0.5,
-            transform: 'scale(0.85) translateX(-4px)',
+            transform: `scale(0.85) ${
+              columnFilterDisplayMode !== 'popover' ? 'translateX(-4px)' : ''
+            }`,
             transition: 'opacity 150ms',
             width: '2rem',
-            '&:hover': {
-              opacity: 1,
-            },
-            ...(iconButtonProps?.sx instanceof Function
-              ? iconButtonProps.sx(theme)
-              : (iconButtonProps?.sx as any)),
+            ...(parseFromValuesOrFunc(iconButtonProps?.sx, theme) as any),
           })}
           title={undefined}
         >

package/src/head/MRT_TableHeadCellFilterContainer.tsx

@@ -1,8 +1,8 @@
 import Collapse from '@mui/material/Collapse';
-import { MRT_FilterRangeFields } from '../inputs/MRT_FilterRangeFields';
-import { MRT_FilterTextField } from '../inputs/MRT_FilterTextField';
 import { MRT_FilterCheckbox } from '../inputs/MRT_FilterCheckbox';
+import { MRT_FilterRangeFields } from '../inputs/MRT_FilterRangeFields';
 import { MRT_FilterRangeSlider } from '../inputs/MRT_FilterRangeSlider';
+import { MRT_FilterTextField } from '../inputs/MRT_FilterTextField';
 import { type MRT_Header, type MRT_TableInstance } from '../types';
 
 interface Props<TData extends Record<string, any>> {
@@ -16,13 +16,20 @@ export const MRT_TableHeadCellFilterContainer = <
   header,
   table,
 }: Props<TData>) => {
-  const { getState } = table;
+  const {
+    getState,
+    options: { columnFilterDisplayMode },
+  } = table;
   const { showColumnFilters } = getState();
   const { column } = header;
   const { columnDef } = column;
 
   return (
-    <Collapse in={showColumnFilters} mountOnEnter unmountOnExit>
+    <Collapse
+      in={showColumnFilters || columnFilterDisplayMode === 'popover'}
+      mountOnEnter
+      unmountOnExit
+    >
       {columnDef.filterVariant === 'checkbox' ? (
         <MRT_FilterCheckbox column={column} table={table} />
       ) : columnDef.filterVariant === 'range-slider' ? (

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

@@ -1,6 +1,6 @@
 import { type DragEvent, type RefObject } from 'react';
 import { MRT_GrabHandleButton } from '../buttons/MRT_GrabHandleButton';
-import { reorderColumn } from '../column.utils';
+import { parseFromValuesOrFunc, reorderColumn } from '../column.utils';
 import { type MRT_Column, type MRT_TableInstance } from '../types';
 
 interface Props<TData extends Record<string, any>> {
@@ -22,21 +22,14 @@ export const MRT_TableHeadCellGrabHandle = <TData extends Record<string, any>>({
     setHoveredColumn,
   } = table;
   const { columnDef } = column;
-  const { hoveredColumn, draggingColumn, columnOrder } = getState();
-
-  const mIconButtonProps =
-    muiColumnDragHandleProps instanceof Function
-      ? muiColumnDragHandleProps({ column, table })
-      : muiColumnDragHandleProps;
-
-  const mcIconButtonProps =
-    columnDef.muiColumnDragHandleProps instanceof Function
-      ? columnDef.muiColumnDragHandleProps({ column, table })
-      : columnDef.muiColumnDragHandleProps;
+  const { columnOrder, draggingColumn, hoveredColumn } = getState();
 
   const iconButtonProps = {
-    ...mIconButtonProps,
-    ...mcIconButtonProps,
+    ...parseFromValuesOrFunc(muiColumnDragHandleProps, { column, table }),
+    ...parseFromValuesOrFunc(columnDef.muiColumnDragHandleProps, {
+      column,
+      table,
+    }),
   };
 
   const handleDragStart = (event: DragEvent<HTMLButtonElement>) => {
@@ -69,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}
     />
   );