material-react-table 2.0.0-alpha.1 → 2.0.0-alpha.2

package/src/toolbar/MRT_ToolbarDropZone.tsx

@@ -1,8 +1,8 @@
 import { type DragEvent, useEffect } from 'react';
-import { alpha } from '@mui/material/styles';
 import Box from '@mui/material/Box';
 import Fade from '@mui/material/Fade';
 import Typography from '@mui/material/Typography';
+import { alpha } from '@mui/material/styles';
 import { type MRT_TableInstance } from '../types';
 
 interface Props<TData extends Record<string, any>> {
@@ -19,7 +19,7 @@ export const MRT_ToolbarDropZone = <TData extends Record<string, any>>({
     setShowToolbarDropZone,
   } = table;
 
-  const { draggingColumn, hoveredColumn, grouping, showToolbarDropZone } =
+  const { draggingColumn, grouping, hoveredColumn, showToolbarDropZone } =
     getState();
 
   const handleDragEnter = (_event: DragEvent<HTMLDivElement>) => {
@@ -41,23 +41,23 @@ export const MRT_ToolbarDropZone = <TData extends Record<string, any>>({
     <Fade in={showToolbarDropZone}>
       <Box
         className="Mui-ToolbarDropZone"
+        onDragEnter={handleDragEnter}
         sx={(theme) => ({
           alignItems: 'center',
+          backdropFilter: 'blur(4px)',
           backgroundColor: alpha(
             theme.palette.info.main,
             hoveredColumn?.id === 'drop-zone' ? 0.2 : 0.1,
           ),
-          backdropFilter: 'blur(4px)',
-          boxSizing: 'border-box',
           border: `dashed ${theme.palette.info.main} 2px`,
+          boxSizing: 'border-box',
           display: 'flex',
-          justifyContent: 'center',
           height: '100%',
+          justifyContent: 'center',
           position: 'absolute',
           width: '100%',
           zIndex: 4,
         })}
-        onDragEnter={handleDragEnter}
       >
         <Typography fontStyle="italic">
           {localization.dropToGroupBy.replace(

package/src/toolbar/MRT_ToolbarInternalButtons.tsx

@@ -1,8 +1,8 @@
 import Box from '@mui/material/Box';
-import { MRT_ToggleFullScreenButton } from '../buttons/MRT_ToggleFullScreenButton';
 import { MRT_ShowHideColumnsButton } from '../buttons/MRT_ShowHideColumnsButton';
 import { MRT_ToggleDensePaddingButton } from '../buttons/MRT_ToggleDensePaddingButton';
 import { MRT_ToggleFiltersButton } from '../buttons/MRT_ToggleFiltersButton';
+import { MRT_ToggleFullScreenButton } from '../buttons/MRT_ToggleFullScreenButton';
 import { MRT_ToggleGlobalFilterButton } from '../buttons/MRT_ToggleGlobalFilterButton';
 import { type MRT_TableInstance } from '../types';
 
@@ -15,14 +15,15 @@ export const MRT_ToolbarInternalButtons = <TData extends Record<string, any>>({
 }: Props<TData>) => {
   const {
     options: {
+      columnFilterDisplayMode,
       enableColumnFilters,
       enableColumnOrdering,
+      enableColumnPinning,
       enableDensityToggle,
       enableFilters,
       enableFullScreenToggle,
       enableGlobalFilter,
       enableHiding,
-      enableColumnPinning,
       initialState,
       renderToolbarInternalActions,
     },
@@ -45,9 +46,11 @@ export const MRT_ToolbarInternalButtons = <TData extends Record<string, any>>({
             !initialState?.showGlobalFilter && (
               <MRT_ToggleGlobalFilterButton table={table} />
             )}
-          {enableFilters && enableColumnFilters && (
-            <MRT_ToggleFiltersButton table={table} />
-          )}
+          {enableFilters &&
+            enableColumnFilters &&
+            columnFilterDisplayMode !== 'popover' && (
+              <MRT_ToggleFiltersButton table={table} />
+            )}
           {(enableHiding || enableColumnOrdering || enableColumnPinning) && (
             <MRT_ShowHideColumnsButton table={table} />
           )}

package/src/toolbar/MRT_TopToolbar.tsx

@@ -1,16 +1,16 @@
 import Box from '@mui/material/Box';
 import Toolbar from '@mui/material/Toolbar';
-import useMediaQuery from '@mui/material/useMediaQuery';
 import { lighten } from '@mui/material/styles';
-import { MRT_GlobalFilterTextField } from '../inputs/MRT_GlobalFilterTextField';
+import { type Theme } from '@mui/material/styles';
+import useMediaQuery from '@mui/material/useMediaQuery';
 import { MRT_LinearProgressBar } from './MRT_LinearProgressBar';
 import { MRT_TablePagination } from './MRT_TablePagination';
 import { MRT_ToolbarAlertBanner } from './MRT_ToolbarAlertBanner';
-import { MRT_ToolbarInternalButtons } from './MRT_ToolbarInternalButtons';
 import { MRT_ToolbarDropZone } from './MRT_ToolbarDropZone';
-import { type MRT_TableInstance } from '../types';
-import { type Theme } from '@mui/material/styles';
+import { MRT_ToolbarInternalButtons } from './MRT_ToolbarInternalButtons';
 import { parseFromValuesOrFunc } from '../column.utils';
+import { MRT_GlobalFilterTextField } from '../inputs/MRT_GlobalFilterTextField';
+import { type MRT_TableInstance } from '../types';
 
 export const commonToolbarStyles = ({ theme }: { theme: Theme }) => ({
   alignItems: 'flex-start',
@@ -122,8 +122,8 @@ export const MRT_TopToolbar = <TData extends Record<string, any>>({
         )}
       </Box>
       {enablePagination &&
-        ['top', 'both'].includes(positionPagination ?? '') && (
-          <MRT_TablePagination table={table} position="top" />
+        ['both', 'top'].includes(positionPagination ?? '') && (
+          <MRT_TablePagination position="top" table={table} />
         )}
       <MRT_LinearProgressBar isTopToolbar table={table} />
     </Toolbar>