material-react-table 0.8.14 → 0.8.15

package/dist/utils.d.ts

@@ -1,5 +1,5 @@
-import { ColumnDef, Table } from '@tanstack/react-table';
-import { MRT_ColumnDef, MRT_FilterFn } from '.';
+import { ColumnDef, ColumnOrderState, Table, Updater } from '@tanstack/react-table';
+import { 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]: MRT_FilterFn<{}>;
@@ -10,3 +10,4 @@ export declare const createDataColumn: <D extends Record<string, any> = {}>(tabl
 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>;
+export declare const reorderColumn: (movingColumn: MRT_Column, receivingColumn: MRT_Column, columnOrder: ColumnOrderState, setColumnOrder: (updater: Updater<ColumnOrderState>) => void) => void;

package/package.json

@@ -1,5 +1,5 @@
 {
-  "version": "0.8.14",
+  "version": "0.8.15",
   "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

@@ -80,11 +80,14 @@ export type MRT_TableInstance<D extends Record<string, any> = {}> = Omit<
   | 'getAllColumns'
   | 'getAllFlatColumns'
   | 'getAllLeafColumns'
+  | 'getCenterLeafColumns'
   | 'getColumn'
   | 'getExpandedRowModel'
   | 'getFlatHeaders'
+  | 'getLeftLeafColumns'
   | 'getPaginationRowModel'
   | 'getPrePaginationRowModel'
+  | 'getRightLeafColumns'
   | 'getRowModel'
   | 'getSelectedRowModel'
   | 'getState'
@@ -93,11 +96,14 @@ export type MRT_TableInstance<D extends Record<string, any> = {}> = Omit<
   getAllColumns: () => MRT_Column<D>[];
   getAllFlatColumns: () => MRT_Column<D>[];
   getAllLeafColumns: () => MRT_Column<D>[];
+  getCenterLeafColumns: () => MRT_Column<D>[];
   getColumn: (columnId: string) => MRT_Column<D>;
   getExpandedRowModel: () => MRT_RowModel<D>;
   getFlatHeaders: () => MRT_Header<D>[];
+  getLeftLeafColumns: () => MRT_Column<D>[];
   getPaginationRowModel: () => MRT_RowModel<D>;
   getPrePaginationRowModel: () => MRT_RowModel<D>;
+  getRightLeafColumns: () => MRT_Column<D>[];
   getRowModel: () => MRT_RowModel<D>;
   getSelectedRowModel: () => MRT_RowModel<D>;
   getState: () => MRT_TableState<D>;

package/src/body/MRT_TableBodyCell.tsx

@@ -1,8 +1,10 @@
 import React, { FC, MouseEvent, useMemo } from 'react';
+import { useDrop } from 'react-dnd';
 import { alpha, darken, lighten, Skeleton, TableCell } from '@mui/material';
 import { MRT_EditCellTextField } from '../inputs/MRT_EditCellTextField';
-import type { MRT_Cell, MRT_TableInstance } from '..';
 import { MRT_CopyButton } from '../buttons/MRT_CopyButton';
+import { reorderColumn } from '../utils';
+import type { MRT_Cell, MRT_Column, MRT_TableInstance } from '..';
 
 interface Props {
   cell: MRT_Cell;
@@ -20,16 +22,19 @@ export const MRT_TableBodyCell: FC<Props> = ({
     options: {
       editingMode,
       enableClickToCopy,
+      enableColumnOrdering,
       enableEditing,
       idPrefix,
       muiTableBodyCellProps,
       muiTableBodyCellSkeletonProps,
       onCellClick,
     },
+    setColumnOrder,
     setCurrentEditingCell,
   } = tableInstance;
 
   const {
+    columnOrder,
     currentEditingCell,
     currentEditingRow,
     isDensePadding,
@@ -41,6 +46,12 @@ export const MRT_TableBodyCell: FC<Props> = ({
 
   const { columnDef, columnDefType } = column;
 
+  const [, dropRef] = useDrop({
+    accept: 'column',
+    drop: (movingColumn: MRT_Column) =>
+      reorderColumn(movingColumn, column, columnOrder, setColumnOrder),
+  });
+
   const mTableCellBodyProps =
     muiTableBodyCellProps instanceof Function
       ? muiTableBodyCellProps({ cell, tableInstance })
@@ -121,6 +132,9 @@ export const MRT_TableBodyCell: FC<Props> = ({
       }
       onDoubleClick={handleDoubleClick}
       {...tableCellProps}
+      ref={
+        columnDefType === 'data' && enableColumnOrdering ? dropRef : undefined
+      }
       sx={(theme) => ({
         backgroundColor: column.getIsPinned()
           ? alpha(lighten(theme.palette.background.default, 0.04), 0.95)

package/src/buttons/MRT_ColumnPinningButtons.tsx

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

package/src/footer/MRT_TableFooterCell.tsx

@@ -59,12 +59,12 @@ export const MRT_TableFooterCell: FC<Props> = ({ footer, tableInstance }) => {
       <>
         {footer.isPlaceholder
           ? null
-          : columnDef.Footer instanceof Function
-          ? columnDef.Footer?.({
-              footer,
-              tableInstance,
-            })
-          : columnDef.Footer ??
+          : (columnDef.Footer instanceof Function
+              ? columnDef.Footer?.({
+                  footer,
+                  tableInstance,
+                })
+              : columnDef.Footer) ??
             columnDef.footer ??
             footer.renderFooter() ??
             null}

package/src/head/MRT_DraggableTableHeadCell.tsx

@@ -1,7 +1,8 @@
 import React, { FC } from 'react';
 import { useDrag, useDrop } from 'react-dnd';
 import { MRT_TableHeadCell } from './MRT_TableHeadCell';
-import type { MRT_Header, MRT_TableInstance } from '..';
+import type { MRT_Column, MRT_Header, MRT_TableInstance } from '..';
+import { reorderColumn } from '../utils';
 
 interface Props {
   header: MRT_Header;
@@ -20,29 +21,20 @@ export const MRT_DraggableTableHeadCell: FC<Props> = ({
 
   const { columnOrder } = getState();
 
-  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 { column } = header;
 
   const [, dropRef] = useDrop({
-    accept: 'header',
-    drop: (movingHeader: MRT_Header) => reorder(movingHeader, header),
+    accept: 'column',
+    drop: (movingColumn: MRT_Column) =>
+      reorderColumn(movingColumn, column, columnOrder, setColumnOrder),
   });
 
   const [{ isDragging }, dragRef, previewRef] = useDrag({
     collect: (monitor) => ({
       isDragging: monitor.isDragging(),
     }),
-    item: () => header,
-    type: 'header',
+    item: () => column,
+    type: 'column',
   });
 
   return (

package/src/head/MRT_TableHeadCell.tsx

@@ -58,14 +58,14 @@ export const MRT_TableHeadCell: FC<Props> = ({
     ...mcTableHeadCellProps,
   };
 
-  const headerElement = (
-    columnDef?.Header instanceof Function
-      ? columnDef?.Header?.({
-          header,
-          tableInstance,
-        })
-      : columnDef?.Header ?? header.renderHeader()
-  ) as ReactNode;
+  const headerElement = ((columnDef?.Header instanceof Function
+    ? columnDef?.Header?.({
+        header,
+        tableInstance,
+      })
+    : columnDef?.Header) ??
+    header.renderHeader() ??
+    columnDef.header) as ReactNode;
 
   const getIsLastLeftPinnedColumn = () => {
     return (
@@ -92,7 +92,9 @@ export const MRT_TableHeadCell: FC<Props> = ({
       align={columnDefType === 'group' ? 'center' : 'left'}
       colSpan={header.colSpan}
       {...tableCellProps}
-      ref={columnDefType === 'data' ? dropRef : undefined}
+      ref={
+        columnDefType === 'data' && enableColumnOrdering ? dropRef : undefined
+      }
       sx={(theme: Theme) => ({
         backgroundColor:
           column.getIsPinned() && columnDefType !== 'group'
@@ -123,7 +125,7 @@ export const MRT_TableHeadCell: FC<Props> = ({
           column.getIsPinned() && columnDefType !== 'group'
             ? 'sticky'
             : undefined,
-        pt: columnDefType !== 'data' ? 0 : isDensePadding ? '0.25' : '.5rem',
+        pt: columnDefType !== 'data' ? 0 : isDensePadding ? '0.25' : '.75rem',
         right:
           column.getIsPinned() === 'right' ? `${getTotalRight()}px` : undefined,
         transition: `all ${enableColumnResizing ? 0 : '0.2s'} ease-in-out`,

package/src/menus/MRT_ShowHideColumnsMenu.tsx

@@ -19,9 +19,12 @@ export const MRT_ShowHideColumnsMenu: FC<Props> = ({
   const {
     getAllColumns,
     getAllLeafColumns,
+    getCenterLeafColumns,
     getIsAllColumnsVisible,
     getIsSomeColumnsPinned,
     getIsSomeColumnsVisible,
+    getLeftLeafColumns,
+    getRightLeafColumns,
     getState,
     toggleAllColumnsVisible,
     options: { localization, enablePinning, enableColumnOrdering },
@@ -41,13 +44,23 @@ export const MRT_ShowHideColumnsMenu: FC<Props> = ({
       columnOrder.length > 0 &&
       !columns.some((col) => col.columnDefType === 'group')
     ) {
-      return (
-        columnOrder.map((colId) => columns.find((col) => col.id === colId)) ??
-        columns
-      );
+      return [
+        ...getLeftLeafColumns(),
+        ...[...new Set(columnOrder)].map((colId) =>
+          getCenterLeafColumns().find((col) => col?.id === colId),
+        ),
+        ...getRightLeafColumns(),
+      ].filter(Boolean);
     }
     return columns;
-  }, [getAllColumns(), columnOrder, columnPinning]) as MRT_Column[];
+  }, [
+    columnOrder,
+    columnPinning,
+    getAllColumns(),
+    getCenterLeafColumns(),
+    getLeftLeafColumns(),
+    getRightLeafColumns(),
+  ]) as MRT_Column[];
 
   return (
     <Menu

package/src/menus/MRT_ShowHideColumnsMenuItems.tsx

@@ -3,6 +3,7 @@ import { useDrag, useDrop } from 'react-dnd';
 import { Box, FormControlLabel, MenuItem, Switch } from '@mui/material';
 import { MRT_ColumnPinningButtons } from '../buttons/MRT_ColumnPinningButtons';
 import { MRT_GrabHandleButton } from '../buttons/MRT_GrabHandleButton';
+import { reorderColumn } from '../utils';
 import type { MRT_Column, MRT_TableInstance } from '..';
 
 interface Props {
@@ -28,21 +29,10 @@ export const MRT_ShowHideColumnsMenuItems: FC<Props> = ({
 
   const { columnDef, columnDefType } = column;
 
-  const reorder = (movingColumn: MRT_Column, receivingColumn: MRT_Column) => {
-    if (movingColumn.getCanPin()) {
-      movingColumn.pin(receivingColumn.getIsPinned());
-    }
-    columnOrder.splice(
-      columnOrder.indexOf(receivingColumn.id),
-      0,
-      columnOrder.splice(columnOrder.indexOf(movingColumn.id), 1)[0],
-    );
-    setColumnOrder([...columnOrder]);
-  };
-
   const [, dropRef] = useDrop({
     accept: 'column',
-    drop: (movingColumn: MRT_Column) => reorder(movingColumn, column),
+    drop: (movingColumn: MRT_Column) =>
+      reorderColumn(movingColumn, column, columnOrder, setColumnOrder),
   });
 
   const [, dragRef, previewRef] = useDrag({
@@ -85,7 +75,14 @@ export const MRT_ShowHideColumnsMenuItems: FC<Props> = ({
           py: '6px',
         }}
       >
-        <Box ref={previewRef} sx={{ display: 'flex', flexWrap: 'nowrap' }}>
+        <Box
+          ref={previewRef}
+          sx={{
+            display: 'flex',
+            flexWrap: 'nowrap',
+            gap: '8px',
+          }}
+        >
           {columnDefType !== 'group' &&
             enableColumnOrdering &&
             columnDef.enableColumnOrdering !== false &&
@@ -112,10 +109,13 @@ export const MRT_ShowHideColumnsMenuItems: FC<Props> = ({
             }}
             checked={switchChecked}
             control={<Switch />}
-            disabled={(isSubMenu && switchChecked) || !column.getCanHide()}
+            disabled={
+              (isSubMenu && switchChecked) ||
+              !column.getCanHide() ||
+              column.getIsGrouped()
+            }
             label={columnDef.header}
             onChange={() => handleToggleColumnHidden(column)}
-            sx={{ ml: '4px' }}
           />
         </Box>
       </MenuItem>

package/src/table/MRT_TableRoot.tsx

@@ -12,6 +12,7 @@ import {
   ReactTableGenerics,
   getFacetedRowModel,
   TableState,
+  Table,
 } from '@tanstack/react-table';
 import {
   MRT_Cell,
@@ -57,7 +58,8 @@ export const MRT_TableRoot = <D extends Record<string, any> = {}>(
     const initState = props.initialState ?? {};
 
     initState.columnOrder =
-      initState?.columnOrder ?? props.enableColumnOrdering
+      initState?.columnOrder ??
+      (props.enableColumnOrdering || props.enableGrouping)
         ? ([
             showActionColumn && 'mrt-row-actions',
             showExpandColumn && 'mrt-expand',
@@ -135,6 +137,7 @@ export const MRT_TableRoot = <D extends Record<string, any> = {}>(
 
   const table = useMemo(
     () =>
+      // @ts-ignore
       createTable().setOptions({
         //@ts-ignore
         filterFns: defaultFilterFNs,
@@ -148,7 +151,7 @@ export const MRT_TableRoot = <D extends Record<string, any> = {}>(
         getSubRows: (row) => (row as MRT_Row)?.subRows,
         idPrefix,
         initialState,
-      }),
+      }) as Table<D>,
     [],
   );
 
@@ -165,6 +168,8 @@ export const MRT_TableRoot = <D extends Record<string, any> = {}>(
             ),
             header: props.localization?.actions,
             id: 'mrt-row-actions',
+            muiTableBodyCellProps: props.muiTableBodyCellProps,
+            muiTableHeadCellProps: props.muiTableHeadCellProps,
             size: 60,
           }),
         showExpandColumn &&
@@ -181,6 +186,8 @@ export const MRT_TableRoot = <D extends Record<string, any> = {}>(
               ) : null,
             header: props.localization?.expand,
             id: 'mrt-expand',
+            muiTableBodyCellProps: props.muiTableBodyCellProps,
+            muiTableHeadCellProps: props.muiTableHeadCellProps,
             size: 50,
           }),
         props.enableRowSelection &&
@@ -197,6 +204,8 @@ export const MRT_TableRoot = <D extends Record<string, any> = {}>(
               ) : null,
             header: props.localization?.select,
             id: 'mrt-select',
+            muiTableBodyCellProps: props.muiTableBodyCellProps,
+            muiTableHeadCellProps: props.muiTableHeadCellProps,
             size: 50,
           }),
         props.enableRowNumbers &&
@@ -205,6 +214,8 @@ export const MRT_TableRoot = <D extends Record<string, any> = {}>(
             Header: () => props.localization?.rowNumber,
             header: props.localization?.rowNumbers,
             id: 'mrt-row-numbers',
+            muiTableBodyCellProps: props.muiTableBodyCellProps,
+            muiTableHeadCellProps: props.muiTableHeadCellProps,
             size: 50,
           }),
       ].filter(Boolean),

package/src/utils.ts

@@ -1,5 +1,10 @@
-import { ColumnDef, Table } from '@tanstack/react-table';
-import { MRT_ColumnDef, MRT_FilterFn } from '.';
+import {
+  ColumnDef,
+  ColumnOrderState,
+  Table,
+  Updater,
+} from '@tanstack/react-table';
+import { MRT_Column, MRT_ColumnDef, MRT_FilterFn, } from '.';
 import { MRT_FILTER_OPTION } from './enums';
 import { defaultFilterFNs } from './filtersFNs';
 
@@ -52,3 +57,20 @@ export const createDisplayColumn = <D extends Record<string, any> = {}>(
   table: Table<D>,
   column: Omit<MRT_ColumnDef<D>, 'header'> & { header?: string },
 ): ColumnDef<D> => table.createDisplayColumn(column as ColumnDef<D>);
+
+export const reorderColumn = (
+  movingColumn: MRT_Column,
+  receivingColumn: MRT_Column,
+  columnOrder: ColumnOrderState,
+  setColumnOrder: (updater: Updater<ColumnOrderState>) => void,
+) => {
+  if (movingColumn.getCanPin()) {
+    movingColumn.pin(receivingColumn.getIsPinned());
+  }
+  columnOrder.splice(
+    columnOrder.indexOf(receivingColumn.id),
+    0,
+    columnOrder.splice(columnOrder.indexOf(movingColumn.id), 1)[0],
+  );
+  setColumnOrder([...columnOrder]);
+};