Repeater Component

Support
#1

Hello, I have a simple requirement but find absolutely no approach how to solve it. Probably I’m blind.
I’m looking for a repeater component that somehow allows to render a list of entities (e.g. via a template). Unfortunately, I don’t find anything like this at all.

Can anyone give me a hint? Thank you

#3

Hi,

We have no natural Repeater component, but you can use Table or DataGrid UI components to implement this behavior.

Unfortunately, it cannot be done declaratively, you can only create such a repeating blocks programmatically.

In case of Table there is addGeneratedColumn mechanism:

carsTable.addGeneratedColumn("color", entity -> {
    LookupPickerField<Color> field = uiComponents.create(LookupPickerField.NAME);
    field.setValueSource(new ContainerValueSource<>(carsDc, "color"));
    field.setOptions(new ContainerOptions<>(colorsDc));
    field.addAction(actions.create(LookupAction.class));
    field.addAction(actions.create(OpenAction.class));
    return field;
});

And in DataGrid, you could use combination of generated column and ComponentRenderer:

clientsDataGrid
        .addGeneratedColumn("generatedCell", new ColumnGenerator<Client, Component>() {
            @Override
            public Component getValue(DataGrid.ColumnGeneratorEvent<Client> event) {
                return generateClientRow(event.getItem());
            }

            @Override
            public Class<Component> getType() {
                return Component.class;
            }
        })
        .setRenderer(clientsDataGrid.createRenderer(ComponentRenderer.class));

In order to disable standard header and columns menu use headerVisible and columnsCollapsingAllowed:

<dataGrid id="clientsDataGrid"
          width="100%"
          dataContainer="clientsDc"
          selectionMode="NONE"
          bodyRowHeight="75"
          headerVisible="false"
          columnsCollapsingAllowed="false">
    <columns>
        <column id="generatedCell"/>
    </columns>
</dataGrid>

image

I’ve created a small demo that illustrates the second approach with DataGrid component, see Github repository.

If you do not need selection and have relatively small amount of items (up to 20-30) you can simply create panels programmatically and add them to ScrollBoxLayout.

1 Like