material-react-table 0.13.2 → 0.14.1

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.2",
+  "version": "0.14.1",
   "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

@@ -514,7 +514,11 @@ export type MaterialReactTableProps<D extends Record<string, any> = {}> =
         }) => TableCellProps);
     muiTableFooterProps?:
       | TableFooterProps
-      | (({ instance }: { instance: MRT_TableInstance<D> }) => TableFooterProps);
+      | (({
+          instance,
+        }: {
+          instance: MRT_TableInstance<D>;
+        }) => TableFooterProps);
     muiTableFooterRowProps?:
       | TableRowProps
       | (({
@@ -758,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,
@@ -783,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>;
@@ -838,6 +846,7 @@ export default <D extends Record<string, any> = {}>({
   enableMultiRowSelection = true,
   enablePagination = true,
   enablePinning = false,
+  enableRowSelection = false,
   enableSelectAll = true,
   enableSorting = true,
   enableStickyHeader = false,
@@ -850,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',
@@ -877,6 +885,7 @@ export default <D extends Record<string, any> = {}>({
     enableMultiRowSelection={enableMultiRowSelection}
     enablePagination={enablePagination}
     enablePinning={enablePinning}
+    enableRowSelection={enableRowSelection}
     enableSelectAll={enableSelectAll}
     enableSorting={enableSorting}
     enableStickyHeader={enableStickyHeader}
@@ -891,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/body/MRT_TableBodyCell.tsx

@@ -30,6 +30,7 @@ export const MRT_TableBodyCell: FC<Props> = ({
       muiTableBodyCellProps,
       muiTableBodyCellSkeletonProps,
       onCellClick,
+      onRowClick,
       rowNumberMode,
       tableId,
     },
@@ -146,7 +147,10 @@ export const MRT_TableBodyCell: FC<Props> = ({
           : getIsFirstRightPinnedColumn()
           ? `-4px 0 4px -2px ${alpha(theme.palette.common.black, 0.1)}`
           : undefined,
-        cursor: isEditable && editingMode === 'cell' ? 'pointer' : 'text',
+        cursor:
+          (isEditable && editingMode === 'cell') || onRowClick || onCellClick
+            ? 'pointer'
+            : 'text',
         left:
           column.getIsPinned() === 'left'
             ? `${column.getStart('left')}px`

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

package/src/table/MRT_TableRoot.tsx

@@ -34,6 +34,7 @@ import {
   createDisplayColumn,
   createGroup,
   getAllLeafColumnDefs,
+  getDefaultColumnOrderIds,
 } from '../utils';
 import { defaultFilterFNs } from '../filtersFNs';
 import { Box, Dialog, Grow } from '@mui/material';
@@ -48,28 +49,10 @@ export const MRT_TableRoot = <D extends Record<string, any> = {}>(
     [props.tableId],
   );
 
-  const showActionColumn =
-    props.enableRowActions ||
-    (props.enableEditing && props.editingMode === 'row');
-
-  const showExpandColumn = props.enableExpanding || props.enableGrouping;
-
   const initialState: Partial<MRT_TableState<D>> = useMemo(() => {
     const initState = props.initialState ?? {};
-
     initState.columnOrder =
-      initState?.columnOrder ??
-      (props.enableColumnOrdering || props.enableGrouping)
-        ? ([
-            showActionColumn && 'mrt-row-actions',
-            showExpandColumn && 'mrt-expand',
-            props.enableRowSelection && 'mrt-select',
-            props.enableRowNumbers && 'mrt-row-numbers',
-            ...getAllLeafColumnDefs(props.columns as MRT_ColumnDef[]).map(
-              (c) => c.id,
-            ),
-          ].filter(Boolean) as string[])
-        : [];
+      initState.columnOrder ?? getDefaultColumnOrderIds(props);
 
     if (!props.enablePersistentState || !props.tableId) {
       return initState;
@@ -97,6 +80,9 @@ export const MRT_TableRoot = <D extends Record<string, any> = {}>(
     return initState;
   }, []);
 
+  const [columnOrder, setColumnOrder] = useState(
+    initialState.columnOrder ?? [],
+  );
   const [currentEditingCell, setCurrentEditingCell] =
     useState<MRT_Cell<D> | null>(initialState?.currentEditingCell ?? null);
   const [currentEditingRow, setCurrentEditingRow] = useState<MRT_Row<D> | null>(
@@ -148,14 +134,13 @@ export const MRT_TableRoot = <D extends Record<string, any> = {}>(
         getSortedRowModel: getSortedRowModel(),
         getSubRows: (row) => (row as MRT_Row)?.subRows,
         tableId,
-        initialState,
       }) as Table<D>,
     [],
   );
 
-  const [leadingDisplayColumns, trailingDisplayColumns] = useMemo(() => {
-    const leadingDisplayColumns = [
-      showActionColumn &&
+  const displayColumns = useMemo(() => {
+    return [
+      columnOrder.includes('mrt-row-actions') &&
         createDisplayColumn(table, {
           Cell: ({ cell }) => (
             <MRT_ToggleRowActionMenuButton
@@ -169,7 +154,7 @@ export const MRT_TableRoot = <D extends Record<string, any> = {}>(
           muiTableHeadCellProps: props.muiTableHeadCellProps,
           size: 70,
         }),
-      showExpandColumn &&
+      columnOrder.includes('mrt-expand') &&
         createDisplayColumn(table, {
           Cell: ({ cell }) => (
             <MRT_ExpandButton row={cell.row as any} instance={instance} />
@@ -184,7 +169,7 @@ export const MRT_TableRoot = <D extends Record<string, any> = {}>(
           muiTableHeadCellProps: props.muiTableHeadCellProps,
           size: 50,
         }),
-      props.enableRowSelection &&
+      columnOrder.includes('mrt-select') &&
         createDisplayColumn(table, {
           Cell: ({ cell }) => (
             <MRT_SelectCheckbox row={cell.row as any} instance={instance} />
@@ -199,7 +184,7 @@ export const MRT_TableRoot = <D extends Record<string, any> = {}>(
           muiTableHeadCellProps: props.muiTableHeadCellProps,
           size: 50,
         }),
-      props.enableRowNumbers &&
+      columnOrder.includes('mrt-row-numbers') &&
         createDisplayColumn(table, {
           Cell: ({ cell }) => cell.row.index + 1,
           Header: () => props.localization?.rowNumber,
@@ -210,22 +195,8 @@ export const MRT_TableRoot = <D extends Record<string, any> = {}>(
           size: 50,
         }),
     ].filter(Boolean) as MRT_ColumnDef<D>[];
-
-    const trailingDisplayColumns = [] as MRT_ColumnDef<D>[];
-
-    if (props.enableRowActions && props.positionActionsColumn === 'last') {
-      trailingDisplayColumns.push(
-        ...leadingDisplayColumns.splice(
-          leadingDisplayColumns.findIndex(
-            (col) => col.id === 'mrt-row-actions',
-          ),
-          1,
-        ),
-      );
-    }
-
-    return [leadingDisplayColumns, trailingDisplayColumns];
   }, [
+    columnOrder,
     props.editingMode,
     props.enableEditing,
     props.enableExpandAll,
@@ -244,13 +215,12 @@ export const MRT_TableRoot = <D extends Record<string, any> = {}>(
 
   const columns = useMemo(
     () => [
-      ...leadingDisplayColumns,
+      ...displayColumns,
       ...props.columns.map((column) =>
         column.columns
           ? createGroup(table, column as any, currentFilterFns)
           : createDataColumn(table, column as any, currentFilterFns),
       ),
-      ...trailingDisplayColumns,
     ],
     [table, props.columns, currentFilterFns],
   );
@@ -277,13 +247,16 @@ export const MRT_TableRoot = <D extends Record<string, any> = {}>(
   const instance = {
     //@ts-ignore
     ...useTableInstance(table, {
+      onColumnOrderChange: setColumnOrder,
       ...props,
       //@ts-ignore
       columns,
       data,
       //@ts-ignore
       globalFilterFn: currentGlobalFilterFn,
+      initialState,
       state: {
+        columnOrder,
         currentEditingCell,
         currentEditingRow,
         currentFilterFns,

package/src/toolbar/MRT_TablePagination.tsx

@@ -4,19 +4,21 @@ import { MRT_TableInstance } from '..';
 
 interface Props {
   instance: MRT_TableInstance;
+  position: 'top' | 'bottom';
 }
 
-export const MRT_TablePagination: FC<Props> = ({ instance }) => {
+export const MRT_TablePagination: FC<Props> = ({ instance, position }) => {
   const {
     getPrePaginationRowModel,
     getState,
     setPageIndex,
     setPageSize,
-    options: { muiTablePaginationProps },
+    options: { muiTablePaginationProps, enableToolbarInternalActions },
   } = instance;
 
   const {
     pagination: { pageSize = 10, pageIndex = 0 },
+    showGlobalFilter,
   } = getState();
 
   const tablePaginationProps =
@@ -49,6 +51,12 @@ export const MRT_TablePagination: FC<Props> = ({ instance }) => {
       {...tablePaginationProps}
       sx={{
         m: '0 0.5rem',
+        mt:
+          position === 'top' &&
+          enableToolbarInternalActions &&
+          !showGlobalFilter
+            ? '3.5rem'
+            : undefined,
         position: 'relative',
         zIndex: 2,
         ...tablePaginationProps?.sx,

package/src/toolbar/MRT_ToolbarBottom.tsx

@@ -1,7 +1,6 @@
 import React, { FC } from 'react';
 import { alpha, Box, Toolbar, useMediaQuery } from '@mui/material';
 import { MRT_TablePagination } from './MRT_TablePagination';
-import { MRT_ToolbarInternalButtons } from './MRT_ToolbarInternalButtons';
 import { MRT_ToolbarAlertBanner } from './MRT_ToolbarAlertBanner';
 import { MRT_LinearProgressBar } from './MRT_LinearProgressBar';
 import { commonToolbarStyles } from './MRT_ToolbarTop';
@@ -15,14 +14,12 @@ export const MRT_ToolbarBottom: FC<Props> = ({ instance }) => {
   const {
     getState,
     options: {
-      enableToolbarInternalActions,
-      tableId,
       enablePagination,
       muiTableToolbarBottomProps,
       positionPagination,
-      positionToolbarActions,
       positionToolbarAlertBanner,
-      renderToolbarCustomActions,
+      renderToolbarBottomCustomActions,
+      tableId,
     },
   } = instance;
 
@@ -38,10 +35,7 @@ export const MRT_ToolbarBottom: FC<Props> = ({ instance }) => {
   const stackAlertBanner =
     isMobile ||
     (positionToolbarAlertBanner === 'bottom' &&
-      positionToolbarActions === 'bottom') ||
-    (positionToolbarAlertBanner === 'bottom' &&
-      !!renderToolbarCustomActions &&
-      positionToolbarActions === 'bottom');
+      !!renderToolbarBottomCustomActions);
 
   return (
     <Toolbar
@@ -67,20 +61,29 @@ export const MRT_ToolbarBottom: FC<Props> = ({ instance }) => {
           display: 'flex',
           justifyContent: 'space-between',
           width: '100%',
-          position: stackAlertBanner ? 'relative' : 'absolute',
-          right: 0,
-          top: 0,
         }}
       >
-        {enableToolbarInternalActions && positionToolbarActions === 'bottom' ? (
-          <MRT_ToolbarInternalButtons instance={instance} />
+        {renderToolbarBottomCustomActions ? (
+          <Box sx={{ p: '0.5rem' }}>
+            {renderToolbarBottomCustomActions({ instance })}
+          </Box>
         ) : (
           <span />
         )}
-        {enablePagination &&
-          ['bottom', 'both'].includes(positionPagination ?? '') && (
-            <MRT_TablePagination instance={instance} />
-          )}
+        <Box
+          sx={{
+            display: 'flex',
+            justifyContent: 'flex-end',
+            position: stackAlertBanner ? 'relative' : 'absolute',
+            right: 0,
+            top: 0,
+          }}
+        >
+          {enablePagination &&
+            ['bottom', 'both'].includes(positionPagination ?? '') && (
+              <MRT_TablePagination instance={instance} position="bottom" />
+            )}
+        </Box>
       </Box>
     </Toolbar>
   );

package/src/toolbar/MRT_ToolbarInternalButtons.tsx

@@ -29,8 +29,8 @@ export const MRT_ToolbarInternalButtons: FC<Props> = ({ instance }) => {
   return (
     <Box
       sx={{
-        display: 'flex',
         alignItems: 'center',
+        display: 'flex',
         zIndex: 3,
       }}
     >

package/src/toolbar/MRT_ToolbarTop.tsx

@@ -15,7 +15,6 @@ export const commonToolbarStyles = ({ theme }: { theme: Theme }) => ({
   overflow: 'hidden',
   p: '0 !important',
   transition: 'all 0.2s ease-in-out',
-  width: '100%',
   zIndex: 1,
 });
 
@@ -30,13 +29,12 @@ export const MRT_ToolbarTop: FC<Props> = ({ instance }) => {
       enableGlobalFilter,
       enablePagination,
       enableToolbarInternalActions,
-      tableId,
       muiTableToolbarTopProps,
-      positionPagination,
       positionGlobalFilter,
-      positionToolbarActions,
+      positionPagination,
       positionToolbarAlertBanner,
-      renderToolbarCustomActions,
+      renderToolbarTopCustomActions,
+      tableId,
     },
   } = instance;
 
@@ -52,7 +50,7 @@ export const MRT_ToolbarTop: FC<Props> = ({ instance }) => {
   const stackAlertBanner =
     isMobile ||
     (positionToolbarAlertBanner === 'top' &&
-      (!!renderToolbarCustomActions || showGlobalFilter));
+      (!!renderToolbarTopCustomActions || showGlobalFilter));
 
   return (
     <Toolbar
@@ -77,29 +75,34 @@ export const MRT_ToolbarTop: FC<Props> = ({ instance }) => {
       <Box
         sx={{
           alignItems: 'flex-start',
+          boxSizing: 'border-box',
           display: 'flex',
           justifyContent: 'space-between',
           p: '0.5rem',
           position: stackAlertBanner ? 'relative' : 'absolute',
           right: 0,
           top: 0,
-          width: renderToolbarCustomActions ? '100%' : undefined,
+          width: '100%',
         }}
       >
         {enableGlobalFilter && positionGlobalFilter === 'left' && (
           <MRT_SearchTextField instance={instance} />
         )}
-        {renderToolbarCustomActions?.({ instance }) ?? <span />}
-        {enableToolbarInternalActions && positionToolbarActions === 'top' && (
+
+        {renderToolbarTopCustomActions?.({ instance }) ?? <span />}
+        {enableToolbarInternalActions ? (
           <MRT_ToolbarInternalButtons instance={instance} />
+        ) : (
+          enableGlobalFilter &&
+          positionGlobalFilter === 'right' && (
+            <MRT_SearchTextField instance={instance} />
+          )
         )}
       </Box>
-      <div>
-        {enablePagination &&
-          ['top', 'both'].includes(positionPagination ?? '') && (
-            <MRT_TablePagination instance={instance} />
-          )}
-      </div>
+      {enablePagination &&
+        ['top', 'both'].includes(positionPagination ?? '') && (
+          <MRT_TablePagination instance={instance} position="top" />
+        )}
       <MRT_LinearProgressBar alignTo="bottom" instance={instance} />
     </Toolbar>
   );

package/src/utils.ts

@@ -4,7 +4,12 @@ import {
   Table,
   Updater,
 } from '@tanstack/react-table';
-import { MRT_Column, MRT_ColumnDef, MRT_FilterFn } from '.';
+import {
+  MaterialReactTableProps,
+  MRT_Column,
+  MRT_ColumnDef,
+  MRT_FilterFn,
+} from '.';
 import { defaultFilterFNs } from './filtersFNs';
 
 export const getAllLeafColumnDefs = (
@@ -74,3 +79,30 @@ export const reorderColumn = (
   );
   setColumnOrder([...columnOrder]);
 };
+
+export const getLeadingDisplayColumnIds = (
+  props: MaterialReactTableProps<any>,
+) =>
+  [
+    ((props.positionActionsColumn === 'first' && props.enableRowActions) ||
+      (props.enableEditing && props.editingMode === 'row')) &&
+      'mrt-row-actions',
+    (props.enableExpanding || props.enableGrouping) && 'mrt-expand',
+    props.enableRowSelection && 'mrt-select',
+    props.enableRowNumbers && 'mrt-row-numbers',
+  ].filter(Boolean) as string[];
+
+export const getTrailingDisplayColumnIds = (
+  props: MaterialReactTableProps<any>,
+) => [
+  ((props.positionActionsColumn === 'last' && props.enableRowActions) ||
+    (props.enableEditing && props.editingMode === 'row')) &&
+    'mrt-row-actions',
+];
+
+export const getDefaultColumnOrderIds = (props: MaterialReactTableProps<any>) =>
+  [
+    ...getLeadingDisplayColumnIds(props),
+    ...getAllLeafColumnDefs(props.columns as MRT_ColumnDef[]).map((c) => c.id),
+    ...getTrailingDisplayColumnIds(props),
+  ].filter(Boolean) as string[];