material-react-table 0.8.15 → 0.9.0

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.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

@@ -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,
@@ -362,7 +362,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 +524,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 +566,7 @@ export type MaterialReactTableProps<D extends Record<string, any> = {}> =
         }: {
           tableInstance: MRT_TableInstance;
         }) => ToolbarProps);
-    onCellClick?: ({
+    onMrtCellClick?: ({
       cell,
       event,
       tableInstance,
@@ -576,7 +575,7 @@ export type MaterialReactTableProps<D extends Record<string, any> = {}> =
       tableInstance: MRT_TableInstance<D>;
       event: MouseEvent<HTMLTableCellElement>;
     }) => void;
-    onCellEditBlur?: ({
+    onMrtCellEditBlur?: ({
       cell,
       event,
       tableInstance,
@@ -585,7 +584,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 +593,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 +634,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 +642,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 +651,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 +662,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 +671,7 @@ export type MaterialReactTableProps<D extends Record<string, any> = {}> =
       columnVisibility: VisibilityState;
       tableInstance: MRT_TableInstance<D>;
     }) => void;
-    onToggleDensePadding?: ({
+    onMrtToggleDensePadding?: ({
       event,
       isDensePadding,
       tableInstance,
@@ -681,7 +680,7 @@ export type MaterialReactTableProps<D extends Record<string, any> = {}> =
       isDensePadding: boolean;
       tableInstance: MRT_TableInstance<D>;
     }) => void;
-    onToggleFullScreen?: ({
+    onMrtToggleFullScreen?: ({
       event,
       isFullScreen,
       tableInstance,
@@ -690,7 +689,7 @@ export type MaterialReactTableProps<D extends Record<string, any> = {}> =
       isFullScreen: boolean;
       tableInstance: MRT_TableInstance<D>;
     }) => void;
-    onToggleShowFilters?: ({
+    onMrtToggleShowFilters?: ({
       event,
       showFilters,
       tableInstance,
@@ -699,7 +698,7 @@ export type MaterialReactTableProps<D extends Record<string, any> = {}> =
       showFilters: boolean;
       tableInstance: MRT_TableInstance<D>;
     }) => void;
-    onToggleShowGlobalFilter?: ({
+    onMrtToggleShowGlobalFilter?: ({
       event,
       showGlobalFilter,
       tableInstance,
@@ -711,6 +710,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 +767,7 @@ export type MaterialReactTableProps<D extends Record<string, any> = {}> =
       >;
     }) => ReactNode;
     selectAllMode?: 'all' | 'page';
+    tableId?: string;
   };
 
 export default <D extends Record<string, any> = {}>({
@@ -801,6 +802,7 @@ export default <D extends Record<string, any> = {}>({
   persistentStateMode = 'sessionStorage',
   positionActionsColumn = 'first',
   positionPagination = 'bottom',
+  positionGlobalFilter = 'right',
   positionToolbarActions = 'top',
   positionToolbarAlertBanner = 'top',
   selectAllMode = 'all',
@@ -837,6 +839,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_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}

package/src/body/MRT_TableBodyRow.tsx

@@ -11,7 +11,7 @@ interface Props {
 
 export const MRT_TableBodyRow: FC<Props> = ({ row, tableInstance }) => {
   const {
-    options: { muiTableBodyRowProps, onRowClick, renderDetailPanel },
+    options: { muiTableBodyRowProps, onMrtRowClick, renderDetailPanel },
   } = tableInstance;
 
   const tableRowProps =
@@ -24,7 +24,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}

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,

package/src/buttons/MRT_ToggleGlobalFilterButton.tsx

@@ -14,10 +14,10 @@ export const MRT_ToggleGlobalFilterButton: FC<Props> = ({
     getState,
     options: {
       icons: { SearchIcon, SearchOffIcon },
-      idPrefix,
+      tableId,
       localization,
       muiSearchTextFieldProps,
-      onToggleShowGlobalFilter,
+      onMrtToggleShowGlobalFilter,
     },
     setShowGlobalFilter,
   } = tableInstance;
@@ -30,7 +30,7 @@ export const MRT_ToggleGlobalFilterButton: FC<Props> = ({
       : muiSearchTextFieldProps;
 
   const handleToggleSearch = (event: MouseEvent<HTMLButtonElement>) => {
-    onToggleShowGlobalFilter?.({
+    onMrtToggleShowGlobalFilter?.({
       event,
       showGlobalFilter: !showGlobalFilter,
       tableInstance,
@@ -40,7 +40,7 @@ export const MRT_ToggleGlobalFilterButton: FC<Props> = ({
       () =>
         document
           .getElementById(
-            textFieldProps?.id ?? `mrt-${idPrefix}-search-text-field`,
+            textFieldProps?.id ?? `mrt-${tableId}-search-text-field`,
           )
           ?.focus(),
       200,

package/src/head/MRT_TableHeadCellFilterLabel.tsx

@@ -67,6 +67,7 @@ export const MRT_TableHeadCellFilterLabel: FC<Props> = ({
           opacity: !!column.getFilterValue() || showFilters ? 0.8 : 0,
           p: '2px',
           transition: 'all 0.2s ease-in-out',
+          transform: 'scale(0.66)',
           '&:hover': {
             backgroundColor: 'transparent',
             opacity: 0.8,

package/src/inputs/MRT_EditCellTextField.tsx

@@ -17,11 +17,11 @@ export const MRT_EditCellTextField: FC<Props> = ({ cell, tableInstance }) => {
   const {
     getState,
     options: {
-      idPrefix,
+      tableId,
       enableEditing,
       muiTableBodyCellEditTextFieldProps,
-      onCellEditBlur,
-      onCellEditChange,
+      onMrtCellEditBlur,
+      onMrtCellEditChange,
     },
     setCurrentEditingCell,
     setCurrentEditingRow,
@@ -35,8 +35,8 @@ export const MRT_EditCellTextField: FC<Props> = ({ cell, tableInstance }) => {
 
   const handleChange = (event: ChangeEvent<HTMLInputElement>) => {
     setValue(event.target.value);
-    columnDef.onCellEditChange?.({ event, cell, tableInstance });
-    onCellEditChange?.({ event, cell, tableInstance });
+    columnDef.onMrtCellEditChange?.({ event, cell, tableInstance });
+    onMrtCellEditChange?.({ event, cell, tableInstance });
   };
 
   const handleBlur = (event: FocusEvent<HTMLInputElement>) => {
@@ -46,8 +46,8 @@ export const MRT_EditCellTextField: FC<Props> = ({ cell, tableInstance }) => {
       setCurrentEditingRow({ ...getState().currentEditingRow } as MRT_Row);
     }
     setCurrentEditingCell(null);
-    columnDef.onCellEditBlur?.({ event, cell, tableInstance });
-    onCellEditBlur?.({ event, cell, tableInstance });
+    columnDef.onMrtCellEditBlur?.({ event, cell, tableInstance });
+    onMrtCellEditBlur?.({ event, cell, tableInstance });
   };
 
   const mTableBodyCellEditTextFieldProps =
@@ -74,7 +74,7 @@ export const MRT_EditCellTextField: FC<Props> = ({ cell, tableInstance }) => {
 
   return (
     <TextField
-      id={`mrt-${idPrefix}-edit-cell-text-field-${cell.id}`}
+      id={`mrt-${tableId}-edit-cell-text-field-${cell.id}`}
       margin="dense"
       onBlur={handleBlur}
       onChange={handleChange}

package/src/inputs/MRT_FilterTextField.tsx

@@ -34,7 +34,7 @@ export const MRT_FilterTextField: FC<Props> = ({
     getState,
     options: {
       icons: { FilterListIcon, CloseIcon },
-      idPrefix,
+      tableId,
       localization,
       muiTableHeadCellFilterTextFieldProps,
     },
@@ -118,7 +118,7 @@ export const MRT_FilterTextField: FC<Props> = ({
     return <>{columnDef.Filter?.({ header, tableInstance })}</>;
   }
 
-  const filterId = `mrt-${idPrefix}-${header.id}-filter-text-field${
+  const filterId = `mrt-${tableId}-${header.id}-filter-text-field${
     inputIndex ?? ''
   }`;
   const filterFn = currentFilterFns?.[header.id];

package/src/inputs/MRT_SearchTextField.tsx

@@ -26,10 +26,10 @@ export const MRT_SearchTextField: FC<Props> = ({ tableInstance }) => {
     setGlobalFilter,
     options: {
       icons: { SearchIcon, CloseIcon },
-      idPrefix,
+      tableId,
       localization,
       muiSearchTextFieldProps,
-      onGlobalSearchFilterChange,
+      onMrtGlobalFilterValueChange,
     },
   } = tableInstance;
 
@@ -41,7 +41,7 @@ export const MRT_SearchTextField: FC<Props> = ({ tableInstance }) => {
   const handleChange = useCallback(
     debounce((event: ChangeEvent<HTMLInputElement>) => {
       setGlobalFilter(event.target.value ?? undefined);
-      onGlobalSearchFilterChange?.({ event, tableInstance });
+      onMrtGlobalFilterValueChange?.({ event, tableInstance });
     }, 200),
     [],
   );
@@ -63,7 +63,7 @@ export const MRT_SearchTextField: FC<Props> = ({ tableInstance }) => {
   return (
     <Collapse in={showGlobalFilter} orientation="horizontal">
       <TextField
-        id={`mrt-${idPrefix}-search-text-field`}
+        id={`mrt-${tableId}-search-text-field`}
         placeholder={localization.search}
         onChange={(event: ChangeEvent<HTMLInputElement>) => {
           setSearchValue(event.target.value);

package/src/inputs/MRT_SelectCheckbox.tsx

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

package/src/menus/MRT_ColumnActionMenu.tsx

@@ -52,7 +52,7 @@ export const MRT_ColumnActionMenu: FC<Props> = ({
         RestartAltIcon,
         VisibilityOffIcon,
       },
-      idPrefix,
+      tableId,
       localization,
     },
     setShowFilters,
@@ -119,7 +119,7 @@ export const MRT_ColumnActionMenu: FC<Props> = ({
           .getElementById(
             // @ts-ignore
             header.muiTableHeadCellFilterTextFieldProps?.id ??
-              `mrt-${idPrefix}-${header.id}-filter-text-field`,
+              `mrt-${tableId}-${header.id}-filter-text-field`,
           )
           ?.focus(),
       200,

package/src/menus/MRT_ShowHideColumnsMenu.tsx

@@ -46,7 +46,7 @@ export const MRT_ShowHideColumnsMenu: FC<Props> = ({
     ) {
       return [
         ...getLeftLeafColumns(),
-        ...[...new Set(columnOrder)].map((colId) =>
+        ...Array.from(new Set(columnOrder)).map((colId) =>
           getCenterLeafColumns().find((col) => col?.id === colId),
         ),
         ...getRightLeafColumns(),