material-react-table 0.13.1 → 0.14.0

package/dist/toolbar/MRT_TablePagination.d.ts

@@ -2,6 +2,7 @@ import { FC } from 'react';
 import { MRT_TableInstance } from '..';
 interface Props {
     instance: MRT_TableInstance;
+    position: 'top' | 'bottom';
 }
 export declare const MRT_TablePagination: FC<Props>;
 export {};

package/dist/toolbar/MRT_ToolbarTop.d.ts

@@ -11,7 +11,6 @@ export declare const commonToolbarStyles: ({ theme }: {
     overflow: string;
     p: string;
     transition: string;
-    width: string;
     zIndex: number;
 };
 interface Props {

package/dist/utils.d.ts

@@ -1,5 +1,5 @@
 import { ColumnDef, ColumnOrderState, Table, Updater } from '@tanstack/react-table';
-import { MRT_Column, MRT_ColumnDef, MRT_FilterFn } from '.';
+import { MaterialReactTableProps, 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]: import("@tanstack/react-table").FilterFnOption<import("@tanstack/react-table").TableGenerics>;
@@ -7,7 +7,10 @@ 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]: import("@tanstack/react-table").FilterFnOption<import("@tanstack/react-table").TableGenerics>;
 }) => 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" | "Cell" | "Edit" | "Filter" | "Footer" | "Header" | "enableClickToCopy" | "enableColumnActions" | "enableColumnOrdering" | "enableEditing" | "enabledColumnFilterOptions" | "filterSelectOptions" | "muiTableBodyCellCopyButtonProps" | "muiTableBodyCellEditTextFieldProps" | "muiTableBodyCellProps" | "muiTableFooterCellProps" | "muiTableHeadCellColumnActionsButtonProps" | "muiTableHeadCellFilterTextFieldProps" | "muiTableHeadCellProps" | "onMrtCellEditBlur" | "onMrtCellEditChange" | "onMrtFilterValueChange"> & {
+export declare const createDisplayColumn: <D extends Record<string, any> = {}>(table: Table<D>, column: Pick<MRT_ColumnDef<D>, "accessorFn" | "footer" | "columns" | "filterFn" | "id" | "accessorKey" | "meta" | "enableHiding" | "enablePinning" | "enableColumnFilter" | "enableGlobalFilter" | "sortingFn" | "sortDescFirst" | "enableSorting" | "enableMultiSort" | "invertSorting" | "sortUndefined" | "aggregationFn" | "enableGrouping" | "enableResizing" | "size" | "minSize" | "maxSize" | "AggregatedCell" | "Cell" | "Edit" | "Filter" | "Footer" | "Header" | "enableClickToCopy" | "enableColumnActions" | "enableColumnOrdering" | "enableEditing" | "enabledColumnFilterOptions" | "filterSelectOptions" | "muiTableBodyCellCopyButtonProps" | "muiTableBodyCellEditTextFieldProps" | "muiTableBodyCellProps" | "muiTableFooterCellProps" | "muiTableHeadCellColumnActionsButtonProps" | "muiTableHeadCellFilterTextFieldProps" | "muiTableHeadCellProps" | "onCellEditBlur" | "onCellEditChanged" | "onColumnFilterValueChanged" | "onColumnFilterValueChangedDebounced"> & {
     header?: string | undefined;
 }) => ColumnDef<D>;
 export declare const reorderColumn: (movingColumn: MRT_Column, receivingColumn: MRT_Column, columnOrder: ColumnOrderState, setColumnOrder: (updater: Updater<ColumnOrderState>) => void) => void;
+export declare const getLeadingDisplayColumnIds: (props: MaterialReactTableProps<any>) => string[];
+export declare const getTrailingDisplayColumnIds: (props: MaterialReactTableProps<any>) => (string | false | undefined)[];
+export declare const getDefaultColumnOrderIds: (props: MaterialReactTableProps<any>) => string[];

package/package.json

@@ -1,5 +1,5 @@
 {
-  "version": "0.13.1",
+  "version": "0.14.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.",
@@ -48,11 +48,11 @@
   "size-limit": [
     {
       "path": "dist/material-react-table.cjs.production.min.js",
-      "limit": "50 KB"
+      "limit": "55 KB"
     },
     {
       "path": "dist/material-react-table.esm.js",
-      "limit": "50 KB"
+      "limit": "55 KB"
     }
   ],
   "devDependencies": {

package/src/MaterialReactTable.tsx

@@ -215,7 +215,7 @@ export type MRT_ColumnDef<D extends Record<string, any> = {}> = Omit<
         instance,
         cell,
       }: {
-        instance: MRT_TableInstance;
+        instance: MRT_TableInstance<D>;
         cell: MRT_Cell<D>;
       }) => ButtonProps);
   muiTableBodyCellEditTextFieldProps?:
@@ -224,7 +224,7 @@ export type MRT_ColumnDef<D extends Record<string, any> = {}> = Omit<
         instance,
         cell,
       }: {
-        instance: MRT_TableInstance;
+        instance: MRT_TableInstance<D>;
         cell: MRT_Cell<D>;
       }) => TextFieldProps);
   muiTableBodyCellProps?:
@@ -233,7 +233,7 @@ export type MRT_ColumnDef<D extends Record<string, any> = {}> = Omit<
         instance,
         cell,
       }: {
-        instance: MRT_TableInstance;
+        instance: MRT_TableInstance<D>;
         cell: MRT_Cell<D>;
       }) => TableCellProps);
   muiTableFooterCellProps?:
@@ -242,7 +242,7 @@ export type MRT_ColumnDef<D extends Record<string, any> = {}> = Omit<
         instance,
         column,
       }: {
-        instance: MRT_TableInstance;
+        instance: MRT_TableInstance<D>;
         column: MRT_Column<D>;
       }) => TableCellProps);
   muiTableHeadCellColumnActionsButtonProps?:
@@ -251,7 +251,7 @@ export type MRT_ColumnDef<D extends Record<string, any> = {}> = Omit<
         instance,
         column,
       }: {
-        instance: MRT_TableInstance;
+        instance: MRT_TableInstance<D>;
         column: MRT_Column<D>;
       }) => IconButtonProps);
   muiTableHeadCellFilterTextFieldProps?:
@@ -260,7 +260,7 @@ export type MRT_ColumnDef<D extends Record<string, any> = {}> = Omit<
         instance,
         column,
       }: {
-        instance: MRT_TableInstance;
+        instance: MRT_TableInstance<D>;
         column: MRT_Column<D>;
       }) => TextFieldProps);
   muiTableHeadCellProps?:
@@ -269,7 +269,7 @@ export type MRT_ColumnDef<D extends Record<string, any> = {}> = Omit<
         instance,
         column,
       }: {
-        instance: MRT_TableInstance;
+        instance: MRT_TableInstance<D>;
         column: MRT_Column<D>;
       }) => TableCellProps);
   onCellEditBlur?: ({
@@ -406,26 +406,38 @@ export type MaterialReactTableProps<D extends Record<string, any> = {}> =
     enabledGlobalFilterOptions?: (MRT_FILTER_OPTION | string)[] | null;
     icons?: Partial<MRT_Icons>;
     localization?: Partial<MRT_Localization>;
+    muiExpandAllButtonProps?:
+      | IconButtonProps
+      | (({ instance }: { instance: MRT_TableInstance<D> }) => IconButtonProps);
+    muiExpandButtonProps?:
+      | IconButtonProps
+      | (({
+          instance,
+        }: {
+          instance: MRT_TableInstance<D>;
+          row: MRT_Row<D>;
+        }) => IconButtonProps);
     muiLinearProgressProps?:
       | LinearProgressProps
       | (({
           instance,
         }: {
-          instance: MRT_TableInstance;
+          instance: MRT_TableInstance<D>;
         }) => LinearProgressProps);
     muiSearchTextFieldProps?:
       | TextFieldProps
-      | (({ instance }: { instance: MRT_TableInstance }) => TextFieldProps);
+      | (({ instance }: { instance: MRT_TableInstance<D> }) => TextFieldProps);
+    muiSelectAllCheckboxProps?:
+      | CheckboxProps
+      | (({ instance }: { instance: MRT_TableInstance<D> }) => CheckboxProps);
     muiSelectCheckboxProps?:
       | CheckboxProps
       | (({
           instance,
-          isSelectAll,
           row,
         }: {
-          instance: MRT_TableInstance;
-          isSelectAll: boolean;
-          row?: MRT_Row<D>;
+          instance: MRT_TableInstance<D>;
+          row: MRT_Row<D>;
         }) => CheckboxProps);
     muiTableBodyCellCopyButtonProps?:
       | ButtonProps
@@ -433,7 +445,7 @@ export type MaterialReactTableProps<D extends Record<string, any> = {}> =
           instance,
           cell,
         }: {
-          instance: MRT_TableInstance;
+          instance: MRT_TableInstance<D>;
           cell: MRT_Cell<D>;
         }) => ButtonProps);
     muiTableBodyCellEditTextFieldProps?:
@@ -442,7 +454,7 @@ export type MaterialReactTableProps<D extends Record<string, any> = {}> =
           instance,
           cell,
         }: {
-          instance: MRT_TableInstance;
+          instance: MRT_TableInstance<D>;
           cell: MRT_Cell<D>;
         }) => TextFieldProps);
     muiTableBodyCellProps?:
@@ -451,7 +463,7 @@ export type MaterialReactTableProps<D extends Record<string, any> = {}> =
           instance,
           cell,
         }: {
-          instance: MRT_TableInstance;
+          instance: MRT_TableInstance<D>;
           cell: MRT_Cell<D>;
         }) => TableCellProps);
     muiTableBodyCellSkeletonProps?:
@@ -460,19 +472,19 @@ export type MaterialReactTableProps<D extends Record<string, any> = {}> =
           instance,
           cell,
         }: {
-          instance: MRT_TableInstance;
+          instance: MRT_TableInstance<D>;
           cell: MRT_Cell<D>;
         }) => SkeletonProps);
     muiTableBodyProps?:
       | TableBodyProps
-      | (({ instance }: { instance: MRT_TableInstance }) => TableBodyProps);
+      | (({ instance }: { instance: MRT_TableInstance<D> }) => TableBodyProps);
     muiTableBodyRowProps?:
       | TableRowProps
       | (({
           instance,
           row,
         }: {
-          instance: MRT_TableInstance;
+          instance: MRT_TableInstance<D>;
           row: MRT_Row<D>;
         }) => TableRowProps);
     muiTableContainerProps?:
@@ -480,7 +492,7 @@ export type MaterialReactTableProps<D extends Record<string, any> = {}> =
       | (({
           instance,
         }: {
-          instance: MRT_TableInstance;
+          instance: MRT_TableInstance<D>;
         }) => TableContainerProps);
     muiTableDetailPanelProps?:
       | TableCellProps
@@ -488,7 +500,7 @@ export type MaterialReactTableProps<D extends Record<string, any> = {}> =
           instance,
           row,
         }: {
-          instance: MRT_TableInstance;
+          instance: MRT_TableInstance<D>;
           row: MRT_Row<D>;
         }) => TableCellProps);
     muiTableFooterCellProps?:
@@ -497,19 +509,23 @@ export type MaterialReactTableProps<D extends Record<string, any> = {}> =
           instance,
           column,
         }: {
-          instance: MRT_TableInstance;
+          instance: MRT_TableInstance<D>;
           column: MRT_Column<D>;
         }) => TableCellProps);
     muiTableFooterProps?:
       | TableFooterProps
-      | (({ instance }: { instance: MRT_TableInstance }) => TableFooterProps);
+      | (({
+          instance,
+        }: {
+          instance: MRT_TableInstance<D>;
+        }) => TableFooterProps);
     muiTableFooterRowProps?:
       | TableRowProps
       | (({
           instance,
           footerGroup,
         }: {
-          instance: MRT_TableInstance;
+          instance: MRT_TableInstance<D>;
           footerGroup: MRT_HeaderGroup<D>;
         }) => TableRowProps);
     muiTableHeadCellColumnActionsButtonProps?:
@@ -518,7 +534,7 @@ export type MaterialReactTableProps<D extends Record<string, any> = {}> =
           instance,
           column,
         }: {
-          instance: MRT_TableInstance;
+          instance: MRT_TableInstance<D>;
           column: MRT_Column<D>;
         }) => IconButtonProps);
     muiTableHeadCellFilterTextFieldProps?:
@@ -527,7 +543,7 @@ export type MaterialReactTableProps<D extends Record<string, any> = {}> =
           instance,
           column,
         }: {
-          instance: MRT_TableInstance;
+          instance: MRT_TableInstance<D>;
           column: MRT_Column<D>;
         }) => TextFieldProps);
     muiTableHeadCellProps?:
@@ -536,19 +552,19 @@ export type MaterialReactTableProps<D extends Record<string, any> = {}> =
           instance,
           column,
         }: {
-          instance: MRT_TableInstance;
+          instance: MRT_TableInstance<D>;
           column: MRT_Column<D>;
         }) => TableCellProps);
     muiTableHeadProps?:
       | TableHeadProps
-      | (({ instance }: { instance: MRT_TableInstance }) => TableHeadProps);
+      | (({ instance }: { instance: MRT_TableInstance<D> }) => TableHeadProps);
     muiTableHeadRowProps?:
       | TableRowProps
       | (({
           instance,
           headerGroup,
         }: {
-          instance: MRT_TableInstance;
+          instance: MRT_TableInstance<D>;
           headerGroup: MRT_HeaderGroup<D>;
         }) => TableRowProps);
     muiTablePaginationProps?:
@@ -556,23 +572,23 @@ export type MaterialReactTableProps<D extends Record<string, any> = {}> =
       | (({
           instance,
         }: {
-          instance: MRT_TableInstance;
+          instance: MRT_TableInstance<D>;
         }) => Partial<TablePaginationProps>);
     muiTablePaperProps?:
       | PaperProps
-      | (({ instance }: { instance: MRT_TableInstance }) => PaperProps);
+      | (({ instance }: { instance: MRT_TableInstance<D> }) => PaperProps);
     muiTableProps?:
       | TableProps
-      | (({ instance }: { instance: MRT_TableInstance }) => TableProps);
+      | (({ instance }: { instance: MRT_TableInstance<D> }) => TableProps);
     muiTableToolbarAlertBannerProps?:
       | AlertProps
-      | (({ instance }: { instance: MRT_TableInstance }) => AlertProps);
+      | (({ instance }: { instance: MRT_TableInstance<D> }) => AlertProps);
     muiTableToolbarBottomProps?:
       | ToolbarProps
-      | (({ instance }: { instance: MRT_TableInstance }) => ToolbarProps);
+      | (({ instance }: { instance: MRT_TableInstance<D> }) => ToolbarProps);
     muiTableToolbarTopProps?:
       | ToolbarProps
-      | (({ instance }: { instance: MRT_TableInstance }) => ToolbarProps);
+      | (({ instance }: { instance: MRT_TableInstance<D> }) => ToolbarProps);
     onCellClick?: ({
       cell,
       event,
@@ -746,7 +762,6 @@ export type MaterialReactTableProps<D extends Record<string, any> = {}> =
     positionActionsColumn?: 'first' | 'last';
     positionGlobalFilter?: 'left' | 'right';
     positionPagination?: 'bottom' | 'top' | 'both';
-    positionToolbarActions?: 'bottom' | 'top';
     positionToolbarAlertBanner?: 'bottom' | 'top';
     renderDetailPanel?: ({
       row,
@@ -771,7 +786,12 @@ export type MaterialReactTableProps<D extends Record<string, any> = {}> =
       row: MRT_Row<D>;
       instance: MRT_TableInstance<D>;
     }) => ReactNode;
-    renderToolbarCustomActions?: ({
+    renderToolbarBottomCustomActions?: ({
+      instance,
+    }: {
+      instance: MRT_TableInstance<D>;
+    }) => ReactNode;
+    renderToolbarTopCustomActions?: ({
       instance,
     }: {
       instance: MRT_TableInstance<D>;
@@ -826,6 +846,7 @@ export default <D extends Record<string, any> = {}>({
   enableMultiRowSelection = true,
   enablePagination = true,
   enablePinning = false,
+  enableRowSelection = false,
   enableSelectAll = true,
   enableSorting = true,
   enableStickyHeader = false,
@@ -838,9 +859,8 @@ export default <D extends Record<string, any> = {}>({
   localization,
   persistentStateMode = 'sessionStorage',
   positionActionsColumn = 'first',
-  positionPagination = 'bottom',
   positionGlobalFilter = 'right',
-  positionToolbarActions = 'top',
+  positionPagination = 'bottom',
   positionToolbarAlertBanner = 'top',
   rowNumberMode = 'original',
   selectAllMode = 'all',
@@ -865,6 +885,7 @@ export default <D extends Record<string, any> = {}>({
     enableMultiRowSelection={enableMultiRowSelection}
     enablePagination={enablePagination}
     enablePinning={enablePinning}
+    enableRowSelection={enableRowSelection}
     enableSelectAll={enableSelectAll}
     enableSorting={enableSorting}
     enableStickyHeader={enableStickyHeader}
@@ -879,7 +900,6 @@ export default <D extends Record<string, any> = {}>({
     positionActionsColumn={positionActionsColumn}
     positionGlobalFilter={positionGlobalFilter}
     positionPagination={positionPagination}
-    positionToolbarActions={positionToolbarActions}
     positionToolbarAlertBanner={positionToolbarAlertBanner}
     rowNumberMode={rowNumberMode}
     selectAllMode={selectAllMode}

package/src/buttons/MRT_ExpandAllButton.tsx

@@ -15,6 +15,7 @@ export const MRT_ExpandAllButton: FC<Props> = ({ instance }) => {
     options: {
       icons: { KeyboardDoubleArrowDownIcon },
       localization,
+      muiExpandAllButtonProps,
       renderDetailPanel,
     },
     toggleAllRowsExpanded,
@@ -22,6 +23,11 @@ export const MRT_ExpandAllButton: FC<Props> = ({ instance }) => {
 
   const { density } = getState();
 
+  const iconButtonProps =
+    muiExpandAllButtonProps instanceof Function
+      ? muiExpandAllButtonProps({ instance })
+      : muiExpandAllButtonProps;
+
   return (
     <Tooltip
       arrow
@@ -33,9 +39,11 @@ export const MRT_ExpandAllButton: FC<Props> = ({ instance }) => {
         aria-label={localization.expandAll}
         disabled={!getCanSomeRowsExpand() && !renderDetailPanel}
         onClick={() => toggleAllRowsExpanded(!getIsAllRowsExpanded())}
+        {...iconButtonProps}
         sx={{
           height: density === 'compact' ? '1.75rem' : '2.25rem',
           width: density === 'compact' ? '1.75rem' : '2.25rem',
+          ...iconButtonProps?.sx,
         }}
       >
         <KeyboardDoubleArrowDownIcon

package/src/buttons/MRT_ExpandButton.tsx

@@ -13,6 +13,7 @@ export const MRT_ExpandButton: FC<Props> = ({ row, instance }) => {
     options: {
       icons: { ExpandMoreIcon },
       localization,
+      muiExpandButtonProps,
       onExpandChanged,
       renderDetailPanel,
     },
@@ -20,6 +21,11 @@ export const MRT_ExpandButton: FC<Props> = ({ row, instance }) => {
 
   const { density } = getState();
 
+  const iconButtonProps =
+    muiExpandButtonProps instanceof Function
+      ? muiExpandButtonProps({ instance, row })
+      : muiExpandButtonProps;
+
   const handleToggleExpand = (event: MouseEvent<HTMLButtonElement>) => {
     row.toggleExpanded();
     onExpandChanged?.({ event, row, instance });
@@ -36,9 +42,11 @@ export const MRT_ExpandButton: FC<Props> = ({ row, instance }) => {
         aria-label={localization.expand}
         disabled={!row.getCanExpand() && !renderDetailPanel}
         onClick={handleToggleExpand}
+        {...iconButtonProps}
         sx={{
           height: density === 'compact' ? '1.75rem' : '2.25rem',
           width: density === 'compact' ? '1.75rem' : '2.25rem',
+          ...iconButtonProps?.sx,
         }}
       >
         <ExpandMoreIcon

package/src/inputs/MRT_SearchTextField.tsx

@@ -79,16 +79,14 @@ export const MRT_SearchTextField: FC<Props> = ({ instance }) => {
           startAdornment: (
             <InputAdornment position="start">
               <Tooltip arrow title={localization.changeSearchMode}>
-                <span>
-                  <IconButton
-                    aria-label={localization.changeSearchMode}
-                    onClick={handleGlobalFilterMenuOpen}
-                    size="small"
-                    sx={{ height: '1.75rem', width: '1.75rem' }}
-                  >
-                    <SearchIcon />
-                  </IconButton>
-                </span>
+                <IconButton
+                  aria-label={localization.changeSearchMode}
+                  onClick={handleGlobalFilterMenuOpen}
+                  size="small"
+                  sx={{ height: '1.75rem', width: '1.75rem' }}
+                >
+                  <SearchIcon />
+                </IconButton>
               </Tooltip>
             </InputAdornment>
           ),
@@ -107,7 +105,6 @@ export const MRT_SearchTextField: FC<Props> = ({ instance }) => {
           ),
         }}
         {...textFieldProps}
-        sx={{ justifySelf: 'end', ...textFieldProps?.sx }}
       />
       <MRT_FilterOptionMenu
         anchorEl={anchorEl}

package/src/inputs/MRT_SelectCheckbox.tsx

@@ -11,11 +11,13 @@ interface Props {
 export const MRT_SelectCheckbox: FC<Props> = ({ row, selectAll, instance }) => {
   const {
     getRowModel,
+    getPaginationRowModel,
     getSelectedRowModel,
     getState,
     options: {
       localization,
       muiSelectCheckboxProps,
+      muiSelectAllCheckboxProps,
       onRowSelectionChanged,
       onRowSelectAllChanged,
       selectAllMode,
@@ -33,7 +35,11 @@ export const MRT_SelectCheckbox: FC<Props> = ({ row, selectAll, instance }) => {
       }
       onRowSelectAllChanged?.({
         event,
-        selectedRows: event.target.checked ? getRowModel().flatRows : [],
+        selectedRows: event.target.checked
+          ? selectAllMode === 'all'
+            ? getRowModel().flatRows
+            : getPaginationRowModel().flatRows
+          : [],
         instance,
       });
     } else if (row) {
@@ -51,10 +57,13 @@ export const MRT_SelectCheckbox: FC<Props> = ({ row, selectAll, instance }) => {
     }
   };
 
-  const checkboxProps =
-    muiSelectCheckboxProps instanceof Function
-      ? muiSelectCheckboxProps({ isSelectAll: !!selectAll, row, instance })
-      : muiSelectCheckboxProps;
+  const checkboxProps = selectAll
+    ? muiSelectAllCheckboxProps instanceof Function
+      ? muiSelectAllCheckboxProps({ instance })
+      : muiSelectAllCheckboxProps
+    : muiSelectCheckboxProps instanceof Function
+    ? muiSelectCheckboxProps({ row: row as MRT_Row, instance })
+    : muiSelectCheckboxProps;
 
   return (
     <Tooltip

package/src/menus/MRT_ShowHideColumnsMenu.tsx

@@ -2,6 +2,7 @@ import React, { FC, useMemo } from 'react';
 import { Button, Menu, Divider, Box } from '@mui/material';
 import { MRT_ShowHideColumnsMenuItems } from './MRT_ShowHideColumnsMenuItems';
 import type { MRT_Column, MRT_TableInstance } from '..';
+import { getDefaultColumnOrderIds } from '../utils';
 
 interface Props {
   anchorEl: HTMLElement | null;
@@ -88,7 +89,13 @@ export const MRT_ShowHideColumnsMenu: FC<Props> = ({
           </Button>
         )}
         {!isSubMenu && enableColumnOrdering && (
-          <Button onClick={() => instance.resetColumnOrder()}>
+          <Button
+            onClick={() =>
+              instance.setColumnOrder(
+                getDefaultColumnOrderIds(instance.options as any),
+              )
+            }
+          >
             {localization.resetOrder}
           </Button>
         )}