Vaadin-grid: Add an empty state template (data source is empty)

[pdesjardins90]

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

[jouni]

Related issue in Framework Grid: https://github.com/vaadin/framework/issues/9070

[andrewspy]

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.

[web-padawan]

There is now a cookbook example for GridFlow: https://cookbook.vaadin.com/grid-message-when-empty

[pdesjardins90]

excellent, thanks!

[web-padawan]

Reopened because this is quite highly requested feature and we might consider implementing it in the component.

[rolfsmeds]

A separate message for when there IS data, but the current filters filter out everything, would be useful as well.

[smashah]

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!