You already know what a crudl is. A crudl is the acronym from (create, read, update, delete and list) and it is the typical list we see in all enterprise applications.

The crud is composed of a search bar, filters, data and pagination.

  • Fluent
  • Declarative

record Filters(int age) {}
@Serdeable
record Row(String name, int age) {}

@Route("/crudls/basic")
@Slf4j
@RequiredArgsConstructor
public class BasicCrudl implements ComponentTreeSupplier, ReactiveCrudlBackend<Filters, Row> {

  private final Service service;

  @Override
  public Crudl getComponent(HttpRequest httpRequest) {
    return Crudl.builder() // vertical layout as default container for children
      .title("Basic crudl")
      .id("crud")
      .filters(List.of(
        FormField.builder()
          .id("age")
          .label("Age")
          .dataType(FieldDataType.integer)
          .build()
      ))
      .searchable(true)
      .columns(List.of(
        GridColumn.builder()
          .id("name")
          .label("Name")
          .build(),
        GridColumn.builder()
          .id("age")
          .label("Age")
          .build()
      ))
      .emptyStateMessage("Please search.")
      .build();
  }

  @Override
  public Class<Filters> filtersClass() {
    return Filters.class;
  }

  @Override
  public Mono<CrudlData<Row>> search(String searchText, Filters filters, Pageable pageable, HttpRequest httpRequest) {
    return service.search(searchText, filters, pageable).map(page -> new CrudlData<>(page,
      "No items found. Please try again."));
  }
  

TBD.

Available properties

This is the list of available properties for a crud:

PropertyDescriptionNotes
idid for this component
cssClasseslist of css classescontent of the css attribute
styleinline style attributescontent of the style attribute
fullWidthshortcut to set width:100%true/false
crudlTypeOne of grid, cards