diff options
| author | FIN-IT_AndriFP <andrifebriyadiputra@gmail.com> | 2026-01-09 10:33:14 +0700 |
|---|---|---|
| committer | FIN-IT_AndriFP <andrifebriyadiputra@gmail.com> | 2026-01-09 10:33:14 +0700 |
| commit | b45835a01655b67f52ebd933f3d2c07d803f6aaf (patch) | |
| tree | f41d5e5a15e9a6a8c8c2e1e1301c390a351adf04 /src-migrate | |
| parent | cc12fccc972dc4f5533a05742090bd0f1c5a3d4b (diff) | |
(andri) ganti sticky variant kolom pertama menjadi attribute code pertama dari magento
Diffstat (limited to 'src-migrate')
| -rw-r--r-- | src-migrate/modules/product-detail/components/ProductDetail.tsx | 58 |
1 files changed, 25 insertions, 33 deletions
diff --git a/src-migrate/modules/product-detail/components/ProductDetail.tsx b/src-migrate/modules/product-detail/components/ProductDetail.tsx index 387a7e5f..983cb843 100644 --- a/src-migrate/modules/product-detail/components/ProductDetail.tsx +++ b/src-migrate/modules/product-detail/components/ProductDetail.tsx @@ -567,27 +567,20 @@ const ProductDetail = ({ product }: Props) => { return ( <Table variant="simple" size="md"> <Thead bg="red.600" position="sticky" top={0} zIndex={20}> + {/* Baris 1: Header Utama */} <Tr> - <Th - position="sticky" left={0} top={0} zIndex={21} bg="red.600" - rowSpan={2} - width="25%" - minW="100px" - borderColor="whiteAlpha.300" color="white" - fontSize="sm" textTransform="none" verticalAlign="middle" - textAlign="center" - boxShadow="2px 0 5px -2px rgba(0,0,0,0.1)" - > - Variant - </Th> - {topHeaders.map((th, idx) => ( <Th key={`top-${idx}`} - position="sticky" top={0} zIndex={20} bg="red.600" + // STICKY HEADER BARIS 1 + position={idx === 0 ? "sticky" : "static"} + left={idx === 0 ? 0 : undefined} + zIndex={idx === 0 ? 22 : 20} + boxShadow={idx === 0 ? "2px 0 5px -2px rgba(0,0,0,0.2)" : "none"} + + bg="red.600" colSpan={th.colSpan} rowSpan={th.rowSpan} - // borderColor="whiteAlpha.300" color="white" textAlign="center" fontSize="sm" @@ -600,11 +593,16 @@ const ProductDetail = ({ product }: Props) => { </Th> ))} </Tr> + + {/* Baris 2: Sub Header */} <Tr> {subHeaders.map((sub, idx) => ( <Th key={`sub-${idx}`} - // borderColor="whiteAlpha.300" + 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" @@ -621,39 +619,33 @@ const ProductDetail = ({ product }: Props) => { </Thead> <Tbody> - {/* MENGGUNAKAN sortedVariants HASIL REVISI */} {sortedVariants.map((v, vIdx) => ( <Tr key={v.id} bg={vIdx % 2 === 0 ? 'white' : 'gray.50'}> - {/* 1. KOLOM JUDUL VARIANT (Sticky Kiri) */} - <Td - position="sticky" left={0} zIndex={15} - bg={vIdx % 2 === 0 ? 'white' : 'gray.50'} - fontWeight="bold" borderColor="gray.200" fontSize="sm" - verticalAlign="middle" - boxShadow="2px 0 5px -2px rgba(0,0,0,0.05)" - minW="100px" - textAlign="center" - whiteSpace="normal" - py={4} - > - {v.attributes && v.attributes.length > 0 ? v.attributes.join(' - ') : v.code} - </Td> - {/* 2. KOLOM DATA SPESIFIKASI */} {flatSpecs.map((spec, sIdx) => { const rawValue = spec.values[v.id] || '-'; + const isFirstCol = sIdx === 0; return ( <Td key={sIdx} + // === LOGIC STICKY DATA PERTAMA === + position={isFirstCol ? "sticky" : "static"} + left={isFirstCol ? 0 : undefined} + zIndex={isFirstCol ? 10 : 1} + bg={vIdx % 2 === 0 ? 'white' : 'gray.50'} + boxShadow={isFirstCol ? "2px 0 5px -2px rgba(0,0,0,0.1)" : "none"} + // ================================= + borderColor="gray.200" textAlign="center" fontSize="sm" verticalAlign="middle" px={2} py={3} - minW="100px" + minW="100px" maxW="150px" whiteSpace="normal" overflowWrap="break-word" + fontWeight={isFirstCol ? "bold" : "normal"} > {renderSpecValue(rawValue)} </Td> |