material-react-table 0.30.1 → 0.31.1

package/dist/MaterialReactTable.d.ts

@@ -43,8 +43,12 @@ export declare type MRT_TableInstance<TData extends Record<string, any> = {}> =
         [key: string]: MRT_FilterOption;
     }>>;
     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>>;
@@ -58,8 +62,12 @@ export declare type MRT_TableState<TData extends Record<string, any> = {}> = Tab
     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;
@@ -221,9 +229,9 @@ export declare type MRT_Cell<TData extends Record<string, any> = {}> = Omit<Cell
     column: MRT_Column<TData>;
     row: MRT_Row<TData>;
 };
-export declare type MRT_SortingOption = keyof typeof MRT_SortingFns;
+export declare type MRT_SortingOption = LiteralUnion<string & keyof typeof MRT_SortingFns>;
 export declare type MRT_SortingFn<TData extends Record<string, any> = {}> = SortingFn<TData> | MRT_SortingOption;
-export declare type MRT_FilterOption = keyof typeof MRT_FilterFns;
+export declare type MRT_FilterOption = LiteralUnion<string & keyof typeof MRT_FilterFns>;
 export declare type MRT_FilterFn<TData extends Record<string, any> = {}> = FilterFn<TData> | MRT_FilterOption;
 export declare type MRT_DisplayColumnIds = 'mrt-row-drag' | 'mrt-row-actions' | 'mrt-row-expand' | 'mrt-row-select' | 'mrt-row-numbers';
 /**
@@ -393,7 +401,9 @@ export declare type MaterialReactTableProps<TData extends Record<string, any> =
     onColumnDrop?: ({ event, draggedColumn, targetColumn, }: {
         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>;
@@ -414,7 +424,9 @@ export declare type MaterialReactTableProps<TData extends Record<string, any> =
     onRowDrop?: ({ event, draggedRow, targetRow, }: {
         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>;
@@ -424,7 +436,8 @@ export declare 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, }: {
         row: MRT_Row<TData>;
         table: MRT_TableInstance<TData>;
@@ -469,5 +482,5 @@ export declare type MaterialReactTableProps<TData extends Record<string, any> =
     tableId?: string;
     virtualizerProps?: Partial<VirtualizerOptions<HTMLDivElement, HTMLTableRowElement>>;
 };
-declare const _default: <TData extends Record<string, any> = {}>({ autoResetExpanded, columnResizeMode, defaultColumn, editingMode, enableColumnActions, enableColumnFilterChangeMode, enableColumnFilters, enableColumnOrdering, enableColumnResizing, enableDensityToggle, enableExpandAll, enableFilters, enableFullScreenToggle, enableGlobalFilter, enableGlobalFilterChangeMode, enableGlobalFilterRankedResults, enableGrouping, enableHiding, enableMultiRowSelection, enableMultiSort, enablePagination, enablePinning, enableRowSelection, enableSelectAll, enableSorting, enableStickyHeader, enableTableFooter, enableTableHead, enableToolbarBottom, enableToolbarInternalActions, enableToolbarTop, icons, localization, positionActionsColumn, positionExpandColumn, positionGlobalFilter, positionPagination, positionToolbarAlertBanner, rowNumberMode, selectAllMode, ...rest }: MaterialReactTableProps<TData>) => JSX.Element;
+declare const _default: <TData extends Record<string, any> = {}>({ autoResetExpanded, columnResizeMode, defaultColumn, editingMode, enableColumnActions, enableColumnFilterChangeMode, enableColumnFilters, enableColumnOrdering, enableColumnResizing, enableDensityToggle, enableExpandAll, enableFilters, enableFullScreenToggle, enableGlobalFilter, enableGlobalFilterChangeMode, enableGlobalFilterRankedResults, enableGrouping, enableHiding, enableMultiRowSelection, enableMultiSort, enablePagination, enablePinning, enableRowSelection, enableSelectAll, enableSorting, enableStickyHeader, enableTableFooter, enableTableHead, enableToolbarBottom, enableToolbarInternalActions, enableToolbarTop, icons, localization, positionActionsColumn, positionExpandColumn, positionGlobalFilter, positionPagination, positionToolbarAlertBanner, positionToolbarDropZone, rowNumberMode, selectAllMode, ...rest }: MaterialReactTableProps<TData>) => JSX.Element;
 export default _default;

package/dist/column.utils.d.ts

@@ -2,7 +2,7 @@ import { ColumnOrderState } from '@tanstack/react-table';
 import { MaterialReactTableProps, MRT_Column, MRT_ColumnDef, MRT_DefinedColumnDef, MRT_DisplayColumnIds, MRT_FilterOption } from '.';
 export declare const getAllLeafColumnDefs: <TData extends Record<string, any> = {}>(columns: MRT_ColumnDef<TData>[]) => MRT_ColumnDef<TData>[];
 export declare const prepareColumns: <TData extends Record<string, any> = {}>(columnDefs: MRT_ColumnDef<TData>[], currentFilterFns: {
-    [key: string]: "between" | "betweenInclusive" | "contains" | "empty" | "endsWith" | "equals" | "fuzzy" | "greaterThan" | "greaterThanOrEqualTo" | "lessThan" | "lessThanOrEqualTo" | "notEmpty" | "notEquals" | "startsWith" | "includesString" | "includesStringSensitive" | "equalsString" | "arrIncludes" | "arrIncludesAll" | "arrIncludesSome" | "weakEquals" | "inNumberRange";
+    [key: string]: "between" | "betweenInclusive" | "contains" | "empty" | "endsWith" | "equals" | "fuzzy" | "greaterThan" | "greaterThanOrEqualTo" | "lessThan" | "lessThanOrEqualTo" | "notEmpty" | "notEquals" | "startsWith" | "includesString" | "includesStringSensitive" | "equalsString" | "arrIncludes" | "arrIncludesAll" | "arrIncludesSome" | "weakEquals" | "inNumberRange" | (string & Record<never, never>);
 }) => MRT_DefinedColumnDef<TData>[];
 export declare const reorderColumn: <TData extends Record<string, any> = {}>(draggedColumn: MRT_Column<TData>, targetColumn: MRT_Column<TData>, columnOrder: ColumnOrderState) => ColumnOrderState;
 export declare const getLeadingDisplayColumnIds: <TData extends Record<string, any> = {}>(props: MaterialReactTableProps<TData>) => MRT_DisplayColumnIds[];

package/dist/localization.d.ts

@@ -10,6 +10,7 @@ export interface MRT_Localization {
     clickToCopy: string;
     columnActions: string;
     copiedToClipboard: string;
+    dropToGroupBy: string;
     edit: string;
     expand: string;
     expandAll: string;

package/dist/material-react-table.cjs.development.js

@@ -56,6 +56,7 @@ var MRT_DefaultLocalization_EN = {
   clickToCopy: 'Click to copy',
   columnActions: 'Column Actions',
   copiedToClipboard: 'Copied to clipboard',
+  dropToGroupBy: 'Drop to group by {column}',
   edit: 'Edit',
   expand: 'Expand',
   expandAll: 'Expand all',
@@ -718,7 +719,8 @@ var prepareColumns = function prepareColumns(columnDefs, currentFilterFns) {
       if (Object.keys(MRT_FilterFns).includes(currentFilterFns[columnDef.id])) {
         var _MRT_FilterFns$curren;
 
-        columnDef.filterFn = (_MRT_FilterFns$curren = MRT_FilterFns[currentFilterFns[columnDef.id]]) != null ? _MRT_FilterFns$curren : MRT_FilterFns.fuzzy; //@ts-ignore
+        columnDef.filterFn = // @ts-ignore
+        (_MRT_FilterFns$curren = MRT_FilterFns[currentFilterFns[columnDef.id]]) != null ? _MRT_FilterFns$curren : MRT_FilterFns.fuzzy; //@ts-ignore
 
         columnDef._filterFn = currentFilterFns[columnDef.id];
       }
@@ -1554,7 +1556,11 @@ var MRT_GlobalFilterTextField = function MRT_GlobalFilterTextField(_ref) {
           height: '1.75rem',
           width: '1.75rem'
         }
-      }, React__default.createElement(SearchIcon, null)))) : React__default.createElement(SearchIcon, null),
+      }, React__default.createElement(SearchIcon, null)))) : React__default.createElement(SearchIcon, {
+        style: {
+          marginRight: '4px'
+        }
+      }),
       endAdornment: React__default.createElement(material.InputAdornment, {
         position: "end"
       }, React__default.createElement(material.Tooltip, {
@@ -1930,6 +1936,48 @@ var MRT_ToolbarInternalButtons = function MRT_ToolbarInternalButtons(_ref) {
   })));
 };
 
+var MRT_ToolbarDropZone = function MRT_ToolbarDropZone(_ref) {
+  var _currentDraggingColum, _currentDraggingColum2;
+
+  var table = _ref.table;
+  var getState = table.getState,
+      _table$options = table.options,
+      enableGrouping = _table$options.enableGrouping,
+      localization = _table$options.localization,
+      setCurrentHoveredColumn = table.setCurrentHoveredColumn;
+
+  var _getState = getState(),
+      currentDraggingColumn = _getState.currentDraggingColumn,
+      currentHoveredColumn = _getState.currentHoveredColumn;
+
+  var handleDragEnter = function handleDragEnter(_event) {
+    setCurrentHoveredColumn({
+      id: 'drop-zone'
+    });
+  };
+
+  return React__default.createElement(material.Fade, {
+    unmountOnExit: true,
+    mountOnEnter: true,
+    "in": !!enableGrouping && !!currentDraggingColumn
+  }, React__default.createElement(material.Box, {
+    sx: function sx(theme) {
+      return {
+        alignItems: 'center',
+        backgroundColor: material.alpha(theme.palette.info.main, (currentHoveredColumn == null ? void 0 : 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
+  }, React__default.createElement(material.Typography, null, localization.dropToGroupBy.replace('{column}', (_currentDraggingColum = currentDraggingColumn == null ? void 0 : (_currentDraggingColum2 = currentDraggingColumn.columnDef) == null ? void 0 : _currentDraggingColum2.header) != null ? _currentDraggingColum : ''))));
+};
+
 var commonToolbarStyles = function commonToolbarStyles(_ref) {
   var theme = _ref.theme;
   return {
@@ -1957,6 +2005,7 @@ var MRT_ToolbarTop = function MRT_ToolbarTop(_ref2) {
       positionGlobalFilter = _table$options.positionGlobalFilter,
       positionPagination = _table$options.positionPagination,
       positionToolbarAlertBanner = _table$options.positionToolbarAlertBanner,
+      positionToolbarDropZone = _table$options.positionToolbarDropZone,
       renderToolbarTopCustomActions = _table$options.renderToolbarTopCustomActions,
       tableId = _table$options.tableId;
 
@@ -1984,6 +2033,8 @@ var MRT_ToolbarTop = function MRT_ToolbarTop(_ref2) {
   }), positionToolbarAlertBanner === 'top' && React__default.createElement(MRT_ToolbarAlertBanner, {
     stackAlertBanner: stackAlertBanner,
     table: table
+  }), ['both', 'top'].includes(positionToolbarDropZone != null ? positionToolbarDropZone : '') && React__default.createElement(MRT_ToolbarDropZone, {
+    table: table
   }), React__default.createElement(material.Box, {
     sx: {
       alignItems: 'flex-start',
@@ -2021,6 +2072,7 @@ var MRT_ToolbarBottom = function MRT_ToolbarBottom(_ref) {
       muiTableToolbarBottomProps = _table$options.muiTableToolbarBottomProps,
       positionPagination = _table$options.positionPagination,
       positionToolbarAlertBanner = _table$options.positionToolbarAlertBanner,
+      positionToolbarDropZone = _table$options.positionToolbarDropZone,
       renderToolbarBottomCustomActions = _table$options.renderToolbarBottomCustomActions,
       tableId = _table$options.tableId;
 
@@ -2052,6 +2104,8 @@ var MRT_ToolbarBottom = function MRT_ToolbarBottom(_ref) {
     table: table
   }), positionToolbarAlertBanner === 'bottom' && React__default.createElement(MRT_ToolbarAlertBanner, {
     table: table
+  }), ['both', 'bottom'].includes(positionToolbarDropZone != null ? positionToolbarDropZone : '') && React__default.createElement(MRT_ToolbarDropZone, {
+    table: table
   }), React__default.createElement(material.Box, {
     sx: {
       display: 'flex',
@@ -2305,7 +2359,11 @@ var MRT_FilterTextField = function MRT_FilterTextField(_ref) {
       }, React__default.createElement(FilterListIcon, null)))), filterChipLabel && React__default.createElement(material.Chip, {
         onDelete: handleClearEmptyFilterChip,
         label: filterChipLabel
-      })) : React__default.createElement(FilterListIcon, null),
+      })) : React__default.createElement(FilterListIcon, {
+        style: {
+          marginRight: '4px'
+        }
+      }),
       endAdornment: !filterChipLabel && React__default.createElement(material.InputAdornment, {
         position: "end"
       }, React__default.createElement(material.Tooltip, {
@@ -2350,7 +2408,7 @@ var MRT_FilterTextField = function MRT_FilterTextField(_ref) {
       return _extends({
         p: 0,
         minWidth: !filterChipLabel ? '6rem' : 'auto',
-        width: 'calc(100% + 0.5rem)',
+        width: '100%',
         '&	.MuiSelect-icon': {
           mr: '1.5rem'
         }
@@ -2524,7 +2582,9 @@ var MRT_TableHeadCellGrabHandle = function MRT_TableHeadCellGrabHandle(_ref) {
       targetColumn: currentHoveredColumn
     });
 
-    if (enableColumnOrdering && currentHoveredColumn && (currentHoveredColumn == null ? void 0 : currentHoveredColumn.id) !== (currentDraggingColumn == null ? void 0 : currentDraggingColumn.id)) {
+    if ((currentHoveredColumn == null ? void 0 : currentHoveredColumn.id) === 'drop-zone') {
+      column.toggleGrouping();
+    } else if (enableColumnOrdering && currentHoveredColumn && (currentHoveredColumn == null ? void 0 : currentHoveredColumn.id) !== (currentDraggingColumn == null ? void 0 : currentDraggingColumn.id)) {
       setColumnOrder(reorderColumn(column, currentHoveredColumn, columnOrder));
     }
 
@@ -2631,7 +2691,8 @@ var MRT_TableHeadCell = function MRT_TableHeadCell(_ref) {
   var _getState = getState(),
       density = _getState.density,
       currentDraggingColumn = _getState.currentDraggingColumn,
-      currentHoveredColumn = _getState.currentHoveredColumn;
+      currentHoveredColumn = _getState.currentHoveredColumn,
+      showColumnFilters = _getState.showColumnFilters;
 
   var column = header.column;
   var columnDef = column.columnDef;
@@ -2660,6 +2721,10 @@ var MRT_TableHeadCell = function MRT_TableHeadCell(_ref) {
   };
 
   var handleDragEnter = function handleDragEnter(_e) {
+    if (enableGrouping && (currentHoveredColumn == null ? void 0 : currentHoveredColumn.id) === 'drop-zone') {
+      setCurrentHoveredColumn(null);
+    }
+
     if (enableColumnOrdering && currentDraggingColumn) {
       setCurrentHoveredColumn(columnDef.enableColumnOrdering !== false ? column : null);
     }
@@ -2694,7 +2759,7 @@ var MRT_TableHeadCell = function MRT_TableHeadCell(_ref) {
         overflow: 'visible',
         opacity: (currentDraggingColumn == null ? void 0 : currentDraggingColumn.id) === column.id || (currentHoveredColumn == null ? void 0 : currentHoveredColumn.id) === column.id ? 0.5 : 1,
         p: density === 'compact' ? '0.5rem' : density === 'comfortable' ? columnDefType === 'display' ? '0.75rem' : '1rem' : 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' : undefined,
         pt: columnDefType === 'group' ? 0 : density === 'compact' ? '0.25' : density === 'comfortable' ? '.75rem' : '1.25rem',
         right: column.getIsPinned() === 'right' ? getTotalRight() + "px" : undefined,
@@ -2994,6 +3059,7 @@ var MRT_TableBodyCell = function MRT_TableBodyCell(_ref) {
       enableClickToCopy = _table$options.enableClickToCopy,
       enableColumnOrdering = _table$options.enableColumnOrdering,
       enableEditing = _table$options.enableEditing,
+      enableGrouping = _table$options.enableGrouping,
       enablePagination = _table$options.enablePagination,
       enableRowNumbers = _table$options.enableRowNumbers,
       muiTableBodyCellProps = _table$options.muiTableBodyCellProps,
@@ -3060,6 +3126,10 @@ var MRT_TableBodyCell = function MRT_TableBodyCell(_ref) {
   };
 
   var handleDragEnter = function handleDragEnter(_e) {
+    if (enableGrouping && (currentHoveredColumn == null ? void 0 : currentHoveredColumn.id) === 'drop-zone') {
+      setCurrentHoveredColumn(null);
+    }
+
     if (enableColumnOrdering && currentDraggingColumn) {
       setCurrentHoveredColumn(columnDef.enableColumnOrdering !== false ? column : null);
     }
@@ -3720,15 +3790,16 @@ var MRT_TableRoot = function MRT_TableRoot(props) {
     getGroupedRowModel: reactTable.getGroupedRowModel(),
     getPaginationRowModel: reactTable.getPaginationRowModel(),
     getSortedRowModel: reactTable.getSortedRowModel(),
-    onColumnOrderChange: setColumnOrder
+    onColumnOrderChange: setColumnOrder,
+    getSubRows: function getSubRows(row) {
+      return row == null ? void 0 : row.subRows;
+    }
   }, props, {
     //@ts-ignore
     columns: columnDefs,
     data: data,
-    getSubRows: function getSubRows(row) {
-      return row == null ? void 0 : row.subRows;
-    },
-    globalFilterFn: (_MRT_FilterFns$curren = MRT_FilterFns[currentGlobalFilterFn]) != null ? _MRT_FilterFns$curren : MRT_FilterFns.fuzzy,
+    globalFilterFn: //@ts-ignore
+    (_MRT_FilterFns$curren = MRT_FilterFns[currentGlobalFilterFn]) != null ? _MRT_FilterFns$curren : MRT_FilterFns.fuzzy,
     initialState: initialState,
     state: _extends({
       columnOrder: columnOrder,
@@ -3784,7 +3855,7 @@ var MRT_TableRoot = function MRT_TableRoot(props) {
   }));
 };
 
-var _excluded$5 = ["autoResetExpanded", "columnResizeMode", "defaultColumn", "editingMode", "enableColumnActions", "enableColumnFilterChangeMode", "enableColumnFilters", "enableColumnOrdering", "enableColumnResizing", "enableDensityToggle", "enableExpandAll", "enableFilters", "enableFullScreenToggle", "enableGlobalFilter", "enableGlobalFilterChangeMode", "enableGlobalFilterRankedResults", "enableGrouping", "enableHiding", "enableMultiRowSelection", "enableMultiSort", "enablePagination", "enablePinning", "enableRowSelection", "enableSelectAll", "enableSorting", "enableStickyHeader", "enableTableFooter", "enableTableHead", "enableToolbarBottom", "enableToolbarInternalActions", "enableToolbarTop", "icons", "localization", "positionActionsColumn", "positionExpandColumn", "positionGlobalFilter", "positionPagination", "positionToolbarAlertBanner", "rowNumberMode", "selectAllMode"];
+var _excluded$5 = ["autoResetExpanded", "columnResizeMode", "defaultColumn", "editingMode", "enableColumnActions", "enableColumnFilterChangeMode", "enableColumnFilters", "enableColumnOrdering", "enableColumnResizing", "enableDensityToggle", "enableExpandAll", "enableFilters", "enableFullScreenToggle", "enableGlobalFilter", "enableGlobalFilterChangeMode", "enableGlobalFilterRankedResults", "enableGrouping", "enableHiding", "enableMultiRowSelection", "enableMultiSort", "enablePagination", "enablePinning", "enableRowSelection", "enableSelectAll", "enableSorting", "enableStickyHeader", "enableTableFooter", "enableTableHead", "enableToolbarBottom", "enableToolbarInternalActions", "enableToolbarTop", "icons", "localization", "positionActionsColumn", "positionExpandColumn", "positionGlobalFilter", "positionPagination", "positionToolbarAlertBanner", "positionToolbarDropZone", "rowNumberMode", "selectAllMode"];
 var MaterialReactTable = (function (_ref) {
   var _ref$autoResetExpande = _ref.autoResetExpanded,
       autoResetExpanded = _ref$autoResetExpande === void 0 ? false : _ref$autoResetExpande,
@@ -3864,6 +3935,8 @@ var MaterialReactTable = (function (_ref) {
       positionPagination = _ref$positionPaginati === void 0 ? 'bottom' : _ref$positionPaginati,
       _ref$positionToolbarA = _ref.positionToolbarAlertBanner,
       positionToolbarAlertBanner = _ref$positionToolbarA === void 0 ? 'top' : _ref$positionToolbarA,
+      _ref$positionToolbarD = _ref.positionToolbarDropZone,
+      positionToolbarDropZone = _ref$positionToolbarD === void 0 ? 'top' : _ref$positionToolbarD,
       _ref$rowNumberMode = _ref.rowNumberMode,
       rowNumberMode = _ref$rowNumberMode === void 0 ? 'original' : _ref$rowNumberMode,
       _ref$selectAllMode = _ref.selectAllMode,
@@ -3909,6 +3982,7 @@ var MaterialReactTable = (function (_ref) {
     positionGlobalFilter: positionGlobalFilter,
     positionPagination: positionPagination,
     positionToolbarAlertBanner: positionToolbarAlertBanner,
+    positionToolbarDropZone: positionToolbarDropZone,
     rowNumberMode: rowNumberMode,
     selectAllMode: selectAllMode
   }, rest));