Vuetify: [Feature Request] Add empty state
What problem does this feature solve?
It's part of the Material Design guidelines and provides user friendliness.
What is your proposed solution?
An empty state component to be inserted everywhere, like here.
ndabAP
All 10 comments
what do you mean by empty state
A call to action to increase the user engagement. I think it's pretty clear.
The answer to that question is completely related to the project and the use cases
Most real world examples from Google consist of an image and a text. The table component already supports the empty state with the property no-data-text. My use case would be the first example at the Material Design guidelines. It's used at Google Inbox.
Would you have an empty state for a button?
I don't see any purpose here. There is no real world example as I know.
ndabAP
on 17 Jul 2018
I agree. I would think that most data tables need an empty state. This is already supported through no-data-text, but no image can be set. However, the Material Guidelines say:
The most basic empty state consists of a non-interactive image and a text tagline.
It would be nice if that "most basic" interpretation would be supported. A neutral image default might not hurt, either.
(From the quote, you can also see that buttons usually are not in scope for this.)
peterthomassen
on 30 Jul 2018
but no image can be set
There is a no-data slot too.
KaelWD
on 30 Jul 2018
aha! In that case, I concur and don't think anything needs to be done. (I missed in the docs that the table with the props also has a "slots" tab. Still new -- sorry.)
peterthomassen
on 30 Jul 2018
Depending on the application I can see some cases where the no-data slot could work for an empty state, but I think there is still some validity to adding an empty state slot in addition to having a no data state.
For example - a no-data slot that states "No Data - Please adjust your filter criteria and try again." might be a correct statement to give a user however that message might not be the best first impression to give a user.
06b
on 27 Aug 2018
How about a v-if inside the no-data slot, to distinguish these two cases?
peterthomassen
on 27 Aug 2018
The funny thing is I'm actually doing a v-if already in the no-data slot related to #4965 in the project I'm working on and I happen to be hiding the data-table for my empty state, but every project is different.
Ultimately "It Dependsâ„¢" :)
06b
on 27 Aug 2018
Since this component is very basic, I have no issues with implementing it. However, it's not going to make v2.0 release.
johnleider
on 11 Jun 2019
To give everyone an update. @DRoet is going to champion the development of this component. It's being moved off of a minor release in 2.x due to the upcoming release of Vue 3 and the preparations that are being taken to prepare for it.
johnleider
on 15 Jan 2020
I am looking forward to this.
mertyertugrul
on 24 Mar 2020
Related issues
Antway
·
3Comments
chriswa
·
3Comments
efootstep
·
3Comments
aaronjpitts
·
3Comments
sebastianmacias
·
3Comments
Most helpful comment
To give everyone an update. @DRoet is going to champion the development of this component. It's being moved off of a minor release in 2.x due to the upcoming release of Vue 3 and the preparations that are being taken to prepare for it.