Rework frozen column shadow

README.md

@@ -187,9 +187,6 @@ The DataGrid supports the following CSS variables for customization:
   --rdg-summary-border-width: calc(var(--rdg-border-width) * 2);
   --rdg-summary-border-color: light-dark(#aaa, #555);
 
-  /* Frozen columns */
-  --rdg-cell-frozen-box-shadow: 2px 0 5px -2px rgba(136, 136, 136, 0.3);
-
   /* Checkboxes */
   --rdg-checkbox-focus-color: hsl(207deg 100% 69%);
 }

src/DataGrid.tsx

@@ -1190,6 +1190,11 @@ export function DataGrid<R, SR = unknown, K extends Key = Key>(props: DataGridPr
         gridTemplateRows: templateRows,
         '--rdg-header-row-height': `${headerRowHeight}px`,
         '--rdg-scroll-height': `${scrollHeight}px`,
+        '--rdg-frozen-column-shadow-index': lastFrozenColumnIndex + 2,
+        // TODO: optimize/memoize
+        '--rdg-frozen-column-shadow-start': `${Iterator.from(templateColumns)
+          .take(lastFrozenColumnIndex + 1)
+          .reduce((total, width) => total + parseFloat(width), 0)}px`,
         ...layoutCssVars
       }}
       dir={direction}

src/style/cell.ts

@@ -36,9 +36,36 @@ export const cellFrozen = css`
     /* Should have a higher value than 0 to show up above unfrozen cells */
     z-index: 1;
 
-    /* Add box-shadow on the last frozen cell */
-    &:nth-last-child(1 of &) {
-      box-shadow: var(--rdg-cell-frozen-box-shadow);
+    /* Add shadow after the last frozen cell */
+    [role='row']:has(> &) {
+      &::before {
+        content: '';
+        grid-column: var(--rdg-frozen-column-shadow-index);
+        width: 10px;
+        position: sticky;
+        inset-inline-start: var(--rdg-frozen-column-shadow-start);
+        background-image: linear-gradient(to right, rgb(0 0 0 / 50%), transparent);
+        pointer-events: none;
+        z-index: 1;
+
+        opacity: 1;
+        transition: opacity 0.1s;
+
+        @container rdg-root not scroll-state(scrollable: inline-start) {
+          opacity: 0;
+        }
+      }
+
+      &.rdg-header-row::before {
+        z-index: 3;
+        grid-row: 1;
+        /* TODO: fix for multiple header rows */
+        inset-block-start: 0;
+      }
+
+      &:dir(rtl)::before {
+        transform: scaleX(-1);
+      }
     }
   }
 `;

src/style/core.ts

@@ -16,7 +16,6 @@ const root = css`
     --rdg-selection-width: 2px;
     --rdg-selection-color: hsl(207, 75%, 66%);
     --rdg-font-size: 14px;
-    --rdg-cell-frozen-box-shadow: 2px 0 5px -2px rgba(136, 136, 136, 0.3);
     --rdg-border-width: 1px;
     --rdg-summary-border-width: calc(var(--rdg-border-width) * 2);
     --rdg-color: light-dark(#000, #ddd);
@@ -38,10 +37,6 @@ const root = css`
       color-scheme: light;
     }
 
-    &:dir(rtl) {
-      --rdg-cell-frozen-box-shadow: -2px 0 5px -2px rgba(136, 136, 136, 0.3);
-    }
-
     display: grid;
 
     accent-color: light-dark(hsl(207deg 100% 29%), hsl(207deg 100% 79%));
@@ -59,6 +54,9 @@ const root = css`
     color: var(--rdg-color);
     font-size: var(--rdg-font-size);
 
+    container-name: rdg-root;
+    container-type: scroll-state;
+
     /* needed on Firefox to fix scrollbars */
     &::before {
       content: '';

website/routes/CommonFeatures.tsx

@@ -33,7 +33,7 @@ const dialogContainerClassname = css`
   inset: 0;
   display: flex;
   place-items: center;
-  background: rgba(0, 0, 0, 0.1);
+  background: rgb(0 0 0 / 10%);
 
   > dialog {
     width: 300px;

website/routes/NoRows.tsx

@@ -14,7 +14,7 @@ const gridClassname = css`
 
 function EmptyRowsRenderer() {
   return (
-    <div style={{ textAlign: 'center', gridColumn: '1/-1' }}>
+    <div style={{ gridColumn: '1/-1', placeSelf: 'center' }}>
       Nothing to show{' '}
       <span lang="ja" title="ショボーン">
         (´・ω・`)