diff options
| author | FIN-IT_AndriFP <andrifebriyadiputra@gmail.com> | 2026-01-09 10:57:14 +0700 |
|---|---|---|
| committer | FIN-IT_AndriFP <andrifebriyadiputra@gmail.com> | 2026-01-09 10:57:14 +0700 |
| commit | bab9bfaeeab2ba13bba1d7ed02e25b5384919bf9 (patch) | |
| tree | 997b2f12939d2f5264a865bb2a89fb185c105146 | |
| parent | b45835a01655b67f52ebd933f3d2c07d803f6aaf (diff) | |
(andri) fix sticky header
| -rw-r--r-- | src-migrate/modules/product-detail/components/ProductDetail.tsx | 46 |
1 files changed, 25 insertions, 21 deletions
diff --git a/src-migrate/modules/product-detail/components/ProductDetail.tsx b/src-migrate/modules/product-detail/components/ProductDetail.tsx index 983cb843..5a2ad093 100644 --- a/src-migrate/modules/product-detail/components/ProductDetail.tsx +++ b/src-migrate/modules/product-detail/components/ProductDetail.tsx @@ -572,10 +572,9 @@ const ProductDetail = ({ product }: Props) => { {topHeaders.map((th, idx) => ( <Th key={`top-${idx}`} - // STICKY HEADER BARIS 1 position={idx === 0 ? "sticky" : "static"} left={idx === 0 ? 0 : undefined} - zIndex={idx === 0 ? 22 : 20} + zIndex={idx === 0 ? 22 : 20} boxShadow={idx === 0 ? "2px 0 5px -2px rgba(0,0,0,0.2)" : "none"} bg="red.600" @@ -596,25 +595,30 @@ const ProductDetail = ({ product }: Props) => { {/* Baris 2: Sub Header */} <Tr> - {subHeaders.map((sub, idx) => ( - <Th - key={`sub-${idx}`} - position={idx === 0 ? "sticky" : "static"} - left={idx === 0 ? 0 : undefined} - zIndex={idx === 0 ? 21 : 1} - boxShadow={idx === 0 ? "2px 0 5px -2px rgba(0,0,0,0.2)" : "none"} - color="white" - textAlign="center" - fontSize="xs" - textTransform="none" - verticalAlign="middle" - whiteSpace="nowrap" - bg="red.600" - pt={1} pb={1} - > - {sub.label} - </Th> - ))} + {subHeaders.map((sub, idx) => { + const isFirstHeaderGroup = topHeaders[0]?.type === 'group'; + const shouldSticky = idx === 0 && isFirstHeaderGroup; + return ( + <Th + key={`sub-${idx}`} + position={shouldSticky ? "sticky" : "static"} + left={shouldSticky ? 0 : undefined} + zIndex={shouldSticky ? 21 : 1} + boxShadow={shouldSticky ? "2px 0 5px -2px rgba(0,0,0,0.2)" : "none"} + + color="white" + textAlign="center" + fontSize="xs" + textTransform="none" + verticalAlign="middle" + whiteSpace="nowrap" + bg="red.600" + pt={1} pb={1} + > + {sub.label} + </Th> + ); + })} </Tr> </Thead> |