material-react-table 2.0.3 → 2.0.5

package/dist/types/toolbar/MRT_TablePagination.d.ts

@@ -1,7 +1,10 @@
 import { type PaginationProps } from '@mui/material/Pagination';
 import { type MRT_RowData, type MRT_TableInstance } from '../types';
 interface Props<TData extends MRT_RowData> extends Partial<PaginationProps & {
-    rowsPerPageOptions?: number[];
+    rowsPerPageOptions?: {
+        label: string;
+        value: number;
+    }[] | number[];
     showRowsPerPage?: boolean;
 }> {
     position?: 'bottom' | 'top';

package/dist/types/types.d.ts

@@ -14,6 +14,7 @@ import { type LinearProgressProps } from '@mui/material/LinearProgress';
 import { type PaginationProps } from '@mui/material/Pagination';
 import { type PaperProps } from '@mui/material/Paper';
 import { type RadioProps } from '@mui/material/Radio';
+import { type SelectProps } from '@mui/material/Select';
 import { type SkeletonProps } from '@mui/material/Skeleton';
 import { type SliderProps } from '@mui/material/Slider';
 import { type TableProps } from '@mui/material/Table';
@@ -154,7 +155,7 @@ export interface MRT_RowModel<TData extends MRT_RowData> {
         [key: string]: MRT_Row<TData>;
     };
 }
-export type MRT_TableInstance<TData extends MRT_RowData> = Omit<Table<TData>, 'getAllColumns' | 'getAllFlatColumns' | 'getAllLeafColumns' | 'getBottomRows' | 'getCenterLeafColumns' | 'getCenterRows' | 'getColumn' | 'getExpandedRowModel' | 'getFlatHeaders' | 'getHeaderGroups' | 'getLeftLeafColumns' | 'getPaginationRowModel' | 'getPreFilteredRowModel' | 'getPrePaginationRowModel' | 'getRightLeafColumns' | 'getRowModel' | 'getSelectedRowModel' | 'getState' | 'getTopRows' | 'options'> & {
+export type MRT_TableInstance<TData extends MRT_RowData> = Omit<Table<TData>, 'getAllColumns' | 'getAllFlatColumns' | 'getAllLeafColumns' | 'getBottomRows' | 'getCenterLeafColumns' | 'getCenterRows' | 'getColumn' | 'getExpandedRowModel' | 'getFlatHeaders' | 'getHeaderGroups' | 'getLeafHeaders' | 'getLeftLeafColumns' | 'getPaginationRowModel' | 'getPreFilteredRowModel' | 'getPrePaginationRowModel' | 'getRightLeafColumns' | 'getRowModel' | 'getSelectedRowModel' | 'getState' | 'getTopRows' | 'options'> & {
     getAllColumns: () => MRT_Column<TData>[];
     getAllFlatColumns: () => MRT_Column<TData>[];
     getAllLeafColumns: () => MRT_Column<TData>[];
@@ -165,6 +166,7 @@ export type MRT_TableInstance<TData extends MRT_RowData> = Omit<Table<TData>, 'g
     getExpandedRowModel: () => MRT_RowModel<TData>;
     getFlatHeaders: () => MRT_Header<TData>[];
     getHeaderGroups: () => MRT_HeaderGroup<TData>[];
+    getLeafHeaders: () => MRT_Header<TData>[];
     getLeftLeafColumns: () => MRT_Column<TData>[];
     getPaginationRowModel: () => MRT_RowModel<TData>;
     getPreFilteredRowModel: () => MRT_RowModel<TData>;
@@ -640,10 +642,18 @@ export type MRT_TableOptions<TData extends MRT_RowData> = Omit<Partial<TableOpti
     muiPaginationProps?: ((props: {
         table: MRT_TableInstance<TData>;
     }) => Partial<PaginationProps & {
-        rowsPerPageOptions?: number[];
+        SelectProps?: Partial<SelectProps>;
+        rowsPerPageOptions?: {
+            label: string;
+            value: number;
+        }[] | number[];
         showRowsPerPage?: boolean;
     }>) | Partial<PaginationProps & {
-        rowsPerPageOptions?: number[];
+        SelectProps?: Partial<SelectProps>;
+        rowsPerPageOptions?: {
+            label: string;
+            value: number;
+        }[] | number[];
         showRowsPerPage?: boolean;
     }>;
     muiRowDragHandleProps?: ((props: {

package/package.json

@@ -1,5 +1,5 @@
 {
-  "version": "2.0.3",
+  "version": "2.0.5",
   "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.",
@@ -35,11 +35,11 @@
   "size-limit": [
     {
       "path": "dist/index.js",
-      "limit": "59 KB"
+      "limit": "53 KB"
     },
     {
       "path": "dist/index.esm.js",
-      "limit": "55 KB"
+      "limit": "50 KB"
     }
   ],
   "engines": {
@@ -61,34 +61,34 @@
     "storybook:dev": "storybook dev -p 6006"
   },
   "devDependencies": {
-    "@babel/core": "^7.23.2",
-    "@babel/preset-react": "^7.22.15",
+    "@babel/core": "^7.23.5",
+    "@babel/preset-react": "^7.23.3",
     "@emotion/react": "^11.11.1",
     "@emotion/styled": "^11.11.0",
-    "@faker-js/faker": "^8.2.0",
-    "@mui/icons-material": "^5.14.16",
-    "@mui/material": "^5.14.17",
-    "@mui/x-date-pickers": "^6.18.0",
+    "@faker-js/faker": "^8.3.1",
+    "@mui/icons-material": "^5.14.19",
+    "@mui/material": "^5.14.19",
+    "@mui/x-date-pickers": "^6.18.3",
     "@rollup/plugin-typescript": "^11.1.5",
-    "@size-limit/preset-small-lib": "^10.0.2",
-    "@storybook/addon-a11y": "^7.5.3",
-    "@storybook/addon-essentials": "^7.5.3",
-    "@storybook/addon-interactions": "^7.5.3",
-    "@storybook/addon-links": "^7.5.3",
-    "@storybook/addon-storysource": "^7.5.3",
-    "@storybook/blocks": "^7.5.3",
-    "@storybook/react": "^7.5.3",
-    "@storybook/react-vite": "^7.5.3",
+    "@size-limit/preset-small-lib": "^11.0.0",
+    "@storybook/addon-a11y": "^7.6.3",
+    "@storybook/addon-essentials": "^7.6.3",
+    "@storybook/addon-interactions": "^7.6.3",
+    "@storybook/addon-links": "^7.6.3",
+    "@storybook/addon-storysource": "^7.6.3",
+    "@storybook/blocks": "^7.6.3",
+    "@storybook/react": "^7.6.3",
+    "@storybook/react-vite": "^7.6.3",
     "@storybook/testing-library": "^0.2.2",
-    "@types/node": "^20.8.10",
-    "@types/react": "^18.2.36",
-    "@types/react-dom": "^18.2.14",
-    "@typescript-eslint/eslint-plugin": "^6.10.0",
-    "@typescript-eslint/parser": "^6.10.0",
-    "@vitejs/plugin-react": "^4.1.1",
-    "eslint": "^8.53.0",
+    "@types/node": "^20.10.3",
+    "@types/react": "^18.2.42",
+    "@types/react-dom": "^18.2.17",
+    "@typescript-eslint/eslint-plugin": "^6.13.2",
+    "@typescript-eslint/parser": "^6.13.2",
+    "@vitejs/plugin-react": "^4.2.1",
+    "eslint": "^8.55.0",
     "eslint-plugin-mui-path-imports": "^0.0.15",
-    "eslint-plugin-perfectionist": "^2.2.0",
+    "eslint-plugin-perfectionist": "^2.5.0",
     "prop-types": "^15.8.1",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
@@ -96,12 +96,12 @@
     "rollup": "^2.79.1",
     "rollup-plugin-dts": "^6.1.0",
     "rollup-plugin-peer-deps-external": "^2.2.4",
-    "size-limit": "^10.0.2",
-    "storybook": "^7.5.3",
-    "storybook-dark-mode": "^3.0.1",
+    "size-limit": "^11.0.0",
+    "storybook": "^7.6.3",
+    "storybook-dark-mode": "^3.0.3",
     "tslib": "^2.6.2",
-    "typescript": "^5.2.2",
-    "vite": "^4.5.0"
+    "typescript": "^5.3.2",
+    "vite": "^5.0.5"
   },
   "peerDependencies": {
     "@emotion/react": ">=11.11",
@@ -115,7 +115,7 @@
   "dependencies": {
     "@tanstack/match-sorter-utils": "8.8.4",
     "@tanstack/react-table": "8.10.7",
-    "@tanstack/react-virtual": "3.0.0-beta.68",
+    "@tanstack/react-virtual": "3.0.1",
     "highlight-words": "1.2.2"
   }
 }

package/src/body/MRT_TableBody.tsx

@@ -186,6 +186,15 @@ export const MRT_TableBody = <TData extends MRT_RowData>({
     ? rowVirtualizer.getVirtualItems()
     : undefined;
 
+  const commonRowProps = {
+    columnVirtualizer,
+    numRows: rows.length,
+    table,
+    virtualColumns,
+    virtualPaddingLeft,
+    virtualPaddingRight,
+  };
+
   return (
     <>
       {!rowPinningDisplayMode?.includes('sticky') &&
@@ -202,15 +211,9 @@ export const MRT_TableBody = <TData extends MRT_RowData>({
           >
             {getTopRows().map((row, rowIndex) => {
               const props = {
-                columnVirtualizer,
-                measureElement: rowVirtualizer?.measureElement,
-                numRows: rows.length,
+                ...commonRowProps,
                 row,
                 rowIndex,
-                table,
-                virtualColumns,
-                virtualPaddingLeft,
-                virtualPaddingRight,
               };
               return memoMode === 'rows' ? (
                 <Memo_MRT_TableBodyRow key={row.id} {...props} />
@@ -275,24 +278,22 @@ export const MRT_TableBody = <TData extends MRT_RowData>({
                   ? rows[rowOrVirtualRow.index]
                   : (rowOrVirtualRow as MRT_Row<TData>);
                 const props = {
-                  columnVirtualizer,
+                  ...commonRowProps,
                   measureElement: rowVirtualizer?.measureElement,
-                  numRows: rows.length,
                   pinnedRowIds,
                   row,
                   rowIndex: rowVirtualizer ? rowOrVirtualRow.index : rowIndex,
-                  table,
-                  virtualColumns,
-                  virtualPaddingLeft,
-                  virtualPaddingRight,
                   virtualRow: rowVirtualizer
                     ? (rowOrVirtualRow as VirtualItem)
                     : undefined,
                 };
                 return memoMode === 'rows' ? (
-                  <Memo_MRT_TableBodyRow key={row.id} {...props} />
+                  <Memo_MRT_TableBodyRow
+                    key={`${row.id}${row.index}`}
+                    {...props}
+                  />
                 ) : (
-                  <MRT_TableBodyRow key={row.id} {...props} />
+                  <MRT_TableBodyRow key={`${row.id}${row.index}`} {...props} />
                 );
               })}
             </>
@@ -312,18 +313,12 @@ export const MRT_TableBody = <TData extends MRT_RowData>({
           >
             {getBottomRows().map((row, rowIndex) => {
               const props = {
-                columnVirtualizer,
-                measureElement: rowVirtualizer?.measureElement,
-                numRows: rows.length,
+                ...commonRowProps,
                 row,
                 rowIndex,
-                table,
-                virtualColumns,
-                virtualPaddingLeft,
-                virtualPaddingRight,
               };
               return memoMode === 'rows' ? (
-                <Memo_MRT_TableBodyRow key={row.id} {...props} />
+                <Memo_MRT_TableBodyRow key={`${row.id}`} {...props} />
               ) : (
                 <MRT_TableBodyRow key={row.id} {...props} />
               );

package/src/body/MRT_TableBodyCellValue.tsx

@@ -60,7 +60,7 @@ export const MRT_TableBodyCellValue = <TData extends MRT_RowData>({
     allowedTypes.includes(typeof renderedCellValue) &&
     ((filterValue &&
       allowedTypes.includes(typeof filterValue) &&
-      columnDef.filterVariant === 'text') ||
+      ['autocomplete', 'text'].includes(columnDef.filterVariant!)) ||
       (globalFilter &&
         allowedTypes.includes(typeof globalFilter) &&
         column.getCanGlobalFilter()))

package/src/head/MRT_TableHeadCellSortLabel.tsx

@@ -37,12 +37,19 @@ export const MRT_TableHeadCellSortLabel = <TData extends MRT_RowData>({
     isLoading || showSkeletons
       ? ''
       : column.getIsSorted()
-      ? column.getIsSorted() === 'desc'
-        ? localization.sortedByColumnDesc.replace('{column}', columnDef.header)
-        : localization.sortedByColumnAsc.replace('{column}', columnDef.header)
-      : column.getNextSortingOrder() === 'desc'
-      ? localization.sortByColumnDesc.replace('{column}', columnDef.header)
-      : localization.sortByColumnAsc.replace('{column}', columnDef.header);
+        ? column.getIsSorted() === 'desc'
+          ? localization.sortedByColumnDesc.replace(
+              '{column}',
+              columnDef.header,
+            )
+          : localization.sortedByColumnAsc.replace('{column}', columnDef.header)
+        : column.getNextSortingOrder() === 'desc'
+          ? localization.sortByColumnDesc.replace('{column}', columnDef.header)
+          : localization.sortByColumnAsc.replace('{column}', columnDef.header);
+
+  const direction = isSorted
+    ? (column.getIsSorted() as 'asc' | 'desc')
+    : undefined;
 
   return (
     <Tooltip placement="top" title={sortTooltip}>
@@ -56,6 +63,7 @@ export const MRT_TableHeadCellSortLabel = <TData extends MRT_RowData>({
               ? (props) => (
                   <SyncAltIcon
                     {...props}
+                    direction={direction}
                     style={{
                       transform: 'rotate(-90deg) scaleX(0.9) translateX(-1px)',
                     }}
@@ -65,9 +73,7 @@ export const MRT_TableHeadCellSortLabel = <TData extends MRT_RowData>({
           }
           active
           aria-label={sortTooltip}
-          direction={
-            isSorted ? (column.getIsSorted() as 'asc' | 'desc') : undefined
-          }
+          direction={direction}
           onClick={(e) => {
             e.stopPropagation();
             header.column.getToggleSortingHandler()?.(e);

package/src/inputs/MRT_GlobalFilterTextField.tsx

@@ -92,6 +92,16 @@ export const MRT_GlobalFilterTextField = <TData extends MRT_RowData>({
       unmountOnExit
     >
       <TextField
+        inputProps={{
+          autoComplete: 'new-password', // disable autocomplete and autofill
+          ...textFieldProps.inputProps,
+        }}
+        onChange={handleChange}
+        placeholder={localization.search}
+        size="small"
+        value={searchValue ?? ''}
+        variant="outlined"
+        {...textFieldProps}
         InputProps={{
           endAdornment: (
             <InputAdornment position="end">
@@ -134,16 +144,6 @@ export const MRT_GlobalFilterTextField = <TData extends MRT_RowData>({
             ) as any),
           }),
         }}
-        inputProps={{
-          autoComplete: 'new-password', // disable autocomplete and autofill
-          ...textFieldProps.inputProps,
-        }}
-        onChange={handleChange}
-        placeholder={localization.search}
-        size="small"
-        value={searchValue ?? ''}
-        variant="outlined"
-        {...textFieldProps}
         inputRef={(inputRef) => {
           searchInputRef.current = inputRef;
           if (textFieldProps?.inputRef) {

package/src/toolbar/MRT_TablePagination.tsx

@@ -14,7 +14,7 @@ const defaultRowsPerPage = [5, 10, 15, 20, 25, 30, 50, 100];
 interface Props<TData extends MRT_RowData>
   extends Partial<
     PaginationProps & {
-      rowsPerPageOptions?: number[];
+      rowsPerPageOptions?: { label: string; value: number }[] | number[];
       showRowsPerPage?: boolean;
     }
   > {
@@ -60,6 +60,7 @@ export const MRT_TablePagination = <TData extends MRT_RowData>({
   const lastRowIndex = Math.min(pageIndex * pageSize + pageSize, totalRowCount);
 
   const {
+    SelectProps,
     rowsPerPageOptions = defaultRowsPerPage,
     showFirstButton = showFirstLastPageButtons,
     showLastButton = showFirstLastPageButtons,
@@ -69,6 +70,7 @@ export const MRT_TablePagination = <TData extends MRT_RowData>({
 
   return (
     <Box
+      className="MuiTablePagination-root"
       sx={{
         alignItems: 'center',
         display: 'flex',
@@ -98,16 +100,29 @@ export const MRT_TablePagination = <TData extends MRT_RowData>({
             id="mrt-rows-per-page"
             inputProps={{ 'aria-label': localization.rowsPerPage }}
             label={localization.rowsPerPage}
-            onChange={(event) => setPageSize(+event.target.value)}
+            onChange={(event) => setPageSize(+(event.target.value as any))}
             sx={{ mb: 0 }}
             value={pageSize}
             variant="standard"
+            {...SelectProps}
           >
-            {rowsPerPageOptions.map((value) => (
-              <MenuItem key={value} sx={{ m: 0 }} value={value}>
-                {value}
-              </MenuItem>
-            ))}
+            {rowsPerPageOptions.map((option) => {
+              const value = typeof option !== 'number' ? option.value : option;
+              const label =
+                typeof option !== 'number' ? option.label : `${option}`;
+              return (
+                SelectProps?.children ??
+                (SelectProps?.native ? (
+                  <option key={value} value={value}>
+                    {label}
+                  </option>
+                ) : (
+                  <MenuItem key={value} sx={{ m: 0 }} value={value}>
+                    {label}
+                  </MenuItem>
+                ))
+              );
+            })}
           </Select>
         </Box>
       )}

package/src/types.ts

@@ -54,6 +54,7 @@ import { type LinearProgressProps } from '@mui/material/LinearProgress';
 import { type PaginationProps } from '@mui/material/Pagination';
 import { type PaperProps } from '@mui/material/Paper';
 import { type RadioProps } from '@mui/material/Radio';
+import { type SelectProps } from '@mui/material/Select';
 import { type SkeletonProps } from '@mui/material/Skeleton';
 import { type SliderProps } from '@mui/material/Slider';
 import { type TableProps } from '@mui/material/Table';
@@ -240,6 +241,7 @@ export type MRT_TableInstance<TData extends MRT_RowData> = Omit<
   | 'getExpandedRowModel'
   | 'getFlatHeaders'
   | 'getHeaderGroups'
+  | 'getLeafHeaders'
   | 'getLeftLeafColumns'
   | 'getPaginationRowModel'
   | 'getPreFilteredRowModel'
@@ -261,6 +263,7 @@ export type MRT_TableInstance<TData extends MRT_RowData> = Omit<
   getExpandedRowModel: () => MRT_RowModel<TData>;
   getFlatHeaders: () => MRT_Header<TData>[];
   getHeaderGroups: () => MRT_HeaderGroup<TData>[];
+  getLeafHeaders: () => MRT_Header<TData>[];
   getLeftLeafColumns: () => MRT_Column<TData>[];
   getPaginationRowModel: () => MRT_RowModel<TData>;
   getPreFilteredRowModel: () => MRT_RowModel<TData>;
@@ -904,13 +907,15 @@ export type MRT_TableOptions<TData extends MRT_RowData> = Omit<
   muiPaginationProps?:
     | ((props: { table: MRT_TableInstance<TData> }) => Partial<
         PaginationProps & {
-          rowsPerPageOptions?: number[];
+          SelectProps?: Partial<SelectProps>;
+          rowsPerPageOptions?: { label: string; value: number }[] | number[];
           showRowsPerPage?: boolean;
         }
       >)
     | Partial<
         PaginationProps & {
-          rowsPerPageOptions?: number[];
+          SelectProps?: Partial<SelectProps>;
+          rowsPerPageOptions?: { label: string; value: number }[] | number[];
           showRowsPerPage?: boolean;
         }
       >;