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

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.

[06b]

I’ve tested the following scenarios:

• When a data table is loading…

  • a default loading message is present.
  • 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.
  • 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.
  • 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…

  • a default no data message is present.
  • 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.
  • 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.
  • 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…

  • 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.
  • 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.
  • 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.
  • 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.
    • 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. 👍

[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