material-react-table 0.17.1 → 0.19.0-alpha.1

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>

package/src/menus/MRT_ShowHideColumnsMenu.tsx

@@ -8,14 +8,14 @@ interface Props {
   anchorEl: HTMLElement | null;
   isSubMenu?: boolean;
   setAnchorEl: (anchorEl: HTMLElement | null) => void;
-  instance: MRT_TableInstance;
+  table: MRT_TableInstance;
 }
 
 export const MRT_ShowHideColumnsMenu: FC<Props> = ({
   anchorEl,
   isSubMenu,
   setAnchorEl,
-  instance,
+  table,
 }) => {
   const {
     getAllColumns,
@@ -29,8 +29,7 @@ export const MRT_ShowHideColumnsMenu: FC<Props> = ({
     getState,
     toggleAllColumnsVisible,
     options: { localization, enablePinning, enableColumnOrdering },
-  } = instance;
-
+  } = table;
   const { density, columnOrder, columnPinning } = getState();
 
   const hideAllColumns = () => {
@@ -43,7 +42,7 @@ export const MRT_ShowHideColumnsMenu: FC<Props> = ({
     const columns = getAllColumns();
     if (
       columnOrder.length > 0 &&
-      !columns.some((col) => col.columnDefType === 'group')
+      !columns.some((col) => col.columnDef.columnDefType === 'group')
     ) {
       return [
         ...getLeftLeafColumns(),
@@ -91,8 +90,8 @@ export const MRT_ShowHideColumnsMenu: FC<Props> = ({
         {!isSubMenu && enableColumnOrdering && (
           <Button
             onClick={() =>
-              instance.setColumnOrder(
-                getDefaultColumnOrderIds(instance.options as any),
+              table.setColumnOrder(
+                getDefaultColumnOrderIds(table.options as any),
               )
             }
           >
@@ -102,7 +101,7 @@ export const MRT_ShowHideColumnsMenu: FC<Props> = ({
         {!isSubMenu && enablePinning && (
           <Button
             disabled={!getIsSomeColumnsPinned()}
-            onClick={() => instance.resetColumnPinning(true)}
+            onClick={() => table.resetColumnPinning(true)}
           >
             {localization.unpinAll}
           </Button>
@@ -121,7 +120,7 @@ export const MRT_ShowHideColumnsMenu: FC<Props> = ({
           column={column}
           isSubMenu={isSubMenu}
           key={`${index}-${column.id}`}
-          instance={instance}
+          table={table}
         />
       ))}
     </Menu>

package/src/menus/MRT_ShowHideColumnsMenuItems.tsx

@@ -17,14 +17,14 @@ interface Props {
   allColumns: MRT_Column[];
   column: MRT_Column;
   isSubMenu?: boolean;
-  instance: MRT_TableInstance;
+  table: MRT_TableInstance;
 }
 
 export const MRT_ShowHideColumnsMenuItems: FC<Props> = ({
   allColumns,
   column,
   isSubMenu,
-  instance,
+  table,
 }) => {
   const {
     getState,
@@ -35,11 +35,10 @@ export const MRT_ShowHideColumnsMenuItems: FC<Props> = ({
       localization,
     },
     setColumnOrder,
-  } = instance;
-
+  } = table;
   const { columnOrder } = getState();
-
-  const { columnDef, columnDefType } = column;
+  const { columnDef } = column;
+  const { columnDefType } = columnDef;
 
   const [, dropRef] = useDrop({
     accept: 'column',
@@ -94,11 +93,13 @@ export const MRT_ShowHideColumnsMenuItems: FC<Props> = ({
         >
           {columnDefType !== 'group' &&
             enableColumnOrdering &&
-            !allColumns.some((col) => col.columnDefType === 'group') &&
+            !allColumns.some(
+              (col) => col.columnDef.columnDefType === 'group',
+            ) &&
             (columnDef.enableColumnOrdering !== false ? (
               <MRT_GrabHandleButton
                 ref={dragRef as Ref<HTMLButtonElement>}
-                instance={instance}
+                table={table}
               />
             ) : (
               <Box sx={{ width: '28px' }} />
@@ -106,7 +107,7 @@ export const MRT_ShowHideColumnsMenuItems: FC<Props> = ({
           {enablePinning &&
             !isSubMenu &&
             (column.getCanPin() ? (
-              <MRT_ColumnPinningButtons column={column} instance={instance} />
+              <MRT_ColumnPinningButtons column={column} table={table} />
             ) : (
               <Box sx={{ width: '70px' }} />
             ))}
@@ -152,7 +153,7 @@ export const MRT_ShowHideColumnsMenuItems: FC<Props> = ({
           key={`${i}-${c.id}`}
           column={c}
           isSubMenu={isSubMenu}
-          instance={instance}
+          table={table}
         />
       ))}
     </>

package/src/sortingFns.ts

@@ -1,8 +1,12 @@
 import { compareItems, RankingInfo } from '@tanstack/match-sorter-utils';
 import { Row, sortingFns } from '@tanstack/react-table';
-import type { MRT_Row } from '.';
+import { MRT_Row } from '.';
 
-const fuzzy = (rowA: MRT_Row, rowB: MRT_Row, columnId: string) => {
+const fuzzy = <D extends Record<string, any> = {}>(
+  rowA: Row<D>,
+  rowB: Row<D>,
+  columnId: string,
+) => {
   let dir = 0;
   if (rowA.columnFiltersMeta[columnId]) {
     dir = compareItems(
@@ -17,9 +21,13 @@ const fuzzy = (rowA: MRT_Row, rowB: MRT_Row, columnId: string) => {
 };
 
 export const MRT_SortingFns = {
+  ...sortingFns,
   fuzzy,
 };
 
-export const rankGlobalFuzzy = (rowA: MRT_Row, rowB: MRT_Row) =>
+export const rankGlobalFuzzy = <D extends Record<string, any> = {}>(
+  rowA: MRT_Row<D>,
+  rowB: MRT_Row<D>,
+) =>
   Math.max(...Object.values(rowB.columnFiltersMeta).map((v: any) => v.rank)) -
   Math.max(...Object.values(rowA.columnFiltersMeta).map((v: any) => v.rank));

package/src/table/MRT_Table.tsx

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

package/src/table/MRT_TableContainer.tsx

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

package/src/table/MRT_TablePaper.tsx

@@ -8,15 +8,14 @@ import { MRT_TableContainer } from './MRT_TableContainer';
 import type { MRT_TableInstance } from '..';
 
 interface Props {
-  instance: MRT_TableInstance;
+  table: MRT_TableInstance;
 }
 
-export const MRT_TablePaper: FC<Props> = ({ instance }) => {
+export const MRT_TablePaper: FC<Props> = ({ table }) => {
   const {
     getState,
     options: { enableToolbarBottom, enableToolbarTop, muiTablePaperProps },
-  } = instance;
-
+  } = table;
   const { isFullScreen } = getState();
 
   useEffect(() => {
@@ -31,7 +30,7 @@ export const MRT_TablePaper: FC<Props> = ({ instance }) => {
 
   const tablePaperProps =
     muiTablePaperProps instanceof Function
-      ? muiTablePaperProps({ instance })
+      ? muiTablePaperProps({ table })
       : muiTablePaperProps;
 
   return (
@@ -53,9 +52,9 @@ export const MRT_TablePaper: FC<Props> = ({ instance }) => {
           width: isFullScreen ? '100vw' : undefined,
         }}
       >
-        {enableToolbarTop && <MRT_ToolbarTop instance={instance} />}
-        <MRT_TableContainer instance={instance} />
-        {enableToolbarBottom && <MRT_ToolbarBottom instance={instance} />}
+        {enableToolbarTop && <MRT_ToolbarTop table={table} />}
+        <MRT_TableContainer table={table} />
+        {enableToolbarBottom && <MRT_ToolbarBottom table={table} />}
       </Paper>
     </DndProvider>
   );