material-react-table 2.0.0-alpha.5 → 2.0.0-beta.0

package/src/head/MRT_TableHeadCellSortLabel.tsx

@@ -13,12 +13,11 @@ interface Props<TData extends Record<string, any>> {
 export const MRT_TableHeadCellSortLabel = <TData extends Record<string, any>>({
   header,
   table,
-  tableCellProps,
 }: Props<TData>) => {
   const {
     getState,
     options: {
-      icons: { ArrowDownwardIcon },
+      icons: { ArrowDownwardIcon, SyncAltIcon },
       localization,
     },
   } = table;
@@ -26,6 +25,8 @@ export const MRT_TableHeadCellSortLabel = <TData extends Record<string, any>>({
   const { columnDef } = column;
   const { sorting } = getState();
 
+  const isSorted = !!column.getIsSorted();
+
   const sortTooltip = column.getIsSorted()
     ? column.getIsSorted() === 'desc'
       ? localization.sortedByColumnDesc.replace('{column}', columnDef.header)
@@ -41,13 +42,20 @@ export const MRT_TableHeadCellSortLabel = <TData extends Record<string, any>>({
         overlap="circular"
       >
         <TableSortLabel
-          IconComponent={ArrowDownwardIcon}
-          active={!!column.getIsSorted()}
+          IconComponent={
+            !isSorted
+              ? (props) => (
+                  <SyncAltIcon
+                    {...props}
+                    style={{ transform: 'rotate(-90deg) scaleX(0.8)' }}
+                  />
+                )
+              : ArrowDownwardIcon
+          }
+          active
           aria-label={sortTooltip}
           direction={
-            column.getIsSorted()
-              ? (column.getIsSorted() as 'asc' | 'desc')
-              : undefined
+            isSorted ? (column.getIsSorted() as 'asc' | 'desc') : undefined
           }
           onClick={(e) => {
             e.stopPropagation();
@@ -55,11 +63,9 @@ export const MRT_TableHeadCellSortLabel = <TData extends Record<string, any>>({
           }}
           sx={{
             flex: '0 0',
-            transform:
-              tableCellProps?.align !== 'right'
-                ? 'translateX(-0.5ch)'
-                : undefined,
-            width: '2.4ch',
+            opacity: isSorted ? 1 : 0.3,
+            transition: 'all 150ms ease-in-out',
+            width: '3ch',
           }}
         />
       </Badge>

package/src/head/MRT_TableHeadRow.tsx

@@ -52,9 +52,9 @@ export const MRT_TableHeadRow = <TData extends Record<string, any>>({
           ? headerGroup.headers[headerOrVirtualHeader.index]
           : (headerOrVirtualHeader as MRT_Header<TData>);
 
-        return (
+        return header ? (
           <MRT_TableHeadCell header={header} key={header.id} table={table} />
-        );
+        ) : null;
       })}
       {virtualPaddingRight ? (
         <th style={{ display: 'flex', width: virtualPaddingRight }} />

package/src/hooks/useMRT_DisplayColumns.tsx

@@ -14,6 +14,15 @@ import {
   type MRT_Row,
 } from '../types';
 
+const blankColProps = {
+  sx: {
+    flex: '1 0 auto',
+    minWidth: 0,
+    p: 0,
+    width: 0,
+  },
+};
+
 interface Params<TData extends Record<string, any>> {
   columnOrder: MRT_ColumnOrderState;
   creatingRow: MRT_Row<TData> | null;
@@ -123,6 +132,17 @@ export const useMRT_DisplayColumns = <TData extends Record<string, any>>({
             ...tableOptions.displayColumnDefOptions?.['mrt-row-numbers'],
             id: 'mrt-row-numbers',
           },
+
+          (tableOptions.state?.columnOrder ?? columnOrder).includes(
+            'mrt-row-spacer',
+          ) && {
+            columnDefType: 'display',
+            header: '',
+            id: 'spacer',
+            muiTableBodyCellProps: blankColProps,
+            muiTableFooterCellProps: blankColProps,
+            muiTableHeadCellProps: blankColProps,
+          },
         ] as MRT_ColumnDef<TData>[]
       ).filter(Boolean),
     [

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/icons.ts

@@ -28,6 +28,7 @@ import SaveIcon from '@mui/icons-material/Save';
 import SearchIcon from '@mui/icons-material/Search';
 import SearchOffIcon from '@mui/icons-material/SearchOff';
 import SortIcon from '@mui/icons-material/Sort';
+import SyncAltIcon from '@mui/icons-material/SyncAlt';
 import ViewColumnIcon from '@mui/icons-material/ViewColumn';
 import VisibilityOffIcon from '@mui/icons-material/VisibilityOff';
 
@@ -62,6 +63,7 @@ export interface MRT_Icons {
   SearchIcon: any;
   SearchOffIcon: any;
   SortIcon: any;
+  SyncAltIcon?: any;
   ViewColumnIcon: any;
   VisibilityOffIcon: any;
 }
@@ -97,6 +99,7 @@ export const MRT_Default_Icons: MRT_Icons = {
   SearchIcon,
   SearchOffIcon,
   SortIcon,
+  SyncAltIcon,
   ViewColumnIcon,
   VisibilityOffIcon,
 };

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/locales/ar.ts

@@ -14,7 +14,6 @@ export const MRT_Localization_AR: MRT_Localization = {
   collapseAll: 'إخفاء الكل',
   columnActions: 'إجراءات العمود',
   copiedToClipboard: 'نسخ إلى الحافظة',
-
   dropToGroupBy: 'أفلت للمجموعة حسب {column}',
   edit: 'تعديل',
   expand: 'إظهار',
@@ -60,6 +59,7 @@ export const MRT_Localization_AR: MRT_Localization = {
   noResultsFound: 'لم يتم العثور على نتائج',
   of: 'ل',
   or: 'أو',
+  pin: 'تثبيت',
   pinToLeft: 'تثبيت جهة اليسار',
   pinToRight: 'تثبيت على اليمين',
   resetColumnSize: 'Reset column size',

package/src/locales/bg.ts

@@ -59,6 +59,7 @@ export const MRT_Localization_BG: MRT_Localization = {
   noResultsFound: 'Няма намерени резултати',
   of: 'от',
   or: 'или',
+  pin: 'Закачи',
   pinToLeft: 'Закачи отляво',
   pinToRight: 'Закачи отдясно',
   resetColumnSize: 'Нулиране на размера на колоната',

package/src/locales/cs.ts

@@ -60,6 +60,7 @@ export const MRT_Localization_CS: MRT_Localization = {
   noResultsFound: 'Nenalezeny žádné výsledky',
   of: 'z',
   or: 'nebo',
+  pin: 'Připnout',
   pinToLeft: 'Připnout doleva',
   pinToRight: 'Připnout doprava',
   resetColumnSize: 'Resetovat šířku sloupců',

package/src/locales/da.ts

@@ -59,6 +59,7 @@ export const MRT_Localization_DA: MRT_Localization = {
   noResultsFound: 'Ingen resultater fundet',
   of: 'af',
   or: 'eller',
+  pin: 'Fastgør',
   pinToLeft: 'Fastgør til venstre',
   pinToRight: 'Fastgør til højre',
   resetColumnSize: 'Nulstil kolonnebredde',

package/src/locales/de.ts

@@ -59,6 +59,7 @@ export const MRT_Localization_DE: MRT_Localization = {
   noResultsFound: 'Keine Ergebnisse gefunden',
   of: 'von',
   or: 'oder',
+  pin: 'Anheften',
   pinToLeft: 'Links anheften',
   pinToRight: 'Rechts anheften',
   resetColumnSize: 'Spaltengröße zurücksetzen',

package/src/locales/es.ts

@@ -59,6 +59,7 @@ export const MRT_Localization_ES: MRT_Localization = {
   noResultsFound: 'No se encontraron resultados',
   of: 'de',
   or: 'o',
+  pin: 'Anclar',
   pinToLeft: 'Anclar a la izquierda',
   pinToRight: 'Anclar a la derecha',
   resetColumnSize: 'Resetear tamaño de columna',

package/src/locales/et.ts

@@ -60,6 +60,7 @@ export const MRT_Localization_ET: MRT_Localization = {
   noResultsFound: 'Tulemusi ei leitud',
   of: '/',
   or: 'või',
+  pin: 'Kinnita',
   pinToLeft: 'Kinnita vasakule',
   pinToRight: 'Kinnita paremale',
   resetColumnSize: 'Lähtesta veeru suurus',

package/src/locales/fa.ts

@@ -59,6 +59,7 @@ export const MRT_Localization_FA: MRT_Localization = {
   noResultsFound: 'موردی یافت نشد.',
   of: 'از',
   or: 'یا',
+  pin: 'پین',
   pinToLeft: 'پین به چپ',
   pinToRight: 'پین به راست',
   resetColumnSize: 'تنظیم مجدد اندازه ستون',

package/src/locales/fi.ts

@@ -60,6 +60,7 @@ export const MRT_Localization_FI: MRT_Localization = {
   noResultsFound: 'Ei tuloksia',
   of: '/',
   or: 'tai',
+  pin: 'Kiinnitä',
   pinToLeft: 'Kiinnitä vasemmalle',
   pinToRight: 'Kiinnitä oikealle',
   resetColumnSize: 'Nollaa sarakkeen koko',

package/src/locales/fr.ts

@@ -59,6 +59,7 @@ export const MRT_Localization_FR: MRT_Localization = {
   noResultsFound: 'Aucun résultat trouvé',
   of: 'de',
   or: 'ou',
+  pin: 'Attacher',
   pinToLeft: 'Épingler à gauche',
   pinToRight: 'Épingler à droite',
   resetColumnSize: 'Réinitialiser la taille de la colonne',

package/src/locales/hu.ts

@@ -59,6 +59,7 @@ export const MRT_Localization_HU: MRT_Localization = {
   noResultsFound: 'Nincs találat',
   of: 'összesen',
   or: 'vagy',
+  pin: 'Rögzítés',
   pinToLeft: 'Rögzítés balra',
   pinToRight: 'Rögzítés jobbra',
   resetColumnSize: 'Oszlop méretének alaphelyzetbe állítása',

package/src/locales/hy.ts

@@ -59,6 +59,7 @@ export const MRT_Localization_HY: MRT_Localization = {
   noResultsFound: 'Արդյունքներ չեն գտնվել',
   of: '-ից',
   or: 'կամ',
+  pin: 'Կցել',
   pinToLeft: 'Կցել ձախից',
   pinToRight: 'Կցել աջից',
   resetColumnSize: 'Չեղարկել սյունակի չափը',

package/src/locales/id.ts

@@ -60,6 +60,7 @@ export const MRT_Localization_ID: MRT_Localization = {
   noResultsFound: 'Tidak ada hasil yang ditemukan',
   of: 'dari',
   or: 'atau',
+  pin: 'Sematkan',
   pinToLeft: 'Sematkan ke kiri',
   pinToRight: 'Sematkan ke kanan',
   resetColumnSize: 'Reset ukuran kolom',

package/src/locales/it.ts

@@ -59,6 +59,7 @@ export const MRT_Localization_IT: MRT_Localization = {
   noResultsFound: 'Nessun risultato trovato',
   of: 'di',
   or: 'o',
+  pin: 'Blocca',
   pinToLeft: 'Blocca a sinistra',
   pinToRight: 'Blocca a destra',
   resetColumnSize: 'Resetta dimensione colonna',

package/src/locales/ja.ts

@@ -59,6 +59,7 @@ export const MRT_Localization_JA: MRT_Localization = {
   noResultsFound: '結果なし',
   of: '/',
   or: 'または',
+  pin: '固定',
   pinToLeft: '左に固定',
   pinToRight: '右に固定',
   resetColumnSize: '列のサイズをリセット',

package/src/locales/ko.ts

@@ -59,6 +59,7 @@ export const MRT_Localization_KO: MRT_Localization = {
   noResultsFound: '찾은 결과가 없습니다.',
   of: '/',
   or: '또는',
+  pin: '고정',
   pinToLeft: '왼쪽에 고정',
   pinToRight: '오른쪽에 고정',
   resetColumnSize: '열 크기 초기화',

package/src/locales/nl.ts

@@ -59,6 +59,7 @@ export const MRT_Localization_NL: MRT_Localization = {
   noResultsFound: 'Geen resultaten gevonden',
   of: 'van',
   or: 'of',
+  pin: 'Vastzetten',
   pinToLeft: 'Links vastzetten',
   pinToRight: 'Rechts vastzetten',
   resetColumnSize: 'Kolombreedte resetten',

package/src/locales/no.ts

@@ -59,6 +59,7 @@ export const MRT_Localization_NO: MRT_Localization = {
   noRecordsToDisplay: 'Ingen poster å vise',
   noResultsFound: 'Ingen resultater funnet',
   of: 'av',
+  pin: 'Fest',
   pinToLeft: 'Fest til venstre',
   pinToRight: 'Fest til høyre',
   or: 'eller',

package/src/locales/np.ts

@@ -42,7 +42,8 @@ export const MRT_Localization_NP: MRT_Localization = {
   filterNotEquals: 'असमान',
   filterStartsWith: 'सुरुमा समावेश गरिएको',
   filterWeakEquals: 'असमान',
-  filteringByColumn: '{column} द्वारा फिल्टर गर्दै - {filterType} {filterValue}',
+  filteringByColumn:
+    '{column} द्वारा फिल्टर गर्दै - {filterType} {filterValue}',
   goToFirstPage: 'पहिलो पृष्ठमा जानुहोस्',
   goToLastPage: 'अन्तिम पृष्ठमा जानुहोस्',
   goToNextPage: 'अर्को पृष्ठमा जानुहोस्',
@@ -90,5 +91,5 @@ export const MRT_Localization_NP: MRT_Localization = {
   toggleVisibility: 'दृश्यता परिवर्तन गर्नुहोस्',
   ungroupByColumn: '{column} का आधारमा समूह हटाउनुहोस्',
   unpin: 'अनपिन गर्नुहोस्',
-  unpinAll: 'सबै अनपिन गर्नुहोस्'
+  unpinAll: 'सबै अनपिन गर्नुहोस्',
 };

package/src/locales/pl.ts

@@ -59,6 +59,7 @@ export const MRT_Localization_PL: MRT_Localization = {
   noResultsFound: 'Brak wyników',
   of: 'z',
   or: 'lub',
+  pin: 'Przypnij',
   pinToLeft: 'Przypnij po lewej',
   pinToRight: 'Przypnij po prawej',
   resetColumnSize: 'Resetuj wielkość kolumn',

package/src/locales/pt-BR.ts

@@ -59,6 +59,7 @@ export const MRT_Localization_PT_BR: MRT_Localization = {
   noResultsFound: 'Nenhum resultado encontrado',
   of: 'de',
   or: 'ou',
+  pin: 'Fixar',
   pinToLeft: 'Fixar à esquerda',
   pinToRight: 'Fixar à direita',
   resetColumnSize: 'Restaurar tamanho da coluna',

package/src/locales/pt.ts

@@ -59,6 +59,7 @@ export const MRT_Localization_PT: MRT_Localization = {
   noResultsFound: 'Nenhum resultado encontrado',
   of: 'de',
   or: 'ou',
+  pin: 'Fixar',
   pinToLeft: 'Fixar à esquerda',
   pinToRight: 'Fixar à direita',
   resetColumnSize: 'Restaurar tamanho da coluna',

package/src/locales/ro.ts

@@ -59,6 +59,7 @@ export const MRT_Localization_RO: MRT_Localization = {
   noResultsFound: 'Niciun rezultat găsit',
   of: 'din',
   or: 'sau',
+  pin: 'Fixează',
   pinToLeft: 'Fixează la stanga',
   pinToRight: 'Fixează la dreapta',
   resetColumnSize: 'Resetează dimensiune coloană',

package/src/locales/ru.ts

@@ -59,6 +59,7 @@ export const MRT_Localization_RU: MRT_Localization = {
   noResultsFound: 'Результатов не найдено',
   of: 'из',
   or: 'или',
+  pin: 'Прикрепить',
   pinToLeft: 'Прикрепить слева',
   pinToRight: 'Прикрепить справа',
   resetColumnSize: 'Сбросить размер колонок',

package/src/locales/sk.ts

@@ -60,6 +60,7 @@ export const MRT_Localization_SK: MRT_Localization = {
   noResultsFound: 'Nenájdené žiadne výsledky',
   of: 'z',
   or: 'alebo',
+  pin: 'Pripnúť',
   pinToLeft: 'Pripnúť doľava',
   pinToRight: 'Pripnúť doprava',
   resetColumnSize: 'Resetovať šírku stĺpcov',

package/src/locales/sr-Cyrl-RS.ts

@@ -59,6 +59,7 @@ export const MRT_Localization_SR_CYRL_RS: MRT_Localization = {
   noResultsFound: 'Нема резултата',
   of: 'од',
   or: 'или',
+  pin: 'Закачи',
   pinToLeft: 'Закачи лево',
   pinToRight: 'Закачи десно',
   resetColumnSize: 'Ресетуј ширину колоне',

package/src/locales/sr-Latn-RS.ts

@@ -59,6 +59,7 @@ export const MRT_Localization_SR_LATN_RS: MRT_Localization = {
   noResultsFound: 'Nema rezultata',
   of: 'od',
   or: 'ili',
+  pin: 'Zakači',
   pinToLeft: 'Zakači levo',
   pinToRight: 'Zakači desno',
   resetColumnSize: 'Resetuj širinu kolone',

package/src/locales/sv.ts

@@ -44,11 +44,11 @@ export const MRT_Localization_SV: MRT_Localization = {
   filterWeakEquals: 'Lika med',
   filteringByColumn: 'Filtrering efter {column} - {filterType} {filterValue}',
   goToFirstPage: 'Gå till första sidan',
-  goToLastPage: 'Gå till sista sidan  ',
+  goToLastPage: 'Gå till sista sidan',
   goToNextPage: 'Gå till nästa sida',
   goToPreviousPage: 'Gå till föregående sida',
   grab: 'Greppa',
-  groupByColumn: 'Guppera efter {column}',
+  groupByColumn: 'Gruppera efter {column}',
   groupedBy: 'Gruppera efter ',
   hideAll: 'Göm alla',
   hideColumn: 'Göm {column} kolumn',
@@ -59,6 +59,7 @@ export const MRT_Localization_SV: MRT_Localization = {
   noResultsFound: 'Inga resultat funna',
   of: 'av',
   or: 'eller',
+  pin: 'Fäst',
   pinToLeft: 'Fäst till vänster',
   pinToRight: 'Fäst till höger',
   resetColumnSize: 'Återställ kolumnstorlek',

package/src/locales/tr.ts

@@ -59,6 +59,7 @@ export const MRT_Localization_TR: MRT_Localization = {
   noResultsFound: 'Herhangi Bir Sonuç Bulunamadı',
   of: 'of',
   or: 'veya',
+  pin: 'Sabitle',
   pinToLeft: 'Sola Sabitle',
   pinToRight: 'Sağa Sabitle',
   resetColumnSize: 'Sütun Boyutunu Sıfırla',

package/src/locales/uk.ts

@@ -59,6 +59,7 @@ export const MRT_Localization_UK: MRT_Localization = {
   noResultsFound: 'Нічого не знайдено',
   of: 'з',
   or: 'або',
+  pin: 'Закріпити',
   pinToLeft: 'Закріпити ліворуч',
   pinToRight: 'Закріпити праворуч',
   resetColumnSize: 'Скинути розмір стовпця',

package/src/locales/vi.ts

@@ -59,6 +59,7 @@ export const MRT_Localization_VI: MRT_Localization = {
   noResultsFound: 'Không có kết quả nào được tìm thấy',
   of: 'trên',
   or: 'hoặc',
+  pin: 'Ghim',
   pinToLeft: 'Ghim sang trái',
   pinToRight: 'Ghim sang phải',
   resetColumnSize: 'Đặt lại kích thước cột',

package/src/locales/zh-Hans.ts

@@ -59,6 +59,7 @@ export const MRT_Localization_ZH_HANS: MRT_Localization = {
   noResultsFound: '未找到结果',
   of: '/',
   or: '或',
+  pin: '固定',
   pinToLeft: '固定至左边',
   pinToRight: '固定至右边',
   resetColumnSize: '重置栏位大小',

package/src/locales/zh-Hant.ts

@@ -59,6 +59,7 @@ export const MRT_Localization_ZH_HANT: MRT_Localization = {
   noResultsFound: '未找到結果',
   of: '/',
   or: '或',
+  pin: '固定',
   pinToLeft: '固定至左邊',
   pinToRight: '固定至右邊',
   resetColumnSize: '重置欄位大小',

package/src/table/MRT_Table.tsx

@@ -2,12 +2,15 @@ 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 +46,7 @@ export const MRT_Table = <TData extends Record<string, any>>({
     columnSizing,
     columnSizingInfo,
     columnVisibility,
+    draggingColumn,
     isFullScreen,
   } = getState();
 
@@ -93,6 +97,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 +111,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,
       })