Skip to content

Fixes : [Pricing] Make Tier Comparison Header Sticky #6122 #6767

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Closed
priyanshu4999 wants to merge 12 commits into from
Closed

Fixes : [Pricing] Make Tier Comparison Header Sticky #6122 #6767

Changes from 8 commits
Commits
Show all changes
12 commits
Select commit Hold shift + click to select a range
5b5a15f
split comparison table to two stacked table for sticky head and scrol…
priyanshu4999 Aug 30, 2025
f3a7247
sync column widths of header and body tables of comparison component
priyanshu4999 Aug 30, 2025
afc37c5
Updated css , position sticky , overflow-x to scroll for body and vis…
priyanshu4999 Aug 30, 2025
df5ecb5
Removed Added Body-head scroll sync too, unwanted Formatting Changes
priyanshu4999 Aug 31, 2025
4e7e889
chore: fix lint error (trailing spaces)
priyanshu4999 Aug 31, 2025
5f79c51
Enabled table bottom scroll
priyanshu4999 Sep 1, 2025
6d47d9a
Merge branch 'master' into comparison-component
vr-varad Sep 1, 2025
be78861
Merge branch 'master' into comparison-component
vr-varad Sep 7, 2025
512d667
Merge branch 'master' into comparison-component
Namanv0509 Oct 8, 2025
239bbcb
Merge branch 'master' into comparison-component
Namanv0509 Nov 13, 2025
ce338d7
Merge branch 'master' into comparison-component
Namanv0509 Nov 14, 2025
38928c7
Merge branch 'master' into comparison-component
Namanv0509 Nov 26, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
151 changes: 107 additions & 44 deletions src/sections/Pricing/comparison.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,7 +4,7 @@ import details from "./generateDetails";
import { Container } from "../../reusecore/Layout";
// import FeatureDetails from "./collapsible-details";
import FeatureDetails from "../../components/Pricing/PlanCard/collapsible-details";

import { useRef } from "react";

const ComparisonWrapper = styled.div`
margin: 6rem auto;
Expand All @@ -20,14 +20,13 @@ h2, h5{
box-shadow: 0 0 24px ${props => props.theme.whiteOneFiveToBlackOneFive};
margin: 2rem auto;
display: block;
overflow-x: scroll;
overflow-y:hidden;
transition: 0.6s cubic-bezier(0.5, 1);
}
.price-table {
width: 100%;
border-collapse: collapse;
border: 0 none;
table-layout: fixed;
}
.price-table tr:not(:last-child) {
border-bottom: 1px solid ${props => props.theme.whiteZeroThreeToBlackZeroThree};
Expand Down Expand Up @@ -58,7 +57,22 @@ h2, h5{
}
.price-table tr:nth-child(even) {
}

.price-table-header-sticky {
overflow-x: scroll;
position: sticky;
top: -0.5rem;
scrollbar-color: ${(props) => props.theme.whiteZeroThreeToBlackZeroThree}
${(props) => props.theme.whiteZeroThreeToBlackZeroThree};
}
@media (min-width: 1100px) {
.price-table-header-sticky {
top: 0.5rem;
}
}
.price-table-body-scroll {
overflow-x: scroll;
scrollbar-width: auto;
}
.price-table tr:hover {
background-color: ${props => props.theme.secondaryLightColor};
transition: 0.6s cubic-bezier(0.5, 1);
Expand All @@ -69,7 +83,15 @@ h2, h5{
.price-table .fa-times {
color: #D8D6E3;
}

.price-table col {
width: 8rem;
}
.price-table col:nth-child(1) {
width: clamp(20rem, 40vw, 38rem);
}
.price-table col:nth-child(5) {
width: 9rem;
}
/* Highlighted column */

.price-table tr td:nth-child(3) {
Expand Down Expand Up @@ -192,53 +214,94 @@ td.feature {
`;

const Comparison = () => {
/* REF FOR SCROLL SYNC*/
const headerScrollRef = useRef(null);
const bodyScrollRef = useRef(null);
const handleHeadBodyScroll = () => {
bodyScrollRef.current.scrollLeft = headerScrollRef.current.scrollLeft;
};
const handleBodyHeadScroll = () => {
headerScrollRef.current.scrollLeft = bodyScrollRef.current.scrollLeft;
};
/* */
return (
<ComparisonWrapper >
<ComparisonWrapper>
<h2>Compare All Features</h2>
<h5 id={"feature-comparison"}>Choose a plan that’s right for you</h5>
<Container>
<div className="main">
<table className="price-table">
<tbody>
<tr>
<th className="price-blank"></th>
<th className="price-blank"></th>
<th className="price-table-popular">Most popular</th>
<th className="price-blank"></th>
<th className="price-blank"></th>
</tr>
<tr className="price-table-head">
<td></td>
<td>Free</td>
<td>Team Designer</td>
<td>Team Operator</td>
<td>Enterprise</td>
</tr>

{details.map((x) => (
<>
<tr key={x.id} >
<td className="categories" colSpan="5">
<img src={x.icon} height={32} className="category-icon" alt={x.category} />
<h3 className="category">{x.category}</h3></td>
</tr>
{x.features.map((f) => (
<tr key={f.feature}>
<td><FeatureDetails category={f.feature} description={f.description} /></td>
<td className="feature">{f.free}</td>
<td className="feature">{f.teamDesigner}</td>
<td className="feature">{f.teamOperator}</td>
<td className="feature">{f.enterprise}</td>
<div
className="price-table-header-sticky" ref={headerScrollRef} onScroll={handleHeadBodyScroll}>
<table className="price-table">
<colgroup>
<col />
<col />
<col />
<col />
<col />
</colgroup>
<tbody>
<tr>
<th className="price-blank"></th>
<th className="price-blank"></th>
<th className="price-table-popular">Most popular</th>
<th className="price-blank"></th>
<th className="price-blank"></th>
</tr>
<tr className="price-table-head">
<td></td>
<td>Free</td>
<td>Team Designer</td>
<td>Team Operator</td>
<td>Enterprise</td>
</tr>
</tbody>
</table>
</div>
<div className="price-table-body-scroll" ref={bodyScrollRef} onScroll={handleBodyHeadScroll}>
<table className="price-table">
<colgroup>
<col />
<col />
<col />
<col />
<col />
</colgroup>
<tbody>
{details.map((x) => (
<>
<tr key={x.id}>
<td className="categories" colSpan="5">
<img
src={x.icon}
height={32}
className="category-icon"
alt={x.category}
/>
<h3 className="category">{x.category}</h3>
</td>
</tr>
))}
</>
))}

</tbody>
</table>
{x.features.map((f) => (
<tr key={f.feature}>
<td>
<FeatureDetails
category={f.feature}
description={f.description}
/>
</td>
<td className="feature">{f.free}</td>
<td className="feature">{f.teamDesigner}</td>
<td className="feature">{f.teamOperator}</td>
<td className="feature">{f.enterprise}</td>
</tr>
))}
</>
))}
</tbody>
</table>
</div>
</div>
</Container>

</ComparisonWrapper>
);
};
Expand Down