material-react-table 2.0.5 → 2.0.6

package/dist/types/hooks/useMRT_DisplayColumns.d.ts

@@ -5,5 +5,5 @@ interface Params<TData extends MRT_RowData> {
     grouping: MRT_GroupingState;
     tableOptions: MRT_DefinedTableOptions<TData>;
 }
-export declare const useMRT_DisplayColumns: <TData extends MRT_RowData>({ columnOrder, creatingRow, grouping, tableOptions, }: Params<TData>) => MRT_ColumnDef<TData>[];
+export declare const useMRT_DisplayColumns: <TData extends MRT_RowData>(params: Params<TData>) => MRT_ColumnDef<TData>[];
 export {};

package/dist/types/locales/he.d.ts

@@ -0,0 +1,2 @@
+import { type MRT_Localization } from '..';
+export declare const MRT_Localization_HE: MRT_Localization;

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

@@ -1,6 +1,7 @@
 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 & {
+    disabled?: boolean;
     rowsPerPageOptions?: {
         label: string;
         value: number;

package/package.json

@@ -1,5 +1,5 @@
 {
-  "version": "2.0.5",
+  "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.",
@@ -61,30 +61,30 @@
     "storybook:dev": "storybook dev -p 6006"
   },
   "devDependencies": {
-    "@babel/core": "^7.23.5",
+    "@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.3.1",
-    "@mui/icons-material": "^5.14.19",
-    "@mui/material": "^5.14.19",
-    "@mui/x-date-pickers": "^6.18.3",
+    "@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": "^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",
+    "@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",
+    "@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",
     "@storybook/testing-library": "^0.2.2",
-    "@types/node": "^20.10.3",
-    "@types/react": "^18.2.42",
+    "@types/node": "^20.10.4",
+    "@types/react": "^18.2.45",
     "@types/react-dom": "^18.2.17",
-    "@typescript-eslint/eslint-plugin": "^6.13.2",
-    "@typescript-eslint/parser": "^6.13.2",
+    "@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",
@@ -96,12 +96,12 @@
     "rollup": "^2.79.1",
     "rollup-plugin-dts": "^6.1.0",
     "rollup-plugin-peer-deps-external": "^2.2.4",
-    "size-limit": "^11.0.0",
-    "storybook": "^7.6.3",
-    "storybook-dark-mode": "^3.0.3",
+    "size-limit": "^11.0.1",
+    "storybook": "^7.5.3",
+    "storybook-dark-mode": "^3.0.1",
     "tslib": "^2.6.2",
-    "typescript": "^5.3.2",
-    "vite": "^5.0.5"
+    "typescript": "^5.3.3",
+    "vite": "^5.0.8"
   },
   "peerDependencies": {
     "@emotion/react": ">=11.11",

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;
 

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',