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

package/src/body/MRT_TableBodyRowGrabHandle.tsx

@@ -1,23 +1,26 @@
 import { type DragEvent, type RefObject } from 'react';
-import { type MRT_Cell, type MRT_TableInstance } from '../types';
 import { MRT_GrabHandleButton } from '../buttons/MRT_GrabHandleButton';
+import { type MRT_Row, type MRT_TableInstance } from '../types';
 
-interface Props {
-  cell: MRT_Cell;
+interface Props<TData extends Record<string, any>> {
+  row: MRT_Row<TData>;
   rowRef: RefObject<HTMLTableRowElement>;
-  table: MRT_TableInstance;
+  table: MRT_TableInstance<TData>;
 }
 
-export const MRT_TableBodyRowGrabHandle = ({ cell, rowRef, table }: Props) => {
+export const MRT_TableBodyRowGrabHandle = <TData extends Record<string, any>>({
+  row,
+  rowRef,
+  table,
+}: Props<TData>) => {
   const {
-    options: { muiTableBodyRowDragHandleProps },
+    options: { muiRowDragHandleProps },
   } = table;
-  const { row } = cell;
 
   const iconButtonProps =
-    muiTableBodyRowDragHandleProps instanceof Function
-      ? muiTableBodyRowDragHandleProps({ row, table })
-      : muiTableBodyRowDragHandleProps;
+    muiRowDragHandleProps instanceof Function
+      ? muiRowDragHandleProps({ row, table })
+      : muiRowDragHandleProps;
 
   const handleDragStart = (event: DragEvent<HTMLButtonElement>) => {
     iconButtonProps?.onDragStart?.(event);

package/src/body/MRT_TableDetailPanel.tsx

@@ -1,4 +1,4 @@
-import * as React from 'react';
+import { type RefObject } from 'react';
 import Collapse from '@mui/material/Collapse';
 import TableCell from '@mui/material/TableCell';
 import TableRow from '@mui/material/TableRow';
@@ -6,28 +6,28 @@ import { lighten } from '@mui/material/styles';
 import { type VirtualItem } from '@tanstack/react-virtual';
 import { type MRT_Row, type MRT_TableInstance } from '../types';
 
-interface Props {
-  parentRowRef: React.RefObject<HTMLTableRowElement>;
-  row: MRT_Row;
+interface Props<TData extends Record<string, any>> {
+  parentRowRef: RefObject<HTMLTableRowElement>;
+  row: MRT_Row<TData>;
   rowIndex: number;
-  table: MRT_TableInstance;
+  table: MRT_TableInstance<TData>;
   virtualRow?: VirtualItem;
 }
 
-export const MRT_TableDetailPanel = ({
+export const MRT_TableDetailPanel = <TData extends Record<string, any>>({
   parentRowRef,
   row,
   rowIndex,
   table,
   virtualRow,
-}: Props) => {
+}: Props<TData>) => {
   const {
     getVisibleLeafColumns,
     getState,
     options: {
       layoutMode,
       muiTableBodyRowProps,
-      muiTableDetailPanelProps,
+      muiDetailPanelProps,
       renderDetailPanel,
     },
   } = table;
@@ -44,9 +44,9 @@ export const MRT_TableDetailPanel = ({
       : muiTableBodyRowProps;
 
   const tableCellProps =
-    muiTableDetailPanelProps instanceof Function
-      ? muiTableDetailPanelProps({ row, table })
-      : muiTableDetailPanelProps;
+    muiDetailPanelProps instanceof Function
+      ? muiDetailPanelProps({ row, table })
+      : muiDetailPanelProps;
 
   return (
     <TableRow

package/src/body/index.ts

@@ -0,0 +1,6 @@
+export * from './MRT_TableBody';
+export * from './MRT_TableBodyCell';
+export * from './MRT_TableBodyCellValue';
+export * from './MRT_TableBodyRow';
+export * from './MRT_TableBodyRowGrabHandle';
+export * from './MRT_TableDetailPanel';

package/src/buttons/MRT_ColumnPinningButtons.tsx

@@ -3,14 +3,12 @@ import IconButton from '@mui/material/IconButton';
 import Tooltip from '@mui/material/Tooltip';
 import { type MRT_Column, type MRT_TableInstance } from '../types';
 
-interface Props<TData extends Record<string, any> = {}> {
+interface Props<TData extends Record<string, any>> {
   column: MRT_Column<TData>;
   table: MRT_TableInstance<TData>;
 }
 
-export const MRT_ColumnPinningButtons = <
-  TData extends Record<string, any> = {},
->({
+export const MRT_ColumnPinningButtons = <TData extends Record<string, any>>({
   column,
   table,
 }: Props<TData>) => {

package/src/buttons/MRT_CopyButton.tsx

@@ -3,19 +3,19 @@ import Button from '@mui/material/Button';
 import Tooltip from '@mui/material/Tooltip';
 import { type MRT_Cell, type MRT_TableInstance } from '../types';
 
-interface Props<TData extends Record<string, any> = {}> {
+interface Props<TData extends Record<string, any>> {
   cell: MRT_Cell<TData>;
   children: ReactNode;
   table: MRT_TableInstance<TData>;
 }
 
-export const MRT_CopyButton = <TData extends Record<string, any> = {}>({
+export const MRT_CopyButton = <TData extends Record<string, any>>({
   cell,
   children,
   table,
 }: Props<TData>) => {
   const {
-    options: { localization, muiTableBodyCellCopyButtonProps },
+    options: { localization, muiCopyButtonProps },
   } = table;
   const { column, row } = cell;
   const { columnDef } = column;
@@ -30,19 +30,19 @@ export const MRT_CopyButton = <TData extends Record<string, any> = {}>({
   };
 
   const mTableBodyCellCopyButtonProps =
-    muiTableBodyCellCopyButtonProps instanceof Function
-      ? muiTableBodyCellCopyButtonProps({ cell, column, row, table })
-      : muiTableBodyCellCopyButtonProps;
+    muiCopyButtonProps instanceof Function
+      ? muiCopyButtonProps({ cell, column, row, table })
+      : muiCopyButtonProps;
 
   const mcTableBodyCellCopyButtonProps =
-    columnDef.muiTableBodyCellCopyButtonProps instanceof Function
-      ? columnDef.muiTableBodyCellCopyButtonProps({
+    columnDef.muiCopyButtonProps instanceof Function
+      ? columnDef.muiCopyButtonProps({
           cell,
           column,
           row,
           table,
         })
-      : columnDef.muiTableBodyCellCopyButtonProps;
+      : columnDef.muiCopyButtonProps;
 
   const buttonProps = {
     ...mTableBodyCellCopyButtonProps,

package/src/buttons/MRT_EditActionButtons.tsx

@@ -2,15 +2,16 @@ import Box from '@mui/material/Box';
 import Button from '@mui/material/Button';
 import IconButton from '@mui/material/IconButton';
 import Tooltip from '@mui/material/Tooltip';
+import CircularProgress from '@mui/material/CircularProgress';
 import { type MRT_Row, type MRT_TableInstance } from '../types';
 
-interface Props<TData extends Record<string, any> = {}> {
+interface Props<TData extends Record<string, any>> {
   row: MRT_Row<TData>;
   table: MRT_TableInstance<TData>;
   variant?: 'icon' | 'text';
 }
 
-export const MRT_EditActionButtons = <TData extends Record<string, any> = {}>({
+export const MRT_EditActionButtons = <TData extends Record<string, any>>({
   row,
   table,
   variant = 'icon',
@@ -20,36 +21,59 @@ export const MRT_EditActionButtons = <TData extends Record<string, any> = {}>({
     options: {
       icons: { CancelIcon, SaveIcon },
       localization,
+      onCreatingRowCancel,
+      onCreatingRowSave,
       onEditingRowSave,
       onEditingRowCancel,
     },
     refs: { editInputRefs },
+    setCreatingRow,
     setEditingRow,
   } = table;
-  const { editingRow } = getState();
+  const { creatingRow, editingRow, isSaving } = getState();
+
+  const isCreating = creatingRow?.id === row.id;
+  const isEditing = editingRow?.id === row.id;
 
   const handleCancel = () => {
-    onEditingRowCancel?.({ row, table });
-    setEditingRow(null);
+    if (isCreating) {
+      onCreatingRowCancel?.({ row, table });
+      setCreatingRow(null);
+    } else if (isEditing) {
+      onEditingRowCancel?.({ row, table });
+      setEditingRow(null);
+    }
+    row._valuesCache = {} as any; //reset values cache
   };
 
-  const handleSave = () => {
+  const handleSubmitRow = () => {
     //look for auto-filled input values
-    Object.values(editInputRefs?.current)?.forEach((input) => {
-      if (
-        input.value !== undefined &&
-        Object.hasOwn(editingRow?._valuesCache as object, input.name)
-      ) {
-        // @ts-ignore
-        editingRow._valuesCache[input.name] = input.value;
-      }
-    });
-    onEditingRowSave?.({
-      exitEditingMode: () => setEditingRow(null),
-      row: editingRow ?? row,
-      table,
-      values: editingRow?._valuesCache ?? { ...row.original },
-    });
+    Object.values(editInputRefs?.current)
+      .filter((inputRef) => row.id === inputRef?.name?.split('_')?.[0])
+      ?.forEach((input) => {
+        if (
+          input.value !== undefined &&
+          Object.hasOwn(row?._valuesCache as object, input.name)
+        ) {
+          // @ts-ignore
+          row._valuesCache[input.name] = input.value;
+        }
+      });
+    if (isCreating)
+      onCreatingRowSave?.({
+        exitCreatingMode: () => setCreatingRow(null),
+        row,
+        table,
+        values: row._valuesCache,
+      });
+    else if (isEditing) {
+      onEditingRowSave?.({
+        exitEditingMode: () => setEditingRow(null),
+        row,
+        table,
+        values: row?._valuesCache,
+      });
+    }
   };
 
   return (
@@ -68,16 +92,23 @@ export const MRT_EditActionButtons = <TData extends Record<string, any> = {}>({
             <IconButton
               aria-label={localization.save}
               color="info"
-              onClick={handleSave}
+              onClick={handleSubmitRow}
             >
-              <SaveIcon />
+              {isSaving ? <CircularProgress size={18} /> : <SaveIcon />}
             </IconButton>
           </Tooltip>
         </>
       ) : (
         <>
-          <Button onClick={handleCancel}>{localization.cancel}</Button>
-          <Button onClick={handleSave} variant="contained">
+          <Button sx={{ minWidth: '100px' }} onClick={handleCancel}>
+            {localization.cancel}
+          </Button>
+          <Button
+            sx={{ minWidth: '100px' }}
+            onClick={handleSubmitRow}
+            variant="contained"
+          >
+            {isSaving && <CircularProgress color="inherit" size={18} />}
             {localization.save}
           </Button>
         </>

package/src/buttons/MRT_ExpandAllButton.tsx

@@ -2,11 +2,13 @@ import IconButton from '@mui/material/IconButton';
 import Tooltip from '@mui/material/Tooltip';
 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_ExpandAllButton = ({ table }: Props) => {
+export const MRT_ExpandAllButton = <TData extends Record<string, any>>({
+  table,
+}: Props<TData>) => {
   const {
     getIsAllRowsExpanded,
     getIsSomeRowsExpanded,

package/src/buttons/MRT_ExpandButton.tsx

@@ -3,12 +3,12 @@ import IconButton from '@mui/material/IconButton';
 import Tooltip from '@mui/material/Tooltip';
 import { type MRT_Row, type MRT_TableInstance } from '../types';
 
-interface Props<TData extends Record<string, any> = {}> {
+interface Props<TData extends Record<string, any>> {
   row: MRT_Row<TData>;
   table: MRT_TableInstance<TData>;
 }
 
-export const MRT_ExpandButton = <TData extends Record<string, any> = {}>({
+export const MRT_ExpandButton = <TData extends Record<string, any>>({
   row,
   table,
 }: Props<TData>) => {

package/src/buttons/MRT_GrabHandleButton.tsx

@@ -4,14 +4,14 @@ import Tooltip from '@mui/material/Tooltip';
 import { type IconButtonProps } from '@mui/material/IconButton';
 import { type MRT_TableInstance } from '../types';
 
-interface Props<TData extends Record<string, any> = {}> {
+interface Props<TData extends Record<string, any>> {
   iconButtonProps?: IconButtonProps;
   onDragStart: DragEventHandler<HTMLButtonElement>;
   onDragEnd: DragEventHandler<HTMLButtonElement>;
   table: MRT_TableInstance<TData>;
 }
 
-export const MRT_GrabHandleButton = <TData extends Record<string, any> = {}>({
+export const MRT_GrabHandleButton = <TData extends Record<string, any>>({
   iconButtonProps,
   onDragEnd,
   onDragStart,

package/src/buttons/MRT_ShowHideColumnsButton.tsx

@@ -5,14 +5,11 @@ import Tooltip from '@mui/material/Tooltip';
 import { MRT_ShowHideColumnsMenu } from '../menus/MRT_ShowHideColumnsMenu';
 import { type MRT_TableInstance } from '../types';
 
-interface Props<TData extends Record<string, any> = {}>
-  extends IconButtonProps {
+interface Props<TData extends Record<string, any>> extends IconButtonProps {
   table: MRT_TableInstance<TData>;
 }
 
-export const MRT_ShowHideColumnsButton = <
-  TData extends Record<string, any> = {},
->({
+export const MRT_ShowHideColumnsButton = <TData extends Record<string, any>>({
   table,
   ...rest
 }: Props<TData>) => {

package/src/buttons/MRT_ToggleDensePaddingButton.tsx

@@ -3,13 +3,12 @@ import { type IconButtonProps } from '@mui/material/IconButton';
 import Tooltip from '@mui/material/Tooltip';
 import { type MRT_TableInstance } from '../types';
 
-interface Props<TData extends Record<string, any> = {}>
-  extends IconButtonProps {
+interface Props<TData extends Record<string, any>> extends IconButtonProps {
   table: MRT_TableInstance<TData>;
 }
 
 export const MRT_ToggleDensePaddingButton = <
-  TData extends Record<string, any> = {},
+  TData extends Record<string, any>,
 >({
   table,
   ...rest

package/src/buttons/MRT_ToggleFiltersButton.tsx

@@ -3,14 +3,11 @@ import { type IconButtonProps } from '@mui/material/IconButton';
 import Tooltip from '@mui/material/Tooltip';
 import { type MRT_TableInstance } from '../types';
 
-interface Props<TData extends Record<string, any> = {}>
-  extends IconButtonProps {
+interface Props<TData extends Record<string, any>> extends IconButtonProps {
   table: MRT_TableInstance<TData>;
 }
 
-export const MRT_ToggleFiltersButton = <
-  TData extends Record<string, any> = {},
->({
+export const MRT_ToggleFiltersButton = <TData extends Record<string, any>>({
   table,
   ...rest
 }: Props<TData>) => {

package/src/buttons/{MRT_FullScreenToggleButton.tsx → MRT_ToggleFullScreenButton.tsx}

@@ -2,15 +2,13 @@ import IconButton from '@mui/material/IconButton';
 import { type IconButtonProps } from '@mui/material/IconButton';
 import Tooltip from '@mui/material/Tooltip';
 import { type MRT_TableInstance } from '../types';
+import { useState } from 'react';
 
-interface Props<TData extends Record<string, any> = {}>
-  extends IconButtonProps {
+interface Props<TData extends Record<string, any>> extends IconButtonProps {
   table: MRT_TableInstance<TData>;
 }
 
-export const MRT_FullScreenToggleButton = <
-  TData extends Record<string, any> = {},
->({
+export const MRT_ToggleFullScreenButton = <TData extends Record<string, any>>({
   table,
   ...rest
 }: Props<TData>) => {
@@ -24,15 +22,24 @@ export const MRT_FullScreenToggleButton = <
   } = table;
   const { isFullScreen } = getState();
 
+  const [tooltipOpened, setTooltipOpened] = useState(false);
+
   const handleToggleFullScreen = () => {
+    setTooltipOpened(false);
     setIsFullScreen(!isFullScreen);
   };
 
   return (
-    <Tooltip arrow title={rest?.title ?? localization.toggleFullScreen}>
+    <Tooltip
+      open={tooltipOpened}
+      arrow
+      title={rest?.title ?? localization.toggleFullScreen}
+    >
       <IconButton
         aria-label={localization.showHideFilters}
         onClick={handleToggleFullScreen}
+        onMouseEnter={() => setTooltipOpened(true)}
+        onMouseLeave={() => setTooltipOpened(false)}
         {...rest}
         title={undefined}
       >

package/src/buttons/MRT_ToggleGlobalFilterButton.tsx

@@ -1,15 +1,13 @@
-import IconButton from '@mui/material/IconButton';
-import { type IconButtonProps } from '@mui/material/IconButton';
+import IconButton, { type IconButtonProps } from '@mui/material/IconButton';
 import Tooltip from '@mui/material/Tooltip';
 import { type MRT_TableInstance } from '../types';
 
-interface Props<TData extends Record<string, any> = {}>
-  extends IconButtonProps {
+interface Props<TData extends Record<string, any>> extends IconButtonProps {
   table: MRT_TableInstance<TData>;
 }
 
 export const MRT_ToggleGlobalFilterButton = <
-  TData extends Record<string, any> = {},
+  TData extends Record<string, any>,
 >({
   table,
   ...rest

package/src/buttons/MRT_ToggleRowActionMenuButton.tsx

@@ -16,14 +16,14 @@ const commonIconButtonStyles = {
   },
 };
 
-interface Props<TData extends Record<string, any> = {}> {
+interface Props<TData extends Record<string, any>> {
   cell: MRT_Cell<TData>;
   row: MRT_Row<TData>;
   table: MRT_TableInstance<TData>;
 }
 
 export const MRT_ToggleRowActionMenuButton = <
-  TData extends Record<string, any> = {},
+  TData extends Record<string, any>,
 >({
   cell,
   row,
@@ -32,7 +32,8 @@ export const MRT_ToggleRowActionMenuButton = <
   const {
     getState,
     options: {
-      editingMode,
+      createDisplayMode,
+      editDisplayMode,
       enableEditing,
       icons: { EditIcon, MoreHorizIcon },
       localization,
@@ -42,7 +43,14 @@ export const MRT_ToggleRowActionMenuButton = <
     setEditingRow,
   } = table;
 
-  const { editingRow } = getState();
+  const { creatingRow, editingRow } = getState();
+
+  const isCreating = creatingRow?.id === row.id;
+  const isEditing = editingRow?.id === row.id;
+
+  const showEditActionButtons =
+    (isCreating && createDisplayMode === 'row') ||
+    (isEditing && editDisplayMode === 'row');
 
   const [anchorEl, setAnchorEl] = useState<null | HTMLElement>(null);
 
@@ -60,9 +68,9 @@ export const MRT_ToggleRowActionMenuButton = <
 
   return (
     <>
-      {renderRowActions ? (
+      {renderRowActions && !showEditActionButtons ? (
         renderRowActions({ cell, row, table })
-      ) : row.id === editingRow?.id && editingMode === 'row' ? (
+      ) : showEditActionButtons ? (
         <MRT_EditActionButtons row={row} table={table} />
       ) : !renderRowActionMenuItems &&
         (enableEditing instanceof Function
@@ -97,9 +105,9 @@ export const MRT_ToggleRowActionMenuButton = <
           <MRT_RowActionMenu
             anchorEl={anchorEl}
             handleEdit={handleStartEditMode}
-            row={row as any}
+            row={row}
             setAnchorEl={setAnchorEl}
-            table={table as any}
+            table={table}
           />
         </>
       ) : null}

package/src/buttons/index.ts

@@ -0,0 +1,12 @@
+export * from './MRT_ColumnPinningButtons';
+export * from './MRT_CopyButton';
+export * from './MRT_EditActionButtons';
+export * from './MRT_ExpandAllButton';
+export * from './MRT_ExpandButton';
+export * from './MRT_ToggleFullScreenButton';
+export * from './MRT_GrabHandleButton';
+export * from './MRT_ShowHideColumnsButton';
+export * from './MRT_ToggleDensePaddingButton';
+export * from './MRT_ToggleFiltersButton';
+export * from './MRT_ToggleGlobalFilterButton';
+export * from './MRT_ToggleRowActionMenuButton';