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

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

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: {
@@ -21,22 +21,20 @@ export const MRT_EditCellTextField: FC<Props> = ({ cell, instance }) => {
       enableEditing,
       muiTableBodyCellEditTextFieldProps,
       onCellEditBlur,
-      onCellEditChanged,
+      onCellEditChange,
     },
     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.onCellEditChanged?.({ event, cell, instance });
-    onCellEditChanged?.({ 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,
@@ -37,31 +37,26 @@ export const MRT_FilterTextField: FC<Props> = ({
       icons: { FilterListIcon, CloseIcon },
       localization,
       muiTableHeadCellFilterTextFieldProps,
-      onColumnFilterValueChanged,
-      onColumnFilterValueChangedDebounced,
       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;
 
@@ -87,18 +82,6 @@ export const MRT_FilterTextField: FC<Props> = ({
       } else {
         column.setFilterValue(event.target.value ?? undefined);
       }
-      onColumnFilterValueChangedDebounced?.({
-        column,
-        event,
-        filterValue: event.target.value,
-        instance,
-      });
-      columnDef.onColumnFilterValueChangedDebounced?.({
-        column,
-        event,
-        filterValue: event.target.value,
-        instance,
-      });
     }, 200),
     [],
   );
@@ -106,18 +89,6 @@ export const MRT_FilterTextField: FC<Props> = ({
   const handleChange = (event: ChangeEvent<HTMLInputElement>) => {
     setFilterValue(event.target.value);
     handleChangeDebounced(event);
-    onColumnFilterValueChanged?.({
-      column,
-      event,
-      filterValue: event.target.value,
-      instance,
-    });
-    columnDef.onColumnFilterValueChanged?.({
-      column,
-      event,
-      filterValue: event.target.value,
-      instance,
-    });
   };
 
   const handleFilterMenuOpen = (event: MouseEvent<HTMLElement>) => {
@@ -147,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(
@@ -201,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
         }
@@ -329,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,
@@ -29,12 +29,9 @@ export const MRT_GlobalFilterTextField: FC<Props> = ({ instance }) => {
       icons: { SearchIcon, CloseIcon },
       localization,
       muiSearchTextFieldProps,
-      onGlobalFilterValueChanged,
-      onGlobalFilterValueChangedDebounced,
       tableId,
     },
-  } = instance;
-
+  } = table;
   const { globalFilter, showGlobalFilter } = getState();
 
   const [anchorEl, setAnchorEl] = useState<null | HTMLElement>(null);
@@ -43,7 +40,6 @@ export const MRT_GlobalFilterTextField: FC<Props> = ({ instance }) => {
   const handleChangeDebounced = useCallback(
     debounce((event: ChangeEvent<HTMLInputElement>) => {
       setGlobalFilter(event.target.value ?? undefined);
-      onGlobalFilterValueChangedDebounced?.({ event, instance });
     }, 250),
     [],
   );
@@ -51,7 +47,6 @@ export const MRT_GlobalFilterTextField: FC<Props> = ({ instance }) => {
   const handleChange = (event: ChangeEvent<HTMLInputElement>) => {
     setSearchValue(event.target.value);
     handleChangeDebounced(event);
-    onGlobalFilterValueChanged?.({ event, instance });
   };
 
   const handleGlobalFilterMenuOpen = (event: MouseEvent<HTMLElement>) => {
@@ -65,7 +60,7 @@ export const MRT_GlobalFilterTextField: FC<Props> = ({ instance }) => {
 
   const textFieldProps =
     muiSearchTextFieldProps instanceof Function
-      ? muiSearchTextFieldProps({ instance })
+      ? muiSearchTextFieldProps({ table })
       : muiSearchTextFieldProps;
 
   return (
@@ -115,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,64 +5,39 @@ 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 {
-    getRowModel,
-    getPaginationRowModel,
-    getSelectedRowModel,
     getState,
     options: {
       localization,
       muiSelectCheckboxProps,
       muiSelectAllCheckboxProps,
-      onRowSelectionChanged,
-      onRowSelectAllChanged,
       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);
       }
-      onRowSelectAllChanged?.({
-        event,
-        selectedRows: event.target.checked
-          ? selectAllMode === 'all'
-            ? getRowModel().flatRows
-            : getPaginationRowModel().flatRows
-          : [],
-        instance,
-      });
     } else if (row) {
       row?.getToggleSelectedHandler()(event as any);
-      onRowSelectionChanged?.({
-        event,
-        row,
-        selectedRows: event.target.checked
-          ? [...getSelectedRowModel().flatRows, row]
-          : getSelectedRowModel().flatRows.filter(
-              (selectedRow) => selectedRow.id !== row.id,
-            ),
-        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 (
@@ -76,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>