material-react-table 2.0.0-alpha.5 → 2.0.0-alpha.6

package/dist/esm/types/column.utils.d.ts

@@ -1,5 +1,6 @@
 import { type ReactNode } from 'react';
 import { type Renderable, type Row } from '@tanstack/react-table';
+import { type Range } from '@tanstack/react-virtual';
 import { type TableCellProps } from '@mui/material/TableCell';
 import { type Theme } from '@mui/material/styles';
 import { type MRT_AggregationFns } from './aggregationFns';
@@ -144,3 +145,4 @@ export declare const parseFromValuesOrFunc: <T, U>(fn: T | ((arg: U) => T) | und
 export declare const parseCSSVarId: (id: string) => string;
 export declare const flexRender: (Comp: Renderable<any>, props: any) => JSX.Element | ReactNode;
 export declare const createRow: <TData extends Record<string, any>>(table: MRT_TableInstance<TData>, originalRow?: TData | undefined) => MRT_Row<TData>;
+export declare const extraIndexRangeExtractor: (range: Range, draggingIndex: number) => number[];

package/dist/esm/types/types.d.ts

@@ -180,12 +180,8 @@ export type MRT_TableInstance<TData extends Record<string, any>> = Omit<Table<TD
     setEditingCell: Dispatch<SetStateAction<MRT_Cell<TData> | null>>;
     setEditingRow: Dispatch<SetStateAction<MRT_Row<TData> | null>>;
     setGlobalFilterFn: Dispatch<SetStateAction<MRT_FilterOption>>;
-    setHoveredColumn: Dispatch<SetStateAction<{
-        id: string;
-    } | MRT_Column<TData> | null>>;
-    setHoveredRow: Dispatch<SetStateAction<{
-        id: string;
-    } | MRT_Row<TData> | null>>;
+    setHoveredColumn: Dispatch<SetStateAction<Partial<MRT_Column<TData>> | null>>;
+    setHoveredRow: Dispatch<SetStateAction<Partial<MRT_Row<TData>> | null>>;
     setIsFullScreen: Dispatch<SetStateAction<boolean>>;
     setShowAlertBanner: Dispatch<SetStateAction<boolean>>;
     setShowColumnFilters: Dispatch<SetStateAction<boolean>>;
@@ -205,12 +201,8 @@ export type MRT_TableState<TData extends Record<string, any>> = TableState & {
     editingCell: MRT_Cell<TData> | null;
     editingRow: MRT_Row<TData> | null;
     globalFilterFn: MRT_FilterOption;
-    hoveredColumn: {
-        id: string;
-    } | MRT_Column<TData> | null;
-    hoveredRow: {
-        id: string;
-    } | MRT_Row<TData> | null;
+    hoveredColumn: Partial<MRT_Column<TData>> | null;
+    hoveredRow: Partial<MRT_Row<TData>> | null;
     isFullScreen: boolean;
     isLoading: boolean;
     isSaving: boolean;
@@ -727,12 +719,8 @@ export type MRT_TableOptions<TData extends Record<string, any>> = Omit<Partial<T
         values: Record<LiteralUnion<string & DeepKeys<TData>>, any>;
     }) => Promise<void> | void;
     onGlobalFilterFnChange?: OnChangeFn<MRT_FilterOption>;
-    onHoveredColumnChange?: OnChangeFn<{
-        id: string;
-    } | MRT_Column<TData> | null>;
-    onHoveredRowChange?: OnChangeFn<{
-        id: string;
-    } | MRT_Row<TData> | null>;
+    onHoveredColumnChange?: OnChangeFn<Partial<MRT_Column<TData>> | null>;
+    onHoveredRowChange?: OnChangeFn<Partial<MRT_Row<TData>> | null>;
     onIsFullScreenChange?: OnChangeFn<boolean>;
     onShowAlertBannerChange?: OnChangeFn<boolean>;
     onShowColumnFiltersChange?: OnChangeFn<boolean>;

package/dist/index.d.ts

@@ -3,7 +3,7 @@ import { MutableRefObject, Dispatch, SetStateAction, ReactNode, RefObject, DragE
 import * as _tanstack_react_table from '@tanstack/react-table';
 import { Row, Table, TableState, ColumnDef, DeepKeys, Column, Header, HeaderGroup, Cell, AggregationFn, SortingFn, FilterFn, TableOptions, OnChangeFn, RowPinningPosition, ColumnOrderState, GroupingState, Renderable } from '@tanstack/react-table';
 export { 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, VisibilityState as MRT_VisibilityState } from '@tanstack/react-table';
-import { Virtualizer, VirtualizerOptions, VirtualItem } from '@tanstack/react-virtual';
+import { Virtualizer, VirtualizerOptions, VirtualItem, Range } from '@tanstack/react-virtual';
 export { VirtualItem as MRT_VirtualItem, Virtualizer as MRT_Virtualizer, VirtualizerOptions as MRT_VirtualizerOptions } from '@tanstack/react-virtual';
 import { AlertProps } from '@mui/material/Alert';
 import { AutocompleteProps } from '@mui/material/Autocomplete';
@@ -308,12 +308,8 @@ type MRT_TableInstance<TData extends Record<string, any>> = Omit<Table<TData>, '
     setEditingCell: Dispatch<SetStateAction<MRT_Cell<TData> | null>>;
     setEditingRow: Dispatch<SetStateAction<MRT_Row<TData> | null>>;
     setGlobalFilterFn: Dispatch<SetStateAction<MRT_FilterOption>>;
-    setHoveredColumn: Dispatch<SetStateAction<{
-        id: string;
-    } | MRT_Column<TData> | null>>;
-    setHoveredRow: Dispatch<SetStateAction<{
-        id: string;
-    } | MRT_Row<TData> | null>>;
+    setHoveredColumn: Dispatch<SetStateAction<Partial<MRT_Column<TData>> | null>>;
+    setHoveredRow: Dispatch<SetStateAction<Partial<MRT_Row<TData>> | null>>;
     setIsFullScreen: Dispatch<SetStateAction<boolean>>;
     setShowAlertBanner: Dispatch<SetStateAction<boolean>>;
     setShowColumnFilters: Dispatch<SetStateAction<boolean>>;
@@ -333,12 +329,8 @@ type MRT_TableState<TData extends Record<string, any>> = TableState & {
     editingCell: MRT_Cell<TData> | null;
     editingRow: MRT_Row<TData> | null;
     globalFilterFn: MRT_FilterOption;
-    hoveredColumn: {
-        id: string;
-    } | MRT_Column<TData> | null;
-    hoveredRow: {
-        id: string;
-    } | MRT_Row<TData> | null;
+    hoveredColumn: Partial<MRT_Column<TData>> | null;
+    hoveredRow: Partial<MRT_Row<TData>> | null;
     isFullScreen: boolean;
     isLoading: boolean;
     isSaving: boolean;
@@ -855,12 +847,8 @@ type MRT_TableOptions<TData extends Record<string, any>> = Omit<Partial<TableOpt
         values: Record<LiteralUnion<string & DeepKeys<TData>>, any>;
     }) => Promise<void> | void;
     onGlobalFilterFnChange?: OnChangeFn<MRT_FilterOption>;
-    onHoveredColumnChange?: OnChangeFn<{
-        id: string;
-    } | MRT_Column<TData> | null>;
-    onHoveredRowChange?: OnChangeFn<{
-        id: string;
-    } | MRT_Row<TData> | null>;
+    onHoveredColumnChange?: OnChangeFn<Partial<MRT_Column<TData>> | null>;
+    onHoveredRowChange?: OnChangeFn<Partial<MRT_Row<TData>> | null>;
     onIsFullScreenChange?: OnChangeFn<boolean>;
     onShowAlertBannerChange?: OnChangeFn<boolean>;
     onShowColumnFiltersChange?: OnChangeFn<boolean>;
@@ -1240,6 +1228,7 @@ declare const parseFromValuesOrFunc: <T, U>(fn: T | ((arg: U) => T) | undefined,
 declare const parseCSSVarId: (id: string) => string;
 declare const flexRender: (Comp: Renderable<any>, props: any) => JSX.Element | ReactNode;
 declare const createRow: <TData extends Record<string, any>>(table: MRT_TableInstance<TData>, originalRow?: TData | undefined) => MRT_Row<TData>;
+declare const extraIndexRangeExtractor: (range: Range, draggingIndex: number) => number[];
 
 interface Props$y<TData extends Record<string, any>> {
     table: MRT_TableInstance<TData>;
@@ -1498,4 +1487,4 @@ declare const MRT_TopToolbar: <TData extends Record<string, any>>({ table, }: Pr
 
 declare const useMaterialReactTable: <TData extends Record<string, any>>(tableOptions: MRT_TableOptions<TData>) => MRT_TableInstance<TData>;
 
-export { type LiteralUnion, type MRT_AggregationFn, MRT_AggregationFns, type MRT_AggregationOption, MRT_BottomToolbar, type MRT_Cell, type MRT_Column, MRT_ColumnActionMenu, type MRT_ColumnDef, type MRT_ColumnFilterFnsState, MRT_ColumnPinningButtons, MRT_CopyButton, MRT_DefaultColumn, MRT_DefaultDisplayColumn, type MRT_DefinedColumnDef, type MRT_DefinedTableOptions, type MRT_DensityState, type MRT_DisplayColumnIds, MRT_EditActionButtons, MRT_EditCellTextField, MRT_EditRowModal, MRT_ExpandAllButton, MRT_ExpandButton, MRT_FilterCheckbox, type MRT_FilterFn, MRT_FilterFns, type MRT_FilterOption, MRT_FilterOptionMenu, MRT_FilterRangeFields, MRT_FilterRangeSlider, MRT_FilterTextField, MRT_GlobalFilterTextField, MRT_GrabHandleButton, type MRT_Header, type MRT_HeaderGroup, type MRT_Icons, type MRT_InternalFilterOption, MRT_LinearProgressBar, type MRT_Localization, type MRT_Row, MRT_RowActionMenu, type MRT_RowModel, MRT_RowPinButton, MRT_SelectCheckbox, MRT_ShowHideColumnsButton, MRT_ShowHideColumnsMenu, MRT_ShowHideColumnsMenuItems, type MRT_SortingFn, MRT_SortingFns, type MRT_SortingOption, 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, type MRT_TableInstance, type MRT_TableOptions, MRT_TablePagination, MRT_TablePaper, type MRT_TableState, 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, type Prettify, type Xor, commonListItemStyles, commonMenuItemStyles, commonToolbarStyles, createRow, flexRender, getAllLeafColumnDefs, getCanRankRows, getColumnId, getCommonCellStyles, getDefaultColumnFilterFn, getDefaultColumnOrderIds, getIsFirstColumn, getIsFirstRightPinnedColumn, getIsLastColumn, getIsLastLeftPinnedColumn, getLeadingDisplayColumnIds, getTotalRight, getTrailingDisplayColumnIds, mrtFilterOptions, parseCSSVarId, parseFromValuesOrFunc, prepareColumns, rankGlobalFuzzy, reorderColumn, showExpandColumn, useMaterialReactTable };
+export { type LiteralUnion, type MRT_AggregationFn, MRT_AggregationFns, type MRT_AggregationOption, MRT_BottomToolbar, type MRT_Cell, type MRT_Column, MRT_ColumnActionMenu, type MRT_ColumnDef, type MRT_ColumnFilterFnsState, MRT_ColumnPinningButtons, MRT_CopyButton, MRT_DefaultColumn, MRT_DefaultDisplayColumn, type MRT_DefinedColumnDef, type MRT_DefinedTableOptions, type MRT_DensityState, type MRT_DisplayColumnIds, MRT_EditActionButtons, MRT_EditCellTextField, MRT_EditRowModal, MRT_ExpandAllButton, MRT_ExpandButton, MRT_FilterCheckbox, type MRT_FilterFn, MRT_FilterFns, type MRT_FilterOption, MRT_FilterOptionMenu, MRT_FilterRangeFields, MRT_FilterRangeSlider, MRT_FilterTextField, MRT_GlobalFilterTextField, MRT_GrabHandleButton, type MRT_Header, type MRT_HeaderGroup, type MRT_Icons, type MRT_InternalFilterOption, MRT_LinearProgressBar, type MRT_Localization, type MRT_Row, MRT_RowActionMenu, type MRT_RowModel, MRT_RowPinButton, MRT_SelectCheckbox, MRT_ShowHideColumnsButton, MRT_ShowHideColumnsMenu, MRT_ShowHideColumnsMenuItems, type MRT_SortingFn, MRT_SortingFns, type MRT_SortingOption, 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, type MRT_TableInstance, type MRT_TableOptions, MRT_TablePagination, MRT_TablePaper, type MRT_TableState, 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, type Prettify, type Xor, commonListItemStyles, commonMenuItemStyles, commonToolbarStyles, createRow, extraIndexRangeExtractor, flexRender, getAllLeafColumnDefs, getCanRankRows, getColumnId, getCommonCellStyles, getDefaultColumnFilterFn, getDefaultColumnOrderIds, getIsFirstColumn, getIsFirstRightPinnedColumn, getIsLastColumn, getIsLastLeftPinnedColumn, getLeadingDisplayColumnIds, getTotalRight, getTrailingDisplayColumnIds, mrtFilterOptions, parseCSSVarId, parseFromValuesOrFunc, prepareColumns, rankGlobalFuzzy, reorderColumn, showExpandColumn, useMaterialReactTable };

package/package.json

@@ -1,5 +1,5 @@
 {
-  "version": "2.0.0-alpha.5",
+  "version": "2.0.0-alpha.6",
   "license": "MIT",
   "name": "material-react-table",
   "description": "A fully featured Material UI V5 implementation of TanStack React Table V8, written from the ground up in TypeScript.",

package/src/body/MRT_TableBody.tsx

@@ -1,5 +1,6 @@
-import { memo, useMemo } from 'react';
+import { memo, useCallback, useMemo } from 'react';
 import {
+  type Range,
   type VirtualItem,
   type Virtualizer,
   useVirtualizer,
@@ -7,7 +8,11 @@ import {
 import TableBody from '@mui/material/TableBody';
 import Typography from '@mui/material/Typography';
 import { MRT_TableBodyRow, Memo_MRT_TableBodyRow } from './MRT_TableBodyRow';
-import { getCanRankRows, parseFromValuesOrFunc } from '../column.utils';
+import {
+  extraIndexRangeExtractor,
+  getCanRankRows,
+  parseFromValuesOrFunc,
+} from '../column.utils';
 import { rankGlobalFuzzy } from '../sortingFns';
 import { type MRT_Row, type MRT_TableInstance } from '../types';
 
@@ -60,6 +65,7 @@ export const MRT_TableBody = <TData extends Record<string, any>>({
   const {
     columnFilters,
     density,
+    draggingRow,
     expanded,
     globalFilter,
     isFullScreen,
@@ -152,6 +158,12 @@ export const MRT_TableBody = <TData extends Record<string, any>>({
             ? (element) => element?.getBoundingClientRect().height
             : undefined,
         overscan: 4,
+        rangeExtractor: useCallback(
+          (range: Range) => {
+            return extraIndexRangeExtractor(range, draggingRow?.index ?? 0);
+          },
+          [draggingRow],
+        ),
         ...rowVirtualizerProps,
       })
     : undefined;
@@ -213,12 +225,16 @@ export const MRT_TableBody = <TData extends Record<string, any>>({
         {tableBodyProps?.children ??
           (!rows.length ? (
             <tr
-              style={{ display: layoutMode?.startsWith('grid') ? 'grid' : undefined }}
+              style={{
+                display: layoutMode?.startsWith('grid') ? 'grid' : undefined,
+              }}
             >
               <td
                 colSpan={table.getVisibleLeafColumns().length}
                 style={{
-                  display: layoutMode?.startsWith('grid') ? 'grid' : 'table-cell',
+                  display: layoutMode?.startsWith('grid')
+                    ? 'grid'
+                    : 'table-cell',
                 }}
               >
                 {renderEmptyRowsFallback?.({ table }) ?? (

package/src/column.utils.ts

@@ -5,6 +5,7 @@ import {
   type Renderable,
   type Row,
 } from '@tanstack/react-table';
+import { type Range, defaultRangeExtractor } from '@tanstack/react-virtual';
 import { type TableCellProps } from '@mui/material/TableCell';
 import { alpha, lighten } from '@mui/material/styles';
 import { type Theme } from '@mui/material/styles';
@@ -423,3 +424,21 @@ export const createRow = <TData extends Record<string, any>>(
     -1,
     0,
   ) as MRT_Row<TData>;
+
+  export const extraIndexRangeExtractor = (
+    range: Range,
+    draggingIndex: number,
+  ) => {
+    const newIndexs = defaultRangeExtractor(range);
+    if (
+      draggingIndex >= 0 &&
+      draggingIndex < Math.max(range.startIndex - range.overscan, 0)
+    ) {
+      newIndexs.unshift(draggingIndex);
+    }
+    if (draggingIndex >= 0 && draggingIndex > range.endIndex + range.overscan) {
+      newIndexs.push(draggingIndex);
+    }
+    return newIndexs;
+  };
+  

package/src/filterFns.ts

@@ -68,7 +68,7 @@ const equals = <TData extends Record<string, any>>(
   filterValue: number | string,
 ) =>
   row.getValue<number | string>(id).toString().toLowerCase().trim() ===
-  filterValue.toString().toLowerCase().trim();
+  filterValue?.toString().toLowerCase().trim();
 
 equals.autoRemove = (val: any) => !val;
 
@@ -90,7 +90,7 @@ const greaterThan = <TData extends Record<string, any>>(
   !isNaN(+filterValue) && !isNaN(+row.getValue<number | string>(id))
     ? +row.getValue<number | string>(id) > +filterValue
     : row.getValue<number | string>(id).toString().toLowerCase().trim() >
-      filterValue.toString().toLowerCase().trim();
+      filterValue?.toString().toLowerCase().trim();
 
 greaterThan.autoRemove = (val: any) => !val;
 
@@ -110,7 +110,7 @@ const lessThan = <TData extends Record<string, any>>(
   !isNaN(+filterValue) && !isNaN(+row.getValue<number | string>(id))
     ? +row.getValue<number | string>(id) < +filterValue
     : row.getValue<number | string>(id).toString().toLowerCase().trim() <
-      filterValue.toString().toLowerCase().trim();
+      filterValue?.toString().toLowerCase().trim();
 
 lessThan.autoRemove = (val: any) => !val;
 

package/src/head/MRT_TableHeadCellFilterLabel.tsx

@@ -122,11 +122,13 @@ export const MRT_TableHeadCellFilterLabel = <
           horizontal: 'center',
           vertical: 'top',
         }}
+        onClick={(event) => event.stopPropagation()}
         onClose={(event) => {
           //@ts-ignore
           event.stopPropagation();
           setAnchorEl(null);
         }}
+        onKeyDown={(event) => event.key === 'Enter' && setAnchorEl(null)}
         open={!!anchorEl}
         transformOrigin={{
           horizontal: 'center',

package/src/hooks/useMRT_TableInstance.ts

@@ -103,12 +103,12 @@ export const useMRT_TableInstance: <TData extends Record<string, any>>(
   const [grouping, setGrouping] = useState<MRT_GroupingState>(
     initialState.grouping ?? [],
   );
-  const [hoveredColumn, setHoveredColumn] = useState<
-    { id: string } | MRT_Column<TData> | null
-  >(initialState.hoveredColumn ?? null);
-  const [hoveredRow, setHoveredRow] = useState<
-    { id: string } | MRT_Row<TData> | null
-  >(initialState.hoveredRow ?? null);
+  const [hoveredColumn, setHoveredColumn] = useState<Partial<
+    MRT_Column<TData>
+  > | null>(initialState.hoveredColumn ?? null);
+  const [hoveredRow, setHoveredRow] = useState<Partial<MRT_Row<TData>> | null>(
+    initialState.hoveredRow ?? null,
+  );
   const [isFullScreen, setIsFullScreen] = useState<boolean>(
     initialState?.isFullScreen ?? false,
   );

package/src/inputs/MRT_FilterTextField.tsx

@@ -133,7 +133,7 @@ export const MRT_FilterTextField = <TData extends Record<string, any>>({
         if (isRangeFilter) {
           column.setFilterValue((old: Array<Date | null | number | string>) => {
             const newFilterValues = old ?? ['', ''];
-            newFilterValues[rangeFilterIndex as number] = newValue;
+            newFilterValues[rangeFilterIndex as number] = newValue ?? undefined;
             return newFilterValues;
           });
         } else {
@@ -146,7 +146,7 @@ export const MRT_FilterTextField = <TData extends Record<string, any>>({
   );
 
   const handleChange = (newValue: any) => {
-    setFilterValue(newValue?.toString() ?? '');
+    setFilterValue(newValue ?? '');
     handleChangeDebounced(newValue);
   };
 
@@ -246,7 +246,7 @@ export const MRT_FilterTextField = <TData extends Record<string, any>>({
               sx={{
                 height: '2rem',
                 transform: 'scale(0.9)',
-                width: '2rem'
+                width: '2rem',
               }}
             >
               <CloseIcon />
@@ -364,6 +364,7 @@ export const MRT_FilterTextField = <TData extends Record<string, any>>({
         />
       ) : isAutocompleteFilter ? (
         <Autocomplete
+          freeSolo
           getOptionLabel={(option) => option}
           onChange={(_e, newValue) => handleChange(newValue)}
           options={dropdownOptions ?? []}

package/src/table/MRT_Table.tsx

@@ -2,12 +2,11 @@ import { useCallback, useMemo } from 'react';
 import {
   type Range,
   type Virtualizer,
-  defaultRangeExtractor,
   useVirtualizer,
 } from '@tanstack/react-virtual';
 import Table from '@mui/material/Table';
 import { MRT_TableBody, Memo_MRT_TableBody } from '../body/MRT_TableBody';
-import { parseCSSVarId, parseFromValuesOrFunc } from '../column.utils';
+import { extraIndexRangeExtractor, parseCSSVarId, parseFromValuesOrFunc } from '../column.utils';
 import { MRT_TableFooter } from '../footer/MRT_TableFooter';
 import { MRT_TableHead } from '../head/MRT_TableHead';
 import { type MRT_TableInstance } from '../types';
@@ -43,6 +42,7 @@ export const MRT_Table = <TData extends Record<string, any>>({
     columnSizing,
     columnSizingInfo,
     columnVisibility,
+    draggingColumn,
     isFullScreen,
   } = getState();
 
@@ -93,6 +93,10 @@ export const MRT_Table = <TData extends Record<string, any>>({
     [columnPinning, enableColumnVirtualization, enableColumnPinning],
   );
 
+  const draggingColumnIndex = table
+    .getVisibleLeafColumns()
+    .findIndex((c) => c.id === draggingColumn?.id);
+
   const columnVirtualizer:
     | Virtualizer<HTMLDivElement, HTMLTableCellElement>
     | undefined = enableColumnVirtualization
@@ -103,14 +107,20 @@ export const MRT_Table = <TData extends Record<string, any>>({
         horizontal: true,
         overscan: 3,
         rangeExtractor: useCallback(
-          (range: Range) => [
-            ...new Set([
-              ...leftPinnedIndexes,
-              ...defaultRangeExtractor(range),
-              ...rightPinnedIndexes,
-            ]),
-          ],
-          [leftPinnedIndexes, rightPinnedIndexes],
+          (range: Range) => {
+            const newIndexs = extraIndexRangeExtractor(
+              range,
+              draggingColumnIndex,
+            );
+            return [
+              ...new Set([
+                ...leftPinnedIndexes,
+                ...newIndexs,
+                ...rightPinnedIndexes,
+              ]),
+            ];
+          },
+          [leftPinnedIndexes, rightPinnedIndexes, draggingColumnIndex],
         ),
         ...columnVirtualizerProps,
       })

package/src/toolbar/MRT_TablePagination.tsx

@@ -50,11 +50,10 @@ export const MRT_TablePagination = <TData extends Record<string, any> = {}>({
   const lastRowIndex = Math.min(pageIndex * pageSize + pageSize, totalRowCount);
 
   const {
-    showRowsPerPage = true,
     rowsPerPageOptions = defaultRowsPerPage,
     showFirstButton = showFirstLastPageButtons,
     showLastButton = showFirstLastPageButtons,
-
+    showRowsPerPage = true,
     ...rest
   } = paginationProps ?? {};
 
@@ -84,8 +83,8 @@ export const MRT_TablePagination = <TData extends Record<string, any> = {}>({
             {localization.rowsPerPage}
           </InputLabel>
           <Select
-            inputProps={{ 'aria-label': localization.rowsPerPage }}
             id="mrt-rows-per-page"
+            inputProps={{ 'aria-label': localization.rowsPerPage }}
             label={localization.rowsPerPage}
             onChange={(event) => setPageSize(+event.target.value)}
             sx={{ '&::before': { border: 'none' }, mb: 0 }}
@@ -123,7 +122,7 @@ export const MRT_TablePagination = <TData extends Record<string, any> = {}>({
       ) : paginationDisplayMode === 'default' ? (
         <>
           <Typography
-            sx={{ mb: 0, mx: '4px', minWidth: '10ch' }}
+            sx={{ mb: 0, minWidth: '10ch', mx: '4px' }}
             variant="body2"
           >{`${
             lastRowIndex === 0 ? 0 : (firstRowIndex + 1).toLocaleString()

package/src/types.ts

@@ -260,12 +260,8 @@ export type MRT_TableInstance<TData extends Record<string, any>> = Omit<
   setEditingCell: Dispatch<SetStateAction<MRT_Cell<TData> | null>>;
   setEditingRow: Dispatch<SetStateAction<MRT_Row<TData> | null>>;
   setGlobalFilterFn: Dispatch<SetStateAction<MRT_FilterOption>>;
-  setHoveredColumn: Dispatch<
-    SetStateAction<{ id: string } | MRT_Column<TData> | null>
-  >;
-  setHoveredRow: Dispatch<
-    SetStateAction<{ id: string } | MRT_Row<TData> | null>
-  >;
+  setHoveredColumn: Dispatch<SetStateAction<Partial<MRT_Column<TData>> | null>>;
+  setHoveredRow: Dispatch<SetStateAction<Partial<MRT_Row<TData>> | null>>;
   setIsFullScreen: Dispatch<SetStateAction<boolean>>;
   setShowAlertBanner: Dispatch<SetStateAction<boolean>>;
   setShowColumnFilters: Dispatch<SetStateAction<boolean>>;
@@ -288,8 +284,8 @@ export type MRT_TableState<TData extends Record<string, any>> = TableState & {
   editingCell: MRT_Cell<TData> | null;
   editingRow: MRT_Row<TData> | null;
   globalFilterFn: MRT_FilterOption;
-  hoveredColumn: { id: string } | MRT_Column<TData> | null;
-  hoveredRow: { id: string } | MRT_Row<TData> | null;
+  hoveredColumn: Partial<MRT_Column<TData>> | null;
+  hoveredRow: Partial<MRT_Row<TData>> | null;
   isFullScreen: boolean;
   isLoading: boolean;
   isSaving: boolean;
@@ -972,8 +968,8 @@ export type MRT_TableOptions<TData extends Record<string, any>> = Omit<
     values: Record<LiteralUnion<string & DeepKeys<TData>>, any>;
   }) => Promise<void> | void;
   onGlobalFilterFnChange?: OnChangeFn<MRT_FilterOption>;
-  onHoveredColumnChange?: OnChangeFn<{ id: string } | MRT_Column<TData> | null>;
-  onHoveredRowChange?: OnChangeFn<{ id: string } | MRT_Row<TData> | null>;
+  onHoveredColumnChange?: OnChangeFn<Partial<MRT_Column<TData>> | null>;
+  onHoveredRowChange?: OnChangeFn<Partial<MRT_Row<TData>> | null>;
   onIsFullScreenChange?: OnChangeFn<boolean>;
   onShowAlertBannerChange?: OnChangeFn<boolean>;
   onShowColumnFiltersChange?: OnChangeFn<boolean>;