material-react-table 1.15.0 → 2.0.0-alpha.1

package/src/{_locales → locales}/sv.ts

@@ -90,5 +90,4 @@ export const MRT_Localization_SV: MRT_Localization = {
   ungroupByColumn: 'Avgruppera efter {column}',
   unpin: 'Avfäst',
   unpinAll: 'Avfäst alla',
-  unsorted: 'Osorterad',
 };

package/src/{_locales → locales}/tr.ts

@@ -90,5 +90,4 @@ export const MRT_Localization_TR: MRT_Localization = {
   ungroupByColumn: '{column} Sütununu Çöz',
   unpin: 'Çöz',
   unpinAll: 'Tümünü Çöz',
-  unsorted: 'Sıralanmadı',
 };

package/src/{_locales → locales}/uk.ts

@@ -90,5 +90,4 @@ export const MRT_Localization_UK: MRT_Localization = {
   ungroupByColumn: 'Розгрупувати по {column}',
   unpin: 'Відкріпити',
   unpinAll: 'Відкріпити все',
-  unsorted: 'Не сортовано',
 };

package/src/{_locales → locales}/vi.ts

@@ -90,5 +90,4 @@ export const MRT_Localization_VI: MRT_Localization = {
   ungroupByColumn: 'Bỏ nhóm dữ liệu theo {column}',
   unpin: 'Bỏ ghim',
   unpinAll: 'Bỏ ghim tất cả',
-  unsorted: 'Chưa được sắp xếp',
 };

package/src/{_locales → locales}/zh-Hans.ts

@@ -55,7 +55,7 @@ export const MRT_Localization_ZH_HANS: MRT_Localization = {
   max: '最大',
   min: '最小',
   move: '移动',
-  noRecordsToDisplay: '无纪录可显示',
+  noRecordsToDisplay: '无记录可显示',
   noResultsFound: '未找到结果',
   of: '/',
   or: '或',
@@ -63,13 +63,13 @@ export const MRT_Localization_ZH_HANS: MRT_Localization = {
   pinToRight: '固定至右边',
   resetColumnSize: '重置栏位大小',
   resetOrder: '重置排序',
-  rowActions: '横行动作',
+  rowActions: '横列动作',
   rowNumber: '#',
-  rowNumbers: '横行编号',
-  rowsPerPage: '每页横行数量',
+  rowNumbers: '横列号码',
+  rowsPerPage: '每页横列数目',
   save: '储存',
   search: '搜寻',
-  selectedCountOfRowCountRowsSelected: '已选择横行：{selectedCount}/{rowCount}',
+  selectedCountOfRowCountRowsSelected: '已选择横列：{selectedCount}/{rowCount}',
   select: '选择',
   showAll: '显示全部',
   showAllColumns: '显示全部栏位',
@@ -82,12 +82,11 @@ export const MRT_Localization_ZH_HANS: MRT_Localization = {
   sortedByColumnDesc: '已按 {column} 倒序排序',
   thenBy: '，然后以',
   toggleDensity: '切换密度',
-  toggleFullScreen: '切换全萤幕',
+  toggleFullScreen: '切换全屏',
   toggleSelectAll: '切换选择全部',
-  toggleSelectRow: '切换选择横行',
+  toggleSelectRow: '切换选择横列',
   toggleVisibility: '切换可见度',
   ungroupByColumn: '取消按 {column} 分组',
   unpin: '取消固定',
   unpinAll: '全部取消固定',
-  unsorted: '取消排序',
 };

package/src/{_locales → locales}/zh-Hant.ts

@@ -66,7 +66,7 @@ export const MRT_Localization_ZH_HANT: MRT_Localization = {
   rowActions: '橫列動作',
   rowNumber: '#',
   rowNumbers: '橫列編號',
-  rowsPerPage: '每頁橫列數量',
+  rowsPerPage: '每頁數量',
   save: '儲存',
   search: '搜尋',
   selectedCountOfRowCountRowsSelected: '已選擇橫列：{selectedCount}/{rowCount}',
@@ -89,5 +89,4 @@ export const MRT_Localization_ZH_HANT: MRT_Localization = {
   ungroupByColumn: '取消按 {column} 分組',
   unpin: '取消固定',
   unpinAll: '全部取消固定',
-  unsorted: '取消排序',
 };

package/src/menus/MRT_ColumnActionMenu.tsx

@@ -20,19 +20,19 @@ export const commonListItemStyles = {
   alignItems: 'center',
 };
 
-interface Props {
+interface Props<TData extends Record<string, any>> {
   anchorEl: HTMLElement | null;
-  header: MRT_Header;
+  header: MRT_Header<TData>;
   setAnchorEl: (anchorEl: HTMLElement | null) => void;
-  table: MRT_TableInstance;
+  table: MRT_TableInstance<TData>;
 }
 
-export const MRT_ColumnActionMenu = ({
+export const MRT_ColumnActionMenu = <TData extends Record<string, any>>({
   anchorEl,
   header,
   setAnchorEl,
   table,
-}: Props) => {
+}: Props<TData>) => {
   const {
     getState,
     toggleAllColumnsVisible,
@@ -44,7 +44,7 @@ export const MRT_ColumnActionMenu = ({
       enableColumnResizing,
       enableGrouping,
       enableHiding,
-      enablePinning,
+      enableColumnPinning,
       enableSorting,
       enableSortingRemoval,
       icons: {
@@ -263,7 +263,7 @@ export const MRT_ColumnActionMenu = ({
     ...(enableGrouping && column.getCanGroup()
       ? [
           <MenuItem
-            divider={enablePinning}
+            divider={enableColumnPinning}
             key={6}
             onClick={handleGroupByColumn}
             sx={commonMenuItemStyles}
@@ -279,7 +279,7 @@ export const MRT_ColumnActionMenu = ({
           </MenuItem>,
         ]
       : []),
-    ...(enablePinning && column.getCanPin()
+    ...(enableColumnPinning && column.getCanPin()
       ? [
           <MenuItem
             disabled={column.getIsPinned() === 'left' || !column.getCanPin()}

package/src/menus/MRT_FilterOptionMenu.tsx

@@ -102,8 +102,9 @@ export const mrtFilterOptions = (
 const rangeModes = ['between', 'betweenInclusive', 'inNumberRange'];
 const emptyModes = ['empty', 'notEmpty'];
 const arrModes = ['arrIncludesSome', 'arrIncludesAll', 'arrIncludes'];
+const rangeVariants = ['range-slider', 'date-range', 'range'];
 
-interface Props<TData extends Record<string, any> = {}> {
+interface Props<TData extends Record<string, any>> {
   anchorEl: HTMLElement | null;
   header?: MRT_Header<TData>;
   onSelect?: () => void;
@@ -112,7 +113,7 @@ interface Props<TData extends Record<string, any> = {}> {
   table: MRT_TableInstance<TData>;
 }
 
-export const MRT_FilterOptionMenu = <TData extends Record<string, any> = {}>({
+export const MRT_FilterOptionMenu = <TData extends Record<string, any>>({
   anchorEl,
   header,
   onSelect,
@@ -140,7 +141,7 @@ export const MRT_FilterOptionMenu = <TData extends Record<string, any> = {}>({
   let allowedColumnFilterOptions =
     columnDef?.columnFilterModeOptions ?? columnFilterModeOptions;
 
-  if (columnDef?.filterVariant === 'range-slider') {
+  if (rangeVariants.includes(columnDef?.filterVariant as string)) {
     allowedColumnFilterOptions = [
       ...rangeModes,
       ...(allowedColumnFilterOptions ?? []),

package/src/menus/MRT_RowActionMenu.tsx

@@ -8,22 +8,23 @@ import {
   commonMenuItemStyles,
 } from './MRT_ColumnActionMenu';
 import { type MRT_Row, type MRT_TableInstance } from '../types';
+import { parseFromValuesOrFunc } from '../column.utils';
 
-interface Props {
+interface Props<TData extends Record<string, any>> {
   anchorEl: HTMLElement | null;
   handleEdit: (event: MouseEvent) => void;
-  row: MRT_Row;
+  row: MRT_Row<TData>;
   setAnchorEl: (anchorEl: HTMLElement | null) => void;
-  table: MRT_TableInstance;
+  table: MRT_TableInstance<TData>;
 }
 
-export const MRT_RowActionMenu = ({
+export const MRT_RowActionMenu = <TData extends Record<string, any>>({
   anchorEl,
   handleEdit,
   row,
   setAnchorEl,
   table,
-}: Props) => {
+}: Props<TData>) => {
   const {
     getState,
     options: {
@@ -45,18 +46,16 @@ export const MRT_RowActionMenu = ({
         dense: density === 'compact',
       }}
     >
-      {enableEditing instanceof Function
-        ? enableEditing(row)
-        : enableEditing && (
-            <MenuItem onClick={handleEdit} sx={commonMenuItemStyles}>
-              <Box sx={commonListItemStyles}>
-                <ListItemIcon>
-                  <EditIcon />
-                </ListItemIcon>
-                {localization.edit}
-              </Box>
-            </MenuItem>
-          )}
+      {parseFromValuesOrFunc(enableEditing, row) && (
+        <MenuItem onClick={handleEdit} sx={commonMenuItemStyles}>
+          <Box sx={commonListItemStyles}>
+            <ListItemIcon>
+              <EditIcon />
+            </ListItemIcon>
+            {localization.edit}
+          </Box>
+        </MenuItem>
+      )}
       {renderRowActionMenuItems?.({
         row,
         table,

package/src/menus/MRT_ShowHideColumnsMenu.tsx

@@ -7,16 +7,14 @@ import { MRT_ShowHideColumnsMenuItems } from './MRT_ShowHideColumnsMenuItems';
 import { getDefaultColumnOrderIds } from '../column.utils';
 import { type MRT_Column, type MRT_TableInstance } from '../types';
 
-interface Props<TData extends Record<string, any> = {}> {
+interface Props<TData extends Record<string, any>> {
   anchorEl: HTMLElement | null;
   isSubMenu?: boolean;
   setAnchorEl: (anchorEl: HTMLElement | null) => void;
   table: MRT_TableInstance<TData>;
 }
 
-export const MRT_ShowHideColumnsMenu = <
-  TData extends Record<string, any> = {},
->({
+export const MRT_ShowHideColumnsMenu = <TData extends Record<string, any>>({
   anchorEl,
   setAnchorEl,
   table,
@@ -35,7 +33,7 @@ export const MRT_ShowHideColumnsMenu = <
     options: {
       enableColumnOrdering,
       enableHiding,
-      enablePinning,
+      enableColumnPinning,
       localization,
     },
   } = table;
@@ -111,7 +109,7 @@ export const MRT_ShowHideColumnsMenu = <
             {localization.resetOrder}
           </Button>
         )}
-        {enablePinning && (
+        {enableColumnPinning && (
           <Button
             disabled={!getIsSomeColumnsPinned()}
             onClick={() => table.resetColumnPinning(true)}

package/src/menus/MRT_ShowHideColumnsMenuItems.tsx

@@ -16,7 +16,7 @@ import { MRT_GrabHandleButton } from '../buttons/MRT_GrabHandleButton';
 import { reorderColumn } from '../column.utils';
 import { type MRT_Column, type MRT_TableInstance } from '../types';
 
-interface Props<TData extends Record<string, any> = {}> {
+interface Props<TData extends Record<string, any>> {
   allColumns: MRT_Column<TData>[];
   column: MRT_Column<TData>;
   hoveredColumn: MRT_Column<TData> | null;
@@ -25,7 +25,7 @@ interface Props<TData extends Record<string, any> = {}> {
 }
 
 export const MRT_ShowHideColumnsMenuItems = <
-  TData extends Record<string, any> = {},
+  TData extends Record<string, any>,
 >({
   allColumns,
   hoveredColumn,
@@ -38,7 +38,7 @@ export const MRT_ShowHideColumnsMenuItems = <
     options: {
       enableColumnOrdering,
       enableHiding,
-      enablePinning,
+      enableColumnPinning,
       localization,
     },
     setColumnOrder,
@@ -127,7 +127,7 @@ export const MRT_ShowHideColumnsMenuItems = <
             ) : (
               <Box sx={{ width: '28px' }} />
             ))}
-          {enablePinning &&
+          {enableColumnPinning &&
             (column.getCanPin() ? (
               <MRT_ColumnPinningButtons column={column} table={table} />
             ) : (

package/src/menus/index.ts

@@ -0,0 +1,5 @@
+export * from './MRT_ColumnActionMenu';
+export * from './MRT_FilterOptionMenu';
+export * from './MRT_RowActionMenu';
+export * from './MRT_ShowHideColumnsMenu';
+export * from './MRT_ShowHideColumnsMenuItems';

package/src/modals/MRT_EditRowModal.tsx

@@ -0,0 +1,107 @@
+import Dialog from '@mui/material/Dialog';
+import DialogActions from '@mui/material/DialogActions';
+import DialogContent from '@mui/material/DialogContent';
+import DialogTitle from '@mui/material/DialogTitle';
+import Stack from '@mui/material/Stack';
+import { MRT_EditActionButtons } from '../buttons/MRT_EditActionButtons';
+import { MRT_EditCellTextField } from '../inputs/MRT_EditCellTextField';
+import { type MRT_Row, type MRT_TableInstance } from '../types';
+import { parseFromValuesOrFunc } from '../column.utils';
+
+interface Props<TData extends Record<string, any>> {
+  open: boolean;
+  table: MRT_TableInstance<TData>;
+}
+
+export const MRT_EditRowModal = <TData extends Record<string, any>>({
+  open,
+  table,
+}: Props<TData>) => {
+  const {
+    getState,
+    options: {
+      localization,
+      onEditingRowCancel,
+      onCreatingRowCancel,
+      renderEditRowModalContent,
+      renderCreateRowModalContent,
+      muiCreateRowModalProps,
+      muiEditRowModalProps,
+    },
+    setEditingRow,
+    setCreatingRow,
+  } = table;
+  const { creatingRow, editingRow } = getState();
+  const row = (creatingRow ?? editingRow) as MRT_Row<TData>;
+
+  const dialogProps = {
+    ...parseFromValuesOrFunc(muiEditRowModalProps, { row, table }),
+    ...(creatingRow &&
+      parseFromValuesOrFunc(muiCreateRowModalProps, { row, table })),
+  };
+
+  const internalEditComponents = row
+    .getAllCells()
+    .filter((cell) => cell.column.columnDef.columnDefType === 'data')
+    .map((cell) => (
+      <MRT_EditCellTextField
+        cell={cell as any}
+        key={cell.id}
+        table={table as any}
+      />
+    ));
+
+  return (
+    <Dialog
+      fullWidth
+      maxWidth="xs"
+      onClose={(event, reason) => {
+        if (creatingRow) {
+          onCreatingRowCancel?.({ row, table });
+          setCreatingRow(null);
+        } else {
+          onEditingRowCancel?.({ row, table });
+          setEditingRow(null);
+        }
+        row._valuesCache = {} as any; //reset values cache
+        dialogProps.onClose?.(event, reason);
+      }}
+      open={open}
+      {...dialogProps}
+    >
+      {((creatingRow &&
+        renderCreateRowModalContent?.({
+          row,
+          table,
+          internalEditComponents,
+        })) ||
+        renderEditRowModalContent?.({
+          row,
+          table,
+          internalEditComponents,
+        })) ?? (
+        <>
+          <DialogTitle sx={{ textAlign: 'center' }}>
+            {localization.edit}
+          </DialogTitle>
+          <DialogContent>
+            <form onSubmit={(e) => e.preventDefault()}>
+              <Stack
+                sx={{
+                  gap: '24px',
+                  paddingTop: '16px',
+                  width: '100%',
+                }}
+              >
+                {internalEditComponents}
+              </Stack>
+            </form>
+          </DialogContent>
+          <DialogActions sx={{ p: '1.25rem' }}>
+            <MRT_EditActionButtons row={row} table={table} variant="text" />
+          </DialogActions>
+        </>
+      )}
+    </Dialog>
+  );
+};

package/src/modals/index.ts

@@ -0,0 +1 @@
+export * from './MRT_EditRowModal';

package/src/sortingFns.ts

@@ -1,7 +1,8 @@
 import { compareItems, type RankingInfo } from '@tanstack/match-sorter-utils';
 import { type Row, sortingFns } from '@tanstack/react-table';
+import { type MRT_Row } from './types';
 
-const fuzzy = <TData extends Record<string, any> = {}>(
+const fuzzy = <TData extends Record<string, any>>(
   rowA: Row<TData>,
   rowB: Row<TData>,
   columnId: string,
@@ -24,6 +25,9 @@ export const MRT_SortingFns = {
   fuzzy,
 };
 
-export const rankGlobalFuzzy: any = (rowA: any, rowB: any) =>
+export const rankGlobalFuzzy = <TData extends Record<string, any>>(
+  rowA: MRT_Row<TData>,
+  rowB: MRT_Row<TData>,
+) =>
   Math.max(...Object.values(rowB.columnFiltersMeta).map((v: any) => v.rank)) -
   Math.max(...Object.values(rowA.columnFiltersMeta).map((v: any) => v.rank));

package/src/table/MRT_Table.tsx

@@ -9,24 +9,26 @@ import Table from '@mui/material/Table';
 import { MRT_TableHead } from '../head/MRT_TableHead';
 import { Memo_MRT_TableBody, MRT_TableBody } from '../body/MRT_TableBody';
 import { MRT_TableFooter } from '../footer/MRT_TableFooter';
-import { parseCSSVarId } from '../column.utils';
+import { parseCSSVarId, parseFromValuesOrFunc } from '../column.utils';
 import { type MRT_TableInstance } from '../types';
 
-interface Props {
-  table: MRT_TableInstance;
+interface Props<TData extends Record<string, any>> {
+  table: MRT_TableInstance<TData>;
 }
 
-export const MRT_Table = ({ table }: Props) => {
+export const MRT_Table = <TData extends Record<string, any>>({
+  table,
+}: Props<TData>) => {
   const {
     getFlatHeaders,
     getState,
     options: {
-      columns,
       columnVirtualizerInstanceRef,
-      columnVirtualizerProps,
+      columnVirtualizerOptions,
+      columns,
       enableColumnResizing,
       enableColumnVirtualization,
-      enablePinning,
+      enableColumnPinning,
       enableStickyHeader,
       enableTableFooter,
       enableTableHead,
@@ -44,15 +46,12 @@ export const MRT_Table = ({ table }: Props) => {
     isFullScreen,
   } = getState();
 
-  const tableProps =
-    muiTableProps instanceof Function
-      ? muiTableProps({ table })
-      : muiTableProps;
+  const tableProps = parseFromValuesOrFunc(muiTableProps, { table });
 
-  const vProps =
-    columnVirtualizerProps instanceof Function
-      ? columnVirtualizerProps({ table })
-      : columnVirtualizerProps;
+  const columnVirtualizerProps = parseFromValuesOrFunc(
+    columnVirtualizerOptions,
+    { table },
+  );
 
   const columnSizeVars = useMemo(() => {
     const headers = getFlatHeaders();
@@ -80,7 +79,7 @@ export const MRT_Table = ({ table }: Props) => {
 
   const [leftPinnedIndexes, rightPinnedIndexes] = useMemo(
     () =>
-      enableColumnVirtualization && enablePinning
+      enableColumnVirtualization && enableColumnPinning
         ? [
             table.getLeftLeafColumns().map((c) => c.getPinnedIndex()),
             table
@@ -91,7 +90,7 @@ export const MRT_Table = ({ table }: Props) => {
               ),
           ]
         : [[], []],
-    [columnPinning, enableColumnVirtualization, enablePinning],
+    [columnPinning, enableColumnVirtualization, enableColumnPinning],
   );
 
   const columnVirtualizer:
@@ -113,7 +112,7 @@ export const MRT_Table = ({ table }: Props) => {
           ],
           [leftPinnedIndexes, rightPinnedIndexes],
         ),
-        ...vProps,
+        ...columnVirtualizerProps,
       })
     : undefined;
 
@@ -144,27 +143,30 @@ export const MRT_Table = ({ table }: Props) => {
   };
 
   return (
-    <Table
-      stickyHeader={enableStickyHeader || isFullScreen}
-      {...tableProps}
-      sx={(theme) => ({
-        borderCollapse: 'separate',
-        display: layoutMode === 'grid' ? 'grid' : 'table',
-        tableLayout:
-          layoutMode !== 'grid' && enableColumnResizing ? 'fixed' : undefined,
-        ...(tableProps?.sx instanceof Function
-          ? tableProps.sx(theme)
-          : (tableProps?.sx as any)),
-      })}
-      style={{ ...columnSizeVars, ...tableProps?.style }}
-    >
-      {enableTableHead && <MRT_TableHead {...props} />}
-      {memoMode === 'table-body' || columnSizingInfo.isResizingColumn ? (
-        <Memo_MRT_TableBody columnVirtualizer={columnVirtualizer} {...props} />
-      ) : (
-        <MRT_TableBody columnVirtualizer={columnVirtualizer} {...props} />
-      )}
-      {enableTableFooter && <MRT_TableFooter {...props} />}
-    </Table>
+    <>
+      <Table
+        stickyHeader={enableStickyHeader || isFullScreen}
+        {...tableProps}
+        sx={(theme) => ({
+          borderCollapse: 'separate',
+          display: layoutMode === 'grid' ? 'grid' : 'table',
+          tableLayout:
+            layoutMode !== 'grid' && enableColumnResizing ? 'fixed' : undefined,
+          ...(parseFromValuesOrFunc(tableProps?.sx, theme) as any),
+        })}
+        style={{ ...columnSizeVars, ...tableProps?.style }}
+      >
+        {enableTableHead && <MRT_TableHead {...props} />}
+        {memoMode === 'table-body' || columnSizingInfo.isResizingColumn ? (
+          <Memo_MRT_TableBody
+            columnVirtualizer={columnVirtualizer}
+            {...props}
+          />
+        ) : (
+          <MRT_TableBody columnVirtualizer={columnVirtualizer} {...props} />
+        )}
+        {enableTableFooter && <MRT_TableFooter {...props} />}
+      </Table>
+    </>
   );
 };

package/src/table/MRT_TableContainer.tsx

@@ -1,29 +1,37 @@
 import { useEffect, useLayoutEffect, useState } from 'react';
 import TableContainer from '@mui/material/TableContainer';
 import { MRT_Table } from './MRT_Table';
+import { MRT_EditRowModal } from '../modals';
 import { type MRT_TableInstance } from '../types';
+import { parseFromValuesOrFunc } from '../column.utils';
 
 const useIsomorphicLayoutEffect =
   typeof window !== 'undefined' ? useLayoutEffect : useEffect;
 
-interface Props {
-  table: MRT_TableInstance;
+interface Props<TData extends Record<string, any>> {
+  table: MRT_TableInstance<TData>;
 }
 
-export const MRT_TableContainer = ({ table }: Props) => {
+export const MRT_TableContainer = <TData extends Record<string, any>>({
+  table,
+}: Props<TData>) => {
   const {
     getState,
-    options: { enableStickyHeader, muiTableContainerProps },
+    options: {
+      createDisplayMode,
+      editDisplayMode,
+      enableStickyHeader,
+      muiTableContainerProps,
+    },
     refs: { tableContainerRef, bottomToolbarRef, topToolbarRef },
   } = table;
-  const { isFullScreen } = getState();
+  const { isFullScreen, creatingRow, editingRow } = getState();
 
   const [totalToolbarHeight, setTotalToolbarHeight] = useState(0);
 
-  const tableContainerProps =
-    muiTableContainerProps instanceof Function
-      ? muiTableContainerProps({ table })
-      : muiTableContainerProps;
+  const tableContainerProps = parseFromValuesOrFunc(muiTableContainerProps, {
+    table,
+  });
 
   useIsomorphicLayoutEffect(() => {
     const topToolbarHeight =
@@ -39,6 +47,9 @@ export const MRT_TableContainer = ({ table }: Props) => {
     setTotalToolbarHeight(topToolbarHeight + bottomToolbarHeight);
   });
 
+  const createModalOpen = createDisplayMode === 'modal' && creatingRow;
+  const editModalOpen = editDisplayMode === 'modal' && editingRow;
+
   return (
     <TableContainer
       {...tableContainerProps}
@@ -57,9 +68,7 @@ export const MRT_TableContainer = ({ table }: Props) => {
           ? `clamp(350px, calc(100vh - ${totalToolbarHeight}px), 9999px)`
           : undefined,
         overflow: 'auto',
-        ...(tableContainerProps?.sx instanceof Function
-          ? tableContainerProps.sx(theme)
-          : (tableContainerProps?.sx as any)),
+        ...(parseFromValuesOrFunc(tableContainerProps?.sx, theme) as any),
       })}
       style={{
         maxHeight: isFullScreen
@@ -69,6 +78,9 @@ export const MRT_TableContainer = ({ table }: Props) => {
       }}
     >
       <MRT_Table table={table} />
+      {(createModalOpen || editModalOpen) && (
+        <MRT_EditRowModal open table={table} />
+      )}
     </TableContainer>
   );
 };