material-react-table 1.0.0-beta.4 → 1.0.0-beta.7

package/dist/cjs/MaterialReactTable.d.ts

@@ -1,4 +1,4 @@
-import { Dispatch, DragEvent, MutableRefObject, ReactNode, SetStateAction } from 'react';
+import { Dispatch, MutableRefObject, ReactNode, SetStateAction } from 'react';
 import type { AlertProps, ButtonProps, CheckboxProps, ChipProps, IconButtonProps, LinearProgressProps, PaperProps, SkeletonProps, TableBodyProps, TableCellProps, TableContainerProps, TableFooterProps, TableHeadProps, TablePaginationProps, TableProps, TableRowProps, TextFieldProps, ToolbarProps } from '@mui/material';
 import type { Cell, Column, ColumnDef, DeepKeys, FilterFn, Header, HeaderGroup, OnChangeFn, Row, SortingFn, Table, TableOptions, TableState } from '@tanstack/react-table';
 import type { Options as VirtualizerOptions, VirtualItem } from 'react-virtual';
@@ -40,6 +40,7 @@ export declare type MRT_TableInstance<TData extends Record<string, any> = {}> =
         filterInputRefs: MutableRefObject<Record<string, HTMLInputElement>>;
         searchInputRef: MutableRefObject<HTMLInputElement>;
         tableContainerRef: MutableRefObject<HTMLDivElement>;
+        tablePaperRef: MutableRefObject<HTMLDivElement>;
         topToolbarRef: MutableRefObject<HTMLDivElement>;
     };
     setColumnFilterFns: Dispatch<SetStateAction<{
@@ -439,13 +440,6 @@ export declare type MaterialReactTableProps<TData extends Record<string, any> =
     muiTopToolbarProps?: ToolbarProps | (({ table }: {
         table: MRT_TableInstance<TData>;
     }) => ToolbarProps);
-    onColumnDrop?: ({ event, draggedColumn, targetColumn, }: {
-        event: DragEvent<HTMLButtonElement>;
-        draggedColumn: MRT_Column<TData>;
-        targetColumn: MRT_Column<TData> | {
-            id: string;
-        } | null;
-    }) => void;
     onDensityChange?: OnChangeFn<boolean>;
     onDraggingColumnChange?: OnChangeFn<MRT_Column<TData> | null>;
     onDraggingRowChange?: OnChangeFn<MRT_Row<TData> | null>;
@@ -464,13 +458,6 @@ export declare type MaterialReactTableProps<TData extends Record<string, any> =
     onHoveredColumnChange?: OnChangeFn<MRT_Column<TData> | null>;
     onHoveredRowChange?: OnChangeFn<MRT_Row<TData> | null>;
     onIsFullScreenChange?: OnChangeFn<boolean>;
-    onRowDrop?: ({ event, draggedRow, targetRow, }: {
-        event: DragEvent<HTMLButtonElement>;
-        draggedRow: MRT_Row<TData>;
-        targetRow: MRT_Row<TData> | {
-            id: string;
-        } | null;
-    }) => void;
     onShowAlertBannerChange?: OnChangeFn<boolean>;
     onShowFiltersChange?: OnChangeFn<boolean>;
     onShowGlobalFilterChange?: OnChangeFn<boolean>;

package/dist/cjs/index.js

@@ -208,6 +208,8 @@ const MRT_DefaultLocalization_EN = {
     max: 'Max',
     min: 'Min',
     move: 'Move',
+    noRecordsToDisplay: 'No records to display',
+    noResultsFound: 'No results found',
     or: 'or',
     pinToLeft: 'Pin to left',
     pinToRight: 'Pin to right',
@@ -477,11 +479,11 @@ const MRT_GrabHandleButton = ({ iconButtonProps, onDragEnd, onDragStart, table,
     var _a;
     const { options: { icons: { DragHandleIcon }, localization, }, } = table;
     return (React__default["default"].createElement(material.Tooltip, { arrow: true, enterDelay: 1000, enterNextDelay: 1000, placement: "top", title: (_a = iconButtonProps === null || iconButtonProps === void 0 ? void 0 : iconButtonProps.title) !== null && _a !== void 0 ? _a : localization.move },
-        React__default["default"].createElement(material.IconButton, Object.assign({ disableRipple: true, draggable: "true", onDragStart: onDragStart, onDragEnd: onDragEnd, size: "small" }, iconButtonProps, { onClick: (e) => {
+        React__default["default"].createElement(material.IconButton, Object.assign({ disableRipple: true, draggable: "true", size: "small" }, iconButtonProps, { onClick: (e) => {
                 var _a;
                 e.stopPropagation();
                 (_a = iconButtonProps === null || iconButtonProps === void 0 ? void 0 : iconButtonProps.onClick) === null || _a === void 0 ? void 0 : _a.call(iconButtonProps, e);
-            }, sx: (theme) => (Object.assign({ cursor: 'grab', m: 0, opacity: 0.5, p: '2px', transition: 'all 0.2s ease-in-out', '&:hover': {
+            }, onDragStart: onDragStart, onDragEnd: onDragEnd, sx: (theme) => (Object.assign({ cursor: 'grab', m: 0, opacity: 0.5, p: '2px', transition: 'all 0.2s ease-in-out', '&:hover': {
                     backgroundColor: 'transparent',
                     opacity: 1,
                 }, '&:active': {
@@ -1310,7 +1312,11 @@ const MRT_TopToolbar = ({ table }) => {
                 width: '100%',
             } },
             enableGlobalFilter && positionGlobalFilter === 'left' && (React__default["default"].createElement(MRT_GlobalFilterTextField, { table: table })), (_a = renderTopToolbarCustomActions === null || renderTopToolbarCustomActions === void 0 ? void 0 : renderTopToolbarCustomActions({ table })) !== null && _a !== void 0 ? _a : React__default["default"].createElement("span", null),
-            enableToolbarInternalActions ? (React__default["default"].createElement(material.Box, { sx: { display: 'flex', flexWrap: 'wrap' } },
+            enableToolbarInternalActions ? (React__default["default"].createElement(material.Box, { sx: {
+                    display: 'flex',
+                    flexWrap: 'wrap-reverse',
+                    justifyContent: 'flex-end',
+                } },
                 enableGlobalFilter && positionGlobalFilter === 'right' && (React__default["default"].createElement(MRT_GlobalFilterTextField, { table: table })),
                 React__default["default"].createElement(MRT_ToolbarInternalButtons, { table: table }))) : (enableGlobalFilter &&
                 positionGlobalFilter === 'right' && (React__default["default"].createElement(MRT_GlobalFilterTextField, { table: table })))),
@@ -1602,11 +1608,8 @@ const MRT_TableHeadCellFilterLabel = ({ header, table }) => {
     const { options: { icons: { FilterAltIcon }, localization, }, } = table;
     const { column } = header;
     const { columnDef } = column;
-    const isRangeFilter = [
-        'between',
-        'betweenInclusive',
-        'inNumberRange',
-    ].includes(columnDef._filterFn);
+    const isRangeFilter = columnDef.filterVariant === 'range' ||
+        ['between', 'betweenInclusive', 'inNumberRange'].includes(columnDef._filterFn);
     const currentFilterOption = columnDef._filterFn;
     const filterTooltip = localization.filteringByColumn
         .replace('{column}', String(columnDef.header))
@@ -1618,8 +1621,8 @@ const MRT_TableHeadCellFilterLabel = ({ header, table }) => {
         ? column.getFilterValue().join(`" ${isRangeFilter ? localization.and : localization.or} "`)
         : column.getFilterValue()}"`)
         .replace('" "', '');
-    return (React__default["default"].createElement(material.Grow, { unmountOnExit: true, in: (!!column.getFilterValue() && isRangeFilter) ||
-            (!isRangeFilter && // @ts-ignore
+    return (React__default["default"].createElement(material.Grow, { unmountOnExit: true, in: (!!column.getFilterValue() && !isRangeFilter) ||
+            (isRangeFilter && // @ts-ignore
                 (!!((_b = column.getFilterValue()) === null || _b === void 0 ? void 0 : _b[0]) || !!((_c = column.getFilterValue()) === null || _c === void 0 ? void 0 : _c[1]))) },
         React__default["default"].createElement("span", null,
             React__default["default"].createElement(material.Tooltip, { arrow: true, placement: "top", title: filterTooltip },
@@ -1636,7 +1639,7 @@ const MRT_TableHeadCellFilterLabel = ({ header, table }) => {
 };
 
 const MRT_TableHeadCellGrabHandle = ({ column, table, tableHeadCellRef, }) => {
-    const { getState, options: { enableColumnOrdering, muiTableHeadCellDragHandleProps, onColumnDrop, }, setColumnOrder, setDraggingColumn, setHoveredColumn, } = table;
+    const { getState, options: { enableColumnOrdering, muiTableHeadCellDragHandleProps }, setColumnOrder, setDraggingColumn, setHoveredColumn, } = table;
     const { columnDef } = column;
     const { hoveredColumn, draggingColumn, columnOrder } = getState();
     const mIconButtonProps = muiTableHeadCellDragHandleProps instanceof Function
@@ -1646,16 +1649,15 @@ const MRT_TableHeadCellGrabHandle = ({ column, table, tableHeadCellRef, }) => {
         ? columnDef.muiTableHeadCellDragHandleProps({ column, table })
         : columnDef.muiTableHeadCellDragHandleProps;
     const iconButtonProps = Object.assign(Object.assign({}, mIconButtonProps), mcIconButtonProps);
-    const handleDragStart = (e) => {
+    const handleDragStart = (event) => {
+        var _a;
+        (_a = iconButtonProps === null || iconButtonProps === void 0 ? void 0 : iconButtonProps.onDragStart) === null || _a === void 0 ? void 0 : _a.call(iconButtonProps, event);
         setDraggingColumn(column);
-        e.dataTransfer.setDragImage(tableHeadCellRef.current, 0, 0);
+        event.dataTransfer.setDragImage(tableHeadCellRef.current, 0, 0);
     };
     const handleDragEnd = (event) => {
-        onColumnDrop === null || onColumnDrop === void 0 ? void 0 : onColumnDrop({
-            event,
-            draggedColumn: column,
-            targetColumn: hoveredColumn,
-        });
+        var _a;
+        (_a = iconButtonProps === null || iconButtonProps === void 0 ? void 0 : iconButtonProps.onDragEnd) === null || _a === void 0 ? void 0 : _a.call(iconButtonProps, event);
         if ((hoveredColumn === null || hoveredColumn === void 0 ? void 0 : hoveredColumn.id) === 'drop-zone') {
             column.toggleGrouping();
         }
@@ -1944,21 +1946,20 @@ const MRT_CopyButton = ({ cell, children, table, }) => {
 };
 
 const MRT_TableBodyRowGrabHandle = ({ cell, rowRef, table, }) => {
-    const { options: { muiTableBodyRowDragHandleProps, onRowDrop }, } = table;
+    const { options: { muiTableBodyRowDragHandleProps }, } = table;
     const { row } = cell;
     const iconButtonProps = muiTableBodyRowDragHandleProps instanceof Function
         ? muiTableBodyRowDragHandleProps({ row, table })
         : muiTableBodyRowDragHandleProps;
-    const handleDragStart = (e) => {
-        e.dataTransfer.setDragImage(rowRef.current, 0, 0);
+    const handleDragStart = (event) => {
+        var _a;
+        (_a = iconButtonProps === null || iconButtonProps === void 0 ? void 0 : iconButtonProps.onDragStart) === null || _a === void 0 ? void 0 : _a.call(iconButtonProps, event);
+        event.dataTransfer.setDragImage(rowRef.current, 0, 0);
         table.setDraggingRow(row);
     };
     const handleDragEnd = (event) => {
-        onRowDrop === null || onRowDrop === void 0 ? void 0 : onRowDrop({
-            event,
-            draggedRow: table.getState().draggingRow,
-            targetRow: table.getState().hoveredRow,
-        });
+        var _a;
+        (_a = iconButtonProps === null || iconButtonProps === void 0 ? void 0 : iconButtonProps.onDragEnd) === null || _a === void 0 ? void 0 : _a.call(iconButtonProps, event);
         table.setDraggingRow(null);
         table.setHoveredRow(null);
     };
@@ -2163,8 +2164,9 @@ const MRT_TableBodyRow = ({ row, rowIndex, table, virtualRow, }) => {
 };
 
 const MRT_TableBody = ({ table }) => {
-    const { getRowModel, getPrePaginationRowModel, getState, options: { enableGlobalFilterRankedResults, enablePagination, enableRowVirtualization, manualFiltering, manualSorting, muiTableBodyProps, virtualizerInstanceRef, virtualizerProps, }, refs: { tableContainerRef }, } = table;
-    const { globalFilter, pagination, sorting } = getState();
+    var _a;
+    const { getRowModel, getPrePaginationRowModel, getState, options: { enableGlobalFilterRankedResults, enablePagination, enableRowVirtualization, localization, manualFiltering, manualSorting, muiTableBodyProps, virtualizerInstanceRef, virtualizerProps, }, refs: { tableContainerRef, tablePaperRef }, } = table;
+    const { columnFilters, globalFilter, pagination, sorting } = getState();
     const tableBodyProps = muiTableBodyProps instanceof Function
         ? muiTableBodyProps({ table })
         : muiTableBodyProps;
@@ -2229,7 +2231,18 @@ const MRT_TableBody = ({ table }) => {
     //     ? virtualizer.getTotalSize() - virtualRows[virtualRows.length - 1].end
     //     : 0;
     // }
-    return (React__default["default"].createElement(material.TableBody, Object.assign({}, tableBodyProps),
+    return (React__default["default"].createElement(material.TableBody, Object.assign({}, tableBodyProps), !rows.length ? (React__default["default"].createElement("tr", null,
+        React__default["default"].createElement("td", { colSpan: table.getVisibleLeafColumns().length },
+            React__default["default"].createElement(material.Typography, { sx: {
+                    color: 'text.secondary',
+                    fontStyle: 'italic',
+                    maxWidth: `min(100vw, ${(_a = tablePaperRef.current) === null || _a === void 0 ? void 0 : _a.clientWidth}px)`,
+                    py: '2rem',
+                    textAlign: 'center',
+                    width: '100%',
+                } }, globalFilter || columnFilters.length
+                ? localization.noResultsFound
+                : localization.noRecordsToDisplay)))) : (React__default["default"].createElement(React__default["default"].Fragment, null,
         enableRowVirtualization && paddingTop > 0 && (React__default["default"].createElement("tr", null,
             React__default["default"].createElement("td", { style: { height: `${paddingTop}px` } }))),
         (enableRowVirtualization ? virtualRows : rows).map((rowOrVirtualRow, rowIndex) => {
@@ -2239,7 +2252,7 @@ const MRT_TableBody = ({ table }) => {
             return (React__default["default"].createElement(MRT_TableBodyRow, { key: row.id, row: row, rowIndex: enableRowVirtualization ? rowOrVirtualRow.index : rowIndex, table: table, virtualRow: enableRowVirtualization ? rowOrVirtualRow : null }));
         }),
         enableRowVirtualization && paddingBottom > 0 && (React__default["default"].createElement("tr", null,
-            React__default["default"].createElement("td", { style: { height: `${paddingBottom}px` } })))));
+            React__default["default"].createElement("td", { style: { height: `${paddingBottom}px` } })))))));
 };
 
 const MRT_TableFooterCell = ({ footer, table }) => {
@@ -2293,11 +2306,11 @@ const MRT_TableFooter = ({ table }) => {
         ? muiTableFooterProps({ table })
         : muiTableFooterProps;
     const stickFooter = (isFullScreen || enableStickyFooter) && enableStickyFooter !== false;
-    return (React__default["default"].createElement(material.TableFooter, Object.assign({}, tableFooterProps, { sx: (theme) => (Object.assign({ position: stickFooter ? 'sticky' : undefined, bottom: stickFooter ? 0 : undefined, opacity: stickFooter ? 0.95 : undefined, outline: stickFooter
+    return (React__default["default"].createElement(material.TableFooter, Object.assign({}, tableFooterProps, { sx: (theme) => (Object.assign({ backgroundColor: material.lighten(theme.palette.background.default, 0.06), bottom: stickFooter ? 0 : undefined, opacity: stickFooter ? 0.95 : undefined, outline: stickFooter
                 ? theme.palette.mode === 'light'
                     ? `1px solid ${theme.palette.grey[300]}`
                     : `1px solid ${theme.palette.grey[700]}`
-                : undefined }, ((tableFooterProps === null || tableFooterProps === void 0 ? void 0 : tableFooterProps.sx) instanceof Function
+                : undefined, position: stickFooter ? 'sticky' : 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__default["default"].createElement(MRT_TableFooterRow, { footerGroup: footerGroup, key: footerGroup.id, table: table })))));
 };
@@ -2351,7 +2364,7 @@ const MRT_TableContainer = ({ table }) => {
 };
 
 const MRT_TablePaper = ({ table }) => {
-    const { getState, options: { enableBottomToolbar, enableTopToolbar, muiTablePaperProps }, } = table;
+    const { getState, options: { enableBottomToolbar, enableTopToolbar, muiTablePaperProps }, refs: { tablePaperRef }, } = table;
     const { isFullScreen } = getState();
     React.useEffect(() => {
         if (typeof window !== 'undefined') {
@@ -2366,7 +2379,13 @@ const MRT_TablePaper = ({ table }) => {
     const tablePaperProps = muiTablePaperProps instanceof Function
         ? muiTablePaperProps({ table })
         : muiTablePaperProps;
-    return (React__default["default"].createElement(material.Paper, Object.assign({ elevation: 2 }, tablePaperProps, { sx: (theme) => (Object.assign({ transition: 'all 0.2s ease-in-out' }, ((tablePaperProps === null || tablePaperProps === void 0 ? void 0 : tablePaperProps.sx) instanceof Function
+    return (React__default["default"].createElement(material.Paper, Object.assign({ elevation: 2 }, tablePaperProps, { ref: (ref) => {
+            tablePaperRef.current = ref;
+            if (tablePaperProps === null || tablePaperProps === void 0 ? void 0 : tablePaperProps.ref) {
+                //@ts-ignore
+                tablePaperProps.ref.current = ref;
+            }
+        }, sx: (theme) => (Object.assign({ transition: 'all 0.2s ease-in-out' }, ((tablePaperProps === null || tablePaperProps === void 0 ? void 0 : tablePaperProps.sx) instanceof Function
             ? tablePaperProps === null || tablePaperProps === void 0 ? void 0 : tablePaperProps.sx(theme)
             : tablePaperProps === null || tablePaperProps === void 0 ? void 0 : tablePaperProps.sx))), style: Object.assign(Object.assign({}, tablePaperProps === null || tablePaperProps === void 0 ? void 0 : tablePaperProps.style), { height: isFullScreen ? '100vh' : undefined, margin: isFullScreen ? '0' : undefined, maxHeight: isFullScreen ? '100vh' : undefined, maxWidth: isFullScreen ? '100vw' : undefined, padding: isFullScreen ? '0' : undefined, width: isFullScreen ? '100vw' : undefined }) }),
         enableTopToolbar && React__default["default"].createElement(MRT_TopToolbar, { table: table }),
@@ -2399,6 +2418,7 @@ const MRT_TableRoot = (props) => {
     const filterInputRefs = React.useRef({});
     const searchInputRef = React.useRef(null);
     const tableContainerRef = React.useRef(null);
+    const tablePaperRef = React.useRef(null);
     const topToolbarRef = React.useRef(null);
     const initialState = React.useMemo(() => {
         var _a, _b;
@@ -2519,6 +2539,7 @@ const MRT_TableRoot = (props) => {
             filterInputRefs,
             searchInputRef,
             tableContainerRef,
+            tablePaperRef,
             topToolbarRef,
         }, setColumnFilterFns: (_x = props.onFilterFnsChange) !== 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 });
     if (props.tableInstanceRef) {