Grid: empty state message

[rolfsmeds]

Description

A way to provide a message or other custom content in the Grid when there is no data to display. (This could be either because the data set is empty, or because the currently applied filters omit all the available data.)

Acceptance criteria

• [ ] API for providing a function that returns a string/component/html to be shown when the Grid is empty, based on custom logic to determine what content to return (e.g. depending on whether the emptiness is due to filters or something else)
• [ ] The content is rendered into light DOM
• [ ] The content is rendered either before the <table> element, or in a single, grid-viewport-width cell in its body.
• [ ] The empty state content container can be targeted for styling through a part name or similar (e.g. ::part(empty-state))

Feature request issue: https://github.com/vaadin/web-components/issues/2043

Visual design

The default plaintext message is rendered with

• Secondary text color
• Slightly increased vertical padding (--lumo-space-m) compared to cell content

General criteria

• [ ] APIs reviewed

• [x] Design : included in AC.

• [ ] Performance

• [ ] UX/DX tests in Alpha

• [ ] Documentation:

• [ ] How to test?

• [ ] Limitations:

Security

• [ ] Security implications have been taken into account (elaborate or link to product security requirement specification if there are implications)

[knoobie]

A common use case to be considered:

• Lazy Loading Grid's where the initial server / query takes some time (multiple seconds) - normally (so far / until now) implemented with a custom class that adds for example a spinner to the Grid's body and removed that spinner / adds items later with an asynchronous Push callback

[rolfsmeds]

I think loading state is a separate concern (covered by this issue), as the default visual representation would probably be quite different. (The linked issue proposes using the loading property to apply custom styling for this in the meantime.)