How to work with the addComponentColumn using icons?

Support
1

I’m working on a few list-views, i started using the “addComponentColumn” to add some visual indicators to make it easyer to understand for the user, as shown in the picture below:

image

My problem is that i dont know to move the column to be the frist on the table and how to make the width editable, currenty this column is taking more space than necessary, the image below shows my code:

image

2

Hi, @olijoseluciano

The addComponentColumn method adds the column as the last one. To change it, you can use the io.jmix.flowui.component.grid.DataGrid#setColumnPosition method to change a column position. Example:

    @Subscribe("usersDataGrid")
    protected void onUsersDataGridAttach(final AttachEvent event) {
        Grid.Column<User> fullNameColumn = usersDataGrid.addComponentColumn(user ->
                        new Span(user.getFirstName() + " " + user.getLastName()))
                .setHeader("Full name");

        usersDataGrid.setColumnPosition(fullNameColumn, 0);
    }

If adding a column is not done when some condition is met, you can declare the column in the view descriptor and configure a custom renderer for it (see Jmix documentation).

Regards,
Maria.

1 Like
3

Thanks for the answer, but there are still some points of doubt:

1 - How to put the added column in any order of the line not only the frist and the last, because i have other view with more than only one added column.

2 - How to make de width more dinamic to the value inside of the cell, for exemple: the icon is small but takes a lot of space in the line and the description is long but it’s compressed insteed of the icon.I want to know if there is a way, to make the column more dinamic to the width of the value in the cell.

3 - How to add a column with label using the addComponentColumn.

4

Hi, @olijoseluciano

In the case you can use a combination of declaring the column in the view descriptor and configure custom renderer. The order of columns are defined the order of <column> tags in the <columns> tag.

Example with the custom column with the custom renderer, header and fixed width:
View descriptor:

        <dataGrid id="usersDataGrid"
                  width="100%"
                  columnReorderingAllowed="true"
                  minHeight="20em"
                  dataContainer="usersDc">

            <columns resizable="true">
                <column property="username"/> <!--the first column -->
                <column key="fullName" header="Full name" width="5em"/>
                <!-- other columns -->

            </columns>
        </dataGrid>

View controller:

    @Supply(to = "usersDataGrid.fullName", subject = "renderer")
    protected Renderer<User> usersDataGridFullNameRenderer() {
        return new ComponentRenderer<>(user -> {
            Span span = new Span();
            span.setText(StringUtils.joinWith(" ", user.getFirstName(), user.getLastName()));

            return span;
        });
    }

Regards,
Maria.