material-react-table 0.8.15 → 0.9.0

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_TableContainer.tsx

@@ -13,7 +13,7 @@ interface Props {
 export const MRT_TableContainer: FC<Props> = ({ tableInstance }) => {
   const {
     getState,
-    options: { enableStickyHeader, idPrefix, muiTableContainerProps },
+    options: { enableStickyHeader, tableId, muiTableContainerProps },
   } = tableInstance;
 
   const { isFullScreen } = getState();
@@ -28,13 +28,13 @@ 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;
 

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';