material-react-table 2.0.5 → 2.1.0

package/locales/fr/index.esm.js

@@ -49,7 +49,7 @@ const MRT_Localization_FR = {
     groupByColumn: 'Grouper par {column}',
     groupedBy: 'Groupé par ',
     hideAll: 'Cacher tout',
-    hideColumn: 'Cacher {column} colonne',
+    hideColumn: 'Cacher colonne {column}',
     max: 'Max',
     min: 'Min',
     move: 'Déplacer',

package/locales/fr/index.js

@@ -53,7 +53,7 @@ const MRT_Localization_FR = {
     groupByColumn: 'Grouper par {column}',
     groupedBy: 'Groupé par ',
     hideAll: 'Cacher tout',
-    hideColumn: 'Cacher {column} colonne',
+    hideColumn: 'Cacher colonne {column}',
     max: 'Max',
     min: 'Min',
     move: 'Déplacer',

package/locales/he/index.d.ts

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

package/locales/he/index.esm.d.ts

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

package/locales/he/index.esm.js

@@ -0,0 +1,93 @@
+const MRT_Localization_HE = {
+    actions: 'פעולות',
+    and: 'ו',
+    cancel: 'ביטול',
+    changeFilterMode: 'שינוי מצב סינון',
+    changeSearchMode: 'שינוי מצב חיפוש',
+    clearFilter: 'נקה סינון',
+    clearSearch: 'נקה חיפוש',
+    clearSort: 'נקה מיון',
+    clickToCopy: 'לחץ להעתקה',
+    collapse: 'צמצום',
+    collapseAll: 'צמצום הכל',
+    columnActions: 'פעולות עמודה',
+    copiedToClipboard: 'הועתק ללוח',
+    dropToGroupBy: 'גרור לקיבוץ לפי {column}',
+    edit: 'ערוך',
+    expand: 'הרחב',
+    expandAll: 'הרחב הכל',
+    filterArrIncludes: 'כולל',
+    filterArrIncludesAll: 'כולל הכל',
+    filterArrIncludesSome: 'כולל',
+    filterBetween: 'בין',
+    filterBetweenInclusive: 'בין כולל',
+    filterByColumn: 'סנן לפי {column}',
+    filterContains: 'מכיל',
+    filterEmpty: 'ריק',
+    filterEndsWith: 'מסתיים ב',
+    filterEquals: 'שווה',
+    filterEqualsString: 'שווה',
+    filterFuzzy: 'פעיל',
+    filterGreaterThan: 'גדול מ',
+    filterGreaterThanOrEqualTo: 'גדול או שווה ל',
+    filterInNumberRange: 'בין',
+    filterIncludesString: 'מכיל',
+    filterIncludesStringSensitive: 'מכיל',
+    filterLessThan: 'קטן מ',
+    filterLessThanOrEqualTo: 'קטן או שווה ל',
+    filterMode: 'מצב סינון: {filterType}',
+    filterNotEmpty: 'לא ריק',
+    filterNotEquals: 'לא שווה',
+    filterStartsWith: 'מתחיל ב',
+    filterWeakEquals: 'שווה',
+    filteringByColumn: 'מסנן לפי {column} - {filterType} {filterValue}',
+    goToFirstPage: 'לדף הראשון',
+    goToLastPage: 'לדף האחרון',
+    goToNextPage: 'לדף הבא',
+    goToPreviousPage: 'לדף הקודם',
+    grab: 'תפוס',
+    groupByColumn: 'קיבוץ לפי {column}',
+    groupedBy: 'קובץ לפי',
+    hideAll: 'הסתר הכל',
+    hideColumn: 'הסתר עמודה {column}',
+    max: 'מקסימום',
+    min: 'מינימום',
+    move: 'הזז',
+    noRecordsToDisplay: 'אין רשומות להצגה',
+    noResultsFound: 'לא נמצאו תוצאות',
+    of: 'מתוך',
+    or: 'או',
+    pin: 'נעץ',
+    pinToLeft: 'נעץ לשמאל',
+    pinToRight: 'נעץ לימין',
+    resetColumnSize: 'איפוס גודל עמודה',
+    resetOrder: 'איפוס סדר',
+    rowActions: 'פעולות שורה',
+    rowNumber: '#',
+    rowNumbers: 'מספרי שורות',
+    rowsPerPage: 'שורות לעמוד',
+    save: 'שמור',
+    search: 'חיפוש',
+    selectedCountOfRowCountRowsSelected: '{selectedCount} מתוך {rowCount} שורות נבחרו',
+    select: 'בחר',
+    showAll: 'הצג הכל',
+    showAllColumns: 'הצג את כל העמודות',
+    showHideColumns: 'הצג/הסתר עמודות',
+    showHideFilters: 'הצג/הסתר סינונים',
+    showHideSearch: 'הצג/הסתר חיפוש',
+    sortByColumnAsc: 'מיין לפי {column} בסדר עולה',
+    sortByColumnDesc: 'מיין לפי {column} בסדר יורד',
+    sortedByColumnAsc: 'ממוין לפי {column} בסדר עולה',
+    sortedByColumnDesc: 'ממוין לפי {column} בסדר יורד',
+    thenBy: ', ואז לפי ',
+    toggleDensity: 'שנה צפיפות',
+    toggleFullScreen: 'מסך מלא',
+    toggleSelectAll: 'בחר/בטל בחירת הכל',
+    toggleSelectRow: 'בחר/בטל בחירת שורה',
+    toggleVisibility: 'הצג/הסתר',
+    ungroupByColumn: 'בטל קיבוץ לפי {column}',
+    unpin: 'בטל נעיצה',
+    unpinAll: 'בטל נעיצת הכל',
+};
+
+export { MRT_Localization_HE };

package/locales/he/index.js

@@ -0,0 +1,97 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+const MRT_Localization_HE = {
+    actions: 'פעולות',
+    and: 'ו',
+    cancel: 'ביטול',
+    changeFilterMode: 'שינוי מצב סינון',
+    changeSearchMode: 'שינוי מצב חיפוש',
+    clearFilter: 'נקה סינון',
+    clearSearch: 'נקה חיפוש',
+    clearSort: 'נקה מיון',
+    clickToCopy: 'לחץ להעתקה',
+    collapse: 'צמצום',
+    collapseAll: 'צמצום הכל',
+    columnActions: 'פעולות עמודה',
+    copiedToClipboard: 'הועתק ללוח',
+    dropToGroupBy: 'גרור לקיבוץ לפי {column}',
+    edit: 'ערוך',
+    expand: 'הרחב',
+    expandAll: 'הרחב הכל',
+    filterArrIncludes: 'כולל',
+    filterArrIncludesAll: 'כולל הכל',
+    filterArrIncludesSome: 'כולל',
+    filterBetween: 'בין',
+    filterBetweenInclusive: 'בין כולל',
+    filterByColumn: 'סנן לפי {column}',
+    filterContains: 'מכיל',
+    filterEmpty: 'ריק',
+    filterEndsWith: 'מסתיים ב',
+    filterEquals: 'שווה',
+    filterEqualsString: 'שווה',
+    filterFuzzy: 'פעיל',
+    filterGreaterThan: 'גדול מ',
+    filterGreaterThanOrEqualTo: 'גדול או שווה ל',
+    filterInNumberRange: 'בין',
+    filterIncludesString: 'מכיל',
+    filterIncludesStringSensitive: 'מכיל',
+    filterLessThan: 'קטן מ',
+    filterLessThanOrEqualTo: 'קטן או שווה ל',
+    filterMode: 'מצב סינון: {filterType}',
+    filterNotEmpty: 'לא ריק',
+    filterNotEquals: 'לא שווה',
+    filterStartsWith: 'מתחיל ב',
+    filterWeakEquals: 'שווה',
+    filteringByColumn: 'מסנן לפי {column} - {filterType} {filterValue}',
+    goToFirstPage: 'לדף הראשון',
+    goToLastPage: 'לדף האחרון',
+    goToNextPage: 'לדף הבא',
+    goToPreviousPage: 'לדף הקודם',
+    grab: 'תפוס',
+    groupByColumn: 'קיבוץ לפי {column}',
+    groupedBy: 'קובץ לפי',
+    hideAll: 'הסתר הכל',
+    hideColumn: 'הסתר עמודה {column}',
+    max: 'מקסימום',
+    min: 'מינימום',
+    move: 'הזז',
+    noRecordsToDisplay: 'אין רשומות להצגה',
+    noResultsFound: 'לא נמצאו תוצאות',
+    of: 'מתוך',
+    or: 'או',
+    pin: 'נעץ',
+    pinToLeft: 'נעץ לשמאל',
+    pinToRight: 'נעץ לימין',
+    resetColumnSize: 'איפוס גודל עמודה',
+    resetOrder: 'איפוס סדר',
+    rowActions: 'פעולות שורה',
+    rowNumber: '#',
+    rowNumbers: 'מספרי שורות',
+    rowsPerPage: 'שורות לעמוד',
+    save: 'שמור',
+    search: 'חיפוש',
+    selectedCountOfRowCountRowsSelected: '{selectedCount} מתוך {rowCount} שורות נבחרו',
+    select: 'בחר',
+    showAll: 'הצג הכל',
+    showAllColumns: 'הצג את כל העמודות',
+    showHideColumns: 'הצג/הסתר עמודות',
+    showHideFilters: 'הצג/הסתר סינונים',
+    showHideSearch: 'הצג/הסתר חיפוש',
+    sortByColumnAsc: 'מיין לפי {column} בסדר עולה',
+    sortByColumnDesc: 'מיין לפי {column} בסדר יורד',
+    sortedByColumnAsc: 'ממוין לפי {column} בסדר עולה',
+    sortedByColumnDesc: 'ממוין לפי {column} בסדר יורד',
+    thenBy: ', ואז לפי ',
+    toggleDensity: 'שנה צפיפות',
+    toggleFullScreen: 'מסך מלא',
+    toggleSelectAll: 'בחר/בטל בחירת הכל',
+    toggleSelectRow: 'בחר/בטל בחירת שורה',
+    toggleVisibility: 'הצג/הסתר',
+    ungroupByColumn: 'בטל קיבוץ לפי {column}',
+    unpin: 'בטל נעיצה',
+    unpinAll: 'בטל נעיצת הכל',
+};
+
+exports.MRT_Localization_HE = MRT_Localization_HE;

package/locales/he/package.json

@@ -0,0 +1,6 @@
+{
+  "main": "index.js",
+  "module": "index.esm.js",
+  "sideEffects": false,
+  "types": "index.d.ts"
+}

package/package.json

@@ -1,5 +1,5 @@
 {
-  "version": "2.0.5",
+  "version": "2.1.0",
   "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,32 +61,32 @@
     "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.1",
+    "@mui/material": "^5.15.1",
+    "@mui/x-date-pickers": "^6.18.5",
     "@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.6.6",
+    "@storybook/addon-essentials": "^7.6.6",
+    "@storybook/addon-interactions": "^7.6.6",
+    "@storybook/addon-links": "^7.6.6",
+    "@storybook/addon-storysource": "^7.6.6",
+    "@storybook/blocks": "^7.6.6",
+    "@storybook/react": "^7.6.6",
+    "@storybook/react-vite": "^7.6.6",
     "@storybook/testing-library": "^0.2.2",
-    "@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",
+    "@types/node": "^20.10.5",
+    "@types/react": "^18.2.45",
+    "@types/react-dom": "^18.2.18",
+    "@typescript-eslint/eslint-plugin": "^6.15.0",
+    "@typescript-eslint/parser": "^6.15.0",
     "@vitejs/plugin-react": "^4.2.1",
-    "eslint": "^8.55.0",
+    "eslint": "^8.56.0",
     "eslint-plugin-mui-path-imports": "^0.0.15",
     "eslint-plugin-perfectionist": "^2.5.0",
     "prop-types": "^15.8.1",
@@ -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",
+    "size-limit": "^11.0.1",
+    "storybook": "^7.6.6",
     "storybook-dark-mode": "^3.0.3",
     "tslib": "^2.6.2",
-    "typescript": "^5.3.2",
-    "vite": "^5.0.5"
+    "typescript": "^5.3.3",
+    "vite": "^5.0.10"
   },
   "peerDependencies": {
     "@emotion/react": ">=11.11",
@@ -114,7 +114,7 @@
   },
   "dependencies": {
     "@tanstack/match-sorter-utils": "8.8.4",
-    "@tanstack/react-table": "8.10.7",
+    "@tanstack/react-table": "8.11.2",
     "@tanstack/react-virtual": "3.0.1",
     "highlight-words": "1.2.2"
   }

package/src/body/MRT_TableBodyCell.tsx

@@ -50,6 +50,7 @@ export const MRT_TableBodyCell = <TData extends MRT_RowData>({
   const {
     getState,
     options: {
+      columnResizeDirection,
       columnResizeMode,
       createDisplayMode,
       editDisplayMode,
@@ -119,28 +120,28 @@ export const MRT_TableBodyCell = <TData extends MRT_RowData>({
     const isFirstColumn = getIsFirstColumn(column, table);
     const isLastColumn = getIsLastColumn(column, table);
     const isLastRow = numRows && rowIndex === numRows - 1;
+    const isResizingColumn = columnSizingInfo.isResizingColumn === column.id;
     const showResizeBorder =
-      columnSizingInfo.isResizingColumn === column.id &&
-      columnResizeMode === 'onChange';
+      isResizingColumn && columnResizeMode === 'onChange';
 
     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 || isResizingColumn
+          ? `2px dashed ${draggingBorderColor} !important`
+          : undefined;
 
     if (showResizeBorder) {
-      return { borderRight: borderStyle };
+      return columnResizeDirection === 'ltr'
+        ? { borderRight: borderStyle }
+        : { borderLeft: borderStyle };
     }
 
     return borderStyle
       ? {
           borderBottom:
-            isDraggingRow || isHoveredRow || isLastRow
+            isDraggingRow || isHoveredRow || (isLastRow && !isResizingColumn)
               ? borderStyle
               : undefined,
           borderLeft:
@@ -168,6 +169,7 @@ export const MRT_TableBodyCell = <TData extends MRT_RowData>({
   ]);
 
   const isEditable =
+    !cell.getIsPlaceholder() &&
     parseFromValuesOrFunc(enableEditing, row) &&
     parseFromValuesOrFunc(columnDef.enableEditing, row) !== false;
 
@@ -222,7 +224,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 +244,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 +258,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

@@ -32,6 +32,7 @@ export const MRT_TableHeadCell = <TData extends MRT_RowData>({
     getState,
     options: {
       columnFilterDisplayMode,
+      columnResizeDirection,
       columnResizeMode,
       enableColumnActions,
       enableColumnDragging,
@@ -97,13 +98,15 @@ 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 };
+      return columnResizeDirection === 'ltr'
+        ? { borderRight: borderStyle }
+        : { borderLeft: borderStyle };
     }
     const draggingBorders = borderStyle
       ? {
@@ -158,32 +161,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 +212,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 +267,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