material-react-table 2.0.0-alpha.6 → 2.0.0-beta.1

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/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_EditCellTextField.tsx

@@ -100,10 +100,10 @@ export const MRT_EditCellTextField = <TData extends Record<string, any>>({
         }
       }}
       label={
-        ['custom', 'modal'].includes(
+        !['custom', 'modal'].includes(
           (isCreating ? createDisplayMode : editDisplayMode) as string,
         )
-          ? column.columnDef.header
+          ? columnDef.header
           : undefined
       }
       margin="none"
@@ -119,6 +119,14 @@ export const MRT_EditCellTextField = <TData extends Record<string, any>>({
       value={value}
       variant="standard"
       {...textFieldProps}
+      InputProps={{
+        disableUnderline: editDisplayMode === 'table',
+        ...textFieldProps.InputProps,
+      }}
+      inputProps={{
+        autoComplete: 'new-password', // disable autocomplete and autofill
+        ...textFieldProps.inputProps,
+      }}
       onBlur={handleBlur}
       onChange={handleChange}
       onClick={(e) => {

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

@@ -6,7 +6,11 @@ import {
 } from '@tanstack/react-virtual';
 import Table from '@mui/material/Table';
 import { MRT_TableBody, Memo_MRT_TableBody } from '../body/MRT_TableBody';
-import { extraIndexRangeExtractor, 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';

package/src/table/MRT_TableContainer.tsx

@@ -1,5 +1,8 @@
 import { useEffect, useLayoutEffect, useState } from 'react';
+import Box from '@mui/material/Box';
+import CircularProgress from '@mui/material/CircularProgress';
 import TableContainer from '@mui/material/TableContainer';
+import { alpha, lighten } from '@mui/material/styles';
 import { MRT_Table } from './MRT_Table';
 import { parseFromValuesOrFunc } from '../column.utils';
 import { MRT_EditRowModal } from '../modals';
@@ -21,11 +24,22 @@ export const MRT_TableContainer = <TData extends Record<string, any>>({
       createDisplayMode,
       editDisplayMode,
       enableStickyHeader,
+      localization,
+      muiCircularProgressProps,
       muiTableContainerProps,
     },
     refs: { bottomToolbarRef, tableContainerRef, topToolbarRef },
   } = table;
-  const { creatingRow, editingRow, isFullScreen } = getState();
+  const {
+    creatingRow,
+    editingRow,
+    isFullScreen,
+    isLoading,
+    showLoadingOverlay,
+  } = getState();
+
+  const loading =
+    (isLoading || showLoadingOverlay) && showLoadingOverlay !== false;
 
   const [totalToolbarHeight, setTotalToolbarHeight] = useState(0);
 
@@ -33,6 +47,11 @@ export const MRT_TableContainer = <TData extends Record<string, any>>({
     table,
   });
 
+  const circularProgressProps = parseFromValuesOrFunc(
+    muiCircularProgressProps,
+    { table },
+  );
+
   useIsomorphicLayoutEffect(() => {
     const topToolbarHeight =
       typeof document !== 'undefined'
@@ -52,6 +71,8 @@ export const MRT_TableContainer = <TData extends Record<string, any>>({
 
   return (
     <TableContainer
+      aria-busy={loading}
+      aria-describedby="mrt-progress"
       {...tableContainerProps}
       ref={(node: HTMLDivElement) => {
         if (node) {
@@ -74,9 +95,37 @@ export const MRT_TableContainer = <TData extends Record<string, any>>({
           : undefined,
         maxWidth: '100%',
         overflow: 'auto',
+        position: 'relative',
         ...(parseFromValuesOrFunc(tableContainerProps?.sx, theme) as any),
       })}
     >
+      {loading ? (
+        <Box
+          sx={(theme) => ({
+            alignItems: 'center',
+            backgroundColor: alpha(
+              lighten(theme.palette.background.paper, 0.05),
+              0.5,
+            ),
+            bottom: 0,
+            display: 'flex',
+            justifyContent: 'center',
+            left: 0,
+            maxHeight: '100vh',
+            position: 'absolute',
+            right: 0,
+            top: 0,
+            width: '100%',
+            zIndex: 2,
+          })}
+        >
+          <CircularProgress
+            aria-label={localization.noRecordsToDisplay}
+            id="mrt-progress"
+            {...circularProgressProps}
+          />
+        </Box>
+      ) : null}
       <MRT_Table table={table} />
       {(createModalOpen || editModalOpen) && (
         <MRT_EditRowModal open table={table} />

package/src/table/MRT_TablePaper.tsx

@@ -52,7 +52,7 @@ export const MRT_TablePaper = <TData extends Record<string, any>>({
               right: 0,
               top: 0,
               width: '100vw',
-              zIndex: 10,
+              zIndex: 9999,
             }
           : {}),
         ...tablePaperProps?.style,

package/src/toolbar/MRT_LinearProgressBar.tsx

@@ -16,7 +16,7 @@ export const MRT_LinearProgressBar = <TData extends Record<string, any>>({
     getState,
     options: { muiLinearProgressProps },
   } = table;
-  const { isLoading, showProgressBars } = getState();
+  const { showProgressBars } = getState();
 
   const linearProgressProps = parseFromValuesOrFunc(muiLinearProgressProps, {
     isTopToolbar,
@@ -25,7 +25,7 @@ export const MRT_LinearProgressBar = <TData extends Record<string, any>>({
 
   return (
     <Collapse
-      in={isLoading || showProgressBars}
+      in={showProgressBars}
       mountOnEnter
       sx={{
         bottom: isTopToolbar ? 0 : undefined,

package/src/toolbar/MRT_TablePagination.tsx

@@ -62,8 +62,9 @@ export const MRT_TablePagination = <TData extends Record<string, any> = {}>({
       sx={{
         alignItems: 'center',
         display: 'flex',
+        flexWrap: 'wrap',
         gap: '8px',
-        justifyContent: 'space-between',
+        justifyContent: { md: 'space-between', sm: 'center' },
         justifySelf: 'flex-end',
         mt:
           position === 'top' &&
@@ -83,11 +84,12 @@ export const MRT_TablePagination = <TData extends Record<string, any> = {}>({
             {localization.rowsPerPage}
           </InputLabel>
           <Select
+            disableUnderline
             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 }}
+            sx={{ mb: 0 }}
             value={pageSize}
             variant="standard"
           >
@@ -122,6 +124,7 @@ export const MRT_TablePagination = <TData extends Record<string, any> = {}>({
       ) : paginationDisplayMode === 'default' ? (
         <>
           <Typography
+            align="center"
             sx={{ mb: 0, minWidth: '10ch', mx: '4px' }}
             variant="body2"
           >{`${

package/src/types.ts

@@ -43,6 +43,7 @@ import { type AutocompleteProps } from '@mui/material/Autocomplete';
 import { type ButtonProps } from '@mui/material/Button';
 import { type CheckboxProps } from '@mui/material/Checkbox';
 import { type ChipProps } from '@mui/material/Chip';
+import { type CircularProgressProps } from '@mui/material/CircularProgress';
 import { type DialogProps } from '@mui/material/Dialog';
 import { type IconButtonProps } from '@mui/material/IconButton';
 import { type LinearProgressProps } from '@mui/material/LinearProgress';
@@ -158,7 +159,7 @@ export interface MRT_Localization {
   noResultsFound: string;
   of: string;
   or: string;
-  pin?: string;
+  pin: string;
   pinToLeft: string;
   pinToRight: string;
   resetColumnSize: string;
@@ -292,6 +293,7 @@ export type MRT_TableState<TData extends Record<string, any>> = TableState & {
   showAlertBanner: boolean;
   showColumnFilters: boolean;
   showGlobalFilter: boolean;
+  showLoadingOverlay: boolean;
   showProgressBars: boolean;
   showSkeletons: boolean;
   showToolbarDropZone: boolean;
@@ -741,6 +743,9 @@ export type MRT_TableOptions<TData extends Record<string, any>> = Omit<
   muiBottomToolbarProps?:
     | ((props: { table: MRT_TableInstance<TData> }) => ToolbarProps)
     | ToolbarProps;
+  muiCircularProgressProps?:
+    | ((props: { table: MRT_TableInstance<TData> }) => CircularProgressProps)
+    | CircularProgressProps;
   muiColumnActionsButtonProps?:
     | ((props: {
         column: MRT_Column<TData>;