web-components
web-components copied to clipboard
vaadin
[grid] Add an empty state template (data source is empty)
It would be a nice feature to add an empty state template to the grid (same way as the row details) for when the data source is empty
Related issue in Framework Grid: https://github.com/vaadin/framework/issues/9070
Grid without an empty state template really look ugly and hamper overall user experience.
Want to know if there is any plan to implement this in the future.
There is now a cookbook example for GridFlow: https://cookbook.vaadin.com/grid-message-when-empty
Reopened because this is quite highly requested feature and we might consider implementing it in the component.
A separate message for when there IS data, but the current filters filter out everything, would be useful as well.
It's a bit of a hack but this worked for me:
In this case, the grid data is coming from this.keysArr and the vaadin-grid has id grid
grid() {
//@ts-ignore
return (this.root || this.shadowRoot).getElementById('grid')
}
updated(_changedProperties: any) {
if (this.keysArr.length == 0) {
if (this?.grid()?.shadowRoot) {
//remove the empty state if it already exists
if (this?.grid()?.shadowRoot?.querySelector('.emptystate')) this.grid().shadowRoot.querySelector('.emptystate').remove()
//add the empty state to the table
this.grid().shadowRoot.querySelector('tbody').insertAdjacentHTML('beforebegin', `
<div class="emptystate" style="display:flex;height:100%;width:100%">
<p style="margin:auto;font-weight:700;">No License Keys Provisioned.</p>
</div>
`);
}
}
}
Result:
I may add an arrow pointing to the button on the bottom later on.
Hope that helps!
A separate message for when there IS data, but the current filters filter out everything, would be useful as well.
Absolutely correct - we have this often. Alternatively there could be something like an EmptyMessageProvider, which receives information about the dataProvider an can return a String / Component accordingly
Another use case could be to show a loading indicator (i.e. skeleton loader) when grid has been initiated but data is not yet present. This should be different from empty data source.
I like the idea by @mheicke to have a generic but dynamic provider for the "no data" message – that way developers have maximum flexibility and the Grid doesn't have to be able to distinguish between different cases (which may be impossible to do automatically in many cases anyway).
As for the message itself, the simplest approach is of course just text, but it would be nice to be able to provide something richer as well, such as an image. Ideally it would even be possible to provide interactive content (although that option requires a different implementation with regards to screen reader suport).
@rolfsmeds thanks :) I think it would be nice to be able to return a component, which then should be able to handle all edge cases and you could even offer a few default implementations for the component which would be returned, like:
grid.setEmptyMessageProvider(
EmptyMessageProvider.factory()
.title("No Employees found")
.text("Add an employee by clicking ...").create());
grid.setEmptyMessageProvider(
EmptyMessageProvider.factory()
.icon(iconImage)
.title("No Employees found")
.button("Add an employee", clickHandler).create());
There is numerous cases with this. Sometimes you need to show message (e.g. no results with filter), sometimes it could be that Grid list of events which is actually empty, or sometimes it is just data taking time to load, and your probably would like to display spinner https://vaadin.com/directory/component/spinner instead of message.
