material-react-table 0.8.15 → 0.9.2

package/src/buttons/MRT_ToggleGlobalFilterButton.tsx

@@ -14,10 +14,10 @@ export const MRT_ToggleGlobalFilterButton: FC<Props> = ({
     getState,
     options: {
       icons: { SearchIcon, SearchOffIcon },
-      idPrefix,
+      tableId,
       localization,
       muiSearchTextFieldProps,
-      onToggleShowGlobalFilter,
+      onMrtToggleShowGlobalFilter,
     },
     setShowGlobalFilter,
   } = tableInstance;
@@ -30,7 +30,7 @@ export const MRT_ToggleGlobalFilterButton: FC<Props> = ({
       : muiSearchTextFieldProps;
 
   const handleToggleSearch = (event: MouseEvent<HTMLButtonElement>) => {
-    onToggleShowGlobalFilter?.({
+    onMrtToggleShowGlobalFilter?.({
       event,
       showGlobalFilter: !showGlobalFilter,
       tableInstance,
@@ -40,7 +40,7 @@ export const MRT_ToggleGlobalFilterButton: FC<Props> = ({
       () =>
         document
           .getElementById(
-            textFieldProps?.id ?? `mrt-${idPrefix}-search-text-field`,
+            textFieldProps?.id ?? `mrt-${tableId}-search-text-field`,
           )
           ?.focus(),
       200,

package/src/head/MRT_TableHeadCellFilterLabel.tsx

@@ -67,6 +67,7 @@ export const MRT_TableHeadCellFilterLabel: FC<Props> = ({
           opacity: !!column.getFilterValue() || showFilters ? 0.8 : 0,
           p: '2px',
           transition: 'all 0.2s ease-in-out',
+          transform: 'scale(0.66)',
           '&:hover': {
             backgroundColor: 'transparent',
             opacity: 0.8,

package/src/inputs/MRT_EditCellTextField.tsx

@@ -17,11 +17,11 @@ export const MRT_EditCellTextField: FC<Props> = ({ cell, tableInstance }) => {
   const {
     getState,
     options: {
-      idPrefix,
+      tableId,
       enableEditing,
       muiTableBodyCellEditTextFieldProps,
-      onCellEditBlur,
-      onCellEditChange,
+      onMrtCellEditBlur,
+      onMrtCellEditChange,
     },
     setCurrentEditingCell,
     setCurrentEditingRow,
@@ -35,8 +35,8 @@ export const MRT_EditCellTextField: FC<Props> = ({ cell, tableInstance }) => {
 
   const handleChange = (event: ChangeEvent<HTMLInputElement>) => {
     setValue(event.target.value);
-    columnDef.onCellEditChange?.({ event, cell, tableInstance });
-    onCellEditChange?.({ event, cell, tableInstance });
+    columnDef.onMrtCellEditChange?.({ event, cell, tableInstance });
+    onMrtCellEditChange?.({ event, cell, tableInstance });
   };
 
   const handleBlur = (event: FocusEvent<HTMLInputElement>) => {
@@ -46,8 +46,8 @@ export const MRT_EditCellTextField: FC<Props> = ({ cell, tableInstance }) => {
       setCurrentEditingRow({ ...getState().currentEditingRow } as MRT_Row);
     }
     setCurrentEditingCell(null);
-    columnDef.onCellEditBlur?.({ event, cell, tableInstance });
-    onCellEditBlur?.({ event, cell, tableInstance });
+    columnDef.onMrtCellEditBlur?.({ event, cell, tableInstance });
+    onMrtCellEditBlur?.({ event, cell, tableInstance });
   };
 
   const mTableBodyCellEditTextFieldProps =
@@ -74,7 +74,7 @@ export const MRT_EditCellTextField: FC<Props> = ({ cell, tableInstance }) => {
 
   return (
     <TextField
-      id={`mrt-${idPrefix}-edit-cell-text-field-${cell.id}`}
+      id={`mrt-${tableId}-edit-cell-text-field-${cell.id}`}
       margin="dense"
       onBlur={handleBlur}
       onChange={handleChange}

package/src/inputs/MRT_FilterTextField.tsx

@@ -34,7 +34,7 @@ export const MRT_FilterTextField: FC<Props> = ({
     getState,
     options: {
       icons: { FilterListIcon, CloseIcon },
-      idPrefix,
+      tableId,
       localization,
       muiTableHeadCellFilterTextFieldProps,
     },
@@ -118,7 +118,7 @@ export const MRT_FilterTextField: FC<Props> = ({
     return <>{columnDef.Filter?.({ header, tableInstance })}</>;
   }
 
-  const filterId = `mrt-${idPrefix}-${header.id}-filter-text-field${
+  const filterId = `mrt-${tableId}-${header.id}-filter-text-field${
     inputIndex ?? ''
   }`;
   const filterFn = currentFilterFns?.[header.id];

package/src/inputs/MRT_SearchTextField.tsx

@@ -26,10 +26,10 @@ export const MRT_SearchTextField: FC<Props> = ({ tableInstance }) => {
     setGlobalFilter,
     options: {
       icons: { SearchIcon, CloseIcon },
-      idPrefix,
+      tableId,
       localization,
       muiSearchTextFieldProps,
-      onGlobalSearchFilterChange,
+      onMrtGlobalFilterValueChange,
     },
   } = tableInstance;
 
@@ -41,7 +41,7 @@ export const MRT_SearchTextField: FC<Props> = ({ tableInstance }) => {
   const handleChange = useCallback(
     debounce((event: ChangeEvent<HTMLInputElement>) => {
       setGlobalFilter(event.target.value ?? undefined);
-      onGlobalSearchFilterChange?.({ event, tableInstance });
+      onMrtGlobalFilterValueChange?.({ event, tableInstance });
     }, 200),
     [],
   );
@@ -63,7 +63,7 @@ export const MRT_SearchTextField: FC<Props> = ({ tableInstance }) => {
   return (
     <Collapse in={showGlobalFilter} orientation="horizontal">
       <TextField
-        id={`mrt-${idPrefix}-search-text-field`}
+        id={`mrt-${tableId}-search-text-field`}
         placeholder={localization.search}
         onChange={(event: ChangeEvent<HTMLInputElement>) => {
           setSearchValue(event.target.value);

package/src/inputs/MRT_SelectCheckbox.tsx

@@ -20,8 +20,8 @@ export const MRT_SelectCheckbox: FC<Props> = ({
     options: {
       localization,
       muiSelectCheckboxProps,
-      onSelectChange,
-      onSelectAllChange,
+      onMrtSelectRowChange,
+      onMrtSelectAllChange,
       selectAllMode,
     },
   } = tableInstance;
@@ -35,14 +35,14 @@ export const MRT_SelectCheckbox: FC<Props> = ({
       } else if (selectAllMode === 'page') {
         tableInstance.getToggleAllPageRowsSelectedHandler()(event as any);
       }
-      onSelectAllChange?.({
+      onMrtSelectAllChange?.({
         event,
         selectedRows: event.target.checked ? getRowModel().flatRows : [],
         tableInstance,
       });
     } else if (row) {
       row?.getToggleSelectedHandler()(event as any);
-      onSelectChange?.({
+      onMrtSelectRowChange?.({
         event,
         row,
         selectedRows: event.target.checked

package/src/menus/MRT_ColumnActionMenu.tsx

@@ -52,7 +52,7 @@ export const MRT_ColumnActionMenu: FC<Props> = ({
         RestartAltIcon,
         VisibilityOffIcon,
       },
-      idPrefix,
+      tableId,
       localization,
     },
     setShowFilters,
@@ -119,7 +119,7 @@ export const MRT_ColumnActionMenu: FC<Props> = ({
           .getElementById(
             // @ts-ignore
             header.muiTableHeadCellFilterTextFieldProps?.id ??
-              `mrt-${idPrefix}-${header.id}-filter-text-field`,
+              `mrt-${tableId}-${header.id}-filter-text-field`,
           )
           ?.focus(),
       200,

package/src/menus/MRT_ShowHideColumnsMenu.tsx

@@ -46,7 +46,7 @@ export const MRT_ShowHideColumnsMenu: FC<Props> = ({
     ) {
       return [
         ...getLeftLeafColumns(),
-        ...[...new Set(columnOrder)].map((colId) =>
+        ...Array.from(new Set(columnOrder)).map((colId) =>
           getCenterLeafColumns().find((col) => col?.id === colId),
         ),
         ...getRightLeafColumns(),

package/src/menus/MRT_ShowHideColumnsMenuItems.tsx

@@ -21,7 +21,7 @@ export const MRT_ShowHideColumnsMenuItems: FC<Props> = ({
 }) => {
   const {
     getState,
-    options: { enableColumnOrdering, onToggleColumnVisibility },
+    options: { enableColumnOrdering, onMrtToggleColumnVisibility },
     setColumnOrder,
   } = tableInstance;
 
@@ -56,7 +56,7 @@ export const MRT_ShowHideColumnsMenuItems: FC<Props> = ({
     } else {
       column.toggleVisibility();
     }
-    onToggleColumnVisibility?.({
+    onMrtToggleColumnVisibility?.({
       column,
       columnVisibility,
       tableInstance,

package/src/table/MRT_Table.tsx

@@ -1,4 +1,4 @@
-import React, { FC } from 'react';
+import React, { FC, RefObject } from 'react';
 import { Table } from '@mui/material';
 import { MRT_TableHead } from '../head/MRT_TableHead';
 import { MRT_TableBody } from '../body/MRT_TableBody';
@@ -6,10 +6,14 @@ import { MRT_TableFooter } from '../footer/MRT_TableFooter';
 import { MRT_TableInstance } from '..';
 
 interface Props {
+  tableContainerRef: RefObject<HTMLDivElement>;
   tableInstance: MRT_TableInstance;
 }
 
-export const MRT_Table: FC<Props> = ({ tableInstance }) => {
+export const MRT_Table: FC<Props> = ({
+  tableContainerRef,
+  tableInstance
+}) => {
   const {
     options: {
       enableStickyHeader,
@@ -27,7 +31,10 @@ export const MRT_Table: FC<Props> = ({ tableInstance }) => {
   return (
     <Table stickyHeader={enableStickyHeader} {...tableProps}>
       {enableTableHead && <MRT_TableHead tableInstance={tableInstance} />}
-      <MRT_TableBody tableInstance={tableInstance} />
+      <MRT_TableBody
+        tableContainerRef={tableContainerRef}
+        tableInstance={tableInstance}
+      />
       {enableTableFooter && <MRT_TableFooter tableInstance={tableInstance} />}
     </Table>
   );

package/src/table/MRT_TableContainer.tsx

@@ -13,7 +13,7 @@ interface Props {
 export const MRT_TableContainer: FC<Props> = ({ tableInstance }) => {
   const {
     getState,
-    options: { enableStickyHeader, idPrefix, muiTableContainerProps },
+    options: { enableStickyHeader, muiTableContainerProps, tableId },
   } = tableInstance;
 
   const { isFullScreen } = getState();
@@ -28,22 +28,25 @@ export const MRT_TableContainer: FC<Props> = ({ tableInstance }) => {
   useIsomorphicLayoutEffect(() => {
     const topToolbarHeight =
       typeof document !== 'undefined'
-        ? document?.getElementById(`mrt-${idPrefix}-toolbar-top`)
+        ? document?.getElementById(`mrt-${tableId}-toolbar-top`)
             ?.offsetHeight ?? 0
         : 0;
 
     const bottomToolbarHeight =
       typeof document !== 'undefined'
-        ? document?.getElementById(`mrt-${idPrefix}-toolbar-bottom`)
+        ? document?.getElementById(`mrt-${tableId}-toolbar-bottom`)
             ?.offsetHeight ?? 0
         : 0;
 
     setTotalToolbarHeight(topToolbarHeight + bottomToolbarHeight);
   });
 
+  const tableContainerRef = React.useRef<HTMLDivElement>(null);
+
   return (
     <TableContainer
       {...tableContainerProps}
+      ref={tableContainerRef}
       sx={{
         maxWidth: '100%',
         maxHeight: enableStickyHeader
@@ -58,7 +61,10 @@ export const MRT_TableContainer: FC<Props> = ({ tableInstance }) => {
           : undefined,
       }}
     >
-      <MRT_Table tableInstance={tableInstance} />
+      <MRT_Table
+        tableContainerRef={tableContainerRef}
+        tableInstance={tableInstance}
+      />
     </TableContainer>
   );
 };

package/src/table/MRT_TableRoot.tsx

@@ -41,11 +41,11 @@ import { Box, Dialog, Grow } from '@mui/material';
 export const MRT_TableRoot = <D extends Record<string, any> = {}>(
   props: MaterialReactTableProps<D>,
 ) => {
-  const [idPrefix, setIdPrefix] = useState(props.idPrefix);
+  const [tableId, setIdPrefix] = useState(props.tableId);
   useEffect(
     () =>
-      setIdPrefix(props.idPrefix ?? Math.random().toString(36).substring(2, 9)),
-    [props.idPrefix],
+      setIdPrefix(props.tableId ?? Math.random().toString(36).substring(2, 9)),
+    [props.tableId],
   );
 
   const showActionColumn =
@@ -71,7 +71,7 @@ export const MRT_TableRoot = <D extends Record<string, any> = {}>(
           ].filter(Boolean) as string[])
         : [];
 
-    if (!props.enablePersistentState || !props.idPrefix) {
+    if (!props.enablePersistentState || !props.tableId) {
       return initState;
     }
     if (typeof window === 'undefined') {
@@ -84,9 +84,9 @@ export const MRT_TableRoot = <D extends Record<string, any> = {}>(
     }
     const storedState =
       props.persistentStateMode === 'localStorage'
-        ? localStorage.getItem(`mrt-${idPrefix}-table-state`)
+        ? localStorage.getItem(`mrt-${tableId}-table-state`)
         : props.persistentStateMode === 'sessionStorage'
-        ? sessionStorage.getItem(`mrt-${idPrefix}-table-state`)
+        ? sessionStorage.getItem(`mrt-${tableId}-table-state`)
         : '{}';
     if (storedState) {
       const parsedState = JSON.parse(storedState);
@@ -149,7 +149,7 @@ export const MRT_TableRoot = <D extends Record<string, any> = {}>(
         getPaginationRowModel: getPaginationRowModel(),
         getSortedRowModel: getSortedRowModel(),
         getSubRows: (row) => (row as MRT_Row)?.subRows,
-        idPrefix,
+        tableId,
         initialState,
       }) as Table<D>,
     [],
@@ -300,14 +300,14 @@ export const MRT_TableRoot = <D extends Record<string, any> = {}>(
     if (typeof window === 'undefined' || !props.enablePersistentState) {
       return;
     }
-    if (!props.idPrefix && process.env.NODE_ENV !== 'production') {
+    if (!props.tableId && process.env.NODE_ENV !== 'production') {
       console.warn(
-        'a unique idPrefix prop is required for persistent table state to work',
+        'a unique tableId prop is required for persistent table state to work',
       );
       return;
     }
     const itemArgs: [string, string] = [
-      `mrt-${idPrefix}-table-state`,
+      `mrt-${tableId}-table-state`,
       JSON.stringify(tableInstance.getState()),
     ];
     if (props.persistentStateMode === 'localStorage') {
@@ -317,7 +317,7 @@ export const MRT_TableRoot = <D extends Record<string, any> = {}>(
     }
   }, [
     props.enablePersistentState,
-    props.idPrefix,
+    props.tableId,
     props.persistentStateMode,
     tableInstance,
   ]);

package/src/toolbar/MRT_LinearProgressBar.tsx

@@ -3,10 +3,14 @@ import { Collapse, LinearProgress } from '@mui/material';
 import { MRT_TableInstance } from '..';
 
 interface Props {
+  alignTo: 'bottom' | 'top';
   tableInstance: MRT_TableInstance;
 }
 
-export const MRT_LinearProgressBar: FC<Props> = ({ tableInstance }) => {
+export const MRT_LinearProgressBar: FC<Props> = ({
+  alignTo,
+  tableInstance,
+}) => {
   const {
     options: { muiLinearProgressProps },
     getState,
@@ -20,10 +24,21 @@ export const MRT_LinearProgressBar: FC<Props> = ({ tableInstance }) => {
       : muiLinearProgressProps;
 
   return (
-    <Collapse in={isLoading || showProgressBars} mountOnEnter unmountOnExit>
+    <Collapse
+      in={isLoading || showProgressBars}
+      mountOnEnter
+      unmountOnExit
+      sx={{
+        bottom: alignTo === 'bottom' ? 0 : undefined,
+        position: 'absolute',
+        top: alignTo === 'top' ? 0 : undefined,
+        width: '100%',
+      }}
+    >
       <LinearProgress
         aria-label="Loading"
         aria-busy="true"
+        sx={{ position: 'relative' }}
         {...linearProgressProps}
       />
     </Collapse>

package/src/toolbar/MRT_ToolbarBottom.tsx

@@ -16,7 +16,7 @@ export const MRT_ToolbarBottom: FC<Props> = ({ tableInstance }) => {
     getState,
     options: {
       enableToolbarInternalActions,
-      idPrefix,
+      tableId,
       enablePagination,
       muiTableToolbarBottomProps,
       positionPagination,
@@ -45,20 +45,20 @@ export const MRT_ToolbarBottom: FC<Props> = ({ tableInstance }) => {
 
   return (
     <Toolbar
-      id={`mrt-${idPrefix}-toolbar-bottom`}
+      id={`mrt-${tableId}-toolbar-bottom`}
       variant="dense"
       {...toolbarProps}
       sx={(theme) =>
         ({
           ...commonToolbarStyles({ theme }),
           bottom: isFullScreen ? '0' : undefined,
-          position: isFullScreen ? 'fixed' : undefined,
           boxShadow: `-3px 0 6px ${alpha(theme.palette.common.black, 0.1)}`,
+          position: isFullScreen ? 'fixed' : 'relative',
           ...toolbarProps?.sx,
         } as any)
       }
     >
-      <MRT_LinearProgressBar tableInstance={tableInstance} />
+      <MRT_LinearProgressBar alignTo='top' tableInstance={tableInstance} />
       {positionToolbarAlertBanner === 'bottom' && (
         <MRT_ToolbarAlertBanner tableInstance={tableInstance} />
       )}

package/src/toolbar/MRT_ToolbarInternalButtons.tsx

@@ -21,6 +21,7 @@ export const MRT_ToolbarInternalButtons: FC<Props> = ({ tableInstance }) => {
       enableFullScreenToggle,
       enableGlobalFilter,
       enableHiding,
+      positionGlobalFilter,
       renderToolbarInternalActions,
     },
   } = tableInstance;
@@ -42,7 +43,7 @@ export const MRT_ToolbarInternalButtons: FC<Props> = ({ tableInstance }) => {
         tableInstance,
       }) ?? (
         <>
-          {enableGlobalFilter && (
+          {enableGlobalFilter && positionGlobalFilter === 'right' && (
             <MRT_SearchTextField tableInstance={tableInstance} />
           )}
           {enableFilters && enableGlobalFilter && (

package/src/toolbar/MRT_ToolbarTop.tsx

@@ -5,6 +5,7 @@ import { MRT_TablePagination } from './MRT_TablePagination';
 import { MRT_ToolbarAlertBanner } from './MRT_ToolbarAlertBanner';
 import { MRT_LinearProgressBar } from './MRT_LinearProgressBar';
 import { MRT_TableInstance } from '..';
+import { MRT_SearchTextField } from '../inputs/MRT_SearchTextField';
 
 export const commonToolbarStyles = ({ theme }: { theme: Theme }) => ({
   backgroundColor: lighten(theme.palette.background.default, 0.04),
@@ -26,18 +27,20 @@ export const MRT_ToolbarTop: FC<Props> = ({ tableInstance }) => {
   const {
     getState,
     options: {
+      enableGlobalFilter,
       enablePagination,
       enableToolbarInternalActions,
-      idPrefix,
+      tableId,
       muiTableToolbarTopProps,
       positionPagination,
+      positionGlobalFilter,
       positionToolbarActions,
       positionToolbarAlertBanner,
       renderToolbarCustomActions,
     },
   } = tableInstance;
 
-  const { isFullScreen } = getState();
+  const { isFullScreen, showGlobalFilter } = getState();
 
   const isMobile = useMediaQuery('(max-width:720px)');
 
@@ -48,11 +51,12 @@ export const MRT_ToolbarTop: FC<Props> = ({ tableInstance }) => {
 
   const stackAlertBanner =
     isMobile ||
-    (positionToolbarAlertBanner === 'top' && !!renderToolbarCustomActions);
+    (positionToolbarAlertBanner === 'top' &&
+      (!!renderToolbarCustomActions || showGlobalFilter));
 
   return (
     <Toolbar
-      id={`mrt-${idPrefix}-toolbar-top`}
+      id={`mrt-${tableId}-toolbar-top`}
       variant="dense"
       {...toolbarProps}
       sx={(theme) =>
@@ -78,9 +82,12 @@ export const MRT_ToolbarTop: FC<Props> = ({ tableInstance }) => {
           position: stackAlertBanner ? 'relative' : 'absolute',
           right: 0,
           top: 0,
-          width: 'calc(100% - 1rem)',
+          width: renderToolbarCustomActions ? '100%' : undefined,
         }}
       >
+        {enableGlobalFilter && positionGlobalFilter === 'left' && (
+          <MRT_SearchTextField tableInstance={tableInstance} />
+        )}
         {renderToolbarCustomActions?.({ tableInstance }) ?? <span />}
         {enableToolbarInternalActions && positionToolbarActions === 'top' && (
           <MRT_ToolbarInternalButtons tableInstance={tableInstance} />
@@ -92,7 +99,7 @@ export const MRT_ToolbarTop: FC<Props> = ({ tableInstance }) => {
             <MRT_TablePagination tableInstance={tableInstance} />
           )}
       </div>
-      <MRT_LinearProgressBar tableInstance={tableInstance} />
+      <MRT_LinearProgressBar alignTo="bottom" tableInstance={tableInstance} />
     </Toolbar>
   );
 };

package/src/utils.ts

@@ -4,7 +4,7 @@ import {
   Table,
   Updater,
 } from '@tanstack/react-table';
-import { MRT_Column, MRT_ColumnDef, MRT_FilterFn, } from '.';
+import { MRT_Column, MRT_ColumnDef, MRT_FilterFn } from '.';
 import { MRT_FILTER_OPTION } from './enums';
 import { defaultFilterFNs } from './filtersFNs';