material-react-table 0.9.5 → 0.10.0

package/src/inputs/MRT_FilterTextField.tsx

@@ -15,20 +15,19 @@ import {
   TextFieldProps,
   Tooltip,
 } from '@mui/material';
-import type { MRT_Header, MRT_TableInstance } from '..';
 import { MRT_FilterOptionMenu } from '../menus/MRT_FilterOptionMenu';
-import { MRT_FILTER_OPTION } from '../enums';
+import type { MRT_Header, MRT_TableInstance } from '..';
 
 interface Props {
   header: MRT_Header;
   inputIndex?: number;
-  tableInstance: MRT_TableInstance;
+  instance: MRT_TableInstance;
 }
 
 export const MRT_FilterTextField: FC<Props> = ({
   header,
   inputIndex,
-  tableInstance,
+  instance,
 }) => {
   const {
     getState,
@@ -39,7 +38,7 @@ export const MRT_FilterTextField: FC<Props> = ({
       muiTableHeadCellFilterTextFieldProps,
     },
     setCurrentFilterFns,
-  } = tableInstance;
+  } = instance;
 
   const { column } = header;
 
@@ -51,14 +50,14 @@ export const MRT_FilterTextField: FC<Props> = ({
 
   const mTableHeadCellFilterTextFieldProps =
     muiTableHeadCellFilterTextFieldProps instanceof Function
-      ? muiTableHeadCellFilterTextFieldProps({ column, tableInstance })
+      ? muiTableHeadCellFilterTextFieldProps({ column, instance })
       : muiTableHeadCellFilterTextFieldProps;
 
   const mcTableHeadCellFilterTextFieldProps =
     columnDef.muiTableHeadCellFilterTextFieldProps instanceof Function
       ? columnDef.muiTableHeadCellFilterTextFieldProps({
           column,
-          tableInstance,
+          instance,
         })
       : columnDef.muiTableHeadCellFilterTextFieldProps;
 
@@ -110,12 +109,12 @@ export const MRT_FilterTextField: FC<Props> = ({
     column.setFilterValue(undefined);
     setCurrentFilterFns((prev) => ({
       ...prev,
-      [header.id]: MRT_FILTER_OPTION.FUZZY,
+      [header.id]: 'fuzzy',
     }));
   };
 
   if (columnDef.Filter) {
-    return <>{columnDef.Filter?.({ header, tableInstance })}</>;
+    return <>{columnDef.Filter?.({ header, instance })}</>;
   }
 
   const filterId = `mrt-${tableId}-${header.id}-filter-text-field${
@@ -124,10 +123,7 @@ export const MRT_FilterTextField: FC<Props> = ({
   const filterFn = currentFilterFns?.[header.id];
   const isSelectFilter = !!columnDef.filterSelectOptions;
   const filterChipLabel =
-    !(filterFn instanceof Function) &&
-    [MRT_FILTER_OPTION.EMPTY, MRT_FILTER_OPTION.NOT_EMPTY].includes(
-      filterFn as MRT_FILTER_OPTION,
-    )
+    !(filterFn instanceof Function) && ['empty', 'notEmpty'].includes(filterFn)
       ? //@ts-ignore
         localization[
           `filter${filterFn.charAt(0).toUpperCase() + filterFn.slice(1)}`
@@ -292,7 +288,7 @@ export const MRT_FilterTextField: FC<Props> = ({
         anchorEl={anchorEl}
         header={header}
         setAnchorEl={setAnchorEl}
-        tableInstance={tableInstance}
+        instance={instance}
       />
     </>
   );

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,11 +7,12 @@ 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: {
       enableColumnResizing,
       enableRowVirtualization,
@@ -20,29 +21,33 @@ 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 (
     <Table
-      stickyHeader={enableStickyHeader}
+      stickyHeader={
+        enableStickyHeader || enableRowVirtualization || isFullScreen
+      }
       {...tableProps}
       sx={{
         tableLayout:
-          enableColumnResizing || enableRowVirtualization ? 'fixed' : undefined,
+          enableColumnResizing || enableRowVirtualization ? 'fixed' : 'auto',
         ...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,14 +7,19 @@ 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: { enableStickyHeader, muiTableContainerProps, tableId },
-  } = tableInstance;
+    options: {
+      enableStickyHeader,
+      enableRowVirtualization,
+      muiTableContainerProps,
+      tableId,
+    },
+  } = instance;
 
   const { isFullScreen } = getState();
 
@@ -22,7 +27,7 @@ export const MRT_TableContainer: FC<Props> = ({ tableInstance }) => {
 
   const tableContainerProps =
     muiTableContainerProps instanceof Function
-      ? muiTableContainerProps({ tableInstance })
+      ? muiTableContainerProps({ instance })
       : muiTableContainerProps;
 
   useIsomorphicLayoutEffect(() => {
@@ -49,9 +54,10 @@ export const MRT_TableContainer: FC<Props> = ({ tableInstance }) => {
       ref={tableContainerRef}
       sx={{
         maxWidth: '100%',
-        maxHeight: enableStickyHeader
-          ? `clamp(350px, calc(100vh - ${totalToolbarHeight}px), 2000px)`
-          : undefined,
+        maxHeight:
+          enableStickyHeader || enableRowVirtualization
+            ? `clamp(350px, calc(100vh - ${totalToolbarHeight}px), 9999px)`
+            : undefined,
         overflow: 'auto',
         ...tableContainerProps?.sx,
       }}
@@ -59,12 +65,10 @@ export const MRT_TableContainer: FC<Props> = ({ tableInstance }) => {
         maxHeight: isFullScreen
           ? `calc(100vh - ${totalToolbarHeight}px)`
           : undefined,
+        ...tableContainerProps?.style,
       }}
     >
-      <MRT_Table
-        tableContainerRef={tableContainerRef}
-        tableInstance={tableInstance}
-      />
+      <MRT_Table tableContainerRef={tableContainerRef} instance={instance} />
     </TableContainer>
   );
 };