material-react-table 2.0.4 → 2.0.6

package/dist/types/useMaterialReactTable.d.ts

@@ -0,0 +1,2 @@
+import { type MRT_RowData, type MRT_TableInstance, type MRT_TableOptions } from './types';
+export declare const useMaterialReactTable: <TData extends MRT_RowData>(tableOptions: MRT_TableOptions<TData>) => MRT_TableInstance<TData>;

package/package.json

@@ -1,5 +1,5 @@
 {
-  "version": "2.0.4",
+  "version": "2.0.6",
   "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,16 +61,16 @@
     "storybook:dev": "storybook dev -p 6006"
   },
   "devDependencies": {
-    "@babel/core": "^7.23.2",
-    "@babel/preset-react": "^7.22.15",
+    "@babel/core": "^7.23.6",
+    "@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.15.0",
+    "@mui/material": "^5.15.0",
+    "@mui/x-date-pickers": "^6.18.4",
     "@rollup/plugin-typescript": "^11.1.5",
-    "@size-limit/preset-small-lib": "^10.0.2",
+    "@size-limit/preset-small-lib": "^11.0.1",
     "@storybook/addon-a11y": "^7.5.3",
     "@storybook/addon-essentials": "^7.5.3",
     "@storybook/addon-interactions": "^7.5.3",
@@ -80,15 +80,15 @@
     "@storybook/react": "^7.5.3",
     "@storybook/react-vite": "^7.5.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.4",
+    "@types/react": "^18.2.45",
+    "@types/react-dom": "^18.2.17",
+    "@typescript-eslint/eslint-plugin": "^6.14.0",
+    "@typescript-eslint/parser": "^6.14.0",
+    "@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",
+    "size-limit": "^11.0.1",
     "storybook": "^7.5.3",
     "storybook-dark-mode": "^3.0.1",
     "tslib": "^2.6.2",
-    "typescript": "^5.2.2",
-    "vite": "^4.5.0"
+    "typescript": "^5.3.3",
+    "vite": "^5.0.8"
   },
   "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_TableBodyCell.tsx

@@ -126,12 +126,12 @@ export const MRT_TableBodyCell = <TData extends MRT_RowData>({
     const borderStyle = showResizeBorder
       ? `2px solid ${draggingBorderColor} !important`
       : isDraggingColumn || isDraggingRow
-      ? `1px dashed ${theme.palette.grey[500]} !important`
-      : isHoveredColumn ||
-        isHoveredRow ||
-        columnSizingInfo.isResizingColumn === column.id
-      ? `2px dashed ${draggingBorderColor} !important`
-      : undefined;
+        ? `1px dashed ${theme.palette.grey[500]} !important`
+        : isHoveredColumn ||
+            isHoveredRow ||
+            columnSizingInfo.isResizingColumn === column.id
+          ? `2px dashed ${draggingBorderColor} !important`
+          : undefined;
 
     if (showResizeBorder) {
       return { borderRight: borderStyle };
@@ -168,6 +168,7 @@ export const MRT_TableBodyCell = <TData extends MRT_RowData>({
   ]);
 
   const isEditable =
+    !cell.getIsPlaceholder() &&
     parseFromValuesOrFunc(enableEditing, row) &&
     parseFromValuesOrFunc(columnDef.enableEditing, row) !== false;
 
@@ -222,7 +223,8 @@ export const MRT_TableBodyCell = <TData extends MRT_RowData>({
       sx={(theme) => ({
         '&:hover': {
           outline:
-            ['cell', 'table'].includes(editDisplayMode ?? '') && isEditable
+            (editDisplayMode === 'cell' && isEditable) ||
+            (editDisplayMode === 'table' && (isCreating || isEditing))
               ? `1px solid ${theme.palette.grey[500]}`
               : undefined,
           outlineOffset: '-1px',
@@ -241,12 +243,12 @@ export const MRT_TableBodyCell = <TData extends MRT_RowData>({
               ? '0 0.5rem'
               : '0.5rem'
             : density === 'comfortable'
-            ? columnDefType === 'display'
-              ? '0.5rem 0.75rem'
-              : '1rem'
-            : columnDefType === 'display'
-            ? '1rem 1.25rem'
-            : '1.5rem',
+              ? columnDefType === 'display'
+                ? '0.5rem 0.75rem'
+                : '1rem'
+              : columnDefType === 'display'
+                ? '1rem 1.25rem'
+                : '1.5rem',
         textOverflow: columnDefType !== 'display' ? 'ellipsis' : undefined,
         [theme.direction === 'rtl' ? 'pr' : 'pl']:
           column.id === 'mrt-row-expand'
@@ -255,8 +257,8 @@ export const MRT_TableBodyCell = <TData extends MRT_RowData>({
                 (density === 'compact'
                   ? 0.5
                   : density === 'comfortable'
-                  ? 0.75
-                  : 1.25)
+                    ? 0.75
+                    : 1.25)
               }rem`
             : undefined,
         whiteSpace:

package/src/body/MRT_TableBodyCellValue.tsx

@@ -37,15 +37,15 @@ export const MRT_TableBodyCellValue = <TData extends MRT_RowData>({
           table,
         })
       : row.getIsGrouped() && !cell.getIsGrouped()
-      ? null
-      : cell.getIsGrouped() && columnDef.GroupedCell
-      ? columnDef.GroupedCell({
-          cell,
-          column,
-          row,
-          table,
-        })
-      : undefined;
+        ? null
+        : cell.getIsGrouped() && columnDef.GroupedCell
+          ? columnDef.GroupedCell({
+              cell,
+              column,
+              row,
+              table,
+            })
+          : undefined;
 
   const isGroupedValue = renderedCellValue !== undefined;
 
@@ -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/body/MRT_TableBodyRow.tsx

@@ -153,8 +153,8 @@ export const MRT_TableBodyRow = <TData extends MRT_RowData>({
                 ? row.getIsSelected()
                   ? `${alpha(selectedRowBackgroundColor, 0.3)}`
                   : theme.palette.mode === 'dark'
-                  ? `${lighten(baseBackgroundColor, 0.05)}`
-                  : `${darken(baseBackgroundColor, 0.05)}`
+                    ? `${lighten(baseBackgroundColor, 0.05)}`
+                    : `${darken(baseBackgroundColor, 0.05)}`
                 : undefined,
           },
           backgroundColor: `${baseBackgroundColor} !important`,
@@ -170,28 +170,28 @@ export const MRT_TableBodyRow = <TData extends MRT_RowData>({
           opacity: isPinned
             ? 0.97
             : draggingRow?.id === row.id || hoveredRow?.id === row.id
-            ? 0.5
-            : 1,
+              ? 0.5
+              : 1,
           position: virtualRow
             ? 'absolute'
             : rowPinningDisplayMode?.includes('sticky') && isPinned
-            ? 'sticky'
-            : undefined,
+              ? 'sticky'
+              : undefined,
           td: {
             backgroundColor: row.getIsSelected()
               ? selectedRowBackgroundColor
               : isPinned
-              ? pinnedRowBackgroundColor
-              : undefined,
+                ? pinnedRowBackgroundColor
+                : undefined,
           },
           top: virtualRow
             ? 0
             : topPinnedIndex !== undefined && isPinned
-            ? `${
-                topPinnedIndex * rowHeight +
-                (enableStickyHeader || isFullScreen ? tableHeadHeight - 1 : 0)
-              }px`
-            : undefined,
+              ? `${
+                  topPinnedIndex * rowHeight +
+                  (enableStickyHeader || isFullScreen ? tableHeadHeight - 1 : 0)
+                }px`
+              : undefined,
           transition: virtualRow ? 'none' : 'all 150ms ease-in-out',
           width: '100%',
           zIndex:

package/src/buttons/MRT_RowPinButton.tsx

@@ -69,8 +69,8 @@ export const MRT_RowPinButton = <TData extends MRT_RowData>({
                 rowPinningDisplayMode === 'sticky'
                   ? 135
                   : pinningPosition === 'top'
-                  ? 180
-                  : 0
+                    ? 180
+                    : 0
               }deg)`,
             }}
           />

package/src/buttons/MRT_ToggleDensePaddingButton.tsx

@@ -25,8 +25,8 @@ export const MRT_ToggleDensePaddingButton = <TData extends MRT_RowData>({
       density === 'comfortable'
         ? 'compact'
         : density === 'compact'
-        ? 'spacious'
-        : 'comfortable';
+          ? 'spacious'
+          : 'comfortable';
     setDensity(nextDensity);
   };
 

package/src/footer/MRT_TableFooterCell.tsx

@@ -47,8 +47,8 @@ export const MRT_TableFooterCell = <TData extends MRT_RowData>({
           density === 'compact'
             ? '0.5rem'
             : density === 'comfortable'
-            ? '1rem'
-            : '1.5rem',
+              ? '1rem'
+              : '1.5rem',
         verticalAlign: 'top',
         zIndex: column.getIsPinned() && columnDefType !== 'group' ? 2 : 1,
         ...getCommonMRTCellStyles({

package/src/head/MRT_TableHeadCell.tsx

@@ -97,10 +97,10 @@ export const MRT_TableHeadCell = <TData extends MRT_RowData>({
     const borderStyle = showResizeBorder
       ? `2px solid ${draggingBorderColor} !important`
       : draggingColumn?.id === column.id
-      ? `1px dashed ${theme.palette.grey[500]}`
-      : hoveredColumn?.id === column.id
-      ? `2px dashed ${draggingBorderColor}`
-      : undefined;
+        ? `1px dashed ${theme.palette.grey[500]}`
+        : hoveredColumn?.id === column.id
+          ? `2px dashed ${draggingBorderColor}`
+          : undefined;
 
     if (showResizeBorder) {
       return { borderRight: borderStyle };
@@ -158,32 +158,32 @@ export const MRT_TableHeadCell = <TData extends MRT_RowData>({
           density === 'compact'
             ? '0.5rem'
             : density === 'comfortable'
-            ? columnDefType === 'display'
-              ? '0.75rem'
-              : '1rem'
-            : columnDefType === 'display'
-            ? '1rem 1.25rem'
-            : '1.5rem',
+              ? columnDefType === 'display'
+                ? '0.75rem'
+                : '1rem'
+              : columnDefType === 'display'
+                ? '1rem 1.25rem'
+                : '1.5rem',
         pb:
           columnDefType === 'display'
             ? 0
             : showColumnFilters || density === 'compact'
-            ? '0.4rem'
-            : '0.6rem',
+              ? '0.4rem'
+              : '0.6rem',
         pt:
           columnDefType === 'group' || density === 'compact'
             ? '0.25rem'
             : density === 'comfortable'
-            ? '.75rem'
-            : '1.25rem',
+              ? '.75rem'
+              : '1.25rem',
         userSelect: enableMultiSort && column.getCanSort() ? 'none' : undefined,
         verticalAlign: 'top',
         zIndex:
           column.getIsResizing() || draggingColumn?.id === column.id
             ? 3
             : column.getIsPinned() && columnDefType !== 'group'
-            ? 2
-            : 1,
+              ? 2
+              : 1,
         ...getCommonMRTCellStyles({
           column,
           header,
@@ -209,8 +209,8 @@ export const MRT_TableHeadCell = <TData extends MRT_RowData>({
                   tableCellProps?.align === 'center'
                     ? 'center'
                     : column.getCanResize()
-                    ? 'space-between'
-                    : 'flex-start',
+                      ? 'space-between'
+                      : 'flex-start',
                 position: 'relative',
                 width: '100%',
               }}
@@ -264,7 +264,9 @@ export const MRT_TableHeadCell = <TData extends MRT_RowData>({
               {columnDefType !== 'group' && (
                 <Box
                   className="Mui-TableHeadCell-Content-Actions"
-                  sx={{ whiteSpace: 'nowrap' }}
+                  sx={{
+                    whiteSpace: 'nowrap',
+                  }}
                 >
                   {showDragHandle && (
                     <MRT_TableHeadCellGrabHandle

package/src/head/MRT_TableHeadCellResizeHandle.tsx

@@ -52,10 +52,10 @@ export const MRT_TableHeadCellResizeHandle = <TData extends MRT_RowData>({
         cursor: 'col-resize',
         mr:
           density === 'compact'
-            ? '-12px'
+            ? '-8px'
             : density === 'comfortable'
-            ? '-20px'
-            : '-28px',
+              ? '-16px'
+              : '-24px',
         position: 'absolute',
         px: '4px',
         right: column.columnDef.columnDefType === 'display' ? '4px' : '0',
@@ -70,6 +70,7 @@ export const MRT_TableHeadCellResizeHandle = <TData extends MRT_RowData>({
           borderWidth: '2px',
           height: '24px',
           touchAction: 'none',
+          transform: 'translateX(4px)',
           transition: column.getIsResizing()
             ? undefined
             : 'all 150ms ease-in-out',

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);