material-react-table 0.36.2 → 0.37.2

package/src/buttons/MRT_ToggleRowActionMenuButton.tsx

@@ -2,7 +2,7 @@ import React, { FC, MouseEvent, useState } from 'react';
 import { IconButton, Tooltip } from '@mui/material';
 import { MRT_RowActionMenu } from '../menus/MRT_RowActionMenu';
 import { MRT_EditActionButtons } from './MRT_EditActionButtons';
-import type { MRT_Row, MRT_TableInstance } from '..';
+import type { MRT_Cell, MRT_Row, MRT_TableInstance } from '..';
 
 const commonIconButtonStyles = {
   height: '2rem',
@@ -16,11 +16,12 @@ const commonIconButtonStyles = {
 };
 
 interface Props {
+  cell: MRT_Cell
   row: MRT_Row;
   table: MRT_TableInstance;
 }
 
-export const MRT_ToggleRowActionMenuButton: FC<Props> = ({ row, table }) => {
+export const MRT_ToggleRowActionMenuButton: FC<Props> = ({ cell, row, table }) => {
   const {
     getState,
     options: {
@@ -52,12 +53,16 @@ export const MRT_ToggleRowActionMenuButton: FC<Props> = ({ row, table }) => {
   return (
     <>
       {renderRowActions ? (
-        <>{renderRowActions({ row, table })}</>
+        <>{renderRowActions({ cell, row, table })}</>
       ) : row.id === editingRow?.id && editingMode === 'row' ? (
         <MRT_EditActionButtons row={row} table={table} />
       ) : !renderRowActionMenuItems && enableEditing ? (
         <Tooltip placement="right" arrow title={localization.edit}>
-          <IconButton sx={commonIconButtonStyles} onClick={handleStartEditMode}>
+          <IconButton
+            aria-label={localization.edit}
+            sx={commonIconButtonStyles}
+            onClick={handleStartEditMode}
+          >
             <EditIcon />
           </IconButton>
         </Tooltip>

package/src/column.utils.ts

@@ -1,4 +1,4 @@
-import { ColumnOrderState } from '@tanstack/react-table';
+import { ColumnOrderState, GroupingState } from '@tanstack/react-table';
 import {
   MaterialReactTableProps,
   MRT_Column,
@@ -74,10 +74,9 @@ export const prepareColumns = <TData extends Record<string, any> = {}>(
     } else if (columnDef.columnDefType === 'data') {
       if (Object.keys(filterFns).includes(columnFilterFns[columnDef.id])) {
         columnDef.filterFn =
-          // @ts-ignore
           filterFns[columnFilterFns[columnDef.id]] ?? filterFns.fuzzy;
-        //@ts-ignore
-        columnDef._filterFn = columnFilterFns[columnDef.id];
+        (columnDef as MRT_DefinedColumnDef)._filterFn =
+          columnFilterFns[columnDef.id];
       }
       if (Object.keys(sortingFns).includes(columnDef.sortingFn as string)) {
         // @ts-ignore
@@ -108,6 +107,16 @@ export const reorderColumn = <TData extends Record<string, any> = {}>(
   return [...columnOrder];
 };
 
+export const showExpandColumn = <TData extends Record<string, any> = {}>(
+  props: MaterialReactTableProps<TData>,
+  grouping?: GroupingState,
+) =>
+  !!(
+    props.enableExpanding ||
+    (props.enableGrouping && (grouping === undefined || grouping?.length)) ||
+    props.renderDetailPanel
+  );
+
 export const getLeadingDisplayColumnIds = <
   TData extends Record<string, any> = {},
 >(
@@ -120,9 +129,7 @@ export const getLeadingDisplayColumnIds = <
         ['row', 'modal'].includes(props.editingMode ?? ''))) &&
       'mrt-row-actions',
     props.positionExpandColumn === 'first' &&
-      (props.enableExpanding ||
-        props.enableGrouping ||
-        props.renderDetailPanel) &&
+      showExpandColumn(props) &&
       'mrt-row-expand',
     props.enableRowSelection && 'mrt-row-select',
     props.enableRowNumbers && 'mrt-row-numbers',
@@ -138,9 +145,7 @@ export const getTrailingDisplayColumnIds = <
       ['row', 'modal'].includes(props.editingMode ?? ''))) &&
     'mrt-row-actions',
   props.positionExpandColumn === 'last' &&
-    (props.enableExpanding ||
-      props.enableGrouping ||
-      props.renderDetailPanel) &&
+    showExpandColumn(props) &&
     'mrt-row-expand',
 ];
 

package/src/head/MRT_TableHeadCell.tsx

@@ -70,7 +70,7 @@ export const MRT_TableHeadCell: FC<Props> = ({ header, table }) => {
     if (enableGrouping && hoveredColumn?.id === 'drop-zone') {
       setHoveredColumn(null);
     }
-    if (enableColumnOrdering && draggingColumn) {
+    if (enableColumnOrdering && draggingColumn && columnDefType !== 'group') {
       setHoveredColumn(
         columnDef.enableColumnOrdering !== false ? column : null,
       );
@@ -151,10 +151,8 @@ export const MRT_TableHeadCell: FC<Props> = ({ header, table }) => {
             ? 'sticky'
             : undefined,
         pt:
-          columnDefType === 'group'
-            ? 0
-            : density === 'compact'
-            ? '0.25'
+          columnDefType === 'group' || density === 'compact'
+            ? '0.25rem'
             : density === 'comfortable'
             ? '.75rem'
             : '1.25rem',

package/src/index.tsx

@@ -6,6 +6,7 @@ import type { MRT_Icons } from './icons';
 import type { MRT_Localization } from './localization';
 export type { MRT_Localization, MRT_Icons };
 
+import { MRT_CopyButton } from './buttons/MRT_CopyButton';
 import { MRT_FullScreenToggleButton } from './buttons/MRT_FullScreenToggleButton';
 import { MRT_GlobalFilterTextField } from './inputs/MRT_GlobalFilterTextField';
 import { MRT_ShowHideColumnsButton } from './buttons/MRT_ShowHideColumnsButton';
@@ -20,4 +21,5 @@ export {
   MRT_ToggleDensePaddingButton,
   MRT_ToggleFiltersButton,
   MRT_ToggleGlobalFilterButton,
+  MRT_CopyButton,
 };

package/src/inputs/MRT_EditCellTextField.tsx

@@ -15,11 +15,12 @@ export const MRT_EditCellTextField = <TData extends Record<string, any> = {}>({
 }: Props<TData>) => {
   const {
     getState,
-    options: { tableId, muiTableBodyCellEditTextFieldProps },
+    options: { muiTableBodyCellEditTextFieldProps },
+    refs: { editInputRefs },
     setEditingCell,
     setEditingRow,
   } = table;
-  const { column } = cell;
+  const { column, row } = cell;
   const { columnDef } = column;
   const { editingRow } = getState();
 
@@ -27,13 +28,15 @@ export const MRT_EditCellTextField = <TData extends Record<string, any> = {}>({
 
   const mTableBodyCellEditTextFieldProps =
     muiTableBodyCellEditTextFieldProps instanceof Function
-      ? muiTableBodyCellEditTextFieldProps({ cell, table })
+      ? muiTableBodyCellEditTextFieldProps({ cell, column, row, table })
       : muiTableBodyCellEditTextFieldProps;
 
   const mcTableBodyCellEditTextFieldProps =
     columnDef.muiTableBodyCellEditTextFieldProps instanceof Function
       ? columnDef.muiTableBodyCellEditTextFieldProps({
           cell,
+          column,
+          row,
           table,
         })
       : columnDef.muiTableBodyCellEditTextFieldProps;
@@ -60,21 +63,29 @@ export const MRT_EditCellTextField = <TData extends Record<string, any> = {}>({
   };
 
   if (columnDef.Edit) {
-    return <>{columnDef.Edit?.({ cell, column, table })}</>;
+    return <>{columnDef.Edit?.({ cell, column, row, table })}</>;
   }
 
   return (
     <TextField
       disabled={columnDef.enableEditing === false}
       fullWidth
-      id={`mrt-${tableId}-edit-cell-text-field-${cell.id}`}
       label={showLabel ? column.columnDef.header : undefined}
       margin="none"
+      name={cell.id}
       onClick={(e: MouseEvent<HTMLInputElement>) => e.stopPropagation()}
       placeholder={columnDef.header}
       value={value}
       variant="standard"
       {...textFieldProps}
+      inputRef={(inputRef) => {
+        if (inputRef) {
+          editInputRefs.current[column.id] = inputRef;
+          if (textFieldProps.inputRef) {
+            textFieldProps.inputRef = inputRef;
+          }
+        }
+      }}
       onBlur={handleBlur}
       onChange={handleChange}
     />

package/src/inputs/MRT_FilterTextField.tsx

@@ -40,8 +40,8 @@ export const MRT_FilterTextField: FC<Props> = ({
       icons: { FilterListIcon, CloseIcon },
       localization,
       muiTableHeadCellFilterTextFieldProps,
-      tableId,
     },
+    refs: { filterInputRefs },
     setColumnFilterFns,
   } = table;
   const { column } = header;
@@ -80,9 +80,6 @@ export const MRT_FilterTextField: FC<Props> = ({
     (!isSelectFilter && !isMultiSelectFilter);
 
   const currentFilterOption = columnFilterFns?.[header.id];
-  const filterId = `mrt-${tableId}-${header.id}-filter-text-field${
-    rangeFilterIndex ?? ''
-  }`;
   const filterChipLabel = ['empty', 'notEmpty'].includes(currentFilterOption)
     ? //@ts-ignore
       localization[
@@ -184,7 +181,6 @@ export const MRT_FilterTextField: FC<Props> = ({
     <>
       <TextField
         fullWidth
-        id={filterId}
         inputProps={{
           disabled: !!filterChipLabel,
           sx: {
@@ -195,7 +191,7 @@ export const MRT_FilterTextField: FC<Props> = ({
         }}
         helperText={
           showChangeModeButton ? (
-            <label htmlFor={filterId}>
+            <label>
               {localization.filterMode.replace(
                 '{filterType}',
                 // @ts-ignore
@@ -294,6 +290,13 @@ export const MRT_FilterTextField: FC<Props> = ({
             : undefined,
         }}
         {...textFieldProps}
+        inputRef={(inputRef) => {
+          filterInputRefs.current[`${column.id}-${rangeFilterIndex ?? 0}`] =
+            inputRef;
+          if (textFieldProps.inputRef) {
+            textFieldProps.inputRef = inputRef;
+          }
+        }}
         sx={(theme) => ({
           p: 0,
           minWidth: !filterChipLabel ? '6rem' : 'auto',

package/src/inputs/MRT_GlobalFilterTextField.tsx

@@ -27,8 +27,8 @@ export const MRT_GlobalFilterTextField = <
       icons: { SearchIcon, CloseIcon },
       localization,
       muiSearchTextFieldProps,
-      tableId,
     },
+    refs: { searchInputRef },
   } = table;
   const { globalFilter, showGlobalFilter } = getState();
 
@@ -64,7 +64,6 @@ export const MRT_GlobalFilterTextField = <
   return (
     <Collapse in={showGlobalFilter} orientation="horizontal">
       <TextField
-        id={`mrt-${tableId}-search-text-field`}
         placeholder={localization.search}
         onChange={handleChange}
         value={searchValue ?? ''}
@@ -104,6 +103,12 @@ export const MRT_GlobalFilterTextField = <
           ),
         }}
         {...textFieldProps}
+        inputRef={(inputRef) => {
+          searchInputRef.current = inputRef;
+          if (textFieldProps?.inputRef) {
+            textFieldProps.inputRef = inputRef;
+          }
+        }}
       />
       <MRT_FilterOptionMenu
         anchorEl={anchorEl}

package/src/menus/MRT_ColumnActionMenu.tsx

@@ -54,9 +54,9 @@ export const MRT_ColumnActionMenu: FC<Props> = ({
         RestartAltIcon,
         VisibilityOffIcon,
       },
-      tableId,
       localization,
     },
+    refs: { filterInputRefs },
     setShowFilters,
   } = table;
   const { column } = header;
@@ -111,17 +111,7 @@ export const MRT_ColumnActionMenu: FC<Props> = ({
 
   const handleFilterByColumn = () => {
     setShowFilters(true);
-    setTimeout(
-      () =>
-        document
-          .getElementById(
-            // @ts-ignore
-            header.muiTableHeadCellFilterTextFieldProps?.id ??
-              `mrt-${tableId}-${header.id}-filter-text-field`,
-          )
-          ?.focus(),
-      200,
-    );
+    queueMicrotask(() => filterInputRefs.current[`${column.id}-0`]?.focus());
     setAnchorEl(null);
   };
 

package/src/table/MRT_TableContainer.tsx

@@ -3,7 +3,6 @@ import React, {
   RefObject,
   useEffect,
   useLayoutEffect,
-  useRef,
   useState,
 } from 'react';
 import { TableContainer } from '@mui/material';
@@ -24,8 +23,8 @@ export const MRT_TableContainer: FC<Props> = ({ table }) => {
       enableStickyHeader,
       enableRowVirtualization,
       muiTableContainerProps,
-      tableId,
     },
+    refs: { tableContainerRef, bottomToolbarRef, topToolbarRef },
   } = table;
   const { isFullScreen } = getState();
 
@@ -36,20 +35,15 @@ export const MRT_TableContainer: FC<Props> = ({ table }) => {
       ? muiTableContainerProps({ table })
       : muiTableContainerProps;
 
-  const tableContainerRef =
-    tableContainerProps?.ref ?? useRef<HTMLDivElement>(null);
-
   useIsomorphicLayoutEffect(() => {
     const topToolbarHeight =
       typeof document !== 'undefined'
-        ? document?.getElementById(`mrt-${tableId}-toolbar-top`)
-            ?.offsetHeight ?? 0
+        ? topToolbarRef.current?.offsetHeight ?? 0
         : 0;
 
     const bottomToolbarHeight =
       typeof document !== 'undefined'
-        ? document?.getElementById(`mrt-${tableId}-toolbar-bottom`)
-            ?.offsetHeight ?? 0
+        ? bottomToolbarRef?.current?.offsetHeight ?? 0
         : 0;
 
     setTotalToolbarHeight(topToolbarHeight + bottomToolbarHeight);
@@ -57,8 +51,14 @@ export const MRT_TableContainer: FC<Props> = ({ table }) => {
 
   return (
     <TableContainer
-      ref={tableContainerRef}
       {...tableContainerProps}
+      ref={(ref: HTMLDivElement) => {
+        tableContainerRef.current = ref;
+        if (tableContainerProps?.ref) {
+          //@ts-ignore
+          tableContainerProps.ref.current = ref;
+        }
+      }}
       sx={(theme) => ({
         maxWidth: '100%',
         maxHeight:

package/src/table/MRT_TableRoot.tsx

@@ -1,4 +1,4 @@
-import React, { useEffect, useMemo, useState } from 'react';
+import React, { useMemo, useRef, useState } from 'react';
 import {
   TableState,
   getCoreRowModel,
@@ -9,6 +9,7 @@ import {
   getPaginationRowModel,
   getSortedRowModel,
   useReactTable,
+  GroupingState,
 } from '@tanstack/react-table';
 import { Box, Dialog, Grow } from '@mui/material';
 import { MRT_ExpandAllButton } from '../buttons/MRT_ExpandAllButton';
@@ -22,6 +23,7 @@ import {
   getDefaultColumnOrderIds,
   getDefaultColumnFilterFn,
   defaultDisplayColumnDefOptions,
+  showExpandColumn,
 } from '../column.utils';
 import type {
   MRT_Cell,
@@ -38,12 +40,12 @@ import { MRT_EditRowModal } from '../body/MRT_EditRowModal';
 export const MRT_TableRoot = <TData extends Record<string, any> = {}>(
   props: MaterialReactTableProps<TData>,
 ) => {
-  const [tableId, setIdPrefix] = useState(props.tableId);
-  useEffect(
-    () =>
-      setIdPrefix(props.tableId ?? Math.random().toString(36).substring(2, 9)),
-    [props.tableId],
-  );
+  const bottomToolbarRef = useRef<HTMLDivElement>(null);
+  const editInputRefs = useRef<Record<string, HTMLInputElement>>({});
+  const filterInputRefs = useRef<Record<string, HTMLInputElement>>({});
+  const searchInputRef = useRef<HTMLInputElement>(null);
+  const tableContainerRef = useRef<HTMLDivElement>(null);
+  const topToolbarRef = useRef<HTMLDivElement>(null);
 
   const initialState: Partial<MRT_TableState<TData>> = useMemo(() => {
     const initState = props.initialState ?? {};
@@ -95,6 +97,9 @@ export const MRT_TableRoot = <TData extends Record<string, any> = {}>(
   const [globalFilterFn, setGlobalFilterFn] = useState<MRT_FilterOption>(
     initialState.globalFilterFn ?? 'fuzzy',
   );
+  const [grouping, setGrouping] = useState<GroupingState>(
+    initialState.grouping ?? [],
+  );
   const [hoveredColumn, setHoveredColumn] = useState<
     MRT_Column<TData> | { id: string } | null
   >(initialState.hoveredColumn ?? null);
@@ -126,9 +131,10 @@ export const MRT_TableRoot = <TData extends Record<string, any> = {}>(
             id: 'mrt-row-drag',
           },
           columnOrder.includes('mrt-row-actions') && {
-            Cell: ({ cell }) => (
+            Cell: ({ cell, row }) => (
               <MRT_ToggleRowActionMenuButton
-                row={cell.row as any}
+                cell={cell as any}
+                row={row as any}
                 table={table}
               />
             ),
@@ -138,23 +144,24 @@ export const MRT_TableRoot = <TData extends Record<string, any> = {}>(
             ...props.displayColumnDefOptions?.['mrt-row-actions'],
             id: 'mrt-row-actions',
           },
-          columnOrder.includes('mrt-row-expand') && {
-            Cell: ({ cell }) => (
-              <MRT_ExpandButton row={cell.row as any} table={table} />
-            ),
-            Header: () =>
-              props.enableExpandAll ? (
-                <MRT_ExpandAllButton table={table} />
-              ) : null,
-            header: props.localization?.expand,
-            size: 60,
-            ...defaultDisplayColumnDefOptions,
-            ...props.displayColumnDefOptions?.['mrt-row-expand'],
-            id: 'mrt-row-expand',
-          },
+          columnOrder.includes('mrt-row-expand') &&
+            showExpandColumn(props, grouping) && {
+              Cell: ({ row }) => (
+                <MRT_ExpandButton row={row as any} table={table} />
+              ),
+              Header: () =>
+                props.enableExpandAll ? (
+                  <MRT_ExpandAllButton table={table} />
+                ) : null,
+              header: props.localization?.expand,
+              size: 60,
+              ...defaultDisplayColumnDefOptions,
+              ...props.displayColumnDefOptions?.['mrt-row-expand'],
+              id: 'mrt-row-expand',
+            },
           columnOrder.includes('mrt-row-select') && {
-            Cell: ({ cell }) => (
-              <MRT_SelectCheckbox row={cell.row as any} table={table} />
+            Cell: ({ row }) => (
+              <MRT_SelectCheckbox row={row as any} table={table} />
             ),
             Header: () =>
               props.enableSelectAll ? (
@@ -167,7 +174,7 @@ export const MRT_TableRoot = <TData extends Record<string, any> = {}>(
             id: 'mrt-row-select',
           },
           columnOrder.includes('mrt-row-numbers') && {
-            Cell: ({ cell }) => cell.row.index + 1,
+            Cell: ({ row }) => row.index + 1,
             Header: () => props.localization?.rowNumber,
             header: props.localization?.rowNumbers,
             size: 60,
@@ -179,6 +186,7 @@ export const MRT_TableRoot = <TData extends Record<string, any> = {}>(
       ).filter(Boolean),
     [
       columnOrder,
+      grouping,
       props.displayColumnDefOptions,
       props.editingMode,
       props.enableColumnDragging,
@@ -195,6 +203,7 @@ export const MRT_TableRoot = <TData extends Record<string, any> = {}>(
       props.enableSelectAll,
       props.localization,
       props.positionActionsColumn,
+      props.renderDetailPanel,
     ],
   );
 
@@ -244,6 +253,7 @@ export const MRT_TableRoot = <TData extends Record<string, any> = {}>(
       getPaginationRowModel: getPaginationRowModel(),
       getSortedRowModel: getSortedRowModel(),
       onColumnOrderChange: setColumnOrder,
+      onGroupingChange: setGrouping,
       getSubRows: (row) => row?.subRows,
       ...props,
       //@ts-ignore
@@ -261,6 +271,7 @@ export const MRT_TableRoot = <TData extends Record<string, any> = {}>(
         editingCell,
         editingRow,
         globalFilterFn,
+        grouping,
         hoveredColumn,
         hoveredRow,
         isFullScreen,
@@ -269,8 +280,15 @@ export const MRT_TableRoot = <TData extends Record<string, any> = {}>(
         showGlobalFilter,
         ...props.state,
       } as TableState,
-      tableId,
     }),
+    refs: {
+      bottomToolbarRef,
+      editInputRefs,
+      filterInputRefs,
+      searchInputRef,
+      tableContainerRef,
+      topToolbarRef,
+    },
     setColumnFilterFns: props.onFilterFnsChange ?? setColumnFilterFns,
     setDensity: props.onDensityChange ?? setDensity,
     setDraggingColumn: props.onDraggingColumnChange ?? setDraggingColumn,

package/src/toolbar/MRT_BottomToolbar.tsx

@@ -21,8 +21,8 @@ export const MRT_BottomToolbar: FC<Props> = ({ table }) => {
       positionToolbarAlertBanner,
       positionToolbarDropZone,
       renderBottomToolbarCustomActions,
-      tableId,
     },
+    refs: { bottomToolbarRef },
   } = table;
   const { isFullScreen } = getState();
 
@@ -37,9 +37,15 @@ export const MRT_BottomToolbar: FC<Props> = ({ table }) => {
 
   return (
     <Toolbar
-      id={`mrt-${tableId}-toolbar-bottom`}
       variant="dense"
       {...toolbarProps}
+      ref={(ref: HTMLDivElement) => {
+        bottomToolbarRef.current = ref;
+        if (toolbarProps?.ref) {
+          // @ts-ignore
+          toolbarProps.ref.current = ref;
+        }
+      }}
       sx={(theme) =>
         ({
           ...commonToolbarStyles({ theme }),
@@ -69,9 +75,7 @@ export const MRT_BottomToolbar: FC<Props> = ({ table }) => {
         }}
       >
         {renderBottomToolbarCustomActions ? (
-          <Box sx={{ p: '0.5rem' }}>
-            {renderBottomToolbarCustomActions({ table })}
-          </Box>
+          renderBottomToolbarCustomActions({ table })
         ) : (
           <span />
         )}

package/src/toolbar/MRT_TopToolbar.tsx

@@ -37,8 +37,8 @@ export const MRT_TopToolbar: FC<Props> = ({ table }) => {
       positionToolbarAlertBanner,
       positionToolbarDropZone,
       renderTopToolbarCustomActions,
-      tableId,
     },
+    refs: { topToolbarRef },
   } = table;
 
   const { isFullScreen, showGlobalFilter } = getState();
@@ -55,9 +55,15 @@ export const MRT_TopToolbar: FC<Props> = ({ table }) => {
 
   return (
     <Toolbar
-      id={`mrt-${tableId}-toolbar-top`}
       variant="dense"
       {...toolbarProps}
+      ref={(ref: HTMLDivElement) => {
+        topToolbarRef.current = ref;
+        if (toolbarProps?.ref) {
+          // @ts-ignore
+          toolbarProps.ref.current = ref;
+        }
+      }}
       sx={(theme) =>
         ({
           position: isFullScreen ? 'sticky' : undefined,