material-react-table 2.0.0-beta.9 → 2.0.0-rc.1

package/package.json

@@ -1,5 +1,5 @@
 {
-  "version": "2.0.0-beta.9",
+  "version": "2.0.0-rc.1",
   "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.",
@@ -24,192 +24,9 @@
     "url": "https://github.com/KevinVandy/material-react-table/issues"
   },
   "sideEffects": false,
-  "main": "dist/cjs/index.js",
-  "module": "dist/esm/material-react-table.esm.js",
+  "main": "dist/index.js",
+  "module": "dist/index.esm.js",
   "typings": "dist/index.d.ts",
-  "exports": {
-    ".": {
-      "types": "./dist/index.d.ts",
-      "import": "./dist/esm/material-react-table.esm.js",
-      "default": "./dist/cjs/index.js"
-    },
-    "./package.json": "./package.json",
-    "./locales/ar": {
-      "import": "./locales/ar.mjs",
-      "default": "./locales/ar.js",
-      "types": "./locales/ar.d.ts"
-    },
-    "./locales/az": {
-      "import": "./locales/az.mjs",
-      "default": "./locales/az.js",
-      "types": "./locales/az.d.ts"
-    },
-    "./locales/bg": {
-      "import": "./locales/bg.mjs",
-      "default": "./locales/bg.js",
-      "types": "./locales/bg.d.ts"
-    },
-    "./locales/cs": {
-      "import": "./locales/cs.mjs",
-      "default": "./locales/cs.js",
-      "types": "./locales/cs.d.ts"
-    },
-    "./locales/da": {
-      "import": "./locales/da.mjs",
-      "default": "./locales/da.js",
-      "types": "./locales/da.d.ts"
-    },
-    "./locales/de": {
-      "import": "./locales/de.mjs",
-      "default": "./locales/de.js",
-      "types": "./locales/de.d.ts"
-    },
-    "./locales/en": {
-      "import": "./locales/en.mjs",
-      "default": "./locales/en.js",
-      "types": "./locales/en.d.ts"
-    },
-    "./locales/es": {
-      "import": "./locales/es.mjs",
-      "default": "./locales/es.js",
-      "types": "./locales/es.d.ts"
-    },
-    "./locales/et": {
-      "import": "./locales/et.mjs",
-      "default": "./locales/et.js",
-      "types": "./locales/et.d.ts"
-    },
-    "./locales/fa": {
-      "import": "./locales/fa.mjs",
-      "default": "./locales/fa.js",
-      "types": "./locales/fa.d.ts"
-    },
-    "./locales/fi": {
-      "import": "./locales/fi.mjs",
-      "default": "./locales/fi.js",
-      "types": "./locales/fi.d.ts"
-    },
-    "./locales/fr": {
-      "import": "./locales/fr.mjs",
-      "default": "./locales/fr.js",
-      "types": "./locales/fr.d.ts"
-    },
-    "./locales/hu": {
-      "import": "./locales/hu.mjs",
-      "default": "./locales/hu.js",
-      "types": "./locales/hu.d.ts"
-    },
-    "./locales/hy": {
-      "import": "./locales/hy.mjs",
-      "default": "./locales/hy.js",
-      "types": "./locales/hy.d.ts"
-    },
-    "./locales/id": {
-      "import": "./locales/id.mjs",
-      "default": "./locales/id.js",
-      "types": "./locales/id.d.ts"
-    },
-    "./locales/it": {
-      "import": "./locales/it.mjs",
-      "default": "./locales/it.js",
-      "types": "./locales/it.d.ts"
-    },
-    "./locales/ja": {
-      "import": "./locales/ja.mjs",
-      "default": "./locales/ja.js",
-      "types": "./locales/ja.d.ts"
-    },
-    "./locales/ko": {
-      "import": "./locales/ko.mjs",
-      "default": "./locales/ko.js",
-      "types": "./locales/ko.d.ts"
-    },
-    "./locales/nl": {
-      "import": "./locales/nl.mjs",
-      "default": "./locales/nl.js",
-      "types": "./locales/nl.d.ts"
-    },
-    "./locales/no": {
-      "import": "./locales/no.mjs",
-      "default": "./locales/no.js",
-      "types": "./locales/no.d.ts"
-    },
-    "./locales/np": {
-      "import": "./locales/np.mjs",
-      "default": "./locales/np.js",
-      "types": "./locales/np.d.ts"
-    },
-    "./locales/pl": {
-      "import": "./locales/pl.mjs",
-      "default": "./locales/pl.js",
-      "types": "./locales/pl.d.ts"
-    },
-    "./locales/pt": {
-      "import": "./locales/pt.mjs",
-      "default": "./locales/pt.js",
-      "types": "./locales/pt.d.ts"
-    },
-    "./locales/pt-BR": {
-      "import": "./locales/pt-BR.mjs",
-      "default": "./locales/pt-BR.js",
-      "types": "./locales/pt-BR.d.ts"
-    },
-    "./locales/ro": {
-      "import": "./locales/ro.mjs",
-      "default": "./locales/ro.js",
-      "types": "./locales/ro.d.ts"
-    },
-    "./locales/ru": {
-      "import": "./locales/ru.mjs",
-      "default": "./locales/ru.js",
-      "types": "./locales/ru.d.ts"
-    },
-    "./locales/sk": {
-      "import": "./locales/sk.mjs",
-      "default": "./locales/sk.js",
-      "types": "./locales/sk.d.ts"
-    },
-    "./locales/sr-Cyrl-RS": {
-      "import": "./locales/sr-Cyrl-RS.mjs",
-      "default": "./locales/sr-Cyrl-RS.js",
-      "types": "./locales/sr-Cyrl-RS.d.ts"
-    },
-    "./locales/sr-Latn-RS": {
-      "import": "./locales/sr-Latn-RS.mjs",
-      "default": "./locales/sr-Latn-RS.js",
-      "types": "./locales/sr-Latn-RS.d.ts"
-    },
-    "./locales/sv": {
-      "import": "./locales/sv.mjs",
-      "default": "./locales/sv.js",
-      "types": "./locales/sv.d.ts"
-    },
-    "./locales/tr": {
-      "import": "./locales/tr.mjs",
-      "default": "./locales/tr.js",
-      "types": "./locales/tr.d.ts"
-    },
-    "./locales/uk": {
-      "import": "./locales/uk.mjs",
-      "default": "./locales/uk.js",
-      "types": "./locales/uk.d.ts"
-    },
-    "./locales/vi": {
-      "import": "./locales/vi.mjs",
-      "default": "./locales/vi.js",
-      "types": "./locales/vi.d.ts"
-    },
-    "./locales/zh-Hans": {
-      "import": "./locales/zh-Hans.mjs",
-      "default": "./locales/zh-Hans.js",
-      "types": "./locales/zh-Hans.d.ts"
-    },
-    "./locales/zh-Hant": {
-      "import": "./locales/zh-Hant.mjs",
-      "default": "./locales/zh-Hant.js",
-      "types": "./locales/zh-Hant.d.ts"
-    }
-  },
   "files": [
     "dist",
     "locales",
@@ -217,11 +34,11 @@
   ],
   "size-limit": [
     {
-      "path": "dist/cjs/index.js",
+      "path": "dist/index.js",
       "limit": "59 KB"
     },
     {
-      "path": "dist/esm/material-react-table.esm.js",
+      "path": "dist/index.esm.js",
       "limit": "55 KB"
     }
   ],
@@ -233,7 +50,7 @@
     "build-locales": "pnpm lib:build-locales",
     "build-lib": "pnpm lib:build-lib",
     "dev": "pnpm lib:dev",
-    "lib:build": "rm -rf dist && pnpm build-lib && pnpm build-locales && rm -rf dist/cjs/types dist/esm/types",
+    "lib:build": "rm -rf dist && pnpm build-lib && pnpm build-locales && rm -rf dist/types",
     "lib:build-locales": "rm -rf locales && node build-locales.mjs",
     "lib:build-lib": "rm -rf dist && rollup -c rollup.config.mjs && size-limit",
     "lib:dev": "rollup -c rollup.config.mjs --watch",
@@ -251,38 +68,36 @@
     "@faker-js/faker": "^8.2.0",
     "@mui/icons-material": "^5.14.14",
     "@mui/material": "^5.14.14",
-    "@mui/x-date-pickers": "^6.16.2",
-    "@rollup/plugin-babel": "^6.0.4",
-    "@rollup/plugin-node-resolve": "^15.2.3",
+    "@mui/x-date-pickers": "^6.16.3",
     "@rollup/plugin-typescript": "^11.1.5",
-    "@size-limit/preset-small-lib": "^9.0.0",
-    "@storybook/addon-a11y": "^7.5.0",
-    "@storybook/addon-essentials": "^7.5.0",
-    "@storybook/addon-interactions": "^7.5.0",
-    "@storybook/addon-links": "^7.5.0",
-    "@storybook/addon-storysource": "^7.5.0",
-    "@storybook/blocks": "^7.5.0",
-    "@storybook/react": "^7.5.0",
-    "@storybook/react-vite": "^7.5.0",
+    "@size-limit/preset-small-lib": "^10.0.1",
+    "@storybook/addon-a11y": "^7.5.1",
+    "@storybook/addon-essentials": "^7.5.1",
+    "@storybook/addon-interactions": "^7.5.1",
+    "@storybook/addon-links": "^7.5.1",
+    "@storybook/addon-storysource": "^7.5.1",
+    "@storybook/blocks": "^7.5.1",
+    "@storybook/react": "^7.5.1",
+    "@storybook/react-vite": "^7.5.1",
     "@storybook/testing-library": "^0.2.2",
-    "@types/node": "^20.8.7",
-    "@types/react": "^18.2.29",
+    "@types/node": "^20.8.8",
+    "@types/react": "^18.2.31",
     "@types/react-dom": "^18.2.14",
-    "@typescript-eslint/eslint-plugin": "^6.8.0",
-    "@typescript-eslint/parser": "^6.8.0",
+    "@typescript-eslint/eslint-plugin": "^6.9.0",
+    "@typescript-eslint/parser": "^6.9.0",
     "@vitejs/plugin-react": "^4.1.0",
-    "eslint": "^8.51.0",
+    "eslint": "^8.52.0",
     "eslint-plugin-mui-path-imports": "^0.0.15",
     "eslint-plugin-perfectionist": "^2.2.0",
     "prop-types": "^15.8.1",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
     "react-is": "^18.2.0",
-    "rollup": "^4.1.4",
+    "rollup": "^2.79.1",
     "rollup-plugin-dts": "^6.1.0",
     "rollup-plugin-peer-deps-external": "^2.2.4",
-    "size-limit": "^9.0.0",
-    "storybook": "^7.5.0",
+    "size-limit": "^10.0.1",
+    "storybook": "^7.5.1",
     "storybook-dark-mode": "^3.0.1",
     "tslib": "^2.6.2",
     "typescript": "^5.2.2",
@@ -300,7 +115,7 @@
   "dependencies": {
     "@tanstack/match-sorter-utils": "8.8.4",
     "@tanstack/react-table": "8.10.7",
-    "@tanstack/react-virtual": "3.0.0-beta.66",
+    "@tanstack/react-virtual": "3.0.0-beta.68",
     "highlight-words": "1.2.2"
   }
 }

package/src/body/MRT_TableBodyCell.tsx

@@ -60,7 +60,7 @@ export const MRT_TableBodyCell = <TData extends MRT_RowData>({
       layoutMode,
       muiSkeletonProps,
       muiTableBodyCellProps,
-      rowNumberMode,
+      rowNumberDisplayMode,
     },
     refs: { editInputRefs },
     setEditingCell,
@@ -281,7 +281,7 @@ export const MRT_TableBodyCell = <TData extends MRT_RowData>({
               {...skeletonProps}
             />
           ) : enableRowNumbers &&
-            rowNumberMode === 'static' &&
+            rowNumberDisplayMode === 'static' &&
             column.id === 'mrt-row-numbers' ? (
             rowIndex + 1
           ) : column.id === 'mrt-row-drag' ? (

package/src/body/MRT_TableBodyCellValue.tsx

@@ -56,7 +56,7 @@ export const MRT_TableBodyCellValue = <TData extends MRT_RowData>({
   if (
     enableFilterMatchHighlighting &&
     columnDef.enableFilterMatchHighlighting !== false &&
-    renderedCellValue &&
+    String(renderedCellValue) &&
     allowedTypes.includes(typeof renderedCellValue) &&
     ((filterValue &&
       allowedTypes.includes(typeof filterValue) &&

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/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_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 &&