fix(Table): table sticky column z-index (#2331)

* fix: table sticky column z-index * Create cyan-drinks-poke.md * fix: snapshots
razorpay · Aug 22, 2024 · 830c874 · 830c874
1 parent 0a5d0b4
commit 830c874
Show file tree

Hide file tree

Showing 4 changed files with 117 additions and 109 deletions.
diff --git a/.changeset/cyan-drinks-poke.md b/.changeset/cyan-drinks-poke.md
@@ -0,0 +1,5 @@
+---
+"@razorpay/blade": patch
+---
+
+fix(Table): table sticky column overlapping with relative cell
diff --git a/packages/blade/src/components/Table/Table.web.tsx b/packages/blade/src/components/Table/Table.web.tsx
@@ -16,7 +16,7 @@ import { TableContext } from './TableContext';
 import { ComponentIds } from './componentIds';
 import {
   checkboxCellWidth,
-  firstColumnStickyHeaderFooterZIndex,
+  firstColumnStickyZIndex,
   refreshWrapperZIndex,
   tableBackgroundColor,
   tablePagination,
@@ -169,14 +169,14 @@ const _Table = <Item,>({
   &:nth-of-type(1) {
     left: 0 !important;
     position: sticky !important;
-    z-index: ${firstColumnStickyHeaderFooterZIndex} !important;
+    z-index: ${firstColumnStickyZIndex} !important;
   }
   ${
     selectionType === 'multiple' &&
     `&:nth-of-type(2) {
     left: ${checkboxCellWidth}px !important;
     position: sticky !important;
-    z-index: ${firstColumnStickyHeaderFooterZIndex} !important;
+    z-index: ${firstColumnStickyZIndex} !important;
   }
   `
   }`
@@ -186,14 +186,14 @@ const _Table = <Item,>({
   &:nth-of-type(1) {
     left: 0 !important;
     position: sticky !important;
-    z-index: ${firstColumnStickyHeaderFooterZIndex} !important;
+    z-index: ${firstColumnStickyZIndex} !important;
   }
   ${
     selectionType === 'multiple' &&
     `&:nth-of-type(2) {
     left: ${checkboxCellWidth}px !important;
     position: sticky !important;
-    z-index: ${firstColumnStickyHeaderFooterZIndex} !important;
+    z-index: ${firstColumnStickyZIndex} !important;
   }
   `
   }`
@@ -203,12 +203,14 @@ const _Table = <Item,>({
   &:nth-of-type(1) {
     left: 0 !important;
     position: sticky !important;
+    z-index: ${firstColumnStickyZIndex} !important;
   }
   ${
     selectionType === 'multiple' &&
     `&:nth-of-type(2) {
     left: ${checkboxCellWidth}px !important;
     position: sticky !important;
+    z-index: ${firstColumnStickyZIndex} !important;
   }
   `
   }`
@@ -230,6 +232,7 @@ const _Table = <Item,>({
     `,
     HeaderCell: `
     position: ${shouldHeaderBeSticky ? 'sticky' : 'relative'};
+    
     top: ${shouldHeaderBeSticky ? '0' : undefined};
     ${firstColumnStickyHeaderCellCSS}
     `,