material-react-table 2.8.0 → 2.9.1

package/src/utils/style.utils.ts

@@ -42,6 +42,49 @@ export const getMRTTheme = <TData extends MRT_RowData>(
   };
 };
 
+export const pinnedBeforeAfterStyles = {
+  content: '""',
+  height: '100%',
+  left: 0,
+  position: 'absolute',
+  top: 0,
+  width: '100%',
+  zIndex: -1,
+};
+
+export const getCommonPinnedCellStyles = <TData extends MRT_RowData>({
+  column,
+  table,
+  theme,
+}: {
+  column?: MRT_Column<TData>;
+  table: MRT_TableInstance<TData>;
+  theme: Theme;
+}) => {
+  const { baseBackgroundColor } = getMRTTheme(table, theme);
+  return {
+    '&[data-pinned="true"]': {
+      '&:before': {
+        backgroundColor: alpha(
+          darken(
+            baseBackgroundColor,
+            theme.palette.mode === 'dark' ? 0.05 : 0.01,
+          ),
+          0.97,
+        ),
+        boxShadow: column
+          ? getIsLastLeftPinnedColumn(table, column)
+            ? `-4px 0 4px -4px ${alpha(theme.palette.grey[700], 0.5)} inset`
+            : getIsFirstRightPinnedColumn(column)
+              ? `4px 0 4px -4px ${alpha(theme.palette.grey[700], 0.5)} inset`
+              : undefined
+          : undefined,
+        ...pinnedBeforeAfterStyles,
+      },
+    },
+  };
+};
+
 export const getCommonMRTCellStyles = <TData extends MRT_RowData>({
   column,
   header,
@@ -56,17 +99,20 @@ export const getCommonMRTCellStyles = <TData extends MRT_RowData>({
   theme: Theme;
 }) => {
   const {
-    options: { layoutMode },
+    options: { enableColumnVirtualization, layoutMode },
   } = table;
   const { columnDef } = column;
 
+  const isColumnPinned =
+    columnDef.columnDefType !== 'group' && column.getIsPinned();
+
   const widthStyles: CSSProperties = {
     minWidth: `max(calc(var(--${header ? 'header' : 'col'}-${parseCSSVarId(
       header?.id ?? column.id,
     )}-size) * 1px), ${columnDef.minSize ?? 30}px)`,
     width: `calc(var(--${header ? 'header' : 'col'}-${parseCSSVarId(
       header?.id ?? column.id,
-    )}-size) * 1px${header && layoutMode === 'grid-no-grow' ? ` + ${header?.subHeaders?.length ?? 0}rem` : ''})`,
+    )}-size) * 1px)`,
   };
 
   if (layoutMode === 'grid') {
@@ -81,44 +127,38 @@ export const getCommonMRTCellStyles = <TData extends MRT_RowData>({
     widthStyles.flex = `${+(columnDef.grow || 0)} 0 auto`;
   }
 
+  const pinnedStyles = isColumnPinned
+    ? {
+        ...getCommonPinnedCellStyles({ column, table, theme }),
+        left:
+          isColumnPinned === 'left'
+            ? `${column.getStart('left')}px`
+            : undefined,
+        opacity: 0.97,
+        position: 'sticky',
+        right:
+          isColumnPinned === 'right'
+            ? `${getTotalRight(table, column)}px`
+            : undefined,
+        zIndex: 1,
+      }
+    : {};
+
   return {
-    backgroundColor:
-      column.getIsPinned() && columnDef.columnDefType !== 'group'
-        ? alpha(
-            darken(
-              getMRTTheme(table, theme).baseBackgroundColor,
-              theme.palette.mode === 'dark' ? 0.05 : 0.01,
-            ),
-            0.97,
-          )
-        : 'inherit',
+    backgroundColor: 'inherit',
     backgroundImage: 'inherit',
-    boxShadow: getIsLastLeftPinnedColumn(table, column)
-      ? `-4px 0 8px -6px ${alpha(theme.palette.grey[700], 0.5)} inset`
-      : getIsFirstRightPinnedColumn(column)
-        ? `4px 0 8px -6px ${alpha(theme.palette.grey[700], 0.5)} inset`
-        : undefined,
     display: layoutMode?.startsWith('grid') ? 'flex' : undefined,
-    left:
-      column.getIsPinned() === 'left'
-        ? `${column.getStart('left')}px`
-        : undefined,
     opacity:
       table.getState().draggingColumn?.id === column.id ||
       table.getState().hoveredColumn?.id === column.id
         ? 0.5
         : 1,
-    position:
-      column.getIsPinned() && columnDef.columnDefType !== 'group'
-        ? 'sticky'
-        : undefined,
-    right:
-      column.getIsPinned() === 'right'
-        ? `${getTotalRight(table, column)}px`
-        : undefined,
-    transition: table.options.enableColumnVirtualization
+    position: 'relative',
+    transition: enableColumnVirtualization
       ? 'none'
       : `padding 150ms ease-in-out`,
+    zIndex: 0,
+    ...pinnedStyles,
     ...widthStyles,
     ...(parseFromValuesOrFunc(tableCellProps?.sx, theme) as any),
   };