material-react-table 1.0.0-beta.5 → 1.0.0-beta.8

package/dist/index.d.ts

@@ -1,4 +1,4 @@
-import { MutableRefObject, Dispatch, SetStateAction, ReactNode, DragEvent } from 'react';
+import { MutableRefObject, Dispatch, SetStateAction, ReactNode } from 'react';
 import { ButtonProps, TextFieldProps, TableCellProps, IconButtonProps, ToolbarProps, LinearProgressProps, CheckboxProps, SkeletonProps, TableBodyProps, TableRowProps, TableContainerProps, TableFooterProps, TableHeadProps, TablePaginationProps, PaperProps, TableProps, ChipProps, AlertProps } from '@mui/material';
 import { Row, Table, TableState, ColumnDef, DeepKeys, Column, Header, HeaderGroup, Cell, SortingFn, FilterFn, TableOptions, OnChangeFn } from '@tanstack/react-table';
 import { Options, VirtualItem } from 'react-virtual';
@@ -233,6 +233,7 @@ declare type MRT_TableInstance<TData extends Record<string, any> = {}> = Omit<Ta
         filterInputRefs: MutableRefObject<Record<string, HTMLInputElement>>;
         searchInputRef: MutableRefObject<HTMLInputElement>;
         tableContainerRef: MutableRefObject<HTMLDivElement>;
+        tablePaperRef: MutableRefObject<HTMLDivElement>;
         topToolbarRef: MutableRefObject<HTMLDivElement>;
     };
     setColumnFilterFns: Dispatch<SetStateAction<{
@@ -632,13 +633,6 @@ declare type MaterialReactTableProps<TData extends Record<string, any> = {}> = O
     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>;
@@ -657,13 +651,6 @@ declare type MaterialReactTableProps<TData extends Record<string, any> = {}> = O
     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/package.json

@@ -1,5 +1,5 @@
 {
-  "version": "1.0.0-beta.5",
+  "version": "1.0.0-beta.8",
   "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.",

package/src/MaterialReactTable.tsx

@@ -1,6 +1,5 @@
 import React, {
   Dispatch,
-  DragEvent,
   MutableRefObject,
   ReactNode,
   SetStateAction,
@@ -101,6 +100,7 @@ export type MRT_TableInstance<TData extends Record<string, any> = {}> = Omit<
     filterInputRefs: MutableRefObject<Record<string, HTMLInputElement>>;
     searchInputRef: MutableRefObject<HTMLInputElement>;
     tableContainerRef: MutableRefObject<HTMLDivElement>;
+    tablePaperRef: MutableRefObject<HTMLDivElement>;
     topToolbarRef: MutableRefObject<HTMLDivElement>;
   };
   setColumnFilterFns: Dispatch<
@@ -753,15 +753,6 @@ export 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>;
@@ -783,15 +774,6 @@ export 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/src/body/MRT_TableBody.tsx

@@ -1,7 +1,7 @@
 import React, { FC, useMemo } from 'react';
 import { useVirtual } from 'react-virtual'; //stuck on v2 for now
 // import { useVirtualizer, Virtualizer } from '@tanstack/react-virtual';
-import { Box, TableBody, TableCell, TableRow } from '@mui/material';
+import { TableBody, Typography } from '@mui/material';
 import { MRT_TableBodyRow } from './MRT_TableBodyRow';
 import { rankGlobalFuzzy } from '../sortingFns';
 import type { MRT_Row, MRT_TableInstance } from '..';
@@ -26,7 +26,7 @@ export const MRT_TableBody: FC<Props> = ({ table }) => {
       virtualizerInstanceRef,
       virtualizerProps,
     },
-    refs: { tableContainerRef },
+    refs: { tableContainerRef, tablePaperRef },
   } = table;
   const { columnFilters, globalFilter, pagination, sorting } = getState();
 
@@ -118,11 +118,13 @@ export const MRT_TableBody: FC<Props> = ({ table }) => {
   return (
     <TableBody {...tableBodyProps}>
       {!rows.length ? (
-        <TableRow>
-          <TableCell colSpan={table.getVisibleLeafColumns().length}>
-            <Box
+        <tr>
+          <td colSpan={table.getVisibleLeafColumns().length}>
+            <Typography
               sx={{
-                maxWidth: '100vw',
+                color: 'text.secondary',
+                fontStyle: 'italic',
+                maxWidth: `min(100vw, ${tablePaperRef.current?.clientWidth}px)`,
                 py: '2rem',
                 textAlign: 'center',
                 width: '100%',
@@ -131,9 +133,9 @@ export const MRT_TableBody: FC<Props> = ({ table }) => {
               {globalFilter || columnFilters.length
                 ? localization.noResultsFound
                 : localization.noRecordsToDisplay}
-            </Box>
-          </TableCell>
-        </TableRow>
+            </Typography>
+          </td>
+        </tr>
       ) : (
         <>
           {enableRowVirtualization && paddingTop > 0 && (

package/src/body/MRT_TableBodyRowGrabHandle.tsx

@@ -14,7 +14,7 @@ export const MRT_TableBodyRowGrabHandle: FC<Props> = ({
   table,
 }) => {
   const {
-    options: { muiTableBodyRowDragHandleProps, onRowDrop },
+    options: { muiTableBodyRowDragHandleProps },
   } = table;
   const { row } = cell;
 
@@ -23,17 +23,14 @@ export const MRT_TableBodyRowGrabHandle: FC<Props> = ({
       ? muiTableBodyRowDragHandleProps({ row, table })
       : muiTableBodyRowDragHandleProps;
 
-  const handleDragStart = (e: DragEvent<HTMLButtonElement>) => {
-    e.dataTransfer.setDragImage(rowRef.current as HTMLElement, 0, 0);
+  const handleDragStart = (event: DragEvent<HTMLButtonElement>) => {
+    iconButtonProps?.onDragStart?.(event);
+    event.dataTransfer.setDragImage(rowRef.current as HTMLElement, 0, 0);
     table.setDraggingRow(row as any);
   };
 
   const handleDragEnd = (event: DragEvent<HTMLButtonElement>) => {
-    onRowDrop?.({
-      event,
-      draggedRow: table.getState().draggingRow as any,
-      targetRow: table.getState().hoveredRow as any,
-    });
+    iconButtonProps?.onDragEnd?.(event);
     table.setDraggingRow(null);
     table.setHoveredRow(null);
   };

package/src/buttons/MRT_GrabHandleButton.tsx

@@ -33,14 +33,14 @@ export const MRT_GrabHandleButton = <TData extends Record<string, any> = {}>({
       <IconButton
         disableRipple
         draggable="true"
-        onDragStart={onDragStart}
-        onDragEnd={onDragEnd}
         size="small"
         {...iconButtonProps}
         onClick={(e) => {
           e.stopPropagation();
           iconButtonProps?.onClick?.(e);
         }}
+        onDragStart={onDragStart}
+        onDragEnd={onDragEnd}
         sx={(theme) => ({
           cursor: 'grab',
           m: 0,

package/src/footer/MRT_TableFooter.tsx

@@ -1,5 +1,5 @@
 import React, { FC } from 'react';
-import { TableFooter } from '@mui/material';
+import { lighten, TableFooter } from '@mui/material';
 import { MRT_TableFooterRow } from './MRT_TableFooterRow';
 import type { MRT_TableInstance } from '..';
 
@@ -27,7 +27,7 @@ export const MRT_TableFooter: FC<Props> = ({ table }) => {
     <TableFooter
       {...tableFooterProps}
       sx={(theme) => ({
-        position: stickFooter ? 'sticky' : undefined,
+        backgroundColor: lighten(theme.palette.background.default, 0.06),
         bottom: stickFooter ? 0 : undefined,
         opacity: stickFooter ? 0.95 : undefined,
         outline: stickFooter
@@ -35,6 +35,7 @@ export const MRT_TableFooter: FC<Props> = ({ table }) => {
             ? `1px solid ${theme.palette.grey[300]}`
             : `1px solid ${theme.palette.grey[700]}`
           : undefined,
+        position: stickFooter ? 'sticky' : undefined,
         ...(tableFooterProps?.sx instanceof Function
           ? tableFooterProps?.sx(theme)
           : (tableFooterProps?.sx as any)),

package/src/head/MRT_TableHeadCellFilterLabel.tsx

@@ -17,11 +17,11 @@ export const MRT_TableHeadCellFilterLabel: FC<Props> = ({ header, 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))
@@ -51,8 +51,8 @@ export const MRT_TableHeadCellFilterLabel: FC<Props> = ({ header, table }) => {
     <Grow
       unmountOnExit
       in={
-        (!!column.getFilterValue() && isRangeFilter) ||
-        (!isRangeFilter && // @ts-ignore
+        (!!column.getFilterValue() && !isRangeFilter) ||
+        (isRangeFilter && // @ts-ignore
           (!!column.getFilterValue()?.[0] || !!column.getFilterValue()?.[1]))
       }
     >

package/src/head/MRT_TableHeadCellGrabHandle.tsx

@@ -16,11 +16,7 @@ export const MRT_TableHeadCellGrabHandle: FC<Props> = ({
 }) => {
   const {
     getState,
-    options: {
-      enableColumnOrdering,
-      muiTableHeadCellDragHandleProps,
-      onColumnDrop,
-    },
+    options: { enableColumnOrdering, muiTableHeadCellDragHandleProps },
     setColumnOrder,
     setDraggingColumn,
     setHoveredColumn,
@@ -43,17 +39,14 @@ export const MRT_TableHeadCellGrabHandle: FC<Props> = ({
     ...mcIconButtonProps,
   };
 
-  const handleDragStart = (e: DragEvent<HTMLButtonElement>) => {
+  const handleDragStart = (event: DragEvent<HTMLButtonElement>) => {
+    iconButtonProps?.onDragStart?.(event);
     setDraggingColumn(column);
-    e.dataTransfer.setDragImage(tableHeadCellRef.current as HTMLElement, 0, 0);
+    event.dataTransfer.setDragImage(tableHeadCellRef.current as HTMLElement, 0, 0);
   };
 
   const handleDragEnd = (event: DragEvent<HTMLButtonElement>) => {
-    onColumnDrop?.({
-      event,
-      draggedColumn: column,
-      targetColumn: hoveredColumn,
-    });
+    iconButtonProps?.onDragEnd?.(event);
     if (hoveredColumn?.id === 'drop-zone') {
       column.toggleGrouping();
     } else if (

package/src/table/MRT_TablePaper.tsx

@@ -1,4 +1,4 @@
-import React, { FC, useEffect } from 'react';
+import React, { FC } from 'react';
 import { Paper } from '@mui/material';
 import { MRT_TopToolbar } from '../toolbar/MRT_TopToolbar';
 import { MRT_BottomToolbar } from '../toolbar/MRT_BottomToolbar';
@@ -13,19 +13,10 @@ export const MRT_TablePaper: FC<Props> = ({ table }) => {
   const {
     getState,
     options: { enableBottomToolbar, enableTopToolbar, muiTablePaperProps },
+    refs: { tablePaperRef },
   } = table;
   const { isFullScreen } = getState();
 
-  useEffect(() => {
-    if (typeof window !== 'undefined') {
-      if (isFullScreen) {
-        document.body.style.height = '100vh';
-      } else {
-        document.body.style.height = 'auto';
-      }
-    }
-  }, [isFullScreen]);
-
   const tablePaperProps =
     muiTablePaperProps instanceof Function
       ? muiTablePaperProps({ table })
@@ -35,6 +26,13 @@ export const MRT_TablePaper: FC<Props> = ({ table }) => {
     <Paper
       elevation={2}
       {...tablePaperProps}
+      ref={(ref: HTMLDivElement) => {
+        tablePaperRef.current = ref;
+        if (tablePaperProps?.ref) {
+          //@ts-ignore
+          tablePaperProps.ref.current = ref;
+        }
+      }}
       sx={(theme) => ({
         transition: 'all 0.2s ease-in-out',
         ...(tablePaperProps?.sx instanceof Function
@@ -43,12 +41,16 @@ export const MRT_TablePaper: FC<Props> = ({ table }) => {
       })}
       style={{
         ...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,
+        ...(isFullScreen
+          ? {
+              height: '100vh',
+              margin: 0,
+              maxHeight: '100vh',
+              maxWidth: '100vw',
+              padding: 0,
+              width: '100vw',
+            }
+          : {}),
       }}
     >
       {enableTopToolbar && <MRT_TopToolbar table={table} />}

package/src/table/MRT_TableRoot.tsx

@@ -1,4 +1,4 @@
-import React, { useMemo, useRef, useState } from 'react';
+import React, { useEffect, useMemo, useRef, useState } from 'react';
 import {
   TableState,
   getCoreRowModel,
@@ -45,6 +45,7 @@ export const MRT_TableRoot = <TData extends Record<string, any> = {}>(
   const filterInputRefs = useRef<Record<string, HTMLInputElement>>({});
   const searchInputRef = useRef<HTMLInputElement>(null);
   const tableContainerRef = useRef<HTMLDivElement>(null);
+  const tablePaperRef = useRef<HTMLDivElement>(null);
   const topToolbarRef = useRef<HTMLDivElement>(null);
 
   const initialState: Partial<MRT_TableState<TData>> = useMemo(() => {
@@ -292,6 +293,7 @@ export const MRT_TableRoot = <TData extends Record<string, any> = {}>(
       filterInputRefs,
       searchInputRef,
       tableContainerRef,
+      tablePaperRef,
       topToolbarRef,
     },
     setColumnFilterFns: props.onFilterFnsChange ?? setColumnFilterFns,
@@ -313,6 +315,24 @@ export const MRT_TableRoot = <TData extends Record<string, any> = {}>(
     props.tableInstanceRef.current = table;
   }
 
+  const initialBodyHeight = useRef<string>();
+
+  useEffect(() => {
+    if (typeof window !== 'undefined') {
+      initialBodyHeight.current = document.body.style.height;
+    }
+  }, []);
+
+  useEffect(() => {
+    if (typeof window !== 'undefined') {
+      if (table.getState().isFullScreen) {
+        document.body.style.height = '100vh';
+      } else {
+        document.body.style.height = initialBodyHeight.current as string;
+      }
+    }
+  }, [table.getState().isFullScreen]);
+
   return (
     <>
       <Dialog

package/src/toolbar/MRT_TopToolbar.tsx

@@ -102,7 +102,13 @@ export const MRT_TopToolbar: FC<Props> = ({ table }) => {
         )}
         {renderTopToolbarCustomActions?.({ table }) ?? <span />}
         {enableToolbarInternalActions ? (
-          <Box sx={{ display: 'flex', flexWrap: 'wrap' }}>
+          <Box
+            sx={{
+              display: 'flex',
+              flexWrap: 'wrap-reverse',
+              justifyContent: 'flex-end',
+            }}
+          >
             {enableGlobalFilter && positionGlobalFilter === 'right' && (
               <MRT_GlobalFilterTextField table={table} />
             )}