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

package/src/inputs/MRT_FilterRangeSlider.tsx

@@ -1,9 +1,9 @@
+import { useEffect, useRef, useState } from 'react';
+import FormHelperText from '@mui/material/FormHelperText';
 import Slider from '@mui/material/Slider';
 import Stack from '@mui/material/Stack';
-import FormHelperText from '@mui/material/FormHelperText';
-import { type MRT_TableInstance, type MRT_Header } from '../types';
-import { useEffect, useRef, useState } from 'react';
 import { parseFromValuesOrFunc } from '../column.utils';
+import { type MRT_Header, type MRT_TableInstance } from '../types';
 
 interface Props<TData extends Record<string, any>> {
   header: MRT_Header<TData>;
@@ -15,7 +15,7 @@ export const MRT_FilterRangeSlider = <TData extends Record<string, any>>({
   table,
 }: Props<TData>) => {
   const {
-    options: { localization, muiFilterSliderProps, enableColumnFilterModes },
+    options: { enableColumnFilterModes, localization, muiFilterSliderProps },
     refs: { filterInputRefs },
   } = table;
   const { column } = header;
@@ -62,8 +62,8 @@ export const MRT_FilterRangeSlider = <TData extends Record<string, any>>({
     <Stack>
       <Slider
         disableSwap
-        min={min}
         max={max}
+        min={min}
         onChange={(_event, values) => {
           setFilterValues(values as [number, number]);
         }}
@@ -105,9 +105,9 @@ export const MRT_FilterRangeSlider = <TData extends Record<string, any>>({
       {showChangeModeButton ? (
         <FormHelperText
           sx={{
-            m: '-3px -6px',
             fontSize: '0.75rem',
             lineHeight: '0.8rem',
+            m: '-3px -6px',
             whiteSpace: 'nowrap',
           }}
         >

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,12 +14,12 @@ 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';
-import { parseFromValuesOrFunc } from '../column.utils';
 
 interface Props<TData extends Record<string, any>> {
   header: MRT_Header<TData>;
@@ -34,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,
@@ -107,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[]) || []
@@ -128,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;
@@ -202,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',
@@ -234,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
@@ -292,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,
@@ -324,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}`] =
@@ -333,28 +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',
-          },
+          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;
@@ -369,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}
                 >
@@ -396,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,9 +12,9 @@ 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';
-import { parseFromValuesOrFunc } from '../column.utils';
 
 interface Props<TData extends Record<string, any>> {
   table: MRT_TableInstance<TData>;
@@ -25,15 +25,15 @@ 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();
 
@@ -42,7 +42,7 @@ export const MRT_GlobalFilterTextField = <TData extends Record<string, any>>({
   });
 
   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,10 +1,10 @@
 import { type MouseEvent } from 'react';
 import Checkbox, { type CheckboxProps } from '@mui/material/Checkbox';
-import Tooltip from '@mui/material/Tooltip';
 import Radio, { type RadioProps } from '@mui/material/Radio';
+import Tooltip from '@mui/material/Tooltip';
 import { type Theme } from '@mui/material/styles';
-import { type MRT_Row, type MRT_TableInstance } from '../types';
 import { parseFromValuesOrFunc } from '../column.utils';
+import { type MRT_Row, type MRT_TableInstance } from '../types';
 
 interface Props<TData extends Record<string, any>> {
   row?: MRT_Row<TData>;
@@ -20,12 +20,12 @@ export const MRT_SelectCheckbox = <TData extends Record<string, any>>({
   const {
     getState,
     options: {
-      localization,
       enableMultiRowSelection,
-      rowPinningDisplayMode,
       enableRowPinning,
-      muiSelectCheckboxProps,
+      localization,
       muiSelectAllCheckboxProps,
+      muiSelectCheckboxProps,
+      rowPinningDisplayMode,
       selectAllMode,
     },
   } = table;
@@ -70,7 +70,7 @@ export const MRT_SelectCheckbox = <TData extends Record<string, any>>({
         }
       }
     },
-    size: (density === 'compact' ? 'small' : 'medium') as 'small' | 'medium',
+    size: (density === 'compact' ? 'small' : 'medium') as 'medium' | 'small',
     ...checkboxProps,
     onClick: (e: MouseEvent<HTMLButtonElement>) => {
       e.stopPropagation();
@@ -78,8 +78,8 @@ 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,
+      width: density === 'compact' ? '1.75rem' : '2.5rem',
       zIndex: 0,
       ...parseFromValuesOrFunc(checkboxProps?.sx, theme),
     }),

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),