material-react-table 0.13.2 → 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.2",
+  "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.",

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
       | (({
@@ -838,6 +842,7 @@ export default <D extends Record<string, any> = {}>({
   enableMultiRowSelection = true,
   enablePagination = true,
   enablePinning = false,
+  enableRowSelection = false,
   enableSelectAll = true,
   enableSorting = true,
   enableStickyHeader = false,
@@ -850,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',
@@ -877,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/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/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[];