material-react-table 1.7.3 → 1.8.0

package/src/inputs/MRT_EditCellTextField.tsx

@@ -1,5 +1,6 @@
 import React, { ChangeEvent, FocusEvent, KeyboardEvent, useState } from 'react';
 import TextField from '@mui/material/TextField';
+import MenuItem from '@mui/material/MenuItem';
 import type { TextFieldProps } from '@mui/material/TextField';
 import type { MRT_Cell, MRT_TableInstance } from '..';
 
@@ -47,6 +48,8 @@ export const MRT_EditCellTextField = <TData extends Record<string, any> = {}>({
     ...mcTableBodyCellEditTextFieldProps,
   };
 
+  const isSelectEdit = columnDef.editVariant === 'select';
+
   const saveRow = (newValue: string) => {
     if (editingRow) {
       setEditingRow({
@@ -83,7 +86,11 @@ export const MRT_EditCellTextField = <TData extends Record<string, any> = {}>({
 
   return (
     <TextField
-      disabled={columnDef.enableEditing === false}
+      disabled={
+        (columnDef.enableEditing instanceof Function
+          ? columnDef.enableEditing(row)
+          : columnDef.enableEditing) === false
+      }
       fullWidth
       inputRef={(inputRef) => {
         if (inputRef) {
@@ -97,6 +104,7 @@ export const MRT_EditCellTextField = <TData extends Record<string, any> = {}>({
       margin="none"
       name={column.id}
       placeholder={columnDef.header}
+      select={isSelectEdit}
       value={value}
       variant="standard"
       {...textFieldProps}
@@ -107,6 +115,34 @@ export const MRT_EditCellTextField = <TData extends Record<string, any> = {}>({
       onBlur={handleBlur}
       onChange={handleChange}
       onKeyDown={handleEnterKeyDown}
-    />
+    >
+      {columnDef?.editSelectOptions?.map(
+        (option: string | { text: string; value: string }) => {
+          let value: string;
+          let text: string;
+          if (typeof option !== 'object') {
+            value = option;
+            text = option;
+          } else {
+            value = option.value;
+            text = option.text;
+          }
+          return (
+            <MenuItem
+              key={value}
+              sx={{
+                display: 'flex',
+                m: 0,
+                alignItems: 'center',
+                gap: '0.5rem',
+              }}
+              value={value}
+            >
+              {text}
+            </MenuItem>
+          );
+        },
+      )}
+    </TextField>
   );
 };

package/src/menus/MRT_FilterOptionMenu.tsx

@@ -131,6 +131,7 @@ export const MRT_FilterOptionMenu = <TData extends Record<string, any> = {}>({
   const { globalFilterFn, density } = getState();
   const { column } = header ?? {};
   const { columnDef } = column ?? {};
+  const currentFilterValue = column?.getFilterValue();
 
   const allowedColumnFilterOptions =
     columnDef?.columnFilterModeOptions ?? columnFilterModeOptions;
@@ -155,15 +156,19 @@ export const MRT_FilterOptionMenu = <TData extends Record<string, any> = {}>({
         [header.id]: option,
       }));
       if (['empty', 'notEmpty'].includes(option as string)) {
-        column.setFilterValue(' ');
+        if (currentFilterValue !== ' ') {
+          column.setFilterValue(' ');
+        }
       } else if (
         columnDef?.filterVariant === 'multi-select' ||
         ['arrIncludesSome', 'arrIncludesAll', 'arrIncludes'].includes(
           option as string,
         )
       ) {
-        column.setFilterValue([]);
-        setFilterValue?.([]);
+        if ((currentFilterValue as Array<any>)?.length) {
+          column.setFilterValue([]);
+          setFilterValue?.([]);
+        }
       } else if (
         columnDef?.filterVariant === 'range' ||
         ['between', 'betweenInclusive', 'inNumberRange'].includes(
@@ -173,8 +178,12 @@ export const MRT_FilterOptionMenu = <TData extends Record<string, any> = {}>({
         column.setFilterValue(['', '']);
         setFilterValue?.('');
       } else {
-        column.setFilterValue('');
-        setFilterValue?.('');
+        if (
+          !['', undefined].includes(currentFilterValue as string | undefined)
+        ) {
+          column.setFilterValue('');
+          setFilterValue?.('');
+        }
       }
     } else {
       setGlobalFilterFn(option);

package/src/menus/MRT_RowActionMenu.tsx

@@ -44,16 +44,18 @@ export const MRT_RowActionMenu = ({
         dense: density === 'compact',
       }}
     >
-      {enableEditing && (
-        <MenuItem onClick={handleEdit} sx={commonMenuItemStyles}>
-          <Box sx={commonListItemStyles}>
-            <ListItemIcon>
-              <EditIcon />
-            </ListItemIcon>
-            {localization.edit}
-          </Box>
-        </MenuItem>
-      )}
+      {enableEditing instanceof Function
+        ? enableEditing(row)
+        : enableEditing && (
+            <MenuItem onClick={handleEdit} sx={commonMenuItemStyles}>
+              <Box sx={commonListItemStyles}>
+                <ListItemIcon>
+                  <EditIcon />
+                </ListItemIcon>
+                {localization.edit}
+              </Box>
+            </MenuItem>
+          )}
       {renderRowActionMenuItems?.({
         row,
         table,

package/src/table/MRT_Table.tsx

@@ -3,14 +3,13 @@ import {
   defaultRangeExtractor,
   Range,
   useVirtualizer,
-  Virtualizer,
 } from '@tanstack/react-virtual';
 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 type { MRT_TableInstance } from '..';
+import type { MRT_TableInstance, MRT_Virtualizer } from '..';
 
 interface Props {
   table: MRT_TableInstance;
@@ -58,8 +57,10 @@ export const MRT_Table = ({ table }: Props) => {
     const headers = getFlatHeaders();
     const colSizes: { [key: string]: number } = {};
     for (let i = 0; i < headers.length; i++) {
-      const h = headers[i];
-      colSizes[`--col-${parseCSSVarId(h.column.id)}-size`] = h.getSize();
+      const header = headers[i];
+      const colSize = header.getSize();
+      colSizes[`--header-${parseCSSVarId(header.id)}-size`] = colSize;
+      colSizes[`--col-${parseCSSVarId(header.column.id)}-size`] = colSize;
     }
     return colSizes;
   }, [columns, columnSizing, columnSizingInfo]);
@@ -93,7 +94,7 @@ export const MRT_Table = ({ table }: Props) => {
   );
 
   const columnVirtualizer:
-    | Virtualizer<HTMLDivElement, HTMLTableCellElement>
+    | MRT_Virtualizer<HTMLDivElement, HTMLTableCellElement>
     | undefined = enableColumnVirtualization
     ? useVirtualizer({
         count: table.getVisibleLeafColumns().length,

package/src/table/MRT_TableRoot.tsx

@@ -26,8 +26,7 @@ import {
   showExpandColumn,
   getColumnId,
 } from '../column.utils';
-import type { GroupingState, TableState } from '@tanstack/react-table';
-import type {
+import {
   MRT_Cell,
   MRT_Column,
   MRT_ColumnDef,
@@ -37,11 +36,14 @@ import type {
   MRT_TableInstance,
   MRT_TableState,
   MaterialReactTableProps,
+  MRT_DensityState,
+  MRT_ColumnOrderState,
+  MRT_GroupingState,
 } from '..';
 
-export const MRT_TableRoot = <TData extends Record<string, any> = {}>(
+export const MRT_TableRoot: any = <TData extends Record<string, any> = {}>(
   props: MaterialReactTableProps<TData> & { localization: MRT_Localization },
-) => {
+): JSX.Element => {
   const bottomToolbarRef = useRef<HTMLDivElement>(null);
   const editInputRefs = useRef<Record<string, HTMLInputElement>>({});
   const filterInputRefs = useRef<Record<string, HTMLInputElement>>({});
@@ -76,10 +78,10 @@ export const MRT_TableRoot = <TData extends Record<string, any> = {}>(
       ),
     ),
   );
-  const [columnOrder, setColumnOrder] = useState(
+  const [columnOrder, setColumnOrder] = useState<MRT_ColumnOrderState>(
     initialState.columnOrder ?? [],
   );
-  const [density, setDensity] = useState(
+  const [density, setDensity] = useState<MRT_DensityState>(
     initialState?.density ?? 'comfortable',
   );
   const [draggingColumn, setDraggingColumn] =
@@ -96,7 +98,7 @@ export const MRT_TableRoot = <TData extends Record<string, any> = {}>(
   const [globalFilterFn, setGlobalFilterFn] = useState<MRT_FilterOption>(
     initialState.globalFilterFn ?? 'fuzzy',
   );
-  const [grouping, setGrouping] = useState<GroupingState>(
+  const [grouping, setGrouping] = useState<MRT_GroupingState>(
     initialState.grouping ?? [],
   );
   const [hoveredColumn, setHoveredColumn] = useState<
@@ -105,19 +107,19 @@ export const MRT_TableRoot = <TData extends Record<string, any> = {}>(
   const [hoveredRow, setHoveredRow] = useState<
     MRT_Row<TData> | { id: string } | null
   >(initialState.hoveredRow ?? null);
-  const [isFullScreen, setIsFullScreen] = useState(
+  const [isFullScreen, setIsFullScreen] = useState<boolean>(
     initialState?.isFullScreen ?? false,
   );
-  const [showAlertBanner, setShowAlertBanner] = useState(
+  const [showAlertBanner, setShowAlertBanner] = useState<boolean>(
     props.initialState?.showAlertBanner ?? false,
   );
-  const [showColumnFilters, setShowFilters] = useState(
+  const [showColumnFilters, setShowFilters] = useState<boolean>(
     initialState?.showColumnFilters ?? false,
   );
-  const [showGlobalFilter, setShowGlobalFilter] = useState(
+  const [showGlobalFilter, setShowGlobalFilter] = useState<boolean>(
     initialState?.showGlobalFilter ?? false,
   );
-  const [showToolbarDropZone, setShowToolbarDropZone] = useState(
+  const [showToolbarDropZone, setShowToolbarDropZone] = useState<boolean>(
     initialState?.showToolbarDropZone ?? false,
   );
 
@@ -125,14 +127,18 @@ export const MRT_TableRoot = <TData extends Record<string, any> = {}>(
     () =>
       (
         [
-          columnOrder.includes('mrt-row-drag') && {
+          (props.state?.columnOrder ?? columnOrder).includes(
+            'mrt-row-drag',
+          ) && {
             header: props.localization.move,
             size: 60,
             ...props.defaultDisplayColumn,
             ...props.displayColumnDefOptions?.['mrt-row-drag'],
             id: 'mrt-row-drag',
           },
-          columnOrder.includes('mrt-row-actions') && {
+          (props.state?.columnOrder ?? columnOrder).includes(
+            'mrt-row-actions',
+          ) && {
             Cell: ({ cell, row }) => (
               <MRT_ToggleRowActionMenuButton
                 cell={cell as any}
@@ -146,8 +152,10 @@ export const MRT_TableRoot = <TData extends Record<string, any> = {}>(
             ...props.displayColumnDefOptions?.['mrt-row-actions'],
             id: 'mrt-row-actions',
           },
-          columnOrder.includes('mrt-row-expand') &&
-            showExpandColumn(props, grouping) && {
+          (props.state?.columnOrder ?? columnOrder).includes(
+            'mrt-row-expand',
+          ) &&
+            showExpandColumn(props, props.state?.grouping ?? grouping) && {
               Cell: ({ row }) => (
                 <MRT_ExpandButton row={row as any} table={table as any} />
               ),
@@ -160,7 +168,9 @@ export const MRT_TableRoot = <TData extends Record<string, any> = {}>(
               ...props.displayColumnDefOptions?.['mrt-row-expand'],
               id: 'mrt-row-expand',
             },
-          columnOrder.includes('mrt-row-select') && {
+          (props.state?.columnOrder ?? columnOrder).includes(
+            'mrt-row-select',
+          ) && {
             Cell: ({ row }) => (
               <MRT_SelectCheckbox row={row as any} table={table as any} />
             ),
@@ -174,7 +184,9 @@ export const MRT_TableRoot = <TData extends Record<string, any> = {}>(
             ...props.displayColumnDefOptions?.['mrt-row-select'],
             id: 'mrt-row-select',
           },
-          columnOrder.includes('mrt-row-numbers') && {
+          (props.state?.columnOrder ?? columnOrder).includes(
+            'mrt-row-numbers',
+          ) && {
             Cell: ({ row }) => row.index + 1,
             Header: () => props.localization.rowNumber,
             header: props.localization.rowNumbers,
@@ -206,6 +218,8 @@ export const MRT_TableRoot = <TData extends Record<string, any> = {}>(
       props.localization,
       props.positionActionsColumn,
       props.renderDetailPanel,
+      props.state?.columnOrder,
+      props.state?.grouping,
     ],
   );
 
@@ -289,7 +303,7 @@ export const MRT_TableRoot = <TData extends Record<string, any> = {}>(
         showGlobalFilter,
         showToolbarDropZone,
         ...props.state,
-      } as TableState,
+      },
     }),
     refs: {
       bottomToolbarRef,