material-react-table 0.26.5 → 0.28.0

package/package.json

@@ -1,5 +1,5 @@
 {
-  "version": "0.26.5",
+  "version": "0.28.0",
   "license": "MIT",
   "name": "material-react-table",
   "description": "A fully featured Material UI implementation of TanStack React Table, inspired by material-table and the MUI X DataGrid, written from the ground up in TypeScript.",
@@ -57,12 +57,12 @@
     }
   ],
   "devDependencies": {
-    "@babel/core": "^7.18.6",
+    "@babel/core": "^7.18.9",
     "@emotion/react": "^11.9.3",
     "@emotion/styled": "^11.9.3",
     "@faker-js/faker": "^7.3.0",
     "@mui/icons-material": "^5.8.4",
-    "@mui/material": "^5.9.0",
+    "@mui/material": "^5.9.1",
     "@size-limit/preset-small-lib": "^7.0.8",
     "@storybook/addon-a11y": "^6.5.9",
     "@storybook/addon-actions": "^6.5.9",
@@ -101,6 +101,6 @@
   "dependencies": {
     "@tanstack/match-sorter-utils": "8.1.1",
     "@tanstack/react-table": "8.2.6",
-    "react-virtual": "^2.10.4"
+    "@tanstack/react-virtual": "^3.0.0-beta.13"
   }
 }

package/src/MaterialReactTable.tsx

@@ -40,7 +40,7 @@ import type {
   TableOptions,
   TableState,
 } from '@tanstack/react-table';
-import type { Options as VirtualizerOptions } from 'react-virtual';
+import type { VirtualizerOptions } from '@tanstack/react-virtual';
 import { MRT_Localization, MRT_DefaultLocalization_EN } from './localization';
 import { MRT_Default_Icons, MRT_Icons } from './icons';
 import { MRT_TableRoot } from './table/MRT_TableRoot';
@@ -134,7 +134,7 @@ export type MRT_TableState<TData extends Record<string, any> = {}> =
   };
 
 export type MRT_ColumnDef<TData extends Record<string, any> = {}> = Omit<
-  ColumnDef<TData>,
+  ColumnDef<TData, unknown>,
   | 'accessorFn'
   | 'accessorKey'
   | 'aggregatedCell'
@@ -215,6 +215,7 @@ export type MRT_ColumnDef<TData extends Record<string, any> = {}> = Omit<
    * @example columnDefType: 'display'
    */
   columnDefType?: 'data' | 'display' | 'group';
+  columnFilterModeOptions?: MRT_FilterOption[] | null;
   columns?: MRT_ColumnDef<TData>[];
   enableClickToCopy?: boolean;
   enableColumnActions?: boolean;
@@ -222,7 +223,6 @@ export type MRT_ColumnDef<TData extends Record<string, any> = {}> = Omit<
   enableColumnFilterChangeMode?: boolean;
   enableColumnOrdering?: boolean;
   enableEditing?: boolean;
-  enabledColumnFilterOptions?: MRT_FilterOption[] | null;
   filterFn?: MRT_FilterFn<TData>;
   filterSelectOptions?: (string | { text: string; value: string })[];
   /**
@@ -422,6 +422,7 @@ export type MaterialReactTableProps<TData extends Record<string, any> = {}> =
     displayColumnDefOptions?: Partial<{
       [key in MRT_DisplayColumnIds]: Partial<MRT_ColumnDef>;
     }>;
+    columnFilterModeOptions?: (MRT_FilterOption | string)[] | null;
     columns: MRT_ColumnDef<TData>[];
     data: TData[];
     editingMode?: 'table' | 'row' | 'cell';
@@ -449,7 +450,6 @@ export type MaterialReactTableProps<TData extends Record<string, any> = {}> =
     enableToolbarBottom?: boolean;
     enableToolbarInternalActions?: boolean;
     enableToolbarTop?: boolean;
-    enabledColumnFilterOptions?: (MRT_FilterOption | string)[] | null;
     enabledGlobalFilterOptions?: (MRT_FilterOption | string)[] | null;
     expandRowsFn?: (dataRow: TData) => TData[];
     icons?: Partial<MRT_Icons>;
@@ -779,7 +779,9 @@ export type MaterialReactTableProps<TData extends Record<string, any> = {}> =
     selectAllMode?: 'all' | 'page';
     state?: Partial<MRT_TableState<TData>>;
     tableId?: string;
-    virtualizerProps?: Partial<VirtualizerOptions<HTMLDivElement>>;
+    virtualizerProps?: Partial<
+      VirtualizerOptions<HTMLDivElement, HTMLTableRowElement>
+    >;
   };
 
 export default <TData extends Record<string, any> = {}>({
@@ -788,7 +790,7 @@ export default <TData extends Record<string, any> = {}>({
   defaultColumn = { minSize: 40, maxSize: 1000, size: 180 },
   editingMode = 'row',
   enableColumnActions = true,
-  enableColumnFilterChangeMode = true,
+  enableColumnFilterChangeMode = false,
   enableColumnFilters = true,
   enableColumnOrdering = false,
   enableColumnResizing = false,
@@ -797,7 +799,7 @@ export default <TData extends Record<string, any> = {}>({
   enableFilters = true,
   enableFullScreenToggle = true,
   enableGlobalFilter = true,
-  enableGlobalFilterChangeMode = true,
+  enableGlobalFilterChangeMode = false,
   enableGlobalFilterRankedResults = true,
   enableGrouping = false,
   enableHiding = true,

package/src/body/MRT_TableBody.tsx

@@ -1,5 +1,5 @@
 import React, { FC, RefObject, useMemo } from 'react';
-import { useVirtual } from 'react-virtual';
+import { useVirtualizer, Virtualizer } from '@tanstack/react-virtual';
 import { TableBody } from '@mui/material';
 import { MRT_TableBodyRow } from './MRT_TableBodyRow';
 import { rankGlobalFuzzy } from '../sortingFns';
@@ -60,28 +60,27 @@ export const MRT_TableBody: FC<Props> = ({ table, tableContainerRef }) => {
     globalFilter,
   ]);
 
-  const rowVirtualizer = enableRowVirtualization
-    ? useVirtual({
-        // estimateSize: () => (density === 'compact' ? 25 : 50),
+  const rowVirtualizer: Virtualizer = enableRowVirtualization
+    ? useVirtualizer({
+        estimateSize: () => (density === 'compact' ? 25 : 50),
         overscan: density === 'compact' ? 30 : 10,
-        parentRef: tableContainerRef,
-        size: rows.length,
+        getScrollElement: () => tableContainerRef.current as HTMLDivElement,
+        count: rows.length,
         ...virtualizerProps,
       })
     : ({} as any);
 
   const virtualRows = enableRowVirtualization
-    ? rowVirtualizer.virtualItems
+    ? rowVirtualizer.getVirtualItems()
     : [];
 
   let paddingTop = 0;
   let paddingBottom = 0;
   if (enableRowVirtualization) {
-    paddingTop = virtualRows.length > 0 ? virtualRows[0].start : 0;
-    paddingBottom =
-      virtualRows.length > 0
-        ? rowVirtualizer.totalSize - virtualRows[virtualRows.length - 1].end
-        : 0;
+    paddingTop = !!virtualRows.length ? virtualRows[0].start : 0;
+    paddingBottom = !!virtualRows.length
+      ? rowVirtualizer.getTotalSize() - virtualRows[virtualRows.length - 1].end
+      : 0;
   }
 
   return (
@@ -91,6 +90,7 @@ export const MRT_TableBody: FC<Props> = ({ table, tableContainerRef }) => {
           <td style={{ height: `${paddingTop}px` }} />
         </tr>
       )}
+      {/* @ts-ignore */}
       {(enableRowVirtualization ? virtualRows : rows).map(
         (rowOrVirtualRow: any, rowIndex: number) => {
           const row = enableRowVirtualization

package/src/body/MRT_TableBodyCell.tsx

@@ -35,6 +35,7 @@ export const MRT_TableBodyCell: FC<Props> = ({
       enableClickToCopy,
       enableColumnOrdering,
       enableEditing,
+      enablePagination,
       enableRowNumbers,
       muiTableBodyCellProps,
       muiTableBodyCellSkeletonProps,
@@ -147,7 +148,12 @@ export const MRT_TableBodyCell: FC<Props> = ({
         borderLeft: draggingBorder,
         borderRight: draggingBorder,
         borderBottom:
-          row.index === table.getRowModel().rows.length - 1
+          row.index ===
+          (enablePagination
+            ? table.getRowModel()
+            : table.getPrePaginationRowModel()
+          ).rows.length -
+            1
             ? draggingBorder
             : undefined,
       }

package/src/buttons/MRT_ExpandAllButton.tsx

@@ -43,6 +43,7 @@ export const MRT_ExpandAllButton: FC<Props> = ({ table }) => {
           sx={{
             height: density === 'compact' ? '1.75rem' : '2.25rem',
             width: density === 'compact' ? '1.75rem' : '2.25rem',
+            mt: density !== 'compact' ? '-0.25rem' : undefined,
             ...iconButtonProps?.sx,
           }}
         >

package/src/head/MRT_TableHeadCell.tsx

@@ -128,12 +128,10 @@ export const MRT_TableHeadCell: FC<Props> = ({ header, table }) => {
             : 1,
         p:
           density === 'compact'
-            ? columnDefType === 'display'
-              ? '0 0.5rem'
-              : '0.5rem'
+            ? '0.5rem'
             : density === 'comfortable'
             ? columnDefType === 'display'
-              ? '0.5rem 0.75rem'
+              ? '0.75rem'
               : '1rem'
             : columnDefType === 'display'
             ? '1rem 1.25rem'

package/src/inputs/MRT_FilterTextField.tsx

@@ -33,7 +33,7 @@ export const MRT_FilterTextField: FC<Props> = ({
     getState,
     options: {
       enableColumnFilterChangeMode,
-      enabledColumnFilterOptions,
+      columnFilterModeOptions,
       icons: { FilterListIcon, CloseIcon },
       localization,
       muiTableHeadCellFilterTextFieldProps,
@@ -152,7 +152,7 @@ export const MRT_FilterTextField: FC<Props> = ({
       : '';
 
   const allowedColumnFilterOptions =
-    columnDef?.enabledColumnFilterOptions ?? enabledColumnFilterOptions;
+    columnDef?.columnFilterModeOptions ?? columnFilterModeOptions;
 
   const showChangeModeButton =
     enableColumnFilterChangeMode &&
@@ -260,7 +260,6 @@ export const MRT_FilterTextField: FC<Props> = ({
         }}
         {...textFieldProps}
         sx={(theme) => ({
-          m: '-0.25rem',
           p: 0,
           minWidth: !filterChipLabel ? '8rem' : 'auto',
           width: 'calc(100% + 0.5rem)',

package/src/inputs/MRT_SelectCheckbox.tsx

@@ -59,9 +59,9 @@ export const MRT_SelectCheckbox: FC<Props> = ({ row, selectAll, table }) => {
         size={density === 'compact' ? 'small' : 'medium'}
         {...checkboxProps}
         sx={(theme) => ({
-          height: density === 'compact' ? '1.5rem' : '2rem',
-          width: density === 'compact' ? '1.5rem' : '2rem',
-          m: '-1re.m',
+          height: density === 'compact' ? '1.75rem' : '2.5rem',
+          width: density === 'compact' ? '1.75rem' : '2.5rem',
+          m: density !== 'compact' ? '-0.4rem' : undefined,
           ...(checkboxProps?.sx instanceof Function
             ? checkboxProps.sx(theme)
             : (checkboxProps?.sx as any)),

package/src/menus/MRT_ColumnActionMenu.tsx

@@ -41,7 +41,7 @@ export const MRT_ColumnActionMenu: FC<Props> = ({
       enableHiding,
       enablePinning,
       enableSorting,
-      enabledColumnFilterOptions,
+      columnFilterModeOptions,
       icons: {
         ArrowRightIcon,
         ClearAllIcon,
@@ -145,7 +145,7 @@ export const MRT_ColumnActionMenu: FC<Props> = ({
   const isSelectFilter = !!columnDef.filterSelectOptions;
 
   const allowedColumnFilterOptions =
-    columnDef?.enabledColumnFilterOptions ?? enabledColumnFilterOptions;
+    columnDef?.columnFilterModeOptions ?? columnFilterModeOptions;
 
   const showFilterModeSubMenu =
     enableColumnFilterChangeMode &&

package/src/menus/MRT_FilterOptionMenu.tsx

@@ -21,7 +21,7 @@ export const MRT_FilterOptionMenu: FC<Props> = ({
     getState,
     options: {
       enabledGlobalFilterOptions,
-      enabledColumnFilterOptions,
+      columnFilterModeOptions,
       localization,
     },
     setCurrentFilterFns,
@@ -32,7 +32,7 @@ export const MRT_FilterOptionMenu: FC<Props> = ({
   const { columnDef } = column ?? {};
 
   const allowedColumnFilterOptions =
-    columnDef?.enabledColumnFilterOptions ?? enabledColumnFilterOptions;
+    columnDef?.columnFilterModeOptions ?? columnFilterModeOptions;
 
   const filterOptions = useMemo(
     () =>

package/src/toolbar/MRT_ToolbarBottom.tsx

@@ -31,10 +31,7 @@ export const MRT_ToolbarBottom: FC<Props> = ({ table }) => {
       ? muiTableToolbarBottomProps({ table })
       : muiTableToolbarBottomProps;
 
-  const stackAlertBanner =
-    isMobile ||
-    (positionToolbarAlertBanner === 'bottom' &&
-      !!renderToolbarBottomCustomActions);
+  const stackAlertBanner = isMobile || !!renderToolbarBottomCustomActions;
 
   return (
     <Toolbar

package/src/toolbar/MRT_ToolbarTop.tsx

@@ -49,9 +49,7 @@ export const MRT_ToolbarTop: FC<Props> = ({ table }) => {
       : muiTableToolbarTopProps;
 
   const stackAlertBanner =
-    isMobile ||
-    (positionToolbarAlertBanner === 'top' &&
-      (!!renderToolbarTopCustomActions || showGlobalFilter));
+    isMobile || !!renderToolbarTopCustomActions || showGlobalFilter;
 
   return (
     <Toolbar