Search code examples
javagridvaadinvaadin-flowvaadin-grid

Change icon on a selected row in a Vaadin Grid


So, I have a grid called "eventGrid". I added a component column with a down-arrow icon. When a user clicks on a row, addition information is displayed for that row. I want to change the down arrow to an up arrow for the selected row. How can I achieve this?

 eventGrid.addColumn(Person::getFirst).setHeader("First Name");
    eventGrid.addColumn(Person::getLast).setHeader("Last Name");
    eventGrid.addColumn(Person::getNumber).setHeader("Phone Number");


 eventGrid.addComponentColumn(item -> {
      Icon icon = new Icon("lumo", "angle-down");
      return icon;
    }).setWidth("6em").setFlexGrow(0);

Solution

  • Assuming you have an in-memory DataProvider:

            Grid<Person> eventGrid = new Grid<Person>();
            eventGrid.addColumn(Person::getFirst).setHeader("First Name");
            eventGrid.addColumn(Person::getLast).setHeader("Last Name");
            eventGrid.addColumn(Person::getNumber).setHeader("Phone Number");
            eventGrid.addComponentColumn(item -> {
                Icon icon = new Icon("lumo", "angle-down");
                if (item.equals(eventGrid.asSingleSelect().getValue())) {
                    icon = new Icon("lumo", "angle-up");
                }
                return icon;
            }).setWidth("6em").setFlexGrow(0);
            eventGrid.addSelectionListener(e -> {
                eventGrid.getListDataView().refreshAll();
            });