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

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>
   );

package/src/head/MRT_TableHeadCellFilterLabel.tsx

@@ -4,39 +4,33 @@ import { MRT_Header, MRT_TableInstance } from '..';
 
 interface Props {
   header: MRT_Header;
-  instance: MRT_TableInstance;
+  table: MRT_TableInstance;
 }
 
-export const MRT_TableHeadCellFilterLabel: FC<Props> = ({
-  header,
-  instance,
-}) => {
+export const MRT_TableHeadCellFilterLabel: FC<Props> = ({ header, table }) => {
   const {
     getState,
     options: {
       icons: { FilterAltIcon },
       localization,
     },
-  } = instance;
-
+  } = table;
   const { currentFilterFns } = getState();
-
   const { column } = header;
-
   const { columnDef } = column;
 
-  const filterFn = currentFilterFns?.[header.id];
-
+  const currentFilterOption = currentFilterFns?.[header.id];
   const filterTooltip = localization.filteringByColumn
     .replace('{column}', String(columnDef.header))
     .replace(
       '{filterType}',
-      filterFn instanceof Function
-        ? ''
-        : // @ts-ignore
-          localization[
-            `filter${filterFn.charAt(0).toUpperCase() + filterFn.slice(1)}`
-          ],
+      // @ts-ignore
+      localization[
+        `filter${
+          currentFilterOption.charAt(0).toUpperCase() +
+          currentFilterOption.slice(1)
+        }`
+      ],
     )
     .replace(
       '{filterValue}',
@@ -54,8 +48,8 @@ export const MRT_TableHeadCellFilterLabel: FC<Props> = ({
     <Grow
       unmountOnExit
       in={
-        (!!column.getFilterValue() && filterFn !== 'between') ||
-        (filterFn === 'between' && // @ts-ignore
+        (!!column.getFilterValue() && currentFilterOption !== 'between') ||
+        (currentFilterOption === 'between' && // @ts-ignore
           (!!column.getFilterValue()?.[0] || !!column.getFilterValue()?.[1]))
       }
     >

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}
           />
         ),
       )}