material-react-table 0.26.6 → 0.29.0

package/dist/menus/MRT_FilterOptionMenu.d.ts

@@ -1,5 +1,12 @@
 import { FC } from 'react';
 import type { MRT_Header, MRT_TableInstance } from '..';
+import { MRT_Localization } from '../localization';
+export declare const internalFilterOptions: (localization: MRT_Localization) => {
+    option: string;
+    symbol: string;
+    label: string;
+    divider: boolean;
+}[];
 interface Props {
     anchorEl: HTMLElement | null;
     header?: MRT_Header;

package/package.json

@@ -1,8 +1,8 @@
 {
-  "version": "0.26.6",
+  "version": "0.29.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.",
+  "description": "A fully featured Material UI V5 implementation of TanStack React Table V8, written from the ground up in TypeScript.",
   "author": "Kevin Vandy",
   "keywords": [
     "react-table",
@@ -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.2",
     "@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,9 +223,9 @@ 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 })[];
+  filterVariant?: 'text' | 'select' | 'multiSelect' | 'range';
   /**
    * footer must be a string. If you want custom JSX to render the footer, you can also specify a `Footer` option. (Capital F)
    */
@@ -302,9 +303,11 @@ export type MRT_ColumnDef<TData extends Record<string, any> = {}> = Omit<
     | (({
         table,
         column,
+        rangeFilterIndex,
       }: {
         table: MRT_TableInstance<TData>;
         column: MRT_Column<TData>;
+        rangeFilterIndex?: number;
       }) => TextFieldProps);
   muiTableHeadCellProps?:
     | TableCellProps
@@ -341,6 +344,7 @@ export type MRT_DefinedColumnDef<TData extends Record<string, any> = {}> = Omit<
   'id'
 > & {
   id: string;
+  _filterFn: MRT_FilterOption;
 };
 
 export type MRT_Column<TData extends Record<string, any> = {}> = Omit<
@@ -422,6 +426,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 +454,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>;
@@ -607,9 +611,11 @@ export type MaterialReactTableProps<TData extends Record<string, any> = {}> =
       | (({
           table,
           column,
+          rangeFilterIndex,
         }: {
           table: MRT_TableInstance<TData>;
           column: MRT_Column<TData>;
+          rangeFilterIndex?: number;
         }) => TextFieldProps);
     muiTableHeadCellProps?:
       | TableCellProps
@@ -779,7 +785,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 +796,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 +805,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/column.utils.ts

@@ -52,6 +52,8 @@ export const prepareColumns = <TData extends Record<string, any> = {}>(
       if (Object.keys(MRT_FilterFns).includes(currentFilterFns[columnDef.id])) {
         columnDef.filterFn =
           MRT_FilterFns[currentFilterFns[columnDef.id]] ?? MRT_FilterFns.fuzzy;
+        //@ts-ignore
+        columnDef._filterFn = currentFilterFns[columnDef.id];
       }
       if (Object.keys(MRT_SortingFns).includes(columnDef.sortingFn as string)) {
         // @ts-ignore
@@ -123,3 +125,14 @@ export const getDefaultColumnOrderIds = <
     ),
     ...getTrailingDisplayColumnIds(props),
   ].filter(Boolean) as string[];
+
+export const getDefaultColumnFilterFn = <
+  TData extends Record<string, any> = {},
+>(
+  columnDef: MRT_ColumnDef<TData>,
+): MRT_FilterOption => {
+  if (columnDef.filterVariant === 'multiSelect') return 'arrIncludesSome';
+  if (columnDef.filterVariant === 'select') return 'equals';
+  if (columnDef.filterVariant === 'range') return 'betweenInclusive';
+  return 'fuzzy';
+};

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/head/MRT_TableHeadCellFilterContainer.tsx

@@ -19,7 +19,9 @@ export const MRT_TableHeadCellFilterContainer: FC<Props> = ({
 
   return (
     <Collapse in={showColumnFilters} mountOnEnter unmountOnExit>
-      {currentFilterFns[column.id] === 'between' ? (
+      {['between', 'betweenInclusive', 'inNumberRange'].includes(
+        currentFilterFns[column.id],
+      ) ? (
         <MRT_FilterRangeFields header={header} table={table} />
       ) : (
         <MRT_FilterTextField header={header} table={table} />

package/src/head/MRT_TableHeadCellFilterLabel.tsx

@@ -19,6 +19,11 @@ export const MRT_TableHeadCellFilterLabel: FC<Props> = ({ header, table }) => {
   const { column } = header;
   const { columnDef } = column;
 
+  const isRangeFilter = [
+    'between',
+    'betweenInclusive',
+    'inNumberRange',
+  ].includes(columnDef._filterFn);
   const currentFilterOption = currentFilterFns?.[header.id];
   const filterTooltip = localization.filteringByColumn
     .replace('{column}', String(columnDef.header))
@@ -37,7 +42,7 @@ export const MRT_TableHeadCellFilterLabel: FC<Props> = ({ header, table }) => {
       `"${
         Array.isArray(column.getFilterValue())
           ? (column.getFilterValue() as [string, string]).join(
-              `" ${localization.and} "`,
+              `" ${isRangeFilter ? localization.and : localization.or} "`,
             )
           : (column.getFilterValue() as string)
       }"`,
@@ -48,8 +53,8 @@ export const MRT_TableHeadCellFilterLabel: FC<Props> = ({ header, table }) => {
     <Grow
       unmountOnExit
       in={
-        (!!column.getFilterValue() && currentFilterOption !== 'between') ||
-        (currentFilterOption === 'between' && // @ts-ignore
+        (!!column.getFilterValue() && isRangeFilter) ||
+        (!isRangeFilter && // @ts-ignore
           (!!column.getFilterValue()?.[0] || !!column.getFilterValue()?.[1]))
       }
     >

package/src/inputs/MRT_FilterRangeFields.tsx

@@ -11,8 +11,8 @@ interface Props {
 export const MRT_FilterRangeFields: FC<Props> = ({ header, table }) => {
   return (
     <Box sx={{ display: 'grid', gridTemplateColumns: '6fr 6fr', gap: '1rem' }}>
-      <MRT_FilterTextField header={header} inputIndex={0} table={table} />
-      <MRT_FilterTextField header={header} inputIndex={1} table={table} />
+      <MRT_FilterTextField header={header} rangeFilterIndex={0} table={table} />
+      <MRT_FilterTextField header={header} rangeFilterIndex={1} table={table} />
     </Box>
   );
 };