material-react-table 0.25.0 → 0.26.2

package/dist/table/MRT_TableRoot.d.ts

@@ -1,3 +1,3 @@
 /// <reference types="react" />
-import { MaterialReactTableProps } from '../MaterialReactTable';
+import type { MaterialReactTableProps } from '..';
 export declare const MRT_TableRoot: <TData extends Record<string, any> = {}>(props: MaterialReactTableProps<TData>) => JSX.Element;

package/package.json

@@ -1,5 +1,5 @@
 {
-  "version": "0.25.0",
+  "version": "0.26.2",
   "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.",

package/src/body/MRT_TableBodyCell.tsx

@@ -224,7 +224,9 @@ export const MRT_TableBodyCell: FC<Props> = ({
                 : `${darken(theme.palette.background.default, 0.07)} !important`
               : undefined,
         },
-        ...(tableCellProps?.sx as any),
+        ...(tableCellProps?.sx instanceof Function
+          ? tableCellProps.sx(theme)
+          : (tableCellProps?.sx as any)),
         ...draggingBorders,
         maxWidth: `min(${column.getSize()}px, fit-content)`,
         minWidth: `max(${column.getSize()}px, ${columnDef.minSize ?? 30}px)`,

package/src/body/MRT_TableBodyRow.tsx

@@ -70,7 +70,9 @@ export const MRT_TableBodyRow: FC<Props> = ({ row, rowIndex, table }) => {
                   : `${darken(theme.palette.background.default, 0.05)}`
                 : undefined,
           },
-          ...(tableRowProps?.sx as any),
+          ...(tableRowProps?.sx instanceof Function
+            ? tableRowProps.sx(theme)
+            : (tableRowProps?.sx as any)),
           ...draggingBorders,
         })}
       >

package/src/body/MRT_TableDetailPanel.tsx

@@ -32,14 +32,16 @@ export const MRT_TableDetailPanel: FC<Props> = ({ row, table }) => {
       <TableCell
         colSpan={getVisibleLeafColumns().length}
         {...tableCellProps}
-        sx={{
+        sx={(theme) => ({
           borderBottom: !row.getIsExpanded() ? 'none' : undefined,
           pb: row.getIsExpanded() ? '1rem' : 0,
           pt: row.getIsExpanded() ? '1rem' : 0,
           transition: 'all 0.2s ease-in-out',
           width: `${table.getTotalSize()}px`,
-          ...tableCellProps?.sx,
-        }}
+          ...(tableCellProps?.sx instanceof Function
+            ? tableCellProps.sx(theme)
+            : (tableCellProps?.sx as any)),
+        })}
       >
         {renderDetailPanel && (
           <Collapse in={row.getIsExpanded()}>

package/src/buttons/MRT_CopyButton.tsx

@@ -55,7 +55,7 @@ export const MRT_CopyButton: FC<Props> = ({ cell, children, table }) => {
         type="button"
         variant="text"
         {...buttonProps}
-        sx={{
+        sx={(theme) => ({
           backgroundColor: 'transparent',
           border: 'none',
           color: 'inherit',
@@ -67,8 +67,10 @@ export const MRT_CopyButton: FC<Props> = ({ cell, children, table }) => {
           minWidth: 'unset',
           textAlign: 'inherit',
           textTransform: 'inherit',
-          ...buttonProps?.sx,
-        }}
+          ...(buttonProps?.sx instanceof Function
+            ? buttonProps.sx(theme)
+            : (buttonProps?.sx as any)),
+        })}
       >
         {children}
       </Button>

package/src/buttons/MRT_ExpandButton.tsx

@@ -41,11 +41,13 @@ export const MRT_ExpandButton: FC<Props> = ({ row, table }) => {
           disabled={!row.getCanExpand() && !renderDetailPanel}
           onClick={handleToggleExpand}
           {...iconButtonProps}
-          sx={{
+          sx={(theme) => ({
             height: density === 'compact' ? '1.75rem' : '2.25rem',
             width: density === 'compact' ? '1.75rem' : '2.25rem',
-            ...iconButtonProps?.sx,
-          }}
+            ...(iconButtonProps?.sx instanceof Function
+              ? iconButtonProps.sx(theme)
+              : (iconButtonProps?.sx as any)),
+          })}
         >
           <ExpandMoreIcon
             style={{

package/src/filtersFns.ts

@@ -1,7 +1,7 @@
 import { rankItem, rankings, RankingInfo } from '@tanstack/match-sorter-utils';
 import { filterFns, Row } from '@tanstack/react-table';
 
-export const fuzzy = <TData extends Record<string, any> = {}>(
+const fuzzy = <TData extends Record<string, any> = {}>(
   row: Row<TData>,
   columnId: string,
   filterValue: string | number,
@@ -16,7 +16,7 @@ export const fuzzy = <TData extends Record<string, any> = {}>(
 
 fuzzy.autoRemove = (val: any) => !val;
 
-export const contains = <TData extends Record<string, any> = {}>(
+const contains = <TData extends Record<string, any> = {}>(
   row: Row<TData>,
   id: string,
   filterValue: string | number,
@@ -30,7 +30,7 @@ export const contains = <TData extends Record<string, any> = {}>(
 
 contains.autoRemove = (val: any) => !val;
 
-export const startsWith = <TData extends Record<string, any> = {}>(
+const startsWith = <TData extends Record<string, any> = {}>(
   row: Row<TData>,
   id: string,
   filterValue: string | number,
@@ -44,7 +44,7 @@ export const startsWith = <TData extends Record<string, any> = {}>(
 
 startsWith.autoRemove = (val: any) => !val;
 
-export const endsWith = <TData extends Record<string, any> = {}>(
+const endsWith = <TData extends Record<string, any> = {}>(
   row: Row<TData>,
   id: string,
   filterValue: string | number,
@@ -58,7 +58,7 @@ export const endsWith = <TData extends Record<string, any> = {}>(
 
 endsWith.autoRemove = (val: any) => !val;
 
-export const equals = <TData extends Record<string, any> = {}>(
+const equals = <TData extends Record<string, any> = {}>(
   row: Row<TData>,
   id: string,
   filterValue: string | number,
@@ -68,7 +68,7 @@ export const equals = <TData extends Record<string, any> = {}>(
 
 equals.autoRemove = (val: any) => !val;
 
-export const notEquals = <TData extends Record<string, any> = {}>(
+const notEquals = <TData extends Record<string, any> = {}>(
   row: Row<TData>,
   id: string,
   filterValue: string | number,
@@ -78,31 +78,47 @@ export const notEquals = <TData extends Record<string, any> = {}>(
 
 notEquals.autoRemove = (val: any) => !val;
 
-export const greaterThan = <TData extends Record<string, any> = {}>(
+const greaterThan = <TData extends Record<string, any> = {}>(
   row: Row<TData>,
   id: string,
   filterValue: string | number,
 ) =>
   !isNaN(+filterValue) && !isNaN(+row.getValue<string | number>(id))
-    ? +row.getValue<string | number>(id) >= +filterValue
+    ? +row.getValue<string | number>(id) > +filterValue
     : row.getValue<string | number>(id).toString().toLowerCase().trim() >
       filterValue.toString().toLowerCase().trim();
 
 greaterThan.autoRemove = (val: any) => !val;
 
-export const lessThan = <TData extends Record<string, any> = {}>(
+const greaterThanOrEqualTo = <TData extends Record<string, any> = {}>(
+  row: Row<TData>,
+  id: string,
+  filterValue: string | number,
+) => equals(row, id, filterValue) || greaterThan(row, id, filterValue);
+
+greaterThanOrEqualTo.autoRemove = (val: any) => !val;
+
+const lessThan = <TData extends Record<string, any> = {}>(
   row: Row<TData>,
   id: string,
   filterValue: string | number,
 ) =>
   !isNaN(+filterValue) && !isNaN(+row.getValue<string | number>(id))
-    ? +row.getValue<string | number>(id) <= +filterValue
+    ? +row.getValue<string | number>(id) < +filterValue
     : row.getValue<string | number>(id).toString().toLowerCase().trim() <
       filterValue.toString().toLowerCase().trim();
 
 lessThan.autoRemove = (val: any) => !val;
 
-export const between = <TData extends Record<string, any> = {}>(
+const lessThanOrEqualTo = <TData extends Record<string, any> = {}>(
+  row: Row<TData>,
+  id: string,
+  filterValue: string | number,
+) => equals(row, id, filterValue) || lessThan(row, id, filterValue);
+
+lessThanOrEqualTo.autoRemove = (val: any) => !val;
+
+const between = <TData extends Record<string, any> = {}>(
   row: Row<TData>,
   id: string,
   filterValues: [string | number, string | number],
@@ -117,7 +133,22 @@ export const between = <TData extends Record<string, any> = {}>(
 
 between.autoRemove = (val: any) => !val;
 
-export const empty = <TData extends Record<string, any> = {}>(
+const betweenInclusive = <TData extends Record<string, any> = {}>(
+  row: Row<TData>,
+  id: string,
+  filterValues: [string | number, string | number],
+) =>
+  ((['', undefined] as any[]).includes(filterValues[0]) ||
+    greaterThanOrEqualTo(row, id, filterValues[0])) &&
+  ((!isNaN(+filterValues[0]) &&
+    !isNaN(+filterValues[1]) &&
+    +filterValues[0] > +filterValues[1]) ||
+    (['', undefined] as any[]).includes(filterValues[1]) ||
+    lessThanOrEqualTo(row, id, filterValues[1]));
+
+betweenInclusive.autoRemove = (val: any) => !val;
+
+const empty = <TData extends Record<string, any> = {}>(
   row: Row<TData>,
   id: string,
   _filterValue: string | number,
@@ -125,7 +156,7 @@ export const empty = <TData extends Record<string, any> = {}>(
 
 empty.autoRemove = (val: any) => !val;
 
-export const notEmpty = <TData extends Record<string, any> = {}>(
+const notEmpty = <TData extends Record<string, any> = {}>(
   row: Row<TData>,
   id: string,
   _filterValue: string | number,
@@ -136,13 +167,16 @@ notEmpty.autoRemove = (val: any) => !val;
 export const MRT_FilterFns = {
   ...filterFns,
   between,
+  betweenInclusive,
   contains,
   empty,
   endsWith,
   equals,
   fuzzy,
   greaterThan,
+  greaterThanOrEqualTo,
   lessThan,
+  lessThanOrEqualTo,
   notEmpty,
   notEquals,
   startsWith,

package/src/footer/MRT_TableFooterCell.tsx

@@ -56,7 +56,9 @@ export const MRT_TableFooterCell: FC<Props> = ({ footer, table }) => {
         transition: `all ${enableColumnResizing ? '10ms' : '0.2s'} ease-in-out`,
         width: column.getSize(),
         verticalAlign: 'text-top',
-        ...(tableCellProps?.sx as any),
+        ...(tableCellProps?.sx instanceof Function
+          ? tableCellProps.sx(theme)
+          : (tableCellProps?.sx as any)),
       })}
     >
       <>

package/src/head/MRT_TableHeadCell.tsx

@@ -162,7 +162,9 @@ export const MRT_TableHeadCell: FC<Props> = ({ header, table }) => {
             : column.getIsPinned() && columnDefType !== 'group'
             ? 2
             : 1,
-        ...(tableCellProps?.sx as any),
+        ...(tableCellProps?.sx instanceof Function
+          ? tableCellProps.sx(theme)
+          : (tableCellProps?.sx as any)),
         ...draggingBorders,
         maxWidth: `min(${column.getSize()}px, fit-content)`,
         minWidth: `max(${column.getSize()}px, ${columnDef.minSize ?? 30}px)`,
@@ -190,6 +192,8 @@ export const MRT_TableHeadCell: FC<Props> = ({ header, table }) => {
                   : undefined,
               display: 'flex',
               flexWrap: 'nowrap',
+              m: tableCellProps?.align === 'center' ? 'auto' : undefined,
+              pl: tableCellProps?.align === 'center' ? '1rem' : undefined,
               whiteSpace:
                 (columnDef.header?.length ?? 0) < 24 ? 'nowrap' : 'normal',
             }}

package/src/head/MRT_TableHeadCellColumnActionsButton.tsx

@@ -62,7 +62,7 @@ export const MRT_TableHeadCellColumnActionsButton: FC<Props> = ({
           onClick={handleClick}
           size="small"
           {...iconButtonProps}
-          sx={{
+          sx={(theme) => ({
             height: '2rem',
             mt: '-0.2rem',
             opacity: 0.5,
@@ -71,8 +71,10 @@ export const MRT_TableHeadCellColumnActionsButton: FC<Props> = ({
             '&:hover': {
               opacity: 1,
             },
-            ...iconButtonProps.sx,
-          }}
+            ...(iconButtonProps?.sx instanceof Function
+              ? iconButtonProps.sx(theme)
+              : (iconButtonProps?.sx as any)),
+          })}
         >
           <MoreVertIcon />
         </IconButton>

package/src/head/MRT_TableHeadCellGrabHandle.tsx

@@ -1,6 +1,6 @@
 import React, { DragEvent, FC, RefObject } from 'react';
 import { MRT_GrabHandleButton } from '../buttons/MRT_GrabHandleButton';
-import { reorderColumn } from '../utils';
+import { reorderColumn } from '../column.utils';
 import type { MRT_Column, MRT_TableInstance } from '..';
 
 interface Props {

package/src/inputs/MRT_FilterTextField.tsx

@@ -73,7 +73,10 @@ export const MRT_FilterTextField: FC<Props> = ({
 
   const handleChangeDebounced = useCallback(
     debounce((event: ChangeEvent<HTMLInputElement>) => {
-      let value = textFieldProps.type === 'date' ? new Date(event.target.value) : event.target.value
+      let value =
+        textFieldProps.type === 'date'
+          ? new Date(event.target.value)
+          : event.target.value;
       if (inputIndex !== undefined) {
         column.setFilterValue((old: [string, string | Date]) => {
           const newFilterValues = old ?? ['', ''];
@@ -256,7 +259,7 @@ export const MRT_FilterTextField: FC<Props> = ({
           ),
         }}
         {...textFieldProps}
-        sx={{
+        sx={(theme) => ({
           m: '-0.25rem',
           p: 0,
           minWidth: !filterChipLabel ? '8rem' : 'auto',
@@ -264,8 +267,10 @@ export const MRT_FilterTextField: FC<Props> = ({
           '&	.MuiSelect-icon': {
             mr: '1.5rem',
           },
-          ...textFieldProps?.sx,
-        }}
+          ...(textFieldProps?.sx instanceof Function
+            ? textFieldProps.sx(theme)
+            : (textFieldProps?.sx as any)),
+        })}
       >
         {isSelectFilter && (
           <MenuItem divider disabled={!filterValue} value="">

package/src/inputs/MRT_SelectCheckbox.tsx

@@ -58,12 +58,14 @@ export const MRT_SelectCheckbox: FC<Props> = ({ row, selectAll, table }) => {
         }
         size={density === 'compact' ? 'small' : 'medium'}
         {...checkboxProps}
-        sx={{
+        sx={(theme) => ({
           height: density === 'compact' ? '1.5rem' : '2rem',
           width: density === 'compact' ? '1.5rem' : '2rem',
           m: '-1re.m',
-          ...checkboxProps?.sx,
-        }}
+          ...(checkboxProps?.sx instanceof Function
+            ? checkboxProps.sx(theme)
+            : (checkboxProps?.sx as any)),
+        })}
       />
     </Tooltip>
   );

package/src/localization.ts

@@ -14,6 +14,7 @@ export interface MRT_Localization {
   expand: string;
   expandAll: string;
   filterBetween: string;
+  filterBetweenInclusive: string;
   filterByColumn: string;
   filterContains: string;
   filterEmpty: string;
@@ -21,7 +22,9 @@ export interface MRT_Localization {
   filterEquals: string;
   filterFuzzy: string;
   filterGreaterThan: string;
+  filterGreaterThanOrEqualTo: string;
   filterLessThan: string;
+  filterLessThanOrEqualTo: string;
   filterMode: string;
   filterNotEmpty: string;
   filterNotEquals: string;
@@ -83,6 +86,7 @@ export const MRT_DefaultLocalization_EN: MRT_Localization = {
   expand: 'Expand',
   expandAll: 'Expand all',
   filterBetween: 'Between',
+  filterBetweenInclusive: 'Between Inclusive',
   filterByColumn: 'Filter by {column}',
   filterContains: 'Contains',
   filterEmpty: 'Empty',
@@ -90,7 +94,9 @@ export const MRT_DefaultLocalization_EN: MRT_Localization = {
   filterEquals: 'Equals',
   filterFuzzy: 'Fuzzy',
   filterGreaterThan: 'Greater Than',
+  filterGreaterThanOrEqualTo: 'Greater Than Or Equal To',
   filterLessThan: 'Less Than',
+  filterLessThanOrEqualTo: 'Less Than Or Equal To',
   filterMode: 'Filter Mode: {filterType}',
   filterNotEmpty: 'Not Empty',
   filterNotEquals: 'Not Equals',

package/src/menus/MRT_FilterOptionMenu.tsx

@@ -1,13 +1,7 @@
 import React, { FC, useMemo } from 'react';
-import { Menu, MenuItem } from '@mui/material';
+import { Box, Menu, MenuItem } from '@mui/material';
 import type { MRT_FilterOption, MRT_Header, MRT_TableInstance } from '..';
 
-const commonMenuItemStyles = {
-  py: '6px',
-  my: 0,
-  alignItems: 'center',
-};
-
 interface Props {
   anchorEl: HTMLElement | null;
   header?: MRT_Header;
@@ -42,75 +36,107 @@ export const MRT_FilterOptionMenu: FC<Props> = ({
 
   const filterOptions = useMemo(
     () =>
-      [
-        {
-          option: 'fuzzy',
-          label: localization.filterFuzzy,
-          divider: false,
-        },
-        {
-          option: 'contains',
-          label: localization.filterContains,
-          divider: false,
-        },
-        {
-          option: 'startsWith',
-          label: localization.filterStartsWith,
-          divider: false,
-        },
-        {
-          option: 'endsWith',
-          label: localization.filterEndsWith,
-          divider: true,
-        },
-        {
-          option: 'equals',
-          label: localization.filterEquals,
-          divider: false,
-        },
-        {
-          option: 'notEquals',
-          label: localization.filterNotEquals,
-          divider: true,
-        },
-        {
-          option: 'between',
-          label: localization.filterBetween,
-          divider: false,
-        },
-        {
-          option: 'greaterThan',
-          label: localization.filterGreaterThan,
-          divider: false,
-        },
-        {
-          option: 'lessThan',
-          label: localization.filterLessThan,
-          divider: true,
-        },
-        {
-          option: 'empty',
-          label: localization.filterEmpty,
-          divider: false,
-        },
-        {
-          option: 'notEmpty',
-          label: localization.filterNotEmpty,
-          divider: false,
-        },
-      ].filter((filterType) =>
+      (
+        [
+          {
+            option: 'fuzzy',
+            symbol: '≈',
+            label: localization.filterFuzzy,
+            divider: false,
+          },
+          {
+            option: 'contains',
+            symbol: '*',
+            label: localization.filterContains,
+            divider: false,
+          },
+          {
+            option: 'startsWith',
+            symbol: 'a',
+            label: localization.filterStartsWith,
+            divider: false,
+          },
+          {
+            option: 'endsWith',
+            symbol: 'z',
+            label: localization.filterEndsWith,
+            divider: true,
+          },
+          {
+            option: 'equals',
+            symbol: '=',
+            label: localization.filterEquals,
+            divider: false,
+          },
+          {
+            option: 'notEquals',
+            symbol: '≠',
+            label: localization.filterNotEquals,
+            divider: true,
+          },
+          {
+            option: 'between',
+            symbol: '⇿',
+            label: localization.filterBetween,
+            divider: false,
+          },
+          {
+            option: 'betweenInclusive',
+            symbol: '⬌',
+            label: localization.filterBetweenInclusive,
+            divider: true,
+          },
+          {
+            option: 'greaterThan',
+            symbol: '>',
+            label: localization.filterGreaterThan,
+            divider: false,
+          },
+          {
+            option: 'greaterThanOrEqualTo',
+            symbol: '≥',
+            label: localization.filterGreaterThanOrEqualTo,
+            divider: false,
+          },
+          {
+            option: 'lessThan',
+            symbol: '<',
+            label: localization.filterLessThan,
+            divider: false,
+          },
+          {
+            option: 'lessThanOrEqualTo',
+            symbol: '≤',
+            label: localization.filterLessThanOrEqualTo,
+            divider: true,
+          },
+          {
+            option: 'empty',
+            symbol: '∅',
+            label: localization.filterEmpty,
+            divider: false,
+          },
+          {
+            option: 'notEmpty',
+            symbol: '!∅',
+            label: localization.filterNotEmpty,
+            divider: false,
+          },
+        ] as Array<{
+          divider: boolean;
+          fn: Function;
+          label: string;
+          option: MRT_FilterOption;
+          symbol?: string;
+        }>
+      ).filter((filterType) =>
         columnDef
           ? allowedColumnFilterOptions === undefined ||
             allowedColumnFilterOptions?.includes(filterType.option)
           : (!enabledGlobalFilterOptions ||
               enabledGlobalFilterOptions.includes(filterType.option)) &&
             ['fuzzy', 'contains'].includes(filterType.option),
-      ) as Array<{
-        option: MRT_FilterOption;
-        label: string;
-        divider: boolean;
-        fn: Function;
-      }>,
+      ),
     [],
   );
 
@@ -148,15 +174,22 @@ export const MRT_FilterOptionMenu: FC<Props> = ({
         dense: density === 'compact',
       }}
     >
-      {filterOptions.map(({ option, label, divider }, index) => (
+      {filterOptions.map(({ option, label, divider, symbol }, index) => (
         <MenuItem
           divider={divider}
           key={index}
           onClick={() => handleSelectFilterType(option)}
           selected={option === filterOption}
-          sx={commonMenuItemStyles}
+          sx={{
+            py: '6px',
+            my: 0,
+            alignItems: 'center',
+            display: 'flex',
+            gap: '2ch',
+          }}
           value={option}
         >
+          <Box sx={{ fontSize: '1.25rem', width: '2ch' }}>{symbol}</Box>
           {label}
         </MenuItem>
       ))}

package/src/menus/MRT_ShowHideColumnsMenu.tsx

@@ -2,7 +2,7 @@ import React, { FC, useMemo, useState } from 'react';
 import { Button, Menu, Divider, Box } from '@mui/material';
 import { MRT_ShowHideColumnsMenuItems } from './MRT_ShowHideColumnsMenuItems';
 import type { MRT_Column, MRT_TableInstance } from '..';
-import { getDefaultColumnOrderIds } from '../utils';
+import { getDefaultColumnOrderIds } from '../column.utils';
 
 interface Props {
   anchorEl: HTMLElement | null;

package/src/menus/MRT_ShowHideColumnsMenuItems.tsx

@@ -15,7 +15,7 @@ import {
 } from '@mui/material';
 import { MRT_ColumnPinningButtons } from '../buttons/MRT_ColumnPinningButtons';
 import { MRT_GrabHandleButton } from '../buttons/MRT_GrabHandleButton';
-import { reorderColumn } from '../utils';
+import { reorderColumn } from '../column.utils';
 import type { MRT_Column, MRT_TableInstance } from '..';
 
 interface Props {

package/src/table/MRT_Table.tsx

@@ -35,11 +35,13 @@ export const MRT_Table: FC<Props> = ({ tableContainerRef, table }) => {
         enableStickyHeader || enableRowVirtualization || isFullScreen
       }
       {...tableProps}
-      sx={{
+      sx={(theme) => ({
         tableLayout:
           enableColumnResizing || enableRowVirtualization ? 'fixed' : 'auto',
-        ...tableProps?.sx,
-      }}
+        ...(tableProps?.sx instanceof Function
+          ? tableProps.sx(theme)
+          : (tableProps?.sx as any)),
+      })}
     >
       {enableTableHead && <MRT_TableHead table={table} />}
       <MRT_TableBody tableContainerRef={tableContainerRef} table={table} />