Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Render table in FastBoot #9

Open
billdami opened this issue Aug 5, 2020 · 0 comments
Open

Render table in FastBoot #9

billdami opened this issue Aug 5, 2020 · 0 comments
Labels
enhancement New feature or request help wanted Extra attention is needed

Comments

@billdami
Copy link
Member

billdami commented Aug 5, 2020

By default, table content is not rendered in FastBoot, as <VerticalCollection>'s occlusion rendering relies on DOM APIs and window measuring to work. We can disable this in FastBoot however, by setting it's @renderAll arg to true when this.fastboot.isFastBoot is true.

A few other changes would also likely need to happen to support this:

  • Make sure any DOM-related logic (e.g. updateColumnVisibility()/getElementWidth()) is made fastboot friendly, we should probably just exit out of that logic early in fastboot and make all columns visible (but make sure this has no fallout in layouts/tables with many columns, i.e. make sure the table container crops columns that extend beyond the container width.)
  • To assist in the issue mentioned above regarding tables w/many columns and overflowing the available width in the fastboot-rendered version, we could allow columns to optionally define a hideInFastboot: boolean property, so the app could decide what columns are shown/not shown in fastboot.

Alternative Solution

While unlikely, if none of the above is feasible, we could instead not show the table content at all in fastboot, but instead show a loading placeholder/skeleton UI in the fastboot-rendered version. This would most likely be done using https://github.com/michalsnik/ember-content-placeholders which we already use in our apps. The placeholder would mimic a table layout, matching the number of columns w/relative widths, and allow the number of "rows" to be optionally configured via a <Table> arg.

We could also allow passing in a @placeholderComponent={{string}} arg to the <Table> which could be used instead of the default placeholder component for a more custom layout.

@billdami billdami added enhancement New feature or request help wanted Extra attention is needed labels Aug 5, 2020
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
enhancement New feature or request help wanted Extra attention is needed
Projects
None yet
Development

No branches or pull requests

1 participant