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

package/src/table/MRT_TablePaper.tsx

@@ -3,12 +3,15 @@ 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';
 
-interface Props {
-  table: MRT_TableInstance;
+interface Props<TData extends Record<string, any>> {
+  table: MRT_TableInstance<TData>;
 }
 
-export const MRT_TablePaper = ({ table }: Props) => {
+export const MRT_TablePaper = <TData extends Record<string, any>>({
+  table,
+}: Props<TData>) => {
   const {
     getState,
     options: {
@@ -22,10 +25,7 @@ export const MRT_TablePaper = ({ table }: Props) => {
   } = table;
   const { isFullScreen } = getState();
 
-  const tablePaperProps =
-    muiTablePaperProps instanceof Function
-      ? muiTablePaperProps({ table })
-      : muiTablePaperProps;
+  const tablePaperProps = parseFromValuesOrFunc(muiTablePaperProps, { table });
 
   return (
     <Paper
@@ -39,34 +39,39 @@ export const MRT_TablePaper = ({ table }: Props) => {
         }
       }}
       sx={(theme) => ({
-        transition: 'all 150ms ease-in-out',
-        ...(tablePaperProps?.sx instanceof Function
-          ? tablePaperProps?.sx(theme)
-          : (tablePaperProps?.sx as any)),
+        overflow: 'hidden',
+        transition: 'all 100ms ease-in-out',
+        ...(parseFromValuesOrFunc(tablePaperProps?.sx, theme) as any),
       })}
       style={{
         ...tablePaperProps?.style,
         ...(isFullScreen
           ? {
+              bottom: 0,
               height: '100vh',
+              left: 0,
               margin: 0,
               maxHeight: '100vh',
               maxWidth: '100vw',
               padding: 0,
+              position: 'fixed',
+              right: 0,
+              top: 0,
               width: '100vw',
+              zIndex: 10,
             }
           : {}),
       }}
     >
       {enableTopToolbar &&
-        (renderTopToolbar instanceof Function
-          ? renderTopToolbar({ table })
-          : renderTopToolbar ?? <MRT_TopToolbar table={table} />)}
+        (parseFromValuesOrFunc(renderTopToolbar, { table }) ?? (
+          <MRT_TopToolbar table={table} />
+        ))}
       <MRT_TableContainer table={table} />
       {enableBottomToolbar &&
-        (renderBottomToolbar instanceof Function
-          ? renderBottomToolbar({ table })
-          : renderBottomToolbar ?? <MRT_BottomToolbar table={table} />)}
+        (parseFromValuesOrFunc(renderBottomToolbar, { table }) ?? (
+          <MRT_BottomToolbar table={table} />
+        ))}
     </Paper>
   );
 };

package/src/table/index.ts

@@ -0,0 +1,4 @@
+export * from '../modals/MRT_EditRowModal';
+export * from './MRT_Table';
+export * from './MRT_TableContainer';
+export * from './MRT_TablePaper';

package/src/toolbar/MRT_BottomToolbar.tsx

@@ -8,12 +8,13 @@ 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';
 
-interface Props<TData extends Record<string, any> = {}> {
+interface Props<TData extends Record<string, any>> {
   table: MRT_TableInstance<TData>;
 }
 
-export const MRT_BottomToolbar = <TData extends Record<string, any> = {}>({
+export const MRT_BottomToolbar = <TData extends Record<string, any>>({
   table,
 }: Props<TData>) => {
   const {
@@ -32,10 +33,7 @@ export const MRT_BottomToolbar = <TData extends Record<string, any> = {}>({
 
   const isMobile = useMediaQuery('(max-width:720px)');
 
-  const toolbarProps =
-    muiBottomToolbarProps instanceof Function
-      ? muiBottomToolbarProps({ table })
-      : muiBottomToolbarProps;
+  const toolbarProps = parseFromValuesOrFunc(muiBottomToolbarProps, { table });
 
   const stackAlertBanner = isMobile || !!renderBottomToolbarCustomActions;
 
@@ -52,22 +50,18 @@ export const MRT_BottomToolbar = <TData extends Record<string, any> = {}>({
           }
         }
       }}
-      sx={(theme) =>
-        ({
-          ...commonToolbarStyles({ theme }),
-          bottom: isFullScreen ? '0' : undefined,
-          boxShadow: `0 1px 2px -1px ${alpha(
-            theme.palette.common.black,
-            0.1,
-          )} inset`,
-          left: 0,
-          position: isFullScreen ? 'fixed' : 'relative',
-          right: 0,
-          ...(toolbarProps?.sx instanceof Function
-            ? toolbarProps.sx(theme)
-            : (toolbarProps?.sx as any)),
-        } as any)
-      }
+      sx={(theme) => ({
+        ...commonToolbarStyles({ theme }),
+        bottom: isFullScreen ? '0' : undefined,
+        boxShadow: `0 1px 2px -1px ${alpha(
+          theme.palette.common.black,
+          0.1,
+        )} inset`,
+        left: 0,
+        position: isFullScreen ? 'fixed' : 'relative',
+        right: 0,
+        ...(parseFromValuesOrFunc(toolbarProps?.sx, theme) as any),
+      })}
     >
       <MRT_LinearProgressBar isTopToolbar={false} table={table} />
       {positionToolbarAlertBanner === 'bottom' && (

package/src/toolbar/MRT_LinearProgressBar.tsx

@@ -1,13 +1,14 @@
 import Collapse from '@mui/material/Collapse';
 import LinearProgress from '@mui/material/LinearProgress';
 import { type MRT_TableInstance } from '../types';
+import { parseFromValuesOrFunc } from '../column.utils';
 
-interface Props<TData extends Record<string, any> = {}> {
+interface Props<TData extends Record<string, any>> {
   isTopToolbar: boolean;
   table: MRT_TableInstance<TData>;
 }
 
-export const MRT_LinearProgressBar = <TData extends Record<string, any> = {}>({
+export const MRT_LinearProgressBar = <TData extends Record<string, any>>({
   isTopToolbar,
   table,
 }: Props<TData>) => {
@@ -17,10 +18,10 @@ export const MRT_LinearProgressBar = <TData extends Record<string, any> = {}>({
   } = table;
   const { isLoading, showProgressBars } = getState();
 
-  const linearProgressProps =
-    muiLinearProgressProps instanceof Function
-      ? muiLinearProgressProps({ isTopToolbar, table })
-      : muiLinearProgressProps;
+  const linearProgressProps = parseFromValuesOrFunc(muiLinearProgressProps, {
+    isTopToolbar,
+    table,
+  });
 
   return (
     <Collapse

package/src/toolbar/MRT_TablePagination.tsx

@@ -1,13 +1,14 @@
 import { type ChangeEvent } from 'react';
 import TablePagination from '@mui/material/TablePagination';
 import { type MRT_TableInstance } from '../types';
+import { parseFromValuesOrFunc } from '../column.utils';
 
-interface Props<TData extends Record<string, any> = {}> {
+interface Props<TData extends Record<string, any>> {
   position?: 'top' | 'bottom';
   table: MRT_TableInstance<TData>;
 }
 
-export const MRT_TablePagination = <TData extends Record<string, any> = {}>({
+export const MRT_TablePagination = <TData extends Record<string, any>>({
   table,
   position = 'bottom',
 }: Props<TData>) => {
@@ -31,10 +32,9 @@ export const MRT_TablePagination = <TData extends Record<string, any> = {}>({
   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);
@@ -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

@@ -5,13 +5,14 @@ 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';
 
-interface Props<TData extends Record<string, any> = {}> {
+interface Props<TData extends Record<string, any>> {
   stackAlertBanner: boolean;
   table: MRT_TableInstance<TData>;
 }
 
-export const MRT_ToolbarAlertBanner = <TData extends Record<string, any> = {}>({
+export const MRT_ToolbarAlertBanner = <TData extends Record<string, any>>({
   stackAlertBanner,
   table,
 }: Props<TData>) => {
@@ -29,15 +30,13 @@ export const MRT_ToolbarAlertBanner = <TData extends Record<string, any> = {}>({
   } = 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
@@ -93,9 +92,7 @@ export const MRT_ToolbarAlertBanner = <TData extends Record<string, any> = {}>({
           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

@@ -5,11 +5,11 @@ import Fade from '@mui/material/Fade';
 import Typography from '@mui/material/Typography';
 import { type MRT_TableInstance } from '../types';
 
-interface Props<TData extends Record<string, any> = {}> {
+interface Props<TData extends Record<string, any>> {
   table: MRT_TableInstance<TData>;
 }
 
-export const MRT_ToolbarDropZone = <TData extends Record<string, any> = {}>({
+export const MRT_ToolbarDropZone = <TData extends Record<string, any>>({
   table,
 }: Props<TData>) => {
   const {

package/src/toolbar/MRT_ToolbarInternalButtons.tsx

@@ -1,18 +1,16 @@
 import Box from '@mui/material/Box';
-import { MRT_FullScreenToggleButton } from '../buttons/MRT_FullScreenToggleButton';
+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_ToggleGlobalFilterButton } from '../buttons/MRT_ToggleGlobalFilterButton';
 import { type MRT_TableInstance } from '../types';
 
-interface Props<TData extends Record<string, any> = {}> {
+interface Props<TData extends Record<string, any>> {
   table: MRT_TableInstance<TData>;
 }
 
-export const MRT_ToolbarInternalButtons = <
-  TData extends Record<string, any> = {},
->({
+export const MRT_ToolbarInternalButtons = <TData extends Record<string, any>>({
   table,
 }: Props<TData>) => {
   const {
@@ -24,7 +22,7 @@ export const MRT_ToolbarInternalButtons = <
       enableFullScreenToggle,
       enableGlobalFilter,
       enableHiding,
-      enablePinning,
+      enableColumnPinning,
       initialState,
       renderToolbarInternalActions,
     },
@@ -50,14 +48,14 @@ export const MRT_ToolbarInternalButtons = <
           {enableFilters && enableColumnFilters && (
             <MRT_ToggleFiltersButton table={table} />
           )}
-          {(enableHiding || enableColumnOrdering || enablePinning) && (
+          {(enableHiding || enableColumnOrdering || enableColumnPinning) && (
             <MRT_ShowHideColumnsButton table={table} />
           )}
           {enableDensityToggle && (
             <MRT_ToggleDensePaddingButton table={table} />
           )}
           {enableFullScreenToggle && (
-            <MRT_FullScreenToggleButton table={table} />
+            <MRT_ToggleFullScreenButton table={table} />
           )}
         </>
       )}

package/src/toolbar/MRT_TopToolbar.tsx

@@ -10,6 +10,7 @@ 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 { parseFromValuesOrFunc } from '../column.utils';
 
 export const commonToolbarStyles = ({ theme }: { theme: Theme }) => ({
   alignItems: 'flex-start',
@@ -24,11 +25,11 @@ export const commonToolbarStyles = ({ theme }: { theme: Theme }) => ({
   zIndex: 1,
 });
 
-interface Props<TData extends Record<string, any> = {}> {
+interface Props<TData extends Record<string, any>> {
   table: MRT_TableInstance<TData>;
 }
 
-export const MRT_TopToolbar = <TData extends Record<string, any> = {}>({
+export const MRT_TopToolbar = <TData extends Record<string, any>>({
   table,
 }: Props<TData>) => {
   const {
@@ -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

package/src/toolbar/index.ts

@@ -0,0 +1,7 @@
+export * from './MRT_BottomToolbar';
+export * from './MRT_LinearProgressBar';
+export * from './MRT_TablePagination';
+export * from './MRT_ToolbarAlertBanner';
+export * from './MRT_ToolbarDropZone';
+export * from './MRT_ToolbarInternalButtons';
+export * from './MRT_TopToolbar';