Fixed Header, no Body

[muziejus]

First, I'm using @fran-worley's native class PR version of ELT (#701) on Ember 3.11. Everything seems to work fine, until I set fixed=true on the header. I've tried to reproduce this with a blank app, but I'm running into other problems related to Glimmer/Ember-cli/whatever, so I want to ask here before I spend more time trying to get the blank app to break in the way my app is!

Namely, this is the structure I get of my table:

Everything looks right, I think, but the view mussing about makes the div 0px tall (and when I change that, still the contents of the table aren't visible). I presume this is somehow related to #694, but my understanding of how ember-in-viewport works is nonexistent. I'd be able to use the system as is without a fixed header, but there are going to be many, many rows, and keeping the header visible is very, very preferred. Any ideas?

[muziejus]

I am able to get the table contents to appear if I force a height on .lt-body-wrap, but I suspect that's not a long-term solution? (that's #ember-369 in the image above)

[muziejus]

Similarly, forcing a height to .ember-light-table fixes the problem as well, but the solution is not as elegant as what I get with the header unfixed, which is that the table gobbles up the rest of the space it has available.

Fixed on:

Fixed off (you can see header scrolling away):

[fran-worley]

@muziejus had this been working in the past with older versions or are you new to ELT? Our funny app examples seem to be coping, even with the fixed headers but in fairness I've not run these of ember 3.11 yet!! I'll be running some visual tests prior to merging the main PR so I'll let you know if I can recreate otherwise a dummy app example might be necessary...

[muziejus]

Thanks for writing. I've never implemented ELT before, and I was holding off on my current project because of the native class syntax issue you already seemed to take care of.

To clarify, the invocation here:

https://github.com/wandertext/wandertext/blob/ember-table/app/templates/components/entry-grid-table.hbs

Should be sufficient (assuming fixed=true is also passed)? I don't have to explicitly declare the height, etc.?

[muziejus]

That is:

<div class="entry-grid flex-grow text-sm">
  {{#light-table this.table 
    as |t|}}
    {{t.head }}

    {{#t.body
      canSelect=false
          fixed=true
      onScrolledToBottom=(action this.onScrolledToBottom)
      rowComponent=(component "table-row" EntryValidations=this.EntryValidations)
      as |body|
    }}
    {{#if this.isLoading}}
        {{#body.loader}}
          <div class="h-full flex justify-center">
            <div class="m-auto flex flex-column">
              <p> class="text-3xl">Loading Entries</p>
          {{svg-jar "circle-o-notch" class="mx-auto text-primary-500 fill-current rotate" width="48" height="48"}}
            </div>
          </div>
        {{/body.loader}} 
      {{/if}}
    {{/t.body}}
      
    {{t.foot}}

  {{/light-table}}
</div>

[muziejus]

As for dummy apps, I've tried to make a blank octane app and get what I think is the most basic table imaginable:

https://github.com/muziejus/elt-octane-test

Which gives me the previously never seen Error: Compile Error: compute is not a helper which I suspect has something to do with glimmer?

Hopefully this kind of reporting is useful?

[fran-worley]

@muziejus I'm not entirely sure the cause of the compile error but it was also noted here - #703 (comment)

Thank you so much for your detailed information - rest assured, we'll get fixed headers working as it's pretty critical for most people. I'm pretty tied up this week but will try to find some time next week to work on the PR and review your issue in detail at the same time.

[muziejus]

Thanks! I've got a stable work around for the time being using boring tables that will get me through the summer I think, but I do want to be a part of the ELT community once I open up the app I'm working on!

Incidentally, I can confirm that at one point I had fixed headers and scrollToBottom working on my Octane app.

[fran-worley]

@muziejus you should find the compile error you were experiencing has been fixed in the beta 4 release (please note the breaking API changes before you upgrade!).

I believe that you need to set the height on the table itself when using fixed. See the example here http://offirgolan.github.io/ember-light-table/#/scrolling

If you are still having problems please reopen this issue.

[muziejus]

Super, thanks!