material-react-table 3.0.3 → 3.2.0

package/src/components/menus/MRT_ShowHideColumnsMenu.tsx

@@ -35,6 +35,7 @@ export const MRT_ShowHideColumnsMenu = <TData extends MRT_RowData>({
     getLeftLeafColumns,
     getRightLeafColumns,
     getState,
+    initialState,
     options: {
       enableColumnOrdering,
       enableColumnPinning,
@@ -79,6 +80,16 @@ export const MRT_ShowHideColumnsMenu = <TData extends MRT_RowData>({
     (col) => col.columnDef.columnDefType === 'group',
   );
 
+  const hasColumnOrderChanged = useMemo(
+    () =>
+      columnOrder.length !== initialState.columnOrder.length ||
+      !columnOrder.every(
+        (column, index) => column === initialState.columnOrder[index],
+      ),
+
+    [columnOrder, initialState.columnOrder],
+  );
+
   const [hoveredColumn, setHoveredColumn] = useState<MRT_Column<TData> | null>(
     null,
   );
@@ -120,6 +131,7 @@ export const MRT_ShowHideColumnsMenu = <TData extends MRT_RowData>({
                 getDefaultColumnOrderIds(table.options, true),
               )
             }
+            disabled={!hasColumnOrderChanged}
           >
             {localization.resetOrder}
           </Button>

package/src/components/table/MRT_TableContainer.tsx

@@ -79,7 +79,7 @@ export const MRT_TableContainer = <TData extends MRT_RowData>({
         if (node) {
           tableContainerRef.current = node;
           if (tableContainerProps?.ref) {
-            //@ts-ignore
+            //@ts-expect-error
             tableContainerProps.ref.current = node;
           }
         }

package/src/components/table/MRT_TablePaper.tsx

@@ -44,7 +44,7 @@ export const MRT_TablePaper = <TData extends MRT_RowData>({
       ref={(ref: HTMLDivElement) => {
         tablePaperRef.current = ref;
         if (paperProps?.ref) {
-          //@ts-ignore
+          //@ts-expect-error
           paperProps.ref.current = ref;
         }
       }}

package/src/components/toolbar/MRT_BottomToolbar.tsx

@@ -48,7 +48,7 @@ export const MRT_BottomToolbar = <TData extends MRT_RowData>({
         if (node) {
           bottomToolbarRef.current = node;
           if (toolbarProps?.ref) {
-            // @ts-ignore
+            // @ts-expect-error
             toolbarProps.ref.current = node;
           }
         }

package/src/components/toolbar/MRT_TablePagination.tsx

@@ -174,10 +174,12 @@ export const MRT_TablePagination = <TData extends MRT_RowData>({
             sx={{ m: '0 4px', minWidth: '8ch' }}
             variant="body2"
           >{`${
-            lastRowIndex === 0 ? 0 : (firstRowIndex + 1).toLocaleString()
-          }-${lastRowIndex.toLocaleString()} ${
+            lastRowIndex === 0
+              ? 0
+              : (firstRowIndex + 1).toLocaleString(localization.language)
+          }-${lastRowIndex.toLocaleString(localization.language)} ${
             localization.of
-          } ${totalRowCount.toLocaleString()}`}</Typography>
+          } ${totalRowCount.toLocaleString(localization.language)}`}</Typography>
           <Box gap="xs">
             {showFirstButton && (
               <Tooltip {...tooltipProps} title={localization.goToFirstPage}>

package/src/components/toolbar/MRT_ToolbarAlertBanner.tsx

@@ -24,7 +24,7 @@ export const MRT_ToolbarAlertBanner = <TData extends MRT_RowData>({
 }: MRT_ToolbarAlertBannerProps<TData>) => {
   const {
     getFilteredSelectedRowModel,
-    getPrePaginationRowModel,
+    getCoreRowModel,
     getState,
     options: {
       enableRowSelection,
@@ -52,7 +52,7 @@ export const MRT_ToolbarAlertBanner = <TData extends MRT_RowData>({
     table,
   });
 
-  const totalRowCount = rowCount ?? getPrePaginationRowModel().flatRows.length;
+  const totalRowCount = rowCount ?? getCoreRowModel().rows.length;
 
   const selectedRowCount = useMemo(
     () =>
@@ -65,8 +65,8 @@ export const MRT_ToolbarAlertBanner = <TData extends MRT_RowData>({
     selectedRowCount > 0 ? (
       <Stack alignItems="center" direction="row" gap="16px">
         {localization.selectedCountOfRowCountRowsSelected
-          ?.replace('{selectedCount}', selectedRowCount.toLocaleString())
-          ?.replace('{rowCount}', totalRowCount.toString())}
+          ?.replace('{selectedCount}', selectedRowCount.toLocaleString(localization.language))
+          ?.replace('{rowCount}', totalRowCount.toLocaleString(localization.language))}
         <Button
           onClick={(event) =>
             getMRT_SelectAllHandler({ table })(event, false, true)

package/src/components/toolbar/MRT_TopToolbar.tsx

@@ -60,7 +60,7 @@ export const MRT_TopToolbar = <TData extends MRT_RowData>({
       ref={(ref: HTMLDivElement) => {
         topToolbarRef.current = ref;
         if (toolbarProps?.ref) {
-          // @ts-ignore
+          // @ts-expect-error
           toolbarProps.ref.current = ref;
         }
       }}

package/src/hooks/display-columns/getMRT_RowDragColumnDef.tsx

@@ -14,7 +14,7 @@ export const getMRT_RowDragColumnDef = <TData extends MRT_RowData>(
     Cell: ({ row, rowRef, table }) => (
       <MRT_TableBodyRowGrabHandle
         row={row}
-        rowRef={rowRef as RefObject<HTMLTableRowElement>}
+        rowRef={rowRef as RefObject<HTMLTableRowElement | null>}
         table={table}
       />
     ),

package/src/hooks/useMRT_ColumnVirtualizer.ts

@@ -116,7 +116,7 @@ export const useMRT_ColumnVirtualizer = <
   }
 
   if (columnVirtualizerInstanceRef) {
-    //@ts-ignore
+    //@ts-expect-error
     columnVirtualizerInstanceRef.current = columnVirtualizer;
   }
 

package/src/hooks/useMRT_Effects.ts

@@ -31,8 +31,8 @@ export const useMRT_Effects = <TData extends MRT_RowData>(
   const totalRowCount = rowCount ?? getPrePaginationRowModel().rows.length;
 
   const rerender = useReducer(() => ({}), {})[1];
-  const initialBodyHeight = useRef<string>();
-  const previousTop = useRef<number>();
+  const initialBodyHeight = useRef<string>(null);
+  const previousTop = useRef<number>(null);
 
   useEffect(() => {
     if (typeof window !== 'undefined') {
@@ -73,7 +73,7 @@ export const useMRT_Effects = <TData extends MRT_RowData>(
     if (firstVisibleRowIndex >= totalRowCount) {
       table.setPageIndex(Math.ceil(totalRowCount / pageSize) - 1);
     }
-  }, [totalRowCount]);
+  }, [totalRowCount, enablePagination, isLoading, showSkeletons]);
 
   //turn off sort when global filter is looking for ranked results
   const appliedSort = useRef<MRT_SortingState>(sorting);

package/src/hooks/useMRT_RowVirtualizer.ts

@@ -1,4 +1,4 @@
-import { useCallback } from 'react';
+import { useCallback, useMemo } from 'react';
 import { type Range, useVirtualizer } from '@tanstack/react-virtual';
 import {
   type MRT_Row,
@@ -36,7 +36,19 @@ export const useMRT_RowVirtualizer = <
     table,
   });
 
-  const rowCount = rows?.length ?? getRowModel().rows.length;
+  const realRows = rows ?? getRowModel().rows;
+  /**
+   * when filtering, should find the correct index in filtered rows
+   */
+  const draggingRowIndex = useMemo(
+    () =>
+      draggingRow?.id
+        ? realRows.findIndex((r) => r.id === draggingRow?.id)
+        : undefined,
+    [realRows, draggingRow?.id],
+  );
+
+  const rowCount = realRows.length;
 
   const normalRowHeight =
     density === 'compact' ? 37 : density === 'comfortable' ? 58 : 73;
@@ -58,9 +70,9 @@ export const useMRT_RowVirtualizer = <
     overscan: 4,
     rangeExtractor: useCallback(
       (range: Range) => {
-        return extraIndexRangeExtractor(range, draggingRow?.index ?? 0);
+        return extraIndexRangeExtractor(range, draggingRowIndex);
       },
-      [draggingRow],
+      [draggingRowIndex],
     ),
     ...rowVirtualizerProps,
   }) as unknown as MRT_RowVirtualizer<TScrollElement, TItemElement>;
@@ -68,7 +80,7 @@ export const useMRT_RowVirtualizer = <
   rowVirtualizer.virtualRows = rowVirtualizer.getVirtualItems() as any;
 
   if (rowVirtualizerInstanceRef) {
-    //@ts-ignore
+    //@ts-expect-error
     rowVirtualizerInstanceRef.current = rowVirtualizer;
   }
 

package/src/hooks/useMRT_TableInstance.ts

@@ -247,7 +247,7 @@ export const useMRT_TableInstance = <TData extends MRT_RowData>(
     ],
   );
 
-  //@ts-ignore
+  //@ts-expect-error
   const table = useReactTable({
     onColumnOrderChange,
     onColumnSizingInfoChange,

package/src/locales/ar.ts

@@ -1,6 +1,7 @@
 import { type MRT_Localization } from '..';
 
 export const MRT_Localization_AR: MRT_Localization = {
+  language: 'ar',
   actions: 'إجراءات',
   and: 'و',
   cancel: 'إلغاء',

package/src/locales/az.ts

@@ -1,6 +1,7 @@
 import { type MRT_Localization } from '..';
 
 export const MRT_Localization_AZ: MRT_Localization = {
+  language: 'az',
   actions: 'Əməliyyatlar',
   and: 'və',
   cancel: 'Ləğv Et',

package/src/locales/bg.ts

@@ -1,6 +1,7 @@
 import { type MRT_Localization } from '..';
 
 export const MRT_Localization_BG: MRT_Localization = {
+  language: 'bg',
   actions: 'Действия',
   and: 'и',
   cancel: 'Отказ',

package/src/locales/cs.ts

@@ -1,6 +1,7 @@
 import { type MRT_Localization } from '..';
 
 export const MRT_Localization_CS: MRT_Localization = {
+  language: 'cs',
   actions: 'Akce',
   and: 'a',
   cancel: 'Zrušit',

package/src/locales/da.ts

@@ -1,6 +1,7 @@
 import { type MRT_Localization } from '..';
 
 export const MRT_Localization_DA: MRT_Localization = {
+  language: 'da',
   actions: 'Handlinger',
   and: 'og',
   cancel: 'Annuller',

package/src/locales/de.ts

@@ -1,6 +1,7 @@
 import { type MRT_Localization } from '..';
 
 export const MRT_Localization_DE: MRT_Localization = {
+  language: 'de',
   actions: 'Aktionen',
   and: 'und',
   cancel: 'Abbrechen',

package/src/locales/el.ts

@@ -1,6 +1,7 @@
 import { type MRT_Localization } from '..';
 
 export const MRT_Localization_EL: MRT_Localization = {
+  language: 'el',
   actions: 'Ενέργειες',
   and: 'και',
   cancel: 'Ακύρωση',

package/src/locales/en.ts

@@ -1,6 +1,7 @@
 import { type MRT_Localization } from '..';
 
 export const MRT_Localization_EN: MRT_Localization = {
+  language: 'en',
   actions: 'Actions',
   and: 'and',
   cancel: 'Cancel',

package/src/locales/es.ts

@@ -1,6 +1,7 @@
 import { type MRT_Localization } from '..';
 
 export const MRT_Localization_ES: MRT_Localization = {
+  language: 'es',
   actions: 'Acciones',
   and: 'y',
   cancel: 'Cancelar',

package/src/locales/et.ts

@@ -1,6 +1,7 @@
 import { type MRT_Localization } from '..';
 
 export const MRT_Localization_ET: MRT_Localization = {
+  language: 'et',
   actions: 'Toimingud',
   and: 'ja',
   cancel: 'Tühista',

package/src/locales/fa.ts

@@ -1,6 +1,7 @@
 import { type MRT_Localization } from '..';
 
 export const MRT_Localization_FA: MRT_Localization = {
+  language: 'fa',
   actions: 'عملیات',
   and: 'و',
   cancel: 'انصراف',

package/src/locales/fi.ts

@@ -1,6 +1,7 @@
 import { type MRT_Localization } from '..';
 
 export const MRT_Localization_FI: MRT_Localization = {
+  language: 'fi',
   actions: 'Toiminnot',
   and: 'ja',
   cancel: 'Peruuta',

package/src/locales/fr.ts

@@ -1,6 +1,7 @@
 import { type MRT_Localization } from '..';
 
 export const MRT_Localization_FR: MRT_Localization = {
+  language: 'fr',
   actions: 'Actions',
   and: 'et',
   cancel: 'Annuler',

package/src/locales/he.ts

@@ -1,6 +1,7 @@
 import { type MRT_Localization } from '..';
 
 export const MRT_Localization_HE: MRT_Localization = {
+  language: 'he',
   actions: 'פעולות',
   and: 'ו',
   cancel: 'ביטול',

package/src/locales/hr.ts

@@ -1,6 +1,7 @@
 import { type MRT_Localization } from '..';
 
 export const MRT_Localization_HR: MRT_Localization = {
+  language: 'hr',
   actions: 'Radnje',
   and: 'i',
   cancel: 'Odustani',

package/src/locales/hu.ts

@@ -1,6 +1,7 @@
 import { type MRT_Localization } from '..';
 
 export const MRT_Localization_HU: MRT_Localization = {
+  language: 'hu',
   actions: 'Műveletek',
   and: 'és',
   cancel: 'Mégse',

package/src/locales/hy.ts

@@ -1,6 +1,7 @@
 import { type MRT_Localization } from '..';
 
 export const MRT_Localization_HY: MRT_Localization = {
+  language: 'hy',
   actions: 'Գործողություններ',
   and: 'և',
   cancel: 'Չեղարկել',

package/src/locales/id.ts

@@ -1,6 +1,7 @@
 import { type MRT_Localization } from '..';
 
 export const MRT_Localization_ID: MRT_Localization = {
+  language: 'id',
   actions: 'Aksi',
   and: 'dan',
   cancel: 'Batal',

package/src/locales/it.ts

@@ -1,6 +1,7 @@
 import { type MRT_Localization } from '..';
 
 export const MRT_Localization_IT: MRT_Localization = {
+  language: 'it',
   actions: 'Azioni',
   and: 'e',
   cancel: 'Cancella',

package/src/locales/ja.ts

@@ -1,6 +1,7 @@
 import { type MRT_Localization } from '..';
 
 export const MRT_Localization_JA: MRT_Localization = {
+  language: 'ja',
   actions: '操作',
   and: 'と',
   cancel: 'キャンセル',

package/src/locales/ko.ts

@@ -1,6 +1,7 @@
 import { type MRT_Localization } from '..';
 
 export const MRT_Localization_KO: MRT_Localization = {
+  language: 'ko',
   actions: '동작',
   and: '~',
   cancel: '취소',

package/src/locales/nl.ts

@@ -1,6 +1,7 @@
 import { type MRT_Localization } from '..';
 
 export const MRT_Localization_NL: MRT_Localization = {
+  language: 'nl',
   actions: 'Acties',
   and: 'en',
   cancel: 'Annuleren',

package/src/locales/no.ts

@@ -1,6 +1,7 @@
 import { type MRT_Localization } from '..';
 
 export const MRT_Localization_NO: MRT_Localization = {
+  language: 'no',
   cancel: 'Avbryt',
   actions: 'Handlinger',
   and: 'og',

package/src/locales/np.ts

@@ -1,6 +1,7 @@
 import { type MRT_Localization } from '..';
 
 export const MRT_Localization_NP: MRT_Localization = {
+  language: 'np',
   actions: 'कार्यहरू',
   and: 'तथा',
   cancel: 'रद्द गर्नुहोस्',

package/src/locales/pl.ts

@@ -1,6 +1,7 @@
 import { type MRT_Localization } from '..';
 
 export const MRT_Localization_PL: MRT_Localization = {
+  language: 'pl',
   actions: 'Akcje',
   and: 'i',
   cancel: 'Anuluj',

package/src/locales/pt-BR.ts

@@ -1,6 +1,7 @@
 import { type MRT_Localization } from '..';
 
 export const MRT_Localization_PT_BR: MRT_Localization = {
+  language: 'pt-BR',
   actions: 'Ações',
   and: 'e',
   cancel: 'Cancelar',

package/src/locales/pt.ts

@@ -1,6 +1,7 @@
 import { type MRT_Localization } from '..';
 
 export const MRT_Localization_PT: MRT_Localization = {
+  language: 'pt',
   actions: 'Ações',
   and: 'e',
   cancel: 'Cancelar',

package/src/locales/ro.ts

@@ -1,6 +1,7 @@
 import { type MRT_Localization } from '..';
 
 export const MRT_Localization_RO: MRT_Localization = {
+  language: 'ro',
   actions: 'Acțiuni',
   and: 'și',
   cancel: 'Anulează',

package/src/locales/ru.ts

@@ -1,6 +1,7 @@
 import { type MRT_Localization } from '..';
 
 export const MRT_Localization_RU: MRT_Localization = {
+  language: 'ru',
   actions: 'Действия',
   and: 'и',
   cancel: 'Отменить',

package/src/locales/sk.ts

@@ -1,6 +1,7 @@
 import { type MRT_Localization } from '..';
 
 export const MRT_Localization_SK: MRT_Localization = {
+  language: 'sk',
   actions: 'Akcie',
   and: 'a',
   cancel: 'Zrušiť',

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

@@ -1,6 +1,7 @@
 import { type MRT_Localization } from '..';
 
 export const MRT_Localization_SR_CYRL_RS: MRT_Localization = {
+  language: 'sr-Cyrl-RS',
   actions: 'Акције',
   and: 'и',
   cancel: 'Откажи',

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

@@ -1,6 +1,7 @@
 import { type MRT_Localization } from '..';
 
 export const MRT_Localization_SR_LATN_RS: MRT_Localization = {
+  language: 'sr-Latn-RS',
   actions: 'Akcije',
   and: 'i',
   cancel: 'Otkaži',

package/src/locales/sv.ts

@@ -1,6 +1,7 @@
 import { type MRT_Localization } from '..';
 
 export const MRT_Localization_SV: MRT_Localization = {
+  language: 'sv',
   actions: 'Åtgärder',
   and: 'och',
   cancel: 'Avbryt',

package/src/locales/tr.ts

@@ -1,6 +1,7 @@
 import { type MRT_Localization } from '..';
 
 export const MRT_Localization_TR: MRT_Localization = {
+  language: 'tr',
   actions: 'İşlemler',
   and: 've',
   cancel: 'İptal',

package/src/locales/uk.ts

@@ -1,6 +1,7 @@
 import { type MRT_Localization } from '..';
 
 export const MRT_Localization_UK: MRT_Localization = {
+  language: 'uk',
   actions: 'Дії',
   and: 'і',
   cancel: 'Скасувати',

package/src/locales/vi.ts

@@ -1,6 +1,7 @@
 import { type MRT_Localization } from '..';
 
 export const MRT_Localization_VI: MRT_Localization = {
+  language: 'vi',
   actions: 'Thao tác',
   and: 'và',
   cancel: 'Huỷ bỏ',

package/src/locales/zh-Hans.ts

@@ -1,6 +1,7 @@
 import { type MRT_Localization } from '..';
 
 export const MRT_Localization_ZH_HANS: MRT_Localization = {
+  language: 'zh-Hans',
   actions: '操作',
   and: '与',
   cancel: '取消',

package/src/locales/zh-Hant.ts

@@ -1,6 +1,7 @@
 import { type MRT_Localization } from '..';
 
 export const MRT_Localization_ZH_HANT: MRT_Localization = {
+  language: 'zh-Hant',
   actions: '動作',
   and: '與',
   cancel: '取消',