material-react-table 2.0.0-beta.8 → 2.0.0-rc.0

package/src/buttons/MRT_EditActionButtons.tsx

@@ -93,12 +93,12 @@ export const MRT_EditActionButtons = <TData extends MRT_RowData>({
     >
       {variant === 'icon' ? (
         <>
-          <Tooltip arrow title={localization.cancel}>
+          <Tooltip title={localization.cancel}>
             <IconButton aria-label={localization.cancel} onClick={handleCancel}>
               <CancelIcon />
             </IconButton>
           </Tooltip>
-          <Tooltip arrow title={localization.save}>
+          <Tooltip title={localization.save}>
             <IconButton
               aria-label={localization.save}
               color="info"

package/src/buttons/MRT_ExpandAllButton.tsx

@@ -37,7 +37,6 @@ export const MRT_ExpandAllButton = <TData extends MRT_RowData>({
 
   return (
     <Tooltip
-      arrow
       enterDelay={1000}
       enterNextDelay={1000}
       title={

package/src/buttons/MRT_ExpandButton.tsx

@@ -44,7 +44,6 @@ export const MRT_ExpandButton = <TData extends MRT_RowData>({
 
   return (
     <Tooltip
-      arrow
       disableHoverListener={!canExpand && !renderDetailPanel}
       enterDelay={1000}
       enterNextDelay={1000}

package/src/buttons/MRT_GrabHandleButton.tsx

@@ -31,7 +31,6 @@ export const MRT_GrabHandleButton = <TData extends MRT_RowData>({
 
   return (
     <Tooltip
-      arrow
       enterDelay={1000}
       enterNextDelay={1000}
       placement="top"

package/src/buttons/MRT_RowPinButton.tsx

@@ -41,7 +41,6 @@ export const MRT_RowPinButton = <TData extends MRT_RowData>({
 
   return (
     <Tooltip
-      arrow
       enterDelay={1000}
       enterNextDelay={1000}
       open={tooltipOpened}

package/src/buttons/MRT_ShowHideColumnsButton.tsx

@@ -27,7 +27,7 @@ export const MRT_ShowHideColumnsButton = <TData extends MRT_RowData>({
 
   return (
     <>
-      <Tooltip arrow title={rest?.title ?? localization.showHideColumns}>
+      <Tooltip title={rest?.title ?? localization.showHideColumns}>
         <IconButton
           aria-label={localization.showHideColumns}
           onClick={handleClick}

package/src/buttons/MRT_ToggleDensePaddingButton.tsx

@@ -31,7 +31,7 @@ export const MRT_ToggleDensePaddingButton = <TData extends MRT_RowData>({
   };
 
   return (
-    <Tooltip arrow title={rest?.title ?? localization.toggleDensity}>
+    <Tooltip title={rest?.title ?? localization.toggleDensity}>
       <IconButton
         aria-label={localization.toggleDensity}
         onClick={handleToggleDensePadding}

package/src/buttons/MRT_ToggleFiltersButton.tsx

@@ -25,7 +25,7 @@ export const MRT_ToggleFiltersButton = <TData extends MRT_RowData>({
   };
 
   return (
-    <Tooltip arrow title={rest?.title ?? localization.showHideFilters}>
+    <Tooltip title={rest?.title ?? localization.showHideFilters}>
       <IconButton
         aria-label={localization.showHideFilters}
         onClick={handleToggleShowFilters}

package/src/buttons/MRT_ToggleFullScreenButton.tsx

@@ -30,7 +30,6 @@ export const MRT_ToggleFullScreenButton = <TData extends MRT_RowData>({
 
   return (
     <Tooltip
-      arrow
       open={tooltipOpened}
       title={rest?.title ?? localization.toggleFullScreen}
     >

package/src/buttons/MRT_ToggleGlobalFilterButton.tsx

@@ -28,7 +28,7 @@ export const MRT_ToggleGlobalFilterButton = <TData extends MRT_RowData>({
   };
 
   return (
-    <Tooltip arrow title={rest?.title ?? localization.showHideSearch}>
+    <Tooltip title={rest?.title ?? localization.showHideSearch}>
       <IconButton
         aria-label={rest?.title ?? localization.showHideSearch}
         disabled={!!globalFilter}

package/src/buttons/MRT_ToggleRowActionMenuButton.tsx

@@ -80,7 +80,7 @@ export const MRT_ToggleRowActionMenuButton = <TData extends MRT_RowData>({
       ) : !renderRowActionMenuItems &&
         parseFromValuesOrFunc(enableEditing, row) &&
         ['modal', 'row'].includes(editDisplayMode!) ? (
-        <Tooltip arrow placement="right" title={localization.edit}>
+        <Tooltip placement="right" title={localization.edit}>
           <IconButton
             aria-label={localization.edit}
             onClick={handleStartEditMode}
@@ -93,7 +93,6 @@ export const MRT_ToggleRowActionMenuButton = <TData extends MRT_RowData>({
       ) : renderRowActionMenuItems ? (
         <>
           <Tooltip
-            arrow
             enterDelay={1000}
             enterNextDelay={1000}
             title={localization.rowActions}

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/head/MRT_TableHeadCellColumnActionsButton.tsx

@@ -54,7 +54,6 @@ export const MRT_TableHeadCellColumnActionsButton = <
   return (
     <>
       <Tooltip
-        arrow
         enterDelay={1000}
         enterNextDelay={1000}
         placement="top"

package/src/head/MRT_TableHeadCellFilterLabel.tsx

@@ -92,7 +92,7 @@ export const MRT_TableHeadCellFilterLabel = <TData extends MRT_RowData = {}>({
         unmountOnExit
       >
         <Box component="span" sx={{ flex: '0 0' }}>
-          <Tooltip arrow placement="top" title={filterTooltip}>
+          <Tooltip placement="top" title={filterTooltip}>
             <IconButton
               disableRipple
               onClick={(event: MouseEvent<HTMLButtonElement>) => {

package/src/head/MRT_TableHeadCellSortLabel.tsx

@@ -45,7 +45,7 @@ export const MRT_TableHeadCellSortLabel = <TData extends MRT_RowData>({
       : localization.sortByColumnAsc.replace('{column}', columnDef.header);
 
   return (
-    <Tooltip arrow placement="top" title={sortTooltip}>
+    <Tooltip placement="top" title={sortTooltip}>
       <Badge
         badgeContent={sorting.length > 1 ? column.getSortIndex() + 1 : 0}
         overlap="circular"

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/hooks/useMRT_TableOptions.ts

@@ -86,7 +86,7 @@ export const useMRT_TableOptions: <TData extends MRT_RowData>(
   positionPagination = 'bottom',
   positionToolbarAlertBanner = 'top',
   positionToolbarDropZone = 'top',
-  rowNumberMode = 'static',
+  rowNumberDisplayMode = 'static',
   rowPinningDisplayMode = 'sticky',
   selectAllMode = 'page',
   sortingFns,
@@ -194,7 +194,7 @@ export const useMRT_TableOptions: <TData extends MRT_RowData>(
     positionPagination,
     positionToolbarAlertBanner,
     positionToolbarDropZone,
-    rowNumberMode,
+    rowNumberDisplayMode,
     rowPinningDisplayMode,
     selectAllMode,
     sortingFns: _sortingFns,

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_FilterCheckbox.tsx

@@ -44,7 +44,6 @@ export const MRT_FilterCheckbox = <TData extends MRT_RowData>({
 
   return (
     <Tooltip
-      arrow
       enterDelay={1000}
       enterNextDelay={1000}
       title={checkboxProps?.title ?? filterLabel}

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,
@@ -242,7 +242,7 @@ export const MRT_FilterTextField = <TData extends MRT_RowData>({
         position="end"
         sx={{ mr: isSelectFilter || isMultiSelectFilter ? '20px' : undefined }}
       >
-        <Tooltip arrow placement="right" title={localization.clearFilter ?? ''}>
+        <Tooltip placement="right" title={localization.clearFilter ?? ''}>
           <span>
             <IconButton
               aria-label={localization.clearFilter}
@@ -264,7 +264,7 @@ export const MRT_FilterTextField = <TData extends MRT_RowData>({
 
   const startAdornment = showChangeModeButton ? (
     <InputAdornment position="start">
-      <Tooltip arrow title={localization.changeFilterMode}>
+      <Tooltip title={localization.changeFilterMode}>
         <span>
           <IconButton
             aria-label={localization.changeFilterMode}
@@ -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/inputs/MRT_GlobalFilterTextField.tsx

@@ -95,7 +95,7 @@ export const MRT_GlobalFilterTextField = <TData extends MRT_RowData>({
         InputProps={{
           endAdornment: (
             <InputAdornment position="end">
-              <Tooltip arrow title={localization.clearSearch ?? ''}>
+              <Tooltip title={localization.clearSearch ?? ''}>
                 <span>
                   <IconButton
                     aria-label={localization.clearSearch}
@@ -111,7 +111,7 @@ export const MRT_GlobalFilterTextField = <TData extends MRT_RowData>({
           ),
           startAdornment: enableGlobalFilterModes ? (
             <InputAdornment position="start">
-              <Tooltip arrow title={localization.changeSearchMode}>
+              <Tooltip title={localization.changeSearchMode}>
                 <IconButton
                   aria-label={localization.changeSearchMode}
                   onClick={handleGlobalFilterMenuOpen}

package/src/inputs/MRT_SelectCheckbox.tsx

@@ -96,7 +96,6 @@ export const MRT_SelectCheckbox = <TData extends MRT_RowData>({
 
   return (
     <Tooltip
-      arrow
       enterDelay={1000}
       enterNextDelay={1000}
       title={

package/src/locales/zh-Hans.ts

@@ -1,18 +1,18 @@
 import { type MRT_Localization } from '..';
 
 export const MRT_Localization_ZH_HANS: MRT_Localization = {
-  actions: '动作',
+  actions: '操作',
   and: '与',
   cancel: '取消',
   changeFilterMode: '更改过滤模式',
-  changeSearchMode: '更改搜寻模式',
+  changeSearchMode: '更改搜索模式',
   clearFilter: '清除过滤',
-  clearSearch: '清除搜寻',
+  clearSearch: '清除搜索',
   clearSort: '清除排序',
   clickToCopy: '点击以复制',
   collapse: '折叠',
   collapseAll: '全部折叠',
-  columnActions: '栏位动作',
+  columnActions: '列操作',
   copiedToClipboard: '已复制至剪贴板',
   dropToGroupBy: '拖放以按 {column} 分组',
   edit: '编辑',
@@ -42,7 +42,7 @@ export const MRT_Localization_ZH_HANS: MRT_Localization = {
   filterNotEquals: '不等于',
   filterStartsWith: '开首为',
   filterWeakEquals: '等于',
-  filteringByColumn: '正以 {column} 过滤：{filterType} {filterValue}',
+  filteringByColumn: '以 {column} 过滤：{filterType} {filterValue}',
   goToFirstPage: '到第一页',
   goToLastPage: '到最后一页',
   goToNextPage: '下一页',
@@ -51,7 +51,7 @@ export const MRT_Localization_ZH_HANS: MRT_Localization = {
   groupByColumn: '按 {column} 分组',
   groupedBy: '分组依据 ',
   hideAll: '隐藏全部',
-  hideColumn: '隐藏 {column} 栏位',
+  hideColumn: '隐藏 {column} 列',
   max: '最大',
   min: '最小',
   move: '移动',
@@ -62,30 +62,30 @@ export const MRT_Localization_ZH_HANS: MRT_Localization = {
   pin: '固定',
   pinToLeft: '固定至左边',
   pinToRight: '固定至右边',
-  resetColumnSize: '重置栏位大小',
+  resetColumnSize: '重置列大小',
   resetOrder: '重置排序',
-  rowActions: '横列动作',
+  rowActions: '行操作',
   rowNumber: '#',
-  rowNumbers: '横列号码',
-  rowsPerPage: '每页横列数目',
-  save: '储存',
-  search: '搜寻',
-  selectedCountOfRowCountRowsSelected: '已选择横列：{selectedCount}/{rowCount}',
+  rowNumbers: '行号码',
+  rowsPerPage: '每页行数',
+  save: '保存',
+  search: '搜索',
+  selectedCountOfRowCountRowsSelected: '已选择行：{selectedCount}/{rowCount}',
   select: '选择',
   showAll: '显示全部',
-  showAllColumns: '显示全部栏位',
-  showHideColumns: '显示/隐藏 栏位',
+  showAllColumns: '显示全部列',
+  showHideColumns: '显示/隐藏 列',
   showHideFilters: '显示/隐藏 过滤条件',
-  showHideSearch: '显示/隐藏 搜寻条件',
+  showHideSearch: '显示/隐藏 搜索条件',
   sortByColumnAsc: '按 {column} 顺序排序',
   sortByColumnDesc: '按 {column} 倒序排序',
   sortedByColumnAsc: '已按 {column} 顺序排序',
   sortedByColumnDesc: '已按 {column} 倒序排序',
   thenBy: '，然后以',
-  toggleDensity: '切换密度',
+  toggleDensity: '切换间距',
   toggleFullScreen: '切换全屏',
   toggleSelectAll: '切换选择全部',
-  toggleSelectRow: '切换选择横列',
+  toggleSelectRow: '切换选择行',
   toggleVisibility: '切换可见度',
   ungroupByColumn: '取消按 {column} 分组',
   unpin: '取消固定',

package/src/menus/MRT_ShowHideColumnsMenuItems.tsx

@@ -154,7 +154,6 @@ export const MRT_ShowHideColumnsMenuItems = <TData extends MRT_RowData>({
               }}
               control={
                 <Tooltip
-                  arrow
                   enterDelay={1000}
                   enterNextDelay={1000}
                   title={localization.toggleVisibility}

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'
@@ -1094,7 +1114,7 @@ export type MRT_TableOptions<TData extends MRT_RowData> = Omit<
     table: MRT_TableInstance<TData>;
   }) => ReactNode;
   rowCount?: number;
-  rowNumberMode?: 'original' | 'static';
+  rowNumberDisplayMode?: 'original' | 'static';
   rowPinningDisplayMode?:
     | 'bottom'
     | 'select-bottom'
@@ -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.
    */