material-react-table 0.18.1 → 0.20.0

package/src/head/MRT_TableHeadCellResizeHandle.tsx

@@ -4,20 +4,18 @@ import { MRT_Header, MRT_TableInstance } from '..';
 
 interface Props {
   header: MRT_Header;
-  instance: MRT_TableInstance;
+  table: MRT_TableInstance;
 }
 
-export const MRT_TableHeadCellResizeHandle: FC<Props> = ({
-  header,
-  instance,
-}) => {
-  const { getState } = instance;
-
+export const MRT_TableHeadCellResizeHandle: FC<Props> = ({ header, table }) => {
+  const {
+    getState,
+    options: { columnResizeMode },
+  } = table;
   const { density, showFilters } = getState();
-
   const { column } = header;
-
-  const { columnDefType } = column;
+  const { columnDef } = column;
+  const { columnDefType } = columnDef;
 
   return (
     <Divider
@@ -46,7 +44,10 @@ export const MRT_TableHeadCellResizeHandle: FC<Props> = ({
       onTouchStart={header.getResizeHandler()}
       style={{
         transform: column.getIsResizing()
-          ? `translateX(${getState().columnSizingInfo.deltaOffset}px)`
+          ? `translateX(${
+              (getState().columnSizingInfo.deltaOffset ?? 0) /
+              (columnResizeMode === 'onChange' ? 16 : 1)
+            }px)`
           : 'none',
       }}
     />

package/src/head/MRT_TableHeadCellSortLabel.tsx

@@ -4,16 +4,14 @@ import { MRT_Header, MRT_TableInstance } from '..';
 
 interface Props {
   header: MRT_Header;
-  instance: MRT_TableInstance;
+  table: MRT_TableInstance;
 }
 
-export const MRT_TableHeadCellSortLabel: FC<Props> = ({ header, instance }) => {
+export const MRT_TableHeadCellSortLabel: FC<Props> = ({ header, table }) => {
   const {
     options: { localization },
-  } = instance;
-
+  } = table;
   const { column } = header;
-
   const { columnDef } = column;
 
   const sortTooltip = !!column.getIsSorted()

package/src/head/MRT_TableHeadRow.tsx

@@ -6,17 +6,17 @@ import type { MRT_Header, MRT_HeaderGroup, MRT_TableInstance } from '..';
 
 interface Props {
   headerGroup: MRT_HeaderGroup;
-  instance: MRT_TableInstance;
+  table: MRT_TableInstance;
 }
 
-export const MRT_TableHeadRow: FC<Props> = ({ headerGroup, instance }) => {
+export const MRT_TableHeadRow: FC<Props> = ({ headerGroup, table }) => {
   const {
     options: { enableColumnOrdering, enableGrouping, muiTableHeadRowProps },
-  } = instance;
+  } = table;
 
   const tableRowProps =
     muiTableHeadRowProps instanceof Function
-      ? muiTableHeadRowProps({ headerGroup, instance })
+      ? muiTableHeadRowProps({ headerGroup, table })
       : muiTableHeadRowProps;
 
   return (
@@ -33,13 +33,13 @@ export const MRT_TableHeadRow: FC<Props> = ({ headerGroup, instance }) => {
           <MRT_DraggableTableHeadCell
             header={header}
             key={header.id || index}
-            instance={instance}
+            table={table}
           />
         ) : (
           <MRT_TableHeadCell
             header={header}
             key={header.id || index}
-            instance={instance}
+            table={table}
           />
         ),
       )}

package/src/inputs/MRT_EditCellTextField.tsx

@@ -10,10 +10,10 @@ import type { MRT_Cell, MRT_Row, MRT_TableInstance } from '..';
 
 interface Props {
   cell: MRT_Cell;
-  instance: MRT_TableInstance;
+  table: MRT_TableInstance;
 }
 
-export const MRT_EditCellTextField: FC<Props> = ({ cell, instance }) => {
+export const MRT_EditCellTextField: FC<Props> = ({ cell, table }) => {
   const {
     getState,
     options: {
@@ -25,18 +25,16 @@ export const MRT_EditCellTextField: FC<Props> = ({ cell, instance }) => {
     },
     setCurrentEditingCell,
     setCurrentEditingRow,
-  } = instance;
-
-  const [value, setValue] = useState(cell.getValue());
-
+  } = table;
   const { column, row } = cell;
-
   const { columnDef } = column;
 
+  const [value, setValue] = useState(cell.getValue());
+
   const handleChange = (event: ChangeEvent<HTMLInputElement>) => {
     setValue(event.target.value);
-    columnDef.onCellEditChange?.({ event, cell, instance });
-    onCellEditChange?.({ event, cell, instance });
+    columnDef.onCellEditChange?.({ event, cell, table });
+    onCellEditChange?.({ event, cell, table });
   };
 
   const handleBlur = (event: FocusEvent<HTMLInputElement>) => {
@@ -46,20 +44,20 @@ export const MRT_EditCellTextField: FC<Props> = ({ cell, instance }) => {
       setCurrentEditingRow({ ...getState().currentEditingRow } as MRT_Row);
     }
     setCurrentEditingCell(null);
-    columnDef.onCellEditBlur?.({ event, cell, instance });
-    onCellEditBlur?.({ event, cell, instance });
+    columnDef.onCellEditBlur?.({ event, cell, table });
+    onCellEditBlur?.({ event, cell, table });
   };
 
   const mTableBodyCellEditTextFieldProps =
     muiTableBodyCellEditTextFieldProps instanceof Function
-      ? muiTableBodyCellEditTextFieldProps({ cell, instance })
+      ? muiTableBodyCellEditTextFieldProps({ cell, table })
       : muiTableBodyCellEditTextFieldProps;
 
   const mcTableBodyCellEditTextFieldProps =
     columnDef.muiTableBodyCellEditTextFieldProps instanceof Function
       ? columnDef.muiTableBodyCellEditTextFieldProps({
           cell,
-          instance,
+          table,
         })
       : columnDef.muiTableBodyCellEditTextFieldProps;
 
@@ -69,7 +67,7 @@ export const MRT_EditCellTextField: FC<Props> = ({ cell, instance }) => {
   };
 
   if (enableEditing && columnDef.enableEditing !== false && columnDef.Edit) {
-    return <>{columnDef.Edit?.({ cell, instance })}</>;
+    return <>{columnDef.Edit?.({ cell, table })}</>;
   }
 
   return (

package/src/inputs/MRT_FilterRangeFields.tsx

@@ -5,14 +5,14 @@ import { MRT_Header, MRT_TableInstance } from '..';
 
 interface Props {
   header: MRT_Header;
-  instance: MRT_TableInstance;
+  table: MRT_TableInstance;
 }
 
-export const MRT_FilterRangeFields: FC<Props> = ({ header, instance }) => {
+export const MRT_FilterRangeFields: FC<Props> = ({ header, table }) => {
   return (
     <Box sx={{ display: 'grid', gridTemplateColumns: '6fr 6fr', gap: '1rem' }}>
-      <MRT_FilterTextField header={header} inputIndex={0} instance={instance} />
-      <MRT_FilterTextField header={header} inputIndex={1} instance={instance} />
+      <MRT_FilterTextField header={header} inputIndex={0} table={table} />
+      <MRT_FilterTextField header={header} inputIndex={1} table={table} />
     </Box>
   );
 };

package/src/inputs/MRT_FilterTextField.tsx

@@ -21,13 +21,13 @@ import type { MRT_Header, MRT_TableInstance } from '..';
 interface Props {
   header: MRT_Header;
   inputIndex?: number;
-  instance: MRT_TableInstance;
+  table: MRT_TableInstance;
 }
 
 export const MRT_FilterTextField: FC<Props> = ({
   header,
   inputIndex,
-  instance,
+  table,
 }) => {
   const {
     getState,
@@ -40,26 +40,23 @@ export const MRT_FilterTextField: FC<Props> = ({
       tableId,
     },
     setCurrentFilterFns,
-  } = instance;
-
+  } = table;
   const { column } = header;
-
   const { columnDef } = column;
-
   const { currentFilterFns } = getState();
 
   const [anchorEl, setAnchorEl] = useState<null | HTMLElement>(null);
 
   const mTableHeadCellFilterTextFieldProps =
     muiTableHeadCellFilterTextFieldProps instanceof Function
-      ? muiTableHeadCellFilterTextFieldProps({ column, instance })
+      ? muiTableHeadCellFilterTextFieldProps({ column, table })
       : muiTableHeadCellFilterTextFieldProps;
 
   const mcTableHeadCellFilterTextFieldProps =
     columnDef.muiTableHeadCellFilterTextFieldProps instanceof Function
       ? columnDef.muiTableHeadCellFilterTextFieldProps({
           column,
-          instance,
+          table,
         })
       : columnDef.muiTableHeadCellFilterTextFieldProps;
 
@@ -121,21 +118,23 @@ export const MRT_FilterTextField: FC<Props> = ({
   };
 
   if (columnDef.Filter) {
-    return <>{columnDef.Filter?.({ header, instance })}</>;
+    return <>{columnDef.Filter?.({ header, table })}</>;
   }
 
   const filterId = `mrt-${tableId}-${header.id}-filter-text-field${
     inputIndex ?? ''
   }`;
-  const filterFn = currentFilterFns?.[header.id];
+  const currentFilterOption = currentFilterFns?.[header.id];
   const isSelectFilter = !!columnDef.filterSelectOptions;
-  const filterChipLabel =
-    !(filterFn instanceof Function) && ['empty', 'notEmpty'].includes(filterFn)
-      ? //@ts-ignore
-        localization[
-          `filter${filterFn.charAt(0).toUpperCase() + filterFn.slice(1)}`
-        ]
-      : '';
+  const filterChipLabel = ['empty', 'notEmpty'].includes(currentFilterOption)
+    ? //@ts-ignore
+      localization[
+        `filter${
+          currentFilterOption.charAt(0).toUpperCase() +
+          currentFilterOption.slice(1)
+        }`
+      ]
+    : '';
   const filterPlaceholder =
     inputIndex === undefined
       ? localization.filterByColumn?.replace(
@@ -175,26 +174,16 @@ export const MRT_FilterTextField: FC<Props> = ({
         helperText={
           showChangeModeButton ? (
             <label htmlFor={filterId}>
-              {filterFn instanceof Function
-                ? localization.filterMode.replace(
-                    '{filterType}',
-                    // @ts-ignore
-                    localization[
-                      `filter${
-                        filterFn.name.charAt(0).toUpperCase() +
-                        filterFn.name.slice(1)
-                      }`
-                    ] ?? '',
-                  ) ?? ''
-                : localization.filterMode.replace(
-                    '{filterType}',
-                    // @ts-ignore
-                    localization[
-                      `filter${
-                        filterFn.charAt(0).toUpperCase() + filterFn.slice(1)
-                      }`
-                    ],
-                  )}
+              {localization.filterMode.replace(
+                '{filterType}',
+                // @ts-ignore
+                localization[
+                  `filter${
+                    currentFilterOption.charAt(0).toUpperCase() +
+                    currentFilterOption.slice(1)
+                  }`
+                ],
+              )}
             </label>
           ) : null
         }
@@ -303,7 +292,7 @@ export const MRT_FilterTextField: FC<Props> = ({
         anchorEl={anchorEl}
         header={header}
         setAnchorEl={setAnchorEl}
-        instance={instance}
+        table={table}
       />
     </>
   );

package/src/inputs/MRT_GlobalFilterTextField.tsx

@@ -17,10 +17,10 @@ import { MRT_FilterOptionMenu } from '../menus/MRT_FilterOptionMenu';
 import { MRT_TableInstance } from '..';
 
 interface Props {
-  instance: MRT_TableInstance;
+  table: MRT_TableInstance;
 }
 
-export const MRT_GlobalFilterTextField: FC<Props> = ({ instance }) => {
+export const MRT_GlobalFilterTextField: FC<Props> = ({ table }) => {
   const {
     getState,
     setGlobalFilter,
@@ -31,8 +31,7 @@ export const MRT_GlobalFilterTextField: FC<Props> = ({ instance }) => {
       muiSearchTextFieldProps,
       tableId,
     },
-  } = instance;
-
+  } = table;
   const { globalFilter, showGlobalFilter } = getState();
 
   const [anchorEl, setAnchorEl] = useState<null | HTMLElement>(null);
@@ -61,7 +60,7 @@ export const MRT_GlobalFilterTextField: FC<Props> = ({ instance }) => {
 
   const textFieldProps =
     muiSearchTextFieldProps instanceof Function
-      ? muiSearchTextFieldProps({ instance })
+      ? muiSearchTextFieldProps({ table })
       : muiSearchTextFieldProps;
 
   return (
@@ -111,7 +110,7 @@ export const MRT_GlobalFilterTextField: FC<Props> = ({ instance }) => {
       <MRT_FilterOptionMenu
         anchorEl={anchorEl}
         setAnchorEl={setAnchorEl}
-        instance={instance}
+        table={table}
       />
     </Collapse>
   );

package/src/inputs/MRT_SelectCheckbox.tsx

@@ -5,10 +5,10 @@ import type { MRT_Row, MRT_TableInstance } from '..';
 interface Props {
   row?: MRT_Row;
   selectAll?: boolean;
-  instance: MRT_TableInstance;
+  table: MRT_TableInstance;
 }
 
-export const MRT_SelectCheckbox: FC<Props> = ({ row, selectAll, instance }) => {
+export const MRT_SelectCheckbox: FC<Props> = ({ row, selectAll, table }) => {
   const {
     getState,
     options: {
@@ -17,16 +17,15 @@ export const MRT_SelectCheckbox: FC<Props> = ({ row, selectAll, instance }) => {
       muiSelectAllCheckboxProps,
       selectAllMode,
     },
-  } = instance;
-
+  } = table;
   const { density } = getState();
 
   const handleSelectChange = (event: ChangeEvent<HTMLInputElement>) => {
     if (selectAll) {
       if (selectAllMode === 'all') {
-        instance.getToggleAllRowsSelectedHandler()(event as any);
+        table.getToggleAllRowsSelectedHandler()(event as any);
       } else if (selectAllMode === 'page') {
-        instance.getToggleAllPageRowsSelectedHandler()(event as any);
+        table.getToggleAllPageRowsSelectedHandler()(event as any);
       }
     } else if (row) {
       row?.getToggleSelectedHandler()(event as any);
@@ -35,10 +34,10 @@ export const MRT_SelectCheckbox: FC<Props> = ({ row, selectAll, instance }) => {
 
   const checkboxProps = selectAll
     ? muiSelectAllCheckboxProps instanceof Function
-      ? muiSelectAllCheckboxProps({ instance })
+      ? muiSelectAllCheckboxProps({ table })
       : muiSelectAllCheckboxProps
     : muiSelectCheckboxProps instanceof Function
-    ? muiSelectCheckboxProps({ row: row as MRT_Row, instance })
+    ? muiSelectCheckboxProps({ row: row as MRT_Row, table })
     : muiSelectCheckboxProps;
 
   return (
@@ -52,12 +51,10 @@ export const MRT_SelectCheckbox: FC<Props> = ({ row, selectAll, instance }) => {
     >
       <Checkbox
         checked={
-          selectAll ? instance.getIsAllRowsSelected() : row?.getIsSelected()
+          selectAll ? table.getIsAllRowsSelected() : row?.getIsSelected()
         }
         indeterminate={
-          selectAll
-            ? instance.getIsSomeRowsSelected()
-            : row?.getIsSomeSelected()
+          selectAll ? table.getIsSomeRowsSelected() : row?.getIsSomeSelected()
         }
         inputProps={{
           'aria-label': selectAll

package/src/menus/MRT_ColumnActionMenu.tsx

@@ -20,14 +20,14 @@ interface Props {
   anchorEl: HTMLElement | null;
   header: MRT_Header;
   setAnchorEl: (anchorEl: HTMLElement | null) => void;
-  instance: MRT_TableInstance;
+  table: MRT_TableInstance;
 }
 
 export const MRT_ColumnActionMenu: FC<Props> = ({
   anchorEl,
   header,
   setAnchorEl,
-  instance,
+  table,
 }) => {
   const {
     getState,
@@ -58,17 +58,13 @@ export const MRT_ColumnActionMenu: FC<Props> = ({
       localization,
     },
     setShowFilters,
-  } = instance;
-
+  } = table;
   const { column } = header;
-
   const { columnDef } = column;
-
   const { columnSizing, columnVisibility, density } = getState();
 
   const [filterMenuAnchorEl, setFilterMenuAnchorEl] =
     useState<null | HTMLElement>(null);
-
   const [showHideColumnsMenuAnchorEl, setShowHideColumnsMenuAnchorEl] =
     useState<null | HTMLElement>(null);
 
@@ -265,7 +261,7 @@ export const MRT_ColumnActionMenu: FC<Props> = ({
               key={2}
               onSelect={handleFilterByColumn}
               setAnchorEl={setFilterMenuAnchorEl}
-              instance={instance}
+              table={table}
             />
           ),
         ].filter(Boolean)}
@@ -394,7 +390,7 @@ export const MRT_ColumnActionMenu: FC<Props> = ({
           isSubMenu
           key={2}
           setAnchorEl={setShowHideColumnsMenuAnchorEl}
-          instance={instance}
+          table={table}
         />,
       ]}
     </Menu>

package/src/menus/MRT_FilterOptionMenu.tsx

@@ -1,24 +1,6 @@
 import React, { FC, useMemo } from 'react';
 import { Menu, MenuItem } from '@mui/material';
-import type {
-  MRT_FilterFn,
-  MRT_FILTER_OPTION,
-  MRT_Header,
-  MRT_TableInstance,
-} from '..';
-import {
-  between,
-  contains,
-  empty,
-  endsWith,
-  equals,
-  fuzzy,
-  greaterThan,
-  lessThan,
-  notEmpty,
-  notEquals,
-  startsWith,
-} from '../filtersFns';
+import type { MRT_FilterOption, MRT_Header, MRT_TableInstance } from '..';
 
 const commonMenuItemStyles = {
   py: '6px',
@@ -31,7 +13,7 @@ interface Props {
   header?: MRT_Header;
   onSelect?: () => void;
   setAnchorEl: (anchorEl: HTMLElement | null) => void;
-  instance: MRT_TableInstance;
+  table: MRT_TableInstance;
 }
 
 export const MRT_FilterOptionMenu: FC<Props> = ({
@@ -39,7 +21,7 @@ export const MRT_FilterOptionMenu: FC<Props> = ({
   header,
   onSelect,
   setAnchorEl,
-  instance,
+  table,
 }) => {
   const {
     getState,
@@ -50,12 +32,9 @@ export const MRT_FilterOptionMenu: FC<Props> = ({
     },
     setCurrentFilterFns,
     setCurrentGlobalFilterFn,
-  } = instance;
-
-  const { density, currentFilterFns, currentGlobalFilterFn } = getState();
-
+  } = table;
+  const { currentFilterFns, currentGlobalFilterFn, density } = getState();
   const { column } = header ?? {};
-
   const { columnDef } = column ?? {};
 
   const allowedColumnFilterOptions =
@@ -68,67 +47,56 @@ export const MRT_FilterOptionMenu: FC<Props> = ({
           option: 'fuzzy',
           label: localization.filterFuzzy,
           divider: false,
-          fn: fuzzy,
         },
         {
           option: 'contains',
           label: localization.filterContains,
           divider: false,
-          fn: contains,
         },
         {
           option: 'startsWith',
           label: localization.filterStartsWith,
           divider: false,
-          fn: startsWith,
         },
         {
           option: 'endsWith',
           label: localization.filterEndsWith,
           divider: true,
-          fn: endsWith,
         },
         {
           option: 'equals',
           label: localization.filterEquals,
           divider: false,
-          fn: equals,
         },
         {
           option: 'notEquals',
           label: localization.filterNotEquals,
           divider: true,
-          fn: notEquals,
         },
         {
           option: 'between',
           label: localization.filterBetween,
           divider: false,
-          fn: between,
         },
         {
           option: 'greaterThan',
           label: localization.filterGreaterThan,
           divider: false,
-          fn: greaterThan,
         },
         {
           option: 'lessThan',
           label: localization.filterLessThan,
           divider: true,
-          fn: lessThan,
         },
         {
           option: 'empty',
           label: localization.filterEmpty,
           divider: false,
-          fn: empty,
         },
         {
           option: 'notEmpty',
           label: localization.filterNotEmpty,
           divider: false,
-          fn: notEmpty,
         },
       ].filter((filterType) =>
         columnDef
@@ -138,7 +106,7 @@ export const MRT_FilterOptionMenu: FC<Props> = ({
               enabledGlobalFilterOptions.includes(filterType.option)) &&
             ['fuzzy', 'contains'].includes(filterType.option),
       ) as Array<{
-        option: MRT_FILTER_OPTION;
+        option: MRT_FilterOption;
         label: string;
         divider: boolean;
         fn: Function;
@@ -146,21 +114,21 @@ export const MRT_FilterOptionMenu: FC<Props> = ({
     [],
   );
 
-  const handleSelectFilterType = (value: string) => {
+  const handleSelectFilterType = (option: MRT_FilterOption) => {
     if (header && column) {
-      setCurrentFilterFns((prev: { [key: string]: MRT_FilterFn }) => ({
+      setCurrentFilterFns((prev: { [key: string]: any }) => ({
         ...prev,
-        [header.id]: value,
+        [header.id]: option,
       }));
-      if (['empty', 'notEmpty'].includes(value)) {
+      if (['empty', 'notEmpty'].includes(option)) {
         column.setFilterValue(' ');
-      } else if (value === 'between') {
+      } else if (option === 'between') {
         column.setFilterValue(['', '']);
       } else {
         column.setFilterValue('');
       }
     } else {
-      setCurrentGlobalFilterFn(value);
+      setCurrentGlobalFilterFn(option);
     }
     setAnchorEl(null);
     onSelect?.();
@@ -180,14 +148,14 @@ export const MRT_FilterOptionMenu: FC<Props> = ({
         dense: density === 'compact',
       }}
     >
-      {filterOptions.map(({ option, label, divider, fn }, index) => (
+      {filterOptions.map(({ option, label, divider }, index) => (
         <MenuItem
           divider={divider}
           key={index}
-          onClick={() => handleSelectFilterType(option as string)}
-          selected={option === filterOption || fn === filterOption}
+          onClick={() => handleSelectFilterType(option)}
+          selected={option === filterOption}
           sx={commonMenuItemStyles}
-          value={option as string}
+          value={option}
         >
           {label}
         </MenuItem>

package/src/menus/MRT_RowActionMenu.tsx

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