material-react-table 1.14.0 → 2.0.0-alpha.0

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,115 @@
+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';
+
+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 createModalProps =
+    muiCreateRowModalProps instanceof Function
+      ? muiCreateRowModalProps({ row, table })
+      : muiCreateRowModalProps;
+
+  const editModalProps =
+    muiEditRowModalProps instanceof Function
+      ? muiEditRowModalProps({ row, table })
+      : muiEditRowModalProps;
+
+  const dialogProps = {
+    ...editModalProps,
+    ...(creatingRow && createModalProps),
+  };
+
+  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' }}>
+            {(creatingRow && localization.create) || 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

@@ -2,7 +2,7 @@ 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,
@@ -25,7 +25,7 @@ export const MRT_SortingFns = {
   fuzzy,
 };
 
-export const rankGlobalFuzzy = <TData extends Record<string, any> = {}>(
+export const rankGlobalFuzzy = <TData extends Record<string, any>>(
   rowA: MRT_Row<TData>,
   rowB: MRT_Row<TData>,
 ) =>

package/src/table/MRT_Table.tsx

@@ -12,21 +12,23 @@ import { MRT_TableFooter } from '../footer/MRT_TableFooter';
 import { parseCSSVarId } 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,
@@ -50,9 +52,9 @@ export const MRT_Table = ({ table }: Props) => {
       : muiTableProps;
 
   const vProps =
-    columnVirtualizerProps instanceof Function
-      ? columnVirtualizerProps({ table })
-      : columnVirtualizerProps;
+    columnVirtualizerOptions instanceof Function
+      ? columnVirtualizerOptions({ table })
+      : columnVirtualizerOptions;
 
   const columnSizeVars = useMemo(() => {
     const headers = getFlatHeaders();
@@ -80,7 +82,7 @@ export const MRT_Table = ({ table }: Props) => {
 
   const [leftPinnedIndexes, rightPinnedIndexes] = useMemo(
     () =>
-      enableColumnVirtualization && enablePinning
+      enableColumnVirtualization && enableColumnPinning
         ? [
             table.getLeftLeafColumns().map((c) => c.getPinnedIndex()),
             table
@@ -91,7 +93,7 @@ export const MRT_Table = ({ table }: Props) => {
               ),
           ]
         : [[], []],
-    [columnPinning, enableColumnVirtualization, enablePinning],
+    [columnPinning, enableColumnVirtualization, enableColumnPinning],
   );
 
   const columnVirtualizer:
@@ -144,27 +146,32 @@ 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,
+          ...(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>
+    </>
   );
 };

package/src/table/MRT_TableContainer.tsx

@@ -1,22 +1,34 @@
 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';
 
 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);
 
@@ -39,6 +51,9 @@ export const MRT_TableContainer = ({ table }: Props) => {
     setTotalToolbarHeight(topToolbarHeight + bottomToolbarHeight);
   });
 
+  const createModalOpen = createDisplayMode === 'modal' && creatingRow;
+  const editModalOpen = editDisplayMode === 'modal' && editingRow;
+
   return (
     <TableContainer
       {...tableContainerProps}
@@ -69,6 +84,9 @@ export const MRT_TableContainer = ({ table }: Props) => {
       }}
     >
       <MRT_Table table={table} />
+      {(createModalOpen || editModalOpen) && (
+        <MRT_EditRowModal open table={table} />
+      )}
     </TableContainer>
   );
 };

package/src/table/MRT_TablePaper.tsx

@@ -4,11 +4,13 @@ import { MRT_BottomToolbar } from '../toolbar/MRT_BottomToolbar';
 import { MRT_TableContainer } from './MRT_TableContainer';
 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_TablePaper = ({ table }: Props) => {
+export const MRT_TablePaper = <TData extends Record<string, any>>({
+  table,
+}: Props<TData>) => {
   const {
     getState,
     options: {
@@ -39,7 +41,8 @@ export const MRT_TablePaper = ({ table }: Props) => {
         }
       }}
       sx={(theme) => ({
-        transition: 'all 150ms ease-in-out',
+        overflow: 'hidden',
+        transition: 'all 100ms ease-in-out',
         ...(tablePaperProps?.sx instanceof Function
           ? tablePaperProps?.sx(theme)
           : (tablePaperProps?.sx as any)),
@@ -48,12 +51,18 @@ export const MRT_TablePaper = ({ table }: Props) => {
         ...tablePaperProps?.style,
         ...(isFullScreen
           ? {
+              bottom: 0,
               height: '100vh',
+              left: 0,
               margin: 0,
               maxHeight: '100vh',
               maxWidth: '100vw',
               padding: 0,
+              position: 'fixed',
+              right: 0,
+              top: 0,
               width: '100vw',
+              zIndex: 10,
             }
           : {}),
       }}

package/src/table/index.ts

@@ -0,0 +1,4 @@
+export * from '../modals/MRT_EditRowModal';
+export * from './MRT_Table';
+export * from './MRT_TableContainer';
+export * from './MRT_TablePaper';

package/src/toolbar/MRT_BottomToolbar.tsx

@@ -9,11 +9,11 @@ import { MRT_LinearProgressBar } from './MRT_LinearProgressBar';
 import { commonToolbarStyles } from './MRT_TopToolbar';
 import { type MRT_TableInstance } from '../types';
 
-interface Props<TData extends Record<string, any> = {}> {
+interface Props<TData extends Record<string, any>> {
   table: MRT_TableInstance<TData>;
 }
 
-export const MRT_BottomToolbar = <TData extends Record<string, any> = {}>({
+export const MRT_BottomToolbar = <TData extends Record<string, any>>({
   table,
 }: Props<TData>) => {
   const {

package/src/toolbar/MRT_LinearProgressBar.tsx

@@ -2,12 +2,12 @@ import Collapse from '@mui/material/Collapse';
 import LinearProgress from '@mui/material/LinearProgress';
 import { type MRT_TableInstance } from '../types';
 
-interface Props<TData extends Record<string, any> = {}> {
+interface Props<TData extends Record<string, any>> {
   isTopToolbar: boolean;
   table: MRT_TableInstance<TData>;
 }
 
-export const MRT_LinearProgressBar = <TData extends Record<string, any> = {}>({
+export const MRT_LinearProgressBar = <TData extends Record<string, any>>({
   isTopToolbar,
   table,
 }: Props<TData>) => {

package/src/toolbar/MRT_TablePagination.tsx

@@ -2,12 +2,12 @@ import { type ChangeEvent } from 'react';
 import TablePagination from '@mui/material/TablePagination';
 import { type MRT_TableInstance } from '../types';
 
-interface Props<TData extends Record<string, any> = {}> {
+interface Props<TData extends Record<string, any>> {
   position?: 'top' | 'bottom';
   table: MRT_TableInstance<TData>;
 }
 
-export const MRT_TablePagination = <TData extends Record<string, any> = {}>({
+export const MRT_TablePagination = <TData extends Record<string, any>>({
   table,
   position = 'bottom',
 }: Props<TData>) => {

package/src/toolbar/MRT_ToolbarAlertBanner.tsx

@@ -6,12 +6,12 @@ import Chip from '@mui/material/Chip';
 import Collapse from '@mui/material/Collapse';
 import { type MRT_TableInstance } from '../types';
 
-interface Props<TData extends Record<string, any> = {}> {
+interface Props<TData extends Record<string, any>> {
   stackAlertBanner: boolean;
   table: MRT_TableInstance<TData>;
 }
 
-export const MRT_ToolbarAlertBanner = <TData extends Record<string, any> = {}>({
+export const MRT_ToolbarAlertBanner = <TData extends Record<string, any>>({
   stackAlertBanner,
   table,
 }: Props<TData>) => {

package/src/toolbar/MRT_ToolbarDropZone.tsx

@@ -5,11 +5,11 @@ import Fade from '@mui/material/Fade';
 import Typography from '@mui/material/Typography';
 import { type MRT_TableInstance } from '../types';
 
-interface Props<TData extends Record<string, any> = {}> {
+interface Props<TData extends Record<string, any>> {
   table: MRT_TableInstance<TData>;
 }
 
-export const MRT_ToolbarDropZone = <TData extends Record<string, any> = {}>({
+export const MRT_ToolbarDropZone = <TData extends Record<string, any>>({
   table,
 }: Props<TData>) => {
   const {

package/src/toolbar/MRT_ToolbarInternalButtons.tsx

@@ -1,18 +1,16 @@
 import Box from '@mui/material/Box';
-import { MRT_FullScreenToggleButton } from '../buttons/MRT_FullScreenToggleButton';
+import { MRT_ToggleFullScreenButton } from '../buttons/MRT_ToggleFullScreenButton';
 import { MRT_ShowHideColumnsButton } from '../buttons/MRT_ShowHideColumnsButton';
 import { MRT_ToggleDensePaddingButton } from '../buttons/MRT_ToggleDensePaddingButton';
 import { MRT_ToggleFiltersButton } from '../buttons/MRT_ToggleFiltersButton';
 import { MRT_ToggleGlobalFilterButton } from '../buttons/MRT_ToggleGlobalFilterButton';
 import { type MRT_TableInstance } from '../types';
 
-interface Props<TData extends Record<string, any> = {}> {
+interface Props<TData extends Record<string, any>> {
   table: MRT_TableInstance<TData>;
 }
 
-export const MRT_ToolbarInternalButtons = <
-  TData extends Record<string, any> = {},
->({
+export const MRT_ToolbarInternalButtons = <TData extends Record<string, any>>({
   table,
 }: Props<TData>) => {
   const {
@@ -24,7 +22,7 @@ export const MRT_ToolbarInternalButtons = <
       enableFullScreenToggle,
       enableGlobalFilter,
       enableHiding,
-      enablePinning,
+      enableColumnPinning,
       initialState,
       renderToolbarInternalActions,
     },
@@ -50,14 +48,14 @@ export const MRT_ToolbarInternalButtons = <
           {enableFilters && enableColumnFilters && (
             <MRT_ToggleFiltersButton table={table} />
           )}
-          {(enableHiding || enableColumnOrdering || enablePinning) && (
+          {(enableHiding || enableColumnOrdering || enableColumnPinning) && (
             <MRT_ShowHideColumnsButton table={table} />
           )}
           {enableDensityToggle && (
             <MRT_ToggleDensePaddingButton table={table} />
           )}
           {enableFullScreenToggle && (
-            <MRT_FullScreenToggleButton table={table} />
+            <MRT_ToggleFullScreenButton table={table} />
           )}
         </>
       )}

package/src/toolbar/MRT_TopToolbar.tsx

@@ -24,11 +24,11 @@ export const commonToolbarStyles = ({ theme }: { theme: Theme }) => ({
   zIndex: 1,
 });
 
-interface Props<TData extends Record<string, any> = {}> {
+interface Props<TData extends Record<string, any>> {
   table: MRT_TableInstance<TData>;
 }
 
-export const MRT_TopToolbar = <TData extends Record<string, any> = {}>({
+export const MRT_TopToolbar = <TData extends Record<string, any>>({
   table,
 }: Props<TData>) => {
   const {

package/src/toolbar/index.ts

@@ -0,0 +1,7 @@
+export * from './MRT_BottomToolbar';
+export * from './MRT_LinearProgressBar';
+export * from './MRT_TablePagination';
+export * from './MRT_ToolbarAlertBanner';
+export * from './MRT_ToolbarDropZone';
+export * from './MRT_ToolbarInternalButtons';
+export * from './MRT_TopToolbar';