material-react-table 2.0.0-beta.14 → 2.0.0-beta.15

package/package.json

@@ -1,5 +1,5 @@
 {
-  "version": "2.0.0-beta.14",
+  "version": "2.0.0-beta.15",
   "license": "MIT",
   "name": "material-react-table",
   "description": "A fully featured Material UI V5 implementation of TanStack React Table V8, written from the ground up in TypeScript.",

package/src/column.utils.ts

@@ -348,3 +348,20 @@ export function createMRTColumnHelper<
     group: (column) => column as MRT_GroupColumnDef<TData>,
   };
 }
+
+export const getValueAndLabel = (
+  option: { label?: string; text?: string; value: string } | string,
+): { label: string; value: string } => {
+  let label: string = '';
+  let value: string = '';
+  if (option) {
+    if (typeof option !== 'object') {
+      label = option;
+      value = option;
+    } else {
+      label = option.label ?? option.text ?? option.value;
+      value = option.value ?? label;
+    }
+  }
+  return { label, value };
+};

package/src/inputs/MRT_EditCellTextField.tsx

@@ -7,7 +7,7 @@ import {
 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 { getValueAndLabel, parseFromValuesOrFunc } from '../column.utils';
 import {
   type MRT_Cell,
   type MRT_RowData,
@@ -150,33 +150,23 @@ export const MRT_EditCellTextField = <TData extends MRT_RowData>({
       onKeyDown={handleEnterKeyDown}
     >
       {textFieldProps.children ??
-        columnDef?.editSelectOptions?.map(
-          (option: { text: string; value: string } | string) => {
-            let value: string;
-            let text: string;
-            if (typeof option !== 'object') {
-              value = option;
-              text = option;
-            } else {
-              value = option.value;
-              text = option.text;
-            }
-            return (
-              <MenuItem
-                key={value}
-                sx={{
-                  alignItems: 'center',
-                  display: 'flex',
-                  gap: '0.5rem',
-                  m: 0,
-                }}
-                value={value}
-              >
-                {text}
-              </MenuItem>
-            );
-          },
-        )}
+        columnDef?.editSelectOptions?.map((option) => {
+          const { label, value } = getValueAndLabel(option);
+          return (
+            <MenuItem
+              key={value}
+              sx={{
+                alignItems: 'center',
+                display: 'flex',
+                gap: '0.5rem',
+                m: 0,
+              }}
+              value={value}
+            >
+              {label}
+            </MenuItem>
+          );
+        })}
     </TextField>
   );
 };

package/src/inputs/MRT_FilterTextField.tsx

@@ -21,7 +21,7 @@ import {
   DatePicker,
   type DatePickerProps,
 } from '@mui/x-date-pickers/DatePicker';
-import { parseFromValuesOrFunc } from '../column.utils';
+import { getValueAndLabel, parseFromValuesOrFunc } from '../column.utils';
 import { MRT_FilterOptionMenu } from '../menus/MRT_FilterOptionMenu';
 import {
   type MRT_Header,
@@ -309,6 +309,7 @@ export const MRT_FilterTextField = <TData extends MRT_RowData>({
       </label>
     ) : null,
     inputProps: {
+      'aria-label': filterPlaceholder,
       autoComplete: 'new-password', // disable autocomplete and autofill
       disabled: !!filterChipLabel,
       sx: {
@@ -373,9 +374,13 @@ export const MRT_FilterTextField = <TData extends MRT_RowData>({
       ) : isAutocompleteFilter ? (
         <Autocomplete
           freeSolo
-          getOptionLabel={(option) => option}
-          onChange={(_e, newValue) => handleChange(newValue)}
-          options={dropdownOptions ?? []}
+          getOptionLabel={(option) => getValueAndLabel(option).label}
+          onChange={(_e, newValue) =>
+            handleChange(getValueAndLabel(newValue).value)
+          }
+          options={
+            dropdownOptions?.map((option) => getValueAndLabel(option)) ?? []
+          }
           {...autocompleteProps}
           renderInput={(builtinTextFieldProps) => (
             <TextField
@@ -407,19 +412,13 @@ export const MRT_FilterTextField = <TData extends MRT_RowData>({
                   ) : (
                     <Box sx={{ display: 'flex', flexWrap: 'wrap', gap: '2px' }}>
                       {(selected as string[])?.map((value) => {
-                        const selectedValue = dropdownOptions?.find((option) =>
-                          option instanceof Object
-                            ? option.value === value
-                            : option === value,
+                        const selectedValue = dropdownOptions?.find(
+                          (option) => getValueAndLabel(option).value === value,
                         );
                         return (
                           <Chip
                             key={value}
-                            label={
-                              selectedValue instanceof Object
-                                ? selectedValue.text
-                                : selectedValue
-                            }
+                            label={getValueAndLabel(selectedValue).label}
                           />
                         );
                       })}
@@ -438,44 +437,33 @@ export const MRT_FilterTextField = <TData extends MRT_RowData>({
             </MenuItem>,
             ...[
               textFieldProps.children ??
-                dropdownOptions?.map(
-                  (option: { text: string; value: string } | string, index) => {
-                    if (!option) return '';
-                    let value: string;
-                    let text: string;
-                    if (typeof option !== 'object') {
-                      value = option;
-                      text = option;
-                    } else {
-                      value = option.value;
-                      text = option.text;
-                    }
-                    return (
-                      <MenuItem
-                        key={`${index}-${value}`}
-                        sx={{
-                          alignItems: 'center',
-                          display: 'flex',
-                          gap: '0.5rem',
-                          m: 0,
-                        }}
-                        value={value}
-                      >
-                        {isMultiSelectFilter && (
-                          <Checkbox
-                            checked={(
-                              (column.getFilterValue() ?? []) as string[]
-                            ).includes(value)}
-                            sx={{ mr: '0.5rem' }}
-                          />
-                        )}
-                        {text}{' '}
-                        {!columnDef.filterSelectOptions &&
-                          `(${facetedUniqueValues.get(value)})`}
-                      </MenuItem>
-                    );
-                  },
-                ),
+                dropdownOptions?.map((option, index) => {
+                  const { label, value } = getValueAndLabel(option);
+                  return (
+                    <MenuItem
+                      key={`${index}-${value}`}
+                      sx={{
+                        alignItems: 'center',
+                        display: 'flex',
+                        gap: '0.5rem',
+                        m: 0,
+                      }}
+                      value={value}
+                    >
+                      {isMultiSelectFilter && (
+                        <Checkbox
+                          checked={(
+                            (column.getFilterValue() ?? []) as string[]
+                          ).includes(value)}
+                          sx={{ mr: '0.5rem' }}
+                        />
+                      )}
+                      {label}{' '}
+                      {!columnDef.filterSelectOptions &&
+                        `(${facetedUniqueValues.get(value)})`}
+                    </MenuItem>
+                  );
+                }),
             ],
           ]}
         </TextField>

package/src/types.ts

@@ -424,7 +424,17 @@ export type MRT_ColumnDef<TData extends MRT_RowData, TValue = unknown> = Omit<
     LiteralUnion<string & MRT_FilterOption>
   > | null;
   columns?: MRT_ColumnDef<TData, TValue>[];
-  editSelectOptions?: ({ text: string; value: any } | string)[];
+  editSelectOptions?: (
+    | {
+        label?: string;
+        /**
+         * @deprecated use `label` instead
+         */
+        text?: string;
+        value: any;
+      }
+    | string
+  )[];
   editVariant?: 'select' | 'text';
   enableClickToCopy?: boolean;
   enableColumnActions?: boolean;
@@ -434,7 +444,17 @@ export type MRT_ColumnDef<TData extends MRT_RowData, TValue = unknown> = Omit<
   enableEditing?: ((row: MRT_Row<TData>) => boolean) | boolean;
   enableFilterMatchHighlighting?: boolean;
   filterFn?: MRT_FilterFn<TData>;
-  filterSelectOptions?: ({ text: string; value: any } | string)[];
+  filterSelectOptions?: (
+    | {
+        label?: string;
+        /**
+         * @deprecated use `label` instead
+         */
+        text?: string;
+        value: any;
+      }
+    | string
+  )[];
   filterVariant?:
     | 'autocomplete'
     | 'checkbox'
@@ -1113,7 +1133,6 @@ export type MRT_TableOptions<TData extends MRT_RowData> = Omit<
       }) => Partial<VirtualizerOptions<HTMLDivElement, HTMLTableRowElement>>)
     | Partial<VirtualizerOptions<HTMLDivElement, HTMLTableRowElement>>;
   selectAllMode?: 'all' | 'page';
-  selectDisplayMode?: 'checkbox' | 'radio' | 'switch';
   /**
    * Manage state externally any way you want, then pass it back into MRT.
    */