material-react-table 0.41.0 → 1.0.0-beta.0

package/package.json

@@ -1,5 +1,5 @@
 {
-  "version": "0.41.0",
+  "version": "1.0.0-beta.0",
   "license": "MIT",
   "name": "material-react-table",
   "description": "A fully featured Material UI V5 implementation of TanStack React Table V8, written from the ground up in TypeScript.",

package/src/inputs/MRT_GlobalFilterTextField.tsx

@@ -62,7 +62,12 @@ export const MRT_GlobalFilterTextField = <
       : muiSearchTextFieldProps;
 
   return (
-    <Collapse in={showGlobalFilter} orientation="horizontal">
+    <Collapse
+      in={showGlobalFilter}
+      orientation="horizontal"
+      unmountOnExit
+      mountOnEnter
+    >
       <TextField
         placeholder={localization.search}
         onChange={handleChange}

package/src/toolbar/MRT_BottomToolbar.tsx

@@ -69,8 +69,11 @@ export const MRT_BottomToolbar: FC<Props> = ({ table }) => {
       )}
       <Box
         sx={{
+          alignItems: 'flex-start',
+          boxSizing: 'border-box',
           display: 'flex',
           justifyContent: 'space-between',
+          p: '0.5rem',
           width: '100%',
         }}
       >

package/src/toolbar/MRT_TablePagination.tsx

@@ -53,13 +53,12 @@ export const MRT_TablePagination: FC<Props> = ({ table, position }) => {
       showLastButton={showFirstLastPageButtons}
       {...tablePaginationProps}
       sx={(theme) => ({
-        m: '0 0.5rem',
         mt:
           position === 'top' &&
           enableToolbarInternalActions &&
           !showGlobalFilter
             ? '3.5rem'
-            : undefined,
+            : '-0.25rem',
         position: 'relative',
         zIndex: 2,
         ...(tablePaginationProps?.sx instanceof Function

package/src/toolbar/MRT_ToolbarInternalButtons.tsx

@@ -1,7 +1,6 @@
 import React, { FC } from 'react';
 import { Box } from '@mui/material';
 import { MRT_FullScreenToggleButton } from '../buttons/MRT_FullScreenToggleButton';
-import { MRT_GlobalFilterTextField } from '../inputs/MRT_GlobalFilterTextField';
 import { MRT_ShowHideColumnsButton } from '../buttons/MRT_ShowHideColumnsButton';
 import { MRT_ToggleDensePaddingButton } from '../buttons/MRT_ToggleDensePaddingButton';
 import { MRT_ToggleFiltersButton } from '../buttons/MRT_ToggleFiltersButton';
@@ -23,7 +22,7 @@ export const MRT_ToolbarInternalButtons: FC<Props> = ({ table }) => {
       enableGlobalFilter,
       enableHiding,
       enablePinning,
-      positionGlobalFilter,
+      initialState,
       renderToolbarInternalActions,
     },
   } = table;
@@ -40,12 +39,11 @@ export const MRT_ToolbarInternalButtons: FC<Props> = ({ table }) => {
         table,
       }) ?? (
         <>
-          {enableGlobalFilter && positionGlobalFilter === 'right' && (
-            <MRT_GlobalFilterTextField table={table} />
-          )}
-          {enableFilters && enableGlobalFilter && (
-            <MRT_ToggleGlobalFilterButton table={table} />
-          )}
+          {enableFilters &&
+            enableGlobalFilter &&
+            !initialState?.showGlobalFilter && (
+              <MRT_ToggleGlobalFilterButton table={table} />
+            )}
           {enableFilters && enableColumnFilters && (
             <MRT_ToggleFiltersButton table={table} />
           )}

package/src/toolbar/MRT_TopToolbar.tsx

@@ -100,10 +100,14 @@ export const MRT_TopToolbar: FC<Props> = ({ table }) => {
         {enableGlobalFilter && positionGlobalFilter === 'left' && (
           <MRT_GlobalFilterTextField table={table} />
         )}
-
         {renderTopToolbarCustomActions?.({ table }) ?? <span />}
         {enableToolbarInternalActions ? (
-          <MRT_ToolbarInternalButtons table={table} />
+          <Box sx={{ display: 'flex', flexWrap: 'wrap' }}>
+            {enableGlobalFilter && positionGlobalFilter === 'right' && (
+              <MRT_GlobalFilterTextField table={table} />
+            )}
+            <MRT_ToolbarInternalButtons table={table} />
+          </Box>
         ) : (
           enableGlobalFilter &&
           positionGlobalFilter === 'right' && (