material-react-table 0.40.12 → 1.0.0-beta.1

package/package.json

@@ -1,5 +1,5 @@
 {
-  "version": "0.40.12",
+  "version": "1.0.0-beta.1",
   "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_FilterTextField.tsx

@@ -3,6 +3,7 @@ import React, {
   FC,
   MouseEvent,
   useCallback,
+  useEffect,
   useState,
 } from 'react';
 import {
@@ -17,8 +18,8 @@ import {
   TextFieldProps,
   Tooltip,
 } from '@mui/material';
-import { MRT_FilterOptionMenu } from '../menus/MRT_FilterOptionMenu';
 import type { MRT_Header, MRT_TableInstance } from '..';
+import { MRT_FilterOptionMenu } from '../menus/MRT_FilterOptionMenu';
 
 interface Props {
   header: MRT_Header;
@@ -169,6 +170,10 @@ export const MRT_FilterTextField: FC<Props> = ({
     setAnchorEl(event.currentTarget);
   };
 
+  useEffect(() => {
+    handleClear();
+  }, [columnDef._filterFn]);
+
   if (columnDef.Filter) {
     return <>{columnDef.Filter?.({ column, header, table })}</>;
   }
@@ -241,9 +246,7 @@ export const MRT_FilterTextField: FC<Props> = ({
                 />
               )}
             </InputAdornment>
-          ) : (
-            <FilterListIcon style={{ marginRight: '4px' }} />
-          ),
+          ) : null,
           endAdornment: !filterChipLabel && (
             <InputAdornment position="end">
               <Tooltip

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' && (