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

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';
@@ -154,6 +154,8 @@ interface MRT_Localization {
     max: string;
     min: string;
     move: string;
+    noRecordsToDisplay: string;
+    noResultsFound: string;
     or: string;
     pinToLeft: string;
     pinToRight: string;
@@ -231,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<{
@@ -630,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>;
@@ -655,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.4",
+  "version": "1.0.0-beta.7",
   "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 { TableBody } 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 '..';
@@ -19,15 +19,16 @@ export const MRT_TableBody: FC<Props> = ({ table }) => {
       enableGlobalFilterRankedResults,
       enablePagination,
       enableRowVirtualization,
+      localization,
       manualFiltering,
       manualSorting,
       muiTableBodyProps,
       virtualizerInstanceRef,
       virtualizerProps,
     },
-    refs: { tableContainerRef },
+    refs: { tableContainerRef, tablePaperRef },
   } = table;
-  const { globalFilter, pagination, sorting } = getState();
+  const { columnFilters, globalFilter, pagination, sorting } = getState();
 
   const tableBodyProps =
     muiTableBodyProps instanceof Function
@@ -116,33 +117,56 @@ export const MRT_TableBody: FC<Props> = ({ table }) => {
 
   return (
     <TableBody {...tableBodyProps}>
-      {enableRowVirtualization && paddingTop > 0 && (
+      {!rows.length ? (
         <tr>
-          <td style={{ height: `${paddingTop}px` }} />
-        </tr>
-      )}
-      {(enableRowVirtualization ? virtualRows : rows).map(
-        (rowOrVirtualRow: any, rowIndex: number) => {
-          const row = enableRowVirtualization
-            ? (rows[rowOrVirtualRow.index] as MRT_Row)
-            : (rowOrVirtualRow as MRT_Row);
-          return (
-            <MRT_TableBodyRow
-              key={row.id}
-              row={row}
-              rowIndex={
-                enableRowVirtualization ? rowOrVirtualRow.index : rowIndex
-              }
-              table={table}
-              virtualRow={enableRowVirtualization ? rowOrVirtualRow : null}
-            />
-          );
-        },
-      )}
-      {enableRowVirtualization && paddingBottom > 0 && (
-        <tr>
-          <td style={{ height: `${paddingBottom}px` }} />
+          <td colSpan={table.getVisibleLeafColumns().length}>
+            <Typography
+              sx={{
+                color: 'text.secondary',
+                fontStyle: 'italic',
+                maxWidth: `min(100vw, ${tablePaperRef.current?.clientWidth}px)`,
+                py: '2rem',
+                textAlign: 'center',
+                width: '100%',
+              }}
+            >
+              {globalFilter || columnFilters.length
+                ? localization.noResultsFound
+                : localization.noRecordsToDisplay}
+            </Typography>
+          </td>
         </tr>
+      ) : (
+        <>
+          {enableRowVirtualization && paddingTop > 0 && (
+            <tr>
+              <td style={{ height: `${paddingTop}px` }} />
+            </tr>
+          )}
+          {(enableRowVirtualization ? virtualRows : rows).map(
+            (rowOrVirtualRow: any, rowIndex: number) => {
+              const row = enableRowVirtualization
+                ? (rows[rowOrVirtualRow.index] as MRT_Row)
+                : (rowOrVirtualRow as MRT_Row);
+              return (
+                <MRT_TableBodyRow
+                  key={row.id}
+                  row={row}
+                  rowIndex={
+                    enableRowVirtualization ? rowOrVirtualRow.index : rowIndex
+                  }
+                  table={table}
+                  virtualRow={enableRowVirtualization ? rowOrVirtualRow : null}
+                />
+              );
+            },
+          )}
+          {enableRowVirtualization && paddingBottom > 0 && (
+            <tr>
+              <td style={{ height: `${paddingBottom}px` }} />
+            </tr>
+          )}
+        </>
       )}
     </TableBody>
   );

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/localization.ts

@@ -47,6 +47,8 @@ export interface MRT_Localization {
   max: string;
   min: string;
   move: string;
+  noRecordsToDisplay: string;
+  noResultsFound: string;
   or: string;
   pinToLeft: string;
   pinToRight: string;
@@ -129,6 +131,8 @@ export const MRT_DefaultLocalization_EN: MRT_Localization = {
   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',

package/src/table/MRT_TablePaper.tsx

@@ -13,6 +13,7 @@ export const MRT_TablePaper: FC<Props> = ({ table }) => {
   const {
     getState,
     options: { enableBottomToolbar, enableTopToolbar, muiTablePaperProps },
+    refs: { tablePaperRef },
   } = table;
   const { isFullScreen } = getState();
 
@@ -35,6 +36,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

package/src/table/MRT_TableRoot.tsx

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

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} />
             )}