[Feature Request] Add empty state

[ndabAP]

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]

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.

[peterthomassen]

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.)

[KaelWD]

but no image can be set

There is a no-data slot too.

[peterthomassen]

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.)

[06b]

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.

[peterthomassen]

How about a v-if inside the no-data slot, to distinguish these two cases?

[06b]

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™" :)

[johnleider]

Since this component is very basic, I have no issues with implementing it. However, it's not going to make v2.0 release.

[johnleider]

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.

[mertyertugrul]

I am looking forward to this.

[TibebeJS]

any update/progress on this component please