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

package/src/buttons/MRT_ToggleFiltersButton.tsx

@@ -1,30 +1,23 @@
-import React, { FC, MouseEvent } from 'react';
+import React, { FC } from 'react';
 import { IconButton, IconButtonProps, Tooltip } from '@mui/material';
 import { MRT_TableInstance } from '..';
 
 interface Props extends IconButtonProps {
-  instance: MRT_TableInstance;
+  table: MRT_TableInstance;
 }
 
-export const MRT_ToggleFiltersButton: FC<Props> = ({ instance, ...rest }) => {
+export const MRT_ToggleFiltersButton: FC<Props> = ({ table, ...rest }) => {
   const {
     getState,
     options: {
       icons: { FilterListIcon, FilterListOffIcon },
       localization,
-      onShowFiltersChanged,
     },
     setShowFilters,
-  } = instance;
-
+  } = table;
   const { showFilters } = getState();
 
-  const handleToggleShowFilters = (event: MouseEvent<HTMLButtonElement>) => {
-    onShowFiltersChanged?.({
-      event,
-      showFilters: !showFilters,
-      instance,
-    });
+  const handleToggleShowFilters = () => {
     setShowFilters(!showFilters);
   };
 

package/src/buttons/MRT_ToggleGlobalFilterButton.tsx

@@ -1,15 +1,12 @@
-import React, { FC, MouseEvent } from 'react';
+import React, { FC } from 'react';
 import { IconButton, IconButtonProps, Tooltip } from '@mui/material';
 import { MRT_TableInstance } from '..';
 
 interface Props extends IconButtonProps {
-  instance: MRT_TableInstance;
+  table: MRT_TableInstance;
 }
 
-export const MRT_ToggleGlobalFilterButton: FC<Props> = ({
-  instance,
-  ...rest
-}) => {
+export const MRT_ToggleGlobalFilterButton: FC<Props> = ({ table, ...rest }) => {
   const {
     getState,
     options: {
@@ -17,24 +14,17 @@ export const MRT_ToggleGlobalFilterButton: FC<Props> = ({
       tableId,
       localization,
       muiSearchTextFieldProps,
-      onShowGlobalFilterChanged,
     },
     setShowGlobalFilter,
-  } = instance;
-
+  } = table;
   const { showGlobalFilter } = getState();
 
   const textFieldProps =
     muiSearchTextFieldProps instanceof Function
-      ? muiSearchTextFieldProps({ instance })
+      ? muiSearchTextFieldProps({ table })
       : muiSearchTextFieldProps;
 
-  const handleToggleSearch = (event: MouseEvent<HTMLButtonElement>) => {
-    onShowGlobalFilterChanged?.({
-      event,
-      showGlobalFilter: !showGlobalFilter,
-      instance,
-    });
+  const handleToggleSearch = () => {
     setShowGlobalFilter(!showGlobalFilter);
     setTimeout(
       () =>

package/src/buttons/MRT_ToggleRowActionMenuButton.tsx

@@ -17,10 +17,10 @@ const commonIconButtonStyles = {
 
 interface Props {
   row: MRT_Row;
-  instance: MRT_TableInstance;
+  table: MRT_TableInstance;
 }
 
-export const MRT_ToggleRowActionMenuButton: FC<Props> = ({ row, instance }) => {
+export const MRT_ToggleRowActionMenuButton: FC<Props> = ({ row, table }) => {
   const {
     getState,
     options: {
@@ -31,7 +31,7 @@ export const MRT_ToggleRowActionMenuButton: FC<Props> = ({ row, instance }) => {
       renderRowActions,
     },
     setCurrentEditingRow,
-  } = instance;
+  } = table;
 
   const { currentEditingRow } = getState();
 
@@ -51,9 +51,9 @@ export const MRT_ToggleRowActionMenuButton: FC<Props> = ({ row, instance }) => {
   return (
     <>
       {renderRowActions ? (
-        <>{renderRowActions({ row, instance })}</>
+        <>{renderRowActions({ row, table })}</>
       ) : row.id === currentEditingRow?.id ? (
-        <MRT_EditActionButtons row={row} instance={instance} />
+        <MRT_EditActionButtons row={row} table={table} />
       ) : !renderRowActionMenuItems && enableEditing ? (
         <Tooltip placement="right" arrow title={localization.edit}>
           <IconButton sx={commonIconButtonStyles} onClick={handleStartEditMode}>
@@ -82,7 +82,7 @@ export const MRT_ToggleRowActionMenuButton: FC<Props> = ({ row, instance }) => {
             handleEdit={handleStartEditMode}
             row={row}
             setAnchorEl={setAnchorEl}
-            instance={instance}
+            table={table}
           />
         </>
       ) : null}

package/src/filtersFns.ts

@@ -1,8 +1,8 @@
 import { rankItem, rankings, RankingInfo } from '@tanstack/match-sorter-utils';
-import { MRT_Row } from '.';
+import { filterFns, Row } from '@tanstack/react-table';
 
-export const fuzzy = (
-  row: MRT_Row,
+export const fuzzy = <D extends Record<string, any> = {}>(
+  row: Row<D>,
   columnId: string,
   filterValue: string,
   addMeta: (item: RankingInfo) => void,
@@ -16,8 +16,8 @@ export const fuzzy = (
 
 fuzzy.autoRemove = (val: any) => !val;
 
-export const contains = (
-  row: MRT_Row,
+export const contains = <D extends Record<string, any> = {}>(
+  row: Row<D>,
   id: string,
   filterValue: string | number,
 ) =>
@@ -30,8 +30,8 @@ export const contains = (
 
 contains.autoRemove = (val: any) => !val;
 
-export const startsWith = (
-  row: MRT_Row,
+export const startsWith = <D extends Record<string, any> = {}>(
+  row: Row<D>,
   id: string,
   filterValue: string | number,
 ) =>
@@ -44,8 +44,8 @@ export const startsWith = (
 
 startsWith.autoRemove = (val: any) => !val;
 
-export const endsWith = (
-  row: MRT_Row,
+export const endsWith = <D extends Record<string, any> = {}>(
+  row: Row<D>,
   id: string,
   filterValue: string | number,
 ) =>
@@ -58,8 +58,8 @@ export const endsWith = (
 
 endsWith.autoRemove = (val: any) => !val;
 
-export const equals = (
-  row: MRT_Row,
+export const equals = <D extends Record<string, any> = {}>(
+  row: Row<D>,
   id: string,
   filterValue: string | number,
 ) =>
@@ -68,8 +68,8 @@ export const equals = (
 
 equals.autoRemove = (val: any) => !val;
 
-export const notEquals = (
-  row: MRT_Row,
+export const notEquals = <D extends Record<string, any> = {}>(
+  row: Row<D>,
   id: string,
   filterValue: string | number,
 ) =>
@@ -78,8 +78,8 @@ export const notEquals = (
 
 notEquals.autoRemove = (val: any) => !val;
 
-export const greaterThan = (
-  row: MRT_Row,
+export const greaterThan = <D extends Record<string, any> = {}>(
+  row: Row<D>,
   id: string,
   filterValue: string | number,
 ) =>
@@ -90,8 +90,8 @@ export const greaterThan = (
 
 greaterThan.autoRemove = (val: any) => !val;
 
-export const lessThan = (
-  row: MRT_Row,
+export const lessThan = <D extends Record<string, any> = {}>(
+  row: Row<D>,
   id: string,
   filterValue: string | number,
 ) =>
@@ -102,8 +102,8 @@ export const lessThan = (
 
 lessThan.autoRemove = (val: any) => !val;
 
-export const between = (
-  row: MRT_Row,
+export const between = <D extends Record<string, any> = {}>(
+  row: Row<D>,
   id: string,
   filterValues: [string | number, string | number],
 ) =>
@@ -117,16 +117,16 @@ export const between = (
 
 between.autoRemove = (val: any) => !val;
 
-export const empty = (
-  row: MRT_Row,
+export const empty = <D extends Record<string, any> = {}>(
+  row: Row<D>,
   id: string,
   _filterValue: string | number,
 ) => !row.getValue(id).toString().trim();
 
 empty.autoRemove = (val: any) => !val;
 
-export const notEmpty = (
-  row: MRT_Row,
+export const notEmpty = <D extends Record<string, any> = {}>(
+  row: Row<D>,
   id: string,
   _filterValue: string | number,
 ) => !!row.getValue(id).toString().trim();
@@ -134,6 +134,7 @@ export const notEmpty = (
 notEmpty.autoRemove = (val: any) => !val;
 
 export const MRT_FilterFns = {
+  ...filterFns,
   between,
   contains,
   empty,

package/src/footer/MRT_TableFooter.tsx

@@ -4,19 +4,18 @@ import { MRT_TableFooterRow } from './MRT_TableFooterRow';
 import type { MRT_TableInstance } from '..';
 
 interface Props {
-  instance: MRT_TableInstance;
+  table: MRT_TableInstance;
 }
 
-export const MRT_TableFooter: FC<Props> = ({ instance }) => {
+export const MRT_TableFooter: FC<Props> = ({ table }) => {
   const {
     getFooterGroups,
-
     options: { muiTableFooterProps },
-  } = instance;
+  } = table;
 
   const tableFooterProps =
     muiTableFooterProps instanceof Function
-      ? muiTableFooterProps({ instance })
+      ? muiTableFooterProps({ table })
       : muiTableFooterProps;
 
   return (
@@ -25,7 +24,7 @@ export const MRT_TableFooter: FC<Props> = ({ instance }) => {
         <MRT_TableFooterRow
           footerGroup={footerGroup as any}
           key={footerGroup.id}
-          instance={instance}
+          table={table}
         />
       ))}
     </TableFooter>

package/src/footer/MRT_TableFooterCell.tsx

@@ -4,29 +4,27 @@ import type { MRT_Header, MRT_TableInstance } from '..';
 
 interface Props {
   footer: MRT_Header;
-  instance: MRT_TableInstance;
+  table: MRT_TableInstance;
 }
 
-export const MRT_TableFooterCell: FC<Props> = ({ footer, instance }) => {
+export const MRT_TableFooterCell: FC<Props> = ({ footer, table }) => {
   const {
     getState,
     options: { muiTableFooterCellProps, enableColumnResizing },
-  } = instance;
-
+  } = table;
   const { density } = getState();
-
   const { column } = footer;
-
-  const { columnDef, columnDefType } = column;
+  const { columnDef } = column;
+  const { columnDefType } = columnDef;
 
   const mTableFooterCellProps =
     muiTableFooterCellProps instanceof Function
-      ? muiTableFooterCellProps({ column, instance })
+      ? muiTableFooterCellProps({ column, table })
       : muiTableFooterCellProps;
 
   const mcTableFooterCellProps =
     columnDef.muiTableFooterCellProps instanceof Function
-      ? columnDef.muiTableFooterCellProps({ column, instance })
+      ? columnDef.muiTableFooterCellProps({ column, table })
       : columnDef.muiTableFooterCellProps;
 
   const tableCellProps = {
@@ -67,11 +65,10 @@ export const MRT_TableFooterCell: FC<Props> = ({ footer, instance }) => {
           : (columnDef.Footer instanceof Function
               ? columnDef.Footer?.({
                   footer,
-                  instance,
+                  table,
                 })
               : columnDef.Footer) ??
             columnDef.footer ??
-            footer.renderFooter() ??
             null}
       </>
     </TableCell>

package/src/footer/MRT_TableFooterRow.tsx

@@ -5,13 +5,13 @@ import type { MRT_Header, MRT_HeaderGroup, MRT_TableInstance } from '..';
 
 interface Props {
   footerGroup: MRT_HeaderGroup;
-  instance: MRT_TableInstance;
+  table: MRT_TableInstance;
 }
 
-export const MRT_TableFooterRow: FC<Props> = ({ footerGroup, instance }) => {
+export const MRT_TableFooterRow: FC<Props> = ({ footerGroup, table }) => {
   const {
     options: { muiTableFooterRowProps },
-  } = instance;
+  } = table;
 
   // if no content in row, skip row
   if (
@@ -26,17 +26,13 @@ export const MRT_TableFooterRow: FC<Props> = ({ footerGroup, instance }) => {
 
   const tableRowProps =
     muiTableFooterRowProps instanceof Function
-      ? muiTableFooterRowProps({ footerGroup, instance })
+      ? muiTableFooterRowProps({ footerGroup, table })
       : muiTableFooterRowProps;
 
   return (
     <TableRow {...tableRowProps}>
       {footerGroup.headers.map((footer: MRT_Header) => (
-        <MRT_TableFooterCell
-          footer={footer}
-          key={footer.id}
-          instance={instance}
-        />
+        <MRT_TableFooterCell footer={footer} key={footer.id} table={table} />
       ))}
     </TableRow>
   );

package/src/head/MRT_DraggableTableHeadCell.tsx

@@ -6,14 +6,12 @@ import { reorderColumn } from '../utils';
 
 interface Props {
   header: MRT_Header;
-  instance: MRT_TableInstance;
+  table: MRT_TableInstance;
 }
 
-export const MRT_DraggableTableHeadCell: FC<Props> = ({ header, instance }) => {
-  const { getState, setColumnOrder } = instance;
-
+export const MRT_DraggableTableHeadCell: FC<Props> = ({ header, table }) => {
+  const { getState, setColumnOrder } = table;
   const { columnOrder } = getState();
-
   const { column } = header;
 
   const [, dropRef] = useDrop({
@@ -39,7 +37,7 @@ export const MRT_DraggableTableHeadCell: FC<Props> = ({ header, instance }) => {
       header={header}
       isDragging={isDragging}
       previewRef={previewRef}
-      instance={instance}
+      table={table}
     />
   );
 };

package/src/head/MRT_TableHead.tsx

@@ -4,18 +4,18 @@ import { MRT_TableHeadRow } from './MRT_TableHeadRow';
 import type { MRT_TableInstance } from '..';
 
 interface Props {
-  instance: MRT_TableInstance;
+  table: MRT_TableInstance;
 }
 
-export const MRT_TableHead: FC<Props> = ({ instance }) => {
+export const MRT_TableHead: FC<Props> = ({ table }) => {
   const {
     getHeaderGroups,
     options: { muiTableHeadProps },
-  } = instance;
+  } = table;
 
   const tableHeadProps =
     muiTableHeadProps instanceof Function
-      ? muiTableHeadProps({ instance })
+      ? muiTableHeadProps({ table })
       : muiTableHeadProps;
 
   return (
@@ -24,7 +24,7 @@ export const MRT_TableHead: FC<Props> = ({ instance }) => {
         <MRT_TableHeadRow
           headerGroup={headerGroup as any}
           key={headerGroup.id}
-          instance={instance}
+          table={table}
         />
       ))}
     </TableHead>

package/src/head/MRT_TableHeadCell.tsx

@@ -12,7 +12,7 @@ interface Props {
   dragRef?: Ref<HTMLButtonElement>;
   dropRef?: Ref<HTMLDivElement>;
   header: MRT_Header;
-  instance: MRT_TableInstance;
+  table: MRT_TableInstance;
   isDragging?: boolean;
   previewRef?: Ref<HTMLTableCellElement>;
 }
@@ -21,7 +21,7 @@ export const MRT_TableHeadCell: FC<Props> = ({
   dragRef,
   dropRef,
   header,
-  instance,
+  table,
   isDragging,
   previewRef,
 }) => {
@@ -35,22 +35,20 @@ export const MRT_TableHeadCell: FC<Props> = ({
       enableMultiSort,
       muiTableHeadCellProps,
     },
-  } = instance;
-
+  } = table;
   const { density, showFilters } = getState();
-
   const { column } = header;
-
-  const { columnDef, columnDefType } = column;
+  const { columnDef } = column;
+  const { columnDefType } = columnDef;
 
   const mTableHeadCellProps =
     muiTableHeadCellProps instanceof Function
-      ? muiTableHeadCellProps({ column, instance })
+      ? muiTableHeadCellProps({ column, table })
       : muiTableHeadCellProps;
 
   const mcTableHeadCellProps =
     columnDef.muiTableHeadCellProps instanceof Function
-      ? columnDef.muiTableHeadCellProps({ column, instance })
+      ? columnDef.muiTableHeadCellProps({ column, table })
       : columnDef.muiTableHeadCellProps;
 
   const tableCellProps = {
@@ -61,16 +59,14 @@ export const MRT_TableHeadCell: FC<Props> = ({
   const headerElement = ((columnDef?.Header instanceof Function
     ? columnDef?.Header?.({
         header,
-        instance,
+        table,
       })
-    : columnDef?.Header) ??
-    header.renderHeader() ??
-    columnDef.header) as ReactNode;
+    : columnDef?.Header) ?? columnDef.header) as ReactNode;
 
   const getIsLastLeftPinnedColumn = () => {
     return (
       column.getIsPinned() === 'left' &&
-      instance.getLeftLeafHeaders().length - 1 === column.getPinnedIndex()
+      table.getLeftLeafHeaders().length - 1 === column.getPinnedIndex()
     );
   };
 
@@ -80,8 +76,7 @@ export const MRT_TableHeadCell: FC<Props> = ({
 
   const getTotalRight = () => {
     return (
-      (instance.getRightLeafHeaders().length - 1 - column.getPinnedIndex()) *
-      150
+      (table.getRightLeafHeaders().length - 1 - column.getPinnedIndex()) * 150
     );
   };
 
@@ -139,7 +134,7 @@ export const MRT_TableHeadCell: FC<Props> = ({
         right:
           column.getIsPinned() === 'right' ? `${getTotalRight()}px` : undefined,
         transition: `all ${enableColumnResizing ? 0 : '0.2s'} ease-in-out`,
-        userSelect: enableMultiSort ? 'none' : undefined,
+        userSelect: enableMultiSort && column.getCanSort() ? 'none' : undefined,
         verticalAlign:
           columnDefType === 'display' && showFilters ? 'center' : 'text-top',
         zIndex: column.getIsResizing()
@@ -184,13 +179,10 @@ export const MRT_TableHeadCell: FC<Props> = ({
           >
             {headerElement}
             {columnDefType === 'data' && column.getCanSort() && (
-              <MRT_TableHeadCellSortLabel header={header} instance={instance} />
+              <MRT_TableHeadCellSortLabel header={header} table={table} />
             )}
             {columnDefType === 'data' && column.getCanFilter() && (
-              <MRT_TableHeadCellFilterLabel
-                header={header}
-                instance={instance}
-              />
+              <MRT_TableHeadCellFilterLabel header={header} table={table} />
             )}
           </Box>
           <Box sx={{ whiteSpace: 'nowrap' }}>
@@ -200,7 +192,7 @@ export const MRT_TableHeadCell: FC<Props> = ({
                 (enableGrouping && columnDef.enableGrouping !== false)) && (
                 <MRT_GrabHandleButton
                   ref={dragRef as Ref<HTMLButtonElement>}
-                  instance={instance}
+                  table={table}
                 />
               )}
             {(enableColumnActions || columnDef.enableColumnActions) &&
@@ -208,20 +200,17 @@ export const MRT_TableHeadCell: FC<Props> = ({
               columnDefType !== 'group' && (
                 <MRT_TableHeadCellColumnActionsButton
                   header={header}
-                  instance={instance}
+                  table={table}
                 />
               )}
           </Box>
           {column.getCanResize() && (
-            <MRT_TableHeadCellResizeHandle
-              header={header}
-              instance={instance}
-            />
+            <MRT_TableHeadCellResizeHandle header={header} table={table} />
           )}
         </Box>
       )}
       {columnDefType === 'data' && column.getCanFilter() && (
-        <MRT_TableHeadCellFilterContainer header={header} instance={instance} />
+        <MRT_TableHeadCellFilterContainer header={header} table={table} />
       )}
     </TableCell>
   );

package/src/head/MRT_TableHeadCellColumnActionsButton.tsx

@@ -5,12 +5,12 @@ import type { MRT_Header, MRT_TableInstance } from '..';
 
 interface Props {
   header: MRT_Header;
-  instance: MRT_TableInstance;
+  table: MRT_TableInstance;
 }
 
 export const MRT_TableHeadCellColumnActionsButton: FC<Props> = ({
   header,
-  instance,
+  table,
 }) => {
   const {
     options: {
@@ -18,10 +18,8 @@ export const MRT_TableHeadCellColumnActionsButton: FC<Props> = ({
       localization,
       muiTableHeadCellColumnActionsButtonProps,
     },
-  } = instance;
-
+  } = table;
   const { column } = header;
-
   const { columnDef } = column;
 
   const [anchorEl, setAnchorEl] = useState<null | HTMLElement>(null);
@@ -34,14 +32,14 @@ export const MRT_TableHeadCellColumnActionsButton: FC<Props> = ({
 
   const mTableHeadCellColumnActionsButtonProps =
     muiTableHeadCellColumnActionsButtonProps instanceof Function
-      ? muiTableHeadCellColumnActionsButtonProps({ column, instance })
+      ? muiTableHeadCellColumnActionsButtonProps({ column, table })
       : muiTableHeadCellColumnActionsButtonProps;
 
   const mcTableHeadCellColumnActionsButtonProps =
     columnDef.muiTableHeadCellColumnActionsButtonProps instanceof Function
       ? columnDef.muiTableHeadCellColumnActionsButtonProps({
           column,
-          instance,
+          table,
         })
       : columnDef.muiTableHeadCellColumnActionsButtonProps;
 
@@ -83,7 +81,7 @@ export const MRT_TableHeadCellColumnActionsButton: FC<Props> = ({
         anchorEl={anchorEl}
         header={header}
         setAnchorEl={setAnchorEl}
-        instance={instance}
+        table={table}
       />
     </>
   );

package/src/head/MRT_TableHeadCellFilterContainer.tsx

@@ -6,25 +6,23 @@ import { MRT_Header, MRT_TableInstance } from '..';
 
 interface Props {
   header: MRT_Header;
-  instance: MRT_TableInstance;
+  table: MRT_TableInstance;
 }
 
 export const MRT_TableHeadCellFilterContainer: FC<Props> = ({
   header,
-  instance,
+  table,
 }) => {
-  const { getState } = instance;
-
+  const { getState } = table;
   const { currentFilterFns, showFilters } = getState();
-
   const { column } = header;
 
   return (
     <Collapse in={showFilters} mountOnEnter unmountOnExit>
       {currentFilterFns[column.id] === 'between' ? (
-        <MRT_FilterRangeFields header={header} instance={instance} />
+        <MRT_FilterRangeFields header={header} table={table} />
       ) : (
-        <MRT_FilterTextField header={header} instance={instance} />
+        <MRT_FilterTextField header={header} table={table} />
       )}
     </Collapse>
   );