material-react-table 0.13.1 → 0.14.0

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[];