material-react-table 0.9.7 → 0.10.0

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,7 +161,7 @@ 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,
@@ -175,14 +173,11 @@ export const MRT_TableRoot = <D extends Record<string, any> = {}>(
         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,
@@ -311,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);
@@ -322,7 +314,7 @@ export const MRT_TableRoot = <D extends Record<string, any> = {}>(
     props.enablePersistentState,
     props.tableId,
     props.persistentStateMode,
-    tableInstance,
+    instance,
   ]);
 
   return (
@@ -337,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,7 +71,7 @@ export const MRT_ToolbarTop: FC<Props> = ({ tableInstance }) => {
       {positionToolbarAlertBanner === 'top' && (
         <MRT_ToolbarAlertBanner
           stackAlertBanner={stackAlertBanner}
-          tableInstance={tableInstance}
+          instance={instance}
         />
       )}
       <Box
@@ -87,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',
-}