material-react-table 0.7.0 → 0.7.3

package/src/inputs/MRT_EditCellTextField.tsx

@@ -16,7 +16,14 @@ interface Props {
 export const MRT_EditCellTextField: FC<Props> = ({ cell, tableInstance }) => {
   const {
     getState,
-    options: { enableEditing, muiTableBodyCellEditTextFieldProps },
+    options: {
+      idPrefix,
+      enableEditing,
+      muiTableBodyCellEditTextFieldProps,
+      onCellEditBlur,
+      onCellEditChange,
+    },
+    setCurrentEditingCell,
     setCurrentEditingRow,
   } = tableInstance;
 
@@ -27,6 +34,7 @@ export const MRT_EditCellTextField: FC<Props> = ({ cell, tableInstance }) => {
   const handleChange = (event: ChangeEvent<HTMLInputElement>) => {
     setValue(event.target.value);
     column.onCellEditChange?.({ event, cell, tableInstance });
+    onCellEditChange?.({ event, cell, tableInstance });
   };
 
   const handleBlur = (event: FocusEvent<HTMLInputElement>) => {
@@ -34,7 +42,9 @@ export const MRT_EditCellTextField: FC<Props> = ({ cell, tableInstance }) => {
       row.values[column.id] = value;
       setCurrentEditingRow({ ...getState().currentEditingRow } as MRT_Row);
     }
+    setCurrentEditingCell(null);
     column.onCellEditBlur?.({ event, cell, tableInstance });
+    onCellEditBlur?.({ event, cell, tableInstance });
   };
 
   const mTableBodyCellEditTextFieldProps =
@@ -58,6 +68,7 @@ export const MRT_EditCellTextField: FC<Props> = ({ cell, tableInstance }) => {
 
   return (
     <TextField
+      id={`mrt-${idPrefix}-edit-cell-text-field-${cell.id}`}
       margin="dense"
       onBlur={handleBlur}
       onChange={handleChange}

package/src/localization.ts

@@ -32,6 +32,7 @@ export interface MRT_Localization {
   hideColumn: string;
   pinToLeft: string;
   pinToRight: string;
+  resetColumnSize: string;
   rowActions: string;
   rowNumber: string;
   rowNumbers: string;
@@ -92,6 +93,7 @@ export const MRT_DefaultLocalization_EN: MRT_Localization = {
   hideColumn: 'Hide {column} column',
   pinToLeft: 'Pin to left',
   pinToRight: 'Pin to right',
+  resetColumnSize: 'Reset column size',
   rowActions: 'Row Actions',
   rowNumber: '#',
   rowNumbers: 'Row Numbers',

package/src/menus/MRT_ColumnActionMenu.tsx

@@ -35,9 +35,10 @@ export const MRT_ColumnActionMenu: FC<Props> = ({
     setColumnOrder,
     options: {
       enableColumnFilters,
-      enablePinning,
+      enableColumnResizing,
       enableGrouping,
       enableHiding,
+      enablePinning,
       enableSorting,
       icons: {
         ArrowRightIcon,
@@ -48,6 +49,7 @@ export const MRT_ColumnActionMenu: FC<Props> = ({
         FilterListOffIcon,
         PushPinIcon,
         SortIcon,
+        RestartAltIcon,
         VisibilityOffIcon,
       },
       idPrefix,
@@ -58,7 +60,7 @@ export const MRT_ColumnActionMenu: FC<Props> = ({
 
   const { column } = header;
 
-  const { isDensePadding, columnVisibility } = getState();
+  const { columnSizing, columnVisibility, isDensePadding } = getState();
 
   const [filterMenuAnchorEl, setFilterMenuAnchorEl] =
     useState<null | HTMLElement>(null);
@@ -81,6 +83,11 @@ export const MRT_ColumnActionMenu: FC<Props> = ({
     setAnchorEl(null);
   };
 
+  const handleResetColumnSize = () => {
+    column.resetSize();
+    setAnchorEl(null);
+  };
+
   const handleHideColumn = () => {
     column.toggleVisibility(false);
     setAnchorEl(null);
@@ -263,7 +270,7 @@ export const MRT_ColumnActionMenu: FC<Props> = ({
       {enablePinning &&
         column.getCanPin() && [
           <MenuItem
-            disabled={column.getIsPinned() === 'left'}
+            disabled={column.getIsPinned() === 'left' || !column.getCanPin()}
             key={0}
             onClick={() => handlePinColumn('left')}
             sx={commonMenuItemStyles}
@@ -276,7 +283,7 @@ export const MRT_ColumnActionMenu: FC<Props> = ({
             </Box>
           </MenuItem>,
           <MenuItem
-            disabled={column.getIsPinned() === 'right'}
+            disabled={column.getIsPinned() === 'right' || !column.getCanPin()}
             key={0}
             onClick={() => handlePinColumn('right')}
             sx={commonMenuItemStyles}
@@ -303,6 +310,21 @@ export const MRT_ColumnActionMenu: FC<Props> = ({
             </Box>
           </MenuItem>,
         ]}
+      {enableColumnResizing && [
+        <MenuItem
+          disabled={!column.getCanResize() || !columnSizing[column.id]}
+          key={0}
+          onClick={handleResetColumnSize}
+          sx={commonMenuItemStyles}
+        >
+          <Box sx={commonListItemStyles}>
+            <ListItemIcon>
+              <RestartAltIcon />
+            </ListItemIcon>
+            {localization.resetColumnSize}
+          </Box>
+        </MenuItem>,
+      ]}
       {enableHiding && [
         <MenuItem
           disabled={column.enableHiding === false}

package/src/menus/MRT_FilterTypeMenu.tsx

@@ -123,8 +123,8 @@ export const MRT_FilterTypeMenu: FC<Props> = ({
         },
       ].filter((filterType) =>
         header
-          ? !header.column.enabledFilterTypes ||
-            header.column.enabledFilterTypes.includes(filterType.type)
+          ? !header.column.enabledColumnFilterTypes ||
+            header.column.enabledColumnFilterTypes.includes(filterType.type)
           : (!enabledGlobalFilterTypes ||
               enabledGlobalFilterTypes.includes(filterType.type)) &&
             [

package/src/menus/MRT_ShowHideColumnsMenuItems.tsx

@@ -1,10 +1,10 @@
 import React, { FC } from 'react';
 import { FormControlLabel, MenuItem, Switch } from '@mui/material';
-import type { MRT_ColumnInstance, MRT_TableInstance } from '..';
+import type { MRT_Column, MRT_TableInstance } from '..';
 import { commonMenuItemStyles } from './MRT_ColumnActionMenu';
 
 interface Props {
-  column: MRT_ColumnInstance;
+  column: MRT_Column;
   isSubMenu?: boolean;
   tableInstance: MRT_TableInstance;
 }
@@ -26,9 +26,9 @@ export const MRT_ShowHideColumnsMenuItems: FC<Props> = ({
     (column.columnDefType === 'group' &&
       column.getLeafColumns().some((col) => col.getIsVisible()));
 
-  const handleToggleColumnHidden = (column: MRT_ColumnInstance) => {
+  const handleToggleColumnHidden = (column: MRT_Column) => {
     if (column.columnDefType === 'group') {
-      column?.columns?.forEach?.((childColumn: MRT_ColumnInstance) => {
+      column?.columns?.forEach?.((childColumn: MRT_Column) => {
         childColumn.toggleVisibility(!switchChecked);
       });
     } else {
@@ -57,7 +57,7 @@ export const MRT_ShowHideColumnsMenuItems: FC<Props> = ({
           onChange={() => handleToggleColumnHidden(column)}
         />
       </MenuItem>
-      {column.columns?.map((c: MRT_ColumnInstance, i) => (
+      {column.columns?.map((c: MRT_Column, i) => (
         <MRT_ShowHideColumnsMenuItems
           key={`${i}-${c.id}`}
           column={c}

package/src/table/MRT_Table.tsx

@@ -14,10 +14,10 @@ export const MRT_Table: FC<Props> = ({ pinned, tableInstance }) => {
   const {
     getTableProps,
     options: {
-      enableStickyHeader,
-      hideTableFooter,
-      hideTableHead,
       muiTableProps,
+      enableTableHead,
+      enableTableFooter,
+      enableStickyHeader,
     },
   } = tableInstance;
 
@@ -33,11 +33,11 @@ export const MRT_Table: FC<Props> = ({ pinned, tableInstance }) => {
 
   return (
     <Table stickyHeader={enableStickyHeader} {...tableProps}>
-      {!hideTableHead && (
+      {enableTableHead && (
         <MRT_TableHead pinned={pinned} tableInstance={tableInstance} />
       )}
       <MRT_TableBody pinned={pinned} tableInstance={tableInstance} />
-      {!hideTableFooter && (
+      {enableTableFooter && (
         <MRT_TableFooter pinned={pinned} tableInstance={tableInstance} />
       )}
     </Table>

package/src/table/MRT_TableContainer.tsx

@@ -1,6 +1,5 @@
-import React, { FC, useEffect, useState } from 'react';
+import React, { CSSProperties, FC, useEffect, useState } from 'react';
 import { alpha, Box, TableContainer, Theme } from '@mui/material';
-import { SystemStyleObject } from '@mui/material/node_modules/@mui/system';
 import { MRT_TableInstance } from '..';
 import { MRT_Table } from './MRT_Table';
 
@@ -12,10 +11,10 @@ const commonBoxStyles = ({
   pinned?: 'left' | 'right';
   theme: Theme;
   visible?: boolean;
-}): SystemStyleObject<Theme> => ({
+}): CSSProperties => ({
   display: 'grid',
   minWidth: visible ? '200px' : 0,
-  overflowX: 'auto',
+  overflowX: pinned ? 'scroll' : 'auto',
   boxShadow:
     pinned === 'left'
       ? `0 1px 12px ${alpha(theme.palette.common.black, 0.5)}`

package/src/table/MRT_TablePaper.tsx

@@ -12,7 +12,7 @@ interface Props {
 export const MRT_TablePaper: FC<Props> = ({ tableInstance }) => {
   const {
     getState,
-    options: { hideToolbarBottom, hideToolbarTop, muiTablePaperProps },
+    options: { enableToolbarBottom, enableToolbarTop, muiTablePaperProps },
   } = tableInstance;
 
   const { isFullScreen } = getState();
@@ -21,8 +21,10 @@ export const MRT_TablePaper: FC<Props> = ({ tableInstance }) => {
     if (typeof window !== 'undefined') {
       if (isFullScreen) {
         document.body.style.overflow = 'hidden';
+        document.body.style.height = '100vh';
       } else {
         document.body.style.overflow = 'auto';
+        document.body.style.height = 'auto';
       }
     }
   }, [isFullScreen]);
@@ -41,23 +43,17 @@ export const MRT_TablePaper: FC<Props> = ({ tableInstance }) => {
         ...tablePaperProps?.sx,
       }}
       style={{
-        height: isFullScreen ? '100%' : undefined,
-        left: isFullScreen ? '0' : undefined,
+        height: isFullScreen ? '100vh' : undefined,
         margin: isFullScreen ? '0' : undefined,
-        maxHeight: isFullScreen ? '100%' : undefined,
-        maxWidth: isFullScreen ? '100%' : undefined,
-        overflowY: !isFullScreen ? 'hidden' : undefined,
-        position: isFullScreen ? 'fixed' : undefined,
-        right: isFullScreen ? '0' : undefined,
-        top: isFullScreen ? '0' : undefined,
+        maxHeight: isFullScreen ? '100vh' : undefined,
+        maxWidth: isFullScreen ? '100vw' : undefined,
+        padding: isFullScreen ? '0' : undefined,
         width: isFullScreen ? '100vw' : undefined,
-        zIndex: isFullScreen ? 1200 : 1,
-        bottom: isFullScreen ? '0' : undefined,
       }}
     >
-      {!hideToolbarTop && <MRT_ToolbarTop tableInstance={tableInstance} />}
+      {enableToolbarTop && <MRT_ToolbarTop tableInstance={tableInstance} />}
       <MRT_TableContainer tableInstance={tableInstance} />
-      {!hideToolbarBottom && (
+      {enableToolbarBottom && (
         <MRT_ToolbarBottom tableInstance={tableInstance} />
       )}
     </Paper>

package/src/table/MRT_TableRoot.tsx

@@ -1,4 +1,4 @@
-import React, { useMemo, useState } from 'react';
+import React, { useEffect, useMemo, useState } from 'react';
 import {
   PaginationState,
   Table,
@@ -15,7 +15,8 @@ import {
   ColumnDef,
 } from '@tanstack/react-table';
 import {
-  MRT_ColumnInterface,
+  MRT_Cell,
+  MRT_ColumnDef,
   MRT_FilterType,
   MRT_Row,
   MRT_TableInstance,
@@ -34,16 +35,24 @@ import {
 } from '../utils';
 import { defaultFilterFNs } from '../filtersFNs';
 import { MRT_FILTER_TYPE } from '../enums';
+import { Box, Dialog, Grow } from '@mui/material';
 
 export const MRT_TableRoot = <D extends Record<string, any> = {}>(
   props: MaterialReactTableProps<D>,
 ) => {
-  const idPrefix = useMemo(
-    () => props.idPrefix ?? Math.random().toString(36).substring(2, 9),
+  const [idPrefix, setIdPrefix] = useState(props.idPrefix);
+  useEffect(
+    () =>
+      setIdPrefix(props.idPrefix ?? Math.random().toString(36).substring(2, 9)),
     [props.idPrefix],
   );
-  const [currentEditingRow, setCurrentEditingRow] = useState<MRT_Row | null>(
-    null,
+
+  const [currentEditingCell, setCurrentEditingCell] =
+    useState<MRT_Cell<D> | null>(
+      props.initialState?.currentEditingCell ?? null,
+    );
+  const [currentEditingRow, setCurrentEditingRow] = useState<MRT_Row<D> | null>(
+    props.initialState?.currentEditingRow ?? null,
   );
   const [isDensePadding, setIsDensePadding] = useState(
     props.initialState?.isDensePadding ?? false,
@@ -68,16 +77,14 @@ export const MRT_TableRoot = <D extends Record<string, any> = {}>(
   }>(() =>
     Object.assign(
       {},
-      ...getAllLeafColumnDefs(props.columns as MRT_ColumnInterface[]).map(
-        (c) => ({
-          [c.id as string]:
-            c.filter ??
-            props?.initialState?.columnFilters?.find((cf) => cf.id === c.id) ??
-            (!!c.filterSelectOptions?.length
-              ? MRT_FILTER_TYPE.EQUALS
-              : MRT_FILTER_TYPE.BEST_MATCH),
-        }),
-      ),
+      ...getAllLeafColumnDefs(props.columns as MRT_ColumnDef[]).map((c) => ({
+        [c.id as string]:
+          c.filter ??
+          props?.initialState?.columnFilters?.find((cf) => cf.id === c.id) ??
+          (!!c.filterSelectOptions?.length
+            ? MRT_FILTER_TYPE.EQUALS
+            : MRT_FILTER_TYPE.BEST_MATCH),
+      })),
     ),
   );
 
@@ -85,15 +92,13 @@ export const MRT_TableRoot = <D extends Record<string, any> = {}>(
     props.globalFilterType ?? MRT_FILTER_TYPE.BEST_MATCH_FIRST,
   );
 
-  const table = useMemo(
-    () => createTable<{ Row: D }>(),
-    [],
-  ) as unknown as Table<D>;
+  const table = useMemo(() => createTable() as unknown as Table<D>, []);
 
   const displayColumns = useMemo(
     () =>
       [
-        (props.enableRowActions || props.enableEditing) &&
+        (props.enableRowActions ||
+          (props.enableEditing && props.editingMode === 'row')) &&
           createDisplayColumn(table, {
             Cell: ({ cell }) => (
               <MRT_ToggleRowActionMenuButton
@@ -152,6 +157,7 @@ export const MRT_TableRoot = <D extends Record<string, any> = {}>(
           }),
       ].filter(Boolean),
     [
+      props.editingMode,
       props.enableEditing,
       props.enableExpandAll,
       props.enableExpanded,
@@ -184,11 +190,11 @@ export const MRT_TableRoot = <D extends Record<string, any> = {}>(
         ? [...Array(10).fill(null)].map(() =>
             Object.assign(
               {},
-              ...getAllLeafColumnDefs(
-                props.columns as MRT_ColumnInterface[],
-              ).map((c) => ({
-                [c.id]: null,
-              })),
+              ...getAllLeafColumnDefs(props.columns as MRT_ColumnDef[]).map(
+                (c) => ({
+                  [c.id]: null,
+                }),
+              ),
             ),
           )
         : props.data,
@@ -198,9 +204,6 @@ export const MRT_TableRoot = <D extends Record<string, any> = {}>(
   //@ts-ignore
   const tableInstance: MRT_TableInstance<{}> = {
     ...useTableInstance(table, {
-      ...props,
-      columns,
-      data,
       //@ts-ignore
       filterTypes: defaultFilterFNs,
       getColumnFilteredRowModel: getColumnFilteredRowModelSync(),
@@ -210,14 +213,16 @@ export const MRT_TableRoot = <D extends Record<string, any> = {}>(
       getGroupedRowModel: getGroupedRowModelSync(),
       getPaginationRowModel: getPaginationRowModel(),
       getSortedRowModel: getSortedRowModelSync(),
-      getSubRows: props.getSubRows ?? ((originalRow: D) => originalRow.subRows),
+      getSubRows: (originalRow: D) => originalRow.subRows,
       globalFilterType: currentGlobalFilterType,
       idPrefix,
-      //@ts-ignore
-      initialState: props.initialState,
       onPaginationChange: (updater: any) =>
         setPagination((old) => functionalUpdate(updater, old)),
+      ...props,
+      columns,
+      data,
       state: {
+        currentEditingCell,
         currentEditingRow,
         currentFilterTypes,
         currentGlobalFilterType,
@@ -230,6 +235,9 @@ export const MRT_TableRoot = <D extends Record<string, any> = {}>(
         ...props.state,
       },
     }),
+    //@ts-ignore
+    setCurrentEditingCell,
+    //@ts-ignore
     setCurrentEditingRow,
     setCurrentFilterTypes,
     setCurrentGlobalFilterType,
@@ -239,5 +247,23 @@ export const MRT_TableRoot = <D extends Record<string, any> = {}>(
     setShowGlobalFilter,
   };
 
-  return <MRT_TablePaper tableInstance={tableInstance} />;
+  return (
+    <>
+      <Dialog
+        TransitionComponent={Grow}
+        PaperComponent={Box}
+        disablePortal
+        fullScreen
+        keepMounted={false}
+        onClose={() => tableInstance.setIsFullScreen(false)}
+        open={tableInstance.getState().isFullScreen}
+        transitionDuration={400}
+      >
+        <MRT_TablePaper tableInstance={tableInstance} />
+      </Dialog>
+      {!tableInstance.getState().isFullScreen && (
+        <MRT_TablePaper tableInstance={tableInstance} />
+      )}
+    </>
+  );
 };

package/src/toolbar/MRT_ToolbarBottom.tsx

@@ -15,7 +15,7 @@ export const MRT_ToolbarBottom: FC<Props> = ({ tableInstance }) => {
   const {
     getState,
     options: {
-      hideToolbarInternalActions,
+      enableToolbarInternalActions,
       idPrefix,
       enablePagination,
       muiTableToolbarBottomProps,
@@ -51,7 +51,7 @@ export const MRT_ToolbarBottom: FC<Props> = ({ tableInstance }) => {
       <Box
         sx={{ display: 'flex', justifyContent: 'space-between', width: '100%' }}
       >
-        {!hideToolbarInternalActions && positionToolbarActions === 'bottom' ? (
+        {enableToolbarInternalActions && positionToolbarActions === 'bottom' ? (
           <MRT_ToolbarInternalButtons tableInstance={tableInstance} />
         ) : (
           <span />

package/src/toolbar/MRT_ToolbarTop.tsx

@@ -29,7 +29,7 @@ export const MRT_ToolbarTop: FC<Props> = ({ tableInstance }) => {
     options: {
       enableGlobalFilter,
       enablePagination,
-      hideToolbarInternalActions,
+      enableToolbarInternalActions,
       idPrefix,
       muiTableToolbarTopProps,
       positionPagination,
@@ -82,7 +82,7 @@ export const MRT_ToolbarTop: FC<Props> = ({ tableInstance }) => {
           {enableGlobalFilter && (
             <MRT_SearchTextField tableInstance={tableInstance} />
           )}
-          {!hideToolbarInternalActions && positionToolbarActions === 'top' && (
+          {enableToolbarInternalActions && positionToolbarActions === 'top' && (
             <MRT_ToolbarInternalButtons tableInstance={tableInstance} />
           )}
         </Box>

package/src/utils.ts

@@ -1,17 +1,18 @@
 import { ColumnDef, Table } from '@tanstack/react-table';
-import { MRT_ColumnInterface, MRT_FilterType } from '.';
+import { MRT_ColumnDef, MRT_FilterType } from '.';
 import { MRT_FILTER_TYPE } from './enums';
+import { defaultFilterFNs } from './filtersFNs';
 
 export const getAllLeafColumnDefs = (
-  columns: MRT_ColumnInterface[],
-): MRT_ColumnInterface[] => {
-  let lowestLevelColumns: MRT_ColumnInterface[] = columns;
-  let currentCols: MRT_ColumnInterface[] | undefined = columns;
+  columns: MRT_ColumnDef[],
+): MRT_ColumnDef[] => {
+  let lowestLevelColumns: MRT_ColumnDef[] = columns;
+  let currentCols: MRT_ColumnDef[] | undefined = columns;
   while (!!currentCols?.length && currentCols.some((col) => col.columns)) {
-    const nextCols: MRT_ColumnInterface[] = currentCols
+    const nextCols: MRT_ColumnDef[] = currentCols
       .filter((col) => !!col.columns)
       .map((col) => col.columns)
-      .flat() as MRT_ColumnInterface[];
+      .flat() as MRT_ColumnDef[];
     if (nextCols.every((col) => !col?.columns)) {
       lowestLevelColumns = [...lowestLevelColumns, ...nextCols];
     }
@@ -22,7 +23,7 @@ export const getAllLeafColumnDefs = (
 
 export const createGroup = <D extends Record<string, any> = {}>(
   table: Table<D>,
-  column: MRT_ColumnInterface<D>,
+  column: MRT_ColumnDef<D>,
   currentFilterTypes: { [key: string]: MRT_FilterType },
 ): ColumnDef<D> =>
   table.createGroup({
@@ -36,15 +37,18 @@ export const createGroup = <D extends Record<string, any> = {}>(
 
 export const createDataColumn = <D extends Record<string, any> = {}>(
   table: Table<D>,
-  column: MRT_ColumnInterface<D>,
+  column: MRT_ColumnDef<D>,
   currentFilterTypes: { [key: string]: MRT_FilterType },
 ): ColumnDef<D> => // @ts-ignore
   table.createDataColumn(column.id, {
-    filterType: currentFilterTypes[column.id] || MRT_FILTER_TYPE.BEST_MATCH,
+    filterFn:
+      currentFilterTypes[column.id] instanceof Function
+        ? currentFilterTypes[column.id]
+        : defaultFilterFNs[currentFilterTypes[column.id] as MRT_FILTER_TYPE],
     ...column,
   }) as any;
 
 export const createDisplayColumn = <D extends Record<string, any> = {}>(
   table: Table<D>,
-  column: Omit<MRT_ColumnInterface<D>, 'header'> & { header?: string },
+  column: Omit<MRT_ColumnDef<D>, 'header'> & { header?: string },
 ): ColumnDef<D> => table.createDisplayColumn(column);