material-react-table 0.9.7 → 0.10.0

package/src/inputs/MRT_SearchTextField.tsx

@@ -17,10 +17,10 @@ import { MRT_FilterOptionMenu } from '../menus/MRT_FilterOptionMenu';
 import { MRT_TableInstance } from '..';
 
 interface Props {
-  tableInstance: MRT_TableInstance;
+  instance: MRT_TableInstance;
 }
 
-export const MRT_SearchTextField: FC<Props> = ({ tableInstance }) => {
+export const MRT_SearchTextField: FC<Props> = ({ instance }) => {
   const {
     getState,
     setGlobalFilter,
@@ -31,7 +31,7 @@ export const MRT_SearchTextField: FC<Props> = ({ tableInstance }) => {
       muiSearchTextFieldProps,
       onMrtGlobalFilterValueChange,
     },
-  } = tableInstance;
+  } = instance;
 
   const { globalFilter, showGlobalFilter } = getState();
 
@@ -41,7 +41,7 @@ export const MRT_SearchTextField: FC<Props> = ({ tableInstance }) => {
   const handleChange = useCallback(
     debounce((event: ChangeEvent<HTMLInputElement>) => {
       setGlobalFilter(event.target.value ?? undefined);
-      onMrtGlobalFilterValueChange?.({ event, tableInstance });
+      onMrtGlobalFilterValueChange?.({ event, instance });
     }, 200),
     [],
   );
@@ -57,7 +57,7 @@ export const MRT_SearchTextField: FC<Props> = ({ tableInstance }) => {
 
   const textFieldProps =
     muiSearchTextFieldProps instanceof Function
-      ? muiSearchTextFieldProps({ tableInstance })
+      ? muiSearchTextFieldProps({ instance })
       : muiSearchTextFieldProps;
 
   return (
@@ -108,7 +108,7 @@ export const MRT_SearchTextField: FC<Props> = ({ tableInstance }) => {
       <MRT_FilterOptionMenu
         anchorEl={anchorEl}
         setAnchorEl={setAnchorEl}
-        tableInstance={tableInstance}
+        instance={instance}
       />
     </Collapse>
   );

package/src/inputs/MRT_SelectCheckbox.tsx

@@ -5,14 +5,10 @@ import type { MRT_Row, MRT_TableInstance } from '..';
 interface Props {
   row?: MRT_Row;
   selectAll?: boolean;
-  tableInstance: MRT_TableInstance;
+  instance: MRT_TableInstance;
 }
 
-export const MRT_SelectCheckbox: FC<Props> = ({
-  row,
-  selectAll,
-  tableInstance,
-}) => {
+export const MRT_SelectCheckbox: FC<Props> = ({ row, selectAll, instance }) => {
   const {
     getRowModel,
     getSelectedRowModel,
@@ -24,21 +20,21 @@ export const MRT_SelectCheckbox: FC<Props> = ({
       onMrtSelectAllChange,
       selectAllMode,
     },
-  } = tableInstance;
+  } = instance;
 
   const { isDensePadding } = getState();
 
   const handleSelectChange = (event: ChangeEvent<HTMLInputElement>) => {
     if (selectAll) {
       if (selectAllMode === 'all') {
-        tableInstance.getToggleAllRowsSelectedHandler()(event as any);
+        instance.getToggleAllRowsSelectedHandler()(event as any);
       } else if (selectAllMode === 'page') {
-        tableInstance.getToggleAllPageRowsSelectedHandler()(event as any);
+        instance.getToggleAllPageRowsSelectedHandler()(event as any);
       }
       onMrtSelectAllChange?.({
         event,
         selectedRows: event.target.checked ? getRowModel().flatRows : [],
-        tableInstance,
+        instance,
       });
     } else if (row) {
       row?.getToggleSelectedHandler()(event as any);
@@ -50,14 +46,14 @@ export const MRT_SelectCheckbox: FC<Props> = ({
           : getSelectedRowModel().flatRows.filter(
               (selectedRow) => selectedRow.id !== row.id,
             ),
-        tableInstance,
+        instance,
       });
     }
   };
 
   const checkboxProps =
     muiSelectCheckboxProps instanceof Function
-      ? muiSelectCheckboxProps({ isSelectAll: !!selectAll, row, tableInstance })
+      ? muiSelectCheckboxProps({ isSelectAll: !!selectAll, row, instance })
       : muiSelectCheckboxProps;
 
   return (
@@ -71,13 +67,11 @@ export const MRT_SelectCheckbox: FC<Props> = ({
     >
       <Checkbox
         checked={
-          selectAll
-            ? tableInstance.getIsAllRowsSelected()
-            : row?.getIsSelected()
+          selectAll ? instance.getIsAllRowsSelected() : row?.getIsSelected()
         }
         indeterminate={
           selectAll
-            ? tableInstance.getIsSomeRowsSelected()
+            ? instance.getIsSomeRowsSelected()
             : row?.getIsSomeSelected()
         }
         inputProps={{

package/src/menus/MRT_ColumnActionMenu.tsx

@@ -20,14 +20,14 @@ interface Props {
   anchorEl: HTMLElement | null;
   header: MRT_Header;
   setAnchorEl: (anchorEl: HTMLElement | null) => void;
-  tableInstance: MRT_TableInstance;
+  instance: MRT_TableInstance;
 }
 
 export const MRT_ColumnActionMenu: FC<Props> = ({
   anchorEl,
   header,
   setAnchorEl,
-  tableInstance,
+  instance,
 }) => {
   const {
     getState,
@@ -56,7 +56,7 @@ export const MRT_ColumnActionMenu: FC<Props> = ({
       localization,
     },
     setShowFilters,
-  } = tableInstance;
+  } = instance;
 
   const { column } = header;
 
@@ -249,7 +249,7 @@ export const MRT_ColumnActionMenu: FC<Props> = ({
             key={2}
             onSelect={handleFilterByColumn}
             setAnchorEl={setFilterMenuAnchorEl}
-            tableInstance={tableInstance}
+            instance={instance}
           />,
         ]}
       {enableGrouping &&
@@ -377,7 +377,7 @@ export const MRT_ColumnActionMenu: FC<Props> = ({
           isSubMenu
           key={2}
           setAnchorEl={setShowHideColumnsMenuAnchorEl}
-          tableInstance={tableInstance}
+          instance={instance}
         />,
       ]}
     </Menu>

package/src/menus/MRT_FilterOptionMenu.tsx

@@ -1,7 +1,11 @@
 import React, { FC, useMemo } from 'react';
 import { Menu, MenuItem } from '@mui/material';
-import type { MRT_FilterFn, MRT_Header, MRT_TableInstance } from '..';
-import { MRT_FILTER_OPTION } from '../enums';
+import type {
+  MRT_FilterFn,
+  MRT_FILTER_OPTION,
+  MRT_Header,
+  MRT_TableInstance,
+} from '..';
 import {
   between,
   contains,
@@ -27,7 +31,7 @@ interface Props {
   header?: MRT_Header;
   onSelect?: () => void;
   setAnchorEl: (anchorEl: HTMLElement | null) => void;
-  tableInstance: MRT_TableInstance;
+  instance: MRT_TableInstance;
 }
 
 export const MRT_FilterOptionMenu: FC<Props> = ({
@@ -35,14 +39,14 @@ export const MRT_FilterOptionMenu: FC<Props> = ({
   header,
   onSelect,
   setAnchorEl,
-  tableInstance,
+  instance,
 }) => {
   const {
     getState,
     options: { enabledGlobalFilterOptions, localization },
     setCurrentFilterFns,
     setCurrentGlobalFilterFn,
-  } = tableInstance;
+  } = instance;
 
   const { isDensePadding, currentFilterFns, currentGlobalFilterFn } =
     getState();
@@ -51,76 +55,71 @@ export const MRT_FilterOptionMenu: FC<Props> = ({
 
   const { columnDef } = column ?? {};
 
-  const filterOptions: {
-    option: MRT_FILTER_OPTION;
-    label: string;
-    divider: boolean;
-    fn: Function;
-  }[] = useMemo(
+  const filterOptions = useMemo(
     () =>
       [
         {
-          option: MRT_FILTER_OPTION.FUZZY,
+          option: 'fuzzy',
           label: localization.filterFuzzy,
           divider: false,
           fn: fuzzy,
         },
         {
-          option: MRT_FILTER_OPTION.CONTAINS,
+          option: 'contains',
           label: localization.filterContains,
           divider: false,
           fn: contains,
         },
         {
-          option: MRT_FILTER_OPTION.STARTS_WITH,
+          option: 'startsWith',
           label: localization.filterStartsWith,
           divider: false,
           fn: startsWith,
         },
         {
-          option: MRT_FILTER_OPTION.ENDS_WITH,
+          option: 'endsWith',
           label: localization.filterEndsWith,
           divider: true,
           fn: endsWith,
         },
         {
-          option: MRT_FILTER_OPTION.EQUALS,
+          option: 'equals',
           label: localization.filterEquals,
           divider: false,
           fn: equals,
         },
         {
-          option: MRT_FILTER_OPTION.NOT_EQUALS,
+          option: 'notEquals',
           label: localization.filterNotEquals,
           divider: true,
           fn: notEquals,
         },
         {
-          option: MRT_FILTER_OPTION.BETWEEN,
+          option: 'between',
           label: localization.filterBetween,
           divider: false,
           fn: between,
         },
         {
-          option: MRT_FILTER_OPTION.GREATER_THAN,
+          option: 'greaterThan',
           label: localization.filterGreaterThan,
           divider: false,
           fn: greaterThan,
         },
         {
-          option: MRT_FILTER_OPTION.LESS_THAN,
+          option: 'lessThan',
           label: localization.filterLessThan,
           divider: true,
           fn: lessThan,
         },
         {
-          option: MRT_FILTER_OPTION.EMPTY,
+          option: 'empty',
           label: localization.filterEmpty,
           divider: false,
           fn: empty,
         },
         {
-          option: MRT_FILTER_OPTION.NOT_EMPTY,
+          option: 'notEmpty',
           label: localization.filterNotEmpty,
           divider: false,
           fn: notEmpty,
@@ -131,24 +130,25 @@ export const MRT_FilterOptionMenu: FC<Props> = ({
             columnDef.enabledColumnFilterOptions.includes(filterType.option)
           : (!enabledGlobalFilterOptions ||
               enabledGlobalFilterOptions.includes(filterType.option)) &&
-            [MRT_FILTER_OPTION.FUZZY, MRT_FILTER_OPTION.CONTAINS].includes(
-              filterType.option,
-            ),
-      ),
+            ['fuzzy', 'contains'].includes(filterType.option),
+      ) as Array<{
+        option: MRT_FILTER_OPTION;
+        label: string;
+        divider: boolean;
+        fn: Function;
+      }>,
     [],
   );
 
-  const handleSelectFilterType = (value: MRT_FILTER_OPTION) => {
+  const handleSelectFilterType = (value: string) => {
     if (header && column) {
       setCurrentFilterFns((prev: { [key: string]: MRT_FilterFn }) => ({
         ...prev,
         [header.id]: value,
       }));
-      if (
-        [MRT_FILTER_OPTION.EMPTY, MRT_FILTER_OPTION.NOT_EMPTY].includes(value)
-      ) {
+      if (['empty', 'notEmpty'].includes(value)) {
         column.setFilterValue(' ');
-      } else if (value === MRT_FILTER_OPTION.BETWEEN) {
+      } else if (value === 'between') {
         column.setFilterValue(['', '']);
       } else {
         column.setFilterValue('');
@@ -178,10 +178,10 @@ export const MRT_FilterOptionMenu: FC<Props> = ({
         <MenuItem
           divider={divider}
           key={index}
-          onClick={() => handleSelectFilterType(option)}
+          onClick={() => handleSelectFilterType(option as string)}
           selected={option === filterOption || fn === filterOption}
           sx={commonMenuItemStyles}
-          value={option}
+          value={option as string}
         >
           {label}
         </MenuItem>

package/src/menus/MRT_RowActionMenu.tsx

@@ -11,7 +11,7 @@ interface Props {
   handleEdit: () => void;
   row: MRT_Row;
   setAnchorEl: (anchorEl: HTMLElement | null) => void;
-  tableInstance: MRT_TableInstance;
+  instance: MRT_TableInstance;
 }
 
 export const MRT_RowActionMenu: FC<Props> = ({
@@ -19,7 +19,7 @@ export const MRT_RowActionMenu: FC<Props> = ({
   handleEdit,
   row,
   setAnchorEl,
-  tableInstance,
+  instance,
 }) => {
   const {
     getState,
@@ -29,7 +29,7 @@ export const MRT_RowActionMenu: FC<Props> = ({
       localization,
       renderRowActionMenuItems,
     },
-  } = tableInstance;
+  } = instance;
 
   const { isDensePadding } = getState();
 
@@ -54,7 +54,7 @@ export const MRT_RowActionMenu: FC<Props> = ({
       )}
       {renderRowActionMenuItems?.({
         row,
-        tableInstance,
+        instance,
         closeMenu: () => setAnchorEl(null),
       })}
     </Menu>

package/src/menus/MRT_ShowHideColumnsMenu.tsx

@@ -7,14 +7,14 @@ interface Props {
   anchorEl: HTMLElement | null;
   isSubMenu?: boolean;
   setAnchorEl: (anchorEl: HTMLElement | null) => void;
-  tableInstance: MRT_TableInstance;
+  instance: MRT_TableInstance;
 }
 
 export const MRT_ShowHideColumnsMenu: FC<Props> = ({
   anchorEl,
   isSubMenu,
   setAnchorEl,
-  tableInstance,
+  instance,
 }) => {
   const {
     getAllColumns,
@@ -28,7 +28,7 @@ export const MRT_ShowHideColumnsMenu: FC<Props> = ({
     getState,
     toggleAllColumnsVisible,
     options: { localization, enablePinning, enableColumnOrdering },
-  } = tableInstance;
+  } = instance;
 
   const { isDensePadding, columnOrder, columnPinning } = getState();
 
@@ -88,14 +88,14 @@ export const MRT_ShowHideColumnsMenu: FC<Props> = ({
           </Button>
         )}
         {!isSubMenu && enableColumnOrdering && (
-          <Button onClick={() => tableInstance.resetColumnOrder()}>
+          <Button onClick={() => instance.resetColumnOrder()}>
             {localization.resetOrder}
           </Button>
         )}
         {!isSubMenu && enablePinning && (
           <Button
             disabled={!getIsSomeColumnsPinned()}
-            onClick={() => tableInstance.resetColumnPinning(true)}
+            onClick={() => instance.resetColumnPinning(true)}
           >
             {localization.unpinAll}
           </Button>
@@ -114,7 +114,7 @@ export const MRT_ShowHideColumnsMenu: FC<Props> = ({
           column={column}
           isSubMenu={isSubMenu}
           key={`${index}-${column.id}`}
-          tableInstance={tableInstance}
+          instance={instance}
         />
       ))}
     </Menu>

package/src/menus/MRT_ShowHideColumnsMenuItems.tsx

@@ -10,20 +10,20 @@ interface Props {
   allColumns: MRT_Column[];
   column: MRT_Column;
   isSubMenu?: boolean;
-  tableInstance: MRT_TableInstance;
+  instance: MRT_TableInstance;
 }
 
 export const MRT_ShowHideColumnsMenuItems: FC<Props> = ({
   allColumns,
   column,
   isSubMenu,
-  tableInstance,
+  instance,
 }) => {
   const {
     getState,
     options: { enableColumnOrdering, onMrtToggleColumnVisibility },
     setColumnOrder,
-  } = tableInstance;
+  } = instance;
 
   const { columnOrder, columnVisibility } = getState();
 
@@ -59,7 +59,7 @@ export const MRT_ShowHideColumnsMenuItems: FC<Props> = ({
     onMrtToggleColumnVisibility?.({
       column,
       columnVisibility,
-      tableInstance,
+      instance,
     });
   };
 
@@ -89,14 +89,11 @@ export const MRT_ShowHideColumnsMenuItems: FC<Props> = ({
             !allColumns.some((col) => col.columnDefType === 'group') && (
               <MRT_GrabHandleButton
                 ref={dragRef as Ref<HTMLButtonElement>}
-                tableInstance={tableInstance}
+                instance={instance}
               />
             )}
           {!isSubMenu && column.getCanPin() && (
-            <MRT_ColumnPinningButtons
-              column={column}
-              tableInstance={tableInstance}
-            />
+            <MRT_ColumnPinningButtons column={column} instance={instance} />
           )}
           <FormControlLabel
             componentsProps={{
@@ -125,7 +122,7 @@ export const MRT_ShowHideColumnsMenuItems: FC<Props> = ({
           key={`${i}-${c.id}`}
           column={c}
           isSubMenu={isSubMenu}
-          tableInstance={tableInstance}
+          instance={instance}
         />
       ))}
     </>

package/src/table/MRT_Table.tsx

@@ -7,10 +7,10 @@ import { MRT_TableInstance } from '..';
 
 interface Props {
   tableContainerRef: RefObject<HTMLDivElement>;
-  tableInstance: MRT_TableInstance;
+  instance: MRT_TableInstance;
 }
 
-export const MRT_Table: FC<Props> = ({ tableContainerRef, tableInstance }) => {
+export const MRT_Table: FC<Props> = ({ tableContainerRef, instance }) => {
   const {
     getState,
     options: {
@@ -21,13 +21,13 @@ export const MRT_Table: FC<Props> = ({ tableContainerRef, tableInstance }) => {
       enableTableHead,
       muiTableProps,
     },
-  } = tableInstance;
+  } = instance;
 
   const { isFullScreen } = getState();
 
   const tableProps =
     muiTableProps instanceof Function
-      ? muiTableProps({ tableInstance })
+      ? muiTableProps({ instance })
       : muiTableProps;
 
   return (
@@ -42,12 +42,12 @@ export const MRT_Table: FC<Props> = ({ tableContainerRef, tableInstance }) => {
         ...tableProps?.sx,
       }}
     >
-      {enableTableHead && <MRT_TableHead tableInstance={tableInstance} />}
+      {enableTableHead && <MRT_TableHead instance={instance} />}
       <MRT_TableBody
         tableContainerRef={tableContainerRef}
-        tableInstance={tableInstance}
+        instance={instance}
       />
-      {enableTableFooter && <MRT_TableFooter tableInstance={tableInstance} />}
+      {enableTableFooter && <MRT_TableFooter instance={instance} />}
     </Table>
   );
 };

package/src/table/MRT_TableContainer.tsx

@@ -7,10 +7,10 @@ const useIsomorphicLayoutEffect =
   typeof window !== 'undefined' ? useLayoutEffect : useEffect;
 
 interface Props {
-  tableInstance: MRT_TableInstance;
+  instance: MRT_TableInstance;
 }
 
-export const MRT_TableContainer: FC<Props> = ({ tableInstance }) => {
+export const MRT_TableContainer: FC<Props> = ({ instance }) => {
   const {
     getState,
     options: {
@@ -19,7 +19,7 @@ export const MRT_TableContainer: FC<Props> = ({ tableInstance }) => {
       muiTableContainerProps,
       tableId,
     },
-  } = tableInstance;
+  } = instance;
 
   const { isFullScreen } = getState();
 
@@ -27,7 +27,7 @@ export const MRT_TableContainer: FC<Props> = ({ tableInstance }) => {
 
   const tableContainerProps =
     muiTableContainerProps instanceof Function
-      ? muiTableContainerProps({ tableInstance })
+      ? muiTableContainerProps({ instance })
       : muiTableContainerProps;
 
   useIsomorphicLayoutEffect(() => {
@@ -68,10 +68,7 @@ export const MRT_TableContainer: FC<Props> = ({ tableInstance }) => {
         ...tableContainerProps?.style,
       }}
     >
-      <MRT_Table
-        tableContainerRef={tableContainerRef}
-        tableInstance={tableInstance}
-      />
+      <MRT_Table tableContainerRef={tableContainerRef} instance={instance} />
     </TableContainer>
   );
 };

package/src/table/MRT_TablePaper.tsx

@@ -8,14 +8,14 @@ import { MRT_TableContainer } from './MRT_TableContainer';
 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();
 
@@ -31,7 +31,7 @@ export const MRT_TablePaper: FC<Props> = ({ tableInstance }) => {
 
   const tablePaperProps =
     muiTablePaperProps instanceof Function
-      ? muiTablePaperProps({ tableInstance })
+      ? muiTablePaperProps({ instance })
       : muiTablePaperProps;
 
   return (
@@ -50,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>
   );