material-react-table 2.0.0-alpha.1 → 2.0.0-alpha.2

package/src/column.utils.ts

@@ -1,18 +1,17 @@
 import { type ReactNode } from 'react';
 import {
-  type Row,
-  type Renderable,
-  flexRender as _flexRender,
   createRow as _createRow,
+  flexRender as _flexRender,
+  type Renderable,
+  type Row,
 } from '@tanstack/react-table';
+import { type TableCellProps } from '@mui/material/TableCell';
 import { alpha, lighten } from '@mui/material/styles';
+import { type Theme } from '@mui/material/styles';
 import { type MRT_AggregationFns } from './aggregationFns';
 import { type MRT_FilterFns } from './filterFns';
 import { type MRT_SortingFns } from './sortingFns';
-import { type TableCellProps } from '@mui/material/TableCell';
-import { type Theme } from '@mui/material/styles';
 import {
-  type MRT_TableOptions,
   type MRT_Column,
   type MRT_ColumnDef,
   type MRT_ColumnOrderState,
@@ -21,8 +20,9 @@ import {
   type MRT_FilterOption,
   type MRT_GroupingState,
   type MRT_Header,
-  type MRT_TableInstance,
   type MRT_Row,
+  type MRT_TableInstance,
+  type MRT_TableOptions,
 } from './types';
 
 export const getColumnId = <TData extends Record<string, any>>(
@@ -159,7 +159,7 @@ export const getLeadingDisplayColumnIds = <TData extends Record<string, any>>(
     props.positionActionsColumn === 'first' &&
       (props.enableRowActions ||
         (props.enableEditing &&
-          ['row', 'modal'].includes(props.editDisplayMode ?? ''))) &&
+          ['modal', 'row'].includes(props.editDisplayMode ?? ''))) &&
       'mrt-row-actions',
     props.positionExpandColumn === 'first' &&
       showExpandColumn(props) &&
@@ -175,7 +175,7 @@ export const getTrailingDisplayColumnIds = <TData extends Record<string, any>>(
     props.positionActionsColumn === 'last' &&
       (props.enableRowActions ||
         (props.enableEditing &&
-          ['row', 'modal'].includes(props.editDisplayMode ?? ''))) &&
+          ['modal', 'row'].includes(props.editDisplayMode ?? ''))) &&
       'mrt-row-actions',
     props.positionExpandColumn === 'last' &&
       showExpandColumn(props) &&
@@ -218,15 +218,21 @@ export const getIsFirstColumn = <TData extends Record<string, any>>(
   column: MRT_Column<TData>,
   table: MRT_TableInstance<TData>,
 ) => {
-  return table.getVisibleLeafColumns()[0].id === column.id;
+  const leftColumns = table.getLeftVisibleLeafColumns();
+  return leftColumns.length
+    ? leftColumns[0].id === column.id
+    : table.getVisibleLeafColumns()[0].id === column.id;
 };
 
 export const getIsLastColumn = <TData extends Record<string, any>>(
   column: MRT_Column<TData>,
   table: MRT_TableInstance<TData>,
 ) => {
+  const rightColumns = table.getRightVisibleLeafColumns();
   const columns = table.getVisibleLeafColumns();
-  return columns[columns.length - 1].id === column.id;
+  return rightColumns.length
+    ? rightColumns[rightColumns.length - 1].id === column.id
+    : columns[columns.length - 1].id === column.id;
 };
 
 export const getIsLastLeftPinnedColumn = <TData extends Record<string, any>>(
@@ -258,15 +264,15 @@ export const getTotalRight = <TData extends Record<string, any>>(
 export const getCanRankRows = <TData extends Record<string, any>>(
   table: MRT_TableInstance<TData>,
 ) => {
-  const { options, getState } = table;
+  const { getState, options } = table;
   const {
+    enableGlobalFilterRankedResults,
     manualExpanding,
     manualFiltering,
     manualGrouping,
     manualSorting,
-    enableGlobalFilterRankedResults,
   } = options;
-  const { globalFilterFn, expanded } = getState();
+  const { expanded, globalFilterFn } = getState();
 
   return (
     !manualExpanding &&
@@ -366,8 +372,8 @@ export const getCommonCellStyles = <TData extends Record<string, any>>({
 
 export const MRT_DefaultColumn = {
   filterVariant: 'text',
-  minSize: 40,
   maxSize: 1000,
+  minSize: 40,
   size: 180,
 } as const;
 
@@ -387,7 +393,7 @@ export const MRT_DefaultDisplayColumn = {
 } as const;
 
 export const parseFromValuesOrFunc = <T, U>(
-  fn: T | ((arg: U) => T) | undefined,
+  fn: ((arg: U) => T) | T | undefined,
   arg: U,
 ): T | undefined => (fn instanceof Function ? fn(arg) : fn);
 
@@ -396,7 +402,7 @@ export const parseCSSVarId = (id: string) => id.replace(/[^a-zA-Z0-9]/g, '_');
 export const flexRender = _flexRender as (
   Comp: Renderable<any>,
   props: any,
-) => ReactNode | JSX.Element;
+) => JSX.Element | ReactNode;
 
 export const createRow = <TData extends Record<string, any>>(
   table: MRT_TableInstance<TData>,

package/src/filterFns.ts

@@ -1,14 +1,14 @@
 import {
+  type RankingInfo,
   rankItem,
   rankings,
-  type RankingInfo,
 } from '@tanstack/match-sorter-utils';
-import { filterFns, type Row } from '@tanstack/react-table';
+import { type Row, filterFns } from '@tanstack/react-table';
 
 const fuzzy = <TData extends Record<string, any>>(
   row: Row<TData>,
   columnId: string,
-  filterValue: string | number,
+  filterValue: number | string,
   addMeta: (item: RankingInfo) => void,
 ) => {
   const itemRank = rankItem(row.getValue(columnId), filterValue as string, {
@@ -23,10 +23,10 @@ fuzzy.autoRemove = (val: any) => !val;
 const contains = <TData extends Record<string, any>>(
   row: Row<TData>,
   id: string,
-  filterValue: string | number,
+  filterValue: number | string,
 ) =>
   row
-    .getValue<string | number>(id)
+    .getValue<number | string>(id)
     .toString()
     .toLowerCase()
     .trim()
@@ -37,10 +37,10 @@ contains.autoRemove = (val: any) => !val;
 const startsWith = <TData extends Record<string, any>>(
   row: Row<TData>,
   id: string,
-  filterValue: string | number,
+  filterValue: number | string,
 ) =>
   row
-    .getValue<string | number>(id)
+    .getValue<number | string>(id)
     .toString()
     .toLowerCase()
     .trim()
@@ -51,10 +51,10 @@ startsWith.autoRemove = (val: any) => !val;
 const endsWith = <TData extends Record<string, any>>(
   row: Row<TData>,
   id: string,
-  filterValue: string | number,
+  filterValue: number | string,
 ) =>
   row
-    .getValue<string | number>(id)
+    .getValue<number | string>(id)
     .toString()
     .toLowerCase()
     .trim()
@@ -65,9 +65,9 @@ endsWith.autoRemove = (val: any) => !val;
 const equals = <TData extends Record<string, any>>(
   row: Row<TData>,
   id: string,
-  filterValue: string | number,
+  filterValue: number | string,
 ) =>
-  row.getValue<string | number>(id).toString().toLowerCase().trim() ===
+  row.getValue<number | string>(id).toString().toLowerCase().trim() ===
   filterValue.toString().toLowerCase().trim();
 
 equals.autoRemove = (val: any) => !val;
@@ -75,9 +75,9 @@ equals.autoRemove = (val: any) => !val;
 const notEquals = <TData extends Record<string, any>>(
   row: Row<TData>,
   id: string,
-  filterValue: string | number,
+  filterValue: number | string,
 ) =>
-  row.getValue<string | number>(id).toString().toLowerCase().trim() !==
+  row.getValue<number | string>(id).toString().toLowerCase().trim() !==
   filterValue.toString().toLowerCase().trim();
 
 notEquals.autoRemove = (val: any) => !val;
@@ -85,11 +85,11 @@ notEquals.autoRemove = (val: any) => !val;
 const greaterThan = <TData extends Record<string, any>>(
   row: Row<TData>,
   id: string,
-  filterValue: string | number,
+  filterValue: number | string,
 ) =>
-  !isNaN(+filterValue) && !isNaN(+row.getValue<string | number>(id))
-    ? +row.getValue<string | number>(id) > +filterValue
-    : row.getValue<string | number>(id).toString().toLowerCase().trim() >
+  !isNaN(+filterValue) && !isNaN(+row.getValue<number | string>(id))
+    ? +row.getValue<number | string>(id) > +filterValue
+    : row.getValue<number | string>(id).toString().toLowerCase().trim() >
       filterValue.toString().toLowerCase().trim();
 
 greaterThan.autoRemove = (val: any) => !val;
@@ -97,7 +97,7 @@ greaterThan.autoRemove = (val: any) => !val;
 const greaterThanOrEqualTo = <TData extends Record<string, any>>(
   row: Row<TData>,
   id: string,
-  filterValue: string | number,
+  filterValue: number | string,
 ) => equals(row, id, filterValue) || greaterThan(row, id, filterValue);
 
 greaterThanOrEqualTo.autoRemove = (val: any) => !val;
@@ -105,11 +105,11 @@ greaterThanOrEqualTo.autoRemove = (val: any) => !val;
 const lessThan = <TData extends Record<string, any>>(
   row: Row<TData>,
   id: string,
-  filterValue: string | number,
+  filterValue: number | string,
 ) =>
-  !isNaN(+filterValue) && !isNaN(+row.getValue<string | number>(id))
-    ? +row.getValue<string | number>(id) < +filterValue
-    : row.getValue<string | number>(id).toString().toLowerCase().trim() <
+  !isNaN(+filterValue) && !isNaN(+row.getValue<number | string>(id))
+    ? +row.getValue<number | string>(id) < +filterValue
+    : row.getValue<number | string>(id).toString().toLowerCase().trim() <
       filterValue.toString().toLowerCase().trim();
 
 lessThan.autoRemove = (val: any) => !val;
@@ -117,7 +117,7 @@ lessThan.autoRemove = (val: any) => !val;
 const lessThanOrEqualTo = <TData extends Record<string, any>>(
   row: Row<TData>,
   id: string,
-  filterValue: string | number,
+  filterValue: number | string,
 ) => equals(row, id, filterValue) || lessThan(row, id, filterValue);
 
 lessThanOrEqualTo.autoRemove = (val: any) => !val;
@@ -125,7 +125,7 @@ lessThanOrEqualTo.autoRemove = (val: any) => !val;
 const between = <TData extends Record<string, any>>(
   row: Row<TData>,
   id: string,
-  filterValues: [string | number, string | number],
+  filterValues: [number | string, number | string],
 ) =>
   ((['', undefined] as any[]).includes(filterValues[0]) ||
     greaterThan(row, id, filterValues[0])) &&
@@ -140,7 +140,7 @@ between.autoRemove = (val: any) => !val;
 const betweenInclusive = <TData extends Record<string, any>>(
   row: Row<TData>,
   id: string,
-  filterValues: [string | number, string | number],
+  filterValues: [number | string, number | string],
 ) =>
   ((['', undefined] as any[]).includes(filterValues[0]) ||
     greaterThanOrEqualTo(row, id, filterValues[0])) &&
@@ -155,16 +155,16 @@ betweenInclusive.autoRemove = (val: any) => !val;
 const empty = <TData extends Record<string, any>>(
   row: Row<TData>,
   id: string,
-  _filterValue: string | number,
-) => !row.getValue<string | number>(id).toString().trim();
+  _filterValue: number | string,
+) => !row.getValue<number | string>(id).toString().trim();
 
 empty.autoRemove = (val: any) => !val;
 
 const notEmpty = <TData extends Record<string, any>>(
   row: Row<TData>,
   id: string,
-  _filterValue: string | number,
-) => !!row.getValue<string | number>(id).toString().trim();
+  _filterValue: number | string,
+) => !!row.getValue<number | string>(id).toString().trim();
 
 notEmpty.autoRemove = (val: any) => !val;
 

package/src/footer/MRT_TableFooter.tsx

@@ -1,8 +1,8 @@
+import { type VirtualItem } from '@tanstack/react-virtual';
 import TableFooter from '@mui/material/TableFooter';
 import { MRT_TableFooterRow } from './MRT_TableFooterRow';
-import { type VirtualItem } from '@tanstack/react-virtual';
-import { type MRT_TableInstance } from '../types';
 import { parseFromValuesOrFunc } from '../column.utils';
+import { type MRT_TableInstance } from '../types';
 
 interface Props<TData extends Record<string, any>> {
   table: MRT_TableInstance<TData>;
@@ -35,6 +35,13 @@ export const MRT_TableFooter = <TData extends Record<string, any>>({
   return (
     <TableFooter
       {...tableFooterProps}
+      ref={(ref: HTMLTableSectionElement) => {
+        tableFooterRef.current = ref;
+        if (tableFooterProps?.ref) {
+          // @ts-ignore
+          tableFooterProps.ref.current = ref;
+        }
+      }}
       sx={(theme) => ({
         bottom: stickFooter ? 0 : undefined,
         display: layoutMode === 'grid' ? 'grid' : 'table-row-group',
@@ -48,13 +55,6 @@ export const MRT_TableFooter = <TData extends Record<string, any>>({
         zIndex: stickFooter ? 1 : undefined,
         ...(parseFromValuesOrFunc(tableFooterProps?.sx, theme) as any),
       })}
-      ref={(ref: HTMLTableSectionElement) => {
-        tableFooterRef.current = ref;
-        if (tableFooterProps?.ref) {
-          // @ts-ignore
-          tableFooterProps.ref.current = ref;
-        }
-      }}
     >
       {getFooterGroups().map((footerGroup) => (
         <MRT_TableFooterRow

package/src/footer/MRT_TableFooterCell.tsx

@@ -49,8 +49,8 @@ export const MRT_TableFooterCell = <TData extends Record<string, any>>({
         ...getCommonCellStyles({
           column,
           table,
-          theme,
           tableCellProps,
+          theme,
         }),
       })}
     >

package/src/footer/MRT_TableFooterRow.tsx

@@ -1,13 +1,13 @@
+import { type VirtualItem } from '@tanstack/react-virtual';
 import TableRow from '@mui/material/TableRow';
 import { lighten } from '@mui/material/styles';
 import { MRT_TableFooterCell } from './MRT_TableFooterCell';
-import { type VirtualItem } from '@tanstack/react-virtual';
+import { parseFromValuesOrFunc } from '../column.utils';
 import {
   type MRT_Header,
   type MRT_HeaderGroup,
   type MRT_TableInstance,
 } from '../types';
-import { parseFromValuesOrFunc } from '../column.utils';
 
 interface Props<TData extends Record<string, any>> {
   footerGroup: MRT_HeaderGroup<TData>;

package/src/head/MRT_TableHead.tsx

@@ -1,8 +1,8 @@
+import { type VirtualItem } from '@tanstack/react-virtual';
 import TableHead from '@mui/material/TableHead';
 import { MRT_TableHeadRow } from './MRT_TableHeadRow';
-import { type VirtualItem } from '@tanstack/react-virtual';
-import { type MRT_TableInstance } from '../types';
 import { parseFromValuesOrFunc } from '../column.utils';
+import { type MRT_TableInstance } from '../types';
 
 interface Props<TData extends Record<string, any>> {
   table: MRT_TableInstance<TData>;
@@ -32,6 +32,13 @@ export const MRT_TableHead = <TData extends Record<string, any>>({
   return (
     <TableHead
       {...tableHeadProps}
+      ref={(ref: HTMLTableSectionElement) => {
+        tableHeadRef.current = ref;
+        if (tableHeadProps?.ref) {
+          // @ts-ignore
+          tableHeadProps.ref.current = ref;
+        }
+      }}
       sx={(theme) => ({
         display: layoutMode === 'grid' ? 'grid' : 'table-row-group',
         opacity: 0.97,
@@ -40,13 +47,6 @@ export const MRT_TableHead = <TData extends Record<string, any>>({
         zIndex: stickyHeader ? 2 : undefined,
         ...(parseFromValuesOrFunc(tableHeadProps?.sx, theme) as any),
       })}
-      ref={(ref: HTMLTableSectionElement) => {
-        tableHeadRef.current = ref;
-        if (tableHeadProps?.ref) {
-          // @ts-ignore
-          tableHeadProps.ref.current = ref;
-        }
-      }}
     >
       {getHeaderGroups().map((headerGroup) => (
         <MRT_TableHeadRow

package/src/head/MRT_TableHeadCell.tsx

@@ -2,6 +2,7 @@ import { type DragEvent, useMemo } from 'react';
 import Box from '@mui/material/Box';
 import TableCell from '@mui/material/TableCell';
 import { useTheme } from '@mui/material/styles';
+import { type Theme } from '@mui/material/styles';
 import { MRT_TableHeadCellColumnActionsButton } from './MRT_TableHeadCellColumnActionsButton';
 import { MRT_TableHeadCellFilterContainer } from './MRT_TableHeadCellFilterContainer';
 import { MRT_TableHeadCellFilterLabel } from './MRT_TableHeadCellFilterLabel';
@@ -9,7 +10,6 @@ import { MRT_TableHeadCellGrabHandle } from './MRT_TableHeadCellGrabHandle';
 import { MRT_TableHeadCellResizeHandle } from './MRT_TableHeadCellResizeHandle';
 import { MRT_TableHeadCellSortLabel } from './MRT_TableHeadCellSortLabel';
 import { getCommonCellStyles } from '../column.utils';
-import { type Theme } from '@mui/material/styles';
 import { parseFromValuesOrFunc } from '../column.utils';
 import { type MRT_Header, type MRT_TableInstance } from '../types';
 
@@ -26,6 +26,7 @@ export const MRT_TableHeadCell = <TData extends Record<string, any>>({
   const {
     getState,
     options: {
+      columnFilterDisplayMode,
       enableColumnActions,
       enableColumnDragging,
       enableColumnOrdering,
@@ -50,7 +51,10 @@ export const MRT_TableHeadCell = <TData extends Record<string, any>>({
 
   const tableCellProps = {
     ...parseFromValuesOrFunc(muiTableHeadCellProps, { column, table }),
-    ...parseFromValuesOrFunc(columnDef.muiTableHeadCellProps, { column, table }),
+    ...parseFromValuesOrFunc(columnDef.muiTableHeadCellProps, {
+      column,
+      table,
+    }),
   };
 
   const showColumnActions =
@@ -205,14 +209,14 @@ export const MRT_TableHeadCell = <TData extends Record<string, any>>({
             <Box
               className="Mui-TableHeadCell-Content-Wrapper"
               sx={{
+                '&:hover': {
+                  textOverflow: 'clip',
+                },
                 minWidth: `${Math.min(columnDef.header?.length ?? 0, 5)}ch`,
                 overflow: columnDefType === 'data' ? 'hidden' : undefined,
                 textOverflow: 'ellipsis',
                 whiteSpace:
                   (columnDef.header?.length ?? 0) < 20 ? 'nowrap' : 'normal',
-                '&:hover': {
-                  textOverflow: 'clip',
-                },
               }}
               title={columnDefType === 'data' ? columnDef.header : undefined}
             >
@@ -256,7 +260,7 @@ export const MRT_TableHeadCell = <TData extends Record<string, any>>({
           )}
         </Box>
       )}
-      {column.getCanFilter() && (
+      {columnFilterDisplayMode === 'subheader' && column.getCanFilter() && (
         <MRT_TableHeadCellFilterContainer header={header} table={table} />
       )}
     </TableCell>

package/src/head/MRT_TableHeadCellColumnActionsButton.tsx

@@ -1,8 +1,8 @@
 import { type MouseEvent, useState } from 'react';
 import IconButton from '@mui/material/IconButton';
 import Tooltip from '@mui/material/Tooltip';
-import { MRT_ColumnActionMenu } from '../menus/MRT_ColumnActionMenu';
 import { parseFromValuesOrFunc } from '../column.utils';
+import { MRT_ColumnActionMenu } from '../menus/MRT_ColumnActionMenu';
 import { type MRT_Header, type MRT_TableInstance } from '../types';
 
 interface Props<TData extends Record<string, any>> {
@@ -18,6 +18,7 @@ export const MRT_TableHeadCellColumnActionsButton = <
 }: Props<TData>) => {
   const {
     options: {
+      columnFilterDisplayMode,
       icons: { MoreVertIcon },
       localization,
       muiColumnActionsButtonProps,
@@ -26,7 +27,7 @@ export const MRT_TableHeadCellColumnActionsButton = <
   const { column } = header;
   const { columnDef } = column;
 
-  const [anchorEl, setAnchorEl] = useState<null | HTMLElement>(null);
+  const [anchorEl, setAnchorEl] = useState<HTMLElement | null>(null);
 
   const handleClick = (event: MouseEvent<HTMLElement>) => {
     event.stopPropagation();
@@ -60,15 +61,17 @@ export const MRT_TableHeadCellColumnActionsButton = <
           size="small"
           {...iconButtonProps}
           sx={(theme) => ({
+            '&:hover': {
+              opacity: 1,
+            },
             height: '2rem',
             m: '-8px -4px',
             opacity: 0.5,
-            transform: 'scale(0.85) translateX(-4px)',
+            transform: `scale(0.85) ${
+              columnFilterDisplayMode !== 'popover' ? 'translateX(-4px)' : ''
+            }`,
             transition: 'opacity 150ms',
             width: '2rem',
-            '&:hover': {
-              opacity: 1,
-            },
             ...(parseFromValuesOrFunc(iconButtonProps?.sx, theme) as any),
           })}
           title={undefined}

package/src/head/MRT_TableHeadCellFilterContainer.tsx

@@ -1,8 +1,8 @@
 import Collapse from '@mui/material/Collapse';
-import { MRT_FilterRangeFields } from '../inputs/MRT_FilterRangeFields';
-import { MRT_FilterTextField } from '../inputs/MRT_FilterTextField';
 import { MRT_FilterCheckbox } from '../inputs/MRT_FilterCheckbox';
+import { MRT_FilterRangeFields } from '../inputs/MRT_FilterRangeFields';
 import { MRT_FilterRangeSlider } from '../inputs/MRT_FilterRangeSlider';
+import { MRT_FilterTextField } from '../inputs/MRT_FilterTextField';
 import { type MRT_Header, type MRT_TableInstance } from '../types';
 
 interface Props<TData extends Record<string, any>> {
@@ -16,13 +16,20 @@ export const MRT_TableHeadCellFilterContainer = <
   header,
   table,
 }: Props<TData>) => {
-  const { getState } = table;
+  const {
+    getState,
+    options: { columnFilterDisplayMode },
+  } = table;
   const { showColumnFilters } = getState();
   const { column } = header;
   const { columnDef } = column;
 
   return (
-    <Collapse in={showColumnFilters} mountOnEnter unmountOnExit>
+    <Collapse
+      in={showColumnFilters || columnFilterDisplayMode === 'popover'}
+      mountOnEnter
+      unmountOnExit
+    >
       {columnDef.filterVariant === 'checkbox' ? (
         <MRT_FilterCheckbox column={column} table={table} />
       ) : columnDef.filterVariant === 'range-slider' ? (