material-react-table 0.8.13 → 0.9.0

package/src/head/MRT_TableHeadCell.tsx

@@ -58,14 +58,14 @@ export const MRT_TableHeadCell: FC<Props> = ({
     ...mcTableHeadCellProps,
   };
 
-  const headerElement = (
-    columnDef?.Header instanceof Function
-      ? columnDef?.Header?.({
-          header,
-          tableInstance,
-        })
-      : columnDef?.Header ?? header.renderHeader()
-  ) as ReactNode;
+  const headerElement = ((columnDef?.Header instanceof Function
+    ? columnDef?.Header?.({
+        header,
+        tableInstance,
+      })
+    : columnDef?.Header) ??
+    header.renderHeader() ??
+    columnDef.header) as ReactNode;
 
   const getIsLastLeftPinnedColumn = () => {
     return (
@@ -92,7 +92,9 @@ export const MRT_TableHeadCell: FC<Props> = ({
       align={columnDefType === 'group' ? 'center' : 'left'}
       colSpan={header.colSpan}
       {...tableCellProps}
-      ref={columnDefType === 'data' ? dropRef : undefined}
+      ref={
+        columnDefType === 'data' && enableColumnOrdering ? dropRef : undefined
+      }
       sx={(theme: Theme) => ({
         backgroundColor:
           column.getIsPinned() && columnDefType !== 'group'
@@ -123,7 +125,7 @@ export const MRT_TableHeadCell: FC<Props> = ({
           column.getIsPinned() && columnDefType !== 'group'
             ? 'sticky'
             : undefined,
-        pt: columnDefType !== 'data' ? 0 : isDensePadding ? '0.25' : '.5rem',
+        pt: columnDefType !== 'data' ? 0 : isDensePadding ? '0.25' : '.75rem',
         right:
           column.getIsPinned() === 'right' ? `${getTotalRight()}px` : undefined,
         transition: `all ${enableColumnResizing ? 0 : '0.2s'} ease-in-out`,

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,9 @@ export const MRT_SelectCheckbox: FC<Props> = ({
     options: {
       localization,
       muiSelectCheckboxProps,
-      onSelectChange,
-      onSelectAllChange,
+      onMrtSelectRowChange,
+      onMrtSelectAllChange,
+      selectAllMode,
     },
   } = tableInstance;
 
@@ -29,15 +30,19 @@ export const MRT_SelectCheckbox: FC<Props> = ({
 
   const handleSelectChange = (event: ChangeEvent<HTMLInputElement>) => {
     if (selectAll) {
-      tableInstance.getToggleAllRowsSelectedHandler()(event as any);
-      onSelectAllChange?.({
+      if (selectAllMode === 'all') {
+        tableInstance.getToggleAllRowsSelectedHandler()(event as any);
+      } else if (selectAllMode === 'page') {
+        tableInstance.getToggleAllPageRowsSelectedHandler()(event as any);
+      }
+      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

@@ -19,9 +19,12 @@ export const MRT_ShowHideColumnsMenu: FC<Props> = ({
   const {
     getAllColumns,
     getAllLeafColumns,
+    getCenterLeafColumns,
     getIsAllColumnsVisible,
     getIsSomeColumnsPinned,
     getIsSomeColumnsVisible,
+    getLeftLeafColumns,
+    getRightLeafColumns,
     getState,
     toggleAllColumnsVisible,
     options: { localization, enablePinning, enableColumnOrdering },
@@ -41,13 +44,23 @@ export const MRT_ShowHideColumnsMenu: FC<Props> = ({
       columnOrder.length > 0 &&
       !columns.some((col) => col.columnDefType === 'group')
     ) {
-      return (
-        columnOrder.map((colId) => columns.find((col) => col.id === colId)) ??
-        columns
-      );
+      return [
+        ...getLeftLeafColumns(),
+        ...Array.from(new Set(columnOrder)).map((colId) =>
+          getCenterLeafColumns().find((col) => col?.id === colId),
+        ),
+        ...getRightLeafColumns(),
+      ].filter(Boolean);
     }
     return columns;
-  }, [getAllColumns(), columnOrder, columnPinning]) as MRT_Column[];
+  }, [
+    columnOrder,
+    columnPinning,
+    getAllColumns(),
+    getCenterLeafColumns(),
+    getLeftLeafColumns(),
+    getRightLeafColumns(),
+  ]) as MRT_Column[];
 
   return (
     <Menu

package/src/menus/MRT_ShowHideColumnsMenuItems.tsx

@@ -3,6 +3,7 @@ import { useDrag, useDrop } from 'react-dnd';
 import { Box, FormControlLabel, MenuItem, Switch } from '@mui/material';
 import { MRT_ColumnPinningButtons } from '../buttons/MRT_ColumnPinningButtons';
 import { MRT_GrabHandleButton } from '../buttons/MRT_GrabHandleButton';
+import { reorderColumn } from '../utils';
 import type { MRT_Column, MRT_TableInstance } from '..';
 
 interface Props {
@@ -20,7 +21,7 @@ export const MRT_ShowHideColumnsMenuItems: FC<Props> = ({
 }) => {
   const {
     getState,
-    options: { enableColumnOrdering, onToggleColumnVisibility },
+    options: { enableColumnOrdering, onMrtToggleColumnVisibility },
     setColumnOrder,
   } = tableInstance;
 
@@ -28,21 +29,10 @@ export const MRT_ShowHideColumnsMenuItems: FC<Props> = ({
 
   const { columnDef, columnDefType } = column;
 
-  const reorder = (movingColumn: MRT_Column, receivingColumn: MRT_Column) => {
-    if (movingColumn.getCanPin()) {
-      movingColumn.pin(receivingColumn.getIsPinned());
-    }
-    columnOrder.splice(
-      columnOrder.indexOf(receivingColumn.id),
-      0,
-      columnOrder.splice(columnOrder.indexOf(movingColumn.id), 1)[0],
-    );
-    setColumnOrder([...columnOrder]);
-  };
-
   const [, dropRef] = useDrop({
     accept: 'column',
-    drop: (movingColumn: MRT_Column) => reorder(movingColumn, column),
+    drop: (movingColumn: MRT_Column) =>
+      reorderColumn(movingColumn, column, columnOrder, setColumnOrder),
   });
 
   const [, dragRef, previewRef] = useDrag({
@@ -66,7 +56,7 @@ export const MRT_ShowHideColumnsMenuItems: FC<Props> = ({
     } else {
       column.toggleVisibility();
     }
-    onToggleColumnVisibility?.({
+    onMrtToggleColumnVisibility?.({
       column,
       columnVisibility,
       tableInstance,
@@ -85,7 +75,14 @@ export const MRT_ShowHideColumnsMenuItems: FC<Props> = ({
           py: '6px',
         }}
       >
-        <Box ref={previewRef} sx={{ display: 'flex', flexWrap: 'nowrap' }}>
+        <Box
+          ref={previewRef}
+          sx={{
+            display: 'flex',
+            flexWrap: 'nowrap',
+            gap: '8px',
+          }}
+        >
           {columnDefType !== 'group' &&
             enableColumnOrdering &&
             columnDef.enableColumnOrdering !== false &&
@@ -112,10 +109,13 @@ export const MRT_ShowHideColumnsMenuItems: FC<Props> = ({
             }}
             checked={switchChecked}
             control={<Switch />}
-            disabled={(isSubMenu && switchChecked) || !column.getCanHide()}
+            disabled={
+              (isSubMenu && switchChecked) ||
+              !column.getCanHide() ||
+              column.getIsGrouped()
+            }
             label={columnDef.header}
             onChange={() => handleToggleColumnHidden(column)}
-            sx={{ ml: '4px' }}
           />
         </Box>
       </MenuItem>

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

@@ -12,6 +12,7 @@ import {
   ReactTableGenerics,
   getFacetedRowModel,
   TableState,
+  Table,
 } from '@tanstack/react-table';
 import {
   MRT_Cell,
@@ -40,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 =
@@ -57,7 +58,8 @@ export const MRT_TableRoot = <D extends Record<string, any> = {}>(
     const initState = props.initialState ?? {};
 
     initState.columnOrder =
-      initState?.columnOrder ?? props.enableColumnOrdering
+      initState?.columnOrder ??
+      (props.enableColumnOrdering || props.enableGrouping)
         ? ([
             showActionColumn && 'mrt-row-actions',
             showExpandColumn && 'mrt-expand',
@@ -69,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') {
@@ -82,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);
@@ -133,7 +135,25 @@ export const MRT_TableRoot = <D extends Record<string, any> = {}>(
     MRT_FILTER_OPTION | FilterFn<ReactTableGenerics> | string | number | symbol
   >(props.globalFilterFn ?? MRT_FILTER_OPTION.FUZZY);
 
-  const table = useMemo(() => createTable(), []);
+  const table = useMemo(
+    () =>
+      // @ts-ignore
+      createTable().setOptions({
+        //@ts-ignore
+        filterFns: defaultFilterFNs,
+        getCoreRowModel: getCoreRowModel(),
+        getExpandedRowModel: getExpandedRowModel(),
+        getFacetedRowModel: getFacetedRowModel(),
+        getFilteredRowModel: getFilteredRowModel(),
+        getGroupedRowModel: getGroupedRowModel(),
+        getPaginationRowModel: getPaginationRowModel(),
+        getSortedRowModel: getSortedRowModel(),
+        getSubRows: (row) => (row as MRT_Row)?.subRows,
+        tableId,
+        initialState,
+      }) as Table<D>,
+    [],
+  );
 
   const displayColumns = useMemo(
     () =>
@@ -148,6 +168,8 @@ export const MRT_TableRoot = <D extends Record<string, any> = {}>(
             ),
             header: props.localization?.actions,
             id: 'mrt-row-actions',
+            muiTableBodyCellProps: props.muiTableBodyCellProps,
+            muiTableHeadCellProps: props.muiTableHeadCellProps,
             size: 60,
           }),
         showExpandColumn &&
@@ -164,6 +186,8 @@ export const MRT_TableRoot = <D extends Record<string, any> = {}>(
               ) : null,
             header: props.localization?.expand,
             id: 'mrt-expand',
+            muiTableBodyCellProps: props.muiTableBodyCellProps,
+            muiTableHeadCellProps: props.muiTableHeadCellProps,
             size: 50,
           }),
         props.enableRowSelection &&
@@ -180,6 +204,8 @@ export const MRT_TableRoot = <D extends Record<string, any> = {}>(
               ) : null,
             header: props.localization?.select,
             id: 'mrt-select',
+            muiTableBodyCellProps: props.muiTableBodyCellProps,
+            muiTableHeadCellProps: props.muiTableHeadCellProps,
             size: 50,
           }),
         props.enableRowNumbers &&
@@ -188,6 +214,8 @@ export const MRT_TableRoot = <D extends Record<string, any> = {}>(
             Header: () => props.localization?.rowNumber,
             header: props.localization?.rowNumbers,
             id: 'mrt-row-numbers',
+            muiTableBodyCellProps: props.muiTableBodyCellProps,
+            muiTableHeadCellProps: props.muiTableHeadCellProps,
             size: 50,
           }),
       ].filter(Boolean),
@@ -238,24 +266,14 @@ export const MRT_TableRoot = <D extends Record<string, any> = {}>(
 
   //@ts-ignore
   const tableInstance = {
+    //@ts-ignore
     ...useTableInstance(table, {
-      filterFns: defaultFilterFNs,
-      getCoreRowModel: getCoreRowModel(),
-      getExpandedRowModel: getExpandedRowModel(),
-      getFacetedRowModel: getFacetedRowModel(),
-      getFilteredRowModel: getFilteredRowModel(),
-      getGroupedRowModel: getGroupedRowModel(),
-      getPaginationRowModel: getPaginationRowModel(),
-      getSortedRowModel: getSortedRowModel(),
-      getSubRows: (row) => (row as MRT_Row)?.subRows,
-      //@ts-ignore
-      globalFilterFn: currentGlobalFilterFn,
       ...props,
       //@ts-ignore
       columns,
       data,
-      idPrefix,
-      initialState,
+      //@ts-ignore
+      globalFilterFn: currentGlobalFilterFn,
       state: {
         currentEditingCell,
         currentEditingRow,
@@ -282,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') {
@@ -299,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>
   );
 };