material-react-table 0.30.2 → 0.31.0

package/dist/toolbar/MRT_ToolbarDropZone.d.ts

@@ -0,0 +1,7 @@
+import { FC } from 'react';
+import { MRT_TableInstance } from '..';
+interface Props {
+    table: MRT_TableInstance;
+}
+export declare const MRT_ToolbarDropZone: FC<Props>;
+export {};

package/package.json

@@ -1,5 +1,5 @@
 {
-  "version": "0.30.2",
+  "version": "0.31.0",
   "license": "MIT",
   "name": "material-react-table",
   "description": "A fully featured Material UI V5 implementation of TanStack React Table V8, written from the ground up in TypeScript.",
@@ -49,11 +49,11 @@
   "size-limit": [
     {
       "path": "dist/material-react-table.cjs.production.min.js",
-      "limit": "40 KB"
+      "limit": "50 KB"
     },
     {
       "path": "dist/material-react-table.esm.js",
-      "limit": "40 KB"
+      "limit": "50 KB"
     }
   ],
   "devDependencies": {

package/src/MaterialReactTable.tsx

@@ -104,8 +104,12 @@ export type MRT_TableInstance<TData extends Record<string, any> = {}> = Omit<
     }>
   >;
   setCurrentGlobalFilterFn: Dispatch<SetStateAction<MRT_FilterOption>>;
-  setCurrentHoveredColumn: Dispatch<SetStateAction<MRT_Column<TData> | null>>;
-  setCurrentHoveredRow: Dispatch<SetStateAction<MRT_Row | null>>;
+  setCurrentHoveredColumn: Dispatch<
+    SetStateAction<MRT_Column<TData> | { id: string } | null>
+  >;
+  setCurrentHoveredRow: Dispatch<
+    SetStateAction<MRT_Row<TData> | { id: string } | null>
+  >;
   setDensity: Dispatch<SetStateAction<'comfortable' | 'compact' | 'spacious'>>;
   setIsFullScreen: Dispatch<SetStateAction<boolean>>;
   setShowAlertBanner: Dispatch<SetStateAction<boolean>>;
@@ -121,8 +125,8 @@ export type MRT_TableState<TData extends Record<string, any> = {}> =
     currentEditingRow: MRT_Row<TData> | null;
     currentFilterFns: Record<string, MRT_FilterOption>;
     currentGlobalFilterFn: Record<string, MRT_FilterOption>;
-    currentHoveredColumn: MRT_Column<TData> | null;
-    currentHoveredRow: MRT_Row<TData> | null;
+    currentHoveredColumn: MRT_Column<TData> | { id: string } | null;
+    currentHoveredRow: MRT_Row<TData> | { id: string } | null;
     density: 'comfortable' | 'compact' | 'spacious';
     isFullScreen: boolean;
     isLoading: boolean;
@@ -689,7 +693,7 @@ export type MaterialReactTableProps<TData extends Record<string, any> = {}> =
     }: {
       event: DragEvent<HTMLButtonElement>;
       draggedColumn: MRT_Column<TData>;
-      targetColumn: MRT_Column<TData> | null;
+      targetColumn: MRT_Column<TData> | { id: string } | null;
     }) => void;
     onCurrentDraggingColumnChange?: OnChangeFn<MRT_Column<TData> | null>;
     onCurrentDraggingRowChange?: OnChangeFn<MRT_Row<TData> | null>;
@@ -715,7 +719,7 @@ export type MaterialReactTableProps<TData extends Record<string, any> = {}> =
     }: {
       event: DragEvent<HTMLButtonElement>;
       draggedRow: MRT_Row<TData>;
-      targetRow: MRT_Row<TData> | null;
+      targetRow: MRT_Row<TData> | { id: string } | null;
     }) => void;
     onShowAlertBannerChange?: OnChangeFn<boolean>;
     onShowFiltersChange?: OnChangeFn<boolean>;
@@ -725,7 +729,8 @@ export type MaterialReactTableProps<TData extends Record<string, any> = {}> =
     positionExpandColumn?: 'first' | 'last';
     positionGlobalFilter?: 'left' | 'right';
     positionPagination?: 'bottom' | 'top' | 'both';
-    positionToolbarAlertBanner?: 'bottom' | 'top';
+    positionToolbarAlertBanner?: 'bottom' | 'top' | 'none';
+    positionToolbarDropZone?: 'bottom' | 'top' | 'none' | 'both';
     renderDetailPanel?: ({
       row,
       table,
@@ -833,6 +838,7 @@ export default <TData extends Record<string, any> = {}>({
   positionGlobalFilter = 'right',
   positionPagination = 'bottom',
   positionToolbarAlertBanner = 'top',
+  positionToolbarDropZone = 'top',
   rowNumberMode = 'original',
   selectAllMode = 'all',
   ...rest
@@ -876,6 +882,7 @@ export default <TData extends Record<string, any> = {}>({
     positionGlobalFilter={positionGlobalFilter}
     positionPagination={positionPagination}
     positionToolbarAlertBanner={positionToolbarAlertBanner}
+    positionToolbarDropZone={positionToolbarDropZone}
     rowNumberMode={rowNumberMode}
     selectAllMode={selectAllMode}
     {...rest}

package/src/body/MRT_TableBodyCell.tsx

@@ -35,6 +35,7 @@ export const MRT_TableBodyCell: FC<Props> = ({
       enableClickToCopy,
       enableColumnOrdering,
       enableEditing,
+      enableGrouping,
       enablePagination,
       enableRowNumbers,
       muiTableBodyCellProps,
@@ -129,6 +130,9 @@ export const MRT_TableBodyCell: FC<Props> = ({
   };
 
   const handleDragEnter = (_e: DragEvent) => {
+    if (enableGrouping && currentHoveredColumn?.id === 'drop-zone') {
+      setCurrentHoveredColumn(null);
+    }
     if (enableColumnOrdering && currentDraggingColumn) {
       setCurrentHoveredColumn(
         columnDef.enableColumnOrdering !== false ? column : null,

package/src/head/MRT_TableHeadCell.tsx

@@ -71,6 +71,9 @@ export const MRT_TableHeadCell: FC<Props> = ({ header, table }) => {
   };
 
   const handleDragEnter = (_e: DragEvent) => {
+    if (enableGrouping && currentHoveredColumn?.id === 'drop-zone') {
+      setCurrentHoveredColumn(null);
+    }
     if (enableColumnOrdering && currentDraggingColumn) {
       setCurrentHoveredColumn(
         columnDef.enableColumnOrdering !== false ? column : null,

package/src/head/MRT_TableHeadCellGrabHandle.tsx

@@ -55,12 +55,16 @@ export const MRT_TableHeadCellGrabHandle: FC<Props> = ({
       draggedColumn: column,
       targetColumn: currentHoveredColumn,
     });
-    if (
+    if (currentHoveredColumn?.id === 'drop-zone') {
+      column.toggleGrouping();
+    } else if (
       enableColumnOrdering &&
       currentHoveredColumn &&
       currentHoveredColumn?.id !== currentDraggingColumn?.id
     ) {
-      setColumnOrder(reorderColumn(column, currentHoveredColumn, columnOrder));
+      setColumnOrder(
+        reorderColumn(column, currentHoveredColumn as MRT_Column, columnOrder),
+      );
     }
     setCurrentDraggingColumn(null);
     setCurrentHoveredColumn(null);

package/src/localization.ts

@@ -10,6 +10,7 @@ export interface MRT_Localization {
   clickToCopy: string;
   columnActions: string;
   copiedToClipboard: string;
+  dropToGroupBy: string;
   edit: string;
   expand: string;
   expandAll: string;
@@ -91,6 +92,7 @@ export const MRT_DefaultLocalization_EN: MRT_Localization = {
   clickToCopy: 'Click to copy',
   columnActions: 'Column Actions',
   copiedToClipboard: 'Copied to clipboard',
+  dropToGroupBy: 'Drop to group by {column}',
   edit: 'Edit',
   expand: 'Expand',
   expandAll: 'Expand all',

package/src/table/MRT_TableRoot.tsx

@@ -80,12 +80,12 @@ export const MRT_TableRoot = <TData extends Record<string, any> = {}>(
     useState<MRT_Cell<TData> | null>(initialState.currentEditingCell ?? null);
   const [currentEditingRow, setCurrentEditingRow] =
     useState<MRT_Row<TData> | null>(initialState.currentEditingRow ?? null);
-  const [currentHoveredColumn, setCurrentHoveredColumn] =
-    useState<MRT_Column<TData> | null>(
-      initialState.currentHoveredColumn ?? null,
-    );
-  const [currentHoveredRow, setCurrentHoveredRow] =
-    useState<MRT_Row<TData> | null>(initialState.currentHoveredRow ?? null);
+  const [currentHoveredColumn, setCurrentHoveredColumn] = useState<
+    MRT_Column<TData> | { id: string } | null
+  >(initialState.currentHoveredColumn ?? null);
+  const [currentHoveredRow, setCurrentHoveredRow] = useState<
+    MRT_Row<TData> | { id: string } | null
+  >(initialState.currentHoveredRow ?? null);
   const [density, setDensity] = useState(
     initialState?.density ?? 'comfortable',
   );
@@ -248,11 +248,12 @@ export const MRT_TableRoot = <TData extends Record<string, any> = {}>(
       getPaginationRowModel: getPaginationRowModel(),
       getSortedRowModel: getSortedRowModel(),
       onColumnOrderChange: setColumnOrder,
+      getSubRows: (row) => row?.subRows,
       ...props,
       //@ts-ignore
       columns: columnDefs,
       data,
-      getSubRows: (row) => row?.subRows,
+
       globalFilterFn:
         //@ts-ignore
         MRT_FilterFns[currentGlobalFilterFn] ?? MRT_FilterFns.fuzzy,

package/src/toolbar/MRT_ToolbarBottom.tsx

@@ -5,6 +5,7 @@ import { MRT_ToolbarAlertBanner } from './MRT_ToolbarAlertBanner';
 import { MRT_LinearProgressBar } from './MRT_LinearProgressBar';
 import { commonToolbarStyles } from './MRT_ToolbarTop';
 import { MRT_TableInstance } from '..';
+import { MRT_ToolbarDropZone } from './MRT_ToolbarDropZone';
 
 interface Props {
   table: MRT_TableInstance;
@@ -18,6 +19,7 @@ export const MRT_ToolbarBottom: FC<Props> = ({ table }) => {
       muiTableToolbarBottomProps,
       positionPagination,
       positionToolbarAlertBanner,
+      positionToolbarDropZone,
       renderToolbarBottomCustomActions,
       tableId,
     },
@@ -56,6 +58,9 @@ export const MRT_ToolbarBottom: FC<Props> = ({ table }) => {
       {positionToolbarAlertBanner === 'bottom' && (
         <MRT_ToolbarAlertBanner table={table} />
       )}
+      {['both', 'bottom'].includes(positionToolbarDropZone ?? '') && (
+        <MRT_ToolbarDropZone table={table} />
+      )}
       <Box
         sx={{
           display: 'flex',

package/src/toolbar/MRT_ToolbarDropZone.tsx

@@ -0,0 +1,54 @@
+import React, { DragEvent, FC } from 'react';
+import { alpha, Box, Fade, Typography } from '@mui/material';
+import { MRT_TableInstance } from '..';
+
+interface Props {
+  table: MRT_TableInstance;
+}
+
+export const MRT_ToolbarDropZone: FC<Props> = ({ table }) => {
+  const {
+    getState,
+    options: { enableGrouping, localization },
+    setCurrentHoveredColumn,
+  } = table;
+
+  const { currentDraggingColumn, currentHoveredColumn } = getState();
+
+  const handleDragEnter = (_event: DragEvent<HTMLDivElement>) => {
+    setCurrentHoveredColumn({ id: 'drop-zone' });
+  };
+
+  return (
+    <Fade
+      unmountOnExit
+      mountOnEnter
+      in={!!enableGrouping && !!currentDraggingColumn}
+    >
+      <Box
+        sx={(theme) => ({
+          alignItems: 'center',
+          backgroundColor: alpha(
+            theme.palette.info.main,
+            currentHoveredColumn?.id === 'drop-zone' ? 0.2 : 0.1,
+          ),
+          border: `dashed ${theme.palette.info.main} 2px`,
+          display: 'flex',
+          justifyContent: 'center',
+          height: 'calc(100% - 4px)',
+          position: 'absolute',
+          width: 'calc(100% - 4px)',
+          zIndex: 2,
+        })}
+        onDragEnter={handleDragEnter}
+      >
+        <Typography>
+          {localization.dropToGroupBy.replace(
+            '{column}',
+            currentDraggingColumn?.columnDef?.header ?? '',
+          )}
+        </Typography>
+      </Box>
+    </Fade>
+  );
+};

package/src/toolbar/MRT_ToolbarTop.tsx

@@ -6,6 +6,7 @@ import { MRT_TableInstance } from '..';
 import { MRT_TablePagination } from './MRT_TablePagination';
 import { MRT_ToolbarAlertBanner } from './MRT_ToolbarAlertBanner';
 import { MRT_ToolbarInternalButtons } from './MRT_ToolbarInternalButtons';
+import { MRT_ToolbarDropZone } from './MRT_ToolbarDropZone';
 
 export const commonToolbarStyles = ({ theme }: { theme: Theme }) => ({
   alignItems: 'flex-start',
@@ -34,6 +35,7 @@ export const MRT_ToolbarTop: FC<Props> = ({ table }) => {
       positionGlobalFilter,
       positionPagination,
       positionToolbarAlertBanner,
+      positionToolbarDropZone,
       renderToolbarTopCustomActions,
       tableId,
     },
@@ -73,6 +75,9 @@ export const MRT_ToolbarTop: FC<Props> = ({ table }) => {
           table={table}
         />
       )}
+      {['both', 'top'].includes(positionToolbarDropZone ?? '') && (
+        <MRT_ToolbarDropZone table={table} />
+      )}
       <Box
         sx={{
           alignItems: 'flex-start',