material-react-table 0.8.13 → 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

@@ -1,5 +1,5 @@
-import { ColumnDef, Table } from '@tanstack/react-table';
-import { MRT_ColumnDef, MRT_FilterFn } from '.';
+import { ColumnDef, ColumnOrderState, Table, Updater } from '@tanstack/react-table';
+import { MRT_Column, MRT_ColumnDef, MRT_FilterFn } from '.';
 export declare const getAllLeafColumnDefs: (columns: MRT_ColumnDef[]) => MRT_ColumnDef[];
 export declare const createGroup: <D extends Record<string, any> = {}>(table: Table<D>, column: MRT_ColumnDef<D>, currentFilterFns: {
     [key: string]: MRT_FilterFn<{}>;
@@ -7,6 +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.13",
+  "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

@@ -80,11 +80,14 @@ export type MRT_TableInstance<D extends Record<string, any> = {}> = Omit<
   | 'getAllColumns'
   | 'getAllFlatColumns'
   | 'getAllLeafColumns'
+  | 'getCenterLeafColumns'
   | 'getColumn'
   | 'getExpandedRowModel'
   | 'getFlatHeaders'
+  | 'getLeftLeafColumns'
   | 'getPaginationRowModel'
   | 'getPrePaginationRowModel'
+  | 'getRightLeafColumns'
   | 'getRowModel'
   | 'getSelectedRowModel'
   | 'getState'
@@ -93,17 +96,20 @@ export type MRT_TableInstance<D extends Record<string, any> = {}> = Omit<
   getAllColumns: () => MRT_Column<D>[];
   getAllFlatColumns: () => MRT_Column<D>[];
   getAllLeafColumns: () => MRT_Column<D>[];
+  getCenterLeafColumns: () => MRT_Column<D>[];
   getColumn: (columnId: string) => MRT_Column<D>;
   getExpandedRowModel: () => MRT_RowModel<D>;
   getFlatHeaders: () => MRT_Header<D>[];
+  getLeftLeafColumns: () => MRT_Column<D>[];
   getPaginationRowModel: () => MRT_RowModel<D>;
   getPrePaginationRowModel: () => MRT_RowModel<D>;
+  getRightLeafColumns: () => MRT_Column<D>[];
   getRowModel: () => MRT_RowModel<D>;
   getSelectedRowModel: () => MRT_RowModel<D>;
   getState: () => MRT_TableState<D>;
   options: MaterialReactTableProps<D> & {
     icons: MRT_Icons;
-    idPrefix: string;
+    tableId: string;
     localization: MRT_Localization;
   };
   setCurrentEditingCell: Dispatch<SetStateAction<MRT_Cell | null>>;
@@ -138,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,
@@ -170,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;
@@ -252,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,
@@ -261,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,
@@ -270,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,
@@ -356,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
@@ -519,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
       | (({
@@ -561,7 +566,7 @@ export type MaterialReactTableProps<D extends Record<string, any> = {}> =
         }: {
           tableInstance: MRT_TableInstance;
         }) => ToolbarProps);
-    onCellClick?: ({
+    onMrtCellClick?: ({
       cell,
       event,
       tableInstance,
@@ -570,7 +575,7 @@ export type MaterialReactTableProps<D extends Record<string, any> = {}> =
       tableInstance: MRT_TableInstance<D>;
       event: MouseEvent<HTMLTableCellElement>;
     }) => void;
-    onCellEditBlur?: ({
+    onMrtCellEditBlur?: ({
       cell,
       event,
       tableInstance,
@@ -579,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,
@@ -588,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,
@@ -622,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,
     }: {
@@ -637,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,
@@ -646,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,
@@ -657,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,
@@ -666,7 +671,7 @@ export type MaterialReactTableProps<D extends Record<string, any> = {}> =
       columnVisibility: VisibilityState;
       tableInstance: MRT_TableInstance<D>;
     }) => void;
-    onToggleDensePadding?: ({
+    onMrtToggleDensePadding?: ({
       event,
       isDensePadding,
       tableInstance,
@@ -675,7 +680,7 @@ export type MaterialReactTableProps<D extends Record<string, any> = {}> =
       isDensePadding: boolean;
       tableInstance: MRT_TableInstance<D>;
     }) => void;
-    onToggleFullScreen?: ({
+    onMrtToggleFullScreen?: ({
       event,
       isFullScreen,
       tableInstance,
@@ -684,7 +689,7 @@ export type MaterialReactTableProps<D extends Record<string, any> = {}> =
       isFullScreen: boolean;
       tableInstance: MRT_TableInstance<D>;
     }) => void;
-    onToggleShowFilters?: ({
+    onMrtToggleShowFilters?: ({
       event,
       showFilters,
       tableInstance,
@@ -693,7 +698,7 @@ export type MaterialReactTableProps<D extends Record<string, any> = {}> =
       showFilters: boolean;
       tableInstance: MRT_TableInstance<D>;
     }) => void;
-    onToggleShowGlobalFilter?: ({
+    onMrtToggleShowGlobalFilter?: ({
       event,
       showGlobalFilter,
       tableInstance,
@@ -705,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?: ({
@@ -760,6 +766,8 @@ export type MaterialReactTableProps<D extends Record<string, any> = {}> =
         IconButtonProps & { tableInstance: MRT_TableInstance<D> }
       >;
     }) => ReactNode;
+    selectAllMode?: 'all' | 'page';
+    tableId?: string;
   };
 
 export default <D extends Record<string, any> = {}>({
@@ -794,8 +802,10 @@ export default <D extends Record<string, any> = {}>({
   persistentStateMode = 'sessionStorage',
   positionActionsColumn = 'first',
   positionPagination = 'bottom',
+  positionGlobalFilter = 'right',
   positionToolbarActions = 'top',
   positionToolbarAlertBanner = 'top',
+  selectAllMode = 'all',
   ...rest
 }: MaterialReactTableProps<D>) => (
   <MRT_TableRoot
@@ -829,9 +839,11 @@ export default <D extends Record<string, any> = {}>({
     localization={{ ...MRT_DefaultLocalization_EN, ...localization }}
     persistentStateMode={persistentStateMode}
     positionActionsColumn={positionActionsColumn}
+    positionGlobalFilter={positionGlobalFilter}
     positionPagination={positionPagination}
     positionToolbarActions={positionToolbarActions}
     positionToolbarAlertBanner={positionToolbarAlertBanner}
+    selectAllMode={selectAllMode}
     {...rest}
   />
 );

package/src/body/MRT_TableBodyCell.tsx

@@ -1,8 +1,10 @@
 import React, { FC, MouseEvent, useMemo } from 'react';
+import { useDrop } from 'react-dnd';
 import { alpha, darken, lighten, Skeleton, TableCell } from '@mui/material';
 import { MRT_EditCellTextField } from '../inputs/MRT_EditCellTextField';
-import type { MRT_Cell, MRT_TableInstance } from '..';
 import { MRT_CopyButton } from '../buttons/MRT_CopyButton';
+import { reorderColumn } from '../utils';
+import type { MRT_Cell, MRT_Column, MRT_TableInstance } from '..';
 
 interface Props {
   cell: MRT_Cell;
@@ -20,16 +22,19 @@ export const MRT_TableBodyCell: FC<Props> = ({
     options: {
       editingMode,
       enableClickToCopy,
+      enableColumnOrdering,
       enableEditing,
-      idPrefix,
+      tableId,
       muiTableBodyCellProps,
       muiTableBodyCellSkeletonProps,
-      onCellClick,
+      onMrtCellClick,
     },
+    setColumnOrder,
     setCurrentEditingCell,
   } = tableInstance;
 
   const {
+    columnOrder,
     currentEditingCell,
     currentEditingRow,
     isDensePadding,
@@ -41,6 +46,12 @@ export const MRT_TableBodyCell: FC<Props> = ({
 
   const { columnDef, columnDefType } = column;
 
+  const [, dropRef] = useDrop({
+    accept: 'column',
+    drop: (movingColumn: MRT_Column) =>
+      reorderColumn(movingColumn, column, columnOrder, setColumnOrder),
+  });
+
   const mTableCellBodyProps =
     muiTableBodyCellProps instanceof Function
       ? muiTableBodyCellProps({ cell, tableInstance })
@@ -84,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();
@@ -117,10 +128,13 @@ export const MRT_TableBodyCell: FC<Props> = ({
   return (
     <TableCell
       onClick={(event: MouseEvent<HTMLTableCellElement>) =>
-        onCellClick?.({ event, cell, tableInstance })
+        onMrtCellClick?.({ event, cell, tableInstance })
       }
       onDoubleClick={handleDoubleClick}
       {...tableCellProps}
+      ref={
+        columnDefType === 'data' && enableColumnOrdering ? dropRef : undefined
+      }
       sx={(theme) => ({
         backgroundColor: column.getIsPinned()
           ? alpha(lighten(theme.palette.background.default, 0.04), 0.95)

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

@@ -23,7 +23,7 @@ export const MRT_ColumnPinningButtons: FC<Props> = ({
   };
 
   return (
-    <Box sx={{ mr: '4px' }}>
+    <Box sx={{ minWidth: '70px', textAlign: 'center' }}>
       {column.getIsPinned() ? (
         <Tooltip arrow title={localization.unpin}>
           <IconButton onClick={() => handlePinColumn(false)} size="small">

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/footer/MRT_TableFooterCell.tsx

@@ -59,12 +59,12 @@ export const MRT_TableFooterCell: FC<Props> = ({ footer, tableInstance }) => {
       <>
         {footer.isPlaceholder
           ? null
-          : columnDef.Footer instanceof Function
-          ? columnDef.Footer?.({
-              footer,
-              tableInstance,
-            })
-          : columnDef.Footer ??
+          : (columnDef.Footer instanceof Function
+              ? columnDef.Footer?.({
+                  footer,
+                  tableInstance,
+                })
+              : columnDef.Footer) ??
             columnDef.footer ??
             footer.renderFooter() ??
             null}

package/src/head/MRT_DraggableTableHeadCell.tsx

@@ -1,7 +1,8 @@
 import React, { FC } from 'react';
 import { useDrag, useDrop } from 'react-dnd';
 import { MRT_TableHeadCell } from './MRT_TableHeadCell';
-import type { MRT_Header, MRT_TableInstance } from '..';
+import type { MRT_Column, MRT_Header, MRT_TableInstance } from '..';
+import { reorderColumn } from '../utils';
 
 interface Props {
   header: MRT_Header;
@@ -20,29 +21,20 @@ export const MRT_DraggableTableHeadCell: FC<Props> = ({
 
   const { columnOrder } = getState();
 
-  const reorder = (movingHeader: MRT_Header, receivingHeader: MRT_Header) => {
-    if (movingHeader.column.getCanPin()) {
-      movingHeader.column.pin(receivingHeader.column.getIsPinned());
-    }
-    columnOrder.splice(
-      receivingHeader.index,
-      0,
-      columnOrder.splice(movingHeader.index, 1)[0],
-    );
-    setColumnOrder([...columnOrder]);
-  };
+  const { column } = header;
 
   const [, dropRef] = useDrop({
-    accept: 'header',
-    drop: (movingHeader: MRT_Header) => reorder(movingHeader, header),
+    accept: 'column',
+    drop: (movingColumn: MRT_Column) =>
+      reorderColumn(movingColumn, column, columnOrder, setColumnOrder),
   });
 
   const [{ isDragging }, dragRef, previewRef] = useDrag({
     collect: (monitor) => ({
       isDragging: monitor.isDragging(),
     }),
-    item: () => header,
-    type: 'header',
+    item: () => column,
+    type: 'column',
   });
 
   return (