Vuetify: [Feature Request] Add loading text/slot to data-table

[06b]

Problem to solve

Currently the data-table shows "No data available" when loading - if a response takes a while, a user might ignore the loading progress bar and assume that there is no data to display and leave the page.

Proposed solution

Being able to change the text via a loading-text property would probably be enough to solve this problem.

Currently adding a no-data slot appears to replace the loading text which is why I suggested possibly adding a loading slot but I think as long as the no-data slot doesn't replace the proposed loading-text property while it's loading then a loading slot probably wouldn't be needed.

[blalan]

Couldn't you in your no-data slot use a data prop that you update in your data getting function? Like:
https://codepen.io/blalan/pen/PdNypE
Or Even:
https://codepen.io/blalan/pen/xaVyyE

[chewy94]

Yeah I think we can just use Vue here. I think what @blalan suggested is perfect 😄

[06b]

And that's what I'm doing currently however things can get a bit messier which trying to do something such as #4610 with data tables. (For the record, I think adding a loading slot would be overkill)

I didn't expect the no-data slot to replace the loading text and maybe that's considered a bug or maybe it's as intended and should be added to the documentation so other people don't run into the same issue.

Seems like being able to add a loading-text property was suggested in #754 but it wasn't using the issue creator so it got closed. So I figured this was more along the lines of a feature request rather than a bug.

[basselAhmed]

@nekosaur Vuetify has a loading-text prop already, I think this issue should be closed, what do you think?
cc. @johnleider

[06b]

I've tested the following scenarios:

• When a data table is loading...

  • [x] a default loading message is present.
  • [x] if the loading-text prop is present the data table correctly shows the loading message from the loading-text prop instead of the default loading message.
  • [x] if the no-data-text prop is present but the loading-text prop is not present, the data table correctly shows the default loading message instead of the no-data-text prop.
  • [x] if the loading slot is present, the data table correctly shows the content from the loading slot instead of the default loading message & the loading-text prop. ¯\_(ツ)_/¯ _The only use case I could think of where this might happen is if someone copy & pastes from the docs where the loading-text prop is shown and then adds a loading slot and forgets to remove the loading-text prop._

• When a data table has no data....

  • [x] a default no data message is present.
  • [x] if the no-data-text prop is present the data table correctly shows the text from the no-data-text prop instead of the default no data message.
  • [x] if the loading-text prop is present but the no-data-text prop is not present, the data table correctly shows the default no data message instead of the loading-text prop.
  • [x] if the no-data slot is present, the data table correctly shows the content from the no-data slot instead of the default no data message & the no-data-text prop.

• When a data table has both the loading and no-data prop or slot...

  • [x] the data table correctly shows the text from the loading-text prop when loading and the text from the no-data-text prop when there is no data.
  • [x] the data table correctly shows the content from the loading-text slot when loading and the content from the no-data slot when there is no data.
  • [x] the data table correctly shows the content from the loading-text slot when loading and the text from the no-data-text prop when there is no data.
  • [x] the data table correctly shows the text from the loading-text prop when loading and the content from the no-data slot when there is no data.
    
    
    
    • [x] Confirmed that the no-data slot does not replace the loading-text prop while loading which is why I created this issue as this wasn't an expected behavior.
    
    

Confirmed & Closed. Good Job Everyone. 👍