material-react-table 0.36.2 → 0.37.0

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,
@@ -38,12 +38,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 ?? {};
@@ -126,11 +126,8 @@ export const MRT_TableRoot = <TData extends Record<string, any> = {}>(
             id: 'mrt-row-drag',
           },
           columnOrder.includes('mrt-row-actions') && {
-            Cell: ({ cell }) => (
-              <MRT_ToggleRowActionMenuButton
-                row={cell.row as any}
-                table={table}
-              />
+            Cell: ({ row }) => (
+              <MRT_ToggleRowActionMenuButton row={row as any} table={table} />
             ),
             header: props.localization?.actions,
             size: 70,
@@ -139,8 +136,8 @@ export const MRT_TableRoot = <TData extends Record<string, any> = {}>(
             id: 'mrt-row-actions',
           },
           columnOrder.includes('mrt-row-expand') && {
-            Cell: ({ cell }) => (
-              <MRT_ExpandButton row={cell.row as any} table={table} />
+            Cell: ({ row }) => (
+              <MRT_ExpandButton row={row as any} table={table} />
             ),
             Header: () =>
               props.enableExpandAll ? (
@@ -153,8 +150,8 @@ export const MRT_TableRoot = <TData extends Record<string, any> = {}>(
             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 +164,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,
@@ -269,8 +266,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 }),

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,