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

package/src/toolbar/MRT_LinearProgressBar.tsx

@@ -1,5 +1,6 @@
 import Collapse from '@mui/material/Collapse';
 import LinearProgress from '@mui/material/LinearProgress';
+import { parseFromValuesOrFunc } from '../column.utils';
 import { type MRT_TableInstance } from '../types';
 
 interface Props<TData extends Record<string, any>> {
@@ -12,31 +13,31 @@ export const MRT_LinearProgressBar = <TData extends Record<string, any>>({
   table,
 }: Props<TData>) => {
   const {
-    options: { muiLinearProgressProps },
     getState,
+    options: { muiLinearProgressProps },
   } = table;
   const { isLoading, showProgressBars } = getState();
 
-  const linearProgressProps =
-    muiLinearProgressProps instanceof Function
-      ? muiLinearProgressProps({ isTopToolbar, table })
-      : muiLinearProgressProps;
+  const linearProgressProps = parseFromValuesOrFunc(muiLinearProgressProps, {
+    isTopToolbar,
+    table,
+  });
 
   return (
     <Collapse
       in={isLoading || showProgressBars}
       mountOnEnter
-      unmountOnExit
       sx={{
         bottom: isTopToolbar ? 0 : undefined,
         position: 'absolute',
         top: !isTopToolbar ? 0 : undefined,
         width: '100%',
       }}
+      unmountOnExit
     >
       <LinearProgress
-        aria-label="Loading"
         aria-busy="true"
+        aria-label="Loading"
         sx={{ position: 'relative' }}
         {...linearProgressProps}
       />

package/src/toolbar/MRT_TablePagination.tsx

@@ -1,40 +1,40 @@
 import { type ChangeEvent } from 'react';
 import TablePagination from '@mui/material/TablePagination';
+import { parseFromValuesOrFunc } from '../column.utils';
 import { type MRT_TableInstance } from '../types';
 
 interface Props<TData extends Record<string, any>> {
-  position?: 'top' | 'bottom';
+  position?: 'bottom' | 'top';
   table: MRT_TableInstance<TData>;
 }
 
 export const MRT_TablePagination = <TData extends Record<string, any>>({
-  table,
   position = 'bottom',
+  table,
 }: Props<TData>) => {
   const {
     getPrePaginationRowModel,
     getState,
-    setPageIndex,
-    setPageSize,
     options: {
-      muiTablePaginationProps,
       enableToolbarInternalActions,
       localization,
+      muiTablePaginationProps,
       rowCount,
     },
+    setPageIndex,
+    setPageSize,
   } = table;
   const {
-    pagination: { pageSize = 10, pageIndex = 0 },
+    pagination: { pageIndex = 0, pageSize = 10 },
     showGlobalFilter,
   } = getState();
 
   const totalRowCount = rowCount ?? getPrePaginationRowModel().rows.length;
   const showFirstLastPageButtons = totalRowCount / pageSize > 2;
 
-  const tablePaginationProps =
-    muiTablePaginationProps instanceof Function
-      ? muiTablePaginationProps({ table })
-      : muiTablePaginationProps;
+  const tablePaginationProps = parseFromValuesOrFunc(muiTablePaginationProps, {
+    table,
+  });
 
   const handleChangeRowsPerPage = (event: ChangeEvent<HTMLInputElement>) => {
     setPageSize(+event.target.value);
@@ -53,7 +53,7 @@ export const MRT_TablePagination = <TData extends Record<string, any>>({
           ? localization.goToNextPage
           : localization.goToPreviousPage
       }
-      labelDisplayedRows={({ from, to, count }) =>
+      labelDisplayedRows={({ count, from, to }) =>
         `${from}-${to} ${localization.of} ${count}`
       }
       labelRowsPerPage={localization.rowsPerPage}
@@ -69,28 +69,28 @@ export const MRT_TablePagination = <TData extends Record<string, any>>({
       showLastButton={showFirstLastPageButtons}
       {...tablePaginationProps}
       SelectProps={{
-        sx: { m: '0 1rem 0 1ch' },
         MenuProps: { MenuListProps: { disablePadding: true }, sx: { m: 0 } },
+        sx: { m: '0 1rem 0 1ch' },
         ...tablePaginationProps?.SelectProps,
       }}
       sx={(theme) => ({
-        '& .MuiTablePagination-toolbar': {
-          display: 'flex',
-          alignItems: 'center',
-        },
-        '& .MuiTablePagination-selectLabel': {
-          m: '0 -1px',
-        },
-        '&. MuiInputBase-root': {
+        '& . MuiTablePagination-select': {
           m: '0 1px',
         },
-        '& . MuiTablePagination-select': {
+        '& .MuiTablePagination-actions': {
           m: '0 1px',
         },
         '& .MuiTablePagination-displayedRows': {
           m: '0 1px',
         },
-        '& .MuiTablePagination-actions': {
+        '& .MuiTablePagination-selectLabel': {
+          m: '0 -1px',
+        },
+        '& .MuiTablePagination-toolbar': {
+          alignItems: 'center',
+          display: 'flex',
+        },
+        '&. MuiInputBase-root': {
           m: '0 1px',
         },
         mt:
@@ -101,9 +101,7 @@ export const MRT_TablePagination = <TData extends Record<string, any>>({
             : undefined,
         position: 'relative',
         zIndex: 2,
-        ...(tablePaginationProps?.sx instanceof Function
-          ? tablePaginationProps.sx(theme)
-          : (tablePaginationProps?.sx as any)),
+        ...(parseFromValuesOrFunc(tablePaginationProps?.sx, theme) as any),
       })}
     />
   );

package/src/toolbar/MRT_ToolbarAlertBanner.tsx

@@ -4,6 +4,7 @@ import AlertTitle from '@mui/material/AlertTitle';
 import Box from '@mui/material/Box';
 import Chip from '@mui/material/Chip';
 import Collapse from '@mui/material/Collapse';
+import { parseFromValuesOrFunc } from '../column.utils';
 import { type MRT_TableInstance } from '../types';
 
 interface Props<TData extends Record<string, any>> {
@@ -21,23 +22,21 @@ export const MRT_ToolbarAlertBanner = <TData extends Record<string, any>>({
     getState,
     options: {
       localization,
-      muiToolbarAlertBannerProps,
       muiToolbarAlertBannerChipProps,
+      muiToolbarAlertBannerProps,
       positionToolbarAlertBanner,
       rowCount,
     },
   } = table;
   const { grouping, showAlertBanner } = getState();
 
-  const alertProps =
-    muiToolbarAlertBannerProps instanceof Function
-      ? muiToolbarAlertBannerProps({ table })
-      : muiToolbarAlertBannerProps;
+  const alertProps = parseFromValuesOrFunc(muiToolbarAlertBannerProps, {
+    table,
+  });
 
-  const chipProps =
-    muiToolbarAlertBannerChipProps instanceof Function
-      ? muiToolbarAlertBannerChipProps({ table })
-      : muiToolbarAlertBannerChipProps;
+  const chipProps = parseFromValuesOrFunc(muiToolbarAlertBannerChipProps, {
+    table,
+  });
 
   const selectMessage =
     getSelectedRowModel().rows.length > 0
@@ -82,20 +81,18 @@ export const MRT_ToolbarAlertBanner = <TData extends Record<string, any>>({
           borderRadius: 0,
           fontSize: '1rem',
           left: 0,
-          p: 0,
-          position: 'relative',
           mb: stackAlertBanner
             ? 0
             : positionToolbarAlertBanner === 'bottom'
             ? '-1rem'
             : undefined,
+          p: 0,
+          position: 'relative',
           right: 0,
           top: 0,
           width: '100%',
           zIndex: 2,
-          ...(alertProps?.sx instanceof Function
-            ? alertProps.sx(theme)
-            : (alertProps?.sx as any)),
+          ...(parseFromValuesOrFunc(alertProps?.sx, theme) as any),
         })}
       >
         {alertProps?.title && <AlertTitle>{alertProps.title}</AlertTitle>}

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,15 +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 { MRT_ToolbarInternalButtons } from './MRT_ToolbarInternalButtons';
+import { parseFromValuesOrFunc } from '../column.utils';
+import { MRT_GlobalFilterTextField } from '../inputs/MRT_GlobalFilterTextField';
 import { type MRT_TableInstance } from '../types';
-import { type Theme } from '@mui/material/styles';
 
 export const commonToolbarStyles = ({ theme }: { theme: Theme }) => ({
   alignItems: 'flex-start',
@@ -51,10 +52,7 @@ export const MRT_TopToolbar = <TData extends Record<string, any>>({
 
   const isMobile = useMediaQuery('(max-width:720px)');
 
-  const toolbarProps =
-    muiTopToolbarProps instanceof Function
-      ? muiTopToolbarProps({ table })
-      : muiTopToolbarProps;
+  const toolbarProps = parseFromValuesOrFunc(muiTopToolbarProps, { table });
 
   const stackAlertBanner =
     isMobile || !!renderTopToolbarCustomActions || showGlobalFilter;
@@ -70,16 +68,12 @@ export const MRT_TopToolbar = <TData extends Record<string, any>>({
           toolbarProps.ref.current = ref;
         }
       }}
-      sx={(theme) =>
-        ({
-          position: isFullScreen ? 'sticky' : undefined,
-          top: isFullScreen ? '0' : undefined,
-          ...commonToolbarStyles({ theme }),
-          ...(toolbarProps?.sx instanceof Function
-            ? toolbarProps.sx(theme)
-            : (toolbarProps?.sx as any)),
-        } as any)
-      }
+      sx={(theme) => ({
+        position: isFullScreen ? 'sticky' : undefined,
+        top: isFullScreen ? '0' : undefined,
+        ...commonToolbarStyles({ theme }),
+        ...(parseFromValuesOrFunc(toolbarProps?.sx, theme) as any),
+      })}
     >
       {positionToolbarAlertBanner === 'top' && (
         <MRT_ToolbarAlertBanner
@@ -128,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>