Streaming live at 10am (PST)

Building Dynamic Comparison Table using Collection Lists

Hi everyone,

I’m wondering if it’s possible to create a comparison table like the attached, but using collection lists?

The example is taken from the Quicksmart webflow template, which will work fine if you want a static table with set prices and edit rarely.

But a client requires a comprehensive comparison chart, where data is pulled from a collection list, and therefore some items may differ in length within the rows.

I wasn’t sure how best to set this up or if it’s even possible. I was initially thinking to do it with CSS Grid, but the static headings on the left column would be difficult to align with content from the collection list if it dynamically changes in height. And as far as Im aware the collection list will remain in one cell on the grid - I can’t separate the collection list content within cells?

Has anyone done a dynamic comparison chart before? struggling here :smile:

Thank you.

Here is my site Read-Only: LINK
(how to share your site Read-Only link)

Hi, just having a look at this, I would say it’s possible.

It might be a little bit of a faff, but I would do it with static height row’s made up of individual DIVs, not the grid, as you cannot differentiate rows without having multiple collections (and there is performance issues there).

Hey @JSW thank you for your reply.

That makes sense, I’ll give it a go right now :smile:

@JSW I tried your suggestion and it’s a bit of a hack, and guess it works ok for desktop. But for smaller screens the column with the row headings takes up unnecessary space, therefore we’re unable to fit 2 comparison items side by side, only 1.

On this example when viewed on smaller screens, the Row Headings (projects, client billing, staging etc) become centre aligned, which works well, but obviously I can’t do that if the column was a collection list, because theres no way to separate the collection list out / fitting elements between it etc.

@matthewpmunger @PixelGeek @vincent do you dudes have any idea of how I can achieve it, using collection lists? Does this require custom code?

Thank you

1 Like

@Esteban Hey :wave:
My approach would be to have a parent grid that contains the row labels and 3 collection lists. With manual grid positioning the elements such as row headers can overlap the three vertical collection lists. Since subgrid is not available yet in browsers (this is a perfect use case for it), you’ll need to explicitly define the row heights using px.

For the small mobile breakpoint, I’d switch from grid to tabs for the collection list columns. Looks like you’re on the right path. Hopefully this helps. Key is using manual position to overlap grid children when necessary. Happy designing!

@matthewpmunger Hey dude! :wave: Thank you for the reply - much appreciated.

Sorry for the delayed response, I’ve just got around to working on the table this evening.

I think I’ve done what you’ve suggested? (I’ve only populated certain aspects from the collection lists here for the sake of testing it out).

Static Pages > Mattress Comparison

How do I get around the issue of the text taking more row height and not aligning with the row heading on the left? If you resize the browser you’ll notice the ‘material overview’ columns start to wrap onto 2 or 3 lines and therefore can overlap.

I noticed you said use tabs for mobile, but what if some of the content (even on desktop) is more than 2 or 3 lines to begin with??

Thank you

Hey @Esteban

Tweak the left-side with the following flexbox and width settings

Tweak the right-side with the following flexbox and width settings

These settings will allow the left side to grow and shrink first instead of the comparison right columns. If there are still lines that are too long, I’d decrease the font size and/or increase the row height. Same answer for the mobile view to get consistent rows.

Hope that helps. Happy designing!

1 Like

Thank you! I’ve never used those sizing settings before.

1 Like