fix: table sticky column z-index

razorpay · Aug 19, 2024 · 4df1a64 · 4df1a64
1 parent 69155cf
commit 4df1a64
Show file tree

Hide file tree

Showing 2 changed files with 10 additions and 7 deletions.
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}
     `,

diff --git a/packages/blade/src/components/Table/tokens.ts b/packages/blade/src/components/Table/tokens.ts
@@ -1,7 +1,7 @@
 import { AlertCircleIcon, CheckIcon } from '~components/Icons';
 import { size } from '~tokens/global';
 
-const firstColumnStickyHeaderFooterZIndex = 2;
+const firstColumnStickyZIndex = 2;
 
 const refreshWrapperZIndex = 3;
 
@@ -145,7 +145,7 @@ export {
   tablePagination,
   refreshWrapperZIndex,
   tableBackgroundColor,
-  firstColumnStickyHeaderFooterZIndex,
+  firstColumnStickyZIndex,
   checkboxCellWidth,
   tableEditableCellRowDensityToInputSizeMap,
   validationStateToInputTrailingIconMap,