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

package/src/inputs/MRT_FilterTextField.tsx

@@ -3,9 +3,9 @@ import {
   type MouseEvent,
   useCallback,
   useEffect,
+  useMemo,
   useRef,
   useState,
-  useMemo,
 } from 'react';
 import Box from '@mui/material/Box';
 import Checkbox from '@mui/material/Checkbox';
@@ -14,10 +14,11 @@ import IconButton from '@mui/material/IconButton';
 import InputAdornment from '@mui/material/InputAdornment';
 import MenuItem from '@mui/material/MenuItem';
 import TextField from '@mui/material/TextField';
+import { type TextFieldProps } from '@mui/material/TextField';
 import Tooltip from '@mui/material/Tooltip';
 import { debounce } from '@mui/material/utils';
+import { parseFromValuesOrFunc } from '../column.utils';
 import { MRT_FilterOptionMenu } from '../menus/MRT_FilterOptionMenu';
-import { type TextFieldProps } from '@mui/material/TextField';
 import { type MRT_Header, type MRT_TableInstance } from '../types';
 
 interface Props<TData extends Record<string, any>> {
@@ -33,9 +34,9 @@ export const MRT_FilterTextField = <TData extends Record<string, any>>({
 }: Props<TData>) => {
   const {
     options: {
-      enableColumnFilterModes,
       columnFilterModeOptions,
-      icons: { FilterListIcon, CloseIcon },
+      enableColumnFilterModes,
+      icons: { CloseIcon, FilterListIcon },
       localization,
       manualFiltering,
       muiFilterTextFieldProps,
@@ -46,28 +47,13 @@ export const MRT_FilterTextField = <TData extends Record<string, any>>({
   const { column } = header;
   const { columnDef } = column;
 
-  const mTableHeadCellFilterTextFieldProps =
-    muiFilterTextFieldProps instanceof Function
-      ? muiFilterTextFieldProps({
-          column,
-          table,
-          rangeFilterIndex,
-        })
-      : muiFilterTextFieldProps;
-
-  const mcTableHeadCellFilterTextFieldProps =
-    columnDef.muiFilterTextFieldProps instanceof Function
-      ? columnDef.muiFilterTextFieldProps({
-          column,
-          table,
-          rangeFilterIndex,
-        })
-      : columnDef.muiFilterTextFieldProps;
-
-  const textFieldProps = {
-    ...mTableHeadCellFilterTextFieldProps,
-    ...mcTableHeadCellFilterTextFieldProps,
-  } as TextFieldProps;
+  const textFieldProps: TextFieldProps = {
+    ...parseFromValuesOrFunc(muiFilterTextFieldProps, { column, table }),
+    ...parseFromValuesOrFunc(columnDef.muiFilterTextFieldProps, {
+      column,
+      table,
+    }),
+  };
 
   const isRangeFilter =
     columnDef.filterVariant === 'range' || rangeFilterIndex !== undefined;
@@ -121,7 +107,7 @@ export const MRT_FilterTextField = <TData extends Record<string, any>>({
     ],
   );
 
-  const [anchorEl, setAnchorEl] = useState<null | HTMLElement>(null);
+  const [anchorEl, setAnchorEl] = useState<HTMLElement | null>(null);
   const [filterValue, setFilterValue] = useState<string | string[]>(() =>
     isMultiSelectFilter
       ? (column.getFilterValue() as string[]) || []
@@ -142,7 +128,7 @@ export const MRT_FilterTextField = <TData extends Record<string, any>>({
             ? event.target.valueAsNumber
             : event.target.value;
         if (isRangeFilter) {
-          column.setFilterValue((old: Array<string | Date | number | null>) => {
+          column.setFilterValue((old: Array<Date | null | number | string>) => {
             const newFilterValues = old ?? ['', ''];
             newFilterValues[rangeFilterIndex as number] = value;
             return newFilterValues;
@@ -216,31 +202,6 @@ export const MRT_FilterTextField = <TData extends Record<string, any>>({
   return (
     <>
       <TextField
-        fullWidth
-        inputProps={{
-          disabled: !!filterChipLabel,
-          sx: {
-            textOverflow: 'ellipsis',
-            width: filterChipLabel ? 0 : undefined,
-          },
-          title: filterPlaceholder,
-        }}
-        helperText={
-          showChangeModeButton ? (
-            <label>
-              {localization.filterMode.replace(
-                '{filterType}',
-                // @ts-ignore
-                localization[
-                  `filter${
-                    currentFilterOption?.charAt(0)?.toUpperCase() +
-                    currentFilterOption?.slice(1)
-                  }`
-                ],
-              )}
-            </label>
-          ) : null
-        }
         FormHelperTextProps={{
           sx: {
             fontSize: '0.75rem',
@@ -248,40 +209,7 @@ export const MRT_FilterTextField = <TData extends Record<string, any>>({
             whiteSpace: 'nowrap',
           },
         }}
-        margin="none"
-        placeholder={
-          filterChipLabel || isSelectFilter || isMultiSelectFilter
-            ? undefined
-            : filterPlaceholder
-        }
-        onChange={handleChange}
-        onClick={(e: MouseEvent<HTMLInputElement>) => e.stopPropagation()}
-        select={isSelectFilter || isMultiSelectFilter}
-        value={filterValue ?? ''}
-        variant="standard"
         InputProps={{
-          startAdornment: showChangeModeButton ? (
-            <InputAdornment position="start">
-              <Tooltip arrow title={localization.changeFilterMode}>
-                <span>
-                  <IconButton
-                    aria-label={localization.changeFilterMode}
-                    onClick={handleFilterMenuOpen}
-                    size="small"
-                    sx={{ height: '1.75rem', width: '1.75rem' }}
-                  >
-                    <FilterListIcon />
-                  </IconButton>
-                </span>
-              </Tooltip>
-              {filterChipLabel && (
-                <Chip
-                  onDelete={handleClearEmptyFilterChip}
-                  label={filterChipLabel}
-                />
-              )}
-            </InputAdornment>
-          ) : null,
           endAdornment: !filterChipLabel && (
             <InputAdornment position="end">
               <Tooltip
@@ -306,6 +234,28 @@ export const MRT_FilterTextField = <TData extends Record<string, any>>({
               </Tooltip>
             </InputAdornment>
           ),
+          startAdornment: showChangeModeButton ? (
+            <InputAdornment position="start">
+              <Tooltip arrow title={localization.changeFilterMode}>
+                <span>
+                  <IconButton
+                    aria-label={localization.changeFilterMode}
+                    onClick={handleFilterMenuOpen}
+                    size="small"
+                    sx={{ height: '1.75rem', width: '1.75rem' }}
+                  >
+                    <FilterListIcon />
+                  </IconButton>
+                </span>
+              </Tooltip>
+              {filterChipLabel && (
+                <Chip
+                  label={filterChipLabel}
+                  onDelete={handleClearEmptyFilterChip}
+                />
+              )}
+            </InputAdornment>
+          ) : null,
         }}
         SelectProps={{
           displayEmpty: true,
@@ -338,6 +288,42 @@ export const MRT_FilterTextField = <TData extends Record<string, any>>({
                 )
             : undefined,
         }}
+        fullWidth
+        helperText={
+          showChangeModeButton ? (
+            <label>
+              {localization.filterMode.replace(
+                '{filterType}',
+                // @ts-ignore
+                localization[
+                  `filter${
+                    currentFilterOption?.charAt(0)?.toUpperCase() +
+                    currentFilterOption?.slice(1)
+                  }`
+                ],
+              )}
+            </label>
+          ) : null
+        }
+        inputProps={{
+          disabled: !!filterChipLabel,
+          sx: {
+            textOverflow: 'ellipsis',
+            width: filterChipLabel ? 0 : undefined,
+          },
+          title: filterPlaceholder,
+        }}
+        margin="none"
+        onChange={handleChange}
+        onClick={(e: MouseEvent<HTMLInputElement>) => e.stopPropagation()}
+        placeholder={
+          filterChipLabel || isSelectFilter || isMultiSelectFilter
+            ? undefined
+            : filterPlaceholder
+        }
+        select={isSelectFilter || isMultiSelectFilter}
+        value={filterValue ?? ''}
+        variant="standard"
         {...textFieldProps}
         inputRef={(inputRef) => {
           filterInputRefs.current[`${column.id}-${rangeFilterIndex ?? 0}`] =
@@ -347,30 +333,28 @@ export const MRT_FilterTextField = <TData extends Record<string, any>>({
           }
         }}
         sx={(theme) => ({
-          p: 0,
+          '& .MuiSelect-icon': {
+            mr: '1.5rem',
+          },
           minWidth: isRangeFilter
             ? '100px'
             : !filterChipLabel
             ? '120px'
             : 'auto',
-          width: 'calc(100% + 4px)',
           mx: '-2px',
-          '& .MuiSelect-icon': {
-            mr: '1.5rem',
-          },
-          ...(textFieldProps?.sx instanceof Function
-            ? textFieldProps.sx(theme)
-            : (textFieldProps?.sx as any)),
+          p: 0,
+          width: 'calc(100% + 4px)',
+          ...(parseFromValuesOrFunc(textFieldProps?.sx, theme) as any),
         })}
       >
         {(isSelectFilter || isMultiSelectFilter) && (
-          <MenuItem divider disabled hidden value="">
+          <MenuItem disabled divider hidden value="">
             <Box sx={{ opacity: 0.5 }}>{filterPlaceholder}</Box>
           </MenuItem>
         )}
         {textFieldProps.children ??
           filterSelectOptions?.map(
-            (option: string | { text: string; value: string }) => {
+            (option: { text: string; value: string } | string) => {
               if (!option) return '';
               let value: string;
               let text: string;
@@ -385,10 +369,10 @@ export const MRT_FilterTextField = <TData extends Record<string, any>>({
                 <MenuItem
                   key={value}
                   sx={{
-                    display: 'flex',
-                    m: 0,
                     alignItems: 'center',
+                    display: 'flex',
                     gap: '0.5rem',
+                    m: 0,
                   }}
                   value={value}
                 >
@@ -412,8 +396,8 @@ export const MRT_FilterTextField = <TData extends Record<string, any>>({
         anchorEl={anchorEl}
         header={header}
         setAnchorEl={setAnchorEl}
-        table={table}
         setFilterValue={setFilterValue}
+        table={table}
       />
     </>
   );

package/src/inputs/MRT_GlobalFilterTextField.tsx

@@ -12,6 +12,7 @@ import InputAdornment from '@mui/material/InputAdornment';
 import TextField from '@mui/material/TextField';
 import Tooltip from '@mui/material/Tooltip';
 import { debounce } from '@mui/material/utils';
+import { parseFromValuesOrFunc } from '../column.utils';
 import { MRT_FilterOptionMenu } from '../menus/MRT_FilterOptionMenu';
 import { type MRT_TableInstance } from '../types';
 
@@ -24,25 +25,24 @@ export const MRT_GlobalFilterTextField = <TData extends Record<string, any>>({
 }: Props<TData>) => {
   const {
     getState,
-    setGlobalFilter,
     options: {
       enableGlobalFilterModes,
-      icons: { SearchIcon, CloseIcon },
+      icons: { CloseIcon, SearchIcon },
       localization,
       manualFiltering,
       muiSearchTextFieldProps,
     },
     refs: { searchInputRef },
+    setGlobalFilter,
   } = table;
   const { globalFilter, showGlobalFilter } = getState();
 
-  const textFieldProps =
-    muiSearchTextFieldProps instanceof Function
-      ? muiSearchTextFieldProps({ table })
-      : muiSearchTextFieldProps;
+  const textFieldProps = parseFromValuesOrFunc(muiSearchTextFieldProps, {
+    table,
+  });
 
   const isMounted = useRef(false);
-  const [anchorEl, setAnchorEl] = useState<null | HTMLElement>(null);
+  const [anchorEl, setAnchorEl] = useState<HTMLElement | null>(null);
   const [searchValue, setSearchValue] = useState(globalFilter ?? '');
 
   const handleChangeDebounced = useCallback(
@@ -83,32 +83,12 @@ export const MRT_GlobalFilterTextField = <TData extends Record<string, any>>({
   return (
     <Collapse
       in={showGlobalFilter}
+      mountOnEnter
       orientation="horizontal"
       unmountOnExit
-      mountOnEnter
     >
       <TextField
-        placeholder={localization.search}
-        onChange={handleChange}
-        value={searchValue ?? ''}
-        variant="standard"
         InputProps={{
-          startAdornment: enableGlobalFilterModes ? (
-            <InputAdornment position="start">
-              <Tooltip arrow title={localization.changeSearchMode}>
-                <IconButton
-                  aria-label={localization.changeSearchMode}
-                  onClick={handleGlobalFilterMenuOpen}
-                  size="small"
-                  sx={{ height: '1.75rem', width: '1.75rem' }}
-                >
-                  <SearchIcon />
-                </IconButton>
-              </Tooltip>
-            </InputAdornment>
-          ) : (
-            <SearchIcon style={{ marginRight: '4px' }} />
-          ),
           endAdornment: (
             <InputAdornment position="end">
               <Tooltip arrow title={localization.clearSearch ?? ''}>
@@ -125,7 +105,27 @@ export const MRT_GlobalFilterTextField = <TData extends Record<string, any>>({
               </Tooltip>
             </InputAdornment>
           ),
+          startAdornment: enableGlobalFilterModes ? (
+            <InputAdornment position="start">
+              <Tooltip arrow title={localization.changeSearchMode}>
+                <IconButton
+                  aria-label={localization.changeSearchMode}
+                  onClick={handleGlobalFilterMenuOpen}
+                  size="small"
+                  sx={{ height: '1.75rem', width: '1.75rem' }}
+                >
+                  <SearchIcon />
+                </IconButton>
+              </Tooltip>
+            </InputAdornment>
+          ) : (
+            <SearchIcon style={{ marginRight: '4px' }} />
+          ),
         }}
+        onChange={handleChange}
+        placeholder={localization.search}
+        value={searchValue ?? ''}
+        variant="standard"
         {...textFieldProps}
         inputRef={(inputRef) => {
           searchInputRef.current = inputRef;
@@ -136,9 +136,9 @@ export const MRT_GlobalFilterTextField = <TData extends Record<string, any>>({
       />
       <MRT_FilterOptionMenu
         anchorEl={anchorEl}
+        onSelect={handleClear}
         setAnchorEl={setAnchorEl}
         table={table}
-        onSelect={handleClear}
       />
     </Collapse>
   );

package/src/inputs/MRT_SelectCheckbox.tsx

@@ -1,8 +1,9 @@
 import { type MouseEvent } from 'react';
-import Checkbox from '@mui/material/Checkbox';
+import Checkbox, { type CheckboxProps } from '@mui/material/Checkbox';
+import Radio, { type RadioProps } from '@mui/material/Radio';
 import Tooltip from '@mui/material/Tooltip';
-import Radio from '@mui/material/Radio';
 import { type Theme } from '@mui/material/styles';
+import { parseFromValuesOrFunc } from '../column.utils';
 import { type MRT_Row, type MRT_TableInstance } from '../types';
 
 interface Props<TData extends Record<string, any>> {
@@ -19,22 +20,20 @@ export const MRT_SelectCheckbox = <TData extends Record<string, any>>({
   const {
     getState,
     options: {
-      localization,
       enableMultiRowSelection,
-      muiSelectCheckboxProps,
+      enableRowPinning,
+      localization,
       muiSelectAllCheckboxProps,
+      muiSelectCheckboxProps,
+      rowPinningDisplayMode,
       selectAllMode,
     },
   } = table;
   const { density, isLoading } = getState();
 
   const checkboxProps = !row
-    ? muiSelectAllCheckboxProps instanceof Function
-      ? muiSelectAllCheckboxProps({ table })
-      : muiSelectAllCheckboxProps
-    : muiSelectCheckboxProps instanceof Function
-    ? muiSelectCheckboxProps({ row, table })
-    : muiSelectCheckboxProps;
+    ? parseFromValuesOrFunc(muiSelectAllCheckboxProps, { table })
+    : parseFromValuesOrFunc(muiSelectCheckboxProps, { row, table });
 
   const allRowsSelected = selectAll
     ? selectAllMode === 'page'
@@ -50,12 +49,28 @@ export const MRT_SelectCheckbox = <TData extends Record<string, any>>({
         ? localization.toggleSelectAll
         : localization.toggleSelectRow,
     },
-    onChange: row
-      ? row.getToggleSelectedHandler()
-      : selectAllMode === 'all'
-      ? table.getToggleAllRowsSelectedHandler()
-      : table.getToggleAllPageRowsSelectedHandler(),
-    size: (density === 'compact' ? 'small' : 'medium') as 'small' | 'medium',
+    onChange: (event) => {
+      event.stopPropagation();
+      row
+        ? row.getToggleSelectedHandler()(event)
+        : selectAllMode === 'all'
+        ? table.getToggleAllRowsSelectedHandler()(event)
+        : table.getToggleAllPageRowsSelectedHandler()(event);
+      if (enableRowPinning && rowPinningDisplayMode?.includes('select')) {
+        if (row) {
+          row.pin(
+            !row.getIsPinned() && event.target.checked
+              ? rowPinningDisplayMode?.includes('bottom')
+                ? 'bottom'
+                : 'top'
+              : false,
+          );
+        } else {
+          table.setRowPinning({ bottom: [], top: [] });
+        }
+      }
+    },
+    size: (density === 'compact' ? 'small' : 'medium') as 'medium' | 'small',
     ...checkboxProps,
     onClick: (e: MouseEvent<HTMLButtonElement>) => {
       e.stopPropagation();
@@ -63,14 +78,13 @@ export const MRT_SelectCheckbox = <TData extends Record<string, any>>({
     },
     sx: (theme: Theme) => ({
       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)),
+      width: density === 'compact' ? '1.75rem' : '2.5rem',
+      zIndex: 0,
+      ...parseFromValuesOrFunc(checkboxProps?.sx, theme),
     }),
     title: undefined,
-  };
+  } as CheckboxProps | RadioProps;
 
   return (
     <Tooltip

package/src/locales/en.ts

@@ -14,7 +14,6 @@ export const MRT_Localization_EN: MRT_Localization = {
   collapseAll: 'Collapse all',
   columnActions: 'Column Actions',
   copiedToClipboard: 'Copied to clipboard',
-
   dropToGroupBy: 'Drop to group by {column}',
   edit: 'Edit',
   expand: 'Expand',
@@ -60,6 +59,7 @@ export const MRT_Localization_EN: MRT_Localization = {
   noResultsFound: 'No results found',
   of: 'of',
   or: 'or',
+  pin: 'Pin',
   pinToLeft: 'Pin to left',
   pinToRight: 'Pin to right',
   resetColumnSize: 'Reset column size',

package/src/locales/fr.ts

@@ -70,7 +70,7 @@ export const MRT_Localization_FR: MRT_Localization = {
   save: 'Sauvegarder',
   search: 'Rechercher',
   selectedCountOfRowCountRowsSelected:
-    '{selectedCount} de {rowCount} ligne(s) sélectionnée(s)',
+    '{selectedCount} sur {rowCount} ligne(s)',
   select: 'Sélectionner',
   showAll: 'Afficher tous',
   showAllColumns: 'Afficher toutes les colonnes',

package/src/menus/MRT_ColumnActionMenu.tsx

@@ -9,15 +9,15 @@ import { MRT_FilterOptionMenu } from './MRT_FilterOptionMenu';
 import { type MRT_Header, type MRT_TableInstance } from '../types';
 
 export const commonMenuItemStyles = {
-  py: '6px',
-  my: 0,
-  justifyContent: 'space-between',
   alignItems: 'center',
+  justifyContent: 'space-between',
+  my: 0,
+  py: '6px',
 };
 
 export const commonListItemStyles = {
-  display: 'flex',
   alignItems: 'center',
+  display: 'flex',
 };
 
 interface Props<TData extends Record<string, any>> {
@@ -35,36 +35,36 @@ export const MRT_ColumnActionMenu = <TData extends Record<string, any>>({
 }: Props<TData>) => {
   const {
     getState,
-    toggleAllColumnsVisible,
-    setColumnOrder,
     options: {
       columnFilterModeOptions,
       enableColumnFilterModes,
       enableColumnFilters,
+      enableColumnPinning,
       enableColumnResizing,
       enableGrouping,
       enableHiding,
-      enableColumnPinning,
       enableSorting,
       enableSortingRemoval,
       icons: {
         ArrowRightIcon,
         ClearAllIcon,
-        ViewColumnIcon,
         DynamicFeedIcon,
         FilterListIcon,
         FilterListOffIcon,
         PushPinIcon,
-        SortIcon,
         RestartAltIcon,
+        SortIcon,
+        ViewColumnIcon,
         VisibilityOffIcon,
       },
       localization,
       renderColumnActionsMenuItems,
     },
     refs: { filterInputRefs },
+    setColumnOrder,
     setColumnSizingInfo,
     setShowColumnFilters,
+    toggleAllColumnsVisible,
   } = table;
   const { column } = header;
   const { columnDef } = column;
@@ -73,7 +73,7 @@ export const MRT_ColumnActionMenu = <TData extends Record<string, any>>({
   const columnFilterValue = column.getFilterValue();
 
   const [filterMenuAnchorEl, setFilterMenuAnchorEl] =
-    useState<null | HTMLElement>(null);
+    useState<HTMLElement | null>(null);
 
   const handleClearSort = () => {
     column.clearSorting();
@@ -180,9 +180,9 @@ export const MRT_ColumnActionMenu = <TData extends Record<string, any>>({
             </Box>
           </MenuItem>,
           <MenuItem
+            disabled={column.getIsSorted() === 'desc'}
             divider={enableColumnFilters || enableGrouping || enableHiding}
             key={2}
-            disabled={column.getIsSorted() === 'desc'}
             onClick={handleSortDesc}
             sx={commonMenuItemStyles}
           >
@@ -383,12 +383,12 @@ export const MRT_ColumnActionMenu = <TData extends Record<string, any>>({
 
   return (
     <Menu
-      anchorEl={anchorEl}
-      open={!!anchorEl}
-      onClose={() => setAnchorEl(null)}
       MenuListProps={{
         dense: density === 'compact',
       }}
+      anchorEl={anchorEl}
+      onClose={() => setAnchorEl(null)}
+      open={!!anchorEl}
     >
       {columnDef.renderColumnActionsMenuItems?.({
         closeMenu: () => setAnchorEl(null),