material-react-table 0.30.1 → 0.31.1

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.1",
+  "version": "0.31.1",
   "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": {
@@ -82,9 +82,6 @@
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
     "react-is": "^18.2.0",
-    "rollup-plugin-commonjs": "^10.1.0",
-    "rollup-plugin-node-resolve": "^5.2.0",
-    "rollup-plugin-peer-deps-external": "^2.2.4",
     "size-limit": "^7.0.8",
     "storybook-dark-mode": "^1.1.0",
     "tsdx": "^0.14.1",
@@ -100,7 +97,7 @@
   },
   "dependencies": {
     "@tanstack/match-sorter-utils": "8.1.1",
-    "@tanstack/react-table": "8.4.0",
+    "@tanstack/react-table": "8.5.2",
     "@tanstack/react-virtual": "^3.0.0-beta.13"
   }
 }

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;
@@ -390,13 +394,17 @@ export type MRT_Cell<TData extends Record<string, any> = {}> = Omit<
   row: MRT_Row<TData>;
 };
 
-export type MRT_SortingOption = keyof typeof MRT_SortingFns;
+export type MRT_SortingOption = LiteralUnion<
+  string & keyof typeof MRT_SortingFns
+>;
 
 export type MRT_SortingFn<TData extends Record<string, any> = {}> =
   | SortingFn<TData>
   | MRT_SortingOption;
 
-export type MRT_FilterOption = keyof typeof MRT_FilterFns;
+export type MRT_FilterOption = LiteralUnion<
+  string & keyof typeof MRT_FilterFns
+>;
 
 export type MRT_FilterFn<TData extends Record<string, any> = {}> =
   | FilterFn<TData>
@@ -685,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>;
@@ -711,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>;
@@ -721,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,
@@ -829,6 +838,7 @@ export default <TData extends Record<string, any> = {}>({
   positionGlobalFilter = 'right',
   positionPagination = 'bottom',
   positionToolbarAlertBanner = 'top',
+  positionToolbarDropZone = 'top',
   rowNumberMode = 'original',
   selectAllMode = 'all',
   ...rest
@@ -872,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/column.utils.ts

@@ -51,6 +51,7 @@ export const prepareColumns = <TData extends Record<string, any> = {}>(
     } else if (columnDef.columnDefType === 'data') {
       if (Object.keys(MRT_FilterFns).includes(currentFilterFns[columnDef.id])) {
         columnDef.filterFn =
+          // @ts-ignore
           MRT_FilterFns[currentFilterFns[columnDef.id]] ?? MRT_FilterFns.fuzzy;
         //@ts-ignore
         columnDef._filterFn = currentFilterFns[columnDef.id];

package/src/head/MRT_TableHeadCell.tsx

@@ -28,7 +28,12 @@ export const MRT_TableHeadCell: FC<Props> = ({ header, table }) => {
     },
     setCurrentHoveredColumn,
   } = table;
-  const { density, currentDraggingColumn, currentHoveredColumn } = getState();
+  const {
+    density,
+    currentDraggingColumn,
+    currentHoveredColumn,
+    showColumnFilters,
+  } = getState();
   const { column } = header;
   const { columnDef } = column;
   const { columnDefType } = columnDef;
@@ -66,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,
@@ -136,7 +144,12 @@ export const MRT_TableHeadCell: FC<Props> = ({ header, table }) => {
             : columnDefType === 'display'
             ? '1rem 1.25rem'
             : '1.5rem',
-        pb: columnDefType === 'display' ? 0 : undefined,
+        pb:
+          columnDefType === 'display'
+            ? 0
+            : showColumnFilters || density === 'compact'
+            ? '0.4rem'
+            : '0.6rem',
         position:
           column.getIsPinned() && columnDefType !== 'group'
             ? 'sticky'

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/inputs/MRT_FilterTextField.tsx

@@ -250,7 +250,7 @@ export const MRT_FilterTextField: FC<Props> = ({
               )}
             </InputAdornment>
           ) : (
-            <FilterListIcon />
+            <FilterListIcon style={{ marginRight: '4px' }} />
           ),
           endAdornment: !filterChipLabel && (
             <InputAdornment position="end">
@@ -297,7 +297,7 @@ export const MRT_FilterTextField: FC<Props> = ({
         sx={(theme) => ({
           p: 0,
           minWidth: !filterChipLabel ? '6rem' : 'auto',
-          width: 'calc(100% + 0.5rem)',
+          width: '100%',
           '&	.MuiSelect-icon': {
             mr: '1.5rem',
           },
@@ -311,30 +311,32 @@ export const MRT_FilterTextField: FC<Props> = ({
             <Box sx={{ opacity: 0.5 }}>{filterPlaceholder}</Box>
           </MenuItem>
         )}
-        {columnDef?.filterSelectOptions?.map((option) => {
-          let value: string;
-          let text: string;
-          if (typeof option !== 'object') {
-            value = option;
-            text = option;
-          } else {
-            value = option.value;
-            text = option.text;
-          }
-          return (
-            <MenuItem key={value} value={value}>
-              {isMultiSelectFilter && (
-                <Checkbox
-                  checked={(
-                    (column.getFilterValue() ?? []) as string[]
-                  ).includes(value)}
-                  sx={{ mr: '0.5rem' }}
-                />
-              )}
-              <ListItemText>{text}</ListItemText>
-            </MenuItem>
-          );
-        })}
+        {columnDef?.filterSelectOptions?.map(
+          (option: string | { text: string; value: string }) => {
+            let value: string;
+            let text: string;
+            if (typeof option !== 'object') {
+              value = option;
+              text = option;
+            } else {
+              value = option.value;
+              text = option.text;
+            }
+            return (
+              <MenuItem key={value} value={value}>
+                {isMultiSelectFilter && (
+                  <Checkbox
+                    checked={(
+                      (column.getFilterValue() ?? []) as string[]
+                    ).includes(value)}
+                    sx={{ mr: '0.5rem' }}
+                  />
+                )}
+                <ListItemText>{text}</ListItemText>
+              </MenuItem>
+            );
+          },
+        )}
       </TextField>
       <MRT_FilterOptionMenu
         anchorEl={anchorEl}

package/src/inputs/MRT_GlobalFilterTextField.tsx

@@ -86,7 +86,7 @@ export const MRT_GlobalFilterTextField: FC<Props> = ({ table }) => {
               </Tooltip>
             </InputAdornment>
           ) : (
-            <SearchIcon />
+            <SearchIcon style={{ marginRight: '4px' }} />
           ),
           endAdornment: (
             <InputAdornment position="end">

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,12 +248,14 @@ 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,
       initialState,
       state: {

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',