material-react-table 0.13.0 → 0.13.3

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.0",
+  "version": "0.13.3",
   "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?: ({
@@ -294,19 +294,23 @@ export type MRT_ColumnDef<D extends Record<string, any> = {}> = Omit<
     column,
     event,
     filterValue,
+    instance,
   }: {
     column: MRT_Column<D>;
     event: ChangeEvent<HTMLInputElement>;
     filterValue: any;
+    instance: MRT_TableInstance<D>;
   }) => void;
   onColumnFilterValueChangedDebounced?: ({
     column,
     event,
     filterValue,
+    instance,
   }: {
     column: MRT_Column<D>;
     event: ChangeEvent<HTMLInputElement>;
     filterValue: any;
+    instance: MRT_TableInstance<D>;
   }) => void;
 };
 
@@ -382,7 +386,7 @@ export type MaterialReactTableProps<D extends Record<string, any> = {}> =
     enableClickToCopy?: boolean;
     enableColumnActions?: boolean;
     enableColumnOrdering?: boolean;
-    enableDensePaddingToggle?: boolean;
+    enableDensityToggle?: boolean;
     enableEditing?: boolean;
     enableExpandAll?: boolean;
     enableFullScreenToggle?: boolean;
@@ -402,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
@@ -429,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?:
@@ -438,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?:
@@ -447,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?:
@@ -456,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?:
@@ -476,7 +492,7 @@ export type MaterialReactTableProps<D extends Record<string, any> = {}> =
       | (({
           instance,
         }: {
-          instance: MRT_TableInstance;
+          instance: MRT_TableInstance<D>;
         }) => TableContainerProps);
     muiTableDetailPanelProps?:
       | TableCellProps
@@ -484,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?:
@@ -493,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?:
@@ -514,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?:
@@ -523,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?:
@@ -532,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?:
@@ -552,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,
@@ -600,19 +620,23 @@ export type MaterialReactTableProps<D extends Record<string, any> = {}> =
       column,
       event,
       filterValue,
+      instance,
     }: {
       column: MRT_Column<D>;
       event: ChangeEvent<HTMLInputElement>;
       filterValue: any;
+      instance: MRT_TableInstance<D>;
     }) => void;
     onColumnFilterValueChangedDebounced?: ({
       column,
       event,
       filterValue,
+      instance,
     }: {
       column: MRT_Column<D>;
       event: ChangeEvent<HTMLInputElement>;
       filterValue: any;
+      instance: MRT_TableInstance<D>;
     }) => void;
     onColumnVisibilityChanged?: ({
       column,
@@ -808,7 +832,7 @@ export default <D extends Record<string, any> = {}>({
   enableColumnFilters = true,
   enableColumnOrdering = false,
   enableColumnResizing = false,
-  enableDensePaddingToggle = true,
+  enableDensityToggle = true,
   enableExpandAll = true,
   enableFilters = true,
   enableFullScreenToggle = true,
@@ -818,6 +842,7 @@ export default <D extends Record<string, any> = {}>({
   enableMultiRowSelection = true,
   enablePagination = true,
   enablePinning = false,
+  enableRowSelection = false,
   enableSelectAll = true,
   enableSorting = true,
   enableStickyHeader = false,
@@ -830,8 +855,8 @@ export default <D extends Record<string, any> = {}>({
   localization,
   persistentStateMode = 'sessionStorage',
   positionActionsColumn = 'first',
-  positionPagination = 'bottom',
   positionGlobalFilter = 'right',
+  positionPagination = 'bottom',
   positionToolbarActions = 'top',
   positionToolbarAlertBanner = 'top',
   rowNumberMode = 'original',
@@ -847,7 +872,7 @@ export default <D extends Record<string, any> = {}>({
     enableColumnFilters={enableColumnFilters}
     enableColumnOrdering={enableColumnOrdering}
     enableColumnResizing={enableColumnResizing}
-    enableDensePaddingToggle={enableDensePaddingToggle}
+    enableDensityToggle={enableDensityToggle}
     enableExpandAll={enableExpandAll}
     enableFilters={enableFilters}
     enableFullScreenToggle={enableFullScreenToggle}
@@ -857,6 +882,7 @@ export default <D extends Record<string, any> = {}>({
     enableMultiRowSelection={enableMultiRowSelection}
     enablePagination={enablePagination}
     enablePinning={enablePinning}
+    enableRowSelection={enableRowSelection}
     enableSelectAll={enableSelectAll}
     enableSorting={enableSorting}
     enableStickyHeader={enableStickyHeader}

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

@@ -90,11 +90,13 @@ export const MRT_FilterTextField: FC<Props> = ({
         column,
         event,
         filterValue: event.target.value,
+        instance,
       });
       columnDef.onColumnFilterValueChangedDebounced?.({
         column,
         event,
         filterValue: event.target.value,
+        instance,
       });
     }, 200),
     [],
@@ -107,11 +109,13 @@ export const MRT_FilterTextField: FC<Props> = ({
       column,
       event,
       filterValue: event.target.value,
+      instance,
     });
     columnDef.onColumnFilterValueChanged?.({
       column,
       event,
       filterValue: event.target.value,
+      instance,
     });
   };
 

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>
         )}