Declarative renderers for DataGrid columns

[Flaurite]

Description

For now, we cannot change formatting of column values in DataGrid like in classic UI:

<column id="measureDate">
     <formatter>
            <date format="dd/MM/yyyy HH:mm:ss"/>
      </formatter>
</column>

Solution

The following renderers can be defined declaratively in XML:

• localDateRenderer
• localDateTimeRenderer
• numberRenderer

For example:

<column property="dueDate">
    <localDateRenderer format="yyyy-MM-dd"/>
</column>

Alternatively, renderers can by supplied in a view controller using the new @Supply annotation. Method annotated with @Supply returns a value that will be passed as a input parameter to a method defined by subject.

In the example below, the returned ComponentRenderer instance is used as an input parameter for Column#setRenderer(Renderer):

@Supply(to = "tasksDataGrid.status", subject = "renderer")
private Renderer<Task> tasksDataGridStatusRenderer() {
    return new ComponentRenderer<>(Span::new, (span, task) -> {
        if (task.getStatus() == null) {
            span.getElement().removeAttribute("theme");
            span.getElement().removeAllChildren();
        } else {
            String theme = switch (task.getStatus()) {
                case OPEN -> "success";
                case CLOSED -> "error";
            };

            span.getElement().setAttribute("theme", "badge " + theme);
            span.setText(task.getName());
        }
    });
}

From now, columns can be defined without property attribute. In this case, EmptyValueProvider is set for a column and can be replaced by a Renderer later on, e.g.:

<column key="test" header="TEST"/>

@Supply(to = "tasksDataGrid.test", subject = "renderer")
private Renderer<Task> tasksDataGridTestRenderer() {
    return new TextRenderer<>(item ->
            "Test: " + item.getName());
}

Result (for all code above):

For QA:

Probably wait for https://youtrack.jmix.io/issue/JST-4176/Support-new-Supply-annotation