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

package/src/inputs/MRT_EditCellTextField.tsx

@@ -4,8 +4,8 @@ import {
   type KeyboardEvent,
   useState,
 } from 'react';
-import TextField from '@mui/material/TextField';
 import MenuItem from '@mui/material/MenuItem';
+import TextField from '@mui/material/TextField';
 import { type TextFieldProps } from '@mui/material/TextField';
 import { parseFromValuesOrFunc } from '../column.utils';
 import { type MRT_Cell, type MRT_TableInstance } from '../types';
@@ -23,9 +23,9 @@ export const MRT_EditCellTextField = <TData extends Record<string, any>>({
     getState,
     options: { createDisplayMode, editDisplayMode, muiEditTextFieldProps },
     refs: { editInputRefs },
+    setCreatingRow,
     setEditingCell,
     setEditingRow,
-    setCreatingRow,
   } = table;
   const { column, row } = cell;
   const { columnDef } = column;
@@ -100,7 +100,7 @@ export const MRT_EditCellTextField = <TData extends Record<string, any>>({
         }
       }}
       label={
-        ['modal', 'custom'].includes(
+        ['custom', 'modal'].includes(
           (isCreating ? createDisplayMode : editDisplayMode) as string,
         )
           ? column.columnDef.header
@@ -109,7 +109,7 @@ export const MRT_EditCellTextField = <TData extends Record<string, any>>({
       margin="none"
       name={column.id}
       placeholder={
-        !['modal', 'custom'].includes(
+        !['custom', 'modal'].includes(
           (isCreating ? createDisplayMode : editDisplayMode) as string,
         )
           ? columnDef.header
@@ -119,17 +119,17 @@ export const MRT_EditCellTextField = <TData extends Record<string, any>>({
       value={value}
       variant="standard"
       {...textFieldProps}
+      onBlur={handleBlur}
+      onChange={handleChange}
       onClick={(e) => {
         e.stopPropagation();
         textFieldProps?.onClick?.(e);
       }}
-      onBlur={handleBlur}
-      onChange={handleChange}
       onKeyDown={handleEnterKeyDown}
     >
       {textFieldProps.children ??
         columnDef?.editSelectOptions?.map(
-          (option: string | { text: string; value: string }) => {
+          (option: { text: string; value: string } | string) => {
             let value: string;
             let text: string;
             if (typeof option !== 'object') {
@@ -143,10 +143,10 @@ export const MRT_EditCellTextField = <TData extends Record<string, any>>({
               <MenuItem
                 key={value}
                 sx={{
-                  display: 'flex',
-                  m: 0,
                   alignItems: 'center',
+                  display: 'flex',
                   gap: '0.5rem',
+                  m: 0,
                 }}
                 value={value}
               >

package/src/inputs/MRT_FilterCheckbox.tsx

@@ -1,8 +1,8 @@
 import Checkbox from '@mui/material/Checkbox';
 import FormControlLabel from '@mui/material/FormControlLabel';
 import Tooltip from '@mui/material/Tooltip';
-import { type MRT_Column, type MRT_TableInstance } from '../types';
 import { parseFromValuesOrFunc } from '../column.utils';
+import { type MRT_Column, type MRT_TableInstance } from '../types';
 
 interface Props<TData extends Record<string, any>> {
   column: MRT_Column<TData>;
@@ -47,16 +47,12 @@ export const MRT_FilterCheckbox = <TData extends Record<string, any>>({
         control={
           <Checkbox
             checked={column.getFilterValue() === 'true'}
-            indeterminate={column.getFilterValue() === undefined}
             color={
               column.getFilterValue() === undefined ? 'default' : 'primary'
             }
+            indeterminate={column.getFilterValue() === undefined}
             size={density === 'compact' ? 'small' : 'medium'}
             {...checkboxProps}
-            onClick={(e) => {
-              e.stopPropagation();
-              checkboxProps?.onClick?.(e);
-            }}
             onChange={(e, checked) => {
               column.setFilterValue(
                 column.getFilterValue() === undefined
@@ -67,6 +63,10 @@ export const MRT_FilterCheckbox = <TData extends Record<string, any>>({
               );
               checkboxProps?.onChange?.(e, checked);
             }}
+            onClick={(e) => {
+              e.stopPropagation();
+              checkboxProps?.onClick?.(e);
+            }}
             sx={(theme) => ({
               height: '2.5rem',
               width: '2.5rem',
@@ -76,7 +76,7 @@ export const MRT_FilterCheckbox = <TData extends Record<string, any>>({
         }
         disableTypography
         label={checkboxProps.title ?? filterLabel}
-        sx={{ color: 'text.secondary', mt: '-4px', fontWeight: 'normal' }}
+        sx={{ color: 'text.secondary', fontWeight: 'normal', mt: '-4px' }}
         title={undefined}
       />
     </Tooltip>

package/src/inputs/MRT_FilterRangeFields.tsx

@@ -12,7 +12,7 @@ export const MRT_FilterRangeFields = <TData extends Record<string, any>>({
   table,
 }: Props<TData>) => {
   return (
-    <Box sx={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: '1rem' }}>
+    <Box sx={{ display: 'grid', gap: '1rem', gridTemplateColumns: '1fr 1fr' }}>
       <MRT_FilterTextField header={header} rangeFilterIndex={0} table={table} />
       <MRT_FilterTextField header={header} rangeFilterIndex={1} table={table} />
     </Box>

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',
           }}
         >