@hilla/react-crud
Version:
Hilla CRUD utils for React
106 lines • 4.79 kB
TypeScript
import type { AbstractModel, DetachedModelConstructor } from '@hilla/form';
import { type GridElement, type GridProps } from '@hilla/react-components/Grid.js';
import { type ForwardedRef, type JSX } from 'react';
import { type ColumnOptions } from './autogrid-columns.js';
import type { ListService } from './crud';
import type FilterUnion from './types/dev/hilla/crud/filter/FilterUnion.js';
export interface AutoGridRef<TItem = any> {
/**
* The underlying vaadin-grid DOM element.
*/
grid: GridElement<TItem> | null;
/**
* Refreshes the grid by reloading the data from the backend.
*/
refresh(): void;
}
interface AutoGridOwnProps<TItem> {
/**
* The service to use for fetching the data. This must be a TypeScript service
* that has been generated by Hilla from a backend Java service that
* implements the `dev.hilla.crud.ListService` interface.
*/
service: ListService<TItem>;
/**
* The entity model to use for the grid, which determines which columns to
* show and how to render them. This must be a Typescript model class that has
* been generated by Hilla from a backend Java class. The model must match
* with the type of the items returned by the service. For example, a
* `PersonModel` can be used with a service that returns `Person` instances.
*
* By default, the grid shows columns for all properties of the model which
* have a type that is supported. Use the `visibleColumns` option to customize
* which columns to show and in which order.
*/
model: DetachedModelConstructor<AbstractModel<TItem>>;
/**
* The property to use to detect an item's ID. The item ID is used to keep
* the selection state when reloading the grid.
*
* By default, the component uses the property annotated with
* `jakarta.persistence.Id`, or a property named `id`, in that order.
* This option can be used to override the default behavior, or define the ID
* property in case a class doesn't have a property matching the defaults.
*/
itemIdProperty?: string;
/**
* Allows to provide a filter that is applied when fetching data from the
* service. This can be used for implementing an external filter UI outside
* the grid. A custom filter is not compatible with header filters.
*
* **NOTE:** This is considered an experimental feature and the API may change
* in the future.
*/
experimentalFilter?: FilterUnion;
/**
* Allows to customize which columns to show and in which order. This must be
* an array of property names that are defined in the model. Nested properties
* can be specified using dot notation, e.g. `address.street`.
*/
visibleColumns?: string[];
/**
* Disables header filters, which are otherwise enabled by default.
*/
noHeaderFilters?: boolean;
/**
* Allows to add custom columns to the grid. This must be an array of
* `GridColumn` component instances. Custom columns are added after the
* auto-generated columns.
*/
customColumns?: JSX.Element[];
/**
* Allows to customize the props for individual columns. This is an object
* where the keys must be property names that are defined in the model, and
* the values are props that are accepted by the `GridColumn` component.
* Nested properties can be specified using dot notation, e.g.
* `address.street`.
*/
columnOptions?: Record<string, ColumnOptions>;
/**
* When enabled, inserts a column with row numbers at the beginning of the
* grid.
*/
rowNumbers?: boolean;
}
export type AutoGridProps<TItem> = GridProps<TItem> & Readonly<AutoGridOwnProps<TItem>>;
declare function AutoGridInner<TItem>({ service, model, itemIdProperty, experimentalFilter, visibleColumns, noHeaderFilters, customColumns, columnOptions, rowNumbers, ...gridProps }: AutoGridProps<TItem>, ref: ForwardedRef<AutoGridRef<TItem>>): JSX.Element;
type AutoGrid = <TItem>(props: AutoGridProps<TItem> & {
ref?: ForwardedRef<AutoGridRef<TItem>>;
}) => ReturnType<typeof AutoGridInner>;
/**
* Auto Grid is a component for displaying tabular data based on a Java backend
* service. It automatically generates columns based on the properties of a
* Java class and provides features such as lazy-loading, sorting and filtering.
*
* Example usage:
* ```tsx
* import { AutoGrid } from '@hilla/react-crud';
* import PersonService from 'Frontend/generated/endpoints';
* import PersonModel from 'Frontend/generated/com/example/application/Person';
*
* <AutoGrid service={PersonService} model={PersonModel} />
* ```
*/
export declare const AutoGrid: AutoGrid;
export {};
//# sourceMappingURL=autogrid.d.ts.map