material-react-table 0.9.5 → 0.10.0

package/src/table/MRT_TablePaper.tsx

@@ -5,27 +5,25 @@ import { HTML5Backend } from 'react-dnd-html5-backend';
 import { MRT_ToolbarTop } from '../toolbar/MRT_ToolbarTop';
 import { MRT_ToolbarBottom } from '../toolbar/MRT_ToolbarBottom';
 import { MRT_TableContainer } from './MRT_TableContainer';
-import { MRT_TableInstance } from '..';
+import type { MRT_TableInstance } from '..';
 
 interface Props {
-  tableInstance: MRT_TableInstance;
+  instance: MRT_TableInstance;
 }
 
-export const MRT_TablePaper: FC<Props> = ({ tableInstance }) => {
+export const MRT_TablePaper: FC<Props> = ({ instance }) => {
   const {
     getState,
     options: { enableToolbarBottom, enableToolbarTop, muiTablePaperProps },
-  } = tableInstance;
+  } = instance;
 
   const { isFullScreen } = getState();
 
   useEffect(() => {
     if (typeof window !== 'undefined') {
       if (isFullScreen) {
-        document.body.style.overflow = 'hidden';
         document.body.style.height = '100vh';
       } else {
-        document.body.style.overflow = 'auto';
         document.body.style.height = 'auto';
       }
     }
@@ -33,7 +31,7 @@ export const MRT_TablePaper: FC<Props> = ({ tableInstance }) => {
 
   const tablePaperProps =
     muiTablePaperProps instanceof Function
-      ? muiTablePaperProps({ tableInstance })
+      ? muiTablePaperProps({ instance })
       : muiTablePaperProps;
 
   return (
@@ -44,8 +42,6 @@ export const MRT_TablePaper: FC<Props> = ({ tableInstance }) => {
         sx={{
           transition: 'all 0.2s ease-in-out',
           ...tablePaperProps?.sx,
-        }}
-        style={{
           height: isFullScreen ? '100vh' : undefined,
           margin: isFullScreen ? '0' : undefined,
           maxHeight: isFullScreen ? '100vh' : undefined,
@@ -54,11 +50,9 @@ export const MRT_TablePaper: FC<Props> = ({ tableInstance }) => {
           width: isFullScreen ? '100vw' : undefined,
         }}
       >
-        {enableToolbarTop && <MRT_ToolbarTop tableInstance={tableInstance} />}
-        <MRT_TableContainer tableInstance={tableInstance} />
-        {enableToolbarBottom && (
-          <MRT_ToolbarBottom tableInstance={tableInstance} />
-        )}
+        {enableToolbarTop && <MRT_ToolbarTop instance={instance} />}
+        <MRT_TableContainer instance={instance} />
+        {enableToolbarBottom && <MRT_ToolbarBottom instance={instance} />}
       </Paper>
     </DndProvider>
   );

package/src/table/MRT_TableRoot.tsx

@@ -18,6 +18,7 @@ import {
   MRT_Cell,
   MRT_ColumnDef,
   MRT_FilterFn,
+  MRT_FILTER_OPTION,
   MRT_Row,
   MRT_TableInstance,
   MRT_TableState,
@@ -35,7 +36,6 @@ import {
   getAllLeafColumnDefs,
 } from '../utils';
 import { defaultFilterFNs } from '../filtersFNs';
-import { MRT_FILTER_OPTION } from '../enums';
 import { Box, Dialog, Grow } from '@mui/material';
 
 export const MRT_TableRoot = <D extends Record<string, any> = {}>(
@@ -124,16 +124,14 @@ export const MRT_TableRoot = <D extends Record<string, any> = {}>(
         [c.id as string]:
           c.filterFn ??
           initialState?.currentFilterFns?.[c.id] ??
-          (!!c.filterSelectOptions?.length
-            ? MRT_FILTER_OPTION.EQUALS
-            : MRT_FILTER_OPTION.FUZZY),
+          (!!c.filterSelectOptions?.length ? 'equals' : 'fuzzy'),
       })),
     ),
   );
 
   const [currentGlobalFilterFn, setCurrentGlobalFilterFn] = useState<
     MRT_FILTER_OPTION | FilterFn<ReactTableGenerics> | string | number | symbol
-  >(props.globalFilterFn ?? MRT_FILTER_OPTION.FUZZY);
+  >(props.globalFilterFn ?? 'fuzzy');
 
   const table = useMemo(
     () =>
@@ -163,26 +161,23 @@ export const MRT_TableRoot = <D extends Record<string, any> = {}>(
             Cell: ({ cell }) => (
               <MRT_ToggleRowActionMenuButton
                 row={cell.row as any}
-                tableInstance={tableInstance}
+                instance={instance}
               />
             ),
             header: props.localization?.actions,
             id: 'mrt-row-actions',
             muiTableBodyCellProps: props.muiTableBodyCellProps,
             muiTableHeadCellProps: props.muiTableHeadCellProps,
-            size: 60,
+            size: 70,
           }),
         showExpandColumn &&
           createDisplayColumn(table, {
             Cell: ({ cell }) => (
-              <MRT_ExpandButton
-                row={cell.row as any}
-                tableInstance={tableInstance}
-              />
+              <MRT_ExpandButton row={cell.row as any} instance={instance} />
             ),
             Header: () =>
               props.enableExpandAll ? (
-                <MRT_ExpandAllButton tableInstance={tableInstance} />
+                <MRT_ExpandAllButton instance={instance} />
               ) : null,
             header: props.localization?.expand,
             id: 'mrt-expand',
@@ -193,14 +188,11 @@ export const MRT_TableRoot = <D extends Record<string, any> = {}>(
         props.enableRowSelection &&
           createDisplayColumn(table, {
             Cell: ({ cell }) => (
-              <MRT_SelectCheckbox
-                row={cell.row as any}
-                tableInstance={tableInstance}
-              />
+              <MRT_SelectCheckbox row={cell.row as any} instance={instance} />
             ),
             Header: () =>
               props.enableSelectAll ? (
-                <MRT_SelectCheckbox selectAll tableInstance={tableInstance} />
+                <MRT_SelectCheckbox selectAll instance={instance} />
               ) : null,
             header: props.localization?.select,
             id: 'mrt-select',
@@ -265,7 +257,7 @@ export const MRT_TableRoot = <D extends Record<string, any> = {}>(
   );
 
   //@ts-ignore
-  const tableInstance = {
+  const instance = {
     //@ts-ignore
     ...useTableInstance(table, {
       ...props,
@@ -286,14 +278,17 @@ export const MRT_TableRoot = <D extends Record<string, any> = {}>(
         ...props.state,
       } as TableState,
     }),
-    setCurrentEditingCell,
-    setCurrentEditingRow,
-    setCurrentFilterFns,
-    setCurrentGlobalFilterFn,
-    setIsDensePadding,
-    setIsFullScreen,
-    setShowFilters,
-    setShowGlobalFilter,
+    setCurrentEditingCell:
+      props.onCurrentEditingCellChange ?? setCurrentEditingCell,
+    setCurrentEditingRow:
+      props.onCurrentEditingRowChange ?? setCurrentEditingRow,
+    setCurrentFilterFns: props.onCurrentFilterFnsChange ?? setCurrentFilterFns,
+    setCurrentGlobalFilterFn:
+      props.onCurrentGlobalFilterFnChange ?? setCurrentGlobalFilterFn,
+    setIsDensePadding: props.onIsDensePaddingChange ?? setIsDensePadding,
+    setIsFullScreen: props.onIsFullScreenChange ?? setIsFullScreen,
+    setShowFilters: props.onShowFiltersChange ?? setShowFilters,
+    setShowGlobalFilter: props.onShowGlobalFilterChange ?? setShowGlobalFilter,
   } as MRT_TableInstance;
 
   useEffect(() => {
@@ -308,7 +303,7 @@ export const MRT_TableRoot = <D extends Record<string, any> = {}>(
     }
     const itemArgs: [string, string] = [
       `mrt-${tableId}-table-state`,
-      JSON.stringify(tableInstance.getState()),
+      JSON.stringify(instance.getState()),
     ];
     if (props.persistentStateMode === 'localStorage') {
       localStorage.setItem(...itemArgs);
@@ -319,7 +314,7 @@ export const MRT_TableRoot = <D extends Record<string, any> = {}>(
     props.enablePersistentState,
     props.tableId,
     props.persistentStateMode,
-    tableInstance,
+    instance,
   ]);
 
   return (
@@ -334,9 +329,9 @@ export const MRT_TableRoot = <D extends Record<string, any> = {}>(
         open={isFullScreen}
         transitionDuration={400}
       >
-        <MRT_TablePaper tableInstance={tableInstance} />
+        <MRT_TablePaper instance={instance} />
       </Dialog>
-      {!isFullScreen && <MRT_TablePaper tableInstance={tableInstance} />}
+      {!isFullScreen && <MRT_TablePaper instance={instance} />}
     </>
   );
 };

package/src/toolbar/MRT_LinearProgressBar.tsx

@@ -4,23 +4,20 @@ import { MRT_TableInstance } from '..';
 
 interface Props {
   alignTo: 'bottom' | 'top';
-  tableInstance: MRT_TableInstance;
+  instance: MRT_TableInstance;
 }
 
-export const MRT_LinearProgressBar: FC<Props> = ({
-  alignTo,
-  tableInstance,
-}) => {
+export const MRT_LinearProgressBar: FC<Props> = ({ alignTo, instance }) => {
   const {
     options: { muiLinearProgressProps },
     getState,
-  } = tableInstance;
+  } = instance;
 
   const { isLoading, showProgressBars } = getState();
 
   const linearProgressProps =
     muiLinearProgressProps instanceof Function
-      ? muiLinearProgressProps({ tableInstance })
+      ? muiLinearProgressProps({ instance })
       : muiLinearProgressProps;
 
   return (

package/src/toolbar/MRT_TablePagination.tsx

@@ -3,17 +3,17 @@ import { TablePagination } from '@mui/material';
 import { MRT_TableInstance } from '..';
 
 interface Props {
-  tableInstance: MRT_TableInstance;
+  instance: MRT_TableInstance;
 }
 
-export const MRT_TablePagination: FC<Props> = ({ tableInstance }) => {
+export const MRT_TablePagination: FC<Props> = ({ instance }) => {
   const {
     getPrePaginationRowModel,
     getState,
     setPageIndex,
     setPageSize,
     options: { muiTablePaginationProps },
-  } = tableInstance;
+  } = instance;
 
   const {
     pagination: { pageSize = 10, pageIndex = 0 },
@@ -21,7 +21,7 @@ export const MRT_TablePagination: FC<Props> = ({ tableInstance }) => {
 
   const tablePaginationProps =
     muiTablePaginationProps instanceof Function
-      ? muiTablePaginationProps({ tableInstance })
+      ? muiTablePaginationProps({ instance })
       : muiTablePaginationProps;
 
   const handleChangeRowsPerPage = (event: ChangeEvent<HTMLInputElement>) => {

package/src/toolbar/MRT_ToolbarAlertBanner.tsx

@@ -4,25 +4,25 @@ import { MRT_TableInstance } from '..';
 
 interface Props {
   stackAlertBanner?: boolean;
-  tableInstance: MRT_TableInstance;
+  instance: MRT_TableInstance;
 }
 
 export const MRT_ToolbarAlertBanner: FC<Props> = ({
   stackAlertBanner,
-  tableInstance,
+  instance,
 }) => {
   const {
     getPrePaginationRowModel,
     getSelectedRowModel,
     getState,
     options: { localization, muiTableToolbarAlertBannerProps },
-  } = tableInstance;
+  } = instance;
 
   const { grouping } = getState();
 
   const alertProps =
     muiTableToolbarAlertBannerProps instanceof Function
-      ? muiTableToolbarAlertBannerProps({ tableInstance })
+      ? muiTableToolbarAlertBannerProps({ instance })
       : muiTableToolbarAlertBannerProps;
 
   const selectMessage =
@@ -47,10 +47,8 @@ export const MRT_ToolbarAlertBanner: FC<Props> = ({
             {index > 0 ? localization.thenBy : ''}
             <Chip
               color="secondary"
-              label={tableInstance.getColumn(columnId).columnDef.header}
-              onDelete={() =>
-                tableInstance.getColumn(columnId).toggleGrouping()
-              }
+              label={instance.getColumn(columnId).columnDef.header}
+              onDelete={() => instance.getColumn(columnId).toggleGrouping()}
             />
           </Fragment>
         ))}

package/src/toolbar/MRT_ToolbarBottom.tsx

@@ -8,10 +8,10 @@ import { commonToolbarStyles } from './MRT_ToolbarTop';
 import { MRT_TableInstance } from '..';
 
 interface Props {
-  tableInstance: MRT_TableInstance;
+  instance: MRT_TableInstance;
 }
 
-export const MRT_ToolbarBottom: FC<Props> = ({ tableInstance }) => {
+export const MRT_ToolbarBottom: FC<Props> = ({ instance }) => {
   const {
     getState,
     options: {
@@ -24,7 +24,7 @@ export const MRT_ToolbarBottom: FC<Props> = ({ tableInstance }) => {
       positionToolbarAlertBanner,
       renderToolbarCustomActions,
     },
-  } = tableInstance;
+  } = instance;
 
   const { isFullScreen } = getState();
 
@@ -32,7 +32,7 @@ export const MRT_ToolbarBottom: FC<Props> = ({ tableInstance }) => {
 
   const toolbarProps =
     muiTableToolbarBottomProps instanceof Function
-      ? muiTableToolbarBottomProps({ tableInstance })
+      ? muiTableToolbarBottomProps({ instance })
       : muiTableToolbarBottomProps;
 
   const stackAlertBanner =
@@ -58,9 +58,9 @@ export const MRT_ToolbarBottom: FC<Props> = ({ tableInstance }) => {
         } as any)
       }
     >
-      <MRT_LinearProgressBar alignTo="top" tableInstance={tableInstance} />
+      <MRT_LinearProgressBar alignTo="top" instance={instance} />
       {positionToolbarAlertBanner === 'bottom' && (
-        <MRT_ToolbarAlertBanner tableInstance={tableInstance} />
+        <MRT_ToolbarAlertBanner instance={instance} />
       )}
       <Box
         sx={{
@@ -73,13 +73,13 @@ export const MRT_ToolbarBottom: FC<Props> = ({ tableInstance }) => {
         }}
       >
         {enableToolbarInternalActions && positionToolbarActions === 'bottom' ? (
-          <MRT_ToolbarInternalButtons tableInstance={tableInstance} />
+          <MRT_ToolbarInternalButtons instance={instance} />
         ) : (
           <span />
         )}
         {enablePagination &&
           ['bottom', 'both'].includes(positionPagination ?? '') && (
-            <MRT_TablePagination tableInstance={tableInstance} />
+            <MRT_TablePagination instance={instance} />
           )}
       </Box>
     </Toolbar>

package/src/toolbar/MRT_ToolbarInternalButtons.tsx

@@ -9,10 +9,10 @@ import { MRT_TableInstance } from '..';
 import { MRT_SearchTextField } from '../inputs/MRT_SearchTextField';
 
 interface Props {
-  tableInstance: MRT_TableInstance;
+  instance: MRT_TableInstance;
 }
 
-export const MRT_ToolbarInternalButtons: FC<Props> = ({ tableInstance }) => {
+export const MRT_ToolbarInternalButtons: FC<Props> = ({ instance }) => {
   const {
     options: {
       enableColumnFilters,
@@ -24,7 +24,7 @@ export const MRT_ToolbarInternalButtons: FC<Props> = ({ tableInstance }) => {
       positionGlobalFilter,
       renderToolbarInternalActions,
     },
-  } = tableInstance;
+  } = instance;
 
   return (
     <Box
@@ -40,26 +40,24 @@ export const MRT_ToolbarInternalButtons: FC<Props> = ({ tableInstance }) => {
         MRT_ToggleDensePaddingButton,
         MRT_ToggleFiltersButton,
         MRT_ToggleGlobalFilterButton,
-        tableInstance,
+        instance,
       }) ?? (
         <>
           {enableGlobalFilter && positionGlobalFilter === 'right' && (
-            <MRT_SearchTextField tableInstance={tableInstance} />
+            <MRT_SearchTextField instance={instance} />
           )}
           {enableFilters && enableGlobalFilter && (
-            <MRT_ToggleGlobalFilterButton tableInstance={tableInstance} />
+            <MRT_ToggleGlobalFilterButton instance={instance} />
           )}
           {enableFilters && enableColumnFilters && (
-            <MRT_ToggleFiltersButton tableInstance={tableInstance} />
-          )}
-          {enableHiding && (
-            <MRT_ShowHideColumnsButton tableInstance={tableInstance} />
+            <MRT_ToggleFiltersButton instance={instance} />
           )}
+          {enableHiding && <MRT_ShowHideColumnsButton instance={instance} />}
           {enableDensePaddingToggle && (
-            <MRT_ToggleDensePaddingButton tableInstance={tableInstance} />
+            <MRT_ToggleDensePaddingButton instance={instance} />
           )}
           {enableFullScreenToggle && (
-            <MRT_FullScreenToggleButton tableInstance={tableInstance} />
+            <MRT_FullScreenToggleButton instance={instance} />
           )}
         </>
       )}

package/src/toolbar/MRT_ToolbarTop.tsx

@@ -20,10 +20,10 @@ export const commonToolbarStyles = ({ theme }: { theme: Theme }) => ({
 });
 
 interface Props {
-  tableInstance: MRT_TableInstance;
+  instance: MRT_TableInstance;
 }
 
-export const MRT_ToolbarTop: FC<Props> = ({ tableInstance }) => {
+export const MRT_ToolbarTop: FC<Props> = ({ instance }) => {
   const {
     getState,
     options: {
@@ -38,7 +38,7 @@ export const MRT_ToolbarTop: FC<Props> = ({ tableInstance }) => {
       positionToolbarAlertBanner,
       renderToolbarCustomActions,
     },
-  } = tableInstance;
+  } = instance;
 
   const { isFullScreen, showGlobalFilter } = getState();
 
@@ -46,7 +46,7 @@ export const MRT_ToolbarTop: FC<Props> = ({ tableInstance }) => {
 
   const toolbarProps =
     muiTableToolbarTopProps instanceof Function
-      ? muiTableToolbarTopProps({ tableInstance })
+      ? muiTableToolbarTopProps({ instance })
       : muiTableToolbarTopProps;
 
   const stackAlertBanner =
@@ -71,11 +71,12 @@ export const MRT_ToolbarTop: FC<Props> = ({ tableInstance }) => {
       {positionToolbarAlertBanner === 'top' && (
         <MRT_ToolbarAlertBanner
           stackAlertBanner={stackAlertBanner}
-          tableInstance={tableInstance}
+          instance={instance}
         />
       )}
       <Box
         sx={{
+          alignItems: 'flex-start',
           display: 'flex',
           justifyContent: 'space-between',
           p: '0.5rem',
@@ -86,20 +87,20 @@ export const MRT_ToolbarTop: FC<Props> = ({ tableInstance }) => {
         }}
       >
         {enableGlobalFilter && positionGlobalFilter === 'left' && (
-          <MRT_SearchTextField tableInstance={tableInstance} />
+          <MRT_SearchTextField instance={instance} />
         )}
-        {renderToolbarCustomActions?.({ tableInstance }) ?? <span />}
+        {renderToolbarCustomActions?.({ instance }) ?? <span />}
         {enableToolbarInternalActions && positionToolbarActions === 'top' && (
-          <MRT_ToolbarInternalButtons tableInstance={tableInstance} />
+          <MRT_ToolbarInternalButtons instance={instance} />
         )}
       </Box>
       <div>
         {enablePagination &&
           ['top', 'both'].includes(positionPagination ?? '') && (
-            <MRT_TablePagination tableInstance={tableInstance} />
+            <MRT_TablePagination instance={instance} />
           )}
       </div>
-      <MRT_LinearProgressBar alignTo="bottom" tableInstance={tableInstance} />
+      <MRT_LinearProgressBar alignTo="bottom" instance={instance} />
     </Toolbar>
   );
 };

package/src/utils.ts

@@ -5,7 +5,6 @@ import {
   Updater,
 } from '@tanstack/react-table';
 import { MRT_Column, MRT_ColumnDef, MRT_FilterFn } from '.';
-import { MRT_FILTER_OPTION } from './enums';
 import { defaultFilterFNs } from './filtersFNs';
 
 export const getAllLeafColumnDefs = (
@@ -49,7 +48,8 @@ export const createDataColumn = <D extends Record<string, any> = {}>(
     filterFn:
       currentFilterFns[column.id] instanceof Function
         ? currentFilterFns[column.id]
-        : defaultFilterFNs[currentFilterFns[column.id] as MRT_FILTER_OPTION],
+        : // @ts-ignore
+          defaultFilterFNs[currentFilterFns[column.id]],
     ...column,
   }) as any;
 

package/dist/enums.d.ts

@@ -1,13 +0,0 @@
-export declare enum MRT_FILTER_OPTION {
-    BETWEEN = "between",
-    CONTAINS = "contains",
-    EMPTY = "empty",
-    ENDS_WITH = "endsWith",
-    EQUALS = "equals",
-    FUZZY = "fuzzy",
-    GREATER_THAN = "greaterThan",
-    LESS_THAN = "lessThan",
-    NOT_EMPTY = "notEmpty",
-    NOT_EQUALS = "notEquals",
-    STARTS_WITH = "startsWith"
-}

package/src/enums.ts

@@ -1,13 +0,0 @@
-export enum MRT_FILTER_OPTION {
-  BETWEEN = 'between',
-  CONTAINS = 'contains',
-  EMPTY = 'empty',
-  ENDS_WITH = 'endsWith',
-  EQUALS = 'equals',
-  FUZZY = 'fuzzy',
-  GREATER_THAN = 'greaterThan',
-  LESS_THAN = 'lessThan',
-  NOT_EMPTY = 'notEmpty',
-  NOT_EQUALS = 'notEquals',
-  STARTS_WITH = 'startsWith',
-}