material-react-table 0.8.15 → 0.9.2

package/dist/table/MRT_Table.d.ts

@@ -1,6 +1,7 @@
-import { FC } from 'react';
+import { FC, RefObject } from 'react';
 import { MRT_TableInstance } from '..';
 interface Props {
+    tableContainerRef: RefObject<HTMLDivElement>;
     tableInstance: MRT_TableInstance;
 }
 export declare const MRT_Table: FC<Props>;

package/dist/table/MRT_TableRoot.d.ts

@@ -1,2 +1,3 @@
+/// <reference types="react" />
 import { MaterialReactTableProps } from '../MaterialReactTable';
 export declare const MRT_TableRoot: <D extends Record<string, any> = {}>(props: MaterialReactTableProps<D>) => JSX.Element;

package/dist/toolbar/MRT_LinearProgressBar.d.ts

@@ -1,6 +1,7 @@
 import { FC } from 'react';
 import { MRT_TableInstance } from '..';
 interface Props {
+    alignTo: 'bottom' | 'top';
     tableInstance: MRT_TableInstance;
 }
 export declare const MRT_LinearProgressBar: FC<Props>;

package/dist/utils.d.ts

@@ -7,7 +7,7 @@ export declare const createGroup: <D extends Record<string, any> = {}>(table: Ta
 export declare const createDataColumn: <D extends Record<string, any> = {}>(table: Table<D>, column: MRT_ColumnDef<D>, currentFilterFns: {
     [key: string]: MRT_FilterFn<{}>;
 }) => ColumnDef<D>;
-export declare const createDisplayColumn: <D extends Record<string, any> = {}>(table: Table<D>, column: Pick<MRT_ColumnDef<D>, "accessorFN" | "footer" | "columns" | "filterFn" | "id" | "accessorKey" | "accessorFn" | "cell" | "meta" | "enableHiding" | "enablePinning" | "enableColumnFilter" | "enableGlobalFilter" | "sortingFn" | "sortDescFirst" | "enableSorting" | "enableMultiSort" | "invertSorting" | "sortUndefined" | "aggregationFn" | "aggregatedCell" | "enableGrouping" | "enableResizing" | "size" | "minSize" | "maxSize" | "Edit" | "Filter" | "Footer" | "Header" | "Cell" | "enableClickToCopy" | "enableColumnActions" | "enableColumnOrdering" | "enableEditing" | "enabledColumnFilterOptions" | "filterSelectOptions" | "muiTableBodyCellCopyButtonProps" | "muiTableBodyCellEditTextFieldProps" | "muiTableBodyCellProps" | "muiTableFooterCellProps" | "muiTableHeadCellColumnActionsButtonProps" | "muiTableHeadCellFilterTextFieldProps" | "muiTableHeadCellProps" | "onCellEditBlur" | "onCellEditChange" | "onColumnFilterValueChange"> & {
+export declare const createDisplayColumn: <D extends Record<string, any> = {}>(table: Table<D>, column: Pick<MRT_ColumnDef<D>, "accessorFN" | "footer" | "columns" | "filterFn" | "id" | "accessorKey" | "accessorFn" | "cell" | "meta" | "enableHiding" | "enablePinning" | "enableColumnFilter" | "enableGlobalFilter" | "sortingFn" | "sortDescFirst" | "enableSorting" | "enableMultiSort" | "invertSorting" | "sortUndefined" | "aggregationFn" | "aggregatedCell" | "enableGrouping" | "enableResizing" | "size" | "minSize" | "maxSize" | "Cell" | "Edit" | "Filter" | "Footer" | "Header" | "enableClickToCopy" | "enableColumnActions" | "enableColumnOrdering" | "enableEditing" | "enabledColumnFilterOptions" | "filterSelectOptions" | "muiTableBodyCellCopyButtonProps" | "muiTableBodyCellEditTextFieldProps" | "muiTableBodyCellProps" | "muiTableFooterCellProps" | "muiTableHeadCellColumnActionsButtonProps" | "muiTableHeadCellFilterTextFieldProps" | "muiTableHeadCellProps" | "onMrtCellEditBlur" | "onMrtCellEditChange" | "onMrtFilterValueChange"> & {
     header?: string | undefined;
 }) => ColumnDef<D>;
 export declare const reorderColumn: (movingColumn: MRT_Column, receivingColumn: MRT_Column, columnOrder: ColumnOrderState, setColumnOrder: (updater: Updater<ColumnOrderState>) => void) => void;

package/package.json

@@ -1,5 +1,5 @@
 {
-  "version": "0.8.15",
+  "version": "0.9.2",
   "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.",
@@ -63,14 +63,14 @@
     "@mui/icons-material": "^5.8.2",
     "@mui/material": "^5.8.2",
     "@size-limit/preset-small-lib": "^7.0.8",
-    "@storybook/addon-a11y": "^6.5.6",
-    "@storybook/addon-actions": "^6.5.6",
-    "@storybook/addon-essentials": "^6.5.6",
+    "@storybook/addon-a11y": "^6.5.7",
+    "@storybook/addon-actions": "^6.5.7",
+    "@storybook/addon-essentials": "^6.5.7",
     "@storybook/addon-info": "^5.3.21",
-    "@storybook/addon-links": "^6.5.6",
-    "@storybook/addons": "^6.5.6",
-    "@storybook/react": "^6.5.6",
-    "@types/react": "^18.0.11",
+    "@storybook/addon-links": "^6.5.7",
+    "@storybook/addons": "^6.5.7",
+    "@storybook/react": "^6.5.7",
+    "@types/react": "^18.0.12",
     "@types/react-dom": "^18.0.5",
     "babel-loader": "^8.2.5",
     "eslint": "^8.17.0",
@@ -98,8 +98,9 @@
   },
   "dependencies": {
     "@tanstack/match-sorter-utils": "^8.0.0-alpha.83",
-    "@tanstack/react-table": "^8.0.0-beta.4",
+    "@tanstack/react-table": "^8.0.0-beta.8",
     "react-dnd": "^16.0.1",
-    "react-dnd-html5-backend": "^16.0.1"
+    "react-dnd-html5-backend": "^16.0.1",
+    "react-virtual": "^2.10.4"
   }
 }

package/src/MaterialReactTable.tsx

@@ -109,7 +109,7 @@ export type MRT_TableInstance<D extends Record<string, any> = {}> = Omit<
   getState: () => MRT_TableState<D>;
   options: MaterialReactTableProps<D> & {
     icons: MRT_Icons;
-    idPrefix: string;
+    tableId: string;
     localization: MRT_Localization;
   };
   setCurrentEditingCell: Dispatch<SetStateAction<MRT_Cell | null>>;
@@ -144,6 +144,13 @@ export type MRT_ColumnDef<D extends Record<string, any> = {}> = Omit<
   ColumnDef<D>,
   'accessorFN' | 'header' | 'footer' | 'columns' | 'filterFn'
 > & {
+  Cell?: ({
+    cell,
+    tableInstance,
+  }: {
+    cell: MRT_Cell<D>;
+    tableInstance: MRT_TableInstance<D>;
+  }) => ReactNode;
   Edit?: ({
     cell,
     tableInstance,
@@ -176,13 +183,6 @@ export type MRT_ColumnDef<D extends Record<string, any> = {}> = Omit<
         header: MRT_Header<D>;
         tableInstance: MRT_TableInstance<D>;
       }) => ReactNode);
-  Cell?: ({
-    cell,
-    tableInstance,
-  }: {
-    cell: MRT_Cell<D>;
-    tableInstance: MRT_TableInstance<D>;
-  }) => ReactNode;
   accessorFN?: (row: D) => any;
   columns?: MRT_ColumnDef<D>[];
   enableClickToCopy?: boolean;
@@ -258,7 +258,7 @@ export type MRT_ColumnDef<D extends Record<string, any> = {}> = Omit<
         tableInstance: MRT_TableInstance;
         column: MRT_Column<D>;
       }) => TableCellProps);
-  onCellEditBlur?: ({
+  onMrtCellEditBlur?: ({
     cell,
     event,
     tableInstance,
@@ -267,7 +267,7 @@ export type MRT_ColumnDef<D extends Record<string, any> = {}> = Omit<
     cell: MRT_Cell<D>;
     tableInstance: MRT_TableInstance<D>;
   }) => void;
-  onCellEditChange?: ({
+  onMrtCellEditChange?: ({
     cell,
     event,
     tableInstance,
@@ -276,7 +276,7 @@ export type MRT_ColumnDef<D extends Record<string, any> = {}> = Omit<
     cell: MRT_Cell<D>;
     tableInstance: MRT_TableInstance<D>;
   }) => void;
-  onColumnFilterValueChange?: ({
+  onMrtFilterValueChange?: ({
     column,
     event,
     filterValue,
@@ -352,6 +352,7 @@ export type MaterialReactTableProps<D extends Record<string, any> = {}> =
     enablePersistentState?: boolean;
     enableRowActions?: boolean;
     enableRowNumbers?: boolean;
+    enableRowVirtualization?: boolean;
     enableSelectAll?: boolean;
     enableStickyHeader?: boolean;
     enableTableFooter?: boolean;
@@ -362,7 +363,6 @@ export type MaterialReactTableProps<D extends Record<string, any> = {}> =
     enabledColumnFilterOptions?: (MRT_FILTER_OPTION | string)[];
     enabledGlobalFilterOptions?: (MRT_FILTER_OPTION | string)[];
     icons?: Partial<MRT_Icons>;
-    idPrefix?: string;
     localization?: Partial<MRT_Localization>;
     muiLinearProgressProps?:
       | LinearProgressProps
@@ -525,20 +525,20 @@ export type MaterialReactTableProps<D extends Record<string, any> = {}> =
           tableInstance: MRT_TableInstance;
           headerGroup: MRT_HeaderGroup<D>;
         }) => TableRowProps);
-    muiTablePaperProps?:
-      | PaperProps
+    muiTablePaginationProps?:
+      | Partial<TablePaginationProps>
       | (({
           tableInstance,
         }: {
           tableInstance: MRT_TableInstance;
-        }) => PaperProps);
-    muiTablePaginationProps?:
-      | Partial<TablePaginationProps>
+        }) => Partial<TablePaginationProps>);
+    muiTablePaperProps?:
+      | PaperProps
       | (({
           tableInstance,
         }: {
           tableInstance: MRT_TableInstance;
-        }) => Partial<TablePaginationProps>);
+        }) => PaperProps);
     muiTableProps?:
       | TableProps
       | (({
@@ -567,7 +567,7 @@ export type MaterialReactTableProps<D extends Record<string, any> = {}> =
         }: {
           tableInstance: MRT_TableInstance;
         }) => ToolbarProps);
-    onCellClick?: ({
+    onMrtCellClick?: ({
       cell,
       event,
       tableInstance,
@@ -576,7 +576,7 @@ export type MaterialReactTableProps<D extends Record<string, any> = {}> =
       tableInstance: MRT_TableInstance<D>;
       event: MouseEvent<HTMLTableCellElement>;
     }) => void;
-    onCellEditBlur?: ({
+    onMrtCellEditBlur?: ({
       cell,
       event,
       tableInstance,
@@ -585,7 +585,7 @@ export type MaterialReactTableProps<D extends Record<string, any> = {}> =
       cell: MRT_Cell<D>;
       tableInstance: MRT_TableInstance<D>;
     }) => void;
-    onCellEditChange?: ({
+    onMrtCellEditChange?: ({
       cell,
       event,
       tableInstance,
@@ -594,32 +594,39 @@ export type MaterialReactTableProps<D extends Record<string, any> = {}> =
       cell: MRT_Cell<D>;
       tableInstance: MRT_TableInstance<D>;
     }) => void;
-    onColumnFilterValueChange?: ({
-      column,
+    onMrtDetailPanelClick?: ({
       event,
-      filterValue,
+      row,
+      tableInstance,
     }: {
-      column: MRT_Column<D>;
-      event: ChangeEvent<HTMLInputElement>;
-      filterValue: any;
+      event: MouseEvent<HTMLTableCellElement>;
+      row: MRT_Row<D>;
+      tableInstance: MRT_TableInstance<D>;
     }) => void;
-    onDetailPanelClick?: ({
-      event,
+    onMrtEditRowSubmit?: ({
       row,
       tableInstance,
     }: {
-      event: MouseEvent<HTMLTableCellElement>;
       row: MRT_Row<D>;
       tableInstance: MRT_TableInstance<D>;
+    }) => Promise<void> | void;
+    onMrtFilterValueChange?: ({
+      column,
+      event,
+      filterValue,
+    }: {
+      column: MRT_Column<D>;
+      event: ChangeEvent<HTMLInputElement>;
+      filterValue: any;
     }) => void;
-    onGlobalSearchFilterChange?: ({
+    onMrtGlobalFilterValueChange?: ({
       event,
       tableInstance,
     }: {
       event: ChangeEvent<HTMLInputElement>;
       tableInstance: MRT_TableInstance<D>;
     }) => void;
-    onRowClick?: ({
+    onMrtRowClick?: ({
       event,
       row,
       tableInstance,
@@ -628,14 +635,7 @@ export type MaterialReactTableProps<D extends Record<string, any> = {}> =
       row: MRT_Row<D>;
       tableInstance: MRT_TableInstance<D>;
     }) => void;
-    onEditSubmit?: ({
-      row,
-      tableInstance,
-    }: {
-      row: MRT_Row<D>;
-      tableInstance: MRT_TableInstance<D>;
-    }) => Promise<void> | void;
-    onRowExpandChange?: ({
+    onMrtRowExpandChange?: ({
       event,
       row,
     }: {
@@ -643,7 +643,7 @@ export type MaterialReactTableProps<D extends Record<string, any> = {}> =
       row: MRT_Row<D>;
       tableInstance: MRT_TableInstance<D>;
     }) => void;
-    onSelectAllChange?: ({
+    onMrtSelectAllChange?: ({
       event,
       selectedRows,
       tableInstance,
@@ -652,7 +652,7 @@ export type MaterialReactTableProps<D extends Record<string, any> = {}> =
       selectedRows: MRT_Row<D>[];
       tableInstance: MRT_TableInstance<D>;
     }) => void;
-    onSelectChange?: ({
+    onMrtSelectRowChange?: ({
       event,
       row,
       selectedRows,
@@ -663,7 +663,7 @@ export type MaterialReactTableProps<D extends Record<string, any> = {}> =
       selectedRows: MRT_Row<D>[];
       tableInstance: MRT_TableInstance<D>;
     }) => void;
-    onToggleColumnVisibility?: ({
+    onMrtToggleColumnVisibility?: ({
       column,
       columnVisibility,
       tableInstance,
@@ -672,7 +672,7 @@ export type MaterialReactTableProps<D extends Record<string, any> = {}> =
       columnVisibility: VisibilityState;
       tableInstance: MRT_TableInstance<D>;
     }) => void;
-    onToggleDensePadding?: ({
+    onMrtToggleDensePadding?: ({
       event,
       isDensePadding,
       tableInstance,
@@ -681,7 +681,7 @@ export type MaterialReactTableProps<D extends Record<string, any> = {}> =
       isDensePadding: boolean;
       tableInstance: MRT_TableInstance<D>;
     }) => void;
-    onToggleFullScreen?: ({
+    onMrtToggleFullScreen?: ({
       event,
       isFullScreen,
       tableInstance,
@@ -690,7 +690,7 @@ export type MaterialReactTableProps<D extends Record<string, any> = {}> =
       isFullScreen: boolean;
       tableInstance: MRT_TableInstance<D>;
     }) => void;
-    onToggleShowFilters?: ({
+    onMrtToggleShowFilters?: ({
       event,
       showFilters,
       tableInstance,
@@ -699,7 +699,7 @@ export type MaterialReactTableProps<D extends Record<string, any> = {}> =
       showFilters: boolean;
       tableInstance: MRT_TableInstance<D>;
     }) => void;
-    onToggleShowGlobalFilter?: ({
+    onMrtToggleShowGlobalFilter?: ({
       event,
       showGlobalFilter,
       tableInstance,
@@ -711,6 +711,7 @@ export type MaterialReactTableProps<D extends Record<string, any> = {}> =
     persistentStateMode?: 'localStorage' | 'sessionStorage';
     positionActionsColumn?: 'first' | 'last';
     positionPagination?: 'bottom' | 'top' | 'both';
+    positionGlobalFilter?: 'left' | 'right';
     positionToolbarActions?: 'bottom' | 'top';
     positionToolbarAlertBanner?: 'bottom' | 'top';
     renderDetailPanel?: ({
@@ -767,6 +768,7 @@ export type MaterialReactTableProps<D extends Record<string, any> = {}> =
       >;
     }) => ReactNode;
     selectAllMode?: 'all' | 'page';
+    tableId?: string;
   };
 
 export default <D extends Record<string, any> = {}>({
@@ -801,6 +803,7 @@ export default <D extends Record<string, any> = {}>({
   persistentStateMode = 'sessionStorage',
   positionActionsColumn = 'first',
   positionPagination = 'bottom',
+  positionGlobalFilter = 'right',
   positionToolbarActions = 'top',
   positionToolbarAlertBanner = 'top',
   selectAllMode = 'all',
@@ -837,6 +840,7 @@ export default <D extends Record<string, any> = {}>({
     localization={{ ...MRT_DefaultLocalization_EN, ...localization }}
     persistentStateMode={persistentStateMode}
     positionActionsColumn={positionActionsColumn}
+    positionGlobalFilter={positionGlobalFilter}
     positionPagination={positionPagination}
     positionToolbarActions={positionToolbarActions}
     positionToolbarAlertBanner={positionToolbarAlertBanner}

package/src/body/MRT_TableBody.tsx

@@ -1,37 +1,76 @@
-import React, { FC } from 'react';
+import React, { FC, RefObject } from 'react';
 import { TableBody } from '@mui/material';
 import { MRT_TableBodyRow } from './MRT_TableBodyRow';
-import { MRT_TableInstance } from '..';
+import { MRT_Row, MRT_TableInstance } from '..';
+import { useVirtual } from 'react-virtual';
 
 interface Props {
   tableInstance: MRT_TableInstance;
+  tableContainerRef: RefObject<HTMLDivElement>;
 }
 
-export const MRT_TableBody: FC<Props> = ({ tableInstance }) => {
+export const MRT_TableBody: FC<Props> = ({
+  tableInstance,
+  tableContainerRef,
+}) => {
   const {
     getPaginationRowModel,
     getPrePaginationRowModel,
-    options: { enablePagination, muiTableBodyProps },
+    getState,
+    options: { enablePagination, enableRowVirtualization, muiTableBodyProps },
   } = tableInstance;
 
-  const rows = enablePagination
-    ? getPaginationRowModel().rows
-    : getPrePaginationRowModel().rows;
+  const { isDensePadding } = getState();
 
   const tableBodyProps =
     muiTableBodyProps instanceof Function
       ? muiTableBodyProps({ tableInstance })
       : muiTableBodyProps;
 
+  const rows = enablePagination
+    ? getPaginationRowModel().rows
+    : getPrePaginationRowModel().rows;
+
+  const rowVirtualizer = useVirtual({
+    overscan: isDensePadding ? 15 : 5,
+    size: rows.length,
+    parentRef: tableContainerRef,
+  });
+
+  const { virtualItems: virtualRows } = rowVirtualizer;
+  const paddingTop = virtualRows.length > 0 ? virtualRows[0].start : 0;
+  const paddingBottom =
+    virtualRows.length > 0
+      ? rowVirtualizer.totalSize - virtualRows[virtualRows.length - 1].end
+      : 0;
+
   return (
     <TableBody {...tableBodyProps}>
-      {rows.map((row) => (
-        <MRT_TableBodyRow
-          key={row.id}
-          row={row}
-          tableInstance={tableInstance}
-        />
-      ))}
+      {enableRowVirtualization && paddingTop > 0 && (
+        <tr>
+          <td style={{ height: `${paddingTop}px` }} />
+        </tr>
+      )}
+      {/* @ts-ignore */}
+      {(enableRowVirtualization ? virtualRows : rows).map(
+        (rowOrVirtualRow: any) => {
+          const row = enableRowVirtualization
+            ? (rows[rowOrVirtualRow.index] as MRT_Row)
+            : (rowOrVirtualRow as MRT_Row);
+          return (
+            <MRT_TableBodyRow
+              key={row.id}
+              row={row}
+              tableInstance={tableInstance}
+            />
+          );
+        },
+      )}
+      {enableRowVirtualization && paddingBottom > 0 && (
+        <tr>
+          <td style={{ height: `${paddingBottom}px` }} />
+        </tr>
+      )}
     </TableBody>
   );
 };

package/src/body/MRT_TableBodyCell.tsx

@@ -24,10 +24,10 @@ export const MRT_TableBodyCell: FC<Props> = ({
       enableClickToCopy,
       enableColumnOrdering,
       enableEditing,
-      idPrefix,
+      tableId,
       muiTableBodyCellProps,
       muiTableBodyCellSkeletonProps,
-      onCellClick,
+      onMrtCellClick,
     },
     setColumnOrder,
     setCurrentEditingCell,
@@ -95,7 +95,7 @@ export const MRT_TableBodyCell: FC<Props> = ({
       setCurrentEditingCell(cell);
       setTimeout(() => {
         const textField = document.getElementById(
-          `mrt-${idPrefix}-edit-cell-text-field-${cell.id}`,
+          `mrt-${tableId}-edit-cell-text-field-${cell.id}`,
         ) as HTMLInputElement;
         if (textField) {
           textField.focus();
@@ -128,7 +128,7 @@ export const MRT_TableBodyCell: FC<Props> = ({
   return (
     <TableCell
       onClick={(event: MouseEvent<HTMLTableCellElement>) =>
-        onCellClick?.({ event, cell, tableInstance })
+        onMrtCellClick?.({ event, cell, tableInstance })
       }
       onDoubleClick={handleDoubleClick}
       {...tableCellProps}
@@ -167,11 +167,15 @@ export const MRT_TableBodyCell: FC<Props> = ({
         whiteSpace: isDensePadding ? 'nowrap' : 'normal',
         zIndex: column.getIsPinned() ? 1 : undefined,
         '&:hover': {
-          backgroundColor: enableHover
-            ? theme.palette.mode === 'dark'
-              ? `${lighten(theme.palette.background.default, 0.13)} !important`
-              : `${darken(theme.palette.background.default, 0.07)} !important`
-            : undefined,
+          backgroundColor:
+            enableHover && enableEditing && editingMode !== 'row'
+              ? theme.palette.mode === 'dark'
+                ? `${lighten(
+                    theme.palette.background.default,
+                    0.13,
+                  )} !important`
+                : `${darken(theme.palette.background.default, 0.07)} !important`
+              : undefined,
         },
         ...(tableCellProps?.sx as any),
       })}

package/src/body/MRT_TableBodyRow.tsx

@@ -11,7 +11,8 @@ interface Props {
 
 export const MRT_TableBodyRow: FC<Props> = ({ row, tableInstance }) => {
   const {
-    options: { muiTableBodyRowProps, onRowClick, renderDetailPanel },
+    getIsSomeColumnsPinned,
+    options: { muiTableBodyRowProps, onMrtRowClick, renderDetailPanel },
   } = tableInstance;
 
   const tableRowProps =
@@ -24,7 +25,7 @@ export const MRT_TableBodyRow: FC<Props> = ({ row, tableInstance }) => {
       <TableRow
         hover
         onClick={(event: MouseEvent<HTMLTableRowElement>) =>
-          onRowClick?.({ event, row, tableInstance })
+          onMrtRowClick?.({ event, row, tableInstance })
         }
         selected={row.getIsSelected()}
         {...tableRowProps}
@@ -33,7 +34,7 @@ export const MRT_TableBodyRow: FC<Props> = ({ row, tableInstance }) => {
           transition: 'all 0.2s ease-in-out',
           '&:hover td': {
             backgroundColor:
-              tableRowProps?.hover !== false
+              tableRowProps?.hover !== false && getIsSomeColumnsPinned()
                 ? theme.palette.mode === 'dark'
                   ? `${lighten(theme.palette.background.default, 0.12)}`
                   : `${darken(theme.palette.background.default, 0.05)}`

package/src/body/MRT_TableDetailPanel.tsx

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

package/src/buttons/MRT_EditActionButtons.tsx

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

package/src/buttons/MRT_ExpandButton.tsx

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

package/src/buttons/MRT_FullScreenToggleButton.tsx

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

package/src/buttons/MRT_ToggleDensePaddingButton.tsx

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

package/src/buttons/MRT_ToggleFiltersButton.tsx

@@ -15,7 +15,7 @@ export const MRT_ToggleFiltersButton: FC<Props> = ({
     options: {
       icons: { FilterListIcon, FilterListOffIcon },
       localization,
-      onToggleShowFilters,
+      onMrtToggleShowFilters,
     },
     setShowFilters,
   } = tableInstance;
@@ -23,7 +23,7 @@ export const MRT_ToggleFiltersButton: FC<Props> = ({
   const { showFilters } = getState();
 
   const handleToggleShowFilters = (event: MouseEvent<HTMLButtonElement>) => {
-    onToggleShowFilters?.({
+    onMrtToggleShowFilters?.({
       event,
       showFilters: !showFilters,
       tableInstance,