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

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/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/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>;