material-react-table 1.5.0 → 1.5.2

package/dist/cjs/types/MaterialReactTable.d.ts

@@ -176,6 +176,7 @@ export type MRT_TableInstance<TData extends Record<string, any> = {}> = Omit<Tab
     setShowAlertBanner: Dispatch<SetStateAction<boolean>>;
     setShowFilters: Dispatch<SetStateAction<boolean>>;
     setShowGlobalFilter: Dispatch<SetStateAction<boolean>>;
+    setShowToolbarDropZone: Dispatch<SetStateAction<boolean>>;
 };
 export type MRT_TableState<TData extends Record<string, any> = {}> = TableState & {
     columnFilterFns: Record<string, MRT_FilterOption>;
@@ -198,6 +199,7 @@ export type MRT_TableState<TData extends Record<string, any> = {}> = TableState
     showGlobalFilter: boolean;
     showProgressBars: boolean;
     showSkeletons: boolean;
+    showToolbarDropZone: boolean;
 };
 export type MRT_ColumnDef<TData extends Record<string, any> = {}> = Omit<ColumnDef<TData, unknown>, 'accessorKey' | 'aggregatedCell' | 'aggregationFn' | 'cell' | 'columns' | 'filterFn' | 'footer' | 'header' | 'id' | 'sortingFn'> & {
     AggregatedCell?: ({ cell, column, row, table, }: {
@@ -636,6 +638,7 @@ export type MaterialReactTableProps<TData extends Record<string, any> = {}> = Om
     onShowAlertBannerChange?: OnChangeFn<boolean>;
     onShowFiltersChange?: OnChangeFn<boolean>;
     onShowGlobalFilterChange?: OnChangeFn<boolean>;
+    onShowToolbarDropZoneChange?: OnChangeFn<boolean>;
     positionActionsColumn?: 'first' | 'last';
     positionExpandColumn?: 'first' | 'last';
     positionGlobalFilter?: 'left' | 'right' | 'none';

package/dist/cjs/types/_locales/zh-Hans.d.ts

@@ -0,0 +1,2 @@
+import type { MRT_Localization } from '../MaterialReactTable';
+export declare const MRT_Localization_ZH_HANS: MRT_Localization;

package/dist/cjs/types/_locales/zh-Hant.d.ts

@@ -0,0 +1,2 @@
+import type { MRT_Localization } from '../MaterialReactTable';
+export declare const MRT_Localization_ZH_HANT: MRT_Localization;

package/dist/cjs/types/buttons/MRT_ToggleRowActionMenuButton.d.ts

@@ -1,9 +1,9 @@
-import { FC } from 'react';
+/// <reference types="react" />
 import type { MRT_Cell, MRT_Row, MRT_TableInstance } from '..';
-interface Props {
-    cell: MRT_Cell;
-    row: MRT_Row;
-    table: MRT_TableInstance;
+interface Props<TData extends Record<string, any> = {}> {
+    cell: MRT_Cell<TData>;
+    row: MRT_Row<TData>;
+    table: MRT_TableInstance<TData>;
 }
-export declare const MRT_ToggleRowActionMenuButton: FC<Props>;
+export declare const MRT_ToggleRowActionMenuButton: <TData extends Record<string, any> = {}>({ cell, row, table, }: Props<TData>) => JSX.Element;
 export {};

package/dist/cjs/types/index.d.ts

@@ -15,4 +15,5 @@ import { MRT_ToggleGlobalFilterButton } from './buttons/MRT_ToggleGlobalFilterBu
 import { MRT_ToolbarAlertBanner } from './toolbar/MRT_ToolbarAlertBanner';
 import { MRT_ToolbarDropZone } from './toolbar/MRT_ToolbarDropZone';
 import { MRT_ToolbarInternalButtons } from './toolbar/MRT_ToolbarInternalButtons';
-export { MRT_CopyButton, MRT_FilterOptionMenu, MRT_FullScreenToggleButton, MRT_GlobalFilterTextField, MRT_ShowHideColumnsButton, MRT_TablePagination, MRT_ToggleDensePaddingButton, MRT_ToggleFiltersButton, MRT_ToggleGlobalFilterButton, MRT_ToolbarAlertBanner, MRT_ToolbarDropZone, MRT_ToolbarInternalButtons, };
+import { MRT_ToggleRowActionMenuButton } from './buttons/MRT_ToggleRowActionMenuButton';
+export { MRT_CopyButton, MRT_FilterOptionMenu, MRT_FullScreenToggleButton, MRT_GlobalFilterTextField, MRT_ShowHideColumnsButton, MRT_TablePagination, MRT_ToggleDensePaddingButton, MRT_ToggleFiltersButton, MRT_ToggleGlobalFilterButton, MRT_ToolbarAlertBanner, MRT_ToolbarDropZone, MRT_ToolbarInternalButtons, MRT_ToggleRowActionMenuButton, };

package/dist/cjs/types/table/MRT_TableRoot.d.ts

@@ -199,6 +199,7 @@ export declare const MRT_TableRoot: <TData extends Record<string, any> = {}>(pro
     onShowAlertBannerChange?: import("@tanstack/react-table").OnChangeFn<boolean> | undefined;
     onShowFiltersChange?: import("@tanstack/react-table").OnChangeFn<boolean> | undefined;
     onShowGlobalFilterChange?: import("@tanstack/react-table").OnChangeFn<boolean> | undefined;
+    onShowToolbarDropZoneChange?: import("@tanstack/react-table").OnChangeFn<boolean> | undefined;
     positionActionsColumn?: "first" | "last" | undefined;
     positionExpandColumn?: "first" | "last" | undefined;
     positionGlobalFilter?: "left" | "right" | "none" | undefined;

package/dist/esm/material-react-table.esm.js

@@ -1242,7 +1242,7 @@ const MRT_ShowHideColumnsButton = (_a) => {
         React.createElement(Tooltip, { arrow: true, title: (_b = rest === null || rest === void 0 ? void 0 : rest.title) !== null && _b !== void 0 ? _b : localization.showHideColumns },
             React.createElement(IconButton, Object.assign({ "aria-label": localization.showHideColumns, onClick: handleClick }, rest, { title: undefined }),
                 React.createElement(ViewColumnIcon, null))),
-        React.createElement(MRT_ShowHideColumnsMenu, { anchorEl: anchorEl, setAnchorEl: setAnchorEl, table: table })));
+        anchorEl && (React.createElement(MRT_ShowHideColumnsMenu, { anchorEl: anchorEl, setAnchorEl: setAnchorEl, table: table }))));
 };
 
 const MRT_ToggleDensePaddingButton = (_a) => {
@@ -1308,15 +1308,21 @@ const MRT_ToolbarInternalButtons = ({ table, }) => {
 
 const MRT_ToolbarDropZone = ({ table, }) => {
     var _a, _b;
-    const { getState, options: { enableGrouping, localization }, setHoveredColumn, } = table;
-    const { draggingColumn, hoveredColumn, grouping } = getState();
+    const { getState, options: { enableGrouping, localization }, setHoveredColumn, setShowToolbarDropZone, } = table;
+    const { draggingColumn, hoveredColumn, grouping, showToolbarDropZone } = getState();
     const handleDragEnter = (_event) => {
         setHoveredColumn({ id: 'drop-zone' });
     };
-    return (React.createElement(Fade, { unmountOnExit: true, mountOnEnter: true, in: !!enableGrouping &&
-            !!draggingColumn &&
-            !grouping.includes(draggingColumn.id) },
-        React.createElement(Box, { sx: (theme) => ({
+    useEffect(() => {
+        var _a;
+        if (((_a = table.options.state) === null || _a === void 0 ? void 0 : _a.showToolbarDropZone) !== undefined) {
+            setShowToolbarDropZone(!!enableGrouping &&
+                !!draggingColumn &&
+                !grouping.includes(draggingColumn.id));
+        }
+    }, [enableGrouping, draggingColumn, grouping]);
+    return (React.createElement(Fade, { in: showToolbarDropZone },
+        React.createElement(Box, { className: "Mui-ToolbarDropZone", sx: (theme) => ({
                 alignItems: 'center',
                 backgroundColor: alpha(theme.palette.info.main, (hoveredColumn === null || hoveredColumn === void 0 ? void 0 : hoveredColumn.id) === 'drop-zone' ? 0.2 : 0.1),
                 border: `dashed ${theme.palette.info.main} 2px`,
@@ -2385,9 +2391,7 @@ const MRT_TableBody = ({ columnVirtualizer, table, virtualColumns, virtualPaddin
             }
             return rankedRows;
         }
-        return enablePagination
-            ? getRowModel().rows
-            : getPrePaginationRowModel().rows;
+        return getRowModel().rows;
     }, [
         enableGlobalFilterRankedResults,
         (enableGlobalFilterRankedResults && globalFilter) || !enablePagination
@@ -2519,7 +2523,7 @@ const MRT_TableFooter = ({ table, virtualColumns, virtualPaddingLeft, virtualPad
                 ? theme.palette.mode === 'light'
                     ? `1px solid ${theme.palette.grey[300]}`
                     : `1px solid ${theme.palette.grey[700]}`
-                : undefined, position: stickFooter ? 'sticky' : undefined }, ((tableFooterProps === null || tableFooterProps === void 0 ? void 0 : tableFooterProps.sx) instanceof Function
+                : undefined, position: stickFooter ? 'sticky' : undefined, zIndex: stickFooter ? 1 : undefined }, ((tableFooterProps === null || tableFooterProps === void 0 ? void 0 : tableFooterProps.sx) instanceof Function
             ? tableFooterProps === null || tableFooterProps === void 0 ? void 0 : tableFooterProps.sx(theme)
             : tableFooterProps === null || tableFooterProps === void 0 ? void 0 : tableFooterProps.sx))) }), getFooterGroups().map((footerGroup) => (React.createElement(MRT_TableFooterRow, { footerGroup: footerGroup, key: footerGroup.id, table: table, virtualColumns: virtualColumns, virtualPaddingLeft: virtualPaddingLeft, virtualPaddingRight: virtualPaddingRight })))));
 };
@@ -2680,7 +2684,7 @@ const MRT_EditRowModal = ({ open, row, table, }) => {
 };
 
 const MRT_TableRoot = (props) => {
-    var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r, _s, _t, _u, _v, _w, _x, _y, _z, _0, _1, _2, _3, _4, _5, _6, _7, _8, _9;
+    var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r, _s, _t, _u, _v, _w, _x, _y, _z, _0, _1, _2, _3, _4, _5, _6, _7, _8, _9, _10, _11;
     const bottomToolbarRef = useRef(null);
     const editInputRefs = useRef({});
     const filterInputRefs = useRef({});
@@ -2719,6 +2723,7 @@ const MRT_TableRoot = (props) => {
     const [showAlertBanner, setShowAlertBanner] = useState((_o = (_m = props.initialState) === null || _m === void 0 ? void 0 : _m.showAlertBanner) !== null && _o !== void 0 ? _o : false);
     const [showColumnFilters, setShowFilters] = useState((_p = initialState === null || initialState === void 0 ? void 0 : initialState.showColumnFilters) !== null && _p !== void 0 ? _p : false);
     const [showGlobalFilter, setShowGlobalFilter] = useState((_q = initialState === null || initialState === void 0 ? void 0 : initialState.showGlobalFilter) !== null && _q !== void 0 ? _q : false);
+    const [showToolbarDropZone, setShowToolbarDropZone] = useState((_r = initialState === null || initialState === void 0 ? void 0 : initialState.showToolbarDropZone) !== null && _r !== void 0 ? _r : false);
     const displayColumns = useMemo(() => {
         var _a, _b, _c, _d, _e;
         return [
@@ -2769,7 +2774,7 @@ const MRT_TableRoot = (props) => {
         columnFilterFns,
         displayColumns,
         props.columns,
-        (_r = props.state) === null || _r === void 0 ? void 0 : _r.columnFilterFns,
+        (_s = props.state) === null || _s === void 0 ? void 0 : _s.columnFilterFns,
     ]);
     const data = useMemo(() => {
         var _a, _b, _c, _d, _e;
@@ -2783,11 +2788,11 @@ const MRT_TableRoot = (props) => {
                 [getColumnId(col)]: null,
             }))))
             : props.data;
-    }, [props.data, (_s = props.state) === null || _s === void 0 ? void 0 : _s.isLoading, (_t = props.state) === null || _t === void 0 ? void 0 : _t.showSkeletons]);
+    }, [props.data, (_t = props.state) === null || _t === void 0 ? void 0 : _t.isLoading, (_u = props.state) === null || _u === void 0 ? void 0 : _u.showSkeletons]);
     //@ts-ignore
     const table = Object.assign(Object.assign({}, useReactTable(Object.assign(Object.assign({ getCoreRowModel: getCoreRowModel(), getExpandedRowModel: getExpandedRowModel(), getFacetedRowModel: getFacetedRowModel(), getFilteredRowModel: getFilteredRowModel(), getGroupedRowModel: getGroupedRowModel(), getPaginationRowModel: getPaginationRowModel(), getSortedRowModel: getSortedRowModel(), onColumnOrderChange: setColumnOrder, onGroupingChange: setGrouping, getSubRows: (row) => row === null || row === void 0 ? void 0 : row.subRows }, props), { 
         //@ts-ignore
-        columns: columnDefs, data, globalFilterFn: (_v = (_u = props.filterFns) === null || _u === void 0 ? void 0 : _u[globalFilterFn]) !== null && _v !== void 0 ? _v : (_w = props.filterFns) === null || _w === void 0 ? void 0 : _w.fuzzy, initialState, state: Object.assign({ columnFilterFns,
+        columns: columnDefs, data, globalFilterFn: (_w = (_v = props.filterFns) === null || _v === void 0 ? void 0 : _v[globalFilterFn]) !== null && _w !== void 0 ? _w : (_x = props.filterFns) === null || _x === void 0 ? void 0 : _x.fuzzy, initialState, state: Object.assign({ columnFilterFns,
             columnOrder,
             density,
             draggingColumn,
@@ -2801,7 +2806,8 @@ const MRT_TableRoot = (props) => {
             isFullScreen,
             showAlertBanner,
             showColumnFilters,
-            showGlobalFilter }, props.state) }))), { refs: {
+            showGlobalFilter,
+            showToolbarDropZone }, props.state) }))), { refs: {
             bottomToolbarRef,
             editInputRefs,
             filterInputRefs,
@@ -2810,7 +2816,7 @@ const MRT_TableRoot = (props) => {
             tableHeadCellRefs,
             tablePaperRef,
             topToolbarRef,
-        }, setColumnFilterFns: (_x = props.onColumnFilterFnsChange) !== null && _x !== void 0 ? _x : setColumnFilterFns, setDensity: (_y = props.onDensityChange) !== null && _y !== void 0 ? _y : setDensity, setDraggingColumn: (_z = props.onDraggingColumnChange) !== null && _z !== void 0 ? _z : setDraggingColumn, setDraggingRow: (_0 = props.onDraggingRowChange) !== null && _0 !== void 0 ? _0 : setDraggingRow, setEditingCell: (_1 = props.onEditingCellChange) !== null && _1 !== void 0 ? _1 : setEditingCell, setEditingRow: (_2 = props.onEditingRowChange) !== null && _2 !== void 0 ? _2 : setEditingRow, setGlobalFilterFn: (_3 = props.onGlobalFilterFnChange) !== null && _3 !== void 0 ? _3 : setGlobalFilterFn, setHoveredColumn: (_4 = props.onHoveredColumnChange) !== null && _4 !== void 0 ? _4 : setHoveredColumn, setHoveredRow: (_5 = props.onHoveredRowChange) !== null && _5 !== void 0 ? _5 : setHoveredRow, setIsFullScreen: (_6 = props.onIsFullScreenChange) !== null && _6 !== void 0 ? _6 : setIsFullScreen, setShowAlertBanner: (_7 = props.onShowAlertBannerChange) !== null && _7 !== void 0 ? _7 : setShowAlertBanner, setShowFilters: (_8 = props.onShowFiltersChange) !== null && _8 !== void 0 ? _8 : setShowFilters, setShowGlobalFilter: (_9 = props.onShowGlobalFilterChange) !== null && _9 !== void 0 ? _9 : setShowGlobalFilter });
+        }, setColumnFilterFns: (_y = props.onColumnFilterFnsChange) !== null && _y !== void 0 ? _y : setColumnFilterFns, setDensity: (_z = props.onDensityChange) !== null && _z !== void 0 ? _z : setDensity, setDraggingColumn: (_0 = props.onDraggingColumnChange) !== null && _0 !== void 0 ? _0 : setDraggingColumn, setDraggingRow: (_1 = props.onDraggingRowChange) !== null && _1 !== void 0 ? _1 : setDraggingRow, setEditingCell: (_2 = props.onEditingCellChange) !== null && _2 !== void 0 ? _2 : setEditingCell, setEditingRow: (_3 = props.onEditingRowChange) !== null && _3 !== void 0 ? _3 : setEditingRow, setGlobalFilterFn: (_4 = props.onGlobalFilterFnChange) !== null && _4 !== void 0 ? _4 : setGlobalFilterFn, setHoveredColumn: (_5 = props.onHoveredColumnChange) !== null && _5 !== void 0 ? _5 : setHoveredColumn, setHoveredRow: (_6 = props.onHoveredRowChange) !== null && _6 !== void 0 ? _6 : setHoveredRow, setIsFullScreen: (_7 = props.onIsFullScreenChange) !== null && _7 !== void 0 ? _7 : setIsFullScreen, setShowAlertBanner: (_8 = props.onShowAlertBannerChange) !== null && _8 !== void 0 ? _8 : setShowAlertBanner, setShowFilters: (_9 = props.onShowFiltersChange) !== null && _9 !== void 0 ? _9 : setShowFilters, setShowGlobalFilter: (_10 = props.onShowGlobalFilterChange) !== null && _10 !== void 0 ? _10 : setShowGlobalFilter, setShowToolbarDropZone: (_11 = props.onShowToolbarDropZoneChange) !== null && _11 !== void 0 ? _11 : setShowToolbarDropZone });
     if (props.tableInstanceRef) {
         props.tableInstanceRef.current = table;
     }
@@ -2941,8 +2947,13 @@ const MaterialReactTable = (_a) => {
     const _defaultDisplayColumn = useMemo(() => (Object.assign(Object.assign({}, MRT_DefaultDisplayColumn), defaultDisplayColumn)), [defaultDisplayColumn]);
     if (rest.enableRowVirtualization || rest.enableColumnVirtualization) {
         layoutMode = 'grid';
+    }
+    if (rest.enableRowVirtualization) {
         enableStickyHeader = true;
     }
+    if (enablePagination === false && manualPagination === undefined) {
+        manualPagination = true;
+    }
     if (!((_b = rest.data) === null || _b === void 0 ? void 0 : _b.length)) {
         manualFiltering = true;
         manualGrouping = true;
@@ -2952,5 +2963,5 @@ const MaterialReactTable = (_a) => {
     return (React.createElement(MRT_TableRoot, Object.assign({ aggregationFns: _aggregationFns, autoResetExpanded: autoResetExpanded, columnResizeMode: columnResizeMode, defaultColumn: _defaultColumn, defaultDisplayColumn: _defaultDisplayColumn, editingMode: editingMode, enableBottomToolbar: enableBottomToolbar, enableColumnActions: enableColumnActions, enableColumnFilters: enableColumnFilters, enableColumnOrdering: enableColumnOrdering, enableColumnResizing: enableColumnResizing, enableDensityToggle: enableDensityToggle, enableExpandAll: enableExpandAll, enableFilters: enableFilters, enableFullScreenToggle: enableFullScreenToggle, enableGlobalFilter: enableGlobalFilter, enableGlobalFilterRankedResults: enableGlobalFilterRankedResults, enableGrouping: enableGrouping, enableHiding: enableHiding, enableMultiRowSelection: enableMultiRowSelection, enableMultiSort: enableMultiSort, enablePagination: enablePagination, enablePinning: enablePinning, enableRowSelection: enableRowSelection, enableSelectAll: enableSelectAll, enableSorting: enableSorting, enableStickyHeader: enableStickyHeader, enableTableFooter: enableTableFooter, enableTableHead: enableTableHead, enableToolbarInternalActions: enableToolbarInternalActions, enableTopToolbar: enableTopToolbar, filterFns: _filterFns, icons: _icons, layoutMode: layoutMode, localization: _localization, manualFiltering: manualFiltering, manualGrouping: manualGrouping, manualPagination: manualPagination, manualSorting: manualSorting, positionActionsColumn: positionActionsColumn, positionExpandColumn: positionExpandColumn, positionGlobalFilter: positionGlobalFilter, positionPagination: positionPagination, positionToolbarAlertBanner: positionToolbarAlertBanner, positionToolbarDropZone: positionToolbarDropZone, rowNumberMode: rowNumberMode, selectAllMode: selectAllMode, sortingFns: _sortingFns }, rest)));
 };
 
-export { MRT_CopyButton, MRT_FilterOptionMenu, MRT_FullScreenToggleButton, MRT_GlobalFilterTextField, MRT_ShowHideColumnsButton, MRT_TablePagination, MRT_ToggleDensePaddingButton, MRT_ToggleFiltersButton, MRT_ToggleGlobalFilterButton, MRT_ToolbarAlertBanner, MRT_ToolbarDropZone, MRT_ToolbarInternalButtons, MaterialReactTable as default };
+export { MRT_CopyButton, MRT_FilterOptionMenu, MRT_FullScreenToggleButton, MRT_GlobalFilterTextField, MRT_ShowHideColumnsButton, MRT_TablePagination, MRT_ToggleDensePaddingButton, MRT_ToggleFiltersButton, MRT_ToggleGlobalFilterButton, MRT_ToggleRowActionMenuButton, MRT_ToolbarAlertBanner, MRT_ToolbarDropZone, MRT_ToolbarInternalButtons, MaterialReactTable as default };
 //# sourceMappingURL=material-react-table.esm.js.map