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

package/locales/zh-Hans/index.esm.js

@@ -1,5 +1,5 @@
 const MRT_Localization_ZH_HANS = {
-    actions: '动作',
+    actions: '操作',
     and: '与',
     cancel: '取消',
     changeFilterMode: '更改过滤模式',
@@ -10,7 +10,7 @@ const MRT_Localization_ZH_HANS = {
     clickToCopy: '点击以复制',
     collapse: '折叠',
     collapseAll: '全部折叠',
-    columnActions: '列动作',
+    columnActions: '列操作',
     copiedToClipboard: '已复制至剪贴板',
     dropToGroupBy: '拖放以按 {column} 分组',
     edit: '编辑',
@@ -62,7 +62,7 @@ const MRT_Localization_ZH_HANS = {
     pinToRight: '固定至右边',
     resetColumnSize: '重置列大小',
     resetOrder: '重置排序',
-    rowActions: '行动作',
+    rowActions: '行操作',
     rowNumber: '#',
     rowNumbers: '行号码',
     rowsPerPage: '每页行数',

package/locales/zh-Hans/index.js

@@ -3,7 +3,7 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 
 const MRT_Localization_ZH_HANS = {
-    actions: '动作',
+    actions: '操作',
     and: '与',
     cancel: '取消',
     changeFilterMode: '更改过滤模式',
@@ -14,7 +14,7 @@ const MRT_Localization_ZH_HANS = {
     clickToCopy: '点击以复制',
     collapse: '折叠',
     collapseAll: '全部折叠',
-    columnActions: '列动作',
+    columnActions: '列操作',
     copiedToClipboard: '已复制至剪贴板',
     dropToGroupBy: '拖放以按 {column} 分组',
     edit: '编辑',
@@ -66,7 +66,7 @@ const MRT_Localization_ZH_HANS = {
     pinToRight: '固定至右边',
     resetColumnSize: '重置列大小',
     resetOrder: '重置排序',
-    rowActions: '行动作',
+    rowActions: '行操作',
     rowNumber: '#',
     rowNumbers: '行号码',
     rowsPerPage: '每页行数',

package/package.json

@@ -1,5 +1,5 @@
 {
-  "version": "2.0.0-beta.13",
+  "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/hooks/index.ts

@@ -0,0 +1,4 @@
+export * from './useMRT_DisplayColumns';
+export * from './useMRT_Effects';
+export * from './useMRT_TableInstance';
+export * from './useMRT_TableOptions';

package/src/index.ts

@@ -6,6 +6,7 @@ export * from './column.utils';
 export * from './filterFns';
 export * from './footer';
 export * from './head';
+export * from './hooks';
 export * from './inputs';
 export * from './menus';
 export * from './modals';

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,
@@ -62,9 +62,9 @@ export const MRT_EditCellTextField = <TData extends MRT_RowData>({
     //@ts-ignore
     row._valuesCache[column.id] = newValue;
     if (isCreating) {
-      setCreatingRow({ ...row });
+      setCreatingRow(row);
     } else if (isEditing) {
-      setEditingRow({ ...row });
+      setEditingRow(row);
     }
   };
 
@@ -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/locales/zh-Hans.ts

@@ -1,7 +1,7 @@
 import { type MRT_Localization } from '..';
 
 export const MRT_Localization_ZH_HANS: MRT_Localization = {
-  actions: '动作',
+  actions: '操作',
   and: '与',
   cancel: '取消',
   changeFilterMode: '更改过滤模式',
@@ -12,7 +12,7 @@ export const MRT_Localization_ZH_HANS: MRT_Localization = {
   clickToCopy: '点击以复制',
   collapse: '折叠',
   collapseAll: '全部折叠',
-  columnActions: '列动作',
+  columnActions: '列操作',
   copiedToClipboard: '已复制至剪贴板',
   dropToGroupBy: '拖放以按 {column} 分组',
   edit: '编辑',
@@ -64,7 +64,7 @@ export const MRT_Localization_ZH_HANS: MRT_Localization = {
   pinToRight: '固定至右边',
   resetColumnSize: '重置列大小',
   resetOrder: '重置排序',
-  rowActions: '行动作',
+  rowActions: '行操作',
   rowNumber: '#',
   rowNumbers: '行号码',
   rowsPerPage: '每页行数',

package/src/table/MRT_TablePaper.tsx

@@ -27,7 +27,7 @@ export const MRT_TablePaper = <TData extends MRT_RowData>({
   } = table;
   const { isFullScreen } = getState();
 
-  const tablePaperProps = {
+  const paperProps = {
     ...parseFromValuesOrFunc(muiTablePaperProps, { table }),
     ...rest,
   };
@@ -35,12 +35,12 @@ export const MRT_TablePaper = <TData extends MRT_RowData>({
   return (
     <Paper
       elevation={2}
-      {...tablePaperProps}
+      {...paperProps}
       ref={(ref: HTMLDivElement) => {
         tablePaperRef.current = ref;
-        if (tablePaperProps?.ref) {
+        if (paperProps?.ref) {
           //@ts-ignore
-          tablePaperProps.ref.current = ref;
+          paperProps.ref.current = ref;
         }
       }}
       style={{
@@ -60,14 +60,14 @@ export const MRT_TablePaper = <TData extends MRT_RowData>({
               zIndex: 999,
             }
           : {}),
-        ...tablePaperProps?.style,
+        ...paperProps?.style,
       }}
       sx={(theme) => ({
         backgroundColor: getMRTTheme(table, theme).baseBackgroundColor,
         backgroundImage: 'unset',
         overflow: 'hidden',
         transition: 'all 100ms ease-in-out',
-        ...(parseFromValuesOrFunc(tablePaperProps?.sx, theme) as any),
+        ...(parseFromValuesOrFunc(paperProps?.sx, theme) as any),
       })}
     >
       {enableTopToolbar &&

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.
    */