feat: add slot for empty state content

[tomivirkki]

Description

Add support for slotting grid empty state content, which will be displayed when there are no body rows to show otherwise.

Part of vaadin/platform#5719

To be implemented separately:

• "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)"
  • A renderer type of function that generates the slotted empty-state content
• Consider expanding the "cell-focus" event feature to cover focusing the empty-state cell
• Consider transforming __showEmptyState into a public readonly emptyState (naming tbd) property that reflects as an attribute and notifies on change

Example:

<vaadin-grid>
  <vaadin-grid-column header="Name"></vaadin-grid-column>

  <div slot="empty-state">
    No employees found.
  </div>
</vaadin-grid>

Kapture.2024-05-20.at.15.48.30.mp4

Type of change

Feature

[sonarqubecloud]

Quality Gate passed

Issues
2 New issues
0 Accepted issues

Measures
0 Security Hotspots
No data about Coverage
0.0% Duplication on New Code

See analysis details on SonarCloud

[vursen]

The empty state is currently shown even when the grid is loading. Depending on the content, this can be misleading if loading takes a while. For example:

Screen.Recording.2024-05-21.at.16.27.19.mov

[tomivirkki]

The empty state is currently shown even when the grid is loading. Depending on the content, this can be misleading if loading takes a while. For example:

I assume this is one of the cases that will be fixed by:

• "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)"

[tomivirkki]

The empty state is currently shown even when the grid is loading. Depending on the content, this can be misleading if loading takes a while. For example:

After some internal planning, we decided to keep the current slot approach as the only API for empty content for now (a renderer function is possible to add later if necessary). Here's an example (React) of how you might dynamically change the content of your empty state slot:

type Item = {
  name: string;
};

export default function () {
  const [loading, setLoading] = useState(false);
  const [emptyItems, setEmptyItems] = useState(false);
  const [dataProvider, setDataProvider] = useState<GridDataProvider<Item> | null>(null);

  const lazyDataProvider: GridDataProvider<Item> = useCallback((_, callback) => {
    // Return no items after a delay
    setTimeout(() => {
      const items: Item[] = [];
      callback(items, items.length);
      setEmptyItems(items.length === 0);
    }, 2000);
  }, []);

  let emptyStateContent = null;
  if (!dataProvider) {
    emptyStateContent = <div>No data provider</div>;
  } else if (loading) {
    emptyStateContent = <div>Loading...</div>;
  } else if (emptyItems) {
    emptyStateContent = <div>No items</div>;
  }

  return (
    <>
      <Grid itemIdPath="name" dataProvider={dataProvider} onLoadingChanged={(e) => setLoading(e.detail.value)}>
        <GridColumn path="name" width="200px" footer={'Footer'} />
        <GridColumn path="name" width="200px" footer={'Footer'} />

        <div slot="empty-state">{emptyStateContent}</div>
      </Grid>

      <Button
        onClick={() => {
          setDataProvider(() => lazyDataProvider);
        }}
      >
        Set data provider
      </Button>
    </>
  );
}

Kapture.2024-05-23.at.15.28.13.mp4

[vaadin-bot]

This ticket/PR has been released with Vaadin 24.5.0.alpha1 and is also targeting the upcoming stable 24.5.0 version.