progress on pinned selection bug

KevinVandy · Jan 24, 2024 · 627fbc5 · 627fbc5 · vercel · Jan 24, 2024
1 parent a8391d6
commit 627fbc5
Show file tree

Hide file tree

Showing 6 changed files with 176 additions and 32 deletions.
diff --git a/apps/material-react-table-docs/examples/advanced/sandbox/src/TS.tsx b/apps/material-react-table-docs/examples/advanced/sandbox/src/TS.tsx
@@ -153,6 +153,8 @@ const Example = () => {
     initialState: {
       showColumnFilters: true,
       showGlobalFilter: true,
+      columnPinning: { left: ['email'], right: ['jobTitle'] },
+      rowSelection: { 1: true },
     },
     paginationDisplayMode: 'pages',
     positionToolbarAlertBanner: 'bottom',

diff --git a/packages/material-react-table/package.json b/packages/material-react-table/package.json
@@ -50,8 +50,8 @@
     "build-locales": "pnpm lib:build-locales",
     "build-lib": "pnpm lib:build-lib",
     "dev": "pnpm lib:dev",
-    "lib:build": "rm -rf dist && pnpm build-lib && pnpm build-locales && rm -rf dist/types",
-    "lib:build-locales": "rm -rf locales && node build-locales.mjs",
+    "lib:build": "pnpm build-lib && pnpm build-locales",
+    "lib:build-locales": "node build-locales.mjs",
     "lib:build-lib": "rm -rf dist && rollup -c rollup.config.mjs && size-limit",
     "lib:dev": "rollup -c rollup.config.mjs --watch",
     "lint": "eslint .",
@@ -94,6 +94,8 @@
     "react-dom": "^18.2.0",
     "react-is": "^18.2.0",
     "rollup": "^2.79.1",
+    "rollup-plugin-copy": "^3.5.0",
+    "rollup-plugin-delete": "^2.0.0",
     "rollup-plugin-dts": "^6.1.0",
     "rollup-plugin-peer-deps-external": "^2.2.4",
     "size-limit": "^11.0.2",
@@ -118,4 +120,4 @@
     "@tanstack/react-virtual": "3.0.2",
     "highlight-words": "1.2.2"
   }
-} 
+}
diff --git a/packages/material-react-table/rollup.config.mjs b/packages/material-react-table/rollup.config.mjs
@@ -1,5 +1,7 @@
 import pkg from './package.json' assert { type: 'json' };
 import typescript from '@rollup/plugin-typescript';
+import copy from 'rollup-plugin-copy';
+import del from 'rollup-plugin-delete';
 import dts from 'rollup-plugin-dts';
 import external from 'rollup-plugin-peer-deps-external';
 
@@ -38,6 +40,12 @@ export default [
   {
     input: './dist/types/index.d.ts',
     output: [{ file: `./${pkg.typings}`, format: 'esm' }],
-    plugins: [dts()],
+    plugins: [
+      del({
+        hook: 'buildEnd',
+        targets: ['dist/types'],
+      }),
+      dts(),
+    ],
   },
 ];
diff --git a/packages/material-react-table/src/components/body/MRT_TableBodyCell.tsx b/packages/material-react-table/src/components/body/MRT_TableBodyCell.tsx
@@ -263,6 +263,7 @@ export const MRT_TableBodyCell = <TData extends MRT_RowData>({
         zIndex:
           draggingColumn?.id === column.id ? 2 : column.getIsPinned() ? 1 : 0,
         ...getCommonMRTCellStyles({
+          cell,
           column,
           table,
           tableCellProps,

diff --git a/packages/material-react-table/src/utils/style.utils.ts b/packages/material-react-table/src/utils/style.utils.ts
@@ -4,6 +4,7 @@ import { type TooltipProps } from '@mui/material/Tooltip';
 import { alpha, darken, lighten } from '@mui/material/styles';
 import { type Theme } from '@mui/material/styles';
 import {
+  type MRT_Cell,
   type MRT_Column,
   type MRT_Header,
   type MRT_RowData,
@@ -42,26 +43,46 @@ export const getMRTTheme = <TData extends MRT_RowData>(
   };
 };
 
+const pinnedBeforeAfterStyles = {
+  content: '""',
+  height: '100%',
+  left: 0,
+  position: 'absolute',
+  top: 0,
+  width: '100%',
+  zIndex: -1,
+};
+
 export const getCommonMRTCellStyles = <TData extends MRT_RowData>({
+  cell,
   column,
   header,
   table,
   tableCellProps,
   theme,
 }: {
+  cell?: MRT_Cell<TData>;
   column: MRT_Column<TData>;
   header?: MRT_Header<TData>;
   table: MRT_TableInstance<TData>;
   tableCellProps: TableCellProps;
   theme: Theme;
 }) => {
-  const { baseBackgroundColor } = getMRTTheme(table, theme);
+  const {
+    baseBackgroundColor,
+    pinnedRowBackgroundColor,
+    selectedRowBackgroundColor,
+  } = getMRTTheme(table, theme);
   const {
     options: { enableColumnVirtualization, layoutMode },
   } = table;
   const { columnDef } = column;
+  const { row } = cell ?? {};
 
-  const isPinned = columnDef.columnDefType !== 'group' && column.getIsPinned();
+  const isColumnPinned =
+    columnDef.columnDefType !== 'group' && column.getIsPinned();
+  const isRowPinned = row?.getIsPinned();
+  const isRowSelected = row?.getIsSelected();
 
   const widthStyles: CSSProperties = {
     minWidth: `max(calc(var(--${header ? 'header' : 'col'}-${parseCSSVarId(
@@ -84,40 +105,42 @@ export const getCommonMRTCellStyles = <TData extends MRT_RowData>({
     widthStyles.flex = `${+(columnDef.grow || 0)} 0 auto`;
   }
 
-  const pinnedStyles = isPinned
+  const pinnedStyles = isColumnPinned
     ? {
-        '&[data-pinned="true"]': {
-          '&:before': {
-            backgroundColor: 'transparent',
-            content: '""',
-            height: '100%',
-            left: 0,
-            position: 'absolute',
-            top: 0,
-            width: '100%',
-          },
+        '&:after': {
+          backgroundColor: isRowSelected
+            ? selectedRowBackgroundColor
+            : isRowPinned
+              ? pinnedRowBackgroundColor
+              : undefined,
+          ...pinnedBeforeAfterStyles,
+        },
+        '&:before': {
           backgroundColor: alpha(
             darken(
               baseBackgroundColor,
               theme.palette.mode === 'dark' ? 0.05 : 0.01,
             ),
-            0.97,
+            0.9,
           ),
-          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,
-          left:
-            isPinned === 'left' ? `${column.getStart('left')}px` : undefined,
-          opacity: 0.98,
-          position: 'sticky',
-          right:
-            isPinned === 'right'
-              ? `${getTotalRight(table, column)}px`
-              : undefined,
-          zIndex: 1,
+          ...pinnedBeforeAfterStyles,
         },
+        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,
+        left:
+          isColumnPinned === 'left'
+            ? `${column.getStart('left')}px`
+            : undefined,
+        opacity: 0.98,
+        position: 'sticky',
+        right:
+          isColumnPinned === 'right'
+            ? `${getTotalRight(table, column)}px`
+            : undefined,
+        zIndex: 1,
       }
     : {};
 

diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml