What's the best way to manage tables in Hype

Simple question but can’t find anything that really addresses this on the forums.

Hype has elements, but no table element. We often have to use tables in our content, particularly to show data or let users enter data.

I’d like to template something with styles that are automatically applied by our external timesheet. If possible though, I’d like our content designers not have to get into laying out tables with HTML. We try to separate code from content as much as possible as most of our developers are SMEs in learning content, with minimal or no coding experience.

Currently, our content is only viewed on iPads so we don’t need anything responsive. The quick and dirty solution we currently use is a simple screenshot of a standard table template in iBooks which allows developers to quickly generate what they need. However, in the future, we may well need something responsive, so I’m not sure there’s any way around having our developers actually code some stuff.

Anyone have any suggestions on how to handle this? TIA.

Maybe an example of whst we would be looking at…

But I would think if I understand correctly,
Is the template has code that generates the tables in named elements dynamically

And the elements added and named by your devs.

But as i said an example of the end result and an explanation of what is templated and dev entered? Would help give better suggestions

If you want to separate the Data out of your Hype-File use Vue.js. it is very powerful and can be used easily (with some coding knowledge, willingness to use another tool). This way you can render the table into any DIV inside of your Hype-Project:

Checkout this component (based on bootstrap):

To install you would probably use the “browser” variation:

(click on browser right hand)

Don’t forget to also include Vue.js (and read the getting started, really straight forward):

1 Like

ha… some would argue that Vue does the exact opposite of separating concerns by having HTML/CSS/JS all in one file.

Sorry, I’m not explaining myself too well I guess.

@MarkHunte: your hunch was right. Our devs would add elements and then simply apply something like a class name and a table would be generated dynamically.

So, for example, see attached file. This makes it really simple for devs to build tables that are already styled as per our branding.

However, you’ll see from the file that all is not right in Tableville. Firstly, Snap Elements leaves a 2px (roughly) gap between elements. I’m wondering if it’s the fact that we have a standard 0.25px border on our cells and this messes with whatever tolerance Hype uses to implement Snap Elements. We really need to leave Snap Elements on for this to work efficiently.

Secondly, the header has a blue bottom border which looks fine on the first column, but seems to be overlapped by the first cell in the second column just a tad. Zooming in to about 800% makes this clear. Why this is happening is a mystery to me as everything has the same styling. Any ideas?

tablestrial.hype.zip (40.7 KB)

would really love to hear anyone’s suggested solutions for issues in the file attached to my last message.

bump :wink:

Ok, so I did have a look.

I like the approach you are using to build the table .i.e headers and cells.

The designer just needs to place the elements, add the classes and inner html.

The css then just styles them.

But I have been struggling to fully understand your needs.

Apart from the snap and border issues which in part may be due to css clash with hype

What are you goals, what are the changes in what you are doing you want to make. What are you expecting of a template, what do you expect to happen when a designer opens it. What will they be doing. What will the css or indeed js be doing…

Please explain in steps in a way that we can follow a workflow.

Thanks for having a look Mark.

Sorry… it’s best to forget my initial post which was really vague and probably not helpful because I had no idea how to approach this at the time.

Now that I have something I’m attempting to produce to meet our needs (attached previously), the main issue is the snap and border issues. If you can help with how we work within Hype to get that work with our CSS, that would be great.

It looks like the main issue may be with the way you are using your css.

In the template,

I have removed all borders using the Hype border properties for cells and header elements.

Removed all padding from css.

Removed the cell class from header elements and changed how your borders work in the header and cells so
they all have borders right and left, top and bottom. Basically simplified it and no worry about css order overriding each other.

So now because we have our own css for the borders the snap does not see them and actually overlaps them to look the correct width. ( This is also why I removed the padding )

tableHeaderCells.hypetemplate.zip (28.9 KB)

Also remember once the Template is opened you can duplicate a cell or header be selecting one, hold down the option key and drag it away and drop. A duplicate with all the same properties will be created.

1 Like

thanks for attempting this for us. Unfortunately, your solution is running into the same issues as ours in that there’s a gap between two cells which snap.

Here’s an 800% shot of your solution as you gave it to me:

Then I try to snap it to the cell above and this is the result:

I’ve lowered the opacity on the lower cell so that you can see it overlaps the cell above (and to the right incidentally). I’m pretty sure that the issue here is caused by the 0.25px we have used previously as standard. This is because it’s the standard “thin” border in a table in iBooks Author so we’ve inherited that from our software. All Apple’s fault for creating an excuse with Retina screens for less than 1px values!

Messing around with the CSS, I discovered that by enlarging the border to 1px and changing the colour to the lighter #DADADA from our corporate colour palette, we get a style that is almost identical and allows snapping in the way we expect. We’re going to go with that. Thanks for helping us troubleshoot this.

Maybe this helps…

box-sizing: border-box

1 Like

yep… that was really helpful and immediately cleared up the issues with Mark’s file.

I also discovered that, unbeknown to me, the cells on my original had a 1px grey border applied in the Element inspector. It seems that, for some arbitrary reason, whoever coded elements decided that we all need a 1px border.

I note that the request for us to set our own default styles was made in May 17. Let’s hope it’s implemented soon.