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

Show loading message for b-table. #1859

Closed
hifall opened this issue May 30, 2018 · 30 comments

Comments

Projects
None yet
4 participants
@hifall
Copy link

commented May 30, 2018

There is already a show-empty message when a b-table is empty. However, when a b-table is still being loaded, this message appears, which causes confusion.

I suggest to implement show-loading attr for b-table.

Thanks!

@ghenry

This comment has been minimized.

Copy link
Contributor

commented Aug 8, 2018

Is it possible to render the middle of the table dependant on isBusy?

I'd like to show a spinner. The correct way however is the show-loading prop.

@tmorehouse

This comment has been minimized.

Copy link
Member

commented Aug 8, 2018

A "busy" table uses CSS styling (via .b-table[aria-busy="true"] selector). You can override this style with your own CSS,

@ghenry

This comment has been minimized.

Copy link
Contributor

commented Aug 8, 2018

@ghenry

This comment has been minimized.

Copy link
Contributor

commented Aug 13, 2018

Are there any other components source I can read that allow another component to be used to do something that you recommend?
I want to add the ability to do bang in the middle of the table. I think this is a good example:

https://bootstrap-vue.js.org/docs/components/input-group ()

I'll look there.

@maverickpravin

This comment has been minimized.

Copy link

commented Oct 10, 2018

Apart from @tmorehouse suggestion. is there any other solution to this situation via Vuejs/Javascript ?

@ghenry

This comment has been minimized.

Copy link
Contributor

commented Oct 10, 2018

I'm still looking to use my spinner, but haven't had time to look into the best way.

@maverickpravin

This comment has been minimized.

Copy link

commented Oct 10, 2018

@ghenry using a spinner component is not a problem, if bootstrap exposes a state of data-loading/isBusy in b-table

@ghenry

This comment has been minimized.

Copy link
Contributor

commented Oct 10, 2018

Sure, I know it does, but I want the spinner to be inside the table.

@ghenry

This comment has been minimized.

Copy link
Contributor

commented Nov 2, 2018

Any more thoughts on this?

@tmorehouse

This comment has been minimized.

Copy link
Member

commented Nov 2, 2018

You could place your table followed by a spinner component inside a div element as such:

<div class="table-container">
  <b-table busy.sync="isBusy" ... >
  </b-table>
  <my-spinner v-if="isBusy" class="table-spinner" />
</div>

and use a CSS sibling selector to position the spinner when busy

.table-container: {
  position: relative;
  width: 100%;
}
.b-table[aria-busy="true"] + .table-spinner {
  /* this assumes that the spinner component has a width and height */
  position: absolute;
  left: 50%
  top: 50%;
  transform: translate(-50%, -50%);
  z-index: 10; /* make sure spinner is over table */
}
@tmorehouse

This comment has been minimized.

Copy link
Member

commented Nov 2, 2018

You can also change the text/content of the empty slot depending on the state of the busy prop (use busy.sync="..." to get the busy state of the table)

@ghenry

This comment has been minimized.

Copy link
Contributor

commented Nov 2, 2018

Brilliant! Thank you. I will try both out.

@ghenry

This comment has been minimized.

Copy link
Contributor

commented Nov 2, 2018

Hi,

I've tried this but only the busy css class is showing:

              <template 
                v-if="isBusy" 
                slot="empty">
                <spinner />
              </template>
            </b-table>
@ghenry

This comment has been minimized.

Copy link
Contributor

commented Nov 2, 2018

Nm:

              <template 
                slot="empty">
                <spinner v-if="isBusy" />
              </template>
            </b-table>

However, this only shows on initial loading not when I use the pager. I think I need to set isBusy in my paging provider. Thanks!

@tmorehouse

This comment has been minimized.

Copy link
Member

commented Nov 2, 2018

I would move the v-if to the inside of the empty slot

<b-table busy.sync="isBusy" ... >
  <template slot="empty">
    <div v-if="isBusy" class="text-center">
      <spinner />
    </div> 
    <div v-else class="text-center">
      No rows to display!
    </div> 
  </template>
</b-table>
@ghenry

This comment has been minimized.

Copy link
Contributor

commented Nov 2, 2018

Great idea, thank you. I just need to set isBusy when I fetch my data when paging.

@ghenry

This comment has been minimized.

Copy link
Contributor

commented Nov 2, 2018

By the way, brilliant to have you around Troy. Been following the tons of commits you've been doing via the Watch tool. Excellent work.

@ghenry

This comment has been minimized.

Copy link
Contributor

commented Nov 3, 2018

Using vue devtools I can see isBusy is changing when I use my own provider and click different paging options, but my spinner never shows. Only on initial data loading does it show. Any ideas?

@ghenry

This comment has been minimized.

Copy link
Contributor

commented Nov 3, 2018

i.e. I've not had to do anything at all other than set busy.sync (which is great).

@ghenry

This comment has been minimized.

Copy link
Contributor

commented Nov 3, 2018

So I don't think the empty slot is rendered when paging?

@tmorehouse

This comment has been minimized.

Copy link
Member

commented Nov 3, 2018

Usually if the provider has not returned yet, the items list internally becomes an empty list. And then when the provider function returns the list is updated. But if this sequence happens fast, before the DOM gets re-rendereed/patched by Vue (think of $nextTick()`), then the table will not show empty (as the internal copy of the items changes from an empty array to populated before reactivity gets a chance to run)..

@ghenry

This comment has been minimized.

Copy link
Contributor

commented Nov 3, 2018

@ghenry

This comment has been minimized.

Copy link
Contributor

commented Nov 5, 2018

The query is a promise too using vuex-rest-api so that would explain it too.

@tmorehouse

This comment has been minimized.

Copy link
Member

commented Nov 14, 2018

we might be able to add a dedicated slot for busy, which would replace the currently loaded rows with whatever your custom content is in the slot.

I'll add this as a feature request for a future release.

@ghenry

This comment has been minimized.

Copy link
Contributor

commented Nov 14, 2018

tmorehouse added a commit that referenced this issue Nov 18, 2018

feat(table): Add table-busy slot for loading status. Fixes #1859
Adds a new slot `table-busy` which allows users to display a loading message when the table is in the busy state.

If no `table-busy` slot is present, the current rows are displayed (as was the behaviour before)

Closes #1859

tmorehouse added a commit that referenced this issue Nov 19, 2018

feat(table): Add table-busy slot for loading status. Closes #1859 (#2196
)

* feat(table): Add table-busy slot for loading status. Fixes #1859

Adds a new slot `table-busy` which allows users to display a loading message when the table is in the busy state.

If no `table-busy` slot is present, the current rows are displayed (as was the behaviour before)

Closes #1859

* document new slot in package.json

* Update README.md

* Create table-busy.spec.js

Add test suite for b-table busy state
@tmorehouse

This comment has been minimized.

Copy link
Member

commented Nov 19, 2018

@ghenry PR #2196 added in a new slot for table-busy. Whenever the table is in the busy state, and the named slot exists, then the content of that slot will be show instead of an empty table or previously rendered rows.

@ghenry

This comment has been minimized.

Copy link
Contributor

commented Nov 19, 2018

@ghenry

This comment has been minimized.

Copy link
Contributor

commented Mar 21, 2019

Finally got back to this. So this is great! However, I'm wondering how I can keep the table the same height like the default busy table loading does so the paging controls don't shoot up and down due to the height of my spinner.

@tmorehouse

This comment has been minimized.

Copy link
Member

commented Mar 21, 2019

You would need to set a height on your busy content.

Just before you set it busy, use the DOM querySelector to get the getComputedStyle().height of the tbody. then use that to calculate a height for your busy content container. then set your table to busy.

@ghenry

This comment has been minimized.

Copy link
Contributor

commented Mar 21, 2019

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.