Add new commonly needed layouts

[lukemelia]

• [ ] layout that supports fixed num of columns and uses percentages to set widths with variable height rows
• [ ] layout that supports fixed num of columns and fixed height

[shaunc]

How about also:

• [ ] layout that supports callbacks for item height and width

[lukemelia]

@shaunc :+1:

[seanrucker]

Do any of the current layouts support a row with a 100% width?

[raytiley]

I'm going to work on some of these in the next few days.

[danielspaniel]

Is there a layout for making one column that is fixed ( does not scroll horizontally ) , and the rest scroll horizontally if the width overflows the collection width. But the whole collection still scrolls vertically. Kind of like what ember-table has for their financial table example. I wonder if that is what the mixed grid layout is for? If you need any help implementing this I would be happy to chip in.

[krisselden]

This would be better done with a combo of ember-collections and a truly fixed grid that doesn't wrap. Basically a spreadsheet view I'm assuming. The problem with doing it with one is the scrollbar is in the wrong place, you just want the headers to mirror the offset but be just overflow hidden

[danielspaniel]

That happens to be exactly what I am doing. Using 2 ember-collections that is. Yes, it's the basic spreadsheet view.
Right about the scrollbars. That is kinda tricky. I guess I was hoping there was a way to use just one ember-collection because there was a case where I was having performance issue with both collections running requestAnimationFrame loops. It's not tragic or anything, but was just hoping to cut down on extra unnecessary loopyness.

[nkgm]

Layout that supports section headers/footers?

[camunching]

I'm trying to build the spreadsheet view described by @danielspaniel and am having some difficulties.

Here is a twiddle with 3 questions: https://ember-twiddle.com/e897c3dd00a715ba827b. Would anyone be able to help me?

I also posted my questions on Stack Overflow: http://stackoverflow.com/q/35977293/6058374

[danielspaniel]

Here is what I am doing to get this layout:

https://ember-twiddle.com/e8f1f4fb075facace155

Now, this is only the start of your troubles.

Because

• you have to line up the header properly with a nice margin and keep that margin when scrolling it

• You have to hook up the javascriptyness to say: Hey .. you scrolled down ( y axis ) on the main content, so please, would you mind scrolling the fixed row content the same amount ( y axis ) .. pretty please?

• You have to make it so when you scroll ( y axis ) the fixed row content .. the main content is scrolled .. same ida.

• You have to hide the scroll bar on the first collection, easy, but not so easy.

  Then you just have to look around and make sure your still sane when it's all over.

[camunching]

Lol, thanks for taking the time to help me out, danielspaniel! I ended up using the Ember 2.0 branch of ember-table and finding that it was reasonably performant for our particular use case, thankfully!

But I'm planning on playing around with your Twiddle on the weekend using your suggestions. Thanks again!

[trisrael]

@danielspaniel did you end up using this approach?

I implemented this by scratch simply using some event listeners for my fixed left and my fixed header but am running into shady performance issues -- a user can notice a slight difference when scrolling, the scrollTop position is slightly off.

Was hoping using a library such as this one would help relieve these issues... but probably depends on my inner rendered components more... some of which are taking up to 5-15ms currently to render :/.

Just wondering where you finally ended up on this common problem.

[danielspaniel]

Not sure what you mean by "this approach" @trisrael ? the ember-table one?

I did not use ember-table. from what I saw of ember-table there was way too much stuff I had to paste together to get the table working. Does not mean it's not a good idea one day to use it ( when they switch to ember 2 and it's all supported. I just don't love using something that is so far behind in their upgrades/updates etc.

I still use the 2 ember-collections. The setup is very very specific in that I am using some special css , html table/tr/td elements, js scrollbars , and custom js listeners ( to scroll events ) to make it all look perfectly smooth. I have some heavy duty rows being computed so the scrolling is not lightning fast, but it is even and both sides scroll at the same time with no funny business.

It is the kind of thing I could put in an ember twiddle, but it would take a while, and I don't know if I can even include other addon's so might be not possible. I could just show you on Screen Hero if you want. Easier for me frankly .

[trisrael]

@danielspaniel

Yea no, I meant the ember-collections approach for sure.

Screen hero would be great but not necessary.

I imagine the approach is not too different from my none ember-collections one. Just wondering about the benefits/tradeoffs of moving to ember-collections for this use case (spreadsheet).

I was hoping specifically it would have some off viewport optimizations (i.e: lazy rendering) that would come out of the box, as my own naive first attempts at using ember-in-viewport directly cause a truly jagged scroll experience.

Also wondering whether it's possible/worth it for this to be a fully supported ember-collections layout eventually. From my quick glances at the current layouts I'd have to say not easily at the very least.

[danielspaniel]

Well, the benefit is that ember-collection is being maintained while ember-table just seems like it is abandoned. And even with all the little things I did to make it work, it is still much less code that the ember-table would be ( tons of setup for that .. and that seems silly to me )

I tried to make a twiddle even though I told you I would not bother, because twiddle supports addons now. I stopped because while it supports loading the addon the ember-collection could still not be used because of a helper that was not available ( oh well )

But really .. I don't mind showing you what I slapped together. If you want to see it .. just holler.

Could it be a layout. Not really because it's not a layout. It's a way of putting 2 collections together. I use the same layout for both. The tricks are just doing the javascript for the header and managing the scroll behavior between the 2.