Hype with HandsOnTable

Using JavaScript with Hype
1

I’m trying to use hands on table - an excel like table solution found here

I’ve followed the test and everything is working well. However I’m getting strange double up of row headers etc and the example looks far from the polished example shown on the site.

Does anybody have experience with handsontable that could help?

Here’s the test hype document I’m using.

table.hype.zip (222.0 KB)

Still no luck. Any advice?

2

I am not sure the problem is with hype.

It Looks like the JS is is doing a clone from a master but displaying both sets. Have you tried creating it outside of hype to see what the result is

3

I stumbled across this javascript today…

http://jsfiddle.net/ondras/hyfn3/

It’s pretty amazing, just make a large box in Hype and put a simple table tag in the innerHTML and it works. You can actually use formulas in the cells ex. =a1+b1+c1 (in cell d1)

excel-js.hype.zip (10.3 KB)

2 Likes
4

Thanks, I’ll take a look at this one and see if I can pull in external data and push it back out to a database.

5

The person who posted the script @ jsfiddle also did some css styling on it. To add it to Hype, enter this in the head HTML…

<style>
input {
border: none;
width: 104px;
font-size: 14px;
padding: 2px !important;
}

input:hover {
background-color: #eee;
}

input:focus {
background-color: #ccf;
}

input:not(:focus) {
text-align: right;
}

table {
border-collapse: collapse !important;
border: 2px solid black !important;
}

td {
border: 1px solid #999 !important;
padding: 0 !important;
}

tr:first-child td, td:first-child {
background-color: #ebebeb !important;
padding: 1px 3px !important;
font-weight: bold !important;
text-align: center !important;
}
</style>

6

Ok I got some advice on my issue here

The table is cloned to allow for cell freezing apparently.

Here is the projects JSFiddle (link) - interestingly it looks styled even without any CSS which makes me think that Hype is doing/not doing something to affect the table layout. But I’m far from a CSS expert.

7

The fiddle page does have 3 external resources that are controlling the css (there is a drop down on the left hand side of the page for external resources)

8

huh… Ive been making input components throat my project with no problem but for some reason i can’t get a table to load in a rectangle element… I’m wondering if it has something to do with bootstrap. Has any one else use bootstrap of a hype project?