Responsive Table Stacks


(Cathie Turner) #1

I need to do images with captions under them and later a pedigree. Is there a Table Stack that is responsive that I can use with Foundation?


(Robert Ziebol 🖖🏼) #2

The cool thing about Foundation, is (as long as the table is not too huge) it does a great job making any table stack responsive. We suggest you use PowerGrid CSV though.


(Psalm66_ Ray) #3

The provided link says this stack is not responsive.


(Mathew Mitchell) #4

You may want to check out this stack:
http://www.brynowendesign.com/stacks/FlexTable/

FlexTable is your only realistic choice at the moment. I like how FlexTable implements responsiveness. (And, yes, PowerGrid is not responsive.) If you have a relatively simple table responsiveness will work nicely, if it’s really complicated or with long text, then there can be issues with any stack.

I believe there are a few stacks out there that say they are responsive but do so by implementing horizontal scrolling. I’ve never found such scrolling to be obvious to use, or intuitive to implement, for end users. However, if you provide direct instructions to do so then one of those other stacks might work well. (I forget the names.)


(Robert Ziebol 🖖🏼) #5

As I mentioned, the cool thing about Foundation (which is what @sunbeam is using) is that it does a great job of making ANY table stack responsive.


(Joe Workman) #6

PowerGrid CSV actually has the ability to define the width of each column as a percentage which would make it respond to the browser width change. Tables are very very difficult to make responsive because the literally have a mind of their own. If you have too much data, the table will actually ignore your width settings and do whatever it wants to.


(Mathew Mitchell) #7

@sunbeam Joe W really hit the nail on the head stating that “Tables are very very difficult to make responsive because the literally have a mind of their own. If you have too much data, the table will actually ignore your width settings and do whatever it wants to.” So depending on the particulars, what you need may be easy, or hard, to do.

Here’s another alternative: consider creating/using a grid stack. There are several out there, and I believe some that come with Foundation theme. An additional free option is the Adaptive Grid stack: https://stacks4stacks.com/adaptivegrid/

You state you want: images, captions and a pedigree. I have no idea what a pedigree is (sorry), but your description sounds like a grid stack of some sort is likely the best solution. And there are several good responsive grid options.


(Cathie Turner) #8

I can see that this would work perfectly if all pictures and text the same size. I read the part about changing CSS but don’t see where to do that. This table is only two columns and I want each one to be 50% of the window - I will not show this page on phones. Since every other row is text I would also like to be able to make that row a shorter height.


(Cathie Turner) #9

This will certainly work and my tables are not complex. Also checking the workman stack but having trouble sizing there,


(Jörgen Aström) #10

This is also pretty cool:
http://zurb.com/playground/projects/responsive-tables/index.html


(Rob Beattie) #11

I made this responsive table with the Paritions stack. http://www.altereagles.co.uk/Gigs/

It’s from Kuler Solutions - though I can’t find it any more on their site. Maybe @Gary can advise?


(Ric) #12

Responsive Table by CosCulture serves me fairly well when I need product pricing:
http://www.cosculture.com/plugins-stacks/product/responsive-table/

It’s a bit hit and miss with large tables when the browser is reduced but for a fiver GBP might be worth a try.


#13

That is odd. His demo site is still there. Looks nice too.


(Stewart Holland) #14

Hi all, Got onto this thread when I was looking for a half-decent responsive table to list gigs. Thanks to robbeattie with his example http://www.altereagles.co.uk/Gigs/ I grabbed Partions2 stack. However the manual is pretty scant so is there a video out there somewhere or something. I need to vary the column width and ensure that the table is central on the page when viewed on all devices. Thanks for your help. Cheers.


(Rob Beattie) #15

Looks like Partitions has been dropped from the Kuler roster. However, we’ve taken this off forum to see if we can help out. :sunglasses:


(Andreas Vichr) #16

I am not sure if I should get PowerGrid or PowerGrid CVS. Is it so that PowerGrid CVS does everything that PowerGrid does? I don’t really need the CVS import. I want to manage the grids manually. But being able to define the width of each column as a percentage sounds great. Thanks for clarifying. And there is no more modern Grid Stack available - right? I will be using Foundation.