feat: add empty state API to grid

packages/react-components/src/Grid.tsx

@@ -1,4 +1,11 @@
-import { type ComponentType, type ForwardedRef, forwardRef, type ReactElement, type RefAttributes } from 'react';
+import {
+  type ComponentType,
+  type ForwardedRef,
+  forwardRef,
+  type ReactElement,
+  type RefAttributes,
+  type ReactNode,
+} from 'react';
 import {
   Grid as _Grid,
   type GridDefaultItem,
@@ -13,6 +20,7 @@ export * from './generated/Grid.js';
 export type GridProps<TItem> = Partial<Omit<_GridProps<TItem>, 'rowDetailsRenderer'>> &
   Readonly<{
     rowDetailsRenderer?: ComponentType<GridRowDetailsReactRendererProps<TItem>> | null;
+    emptyState?: ReactNode;
   }>;
 
 function Grid<TItem = GridDefaultItem>(
@@ -25,6 +33,8 @@ function Grid<TItem = GridDefaultItem>(
     <_Grid<TItem> {...props} ref={ref} rowDetailsRenderer={rowDetailsRenderer}>
       {props.children}
       {portals}
+
+      {props.emptyState && <div slot="empty-state">{props.emptyState}</div>}
     </_Grid>
   );
 }

test/Grid.spec.tsx

@@ -615,4 +615,44 @@ describe('Grid', () => {
       expect(treeFooterCell).to.have.text('Name Footer');
     });
   });
+
+  describe('empty state', () => {
+    it('should not render empty state content by default', async () => {
+      render(
+        <Grid>
+          <GridColumn path="name"></GridColumn>
+        </Grid>,
+      );
+
+      const grid = await findByQuerySelector('vaadin-grid');
+      const emptyState = grid.querySelector('[slot="empty-state"]');
+      expect(emptyState).not.to.exist;
+    });
+
+    it('should render empty state content', async () => {
+      render(
+        <Grid emptyState="No items">
+          <GridColumn path="name"></GridColumn>
+        </Grid>,
+      );
+
+      const grid = await findByQuerySelector('vaadin-grid');
+      const emptyState = grid.querySelector('[slot="empty-state"]');
+      expect(emptyState).to.exist;
+      expect(emptyState).to.have.text('No items');
+    });
+
+    it('should render empty state component', async () => {
+      render(
+        <Grid emptyState={<div>No items</div>}>
+          <GridColumn path="name"></GridColumn>
+        </Grid>,
+      );
+
+      const grid = await findByQuerySelector('vaadin-grid');
+      const emptyState = grid.querySelector('[slot="empty-state"]');
+      expect(emptyState).to.exist;
+      expect(emptyState).to.have.text('No items');
+    });
+  });
 });