material-react-table 0.8.10 → 0.8.13

package/dist/menus/MRT_ShowHideColumnsMenu.d.ts

@@ -1,5 +1,5 @@
 import { FC } from 'react';
-import { MRT_TableInstance } from '..';
+import type { MRT_TableInstance } from '..';
 interface Props {
     anchorEl: HTMLElement | null;
     isSubMenu?: boolean;

package/dist/menus/MRT_ShowHideColumnsMenuItems.d.ts

@@ -1,6 +1,7 @@
 import { FC } from 'react';
 import type { MRT_Column, MRT_TableInstance } from '..';
 interface Props {
+    allColumns: MRT_Column[];
     column: MRT_Column;
     isSubMenu?: boolean;
     tableInstance: MRT_TableInstance;

package/dist/table/MRT_TableRoot.d.ts

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

package/dist/utils.d.ts

@@ -7,6 +7,6 @@ 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>, "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" | "Edit" | "Filter" | "Footer" | "Header" | "Cell" | "enableClickToCopy" | "enableColumnActions" | "enableColumnOrdering" | "enableEditing" | "enabledColumnFilterOptions" | "filterSelectOptions" | "muiTableBodyCellCopyButtonProps" | "muiTableBodyCellEditTextFieldProps" | "muiTableBodyCellProps" | "muiTableFooterCellProps" | "muiTableHeadCellColumnActionsButtonProps" | "muiTableHeadCellFilterTextFieldProps" | "muiTableHeadCellProps" | "onCellEditBlur" | "onCellEditChange" | "onColumnFilterValueChange"> & {
     header?: string | undefined;
 }) => ColumnDef<D>;

package/package.json

@@ -1,5 +1,5 @@
 {
-  "version": "0.8.10",
+  "version": "0.8.13",
   "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": "60 KB"
+      "limit": "50 KB"
     },
     {
       "path": "dist/material-react-table.esm.js",
-      "limit": "60 KB"
+      "limit": "50 KB"
     }
   ],
   "devDependencies": {
@@ -63,17 +63,17 @@
     "@mui/icons-material": "^5.8.2",
     "@mui/material": "^5.8.2",
     "@size-limit/preset-small-lib": "^7.0.8",
-    "@storybook/addon-a11y": "^6.5.5",
-    "@storybook/addon-actions": "^6.5.5",
-    "@storybook/addon-essentials": "^6.5.5",
+    "@storybook/addon-a11y": "^6.5.6",
+    "@storybook/addon-actions": "^6.5.6",
+    "@storybook/addon-essentials": "^6.5.6",
     "@storybook/addon-info": "^5.3.21",
-    "@storybook/addon-links": "^6.5.5",
-    "@storybook/addons": "^6.5.5",
-    "@storybook/react": "^6.5.5",
-    "@types/react": "^18.0.10",
+    "@storybook/addon-links": "^6.5.6",
+    "@storybook/addons": "^6.5.6",
+    "@storybook/react": "^6.5.6",
+    "@types/react": "^18.0.11",
     "@types/react-dom": "^18.0.5",
     "babel-loader": "^8.2.5",
-    "eslint": "^8.16.0",
+    "eslint": "^8.17.0",
     "eslint-plugin-react-hooks": "^4.5.0",
     "husky": "^8.0.1",
     "prettier": "^2.6.2",
@@ -87,7 +87,7 @@
     "storybook-dark-mode": "^1.1.0",
     "tsdx": "^0.14.1",
     "tslib": "^2.4.0",
-    "typescript": "^4.7.2"
+    "typescript": "^4.7.3"
   },
   "peerDependencies": {
     "@emotion/react": ">=11",
@@ -98,7 +98,7 @@
   },
   "dependencies": {
     "@tanstack/match-sorter-utils": "^8.0.0-alpha.83",
-    "@tanstack/react-table": "^8.0.0-alpha.89",
+    "@tanstack/react-table": "^8.0.0-beta.4",
     "react-dnd": "^16.0.1",
     "react-dnd-html5-backend": "^16.0.1"
   }

package/src/MaterialReactTable.tsx

@@ -35,7 +35,6 @@ import {
   Header,
   HeaderGroup,
   Overwrite,
-  PaginationState,
   ReactTableGenerics,
   Row,
   TableGenerics,
@@ -79,9 +78,11 @@ export type MRT_TableInstance<D extends Record<string, any> = {}> = Omit<
     >
   >,
   | 'getAllColumns'
+  | 'getAllFlatColumns'
   | 'getAllLeafColumns'
   | 'getColumn'
   | 'getExpandedRowModel'
+  | 'getFlatHeaders'
   | 'getPaginationRowModel'
   | 'getPrePaginationRowModel'
   | 'getRowModel'
@@ -90,9 +91,11 @@ export type MRT_TableInstance<D extends Record<string, any> = {}> = Omit<
   | 'options'
 > & {
   getAllColumns: () => MRT_Column<D>[];
+  getAllFlatColumns: () => MRT_Column<D>[];
   getAllLeafColumns: () => MRT_Column<D>[];
   getColumn: (columnId: string) => MRT_Column<D>;
   getExpandedRowModel: () => MRT_RowModel<D>;
+  getFlatHeaders: () => MRT_Header<D>[];
   getPaginationRowModel: () => MRT_RowModel<D>;
   getPrePaginationRowModel: () => MRT_RowModel<D>;
   getRowModel: () => MRT_RowModel<D>;
@@ -117,10 +120,7 @@ export type MRT_TableInstance<D extends Record<string, any> = {}> = Omit<
   setShowGlobalFilter: Dispatch<SetStateAction<boolean>>;
 };
 
-export type MRT_TableState<D extends Record<string, any> = {}> = Omit<
-  TableState,
-  'pagination'
-> & {
+export type MRT_TableState<D extends Record<string, any> = {}> = TableState & {
   currentEditingCell: MRT_Cell<D> | null;
   currentEditingRow: MRT_Row<D> | null;
   currentFilterFns: Record<string, string | Function>;
@@ -128,7 +128,6 @@ export type MRT_TableState<D extends Record<string, any> = {}> = Omit<
   isDensePadding: boolean;
   isLoading: boolean;
   isFullScreen: boolean;
-  pagination: Partial<PaginationState>;
   showFilters: boolean;
   showGlobalFilter: boolean;
   showProgressBars: boolean;

package/src/body/MRT_TableBodyCell.tsx

@@ -39,7 +39,7 @@ export const MRT_TableBodyCell: FC<Props> = ({
 
   const { column, row } = cell;
 
-  const { columnDef } = column;
+  const { columnDef, columnDefType } = column;
 
   const mTableCellBodyProps =
     muiTableBodyCellProps instanceof Function
@@ -58,11 +58,11 @@ export const MRT_TableBodyCell: FC<Props> = ({
 
   const skeletonWidth = useMemo(
     () =>
-      column.columnDefType === 'display'
+      columnDefType === 'display'
         ? column.getSize() / 2
         : Math.random() * (column.getSize() - column.getSize() / 3) +
           column.getSize() / 3,
-    [column.columnDefType, column.getSize()],
+    [columnDefType, column.getSize()],
   );
 
   const isEditable =
@@ -136,10 +136,10 @@ export const MRT_TableBodyCell: FC<Props> = ({
             ? `${column.getStart('left')}px`
             : undefined,
         p: isDensePadding
-          ? column.columnDefType === 'display'
+          ? columnDefType === 'display'
             ? '0 0.5rem'
             : '0.5rem'
-          : column.columnDefType === 'display'
+          : columnDefType === 'display'
           ? '0.5rem 0.75rem'
           : '1rem',
         pl:
@@ -175,7 +175,7 @@ export const MRT_TableBodyCell: FC<Props> = ({
             width={skeletonWidth}
             {...muiTableBodyCellSkeletonProps}
           />
-        ) : column.columnDefType === 'display' ? (
+        ) : columnDefType === 'display' ? (
           columnDef.Cell?.({ cell, tableInstance })
         ) : cell.getIsPlaceholder() ||
           (row.getIsGrouped() &&
@@ -189,7 +189,7 @@ export const MRT_TableBodyCell: FC<Props> = ({
           <>
             <MRT_CopyButton cell={cell} tableInstance={tableInstance}>
               <>
-                {cell.column.columnDef?.Cell?.({ cell, tableInstance }) ??
+                {columnDef?.Cell?.({ cell, tableInstance }) ??
                   cell.renderCell()}
               </>
             </MRT_CopyButton>
@@ -197,8 +197,7 @@ export const MRT_TableBodyCell: FC<Props> = ({
           </>
         ) : (
           <>
-            {cell.column.columnDef?.Cell?.({ cell, tableInstance }) ??
-              cell.renderCell()}
+            {columnDef?.Cell?.({ cell, tableInstance }) ?? cell.renderCell()}
             {row.getIsGrouped() && <> ({row.subRows?.length ?? ''})</>}
           </>
         )}

package/src/buttons/MRT_ColumnPinningButtons.tsx

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

package/src/buttons/MRT_CopyButton.tsx

@@ -17,6 +17,10 @@ export const MRT_CopyButton: FC<Props> = ({
     options: { localization, muiTableBodyCellCopyButtonProps },
   } = tableInstance;
 
+  const { column } = cell;
+
+  const { columnDef } = column;
+
   const [copied, setCopied] = useState(false);
 
   const handleCopy = (text: unknown) => {
@@ -31,12 +35,12 @@ export const MRT_CopyButton: FC<Props> = ({
       : muiTableBodyCellCopyButtonProps;
 
   const mcTableBodyCellCopyButtonProps =
-    cell.column.columnDef.muiTableBodyCellCopyButtonProps instanceof Function
-      ? cell.column.columnDef.muiTableBodyCellCopyButtonProps({
+    columnDef.muiTableBodyCellCopyButtonProps instanceof Function
+      ? columnDef.muiTableBodyCellCopyButtonProps({
           cell,
           tableInstance,
         })
-      : cell.column.columnDef.muiTableBodyCellCopyButtonProps;
+      : columnDef.muiTableBodyCellCopyButtonProps;
 
   const buttonProps = {
     ...mTableBodyCellCopyButtonProps,

package/src/{head/MRT_TableHeadCellGrabHandle.tsx → buttons/MRT_GrabHandleButton.tsx}

@@ -1,14 +1,13 @@
 import { IconButton, Tooltip } from '@mui/material';
 import React, { FC, forwardRef, Ref } from 'react';
-import { MRT_Header, MRT_TableInstance } from '..';
+import { MRT_TableInstance } from '..';
 
 interface Props {
-  header: MRT_Header;
   ref: Ref<HTMLButtonElement>;
   tableInstance: MRT_TableInstance;
 }
 
-export const MRT_TableHeadCellGrabHandle: FC<Props> = forwardRef(
+export const MRT_GrabHandleButton: FC<Props> = forwardRef(
   ({ tableInstance }, ref) => {
     const {
       options: {

package/src/buttons/MRT_ToggleColumnActionMenuButton.tsx

@@ -22,6 +22,8 @@ export const MRT_ToggleColumnActionMenuButton: FC<Props> = ({
 
   const { column } = header;
 
+  const { columnDef } = column;
+
   const [anchorEl, setAnchorEl] = useState<null | HTMLElement>(null);
 
   const handleClick = (event: MouseEvent<HTMLElement>) => {
@@ -36,13 +38,12 @@ export const MRT_ToggleColumnActionMenuButton: FC<Props> = ({
       : muiTableHeadCellColumnActionsButtonProps;
 
   const mcTableHeadCellColumnActionsButtonProps =
-    column.columnDef.muiTableHeadCellColumnActionsButtonProps instanceof
-    Function
-      ? column.columnDef.muiTableHeadCellColumnActionsButtonProps({
+    columnDef.muiTableHeadCellColumnActionsButtonProps instanceof Function
+      ? columnDef.muiTableHeadCellColumnActionsButtonProps({
           column,
           tableInstance,
         })
-      : column.columnDef.muiTableHeadCellColumnActionsButtonProps;
+      : columnDef.muiTableHeadCellColumnActionsButtonProps;
 
   const iconButtonProps = {
     ...mTableHeadCellColumnActionsButtonProps,

package/src/footer/MRT_TableFooterCell.tsx

@@ -17,7 +17,7 @@ export const MRT_TableFooterCell: FC<Props> = ({ footer, tableInstance }) => {
 
   const { column } = footer;
 
-  const { columnDef } = column;
+  const { columnDef, columnDefType } = column;
 
   const mTableFooterCellProps =
     muiTableFooterCellProps instanceof Function
@@ -36,7 +36,7 @@ export const MRT_TableFooterCell: FC<Props> = ({ footer, tableInstance }) => {
 
   return (
     <TableCell
-      align={column.columnDefType === 'group' ? 'center' : 'left'}
+      align={columnDefType === 'group' ? 'center' : 'left'}
       colSpan={footer.colSpan}
       variant="head"
       {...tableCellProps}

package/src/footer/MRT_TableFooterRow.tsx

@@ -19,10 +19,10 @@ export const MRT_TableFooterRow: FC<Props> = ({
   // if no content in row, skip row
   if (
     !footerGroup.headers?.some(
-      (h) =>
-        (typeof h.column.columnDef.footer === 'string' &&
-          !!h.column.columnDef.footer) ||
-        h.column.columnDef.Footer,
+      (header) =>
+        (typeof header.column.columnDef.footer === 'string' &&
+          !!header.column.columnDef.footer) ||
+        header.column.columnDef.Footer,
     )
   )
     return null;

package/src/head/MRT_DraggableTableHeadCell.tsx

@@ -20,18 +20,24 @@ export const MRT_DraggableTableHeadCell: FC<Props> = ({
 
   const { columnOrder } = getState();
 
-  const reorder = (item: MRT_Header, newIndex: number) => {
-    const { index: currentIndex } = item;
-    columnOrder.splice(newIndex, 0, columnOrder.splice(currentIndex, 1)[0]);
+  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 [, drop] = useDrop({
+  const [, dropRef] = useDrop({
     accept: 'header',
-    drop: (item: MRT_Header) => reorder(item, header.index),
+    drop: (movingHeader: MRT_Header) => reorder(movingHeader, header),
   });
 
-  const [{ isDragging }, drag, preview] = useDrag({
+  const [{ isDragging }, dragRef, previewRef] = useDrag({
     collect: (monitor) => ({
       isDragging: monitor.isDragging(),
     }),
@@ -41,11 +47,11 @@ export const MRT_DraggableTableHeadCell: FC<Props> = ({
 
   return (
     <MRT_TableHeadCell
-      dragRef={drag}
-      dropRef={drop}
+      dragRef={dragRef}
+      dropRef={dropRef}
       header={header}
       isDragging={isDragging}
-      previewRef={preview}
+      previewRef={previewRef}
       tableInstance={tableInstance}
     />
   );

package/src/head/MRT_TableHeadCell.tsx

@@ -2,7 +2,7 @@ import React, { FC, ReactNode, Ref } from 'react';
 import { Box, TableCell, Theme, alpha, lighten } from '@mui/material';
 import { MRT_TableHeadCellFilterContainer } from './MRT_TableHeadCellFilterContainer';
 import { MRT_TableHeadCellFilterLabel } from './MRT_TableHeadCellFilterLabel';
-import { MRT_TableHeadCellGrabHandle } from './MRT_TableHeadCellGrabHandle';
+import { MRT_GrabHandleButton } from '../buttons/MRT_GrabHandleButton';
 import { MRT_TableHeadCellResizeHandle } from './MRT_TableHeadCellResizeHandle';
 import { MRT_TableHeadCellSortLabel } from './MRT_TableHeadCellSortLabel';
 import { MRT_ToggleColumnActionMenuButton } from '../buttons/MRT_ToggleColumnActionMenuButton';
@@ -59,12 +59,12 @@ export const MRT_TableHeadCell: FC<Props> = ({
   };
 
   const headerElement = (
-    column.columnDef?.Header instanceof Function
-      ? column.columnDef?.Header?.({
+    columnDef?.Header instanceof Function
+      ? columnDef?.Header?.({
           header,
           tableInstance,
         })
-      : column.columnDef?.Header ?? header.renderHeader()
+      : columnDef?.Header ?? header.renderHeader()
   ) as ReactNode;
 
   const getIsLastLeftPinnedColumn = () => {
@@ -123,12 +123,7 @@ export const MRT_TableHeadCell: FC<Props> = ({
           column.getIsPinned() && columnDefType !== 'group'
             ? 'sticky'
             : undefined,
-        pt:
-          columnDefType === 'display'
-            ? 0
-            : isDensePadding
-            ? '0.75rem'
-            : '1.25rem',
+        pt: columnDefType !== 'data' ? 0 : isDensePadding ? '0.25' : '.5rem',
         right:
           column.getIsPinned() === 'right' ? `${getTotalRight()}px` : undefined,
         transition: `all ${enableColumnResizing ? 0 : '0.2s'} ease-in-out`,
@@ -195,8 +190,7 @@ export const MRT_TableHeadCell: FC<Props> = ({
               ((enableColumnOrdering &&
                 columnDef.enableColumnOrdering !== false) ||
                 (enableGrouping && columnDef.enableGrouping !== false)) && (
-                <MRT_TableHeadCellGrabHandle
-                  header={header}
+                <MRT_GrabHandleButton
                   ref={dragRef as Ref<HTMLButtonElement>}
                   tableInstance={tableInstance}
                 />

package/src/head/MRT_TableHeadCellFilterLabel.tsx

@@ -24,11 +24,13 @@ export const MRT_TableHeadCellFilterLabel: FC<Props> = ({
 
   const { column } = header;
 
+  const { columnDef } = column;
+
   const filterFn = getState()?.currentFilterFns?.[header.id];
 
   const filterTooltip = !!column.getFilterValue()
     ? localization.filteringByColumn
-        .replace('{column}', String(column.columnDef.header))
+        .replace('{column}', String(columnDef.header))
         .replace(
           '{filterType}',
           filterFn instanceof Function

package/src/head/MRT_TableHeadCellResizeHandle.tsx

@@ -17,6 +17,8 @@ export const MRT_TableHeadCellResizeHandle: FC<Props> = ({
 
   const { column } = header;
 
+  const { columnDefType } = column;
+
   return (
     <Divider
       flexItem
@@ -26,8 +28,7 @@ export const MRT_TableHeadCellResizeHandle: FC<Props> = ({
         borderRadius: '2px',
         borderRightWidth: '2px',
         cursor: 'col-resize',
-        height:
-          showFilters && column.columnDefType === 'data' ? '4rem' : '2rem',
+        height: showFilters && columnDefType === 'data' ? '4rem' : '2rem',
         opacity: 0.8,
         position: 'absolute',
         right: '1px',

package/src/head/MRT_TableHeadCellSortLabel.tsx

@@ -17,16 +17,12 @@ export const MRT_TableHeadCellSortLabel: FC<Props> = ({
 
   const { column } = header;
 
+  const { columnDef } = column;
+
   const sortTooltip = !!column.getIsSorted()
     ? column.getIsSorted() === 'desc'
-      ? localization.sortedByColumnDesc.replace(
-          '{column}',
-          column.columnDef.header,
-        )
-      : localization.sortedByColumnAsc.replace(
-          '{column}',
-          column.columnDef.header,
-        )
+      ? localization.sortedByColumnDesc.replace('{column}', columnDef.header)
+      : localization.sortedByColumnAsc.replace('{column}', columnDef.header)
     : localization.unsorted;
 
   return (

package/src/inputs/MRT_FilterTextField.tsx

@@ -144,7 +144,7 @@ export const MRT_FilterTextField: FC<Props> = ({
       : inputIndex === 1
       ? localization.max
       : '';
-  console.log({ textFieldProps });
+
   return (
     <>
       <TextField

package/src/localization.ts

@@ -37,6 +37,7 @@ export interface MRT_Localization {
   pinToLeft: string;
   pinToRight: string;
   resetColumnSize: string;
+  resetOrder: string;
   rowActions: string;
   rowNumber: string;
   rowNumbers: string;
@@ -104,6 +105,7 @@ export const MRT_DefaultLocalization_EN: MRT_Localization = {
   pinToLeft: 'Pin to left',
   pinToRight: 'Pin to right',
   resetColumnSize: 'Reset column size',
+  resetOrder: 'Reset order',
   rowActions: 'Row Actions',
   rowNumber: '#',
   rowNumbers: 'Row Numbers',

package/src/menus/MRT_ShowHideColumnsMenu.tsx

@@ -1,7 +1,7 @@
 import React, { FC, useMemo } from 'react';
 import { Button, Menu, Divider, Box } from '@mui/material';
 import { MRT_ShowHideColumnsMenuItems } from './MRT_ShowHideColumnsMenuItems';
-import { MRT_Column, MRT_TableInstance } from '..';
+import type { MRT_Column, MRT_TableInstance } from '..';
 
 interface Props {
   anchorEl: HTMLElement | null;
@@ -18,16 +18,16 @@ export const MRT_ShowHideColumnsMenu: FC<Props> = ({
 }) => {
   const {
     getAllColumns,
+    getAllLeafColumns,
     getIsAllColumnsVisible,
-    getIsSomeColumnsVisible,
     getIsSomeColumnsPinned,
+    getIsSomeColumnsVisible,
     getState,
     toggleAllColumnsVisible,
-    getAllLeafColumns,
-    options: { localization, enablePinning },
+    options: { localization, enablePinning, enableColumnOrdering },
   } = tableInstance;
 
-  const { isDensePadding } = getState();
+  const { isDensePadding, columnOrder, columnPinning } = getState();
 
   const hideAllColumns = () => {
     getAllLeafColumns()
@@ -35,25 +35,19 @@ export const MRT_ShowHideColumnsMenu: FC<Props> = ({
       .forEach((col) => col.toggleVisibility(false));
   };
 
-  const allDisplayColumns = useMemo(
-    () => getAllColumns().filter((col) => col.columnDefType === 'display'),
-    [getAllColumns()],
-  );
-
-  const allDataColumns: (MRT_Column | null)[] = useMemo(() => {
-    const dataColumns = getAllColumns().filter(
-      (col) => col.columnDefType !== 'display',
-    );
-    return getIsSomeColumnsPinned()
-      ? [
-          ...dataColumns.filter((c) => c.getIsPinned() === 'left'),
-          null,
-          ...dataColumns.filter((c) => c.getIsPinned() === false),
-          null,
-          ...dataColumns.filter((c) => c.getIsPinned() === 'right'),
-        ]
-      : dataColumns;
-  }, [getAllColumns(), getState().columnPinning, getIsSomeColumnsPinned()]);
+  const allColumns = useMemo(() => {
+    const columns = getAllColumns();
+    if (
+      columnOrder.length > 0 &&
+      !columns.some((col) => col.columnDefType === 'group')
+    ) {
+      return (
+        columnOrder.map((colId) => columns.find((col) => col.id === colId)) ??
+        columns
+      );
+    }
+    return columns;
+  }, [getAllColumns(), columnOrder, columnPinning]) as MRT_Column[];
 
   return (
     <Menu
@@ -80,6 +74,11 @@ export const MRT_ShowHideColumnsMenu: FC<Props> = ({
             {localization.hideAll}
           </Button>
         )}
+        {!isSubMenu && enableColumnOrdering && (
+          <Button onClick={() => tableInstance.resetColumnOrder()}>
+            {localization.resetOrder}
+          </Button>
+        )}
         {!isSubMenu && enablePinning && (
           <Button
             disabled={!getIsSomeColumnsPinned()}
@@ -96,27 +95,15 @@ export const MRT_ShowHideColumnsMenu: FC<Props> = ({
         </Button>
       </Box>
       <Divider />
-      {allDisplayColumns.map((column, index) => (
+      {allColumns.map((column, index) => (
         <MRT_ShowHideColumnsMenuItems
+          allColumns={allColumns}
           column={column}
           isSubMenu={isSubMenu}
           key={`${index}-${column.id}`}
           tableInstance={tableInstance}
         />
       ))}
-      <Divider />
-      {allDataColumns.map((column, index) =>
-        column ? (
-          <MRT_ShowHideColumnsMenuItems
-            column={column}
-            isSubMenu={isSubMenu}
-            key={`${index}-${column.id}`}
-            tableInstance={tableInstance}
-          />
-        ) : (
-          <Divider key={`${index}-divider`} />
-        ),
-      )}
     </Menu>
   );
 };