material-react-table 0.10.0 → 0.11.0

package/package.json

@@ -1,5 +1,5 @@
 {
-  "version": "0.10.0",
+  "version": "0.11.0",
   "license": "MIT",
   "name": "material-react-table",
   "description": "A fully featured Material UI implementation of TanStack React Table, inspired by material-table and the MUI X DataGrid, written from the ground up in TypeScript.",

package/src/MaterialReactTable.tsx

@@ -272,7 +272,7 @@ export type MRT_ColumnDef<D extends Record<string, any> = {}> = Omit<
         instance: MRT_TableInstance;
         column: MRT_Column<D>;
       }) => TableCellProps);
-  onMrtCellEditBlur?: ({
+  onHandleCellEditBlur?: ({
     cell,
     event,
     instance,
@@ -281,7 +281,7 @@ export type MRT_ColumnDef<D extends Record<string, any> = {}> = Omit<
     cell: MRT_Cell<D>;
     instance: MRT_TableInstance<D>;
   }) => void;
-  onMrtCellEditChange?: ({
+  onHandleCellEditChange?: ({
     cell,
     event,
     instance,
@@ -290,7 +290,7 @@ export type MRT_ColumnDef<D extends Record<string, any> = {}> = Omit<
     cell: MRT_Cell<D>;
     instance: MRT_TableInstance<D>;
   }) => void;
-  onMrtFilterValueChange?: ({
+  onHandleFilterValueChange?: ({
     column,
     event,
     filterValue,
@@ -566,7 +566,7 @@ export type MaterialReactTableProps<D extends Record<string, any> = {}> =
     onCurrentGlobalFilterFnChange?: OnChangeFn<MRT_FilterFn>;
     onIsDensePaddingChange?: OnChangeFn<boolean>;
     onIsFullScreenChange?: OnChangeFn<boolean>;
-    onMrtCellClick?: ({
+    onHandleCellClick?: ({
       cell,
       event,
       instance,
@@ -575,7 +575,7 @@ export type MaterialReactTableProps<D extends Record<string, any> = {}> =
       instance: MRT_TableInstance<D>;
       event: MouseEvent<HTMLTableCellElement>;
     }) => void;
-    onMrtCellEditBlur?: ({
+    onHandleCellEditBlur?: ({
       cell,
       event,
       instance,
@@ -584,7 +584,7 @@ export type MaterialReactTableProps<D extends Record<string, any> = {}> =
       cell: MRT_Cell<D>;
       instance: MRT_TableInstance<D>;
     }) => void;
-    onMrtCellEditChange?: ({
+    onHandleCellEditChange?: ({
       cell,
       event,
       instance,
@@ -593,7 +593,7 @@ export type MaterialReactTableProps<D extends Record<string, any> = {}> =
       cell: MRT_Cell<D>;
       instance: MRT_TableInstance<D>;
     }) => void;
-    onMrtDetailPanelClick?: ({
+    onHandleDetailPanelClick?: ({
       event,
       row,
       instance,
@@ -602,14 +602,14 @@ export type MaterialReactTableProps<D extends Record<string, any> = {}> =
       row: MRT_Row<D>;
       instance: MRT_TableInstance<D>;
     }) => void;
-    onMrtEditRowSubmit?: ({
+    onHandleEditRowSubmit?: ({
       row,
       instance,
     }: {
       row: MRT_Row<D>;
       instance: MRT_TableInstance<D>;
     }) => Promise<void> | void;
-    onMrtFilterValueChange?: ({
+    onHandleFilterValueChange?: ({
       column,
       event,
       filterValue,
@@ -618,14 +618,14 @@ export type MaterialReactTableProps<D extends Record<string, any> = {}> =
       event: ChangeEvent<HTMLInputElement>;
       filterValue: any;
     }) => void;
-    onMrtGlobalFilterValueChange?: ({
+    onHandleGlobalFilterValueChange?: ({
       event,
       instance,
     }: {
       event: ChangeEvent<HTMLInputElement>;
       instance: MRT_TableInstance<D>;
     }) => void;
-    onMrtRowClick?: ({
+    onHandleRowClick?: ({
       event,
       row,
       instance,
@@ -634,7 +634,7 @@ export type MaterialReactTableProps<D extends Record<string, any> = {}> =
       row: MRT_Row<D>;
       instance: MRT_TableInstance<D>;
     }) => void;
-    onMrtRowExpandChange?: ({
+    onHandleRowExpandChange?: ({
       event,
       row,
     }: {
@@ -642,7 +642,7 @@ export type MaterialReactTableProps<D extends Record<string, any> = {}> =
       row: MRT_Row<D>;
       instance: MRT_TableInstance<D>;
     }) => void;
-    onMrtSelectAllChange?: ({
+    onHandleSelectAllChange?: ({
       event,
       selectedRows,
       instance,
@@ -651,7 +651,7 @@ export type MaterialReactTableProps<D extends Record<string, any> = {}> =
       selectedRows: MRT_Row<D>[];
       instance: MRT_TableInstance<D>;
     }) => void;
-    onMrtSelectRowChange?: ({
+    onHandleSelectRowChange?: ({
       event,
       row,
       selectedRows,
@@ -662,7 +662,7 @@ export type MaterialReactTableProps<D extends Record<string, any> = {}> =
       selectedRows: MRT_Row<D>[];
       instance: MRT_TableInstance<D>;
     }) => void;
-    onMrtToggleColumnVisibility?: ({
+    onHandleToggleColumnVisibility?: ({
       column,
       columnVisibility,
       instance,
@@ -671,7 +671,7 @@ export type MaterialReactTableProps<D extends Record<string, any> = {}> =
       columnVisibility: VisibilityState;
       instance: MRT_TableInstance<D>;
     }) => void;
-    onMrtToggleDensePadding?: ({
+    onHandleToggleDensePadding?: ({
       event,
       isDensePadding,
       instance,
@@ -680,7 +680,7 @@ export type MaterialReactTableProps<D extends Record<string, any> = {}> =
       isDensePadding: boolean;
       instance: MRT_TableInstance<D>;
     }) => void;
-    onMrtToggleFullScreen?: ({
+    onHandleToggleFullScreen?: ({
       event,
       isFullScreen,
       instance,
@@ -689,7 +689,7 @@ export type MaterialReactTableProps<D extends Record<string, any> = {}> =
       isFullScreen: boolean;
       instance: MRT_TableInstance<D>;
     }) => void;
-    onMrtToggleShowFilters?: ({
+    onHandleToggleShowFilters?: ({
       event,
       showFilters,
       instance,
@@ -698,7 +698,7 @@ export type MaterialReactTableProps<D extends Record<string, any> = {}> =
       showFilters: boolean;
       instance: MRT_TableInstance<D>;
     }) => void;
-    onMrtToggleShowGlobalFilter?: ({
+    onHandleToggleShowGlobalFilter?: ({
       event,
       showGlobalFilter,
       instance,

package/src/body/MRT_TableBodyCell.tsx

@@ -29,7 +29,7 @@ export const MRT_TableBodyCell: FC<Props> = ({
       enableRowNumbers,
       muiTableBodyCellProps,
       muiTableBodyCellSkeletonProps,
-      onMrtCellClick,
+      onHandleCellClick,
       rowNumberMode,
       tableId,
     },
@@ -130,7 +130,7 @@ export const MRT_TableBodyCell: FC<Props> = ({
   return (
     <TableCell
       onClick={(event: MouseEvent<HTMLTableCellElement>) =>
-        onMrtCellClick?.({ event, cell, instance })
+        onHandleCellClick?.({ event, cell, instance })
       }
       onDoubleClick={handleDoubleClick}
       {...tableCellProps}

package/src/body/MRT_TableBodyRow.tsx

@@ -13,7 +13,7 @@ interface Props {
 export const MRT_TableBodyRow: FC<Props> = ({ row, rowIndex, instance }) => {
   const {
     getIsSomeColumnsPinned,
-    options: { muiTableBodyRowProps, onMrtRowClick, renderDetailPanel },
+    options: { muiTableBodyRowProps, onHandleRowClick, renderDetailPanel },
   } = instance;
 
   const tableRowProps =
@@ -26,7 +26,7 @@ export const MRT_TableBodyRow: FC<Props> = ({ row, rowIndex, instance }) => {
       <TableRow
         hover
         onClick={(event: MouseEvent<HTMLTableRowElement>) =>
-          onMrtRowClick?.({ event, row, instance })
+          onHandleRowClick?.({ event, row, instance })
         }
         selected={row.getIsSelected()}
         {...tableRowProps}

package/src/body/MRT_TableDetailPanel.tsx

@@ -13,7 +13,7 @@ export const MRT_TableDetailPanel: FC<Props> = ({ row, instance }) => {
     options: {
       muiTableBodyRowProps,
       muiTableDetailPanelProps,
-      onMrtDetailPanelClick,
+      onHandleDetailPanelClick,
       renderDetailPanel,
     },
   } = instance;
@@ -33,7 +33,7 @@ export const MRT_TableDetailPanel: FC<Props> = ({ row, instance }) => {
       <TableCell
         colSpan={getVisibleLeafColumns().length}
         onClick={(event: MouseEvent<HTMLTableCellElement>) =>
-          onMrtDetailPanelClick?.({ event, row, instance })
+          onHandleDetailPanelClick?.({ event, row, instance })
         }
         {...tableCellProps}
         sx={{

package/src/buttons/MRT_EditActionButtons.tsx

@@ -13,7 +13,7 @@ export const MRT_EditActionButtons: FC<Props> = ({ row, instance }) => {
     options: {
       icons: { CancelIcon, SaveIcon },
       localization,
-      onMrtEditRowSubmit,
+      onHandleEditRowSubmit,
     },
     setCurrentEditingRow,
   } = instance;
@@ -26,7 +26,7 @@ export const MRT_EditActionButtons: FC<Props> = ({ row, instance }) => {
   };
 
   const handleSave = () => {
-    onMrtEditRowSubmit?.({ row: currentEditingRow ?? row, instance });
+    onHandleEditRowSubmit?.({ row: currentEditingRow ?? row, instance });
     setCurrentEditingRow(null);
   };
 

package/src/buttons/MRT_ExpandButton.tsx

@@ -13,7 +13,7 @@ export const MRT_ExpandButton: FC<Props> = ({ row, instance }) => {
     options: {
       icons: { ExpandMoreIcon },
       localization,
-      onMrtRowExpandChange,
+      onHandleRowExpandChange,
       renderDetailPanel,
     },
   } = instance;
@@ -22,7 +22,7 @@ export const MRT_ExpandButton: FC<Props> = ({ row, instance }) => {
 
   const handleToggleExpand = (event: MouseEvent<HTMLButtonElement>) => {
     row.toggleExpanded();
-    onMrtRowExpandChange?.({ event, row, instance });
+    onHandleRowExpandChange?.({ event, row, instance });
   };
 
   return (

package/src/buttons/MRT_FullScreenToggleButton.tsx

@@ -15,7 +15,7 @@ export const MRT_FullScreenToggleButton: FC<Props> = ({
     options: {
       icons: { FullscreenExitIcon, FullscreenIcon },
       localization,
-      onMrtToggleFullScreen,
+      onHandleToggleFullScreen,
     },
     setIsFullScreen,
   } = instance;
@@ -23,7 +23,7 @@ export const MRT_FullScreenToggleButton: FC<Props> = ({
   const { isFullScreen } = getState();
 
   const handleToggleFullScreen = (event: MouseEvent<HTMLButtonElement>) => {
-    onMrtToggleFullScreen?.({
+    onHandleToggleFullScreen?.({
       event,
       isFullScreen: !isFullScreen,
       instance,

package/src/buttons/MRT_ToggleDensePaddingButton.tsx

@@ -15,7 +15,7 @@ export const MRT_ToggleDensePaddingButton: FC<Props> = ({
     options: {
       icons: { DensityMediumIcon, DensitySmallIcon },
       localization,
-      onMrtToggleDensePadding,
+      onHandleToggleDensePadding,
     },
     setIsDensePadding,
   } = instance;
@@ -23,7 +23,7 @@ export const MRT_ToggleDensePaddingButton: FC<Props> = ({
   const { isDensePadding } = getState();
 
   const handleToggleDensePadding = (event: MouseEvent<HTMLButtonElement>) => {
-    onMrtToggleDensePadding?.({
+    onHandleToggleDensePadding?.({
       event,
       isDensePadding: !isDensePadding,
       instance,

package/src/buttons/MRT_ToggleFiltersButton.tsx

@@ -12,7 +12,7 @@ export const MRT_ToggleFiltersButton: FC<Props> = ({ instance, ...rest }) => {
     options: {
       icons: { FilterListIcon, FilterListOffIcon },
       localization,
-      onMrtToggleShowFilters,
+      onHandleToggleShowFilters,
     },
     setShowFilters,
   } = instance;
@@ -20,7 +20,7 @@ export const MRT_ToggleFiltersButton: FC<Props> = ({ instance, ...rest }) => {
   const { showFilters } = getState();
 
   const handleToggleShowFilters = (event: MouseEvent<HTMLButtonElement>) => {
-    onMrtToggleShowFilters?.({
+    onHandleToggleShowFilters?.({
       event,
       showFilters: !showFilters,
       instance,

package/src/buttons/MRT_ToggleGlobalFilterButton.tsx

@@ -17,7 +17,7 @@ export const MRT_ToggleGlobalFilterButton: FC<Props> = ({
       tableId,
       localization,
       muiSearchTextFieldProps,
-      onMrtToggleShowGlobalFilter,
+      onHandleToggleShowGlobalFilter,
     },
     setShowGlobalFilter,
   } = instance;
@@ -30,7 +30,7 @@ export const MRT_ToggleGlobalFilterButton: FC<Props> = ({
       : muiSearchTextFieldProps;
 
   const handleToggleSearch = (event: MouseEvent<HTMLButtonElement>) => {
-    onMrtToggleShowGlobalFilter?.({
+    onHandleToggleShowGlobalFilter?.({
       event,
       showGlobalFilter: !showGlobalFilter,
       instance,

package/src/inputs/MRT_EditCellTextField.tsx

@@ -20,8 +20,8 @@ export const MRT_EditCellTextField: FC<Props> = ({ cell, instance }) => {
       tableId,
       enableEditing,
       muiTableBodyCellEditTextFieldProps,
-      onMrtCellEditBlur,
-      onMrtCellEditChange,
+      onHandleCellEditBlur,
+      onHandleCellEditChange,
     },
     setCurrentEditingCell,
     setCurrentEditingRow,
@@ -35,8 +35,8 @@ export const MRT_EditCellTextField: FC<Props> = ({ cell, instance }) => {
 
   const handleChange = (event: ChangeEvent<HTMLInputElement>) => {
     setValue(event.target.value);
-    columnDef.onMrtCellEditChange?.({ event, cell, instance });
-    onMrtCellEditChange?.({ event, cell, instance });
+    columnDef.onHandleCellEditChange?.({ event, cell, instance });
+    onHandleCellEditChange?.({ event, cell, instance });
   };
 
   const handleBlur = (event: FocusEvent<HTMLInputElement>) => {
@@ -46,8 +46,8 @@ export const MRT_EditCellTextField: FC<Props> = ({ cell, instance }) => {
       setCurrentEditingRow({ ...getState().currentEditingRow } as MRT_Row);
     }
     setCurrentEditingCell(null);
-    columnDef.onMrtCellEditBlur?.({ event, cell, instance });
-    onMrtCellEditBlur?.({ event, cell, instance });
+    columnDef.onHandleCellEditBlur?.({ event, cell, instance });
+    onHandleCellEditBlur?.({ event, cell, instance });
   };
 
   const mTableBodyCellEditTextFieldProps =

package/src/inputs/MRT_SearchTextField.tsx

@@ -29,7 +29,7 @@ export const MRT_SearchTextField: FC<Props> = ({ instance }) => {
       tableId,
       localization,
       muiSearchTextFieldProps,
-      onMrtGlobalFilterValueChange,
+      onHandleGlobalFilterValueChange,
     },
   } = instance;
 
@@ -41,7 +41,7 @@ export const MRT_SearchTextField: FC<Props> = ({ instance }) => {
   const handleChange = useCallback(
     debounce((event: ChangeEvent<HTMLInputElement>) => {
       setGlobalFilter(event.target.value ?? undefined);
-      onMrtGlobalFilterValueChange?.({ event, instance });
+      onHandleGlobalFilterValueChange?.({ event, instance });
     }, 200),
     [],
   );

package/src/inputs/MRT_SelectCheckbox.tsx

@@ -16,8 +16,8 @@ export const MRT_SelectCheckbox: FC<Props> = ({ row, selectAll, instance }) => {
     options: {
       localization,
       muiSelectCheckboxProps,
-      onMrtSelectRowChange,
-      onMrtSelectAllChange,
+      onHandleSelectRowChange,
+      onHandleSelectAllChange,
       selectAllMode,
     },
   } = instance;
@@ -31,14 +31,14 @@ export const MRT_SelectCheckbox: FC<Props> = ({ row, selectAll, instance }) => {
       } else if (selectAllMode === 'page') {
         instance.getToggleAllPageRowsSelectedHandler()(event as any);
       }
-      onMrtSelectAllChange?.({
+      onHandleSelectAllChange?.({
         event,
         selectedRows: event.target.checked ? getRowModel().flatRows : [],
         instance,
       });
     } else if (row) {
       row?.getToggleSelectedHandler()(event as any);
-      onMrtSelectRowChange?.({
+      onHandleSelectRowChange?.({
         event,
         row,
         selectedRows: event.target.checked

package/src/menus/MRT_ShowHideColumnsMenuItems.tsx

@@ -21,7 +21,7 @@ export const MRT_ShowHideColumnsMenuItems: FC<Props> = ({
 }) => {
   const {
     getState,
-    options: { enableColumnOrdering, onMrtToggleColumnVisibility },
+    options: { enableColumnOrdering, onHandleToggleColumnVisibility },
     setColumnOrder,
   } = instance;
 
@@ -56,7 +56,7 @@ export const MRT_ShowHideColumnsMenuItems: FC<Props> = ({
     } else {
       column.toggleVisibility();
     }
-    onMrtToggleColumnVisibility?.({
+    onHandleToggleColumnVisibility?.({
       column,
       columnVisibility,
       instance,