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

package/src/menus/MRT_ShowHideColumnsMenu.tsx

@@ -29,15 +29,15 @@ export const MRT_ShowHideColumnsMenu = <TData extends Record<string, any>>({
     getLeftLeafColumns,
     getRightLeafColumns,
     getState,
-    toggleAllColumnsVisible,
     options: {
       enableColumnOrdering,
-      enableHiding,
       enableColumnPinning,
+      enableHiding,
       localization,
     },
+    toggleAllColumnsVisible,
   } = table;
-  const { density, columnOrder, columnPinning } = getState();
+  const { columnOrder, columnPinning, density } = getState();
 
   const hideAllColumns = () => {
     getAllLeafColumns()
@@ -75,12 +75,12 @@ export const MRT_ShowHideColumnsMenu = <TData extends Record<string, any>>({
 
   return (
     <Menu
-      anchorEl={anchorEl}
-      open={!!anchorEl}
-      onClose={() => setAnchorEl(null)}
       MenuListProps={{
         dense: density === 'compact',
       }}
+      anchorEl={anchorEl}
+      onClose={() => setAnchorEl(null)}
+      open={!!anchorEl}
     >
       <Box
         sx={{

package/src/menus/MRT_ShowHideColumnsMenuItems.tsx

@@ -28,17 +28,17 @@ export const MRT_ShowHideColumnsMenuItems = <
   TData extends Record<string, any>,
 >({
   allColumns,
+  column,
   hoveredColumn,
   setHoveredColumn,
-  column,
   table,
 }: Props<TData>) => {
   const {
     getState,
     options: {
       enableColumnOrdering,
-      enableHiding,
       enableColumnPinning,
+      enableHiding,
       localization,
     },
     setColumnOrder,
@@ -89,19 +89,19 @@ export const MRT_ShowHideColumnsMenuItems = <
     <>
       <MenuItem
         disableRipple
-        ref={menuItemRef as any}
         onDragEnter={handleDragEnter}
+        ref={menuItemRef as any}
         sx={(theme) => ({
           alignItems: 'center',
           justifyContent: 'flex-start',
           my: 0,
           opacity: isDragging ? 0.5 : 1,
-          outlineOffset: '-2px',
           outline: isDragging
             ? `2px dashed ${theme.palette.divider}`
             : hoveredColumn?.id === column.id
             ? `2px dashed ${theme.palette.primary.main}`
             : 'none',
+          outlineOffset: '-2px',
           pl: `${(column.depth + 0.5) * 2}rem`,
           py: '6px',
         })}
@@ -135,6 +135,7 @@ export const MRT_ShowHideColumnsMenuItems = <
             ))}
           {enableHiding ? (
             <FormControlLabel
+              checked={switchChecked}
               componentsProps={{
                 typography: {
                   sx: {
@@ -143,7 +144,6 @@ export const MRT_ShowHideColumnsMenuItems = <
                   },
                 },
               }}
-              checked={switchChecked}
               control={
                 <Tooltip
                   arrow

package/src/modals/MRT_EditRowModal.tsx

@@ -4,9 +4,9 @@ import DialogContent from '@mui/material/DialogContent';
 import DialogTitle from '@mui/material/DialogTitle';
 import Stack from '@mui/material/Stack';
 import { MRT_EditActionButtons } from '../buttons/MRT_EditActionButtons';
+import { parseFromValuesOrFunc } from '../column.utils';
 import { MRT_EditCellTextField } from '../inputs/MRT_EditCellTextField';
 import { type MRT_Row, type MRT_TableInstance } from '../types';
-import { parseFromValuesOrFunc } from '../column.utils';
 
 interface Props<TData extends Record<string, any>> {
   open: boolean;
@@ -21,15 +21,15 @@ export const MRT_EditRowModal = <TData extends Record<string, any>>({
     getState,
     options: {
       localization,
-      onEditingRowCancel,
-      onCreatingRowCancel,
-      renderEditRowModalContent,
-      renderCreateRowModalContent,
       muiCreateRowModalProps,
       muiEditRowModalProps,
+      onCreatingRowCancel,
+      onEditingRowCancel,
+      renderCreateRowModalContent,
+      renderEditRowModalContent,
     },
-    setEditingRow,
     setCreatingRow,
+    setEditingRow,
   } = table;
   const { creatingRow, editingRow } = getState();
   const row = (creatingRow ?? editingRow) as MRT_Row<TData>;
@@ -71,14 +71,14 @@ export const MRT_EditRowModal = <TData extends Record<string, any>>({
     >
       {((creatingRow &&
         renderCreateRowModalContent?.({
+          internalEditComponents,
           row,
           table,
-          internalEditComponents,
         })) ||
         renderEditRowModalContent?.({
+          internalEditComponents,
           row,
           table,
-          internalEditComponents,
         })) ?? (
         <>
           <DialogTitle sx={{ textAlign: 'center' }}>

package/src/sortingFns.ts

@@ -1,4 +1,4 @@
-import { compareItems, type RankingInfo } from '@tanstack/match-sorter-utils';
+import { type RankingInfo, compareItems } from '@tanstack/match-sorter-utils';
 import { type Row, sortingFns } from '@tanstack/react-table';
 import { type MRT_Row } from './types';
 

package/src/table/MRT_Table.tsx

@@ -1,15 +1,15 @@
 import { useCallback, useMemo } from 'react';
 import {
-  defaultRangeExtractor,
-  useVirtualizer,
   type Range,
   type Virtualizer,
+  defaultRangeExtractor,
+  useVirtualizer,
 } from '@tanstack/react-virtual';
 import Table from '@mui/material/Table';
-import { MRT_TableHead } from '../head/MRT_TableHead';
-import { Memo_MRT_TableBody, MRT_TableBody } from '../body/MRT_TableBody';
-import { MRT_TableFooter } from '../footer/MRT_TableFooter';
+import { MRT_TableBody, Memo_MRT_TableBody } from '../body/MRT_TableBody';
 import { parseCSSVarId, parseFromValuesOrFunc } from '../column.utils';
+import { MRT_TableFooter } from '../footer/MRT_TableFooter';
+import { MRT_TableHead } from '../head/MRT_TableHead';
 import { type MRT_TableInstance } from '../types';
 
 interface Props<TData extends Record<string, any>> {
@@ -26,9 +26,9 @@ export const MRT_Table = <TData extends Record<string, any>>({
       columnVirtualizerInstanceRef,
       columnVirtualizerOptions,
       columns,
+      enableColumnPinning,
       enableColumnResizing,
       enableColumnVirtualization,
-      enableColumnPinning,
       enableStickyHeader,
       enableTableFooter,
       enableTableHead,
@@ -147,6 +147,7 @@ export const MRT_Table = <TData extends Record<string, any>>({
       <Table
         stickyHeader={enableStickyHeader || isFullScreen}
         {...tableProps}
+        style={{ ...columnSizeVars, ...tableProps?.style }}
         sx={(theme) => ({
           borderCollapse: 'separate',
           display: layoutMode === 'grid' ? 'grid' : 'table',
@@ -154,7 +155,6 @@ export const MRT_Table = <TData extends Record<string, any>>({
             layoutMode !== 'grid' && enableColumnResizing ? 'fixed' : undefined,
           ...(parseFromValuesOrFunc(tableProps?.sx, theme) as any),
         })}
-        style={{ ...columnSizeVars, ...tableProps?.style }}
       >
         {enableTableHead && <MRT_TableHead {...props} />}
         {memoMode === 'table-body' || columnSizingInfo.isResizingColumn ? (

package/src/table/MRT_TableContainer.tsx

@@ -1,9 +1,9 @@
 import { useEffect, useLayoutEffect, useState } from 'react';
 import TableContainer from '@mui/material/TableContainer';
 import { MRT_Table } from './MRT_Table';
+import { parseFromValuesOrFunc } from '../column.utils';
 import { MRT_EditRowModal } from '../modals';
 import { type MRT_TableInstance } from '../types';
-import { parseFromValuesOrFunc } from '../column.utils';
 
 const useIsomorphicLayoutEffect =
   typeof window !== 'undefined' ? useLayoutEffect : useEffect;
@@ -23,9 +23,9 @@ export const MRT_TableContainer = <TData extends Record<string, any>>({
       enableStickyHeader,
       muiTableContainerProps,
     },
-    refs: { tableContainerRef, bottomToolbarRef, topToolbarRef },
+    refs: { bottomToolbarRef, tableContainerRef, topToolbarRef },
   } = table;
-  const { isFullScreen, creatingRow, editingRow } = getState();
+  const { creatingRow, editingRow, isFullScreen } = getState();
 
   const [totalToolbarHeight, setTotalToolbarHeight] = useState(0);
 
@@ -62,20 +62,20 @@ export const MRT_TableContainer = <TData extends Record<string, any>>({
           }
         }
       }}
+      style={{
+        maxHeight: isFullScreen
+          ? `calc(100vh - ${totalToolbarHeight}px)`
+          : undefined,
+        ...tableContainerProps?.style,
+      }}
       sx={(theme) => ({
-        maxWidth: '100%',
         maxHeight: enableStickyHeader
           ? `clamp(350px, calc(100vh - ${totalToolbarHeight}px), 9999px)`
           : undefined,
+        maxWidth: '100%',
         overflow: 'auto',
         ...(parseFromValuesOrFunc(tableContainerProps?.sx, theme) as any),
       })}
-      style={{
-        maxHeight: isFullScreen
-          ? `calc(100vh - ${totalToolbarHeight}px)`
-          : undefined,
-        ...tableContainerProps?.style,
-      }}
     >
       <MRT_Table table={table} />
       {(createModalOpen || editModalOpen) && (

package/src/table/MRT_TablePaper.tsx

@@ -1,9 +1,9 @@
 import Paper from '@mui/material/Paper';
-import { MRT_TopToolbar } from '../toolbar/MRT_TopToolbar';
-import { MRT_BottomToolbar } from '../toolbar/MRT_BottomToolbar';
 import { MRT_TableContainer } from './MRT_TableContainer';
-import { type MRT_TableInstance } from '../types';
 import { parseFromValuesOrFunc } from '../column.utils';
+import { MRT_BottomToolbar } from '../toolbar/MRT_BottomToolbar';
+import { MRT_TopToolbar } from '../toolbar/MRT_TopToolbar';
+import { type MRT_TableInstance } from '../types';
 
 interface Props<TData extends Record<string, any>> {
   table: MRT_TableInstance<TData>;
@@ -38,13 +38,7 @@ export const MRT_TablePaper = <TData extends Record<string, any>>({
           tablePaperProps.ref.current = ref;
         }
       }}
-      sx={(theme) => ({
-        overflow: 'hidden',
-        transition: 'all 100ms ease-in-out',
-        ...(parseFromValuesOrFunc(tablePaperProps?.sx, theme) as any),
-      })}
       style={{
-        ...tablePaperProps?.style,
         ...(isFullScreen
           ? {
               bottom: 0,
@@ -61,7 +55,13 @@ export const MRT_TablePaper = <TData extends Record<string, any>>({
               zIndex: 10,
             }
           : {}),
+        ...tablePaperProps?.style,
       }}
+      sx={(theme) => ({
+        overflow: 'hidden',
+        transition: 'all 100ms ease-in-out',
+        ...(parseFromValuesOrFunc(tablePaperProps?.sx, theme) as any),
+      })}
     >
       {enableTopToolbar &&
         (parseFromValuesOrFunc(renderTopToolbar, { table }) ?? (

package/src/toolbar/MRT_BottomToolbar.tsx

@@ -1,14 +1,14 @@
 import Box from '@mui/material/Box';
 import Toolbar from '@mui/material/Toolbar';
-import useMediaQuery from '@mui/material/useMediaQuery';
 import { alpha } 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_ToolbarDropZone } from './MRT_ToolbarDropZone';
-import { MRT_LinearProgressBar } from './MRT_LinearProgressBar';
 import { commonToolbarStyles } from './MRT_TopToolbar';
-import { type MRT_TableInstance } from '../types';
 import { parseFromValuesOrFunc } from '../column.utils';
+import { type MRT_TableInstance } from '../types';
 
 interface Props<TData extends Record<string, any>> {
   table: MRT_TableInstance<TData>;
@@ -98,8 +98,8 @@ export const MRT_BottomToolbar = <TData extends Record<string, any>>({
           }}
         >
           {enablePagination &&
-            ['bottom', 'both'].includes(positionPagination ?? '') && (
-              <MRT_TablePagination table={table} position="bottom" />
+            ['both', 'bottom'].includes(positionPagination ?? '') && (
+              <MRT_TablePagination position="bottom" table={table} />
             )}
         </Box>
       </Box>

package/src/toolbar/MRT_LinearProgressBar.tsx

@@ -1,7 +1,7 @@
 import Collapse from '@mui/material/Collapse';
 import LinearProgress from '@mui/material/LinearProgress';
-import { type MRT_TableInstance } from '../types';
 import { parseFromValuesOrFunc } from '../column.utils';
+import { type MRT_TableInstance } from '../types';
 
 interface Props<TData extends Record<string, any>> {
   isTopToolbar: boolean;
@@ -13,8 +13,8 @@ export const MRT_LinearProgressBar = <TData extends Record<string, any>>({
   table,
 }: Props<TData>) => {
   const {
-    options: { muiLinearProgressProps },
     getState,
+    options: { muiLinearProgressProps },
   } = table;
   const { isLoading, showProgressBars } = getState();
 
@@ -27,17 +27,17 @@ export const MRT_LinearProgressBar = <TData extends Record<string, any>>({
     <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,31 +1,31 @@
 import { type ChangeEvent } from 'react';
 import TablePagination from '@mui/material/TablePagination';
-import { type MRT_TableInstance } from '../types';
 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();
 
@@ -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:

package/src/toolbar/MRT_ToolbarAlertBanner.tsx

@@ -4,8 +4,8 @@ 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 { type MRT_TableInstance } from '../types';
 import { parseFromValuesOrFunc } from '../column.utils';
+import { type MRT_TableInstance } from '../types';
 
 interface Props<TData extends Record<string, any>> {
   stackAlertBanner: boolean;
@@ -22,8 +22,8 @@ export const MRT_ToolbarAlertBanner = <TData extends Record<string, any>>({
     getState,
     options: {
       localization,
-      muiToolbarAlertBannerProps,
       muiToolbarAlertBannerChipProps,
+      muiToolbarAlertBannerProps,
       positionToolbarAlertBanner,
       rowCount,
     },
@@ -81,13 +81,13 @@ 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%',

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>