vaadin / hilla

Build better business applications, faster. No more juggling REST endpoints or deciphering GraphQL queries. Hilla seamlessly connects Spring Boot and React to accelerate application development.
https://hilla.dev
Apache License 2.0
923 stars 57 forks source link

Bring empty state to AutoGrid #2895

Open rbrki07 opened 2 weeks ago

rbrki07 commented 2 weeks ago

Describe your motivation

Vaadin 24.5 added an empty state property to the grid component: https://vaadin.com/docs/latest/components/grid#empty-state. It would be great to be able to use this property in AutoGrid as well.

Describe the solution you'd like

<AutoGrid model={EventModel} service={EventService} emptyState={'No events found.'}/>

Describe alternatives you've considered

<AutoGrid model={EventModel} service={EventService}>
  <span slot="empty-state">No events found.</span>
</AutoGrid>

Or

import { useRef, useEffect } from 'react';
import { AutoGrid, AutoGridRef } from '@vaadin/hilla-react-crud';
import EventModel from 'Frontend/generated/com/example/application/entities/EventModel';
import { EventService } from 'Frontend/generated/endpoints';

export default function EventsView() {
  const grid = useRef<AutoGridRef>(null);
  useEffect(() => {
    if (grid.current) {
      grid.current.grid.setEmptyState('No events found.');
    }
  }, [grid]);

  return <AutoGrid ref={grid} model={EventModel} service={EventService} />;
}

Additional context

No response

platosha commented 2 weeks ago

Adding the emptyState property sounds good. The underlying slotted element could have display: contents; in addition.

rbrki07 commented 2 weeks ago

I would like to provide a PR for this.

Why was this PR not merged: https://github.com/vaadin/react-components/pull/248? It would be a good base for implementing this feature request.